@charset "UTF-8";
/*
.form-panel{
  @include form-field;
  .form-label{
    line-height: 40px !important;
    padding-right: 40px;
  }
  .form-input{
    .form-input-wrapper{
      position: relative;

      i{
        position: absolute;
        bottom: 100%;
        right: 10px;
        color: #555;
        font-size: 12px;
        line-height: 40px;
        border: 0;
      }

    }
  }

  .filter-panel{
    $header-height: 60px;

    position: fixed;
    top: 100%;
    left: 50%;
    //bottom: 0;
    max-height: 600px;
    height: 80vh;
    width: 80vw;
    max-width: 600px;
    background: rgba(255,255,255,1);
    z-index: 20000;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
    flex-direction: column;
    justify-content: stretch;
    transform: translateX(-50%) translateY(50%);
    display: flex;
    overflow: hidden;
    @include rem(font-size, 16px);

    .form-panel.active &{
      //display: block;
    }

    > *{
      padding: var(--gutter);
      position: relative;
    }

    header{
      padding: 0;
      border-bottom: 1px solid #eee;
      h6{
        text-transform: uppercase;
        @include rem(font-size, 14px);
        line-height: $header-height;
        padding-left: var(--gutter);
        @include animate;
      }

      .bt-close{
        @include animate;
        position: absolute;
        top: 0;
        right: 0;
        background: none;
        border: 0;
        @include rem(font-size, 20px);
        line-height: $header-height;
        width: $header-height;
      }

      .bt-back{
        @include animate;
        position: absolute;
        top: 0;
        left: 0;
        background: none;
        border: 0;
        @include rem(font-size, 20px);
        line-height: $header-height;
        width: $header-height;
      }
    }

    footer{
      button{
        @extend %button;
      }
    }

    label{
      padding: calc(var(--gutter)/4);
      display: block;
      &:hover{
        background: #eee;
      }
    }

    &[data-index="0"]{
      [data-index="0"]{
        left: 0%;
      }
      [data-index="1"]{
        left: 100%;
      }
      .bt-back{
        transform: translateX(-100%);
      }
      h6{
        transform: translateX(0px);
      }
    }

    &[data-index="1"]{
      [data-index="0"]{
        left: -100%;
      }
      [data-index="1"]{
        left: 0%;
      }
      .bt-back{
        transform: translateX(0%);
      }
      h6{
        transform: translateX($header-height/2);
      }
    }

    .wrapper-main{
      height: 100%;
      max-height: 100%;
      min-width: 100%;
      position: relative;
    }

    .wrapper{
      @include animate;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      overflow: auto;

      &[data-index="0"]{
        > div{
          > ul{
            display: none;
          }
        }
      }

      &[data-index="1"]{
        > div{
          > label{
            display: none;
          }
          > ul{
            display: block;
          }
        }
      }

      > div{
        label{
          font-weight: 300;
          padding: 0 calc(2 * var(--gutter));
          border-bottom: 1px solid #eee;
          position: relative;
          display: flex;
          align-items: center;
          min-height: 60px;
          i.color{
            display: inline-block;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-right: 0.5em;
            transform: translateY(4px);
            border: 2px solid #fff;
            box-shadow: 0px 0px 2px #aaa;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            overflow: hidden;
          }
          figure{
            width: 80px;
            display: block;
            margin-right: 1em;
            img{
              width: 100%;
            }
          }
          span{
            display: block;
          }
          i.tick{
            opacity: 0.1;
            float: left;
            margin-right: 1em;
          }
          input{
            position: absolute;
            visibility: hidden;
            opacity: 0;

            &:checked ~ i{
              opacity: 1;
            }
            &:checked ~ span{
              font-weight: bold;
            }
          }
        }
        > label{
          font-weight: 600;
          .count{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 1em;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-radius: 50%;
            background: rgba(0,0,0,0.05);
            font-size: 13px;
            font-style: normal;
            opacity: 1;

            &[rel="0"]{
              opacity: 0;
            }
          }
        }
        ul{
          @include clearlist;
          li{
            &.all{
              background: #f7f7f7;
              label{
                border-color: #aaa;
                i.tick{
                  position: relative;
                  &:after{
                    content:"";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translateY(-50%) translateX(-50%);
                    width: 24px;
                    height: 24px;
                    border: 1px solid #000;
                  }
                }
              }
            }
          }
          &.has-all{
            li{
              input ~ .tick{
                opacity: 1;
              }
            }
          }
        }
        &.active ul{
          display: block;
        }
      }
    }
  }
}
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

* {
  box-sizing: border-box;
}

button, input {
  outline: 0;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
}

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

/* BREAKPOINTS */
/* MEDIA QUERIES */
/*
$lt-smartphone: only screen and (max-device-width: 576px);
*/
.is-xxs, .is-xs, .is-s, .is-m, .is-l, .is-xl {
  display: none;
}

@media only screen and (min-width: 340px) {
  .is-xxs {
    display: block;
  }
}

@media only screen and (min-width: 576px) {
  .is-xs {
    display: block;
  }
}

@media only screen and (min-width: 768px) {
  .is-s {
    display: block;
  }
}

@media only screen and (min-width: 992px) {
  .is-m {
    display: block;
  }
}

@media only screen and (min-width: 1200px) {
  .is-l {
    display: block;
  }
}

@media only screen and (min-width: 1600px) {
  .is-xl {
    display: block;
  }
}

.only-xs, .only-s, .only-m, .only-l, .only-xl {
  display: none;
}

@media only screen and (min-width: 0px) and (max-width: 340px) {
  .only-xxs {
    display: block;
  }
}

@media only screen and (min-width: 0px) and (max-width: 576px) {
  .only-xs {
    display: block;
  }
}

@media only screen and (min-width: 577px) and (max-width: 768px) {
  .only-s {
    display: block;
  }
}

@media only screen and (min-width: 769px) and (max-width: 992px) {
  .only-m {
    display: block;
  }
}

@media only screen and (min-width: 993px) and (max-width: 1200px) {
  .only-l {
    display: block;
  }
}

@media only screen and (min-width: 1201px) {
  .only-xl {
    display: block;
  }
}

@font-face {
  font-family: "icons";
  src: url("../fonts/icons/icons.eot");
  src: url("../fonts/icons/icons.eot?#iefix") format("eot"), url("../fonts/icons/icons.woff2") format("woff2"), url("../fonts/icons/icons.woff") format("woff"), url("../fonts/icons/icons.ttf") format("truetype"), url("../fonts/icons/icons.svg#icons") format("svg");
}
.icon:before, .mobile-navigation-opened #navigation:before {
  font-family: "icons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  /* speak: none; only necessary if not using the private unicode range (firstGlyph option) */
  text-decoration: none;
  text-transform: none;
}

.icon-arrow-down:before {
  content: "\e001";
}

.icon-arrow-left:before {
  content: "\e002";
}

.icon-arrow-right:before {
  content: "\e003";
}

.icon-arrow-square-right:before {
  content: "\e004";
}

.icon-check:before {
  content: "\e005";
}

.icon-clock:before {
  content: "\e006";
}

.icon-close:before {
  content: "\e007";
}

.icon-codepen:before {
  content: "\e008";
}

.icon-dribbble:before {
  content: "\e009";
}

.icon-facebook:before {
  content: "\e00a";
}

.icon-foc-arrow-bottom:before {
  content: "\e00b";
}

.icon-foc-arrow-full-bottom:before {
  content: "\e00c";
}

.icon-foc-arrow-full-left:before {
  content: "\e00d";
}

.icon-foc-arrow-full-right:before {
  content: "\e00e";
}

.icon-foc-arrow-full-top:before {
  content: "\e00f";
}

.icon-foc-arrow-left:before {
  content: "\e010";
}

.icon-foc-arrow-right:before {
  content: "\e011";
}

.icon-foc-arrow-top:before {
  content: "\e012";
}

.icon-foc-check:before {
  content: "\e013";
}

.icon-foc-close:before, .mobile-navigation-opened #navigation:before {
  content: "\e014";
}

.icon-foc-plus:before {
  content: "\e015";
}

.icon-instagram:before {
  content: "\e016";
}

.icon-linkedin:before {
  content: "\e017";
}

.icon-play:before {
  content: "\e018";
}

.icon-spotify-full:before {
  content: "\e019";
}

.icon-spotify:before {
  content: "\e01a";
}

.icon-twitter:before {
  content: "\e01b";
}

.icon-whatsapp:before {
  content: "\e01c";
}

.icon-youtube:before {
  content: "\e01d";
}

@font-face {
  font-family: "Bastardo Grotesk";
  src: url("../fonts/BastardoGrotesk-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Telegraf";
  src: url("../fonts/PPTelegraf-Variable.woff2") format("woff2-variations");
  font-style: normal;
  letter-spacing: -0.015em;
  font-weight: 200 900;
  font-display: swap;
  font-optical-sizing: auto;
  font-weight: 200 1000;
  font-style: normal;
  font-variation-settings: "wdth" 100, "YTLC" 500;
}
:root {
  --app-height: 100%;
  --nav-height: 70px;
  --nav-min-height: 20px;
  --logo-height: 80px;
  --supplement-total: 1;
  --color-main: 255, 54, 0;
  --color-secondary: 255, 153, 255;
  --color-red: var(--color-main);
  --color-pink: var(--color-secondary);
  --color-white: 255, 255, 255;
  --color-black: 10, 9, 2;
  --color-full-black: 0,0,0;
  --color-grey: 110, 110, 110;
  --color-light-grey: 224, 224, 224;
  --color-grey-background: 245, 245, 245;
  --color-danger: 255, 0, 0;
  --color-promotion: 214, 0, 87;
  --color-warning: 255, 158, 24;
  --color-success: 20, 167, 42;
  --shadow: 0px 2px 15px 0px rgba(var(--color-black), 0.1);
  --size: 38vw;
  --font-size: clamp(18px, calc((3vw + 3vh) / 2), 36px);
  --logo-size: clamp(100px, var(--size), 300px);
  --margin-full: var(--logo-size);
  --margin-half: calc(var(--logo-size) / 2);
  --margin-3: calc(var(--logo-size) / 3);
  --margin-4: calc(var(--logo-size) / 4);
  --margin-6: calc(var(--logo-size) / 6);
  --margin-8: calc(var(--logo-size) / 8);
  --logo-offset: calc(var(--margin-3) + var(--margin-8)*2);
  --pack-max-width: 330px;
  --game-transition-duration: 0.5s;
  --game-transition-delay: 0.45s;
  --rem-baseline: 16px;
  --font-content: "Telegraf", sans-serif;
  --font-special: "Bastardo Grotesk", sans-serif;
  --font-size-title: 52px;
  --fw-thin: 100;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 600;
  --fw-extra-bold: 700;
  --page-width: 80%;
  --page-gutter-width: 40px;
  --gutter: clamp(25px, calc(var(--size) / 6), 50px);
  --gutter-w: 3vw;
  --gutter-h: 3vh;
  --gutter-grid: 3vw;
  --product-column: 4;
  --transition: all .3s ease-in-out;
}
@media only screen and (max-width: 768px) {
  :root {
    --nav-height: 88px;
  }
}
@media only screen and (max-width: 992px) {
  :root {
    --size: 40vw;
    --logo-size: clamp(80px, var(--size), 280px);
  }
}
@media only screen and (max-width: 768px) {
  :root {
    --rem-baseline: 14px;
  }
}
@media only screen and (max-width: 992px) {
  :root {
    --product-column: 3;
  }
}
@media only screen and (max-width: 768px) {
  :root {
    --page-width: 95%;
    --page-gutter-width: 20px;
    --gutter: 20px;
    --gutter-w: 1.5vw;
    --gutter-h: 1.5vh;
    --gutter-grid: 1.5vw;
    --product-column: 2;
  }
}
@media only screen and (max-width: 576px) {
  :root {
    --product-column: 1;
  }
}

::-webkit-scrollbar {
  width: 9px;
}

::-webkit-scrollbar-track {
  background: rgb(var(--color-pink));
}

::-webkit-scrollbar-thumb {
  background: rgb(var(--color-black));
  border: rgb(var(--color-pink)) 2px solid;
  border-radius: 10px;
  transition: background 0.2s ease-in-out;
}
::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--color-red));
}

:root {
  --btn-border-radius: 0;
  --btn-font-size: 1rem;
  --btn-background: rgb(var(--color-black));
  --btn-color: rgb(var(--color-pink));
}

.supplement-pack-popup .phone-button, .btn,
.bt, .btn-third,
.bt-third, .btn-secondary,
.bt-secondary, .btn-fire, .btn-primary,
.bt-primary {
  font-weight: var(--fw-regular);
  font-family: var(--font-special);
  padding: 0.5em 1.25em;
  text-transform: inherit;
  border: 2px solid transparent;
  border-radius: var(--btn-border-radius);
  position: relative;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  line-height: 1em;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.3, 1, 0.8, 1);
  min-height: 2.625em;
}
.supplement-pack-popup .phone-button span, .btn span,
.bt span, .btn-third span,
.bt-third span, .btn-secondary span,
.bt-secondary span, .btn-fire span, .btn-primary span,
.bt-primary span {
  position: relative;
  z-index: 5;
  top: 0.175em;
}
.supplement-pack-popup .phone-button .icon, .supplement-pack-popup .phone-button .mobile-navigation-opened #navigation, .mobile-navigation-opened .supplement-pack-popup .phone-button #navigation, .supplement-pack-popup .mobile-navigation-opened .phone-button #navigation, .btn .icon, .btn .mobile-navigation-opened #navigation, .mobile-navigation-opened .btn #navigation,
.bt .icon,
.bt .mobile-navigation-opened #navigation,
.mobile-navigation-opened .bt #navigation, .btn-third .icon, .btn-third .mobile-navigation-opened #navigation, .mobile-navigation-opened .btn-third #navigation,
.bt-third .icon,
.bt-third .mobile-navigation-opened #navigation,
.mobile-navigation-opened .bt-third #navigation, .btn-secondary .icon, .btn-secondary .mobile-navigation-opened #navigation, .mobile-navigation-opened .btn-secondary #navigation,
.bt-secondary .icon,
.bt-secondary .mobile-navigation-opened #navigation,
.mobile-navigation-opened .bt-secondary #navigation, .btn-fire .icon, .btn-fire .mobile-navigation-opened #navigation, .mobile-navigation-opened .btn-fire #navigation, .btn-primary .icon, .btn-primary .mobile-navigation-opened #navigation, .mobile-navigation-opened .btn-primary #navigation,
.bt-primary .icon,
.bt-primary .mobile-navigation-opened #navigation,
.mobile-navigation-opened .bt-primary #navigation {
  font-size: 12px;
  position: relative;
  top: 1px;
  margin-left: 0.25em;
  display: inline-block;
}
@media only screen and (max-width: 768px) {
  .supplement-pack-popup .phone-button, .btn,
  .bt, .btn-third,
  .bt-third, .btn-secondary,
  .bt-secondary, .btn-fire, .btn-primary,
  .bt-primary {
    margin-top: calc(var(--gutter-h) / 4);
  }
}

.btn-fire, .btn-primary,
.bt-primary {
  color: var(--btn-color);
  background: var(--btn-background);
  border-color: var(--btn-background);
}
.btn-fire:hover, .btn-primary:hover,
.bt-primary:hover {
  box-shadow: 0px 0px 0px 2.5px rgb(var(--color-pink)) inset, 0px 0px 0px 5px rgb(var(--color-black));
}

.btn-secondary,
.bt-secondary {
  color: var(--btn-background);
  background: none;
  border-color: var(--btn-background);
  padding: 0.5em 2em;
}
.btn-secondary:hover,
.bt-secondary:hover {
  box-shadow: 0px 0px 0px 2.5px rgb(var(--color-black)) inset, 0px 0px 0px 3px rgb(var(--color-pink)), 0px 0px 0px 7px rgb(var(--color-black));
}

.btn-third,
.bt-third {
  color: var(--btn-background);
  background: none;
  padding: 0.5em 1.25em;
}
.btn-third:hover,
.bt-third:hover {
  box-shadow: 0px 0px 0px 2.5px rgb(var(--color-black)) inset, 0px 0px 0px 3px rgb(var(--color-pink)), 0px 0px 0px 7px rgb(var(--color-black));
}

.buttons-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

:root {
  --form-spacing: calc(var(--gutter)/2);
  --form-padding-sides: .5em;
  --form-padding-tops: 1em;
}
@media only screen and (max-width: 768px) {
  :root {
    --form-spacing: var(--gutter);
  }
}

.form-fields {
  display: flex;
  flex-wrap: wrap;
}

.form-text {
  width: calc(50% - var(--gutter));
}

.form-radio {
  width: 100%;
}

.form-checkbox {
  width: 100%;
}

.form-textarea {
  width: 100%;
}

#popin-contact {
  backdrop-filter: blur(5px);
  background: rgba(var(--color-grey), 0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: var(--app-height);
  z-index: 1000000000000;
  align-items: center;
  justify-content: center;
  display: none;
}
.is-open#popin-contact {
  opacity: 1;
}
#popin-contact .icon-foc-close, #popin-contact .mobile-navigation-opened #navigation, .mobile-navigation-opened #popin-contact #navigation {
  cursor: pointer;
}
#popin-contact > .wrapper {
  padding: var(--gutter);
  position: relative;
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
}
@media only screen and (max-width: 992px) {
  #popin-contact > .wrapper {
    width: calc(100% - var(--gutter) * 2);
  }
}

#popin-contact > .wrapper {
  max-height: calc(100vh - var(--gutter) * 2);
  transform: translateY(-50%);
  top: 50%;
}

#popin-contact > .wrapper {
  background: rgb(var(--color-white));
}
#popin-contact .icon-foc-close, #popin-contact .mobile-navigation-opened #navigation, .mobile-navigation-opened #popin-contact #navigation {
  position: absolute;
  top: 0;
  right: 0;
  padding: calc(var(--gutter) / 2);
  transition: all 0.25s ease-out;
  color: rgb(var(--color-warm-grey));
}
#popin-contact .icon-foc-close:hover, #popin-contact .mobile-navigation-opened #navigation:hover, .mobile-navigation-opened #popin-contact #navigation:hover {
  opacity: 0.3;
}
#popin-contact .form-buttons {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--gutter));
}

.popin-contact-header,
.form-contact-header {
  margin-bottom: calc(var(--gutter) / 2);
  padding-bottom: calc(var(--gutter) / 2);
  border-bottom: 1px solid rgba(var(--color-grey), 0.1);
}

.popin-contact-title {
  font-size: 1.5em;
  margin-bottom: 0;
}

.popin-concerned-name {
  font-family: var(--font-content);
  font-size: 1.2rem;
  font-weight: var(--fw-regular);
  display: block;
  margin-top: 0.25em;
}

.swiper-slide {
  height: initial;
}

.media-banner .swiper-scrollbar {
  bottom: calc(var(--gutter) / 2);
}

.media-banner {
  width: 100%;
  position: relative;
  z-index: 0;
}
.media-banner .swiper-wrapper {
  min-height: calc(var(--app-height) - var(--nav-height));
}

.background-media, .full-background > * {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  object-fit: cover;
}
.background-media > *, .full-background > * > * {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

.background-blur .background-media.media-video, .background-blur .background-media.media-image > *, .full-background.background-blur .media-video,
.full-background.background-blur .media-image > * {
  filter: blur(20px);
  width: calc(100% + 20px*6);
  height: calc(100% + 20px*6);
  transform: translate(calc(20px*-3), calc(20px*-3));
}

.media-banner-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--gutter-w);
  padding-bottom: calc(var(--gutter) * 2);
  overflow: hidden;
  gap: var(--gutter);
}
@media only screen and (max-width: 768px) {
  .media-banner-slide {
    flex-direction: column;
  }
}
@media only screen and (min-width: 992px) {
  .media-banner-slide {
    padding-bottom: var(--gutter-w);
  }
}

.media-banner-visual {
  max-width: 100%;
}
.media-banner-visual img,
.media-banner-visual video {
  width: 100%;
}

@media only screen and (max-width: 768px) {
  .copyrights {
    margin-bottom: var(--gutter);
  }
  .copyrights a {
    min-height: auto;
  }
}
.copyrights > .wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
@media only screen and (max-width: 768px) {
  .copyrights > .wrapper {
    font-size: 0.8em;
    gap: 0 calc(var(--gutter-w) * 2);
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    flex-wrap: wrap;
  }
}
@media only screen and (max-width: 768px) {
  .copyrights .site-copyright {
    display: flex;
  }
}
.copyrights .copyright-details {
  color: rgba(var(--color-grey), 0.5);
  font-size: 0.85em;
  display: block;
  line-height: 1.2em;
  margin-top: 0.5em;
}

#focstudio {
  width: 120px;
}
@media only screen and (min-width: 992px) {
  #focstudio {
    align-self: flex-end;
  }
}

.focstudio-link {
  display: flex;
  font-size: 0.9em;
  align-items: center;
  gap: 0.25em 1em;
  line-height: 1em;
  text-align: right;
}

/* HTML: <div class="loader"></div> */
.loader {
  --size: var(--margin-3);
  --animation-size: calc(var(--margin-half));
  width: var(--size);
  height: var(--size);
  /*--c:no-repeat linear-gradient(rgb(var(--color-red)) 0 0);
  background: var(--c),var(--c),var(--c),var(--c);*/
  --img-1: url(https://www.focstud.io/images/loader-top-left.jpg);
  --img-2: url(https://www.focstud.io/images/loader-top-right.jpg);
  --img-3: url(https://www.focstud.io/images/loader-bottom-right.jpg);
  --img-4: url(https://www.focstud.io/images/loader-bottom-left.jpg);
  transform-origin: center;
  background: var(--img-1) no-repeat 0 0, var(--img-2) no-repeat 100% 0, var(--img-3) no-repeat 0 100%, var(--img-4) no-repeat 100% 100%;
  background-size: calc(var(--size) / 2) calc(var(--size) / 2);
  background-repeat: no-repeat;
  animation: l5 6s infinite cubic-bezier(0.3, 1, 0, 1);
  position: fixed;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: 100000;
}

@keyframes l5 {
  0% {
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    width: var(--size);
    height: var(--size);
  }
  8.25% {
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    width: var(--animation-size);
    height: var(--animation-size);
  }
  16.5% {
    background-position: 100% 0, 100% 100%, 0 100%, 0 0;
    width: var(--animation-size);
    height: var(--animation-size);
  }
  24.75% {
    background-position: 100% 0, 100% 100%, 0 100%, 0 0;
    width: var(--size);
    height: var(--size);
  }
  33% {
    background-position: 100% 0, 100% 100%, 0 100%, 0 0;
    width: var(--animation-size);
    height: var(--animation-size);
  }
  41.25% {
    background-position: 100% 100%, 0 100%, 0 0, 100% 0;
    width: var(--animation-size);
    height: var(--animation-size);
  }
  49.5% {
    background-position: 100% 100%, 0 100%, 0 0, 100% 0;
    width: var(--size);
    height: var(--size);
  }
  57.25% {
    background-position: 100% 100%, 0 100%, 0 0, 100% 0;
    width: var(--animation-size);
    height: var(--animation-size);
  }
  66% {
    background-position: 0 100%, 0 0, 100% 0, 100% 100%;
    width: var(--animation-size);
    height: var(--animation-size);
  }
  74.25% {
    background-position: 0 100%, 0 0, 100% 0, 100% 100%;
    width: var(--size);
    height: var(--size);
  }
  82.5% {
    background-position: 0 100%, 0 0, 100% 0, 100% 100%;
    width: var(--animation-size);
    height: var(--animation-size);
  }
  90.75% {
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    width: var(--animation-size);
    height: var(--animation-size);
  }
  100% {
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    width: var(--size);
    height: var(--size);
  }
}
:root {
  --nav-bg: var(--color-white);
  --nav-color: var(--color-full-black);
}

.navigation-socials ul {
  display: flex;
  gap: 2em;
  justify-content: flex-end;
  align-items: center;
}
.navigation-socials em {
  display: none;
}

#navigation {
  position: fixed;
  right: 0;
  top: 0;
  padding: var(--margin-8);
  text-align: right;
  font-weight: 400;
  z-index: 99999;
  mix-blend-mode: difference;
}
.navigation-red-background #navigation {
  mix-blend-mode: normal;
}
@media only screen and (max-width: 992px) {
  #navigation {
    mix-blend-mode: difference;
  }
  #navigation * {
    pointer-events: none;
  }
}
.mobile-navigation-opened #navigation {
  background: rgb(var(--color-red));
  mix-blend-mode: normal;
  min-width: calc(100vw - var(--margin-8) * 2 - var(--margin-3));
  height: 100vh;
  align-content: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-navigation-opened #navigation:before {
  display: flex;
  font-size: var(--margin-6);
  position: fixed;
  top: 0;
  right: 0;
  align-items: end;
  padding: var(--margin-8);
  color: rgb(var(--color-full-black));
}
.mobile-navigation-opened #navigation * {
  pointer-events: all;
}

.navigation-container {
  transition: all 0.3s ease-out;
  transform-origin: top right;
  scale: 0.5;
}
@media only screen and (min-width: 992px) {
  #navigation:hover .navigation-container {
    scale: 1;
  }
}
@media only screen and (max-width: 992px) {
  .navigation-container {
    scale: 0.5;
  }
  .mobile-navigation-opened .navigation-container {
    scale: 1;
    margin-bottom: var(--margin-half);
  }
}

.navigation-item {
  padding: 0;
  margin-bottom: 0.25em;
}
@media only screen and (min-width: 992px) {
  .main-header-fixed:not(body:has(#navigation:hover)) .navigation-item {
    transition: all 0.3s ease-out 0s;
  }
  #navigation:hover .navigation-item {
    margin-bottom: 0.75em;
  }
}
@media only screen and (max-width: 992px) {
  .mobile-navigation-opened .navigation-item {
    text-align: center;
  }
}

.navigation-link {
  text-decoration: none;
  display: inline-block;
  position: relative;
  color: rgba(var(--color-pink), 0);
  background: rgb(var(--color-pink));
  padding: 0.25em 3px;
  font-weight: 400;
  line-height: 0.25em;
  transition: all 0.3s ease-out 0s;
}
@media only screen and (max-width: 992px) {
  .navigation-link {
    color: rgba(var(--color-black), 0);
  }
}
.navigation-red-background #navigation .navigation-link {
  color: rgba(var(--color-black), 0);
  background: rgb(var(--color-black));
}
.navigation-link:before {
  content: "";
  position: absolute;
  height: 70%;
  top: 2px;
  width: 0%;
  right: 0;
  background: rgb(var(--color-pink));
  transition: all 0.3s ease-out 0s;
}
.navigation-red-background #navigation .navigation-link:before {
  color: rgba(var(--color-black), 0);
  background: rgb(var(--color-black));
}
@media only screen and (max-width: 992px) {
  .navigation-link:before {
    display: none;
  }
}
@media only screen and (min-width: 992px) {
  #navigation:hover .navigation-link {
    color: rgba(var(--color-pink), 1);
    background: none;
    line-height: 0.7em;
  }
  .navigation-red-background #navigation:hover .navigation-link {
    color: rgba(var(--color-black), 0);
  }
  .navigation-red-background #navigation:hover .navigation-link {
    mix-blend-mode: normal;
    color: rgb(var(--color-black));
  }
  #navigation .navigation-link:hover:before {
    mix-blend-mode: difference;
    width: 100%;
    background: rgb(var(--color-pink));
  }
  .navigation-red-background #navigation:hover .navigation-link:before {
    background: rgb(var(--color-black));
  }
}
.navigation-link span {
  transition: all 0.3s ease-out;
}
@media only screen and (min-width: 992px) {
  .navigation-red-background #navigation .navigation-link:hover span {
    mix-blend-mode: difference;
    color: rgb(var(--color-pink));
  }
}
.mobile-navigation-opened #navigation .navigation-link {
  color: rgb(var(--color-black));
  background: none;
  font-size: clamp(16px, 9vw, 28px);
  line-height: 1em;
  padding: 0.5em 1em;
}
.active .navigation-link {
  font-weight: 700;
}

#page-footer,
.modular-footer {
  padding: 0;
  min-height: 100vh;
  max-width: 100vw;
  overflow: hidden;
}
@media only screen and (max-width: 768px) {
  #page-footer,
  .modular-footer {
    min-height: 100vh;
  }
}
#page-footer > .wrapper,
.modular-footer > .wrapper {
  display: flex;
  z-index: 0;
  overflow: hidden;
  width: 100%;
}
@media only screen and (max-width: 992px) {
  #page-footer > .wrapper,
  .modular-footer > .wrapper {
    height: 100vh;
    flex-direction: column-reverse;
    background: rgb(var(--color-black));
  }
}
@media only screen and (min-width: 992px) {
  #page-footer > .wrapper,
  .modular-footer > .wrapper {
    align-items: flex-start;
    margin-left: calc(var(--margin-3) + var(--margin-8) * 2);
    min-height: 100vh;
    min-height: 100dvh;
  }
}

.footer-infos {
  background: rgb(var(--color-red));
  padding: var(--margin-8);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--margin-3);
}
@media only screen and (min-width: 992px) {
  .footer-infos {
    min-height: 100vh;
    min-height: 100dvh;
    position: sticky;
    top: 0;
    flex: 1;
  }
}
.footer-infos address {
  font-style: inherit;
}
.footer-infos address span {
  font-size: clamp(14px, 0.8em, 24px);
}
.footer-infos address a {
  display: block;
}

.footer-infos-top {
  min-height: var(--margin-3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: clamp(18px, 1.5vw, 24px);
}

.footer-infos-bottom {
  font-size: 14px;
}

.footer-socials {
  list-style: none;
  display: flex;
  align-items: center;
  font-size: 25px;
  margin-left: -0.5em;
  margin-top: calc(var(--margin-8) / 2);
}
.footer-socials li {
  transition: all 0.2s cubic-bezier(0.3, 1, 0.8, 1);
}
.footer-socials li a {
  padding: 0.5em;
}
@media only screen and (min-width: 992px) {
  .footer-socials li:hover {
    scale: 1.3;
  }
  .footer-socials li:hover .icon, .footer-socials li:hover .mobile-navigation-opened #navigation, .mobile-navigation-opened .footer-socials li:hover #navigation {
    color: rgb(var(--color-pink));
  }
}
.footer-socials em {
  display: none;
}

.footer-cta {
  font-size: clamp(32px, 12vw, 140px);
  background: rgb(var(--color-full-black));
  color: rgb(var(--color-pink));
  padding: var(--margin-8);
  display: flex;
  line-height: 0.8em;
  flex-direction: column;
  position: relative;
  flex: 3;
}
@media only screen and (max-width: 992px) {
  .footer-cta {
    padding-top: calc(var(--margin-3) + var(--margin-8) * 2);
    padding-bottom: var(--margin-4);
    justify-content: end;
  }
}
@media only screen and (max-width: 768px) {
  .footer-cta {
    font-size: clamp(32px, 20vw, var(--margin-full));
    max-height: 100vw;
  }
}
@media only screen and (min-width: 992px) {
  .footer-cta {
    min-height: 100vh;
    min-height: 100dvh;
  }
}
.footer-cta .footer-info-title {
  position: relative;
  z-index: 1;
  max-width: 500px;
  font-family: var(--font-special);
}
@media only screen and (min-width: 1200px) {
  .footer-cta .footer-info-title {
    padding-right: calc(var(--margin-3) + var(--margin-8) * 2);
  }
}
.footer-cta video,
.footer-cta #hand-sign {
  position: absolute;
  bottom: 0;
  right: calc(var(--margin-8) * -1);
  width: 60%;
  opacity: 0;
  transition: 0.2s ease-out 0.2s;
  height: 100%;
  object-fit: contain;
  object-position: center right;
  z-index: 0;
}
@media only screen and (max-width: 992px) {
  .footer-cta video,
  .footer-cta #hand-sign {
    opacity: 1;
  }
}
.footer-cta video > *,
.footer-cta #hand-sign > * {
  object-fit: contain;
  width: 100%;
  height: 100%;
  object-position: bottom right;
}
@media only screen and (min-width: 992px) {
  .footer-cta:hover video,
  .footer-cta:hover #hand-sign {
    opacity: 1;
  }
}
.footer-cta a.icon, .footer-cta .mobile-navigation-opened a#navigation, .mobile-navigation-opened .footer-cta a#navigation {
  color: rgb(var(--color-pink));
  margin-top: 0.5em;
}
@media only screen and (max-width: 992px) {
  .footer-cta a.icon, .footer-cta .mobile-navigation-opened a#navigation, .mobile-navigation-opened .footer-cta a#navigation {
    margin-top: 0;
    text-align: right;
    position: absolute;
    right: var(--margin-8);
    top: var(--margin-half);
  }
}

.footer-navigation {
  margin-bottom: 1.5em;
}
.footer-navigation li {
  padding: 0.3em 0;
}
.footer-navigation a {
  font-weight: 400;
}

.site-copyright {
  line-height: 1.2em;
  display: flex;
  margin: 0;
}

.intro-wipe,
.extro-wipe {
  position: fixed;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100000;
}

.intro-wipe .wipe-part {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  -webkit-animation-name: panel1;
  animation-name: panel1;
  animation-fill-mode: both;
}
.intro-wipe .wipe-part.part1 {
  background-color: rgba(var(--color-black), 1);
  animation-duration: 0.8s;
  animation-delay: 0.3s;
}
.intro-wipe .wipe-part.part2 {
  animation-duration: 1s;
  animation-delay: 0.4s;
  background-color: rgba(var(--color-red), 1);
}
.intro-wipe .wipe-part.part3 {
  animation-duration: 1.6s;
  animation-delay: 0.6s;
  background-color: rgba(var(--color-pink), 1);
}

@keyframes panel1 {
  0% {
    height: 100%;
  }
  49% {
    top: 0;
  }
  49% {
    top: 100%;
  }
  100% {
    height: 0;
    top: 100%;
  }
}
.content {
  position: relative;
  z-index: 1;
  padding: 20px;
  overflow: auto;
  height: 100vh;
  opacity: 1;
  transition: opacity 0.5s ease-in-out 1s;
}

.content.active {
  opacity: 0.2;
}

.extro-wipe .wipe-part {
  width: 100%;
  height: 0%;
  transition: 0.3s ease-in;
  background: rgb(var(--color-black));
  top: 0;
  position: absolute;
  animation: extro 0.5s ease 0.3s;
  animation-fill-mode: both;
}

@keyframes extro {
  0%, 99.5% {
    display: block;
  }
  100% {
    display: none;
  }
}
.suprise-button {
  --sprite-size: var(--margin-8);
  position: fixed;
  bottom: var(--margin-8);
  right: var(--margin-8);
  display: block;
  width: var(--margin-8);
  height: var(--margin-8);
  background: url(/user/themes/foc/images/suprise-box-sprite.webp) no-repeat;
  background-size: 500% 100%;
  cursor: pointer;
  z-index: 1001;
}
@media only screen and (max-width: 768px) {
  .suprise-button {
    --sprite-size: var(--margin-6);
    --hole-size: var(--margin-4);
    --sparkle-size: calc(var(--margin-4)/3);
    left: inherit;
    right: var(--margin-8);
    width: var(--margin-6);
    height: var(--margin-6);
  }
}
.suprise-button img {
  max-width: 100%;
  position: absolute;
  translate: 0 75%;
}

.surprise-target {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 1100;
  cursor: pointer;
  width: var(--margin-3);
  height: var(--margin-3);
  cursor: pointer;
  border: solid transparent;
}
.surprise-target:active ~ .suprise-button .hand-middle-finger img {
  translate: 0 20%;
}
@media only screen and (min-width: 992px) {
  .surprise-target:hover ~ .suprise-button {
    animation: move-sprite-sequence 1s steps(5) infinite; /* Durée totale ajustée */
  }
}
@media only screen and (max-width: 768px) {
  .surprise-target {
    width: calc(var(--margin-half));
    height: calc(var(--margin-half));
    left: inherit;
    right: 0;
  }
}

.hand-middle-finger {
  overflow: hidden;
  width: 100%;
  height: 200%;
  position: absolute;
  bottom: 100%;
  border-radius: 30%;
  z-index: 3;
}

@keyframes move-sprite-sequence {
  from {
    background-position: 0 0;
  }
  to {
    background-position: calc(var(--sprite-size) * -5) 0; /* Ajuste le nombre de frames ici */
  }
}
#gifs-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}
#gifs-container > * {
  max-width: 500px;
  height: 500px;
  object-fit: contain;
  object-position: center;
  rotate: 3deg;
}

.modular.contact {
  background: rgb(var(--color-red));
  position: relative;
  transition: all var(--game-transition-duration) ease-out var(--game-transition-delay);
}
@media only screen and (max-width: 992px) {
  .modular.contact {
    height: 100vh;
  }
  .page-home .modular.contact {
    display: none;
  }
}
@media only screen and (max-width: 768px) {
  .modular.contact {
    padding-bottom: var(--margin-3);
  }
}
.modular.contact > .wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: var(--margin-8);
  position: relative;
  overflow: hidden;
  z-index: 1;
  padding-top: calc(var(--margin-3) + var(--margin-8) * 2);
  min-height: calc(100vh - (var(--margin-3) + var(--margin-8)) - var(--margin-3));
  height: 100%;
}
@media only screen and (min-width: 992px) {
  .modular.contact > .wrapper {
    padding-top: calc(var(--margin-8) * 2 + var(--margin-3));
    min-height: 100vh;
  }
}
.modular.contact header {
  text-align: center;
}
.modular.contact header p {
  margin-bottom: 0.8em;
}
.modular.contact header h1,
.modular.contact header h2,
.modular.contact header h3,
.modular.contact header h4,
.modular.contact header h5,
.modular.contact header h6 {
  line-height: 0.8em;
  font-family: var(--font-special);
  font-size: var(--font-size-title);
}
.modular.contact .contact-content {
  display: flex;
  gap: var(--margin-8);
  background-size: cover;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 992px) {
  .modular.contact .contact-content {
    flex-direction: column;
  }
}
.modular.contact .socials-contact {
  margin: var(--margin-8);
  text-align: center;
}
.modular.contact .socials-list {
  display: flex;
  justify-content: center;
  font-size: 25px;
}
.modular.contact .socials-list em {
  display: none;
}
.modular.contact .socials-list li {
  scale: 1;
  transition: all 0.2s cubic-bezier(0.3, 1, 0.8, 1);
}
.modular.contact .socials-list li a {
  padding: calc(var(--margin-8) / 2);
}
@media only screen and (min-width: 992px) {
  .modular.contact .socials-list li:hover {
    scale: 1.5;
  }
  .modular.contact .socials-list li:hover .icon, .modular.contact .socials-list li:hover .mobile-navigation-opened #navigation, .mobile-navigation-opened .modular.contact .socials-list li:hover #navigation {
    color: rgb(var(--color-pink));
  }
}
.modular.contact .copyrights {
  font-size: 0.75em;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
}
@media only screen and (min-width: 992px) {
  .modular.contact .copyrights {
    flex-direction: row-reverse;
    gap: 1em;
    margin-bottom: var(--margin-8);
    margin-top: calc(var(--margin-8) / 2);
  }
}
.modular.contact .copyrights .footer-navigation {
  margin: 0;
  display: flex;
  gap: 1em;
}
.modular.contact .copyrights .footer-navigation li {
  padding: 0;
}

.content-by-container {
  display: grid;
  font-family: var(--font-special);
  position: relative;
}
@media only screen and (max-width: 992px) {
  .content-by-container {
    gap: 2em;
  }
}
.content-by-container .contact-by-title {
  font-size: clamp(38px, 6vw, 120px);
  line-height: 0.8em;
  position: relative;
  cursor: pointer;
  display: block;
  letter-spacing: -0.015em;
}
.content-by-container .contact-by-title > strong {
  position: relative;
  z-index: 0;
}
@media only screen and (max-width: 992px) {
  .content-by-container .contact-by-title {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
@media only screen and (min-width: 992px) {
  .content-by-container .contact-by-title:first-of-type {
    place-self: start;
    translate: calc(-100% + 0.55em);
  }
  .content-by-container .contact-by-title:last-of-type {
    place-self: end;
    translate: calc(100% - 0.55em);
  }
  .content-by-container .contact-by-title:hover {
    z-index: 110;
  }
  .content-by-container .contact-by-title:hover .contact-by-value {
    opacity: 1;
    transform: rotateX(0deg);
  }
}

.content-by {
  flex: 1;
}
@media only screen and (max-width: 992px) {
  .content-by {
    text-align: center;
    align-content: center;
  }
}
@media only screen and (min-width: 992px) {
  .content-by {
    display: grid;
    place-content: center;
  }
}

.contact-by-value {
  display: inline-block;
  font-size: clamp(18px, 0.45em, 32px);
  line-height: 0.8em;
  text-align: center;
  font-family: var(--font-content);
  font-weight: 700;
  background: rgb(var(--color-pink));
  min-height: calc(var(--margin-8) * 2);
  padding: calc(var(--margin-8) / 2) var(--margin-8);
  align-content: center;
  z-index: 2;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 0.5s;
  transition-property: transform, opacity;
  translate: 0 -0.25em;
}
@media only screen and (min-width: 992px) {
  .contact-by-value {
    opacity: 0;
    transform: rotateX(-180deg);
    translate: 0 calc(100% - 0.5em);
    position: absolute;
    min-width: 100%;
    left: 0;
    bottom: 0;
  }
  .centered .contact-by-value {
    left: 50%;
    translate: -50% calc(100% - 0.35em);
  }
}
.right .contact-by-value {
  left: inherit;
  right: 0;
  font-family: var(--font-content);
  font-size: 1.2rem;
  line-height: 1.1em;
  text-align: left;
  letter-spacing: -0.02em;
}
.contact-by-value address {
  font-style: normal;
}
.contact-by-value address .addressStreet,
.contact-by-value address .addressLocality,
.contact-by-value address .addressCountry {
  font-weight: 450;
}
.contact-by-value address > * {
  display: block;
  white-space: nowrap;
}

.content-by-label {
  font-family: var(--font-content);
  font-size: clamp(14px, 0.195em, 20px);
  width: 100%;
  min-width: 50vw;
  height: auto;
  min-height: inherit;
  line-height: 2.5rem;
  font-weight: 400;
  letter-spacing: -0.025em;
}
@media only screen and (min-width: 992px) {
  .content-by-label {
    position: absolute;
    translate: 0 -100%;
    top: 0;
  }
}

.contact-by-title {
  display: none;
}

.see-socials-funny-meme {
  position: absolute;
  width: calc(var(--margin-full) * 1.5);
  z-index: -1;
  bottom: 0;
  opacity: 0;
  right: 0;
  pointer-events: none;
  transition: all 0.1s ease;
}
.modular.contact:has(.socials-list li:hover) .see-socials-funny-meme {
  opacity: 1;
}

:root {
  --sts-margin-top: calc(var(--margin-3) + var(--margin-8)*2);
  --sts-offset: 100dvh;
  --sts-offset-add: var(--margin-3);
}

.scroll-text-sticky {
  font-size: clamp(20px, var(--margin-full), 280px);
  position: relative;
  font-family: var(--font-special);
  font-weight: 800;
  background: rgb(var(--color-red));
  padding: var(--margin-8);
}
.scroll-text-sticky .markdown-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  letter-spacing: -0.05em;
  line-height: 0.8em;
  gap: 0;
  justify-content: flex-start;
  transition: all 0.3s ease-out;
}
.scroll-text-sticky .scroll-text-sticky-spacer {
  width: 100%;
  margin: 0;
}
.scroll-text-sticky .scroll-text-sticky-spacer:last-child {
  margin-top: 0.8em;
  background: rgb(var(--color-red));
  min-height: 1em;
  z-index: 5;
  margin-top: var(--sts-offset-add);
}
.scroll-text-sticky svg {
  max-width: 16vw;
  height: auto;
}

.scroll-text-sticky-letter {
  position: sticky;
  top: var(--sts-margin-top);
  display: block;
  transition: all 0.3s ease-out;
}
.scroll-text-sticky-letter:nth-child(1) {
  margin-top: calc(var(--sts-offset) / 2);
}
.scroll-text-sticky-letter:nth-child(2) {
  margin-top: calc(var(--sts-offset));
}
.scroll-text-sticky-letter:nth-child(3) {
  margin-top: calc(var(--sts-offset) * 1.5);
}
.scroll-text-sticky-letter:nth-child(4) {
  margin-top: calc(var(--sts-margin-top) + var(--sts-offset) * 2);
}
.scroll-text-sticky-letter:nth-child(5) {
  margin-top: calc(var(--sts-margin-top) + var(--sts-offset) * 2.5);
}
.scroll-text-sticky-letter:nth-child(n+6) {
  top: calc(var(--sts-margin-top) + 0.8em);
  z-index: 10;
}
.scroll-text-sticky-letter:nth-child(6) {
  margin-top: var(--sts-offset-add);
}
.scroll-text-sticky-letter:nth-child(7) {
  margin-top: calc(var(--sts-offset-add) * 2);
}
.scroll-text-sticky-letter:nth-child(8) {
  margin-top: calc(var(--sts-offset-add) * 3);
}
.scroll-text-sticky-letter:nth-child(9) {
  margin-top: calc(var(--sts-offset-add) * 4);
}
.scroll-text-sticky-letter:nth-child(10) {
  margin-top: calc(var(--sts-offset-add) * 5);
}
.scroll-text-sticky-letter:nth-child(11) {
  margin-top: calc(var(--sts-offset-add) * 6);
}
.scroll-text-sticky-letter:nth-child(12) {
  margin-top: calc(var(--sts-offset-add) * 7);
}
.scroll-text-sticky-letter:nth-child(13) {
  margin-top: calc(var(--sts-offset-add) * 8);
}
.scroll-text-sticky-letter.scroll-text-sticky-link {
  margin-top: var(--margin-3);
  top: calc(var(--sts-margin-top) + 1.6em);
  text-decoration: none;
  color: rgb(var(--color-black));
  text-align: right;
  width: 100%;
  padding: var(--margin-8);
}
.scroll-text-sticky-letter.scroll-text-sticky-link:hover {
  translate: 0.05em 0;
}

.modular.rock-paper-scissors {
  position: relative;
}
.modular.rock-paper-scissors .modular-title {
  margin: 0;
  text-align: center;
  text-wrap: balance;
  line-height: 0.8em;
}
.modular.rock-paper-scissors input[name=player-two-options] {
  display: none;
}
.modular.rock-paper-scissors .game-header {
  text-align: center;
}
.modular.rock-paper-scissors .game-subtitle {
  font-size: clamp(1rem, var(--font-size-title) * 0.4, var(--font-size-title));
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  text-wrap: balance;
  margin: 0;
}
.modular.rock-paper-scissors .game-intro {
  margin-bottom: var(--margin-6);
}
@media only screen and (max-width: 1200px) {
  .modular.rock-paper-scissors .game-intro {
    margin-bottom: calc(var(--margin-3));
  }
}
.modular.rock-paper-scissors .game-intro p {
  text-wrap: balance;
  font-size: 1.25em;
  text-align: center;
  margin: 0;
}
.modular.rock-paper-scissors .game-intro p strong {
  font-weight: 600;
}
.modular.rock-paper-scissors .game {
  transition: all var(--game-transition-duration) ease-out var(--game-transition-delay);
  display: flex;
  justify-content: center;
  flex-direction: row-reverse;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .modular.rock-paper-scissors .game {
    max-width: 800px;
    margin: auto;
    translate: -40px 0;
  }
}
@media only screen and (max-width: 768px) {
  .modular.rock-paper-scissors .game {
    flex-direction: column-reverse;
    translate: 0;
  }
}
.modular.rock-paper-scissors .game .wrapper {
  display: flex;
  position: relative;
  gap: var(--margin-8);
  min-height: clamp(0px, 50vh, 50vw);
  width: 100%;
}
@media only screen and (min-width: 992px) {
  .modular.rock-paper-scissors .game .wrapper {
    padding-left: calc(80px - var(--margin-8) * 2);
    padding: 0 var(--margin-8);
  }
}
.modular.rock-paper-scissors .game figcaption {
  font-family: var(--font-special);
  font-size: clamp(20px, 14vw, 130px);
  color: rgb(var(--color-red));
  height: 100%;
  line-height: 0.9em;
  font-weight: 800;
  letter-spacing: -0.025em;
  transition: all var(--game-transition-duration) ease-out var(--game-transition-delay);
}
.modular.rock-paper-scissors .game .player-one figcaption {
  align-content: end;
  height: 82.5%;
  translate: 10% -5%;
}
.modular.rock-paper-scissors .game .player-two figcaption {
  text-align: right;
  translate: -15% 0;
}
.modular.rock-paper-scissors .player {
  flex: 1;
  display: flex;
  gap: var(--margin-8);
  z-index: 1;
  pointer-events: none;
}
.modular.rock-paper-scissors .player.player-one {
  justify-content: end;
  align-items: end;
}
.modular.rock-paper-scissors .player .hand {
  position: relative;
  width: 100%;
  max-width: 500px;
  height: 100%;
}
.modular.rock-paper-scissors .player .hand.player-one-hand img {
  top: inherit;
  bottom: 0;
}
.modular.rock-paper-scissors .player .hand img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  filter: drop-shadow(0 0 0px rgba(106, 10, 10, 0));
  transition: all 0.3s ease-out;
}
.modular.rock-paper-scissors .player-two-options {
  width: auto;
  justify-content: center;
  display: flex;
  gap: calc(var(--margin-8) / 2);
  flex-direction: column;
}
.modular.rock-paper-scissors .player-two-options * {
  cursor: pointer;
}
@media only screen and (min-width: 768px) {
  .modular.rock-paper-scissors .player-two-options {
    position: absolute;
    right: calc(var(--margin-8) * -1);
    top: 50%;
    margin-bottom: var(--margin-8);
    translate: 100% -50%;
  }
}
@media only screen and (max-width: 768px) {
  .modular.rock-paper-scissors .player-two-options {
    width: auto;
    flex-direction: row;
    margin-top: var(--margin-3);
  }
}
.modular.rock-paper-scissors .option {
  background: rgb(var(--color-red));
  position: relative;
  z-index: 2;
  width: 80px;
  height: 80px;
  aspect-ratio: 1/1;
}
.modular.rock-paper-scissors .option,
.modular.rock-paper-scissors .option * {
  transition: all 0.2s ease-out;
}
.modular.rock-paper-scissors .option span {
  font-family: var(--font-content);
  display: block;
  position: absolute;
  text-align: center;
  bottom: 0;
  width: 100%;
  translate: 0 0;
  font-size: 0.9em;
  color: rgb(var(--color-red));
  z-index: -1;
  transition: color 0.1s ease-out 0s, translate 0.2s ease-out 0s;
}
@media only screen and (max-width: 992px) {
  .modular.rock-paper-scissors .option span {
    translate: 0 100%;
    color: rgb(var(--color-black));
  }
}
@media only screen and (max-width: 768px) {
  .modular.rock-paper-scissors .option span {
    display: none;
    translate: 0 calc(100% + 0.5em);
    color: rgb(var(--color-black));
  }
}
.modular.rock-paper-scissors .option img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
  transform-origin: center right;
  transition: all 0.2s ease-in;
}
@media only screen and (min-width: 992px) {
  .modular.rock-paper-scissors .option:hover {
    background: rgb(var(--color-red));
  }
  .modular.rock-paper-scissors .option:hover span {
    transition: color 0.2s ease-out 0.1s, translate 0.2s ease-out 0s;
    color: rgb(var(--color-black));
    translate: 0 100%;
  }
  .modular.rock-paper-scissors .option:hover img {
    rotate: 10deg;
    translate: 0 0;
  }
}
.modular.rock-paper-scissors #rock:checked ~ .player-two-options .rock,
.modular.rock-paper-scissors #paper:checked ~ .player-two-options .paper,
.modular.rock-paper-scissors #scissors:checked ~ .player-two-options .scissors {
  background: rgb(var(--color-red));
}
.modular.rock-paper-scissors #rock:checked ~ .player-two-options .rock img,
.modular.rock-paper-scissors #paper:checked ~ .player-two-options .paper img,
.modular.rock-paper-scissors #scissors:checked ~ .player-two-options .scissors img {
  rotate: 10deg;
  translate: 0 0;
}
.modular.rock-paper-scissors #none:checked ~ .rock-paper-scissors-content .player-one [title=none],
.modular.rock-paper-scissors #none:checked ~ .rock-paper-scissors-content .player-two [title=none] {
  opacity: 1;
}
.modular.rock-paper-scissors #none:checked ~ .rock-paper-scissors-content .result-text {
  opacity: 0;
  translate: -50% -70%;
}
.modular.rock-paper-scissors .game-intro {
  transition: all 0s ease calc(var(--game-transition-duration) + var(--game-transition-delay)), translate var(--game-transition-duration) ease-out var(--game-transition-delay), opacity var(--game-transition-duration) ease-out var(--game-transition-delay);
}
.modular.rock-paper-scissors #none:not(:checked) {
  --options-width: 0;
}
.modular.rock-paper-scissors #none:not(:checked) ~ .rock-paper-scissors-content .player-one [title=wins] {
  opacity: 1;
}
.modular.rock-paper-scissors #none:not(:checked) ~ .game-intro {
  opacity: 0;
}
.modular.rock-paper-scissors #none:not(:checked) ~ .rock-paper-scissors-content .hand img {
  filter: drop-shadow(0 0 5px rgba(106, 10, 10, 0.125));
}
.modular.rock-paper-scissors #none:not(:checked) ~ .rock-paper-scissors-content .player figcaption {
  translate: 10% 15%;
  opacity: 0;
}
.modular.rock-paper-scissors #none:not(:checked) ~ .rock-paper-scissors-content .player-two figcaption {
  translate: -15% 20%;
}
.modular.rock-paper-scissors #rock:checked ~ .rock-paper-scissors-content .player-two .rock,
.modular.rock-paper-scissors #rock:checked ~ .rock-paper-scissors-content .player-two [title=rock],
.modular.rock-paper-scissors #paper:checked ~ .rock-paper-scissors-content .player-two .paper,
.modular.rock-paper-scissors #paper:checked ~ .rock-paper-scissors-content .player-two [title=paper],
.modular.rock-paper-scissors #scissors:checked ~ .rock-paper-scissors-content .player-two .scissors,
.modular.rock-paper-scissors #scissors:checked ~ .rock-paper-scissors-content .player-two [title=scissors] {
  opacity: 1;
}
.modular.rock-paper-scissors figure {
  margin: 0;
  padding: 0;
}
.modular.rock-paper-scissors .result-text {
  font-family: var(--font-special);
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 0;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  font-size: clamp(20px, 12vw, 136px);
  color: #ff3600;
  opacity: 1;
  line-height: 0.9em;
  font-weight: 800;
  letter-spacing: -0.025em;
  transition: all calc(var(--game-transition-duration) + 0.1s) ease-out calc(var(--game-transition-duration) + var(--game-transition-duration) + 0.1s);
}
@media only screen and (max-width: 768px) {
  .modular.rock-paper-scissors .result-text {
    max-width: 400px;
  }
}

.modular.rock-paper-scissors {
  flex: 3.5;
  min-height: 100vh;
  min-height: 100dvh;
  z-index: 5;
  padding-top: calc(var(--margin-8) * 2 + var(--margin-3));
  margin-left: calc(var(--margin-8) * 2 + var(--margin-3));
  padding-right: calc(var(--margin-8) * 2 + var(--margin-3));
}
@media only screen and (max-width: 1200px) {
  .modular.rock-paper-scissors {
    padding-top: calc(var(--margin-8) * 2 + var(--margin-3));
    margin-left: calc(var(--margin-8) + var(--margin-3));
    padding-right: calc(var(--margin-8) + var(--margin-3));
  }
}
@media only screen and (max-width: 992px) {
  .modular.rock-paper-scissors {
    margin-left: calc(var(--margin-8));
    padding-right: calc(var(--margin-4) + var(--margin-8));
  }
}
@media only screen and (max-width: 768px) {
  .modular.rock-paper-scissors {
    min-height: inherit;
    align-content: center;
    margin-left: calc(var(--margin-8));
    padding-right: calc(var(--margin-8));
  }
}
.modular.rock-paper-scissors > .wrapper {
  padding: 0;
  margin: 0 auto;
}
@media only screen and (max-width: 992px) {
  .modular.rock-paper-scissors > .wrapper {
    width: 100%;
  }
}

.modular.logo-animation {
  position: relative;
}
@media only screen and (max-width: 992px) {
  .modular.logo-animation {
    padding: 0;
  }
}

#logo {
  transition: all 0.4s ease-out 0.3s;
  width: var(--logo-size);
}

/* SVG LOGO */
.logo > svg {
  width: calc(100% + var(--column-gap) * 2);
  aspect-ratio: 1/1;
  pointer-events: none;
  position: relative;
  z-index: 2;
}

.logo > svg path {
  will-change: transform, fill;
}

[class*=eye-bg-] {
  will-change: transform, fill;
  fill: rgb(var(--color-pink));
}

[class*=-pupil-] {
  will-change: transform, fill;
  fill: rgb(var(--color-red));
  transform-origin: center;
  transform-box: fill-box;
}

.logo > svg .text-logo {
  will-change: transform, fill;
  fill: rgb(var(--color-pink));
}

.logo > svg .bg {
  will-change: transform, fill;
  fill: rgb(var(--color-red));
}

.message {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
}

.message > * {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
}

.angry {
  right: 0;
  width: 40%;
  bottom: 27%;
  height: 20%;
  padding: 0 var(--gutter);
}

.saw-nothing {
  left: 0;
  width: 40%;
  top: 40%;
  height: 13%;
  padding: 0 var(--gutter);
}

.nothing-here {
  left: 0;
  width: 40%;
  bottom: 0%;
  height: 47%;
  padding: 0 var(--gutter);
}

[data-status=just-a-little-bit] .just-a-little-bit,
[data-status=just-leaving-like-that] .just-leaving-like-that,
[data-status=keep-going] .keep-going,
[data-status=angry] .angry,
[data-status=anyway] .anyway,
[data-status=saw-nothing] .saw-nothing,
[data-status=nothing-here] .nothing-here {
  opacity: 1;
}

/* Style the grid container to get emotions on:hover */
.page-home .grid-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(5, 20%);
  grid-template-rows: 20% 20% 13% 20% 27%;
  gap: 0;
  z-index: 1; /* Place the grid below other content */
}

/* ALL MORHPING SHAPES */
/* BASE */
.eye-bg-base {
  d: path("M 26.9 36.6 c -1.51 43.35 17.4 91.92 50.37 117.39 c 11.3 8.73 24.5 16.12 38.58 21.75 c 13.15 5.26 40.94 10.82 40.94 10.82 s 29.13 1.8 42.64 -0.83 c 24.5 -4.75 38.12 -15.22 59.59 -34.91 c 10.43 7.93 18.91 14.55 28.88 20.64 c 8.26 5.05 22.58 10.14 31.7 13.07 c 14.59 4.69 30.22 3.59 45.36 1.7 c 20.53 -2.57 32.74 -5.18 51.98 -13.2 c 19.25 -8.02 34.66 -17.81 47.67 -34.91 c 13.05 -17.16 34.03 -60.54 32.77 -101.49 c -29.64 -0.49 -61.49 -1.76 -131.88 -2.43 l -134.7 -1.5 l -142.9 7 L 26.9 36.6 Z");
}

.left-pupil-base {
  d: path("M 201.32 101.67 c 8.03 4.32 17.08 6.11 26.06 6.7 c 6.32 0.42 12.89 0.21 18.65 -2.61 c 7.83 -3.83 13.01 -11.9 17.17 -19.94 c 7.27 -14.04 12.6 -31.42 5.87 -45.75 c -2.9 -6.18 -7.77 -11.05 -12.85 -15.34 c -3.97 -3.35 -8.18 -6.46 -12.84 -8.56 c -11.02 -4.96 -23.99 -3.79 -34.78 1.72 c -14.07 7.19 -31.12 25.7 -31.58 43.41 C 176.62 76.83 188.83 94.95 201.32 101.67 Z");
}

.right-pupil-base {
  d: path("M 386.85 104.67 c 8.03 4.32 18.08 5.11 27.06 5.7 c 6.32 0.42 12.89 -1.79 18.65 -4.61 c 7.83 -3.83 14.01 -10.9 18.17 -18.94 c 7.27 -14.04 11.6 -32.42 4.87 -46.75 c -2.9 -6.18 -5.77 -12.05 -10.85 -16.34 c -3.97 -3.35 -10.18 -8.46 -14.84 -10.56 c -11.02 -4.96 -23.99 -0.79 -34.78 4.72 c -14.07 7.19 -26.81 25.91 -29.58 43.41 C 363.04 77.22 374.36 97.95 386.85 104.67 Z");
}

/* LOVE */
body:has([data-emotion=love]:hover) #logo .eye-bg-base,
#logo-small:hover .eye-bg-base {
  d: path("M 26.9 36.6 c -1.51 43.35 17.4 91.92 50.37 117.39 c 11.3 8.73 24.5 16.12 38.58 21.75 c 13.15 5.26 40.94 10.82 40.94 10.82 s 29.13 1.8 42.64 -0.83 c 24.5 -4.75 38.12 -15.22 59.59 -34.91 c 10.43 7.93 18.91 14.55 28.88 20.64 c 8.26 5.05 22.58 10.14 31.7 13.07 c 14.59 4.69 30.22 3.59 45.36 1.7 c 20.53 -2.57 32.74 -5.18 51.98 -13.2 c 19.25 -8.02 34.66 -17.81 47.67 -34.91 c 13.05 -17.16 34.03 -60.54 32.77 -101.49 c -29.64 -0.49 -61.49 -1.76 -131.88 -2.43 l -134.7 -1.5 l -142.9 7 L 26.9 36.6 Z");
}

body:has([data-emotion=love]:hover) #logo .left-pupil-base,
#logo-small:hover .left-pupil-base {
  d: path("M 153.4 135.54 c 8.03 4.32 17.08 10.11 26.06 10.7 c 6.32 0.42 12.89 -3.79 18.65 -6.61 c 7.83 -3.83 13.01 -11.9 17.17 -19.94 c 7.27 -14.04 12.6 -31.42 5.87 -45.75 c -2.9 -6.18 -6.34 -13.97 -12.85 -15.34 c -35.25 -7.38 -32.49 20.7 -37.16 18.6 c -11.02 -4.96 -23.4 -21.76 -34.18 -16.24 c -14.07 7.19 -17.22 19.25 -11.86 34.21 C 130.34 109.8 140.9 128.82 153.4 135.54 Z");
}

body:has([data-emotion=love]:hover) #logo .right-pupil-base,
#logo-small:hover .right-pupil-base {
  d: path("M 338.87 138.64 c 5.26 7.46 12.21 10.93 17.06 11.7 c 6.26 0.99 20.52 -6.76 25.65 -10.61 c 8.15 -6.1 12.5 -11.22 18.17 -18.94 c 9.37 -12.73 21.6 -32.42 14.87 -46.75 c -2.9 -6.18 -14.29 -14.79 -21.65 -14.89 c -11.49 -0.16 -24.03 18.29 -25.29 17.96 c -1.11 -0.28 0.17 -26.63 -29.32 -19.44 c -15.35 3.74 -24.53 19.9 -23.79 37.6 C 315.07 107.1 327.56 122.58 338.87 138.64 Z");
}

/* SAD */
body:has([data-emotion=sad]:hover) #logo .eye-bg-base {
  d: path("M 36.9 96.6 c 3.12 6.22 7.4 31.92 40.37 57.39 c 11.3 8.73 24.5 16.12 38.58 21.75 c 13.15 5.26 40.94 10.82 40.94 10.82 s 29.13 1.8 42.64 -0.83 c 24.5 -4.75 38.12 -15.22 59.59 -34.91 c 10.43 7.93 18.91 14.55 28.88 20.64 c 8.26 5.05 22.58 10.14 31.7 13.07 c 14.59 4.69 30.22 3.59 45.36 1.7 c 20.53 -2.57 32.74 -5.18 51.98 -13.2 c 19.25 -8.02 34.66 -17.81 47.67 -34.91 c 13.05 -17.16 23.02 -41.89 26.77 -59.49 c -29.86 -9.27 -58.02 -16.39 -125.88 -28.43 L 260.8 32.7 l -172.9 41 L 36.9 96.6 Z");
}

body:has([data-emotion=sad]:hover) #logo .left-pupil-base {
  d: path("M 158.92 135 c 8.03 4.32 17.08 6.11 26.06 6.7 c 6.32 0.42 12.89 0.21 18.65 -2.61 c 7.83 -3.83 13.01 -11.9 17.17 -19.94 c 7.27 -14.04 12.6 -31.42 5.87 -45.75 c -2.9 -6.18 -7.77 -11.05 -12.85 -15.34 c -3.97 -3.35 -8.18 -6.46 -12.84 -8.56 c -11.02 -4.96 -23.99 -3.79 -34.78 1.72 c -14.07 7.19 -31.12 25.7 -31.58 43.41 C 134.22 110.17 146.43 128.29 158.92 135 Z");
}

body:has([data-emotion=sad]:hover) #logo .right-pupil-base {
  d: path("M 344.08 138.1 c 8.03 4.32 18.08 5.11 27.06 5.7 c 6.32 0.42 12.89 -1.79 18.65 -4.61 c 7.83 -3.83 14.01 -10.9 18.17 -18.94 c 7.27 -14.04 11.6 -32.42 4.87 -46.75 c -2.9 -6.18 -5.77 -12.05 -10.85 -16.34 c -3.97 -3.35 -10.18 -8.46 -14.84 -10.56 c -11.02 -4.96 -23.99 -0.79 -34.78 4.72 c -14.07 7.19 -26.81 25.91 -29.58 43.41 C 320.26 110.64 331.59 131.38 344.08 138.1 Z");
}

/* ANGRY */
body:has([data-emotion=angry]:hover) #logo .eye-bg-base {
  d: path("M 26.9 36.6 c -1.51 43.35 17.4 91.92 50.37 117.39 c 11.3 8.73 24.5 16.12 38.58 21.75 c 13.15 5.26 40.94 10.82 40.94 10.82 s 29.13 1.8 42.64 -0.83 c 24.5 -4.75 38.12 -15.22 59.59 -34.91 c 10.43 7.93 18.91 14.55 28.88 20.64 c 8.26 5.05 22.58 10.14 31.7 13.07 c 14.59 4.69 30.22 3.59 45.36 1.7 c 20.53 -2.57 32.74 -5.18 51.98 -13.2 c 19.25 -8.02 34.66 -17.81 47.67 -34.91 c 13.05 -17.16 34.03 -60.54 32.77 -101.49 c -30.7 3.96 -61.85 7.7 -131.88 17.57 L 261.8 71.7 l -173.9 -27 L 26.9 36.6 Z");
}

body:has([data-emotion=angry]:hover) #logo .left-pupil-base {
  d: path("M 164.46 91.53 c 8.03 4.32 17.08 6.11 26.06 6.7 c 6.32 0.42 12.89 0.21 18.65 -2.61 c 7.83 -3.83 18.06 -10.73 22.22 -18.77 c 7.27 -14.04 7.56 -32.59 0.82 -46.92 c -2.9 -6.18 -7.77 -11.05 -12.85 -15.34 c -3.97 -3.35 -8.18 -6.46 -12.84 -8.56 c -11.02 -4.96 -23.99 -3.79 -34.78 1.72 c -14.07 7.19 -31.12 25.7 -31.58 43.41 C 139.75 66.7 151.96 84.81 164.46 91.53 Z");
}

body:has([data-emotion=angry]:hover) #logo .right-pupil-base {
  d: path("M 321.12 96.85 c 8.06 4.27 16.08 5.11 25.06 5.7 c 6.32 0.42 20.89 -2.79 26.65 -5.61 c 7.83 -3.83 17.01 -9.9 21.17 -17.94 c 7.27 -14.04 6.6 -32.42 -0.13 -46.75 c -2.9 -6.18 -5.77 -12.05 -10.85 -16.34 c -3.97 -3.35 -8.18 -8.46 -12.84 -10.56 c -11.02 -4.96 -23.99 -0.79 -34.78 4.72 c -14.07 7.19 -25.81 25.91 -28.58 43.41 C 304.31 69.4 306.14 88.91 321.12 96.85 Z");
}

/* LOOK AT */
body:has([data-emotion=lookat]:hover) #logo .eye-bg-base {
  d: path("M 26.9 36.6 c -1.51 43.35 17.4 91.92 50.37 117.39 c 11.3 8.73 24.5 16.12 38.58 21.75 c 13.15 5.26 40.94 10.82 40.94 10.82 s 29.13 1.8 42.64 -0.83 c 24.5 -4.75 38.12 -15.22 59.59 -34.91 c 10.43 7.93 18.91 14.55 28.88 20.64 c 8.26 5.05 22.58 10.14 31.7 13.07 c 14.59 4.69 30.22 3.59 45.36 1.7 c 20.53 -2.57 32.74 -5.18 51.98 -13.2 c 19.25 -8.02 34.66 -17.81 47.67 -34.91 c 13.05 -17.16 34.03 -60.54 32.77 -101.49 c -29.64 -0.49 -61.49 -1.76 -131.88 -2.43 l -134.7 -1.5 l -142.9 7 L 26.9 36.6 Z");
}

body:has([data-emotion=lookat]:hover) #logo .left-pupil-base {
  d: path("M 201.32 101.67 c 8.03 4.32 17.08 6.11 26.06 6.7 c 6.32 0.42 12.89 0.21 18.65 -2.61 c 7.83 -3.83 13.01 -11.9 17.17 -19.94 c 7.27 -14.04 12.6 -31.42 5.87 -45.75 c -2.9 -6.18 -7.77 -11.05 -12.85 -15.34 c -3.97 -3.35 -8.18 -6.46 -12.84 -8.56 c -11.02 -4.96 -23.99 -3.79 -34.78 1.72 c -14.07 7.19 -31.12 25.7 -31.58 43.41 C 176.62 76.83 188.83 94.95 201.32 101.67 Z");
}

body:has([data-emotion=lookat]:hover) #logo .right-pupil-base {
  d: path("M 386.85 104.67 c 8.03 4.32 18.08 5.11 27.06 5.7 c 6.32 0.42 12.89 -1.79 18.65 -4.61 c 7.83 -3.83 14.01 -10.9 18.17 -18.94 c 7.27 -14.04 11.6 -32.42 4.87 -46.75 c -2.9 -6.18 -5.77 -12.05 -10.85 -16.34 c -3.97 -3.35 -10.18 -8.46 -14.84 -10.56 c -11.02 -4.96 -23.99 -0.79 -34.78 4.72 c -14.07 7.19 -26.81 25.91 -29.58 43.41 C 363.04 77.22 374.36 97.95 386.85 104.67 Z");
}

/* LOOK AT MAIL */
body:has([data-emotion=lookatmail]:hover) #logo .eye-bg-base {
  d: path("M 26.9 36.6 c -1.51 43.35 17.4 91.92 50.37 117.39 c 11.3 8.73 24.5 16.12 38.58 21.75 c 13.15 5.26 40.94 10.82 40.94 10.82 s 29.13 1.8 42.64 -0.83 c 24.5 -4.75 38.12 -15.22 59.59 -34.91 c 10.43 7.93 18.91 14.55 28.88 20.64 c 8.26 5.05 22.58 10.14 31.7 13.07 c 14.59 4.69 30.22 3.59 45.36 1.7 c 20.53 -2.57 32.74 -5.18 51.98 -13.2 c 19.25 -8.02 34.66 -17.81 47.67 -34.91 c 13.05 -17.16 34.03 -60.54 32.77 -101.49 c -29.64 -0.49 -61.49 -1.76 -131.88 -2.43 l -134.7 -1.5 l -142.9 7 L 26.9 36.6 Z");
}

body:has([data-emotion=lookatmail]:hover) #logo .left-pupil-base {
  d: path("M 151.32 101.67 c 8.03 4.32 17.08 6.11 26.06 6.7 c 6.32 0.42 12.89 0.21 18.65 -2.61 c 7.83 -3.83 13.01 -11.9 17.17 -19.94 c 7.27 -14.04 12.6 -31.42 5.87 -45.75 c -2.9 -6.18 -7.77 -11.05 -12.85 -15.34 c -3.97 -3.35 -8.18 -6.46 -12.84 -8.56 c -11.02 -4.96 -23.99 -3.79 -34.78 1.72 c -14.07 7.19 -31.12 25.7 -31.58 43.41 C 126.62 76.83 138.83 94.95 151.32 101.67 Z");
}

body:has([data-emotion=lookatmail]:hover) #logo .right-pupil-base {
  d: path("M 336.85 104.67 c 8.03 4.32 18.08 5.11 27.06 5.7 c 6.32 0.42 12.89 -1.79 18.65 -4.61 c 7.83 -3.83 14.01 -10.9 18.17 -18.94 c 7.27 -14.04 11.6 -32.42 4.87 -46.75 c -2.9 -6.18 -5.77 -12.05 -10.85 -16.34 c -3.97 -3.35 -10.18 -8.46 -14.84 -10.56 c -11.02 -4.96 -23.99 -0.79 -34.78 4.72 c -14.07 7.19 -26.81 25.91 -29.58 43.41 C 313.04 77.22 324.36 97.95 336.85 104.67 Z");
}

/* DOUBT */
body:has([data-emotion=doubt]:hover) #logo .eye-bg-base,
body:has(.surprise-target:hover) #logo-small .eye-bg-base,
body:has(.surprise-target:hover) #logo .eye-bg-base {
  d: path("M 26.9 53.6 c -1.51 43.35 17.4 74.92 50.37 100.39 c 11.3 8.73 24.5 16.12 38.58 21.75 c 13.15 5.26 40.94 10.82 40.94 10.82 s 29.13 1.8 42.64 -0.83 c 24.5 -4.75 38.12 -15.22 59.59 -34.91 c 10.43 7.93 18.91 14.55 28.88 20.64 c 8.26 5.05 22.58 10.14 31.7 13.07 c 14.59 4.69 30.22 3.59 45.36 1.7 c 20.53 -2.57 32.74 -5.18 51.98 -13.2 c 19.25 -8.02 34.66 -17.81 47.67 -34.91 c 13.05 -17.16 34.03 -60.54 32.77 -101.49 c -28.23 -3.4 -50.72 -5.76 -131.88 -14.43 L 250.8 66.7 l -141.9 -1 L 26.9 53.6 Z");
}

body:has([data-emotion=doubt]:hover) #logo .left-pupil-base,
body:has(.surprise-target:hover) #logo-small .left-pupil-base,
body:has(.surprise-target:hover) #logo .left-pupil-base {
  d: path("M 153.4 135.54 c 8.03 4.32 17.08 6.11 26.06 6.7 c 6.32 0.42 12.89 -1.79 18.65 -4.61 c 7.83 -3.83 12.5 -9.29 15.17 -17.94 c 4.02 -12.98 5.64 -23.95 2.62 -36.8 c -1.56 -6.64 -0.95 -7.15 -7.6 -7.29 c -4.9 -0.11 -13.82 -0.81 -17.69 0.01 c -11.82 2.48 -30.46 -1.26 -42.57 -1.26 c -8.4 0 -11.17 1.24 -11.63 18.95 C 136 108.83 140.9 128.82 153.4 135.54 Z");
}

body:has([data-emotion=doubt]:hover) #logo .right-pupil-base,
body:has(.surprise-target:hover) #logo-small .right-pupil-base,
body:has(.surprise-target:hover) #logo .right-pupil-base {
  d: path("M 324.82 138.64 c 8.03 4.32 18.08 5.11 27.06 5.7 c 6.32 0.42 12.89 -1.79 18.65 -4.61 c 7.83 -3.83 14.01 -10.9 18.17 -18.94 c 7.27 -14.04 11.6 -32.42 4.87 -46.75 c -2.9 -6.18 -5.77 -12.05 -10.85 -16.34 c -3.97 -3.35 -10.18 -8.46 -14.84 -10.56 c -11.02 -4.96 -23.99 -0.79 -34.78 4.72 c -14.07 7.19 -26.81 25.91 -29.58 43.41 C 301.01 111.18 312.33 131.92 324.82 138.64 Z");
}

/* DOUBT LOOK MAIL */
body:has([data-emotion=doubt-lookmail]:hover) #logo .eye-bg-base {
  d: path("M 26.9 35.6 c -1.51 43.35 17.4 92.92 50.37 118.39 c 11.3 8.73 24.5 16.12 38.58 21.75 c 13.15 5.26 40.94 10.82 40.94 10.82 s 29.13 1.8 42.64 -0.83 c 24.5 -4.75 38.12 -15.22 59.59 -34.91 c 10.43 7.93 18.91 14.55 28.88 20.64 c 8.26 5.05 22.58 10.14 31.7 13.07 c 14.59 4.69 30.22 3.59 45.36 1.7 c 20.53 -2.57 32.74 -5.18 51.98 -13.2 c 19.25 -8.02 34.66 -17.81 47.67 -34.91 c 13.05 -17.16 34.03 -60.54 32.77 -101.49 c -28.23 -3.4 -50.72 -5.76 -131.88 -14.43 L 250.8 48.7 l -141.9 -1 L 26.9 35.6 Z");
}

body:has([data-emotion=doubt-lookmail]:hover) #logo .left-pupil-base {
  d: path("M 153.4 135.54 c 8.03 4.32 17.08 6.11 26.06 6.7 c 6.32 0.42 12.89 -1.79 18.65 -4.61 c 7.83 -3.83 12.5 -9.29 15.17 -17.94 c 4.02 -12.98 5.64 -23.95 2.62 -36.8 c -1.56 -6.64 -0.81 -5.11 -4.24 -10.8 c -4.44 -7.37 -18.29 -14.84 -34.74 -14.82 c -12.08 0.02 -23.66 4.97 -33.05 15.07 c 0 0 -7.01 3.24 -7.47 20.95 C 136 108.83 140.9 128.82 153.4 135.54 Z");
}

body:has([data-emotion=doubt-lookmail]:hover) #logo .right-pupil-base {
  d: path("M 324.82 138.64 c 8.03 4.32 18.08 5.11 27.06 5.7 c 6.32 0.42 12.89 -1.79 18.65 -4.61 c 7.83 -3.83 14.01 -10.9 18.17 -18.94 c 7.27 -14.04 11.6 -32.42 4.87 -46.75 c -2.9 -6.18 -5.77 -12.05 -10.85 -16.34 c -3.97 -3.35 -10.18 -8.46 -14.84 -10.56 c -11.02 -4.96 -23.99 -0.79 -34.78 4.72 c -14.07 7.19 -26.81 25.91 -29.58 43.41 C 301.01 111.18 312.33 131.92 324.82 138.64 Z");
}

/* DRUNK */
body:has([data-emotion=drunk]:hover) #logo .eye-bg-base {
  d: path("M 26.9 36.6 c -1.51 43.35 17.4 91.92 50.37 117.39 c 11.3 8.73 24.5 16.12 38.58 21.75 c 13.15 5.26 40.94 10.82 40.94 10.82 s 29.13 1.8 42.64 -0.83 c 24.5 -4.75 38.12 -15.22 59.59 -34.91 c 10.43 7.93 18.91 14.55 28.88 20.64 c 8.26 5.05 22.58 10.14 31.7 13.07 c 14.59 4.69 30.22 3.59 45.36 1.7 c 20.53 -2.57 32.74 -5.18 51.98 -13.2 c 19.25 -8.02 34.66 -17.81 47.67 -34.91 c 13.05 -17.16 34.03 -60.54 32.77 -101.49 c -29.64 -0.49 -61.49 -1.76 -131.88 -2.43 l -134.7 -1.5 l -142.9 7 L 26.9 36.6 Z");
}

body:has([data-emotion=drunk]:hover) #logo .left-pupil-base {
  d: path("M 180.08 110.48 c 8.03 4.32 17.08 6.11 26.06 6.7 c 6.32 0.42 12.89 0.21 18.65 -2.61 c 7.83 -3.83 13.01 -11.9 17.17 -19.94 c 7.27 -14.04 12.6 -31.42 5.87 -45.75 c -2.9 -6.18 -7.77 -11.05 -12.85 -15.34 c -3.97 -3.35 -8.18 -6.46 -12.84 -8.56 c -11.02 -4.96 -23.99 -3.79 -34.78 1.72 c -14.07 7.19 -31.12 25.7 -31.58 43.41 C 155.38 85.65 167.58 103.76 180.08 110.48 Z");
}

body:has([data-emotion=drunk]:hover) #logo .right-pupil-base {
  d: path("M 307.49 154.69 c 8.03 4.32 18.08 5.11 27.06 5.7 c 6.32 0.42 12.89 -1.79 18.65 -4.61 c 7.83 -3.83 14.01 -10.9 18.17 -18.94 c 7.27 -14.04 11.6 -32.42 4.87 -46.75 c -2.9 -6.18 -5.77 -12.05 -10.85 -16.34 c -3.97 -3.35 -10.18 -8.46 -14.84 -10.56 c -11.02 -4.96 -23.99 -0.79 -34.78 4.72 c -14.07 7.19 -26.81 25.91 -29.58 43.41 C 283.67 127.24 294.99 147.97 307.49 154.69 Z");
}

/* HAPPY */
body:has([data-emotion=happy]:hover) #logo .eye-bg-base {
  d: path("M 26.9 36.6 c -1.51 43.35 17.4 91.92 50.37 117.39 c 11.3 8.73 24.5 16.12 38.58 21.75 c 13.15 5.26 40.94 10.82 40.94 10.82 s 29.13 1.8 42.64 -0.83 c 24.5 -4.75 38.12 -15.22 59.59 -34.91 c 10.43 7.93 18.91 14.55 28.88 20.64 c 8.26 5.05 22.58 10.14 31.7 13.07 c 14.59 4.69 30.22 3.59 45.36 1.7 c 20.53 -2.57 32.74 -5.18 51.98 -13.2 c 19.25 -8.02 34.66 -17.81 47.67 -34.91 c 13.05 -17.16 34.03 -60.54 32.77 -101.49 c -29.64 -0.49 -61.49 -1.76 -131.88 -2.43 l -134.7 -1.5 l -142.9 7 L 26.9 36.6 Z");
}

body:has([data-emotion=happy]:hover) #logo .left-pupil-base {
  d: path("M 136.2 107.95 c 8.85 2.19 14.15 -6.69 31.88 -3.7 c 13.21 2.23 13.91 13.85 30.58 12.89 c 8.7 -0.5 14.45 -0.99 18.27 -9.19 c 3.67 -7.88 3.43 -17.55 -4.14 -31.47 c -2 -3.67 -5.95 -8.76 -11.04 -13.05 c -3.97 -3.35 -13.05 -9.47 -18.06 -10.5 c -4.08 -0.83 -17.7 -2.08 -23.02 0.83 c -13.86 7.59 -37.62 18.35 -38.08 36.06 C 122.19 105.36 130.1 106.45 136.2 107.95 Z");
}

body:has([data-emotion=happy]:hover) #logo .right-pupil-base {
  d: path("M 328.4 107.4 c 8.07 -4.25 19.37 -9.25 28.35 -8.66 c 6.32 0.42 16.26 4.64 21.84 8.21 c 7.34 4.7 10.7 4.94 17.62 -0.89 c 11.38 -9.59 5.54 -22.08 1.74 -30.03 c -2.95 -6.16 -3.77 -9.05 -8.85 -13.34 c -3.97 -3.35 -16.85 -13.46 -21.84 -14.56 c -9.73 -2.14 -17.66 -1.14 -27.78 5.72 c -13.08 8.87 -26.91 21.87 -29.58 43.41 C 307.92 113.26 316.13 113.87 328.4 107.4 Z");
}

/* FEAR */
body:has([data-emotion=fear]:hover) #logo .eye-bg-base {
  d: path("M 26.9 60.6 c -1.51 43.35 17.4 67.92 50.37 93.39 c 11.3 8.73 24.5 16.12 38.58 21.75 c 13.15 5.26 40.94 10.82 40.94 10.82 s 29.13 1.8 42.64 -0.83 c 24.5 -4.75 38.12 -15.22 59.59 -34.91 c 10.43 7.93 18.91 14.55 28.88 20.64 c 8.26 5.05 22.58 10.14 31.7 13.07 c 14.59 4.69 30.22 3.59 45.36 1.7 c 20.53 -2.57 32.74 -5.18 51.98 -13.2 c 19.25 -8.02 34.66 -17.81 47.67 -34.91 c 13.05 -17.16 34.03 -45.54 32.77 -86.49 c -30.81 -2.78 -64.75 -6.01 -100.88 -8.43 L 259.8 23.7 l -139.9 13 L 26.9 60.6 Z");
}

body:has([data-emotion=fear]:hover) #logo .left-pupil-base {
  d: path("M 178.58 101.8 c 9.1 0.63 17.33 0.55 26.31 1.14 c 6.32 0.42 15.62 2.37 22.02 2 c 8.8 -0.51 17.36 5.48 20.67 -2.94 c 5.36 -13.65 2.29 -28.8 -1.28 -46.36 c -1.36 -6.69 -5.5 -12.89 -10.58 -17.18 c -3.97 -3.35 -10.15 -2.38 -15.09 -1.04 c -11.73 3.17 -24.97 7.38 -35.75 12.9 c -14.07 7.19 -30.64 6.58 -30.64 30.89 C 154.23 105.74 164.69 100.84 178.58 101.8 Z");
}

body:has([data-emotion=fear]:hover) #logo .right-pupil-base {
  d: path("M 312.24 104.93 c 9.03 -1.29 21.25 -2.28 30.23 -1.69 c 6.32 0.42 11.67 0.13 18.06 -0.31 c 8.98 -0.61 24.96 -1.14 26.86 -4.5 c 3.77 -6.66 2.35 -20.13 -4.39 -34.47 c -2.9 -6.18 -7.01 -6.02 -11.32 -8.49 c -4.51 -2.59 -11.15 -5.06 -15.82 -7.16 c -11.02 -4.96 -20.64 -7.16 -32.3 -10.45 c -27.31 -7.7 -29.07 25.64 -30.58 43.41 C 291.63 97.34 295.92 107.27 312.24 104.93 Z");
}

/* SURPRISED */
body:has([data-emotion=surprised]:hover) #logo .eye-bg-base {
  d: path("M 26.9 36.6 c -1.51 43.35 17.4 91.92 50.37 117.39 c 11.3 8.73 24.5 16.12 38.58 21.75 c 13.15 5.26 40.94 10.82 40.94 10.82 s 29.13 1.8 42.64 -0.83 c 24.5 -4.75 38.12 -15.22 59.59 -34.91 c 10.43 7.93 18.91 14.55 28.88 20.64 c 8.26 5.05 22.58 10.14 31.7 13.07 c 14.59 4.69 30.22 3.59 45.36 1.7 c 20.53 -2.57 32.74 -5.18 51.98 -13.2 c 19.25 -8.02 34.66 -17.81 47.67 -34.91 c 13.05 -17.16 34.03 -60.54 32.77 -101.49 c -30.81 -2.78 -64.75 -7.01 -100.88 -9.43 l -134.7 6.5 l -141.9 13 L 26.9 36.6 Z");
}

body:has([data-emotion=surprised]:hover) #logo .left-pupil-base {
  d: path("M 165.54 121.32 c 5.48 2.95 11.65 4.17 17.78 4.57 c 4.31 0.28 8.79 0.14 12.72 -1.78 c 5.34 -2.61 8.88 -8.12 11.72 -13.6 c 4.96 -9.58 8.6 -21.43 4 -31.21 c -1.98 -4.21 -5.3 -7.54 -8.77 -10.46 c -2.71 -2.29 -5.58 -4.41 -8.76 -5.84 c -7.52 -3.38 -16.37 -2.59 -23.72 1.17 c -9.6 4.91 -21.23 17.53 -21.54 29.61 C 148.69 104.38 157.02 116.73 165.54 121.32 Z");
}

body:has([data-emotion=surprised]:hover) #logo .right-pupil-base {
  d: path("M 323.82 136.41 c 8.03 4.32 18.08 5.11 27.06 5.7 c 6.32 0.42 12.89 -1.79 18.65 -4.61 c 7.83 -3.83 14.01 -10.9 18.17 -18.94 c 7.27 -14.04 11.6 -32.42 4.87 -46.75 c -2.9 -6.18 -5.77 -12.05 -10.85 -16.34 c -3.97 -3.35 -10.18 -8.46 -14.84 -10.56 c -11.02 -4.96 -23.99 -0.79 -34.78 4.72 c -14.07 7.19 -26.81 25.91 -29.58 43.41 C 300.01 108.96 311.33 129.69 323.82 136.41 Z");
}

/* SHAPES MORPHING ANIMATION */
body:has([data-emotion=fear]:hover) #logo [class*=pupil],
body:has([data-emotion=sad]:hover) #logo [class*=pupil],
body:has([data-emotion=doubt]:hover) #logo [class*=pupil],
body:has(.surprise-target:hover) #logo [class*=pupil],
body:has(.surprise-target:hover) #logo-small [class*=pupil] {
  animation: eyes-blink 3s infinite 0.75s;
}

body:has([data-emotion=happy]:hover) #logo [class*=pupil] {
  animation: none;
}

body:has([data-emotion=love]:hover) #logo [class*=pupil] {
  animation: heart-beating 1.5s ease-out infinite 0.75s;
}

body:has([data-emotion=drunk]:hover) #logo [class*=left-pupil] {
  animation: drunk-left 1.2s linear infinite both 0.25s;
}

body:has([data-emotion=drunk]:hover) #logo [class*=right-pupil] {
  animation: drunk-right 1.2s linear infinite both 0.25s;
}

body:has([data-emotion=lookat]:hover) #logo [class*=pupil], body:has([data-emotion=base]:hover) #logo [class*=pupil] {
  animation: lookat-me-bored 8s linear infinite both 0.25s;
}

body:has([data-emotion=lookatmail]:hover) #logo [class*=pupil] {
  animation: lookatmail 6s linear infinite both 0s;
}

body:has([data-emotion=doubt-lookmail]:hover) #logo .left-pupil-base {
  animation: doubt-lookmail 4s linear infinite both 0.25s;
}

body:has([data-emotion=doubt-lookmail]:hover) #logo .right-pupil-base {
  animation: doubt-lookmail 4s linear infinite both 0.25s;
}

#logo-small [class*=pupil] {
  animation: lookat-me-bored 12s linear infinite both 0.25s;
}

#logo-small:hover [class*=pupil] {
  animation: heart-beating 1.5s ease-out infinite 0.75s;
}

.text {
  position: relative;
  margin: 0;
  user-select: none;
  display: block;
}

.cursor {
  pointer-events: none;
  position: absolute;
}

a {
  position: relative;
  z-index: 100;
}

.contact .text {
  transition: all 0.2s ease-out;
}

.contact .text:hover {
  color: rgb(var(--color-pink));
}

.magnet a.text {
  color: rgb(var(--color-pink));
}

a.text:not(.social):before {
  content: "";
  color: rgb(var(--color-pink));
  background: var(--color-black);
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all 0.3s ease-out;
}

.magnet a.text:before,
a.text:hover:before {
  width: 100%;
}

.social {
  display: block;
  width: 1em;
}

@keyframes doubt-lookmail {
  /* blink */
  18% {
    clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
  }
  19% {
    clip-path: polygon(0 45%, 100% 45%, 100% 55%, 0 55%);
  }
  20% {
    clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
  }
  /* lookatmail */
  18% {
    translate: 0 0%;
  }
  20% {
    translate: 60% 25%;
  }
  26% {
    translate: 60% 25%;
  }
  28% {
    translate: 0 0;
  }
  /* blink */
  56% {
    clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
  }
  58% {
    clip-path: polygon(0 45%, 100% 45%, 100% 55%, 0 55%);
  }
  60% {
    clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
  }
  62% {
    clip-path: polygon(0 45%, 100% 45%, 100% 55%, 0 55%);
  }
  64% {
    clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
  }
}
@keyframes lookatmail {
  /* blink */
  18% {
    clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
  }
  19% {
    clip-path: polygon(0 45%, 100% 45%, 100% 55%, 0 55%);
  }
  20% {
    clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
  }
  /* lookatmail */
  18% {
    translate: 0 0;
  }
  20% {
    translate: 40% 50%;
  }
  26% {
    translate: 40% 50%;
  }
  28% {
    translate: 0 0;
  }
  /* blink */
  36% {
    clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
  }
  38% {
    clip-path: polygon(0 45%, 100% 45%, 100% 55%, 0 55%);
  }
  40% {
    clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
  }
  /* lookatmail 2x */
  72% {
    translate: 0 0;
  }
  74% {
    translate: 40% 50%;
  }
  76% {
    translate: 40% 50%;
  }
  78% {
    translate: 0 0;
  }
  82% {
    translate: 0 0;
  }
  84% {
    translate: 40% 50%;
  }
  96% {
    translate: 40% 50%;
  }
  98% {
    translate: 0 0;
  }
}
@keyframes lookat-me-bored {
  /* look right */
  18% {
    translate: 0 0;
    transform-origin: 30% center;
  }
  /* look center */
  20% {
    translate: -50% 0;
  }
  /* blink */
  36% {
    clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
  }
  37.5% {
    clip-path: polygon(0 45%, 100% 45%, 100% 55%, 0 55%);
  }
  39% {
    clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
  }
  40% {
    clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%);
  }
  41% {
    clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
  }
  46% {
    translate: -50% 0;
  }
  /* look left */
  50% {
    translate: -100% 0;
  }
  58% {
    translate: -100% 0;
  }
  59% {
    translate: -60% 0;
  }
  65% {
    translate: -60% 0;
  }
  68% {
    translate: -60% 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  73% {
    translate: -110% 0;
    clip-path: polygon(0 45%, 100% 45%, 100% 75%, 0 75%);
  }
  78% {
    translate: -110% 0%;
  }
  83% {
    translate: -85% 0%;
    clip-path: polygon(0 40%, 100% 40%, 100% 80%, 0 80%);
  }
  /* look center */
  84% {
    translate: -50% 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  93% {
    translate: -50% 0;
  }
  /* look right */
  96% {
    translate: 0 0;
  }
  98% {
    clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
  }
  99% {
    clip-path: polygon(0 45%, 100% 45%, 100% 55%, 0 55%);
  }
  100% {
    clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
    transform-origin: 30% center;
  }
}
@keyframes eyes-blink {
  0% {
    clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
  }
  2% {
    clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%);
  }
  8% {
    clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
  }
  10% {
    clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%);
  }
  13% {
    clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
  }
  100% {
    clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
  }
}
@keyframes heart-beating {
  0%, 80%, 100% {
    transform: scale(1);
  }
  15%, 35%, 55% {
    transform: scale(1.08);
  }
  30%, 40% {
    transform: scale(1.2);
  }
}
@keyframes drunk-right {
  0% {
    transform: rotate(0);
    transform-origin: 60% 50%;
  }
  100% {
    transform: rotate(360deg);
    transform-origin: 60% 50%;
  }
}
@keyframes drunk-left {
  0% {
    transform: rotate(0);
    transform-origin: 40% 55%;
  }
  100% {
    transform: rotate(360deg);
    transform-origin: 40% 55%;
  }
}
@media screen and (min-width: 768px) {
  ::-webkit-scrollbar {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .page-home .grid-container {
    display: none;
  }
  .site-title {
    font-size: clamp(24px, 9vw, 28px);
  }
  .main-header {
    max-height: 100vh;
  }
}
.links {
  font-weight: 600;
  display: flex;
  gap: calc(var(--gutter) / 2);
  flex-wrap: wrap;
  align-items: center;
  height: 45%;
}

a {
  color: rgb(var(--color-black));
  text-decoration: none;
  font-weight: 600;
}

[data-status=just-a-little-bit] .just-a-little-bit,
[data-status=just-leaving-like-that] .just-leaving-like-that,
[data-status=keep-going] .keep-going,
[data-status=angry] .angry,
[data-status=anyway] .anyway,
[data-status=saw-nothing] .saw-nothing,
[data-status=nothing-here] .nothing-here {
  opacity: 1;
}

.logo > svg path {
  transition: all 0.2s ease-out;
}

[class*=eye-bg-] {
  fill: rgb(var(--color-pink));
}

[class*=-pupil-] {
  fill: rgb(var(--color-red));
  transform-origin: center;
  transform-box: fill-box;
}

.logo > svg .text-logo {
  fill: rgb(var(--color-pink));
}

.logo > svg .bg {
  fill: rgb(var(--color-red));
}

/* Style the grid container to get emotions on:hover */
.page-home .grid-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(5, 20%);
  grid-template-rows: 20% 20% 13% 20% 27%;
  gap: 0;
  z-index: 990; /* Place the grid below other content */
}

.cell {
  opacity: 0;
}

/*
.cell {
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
}

.cell:hover {
  background: rgba(0, 0, 0, 0.1) !important;
}*/
.page-home #logo [class*=pupil] {
  animation: lookat-me-bored 8s linear infinite both 0s;
}

.page-home .grid-container {
  display: none; /* Pas d'animation par défaut */
}

/* Appliquer des styles pour Safari */
body.firefox.page-home .grid-container,
body.chrome.page-home .grid-container {
  display: grid; /* Pas d'animation par défaut */
}
body.firefox.page-home .grid-container:not(:hover) ~ .main-header [class*=pupil],
body.chrome.page-home .grid-container:not(:hover) ~ .main-header [class*=pupil] {
  animation: lookat-me-bored 8s linear infinite both 0.25s;
}

html {
  margin: 0;
  padding: 0;
  scroll-padding-top: 30vh;
}
@media only screen and (min-width: 992px) {
  html {
    /*    scroll-snap-type: mandatory;
        scroll-snap-points-y: repeat(100vh);
        scroll-snap-type: y mandatory;
        scroll-snap-stop: always;*/
  }
}

html, body {
  font-size: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--font-content);
  font-weight: var(--fw-regular);
  font-size: var(--rem-baseline);
  color: rgb(var(--color-black));
  background: rgb(var(--color-pink));
  letter-spacing: -0.015em;
}
.navigation-open html, #navigation-open:checked ~ #page html, .navigation-open body, #navigation-open:checked ~ #page body {
  overflow: hidden;
  height: 100vh;
}
@media only screen and (max-width: 992px) {
  html.mobile-navigation-opened, body.mobile-navigation-opened {
    overflow: hidden;
    height: 100vh;
  }
  html.mobile-navigation-opened:before, body.mobile-navigation-opened:before {
    content: "";
    width: 100vw;
    height: 100vh;
    background: rgb(var(--color-pink));
    right: 0;
    top: 0;
    position: absolute;
    z-index: 998;
  }
}

body.popup-opened {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

::selection {
  color: rgb(var(--color-black));
  background: rgb(var(--color-grey), 0.3);
}

em {
  font-style: inherit;
}

ul {
  line-height: 1.25em;
  font-size: 1.125em;
}

p {
  margin-bottom: 1em;
  line-height: 1.325em;
  font-size: 1.125em;
}

.site-title {
  display: none;
}

[data-clickable] {
  cursor: pointer;
}

h1[class*=title],
h2[class*=title],
h3[class*=title],
h4[class*=title],
h5[class*=title],
h6[class*=title] {
  font-family: var(--font-special);
}

#page-wrapper {
  position: relative;
  background: rgb(var(--color-pink));
  z-index: 1;
}

#page {
  max-width: 100vw;
  overflow-x: clip;
}
.mobile-navigation-opened #page {
  pointer-events: none;
}

* {
  box-sizing: border-box;
}

#logo {
  position: static;
}

#logo-small {
  position: fixed;
  top: var(--margin-8);
  left: var(--margin-8);
  display: block;
  width: var(--margin-3);
  transition: all 0.6s ease-out 0.6s;
  z-index: 999;
}
#logo-small svg {
  width: var(--margin-3);
  border: 2px solid rgb(var(--color-pink));
}

.page-home #logo-small {
  transform: calc(var(--logo-offset) * -1) 0;
  transform: translateY(-200px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.home-welcome-banner {
  height: 100vh;
  padding: 0;
  margin: auto;
}
.home-welcome-banner > .wrapper {
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100%;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}

strong {
  font-weight: 800;
}

u {
  text-underline-offset: 0.15em;
}

.home-welcome-banner-title {
  align-self: flex-start;
  justify-self: flex-start;
  font-size: clamp(18px, (5vw + 5vh) / 2, 38px);
  margin: var(--margin-8);
  max-width: 550px;
  text-wrap: balance;
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 290px) {
  .target:has(.social) {
    order: 4;
  }
}
.home-welcome-banner-title .text > * {
  display: block;
}

.home-welcome-banner-contact {
  justify-self: end;
  align-self: end;
  text-align: right;
}

.home-welcome-banner-contact > * {
  display: block;
}

.home-welcome-banner-links {
  font-weight: 600;
  display: flex;
  gap: calc(var(--gutter) / 2);
  flex-wrap: wrap;
  align-items: center;
  padding-right: var(--margin-8);
}
.home-welcome-banner-links a {
  color: rgb(var(--color-black));
  text-decoration: none;
  font-weight: 800;
}
.home-welcome-banner-links .icon, .home-welcome-banner-links .mobile-navigation-opened #navigation, .mobile-navigation-opened .home-welcome-banner-links #navigation {
  font-size: var(--margin-6);
}

.coming-soon {
  background: rgb(var(--color-main));
  width: 100vw;
  padding: calc(var(--gutter) * 1.25);
}

.footer-title > * {
  display: block;
}

.coming-soon .wrapper {
  font-size: calc(var(--font-size) * 1.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--gutter) / 1.25);
}

.coming-soon .wrapper > * {
  display: block;
  text-align: center;
}

.copyright {
  font-family: var(--font-content);
  font-size: 0.9rem;
}

.hidden {
  display: none;
}

section > .wrapper {
  padding: var(--margin-8) 0;
}

.services-item {
  margin-top: var(--margin-6);
}

.services-item > .wrapper, section > .wrapper {
  width: calc(100% - var(--margin-4));
  margin: auto;
}

.next-step-arrow, .project-item-arrow, .service-item-arrow {
  width: var(--margin-8);
  background: rgb(var(--color-black));
  mix-blend-mode: difference;
  transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}
@media only screen and (min-width: 992px) {
  .next-step-arrow, .project-item-arrow, .service-item-arrow {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateX(0%) translateY(-50%);
  }
}
.next-step-arrow path, .project-item-arrow path, .service-item-arrow path {
  fill: rgb(var(--color-pink));
}
@media only screen and (max-width: 992px) {
  .next-step-arrow path, .project-item-arrow path, .service-item-arrow path {
    d: path("M774.3,106.2L498,382.5L645.5,530H448.3l0,0H57.8v390.5H613l0,0h32.5L498,1068.1l276.3,276.3l619.1-619.1L774.3,106.2z");
  }
}

@media only screen and (min-width: 992px) {
  .next-step-item:hover .next-step-arrow, .project-item:hover .project-item-arrow, .service-item:hover .service-item-arrow {
    transform: translate3d(calc(var(--margin-full) + var(--margin-8)), 0, 0);
  }
  .next-step-item:hover .next-step-arrow path, .project-item:hover .project-item-arrow path, .service-item:hover .service-item-arrow path {
    animation: squareToArrow 1s cubic-bezier(0.3, 1, 0.8, 1);
    animation-fill-mode: both;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  margin-bottom: clamp(1rem, 0.5em, 2rem);
  letter-spacing: -0.015em;
}

h1 {
  font-size: var(--font-size-title);
}

h2 {
  font-size: clamp(1rem, var(--font-size-title) * 0.6, var(--font-size-title));
}

h3 {
  font-size: clamp(1rem, var(--font-size-title) * 0.5, var(--font-size-title));
}

h4 {
  font-size: clamp(1rem, var(--font-size-title) * 0.4, var(--font-size-title));
}

h5 {
  font-size: clamp(1rem, var(--font-size-title) * 0.35, var(--font-size-title));
}

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

.modular.faq .answer h1, .service-article h1, .modular.rock-paper-scissors h1,
.modular.faq .answer h2,
.service-article h2,
.modular.rock-paper-scissors h2,
.modular.faq .answer h3,
.service-article h3,
.modular.rock-paper-scissors h3,
.modular.faq .answer h4,
.service-article h4,
.modular.rock-paper-scissors h4,
.modular.faq .answer h5,
.service-article h5,
.modular.rock-paper-scissors h5,
.modular.faq .answer h6,
.service-article h6,
.modular.rock-paper-scissors h6 {
  font-family: var(--font-special);
  margin-bottom: 0.5em;
}
.modular.faq .answer a, .service-article a, .modular.rock-paper-scissors a {
  text-decoration: underline;
  position: relative;
  text-underline-offset: 0.25em;
}
.modular.faq .answer em, .service-article em, .modular.rock-paper-scissors em {
  font-style: italic;
}
.modular.faq .answer strong, .service-article strong, .modular.rock-paper-scissors strong {
  font-weight: var(--fw-bold);
}
.modular.faq .answer ul, .service-article ul, .modular.rock-paper-scissors ul {
  list-style: initial;
  padding-left: 1.75em;
  margin-bottom: 1em;
  margin-top: -0.5em;
  font-size: 1.1em;
}
.modular.faq .answer ol, .service-article ol, .modular.rock-paper-scissors ol {
  list-style: decimal;
  padding-left: 1.75em;
  margin-bottom: 1em;
  margin-top: -0.5em;
}
.modular.faq .answer li, .service-article li, .modular.rock-paper-scissors li {
  margin: 0.25em 0;
}
.modular.faq .answer blockquote, .service-article blockquote, .modular.rock-paper-scissors blockquote {
  font-size: 1.75em;
  font-family: var(--font-special);
  margin: 1.75em auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modular.faq .answer blockquote p, .service-article blockquote p, .modular.rock-paper-scissors blockquote p {
  margin-bottom: 0;
}
.modular.faq .answer blockquote:before, .service-article blockquote:before, .modular.rock-paper-scissors blockquote:before, .modular.faq .answer blockquote:after, .service-article blockquote:after, .modular.rock-paper-scissors blockquote:after {
  content: "«";
  display: block;
  margin: 0 0.5em;
}
.modular.faq .answer blockquote:after, .service-article blockquote:after, .modular.rock-paper-scissors blockquote:after {
  content: "»";
}

p:empty {
  display: none;
}

.hidden {
  display: none;
}

.container-links {
  display: inline-flex;
  gap: 1em;
  flex-wrap: wrap;
  margin-top: 1.25em;
}

.page-template-service #page-body > .wrapper > .section-to-scroll {
  display: flex;
  position: relative;
}

.services-item > .wrapper {
  display: flex;
  gap: var(--gutter-w);
  align-items: center;
  min-height: 80vh;
}
.services-item.right > .wrapper {
  flex-direction: row-reverse;
}

.service-image {
  flex: 1.25;
}

.service-content {
  flex: 1.75;
}

.service-article {
  flex: 3.5;
  position: relative;
  z-index: 5;
  margin-top: calc(var(--margin-8) + var(--margin-3));
  margin-left: calc(var(--margin-8) * 2 + var(--margin-3));
  padding-right: var(--margin-4);
  padding-bottom: calc(var(--margin-half) * 2);
}
.service-article .service-article-content {
  max-width: 800px;
}
.service-article .service-title {
  position: sticky;
  top: 0;
  height: calc(var(--margin-3) + var(--margin-8) * 2);
  display: flex;
  background: rgb(var(--color-pink));
  background: linear-gradient(180deg, rgb(var(--color-pink)) 0%, rgb(var(--color-pink)) 85%, rgba(var(--color-pink), 0) 100%);
  z-index: 110;
  margin-bottom: calc(var(--margin-8) * 1);
}
.service-article .service-title > strong {
  position: absolute;
  width: calc(100vw - var(--margin-8) * 2 - var(--margin-3));
  display: block;
  left: 0;
  bottom: var(--margin-8);
  line-height: 0.5em;
  transform: translateX(-0.07em) translateY(-2px);
}

.service-resume {
  margin-bottom: var(--margin-half);
}
.service-resume strong {
  display: block;
  font-weight: 700;
}

.service-projects {
  flex: 2;
  height: 100vh;
  position: sticky;
  top: 0;
}

.service-projects-list {
  position: absolute;
  padding: var(--margin-8) var(--margin-6);
  z-index: 1;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: self-start;
}

.service-projects-item {
  padding: 0.3em 0;
  position: relative;
  left: 1em;
}
.service-projects-item:before {
  content: "//";
  margin-right: 0.175em;
  opacity: 0.5;
  position: absolute;
  left: -1em;
  transition: all 0.4s ease-in;
}
.service-projects-item:after {
  content: "";
  position: absolute;
  width: 0%;
  height: calc(100% - 0.8em);
  background: none;
  left: -1em;
  top: 0.35em;
  transform: skew(-21deg, 0);
  transition: width 0.4s ease-in, background 0s ease 0.4s;
}
.service-projects-item:hover:after {
  width: calc(100% + 1.75em);
  background: rgb(var(--color-pink));
  transition: width 0.4s ease-in;
}
.service-projects-item:hover:before {
  left: calc(100% + 0.5em);
}
.service-projects-item a {
  font-weight: 500;
}

.service-projects-title {
  font-family: var(--font-content);
  font-weight: 400;
  padding-left: 1em;
}

.service-media {
  height: 100%;
}
.service-media > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

#service-next {
  width: calc(var(--margin-8) * 3);
  height: 100vh;
  position: sticky;
  top: 0;
  z-index: 10;
  cursor: pointer;
}
#service-next:after {
  content: "";
  width: 100vw;
  z-index: -1;
  height: 100vh;
  position: fixed;
  left: 0;
  transform: translateX(100%) translateY(0);
  top: 0;
  background: rgba(var(--color-black), 0.7);
  pointer-events: none;
  transition: all 0.4s ease-out;
}
#service-next > .wrapper {
  position: absolute;
  --width: calc((var(--margin-8) * 3) + var(--margin-full) + var(--margin-8) * 3);
  --offset: calc(var(--margin-full) + var(--margin-8) * 3);
  width: var(--width);
  right: calc(var(--offset) * -1);
  top: 0;
  background: rgb(var(--color-black));
  display: flex;
  height: 100%;
  transition: all 0.4s ease-out;
}
#service-next:hover:after {
  transform: translateX(0) translateY(0);
}
#service-next:hover > .wrapper {
  right: 0;
}
#service-next:hover .icon-foc-arrow-right {
  transform: translateX(-50%) translateY(-50%);
  opacity: 1;
}
#service-next:hover figure {
  transform: translateX(0%) translateY(0%);
  opacity: 1;
}
#service-next a {
  padding: var(--margin-8) 0;
  padding-bottom: calc(82px + var(--margin-8) * 2);
  display: flex;
  font-family: var(--font-special);
  font-size: clamp(30px, 3.125vw, 54px);
  writing-mode: vertical-lr;
  color: rgb(var(--color-pink));
  align-items: center;
  line-height: 1em;
  height: 100%;
  transform: translateX(-0.1em) translateY(0%) rotate(180deg);
  width: calc(var(--margin-8) * 3);
}
#service-next .icon-foc-arrow-right {
  position: absolute;
  color: rgb(var(--color-black));
  aspect-ratio: 1/1;
  border: none;
  padding: 0.75em;
  background: rgb(var(--color-red));
  left: calc(var(--margin-8) * 3);
  top: calc(var(--margin-6) + var(--margin-8));
  transform: translateX(50%) translateY(-50%);
  opacity: 0;
  z-index: 2;
  transition: opacity 0.4s ease-in 0s, translate 0.3s ease-out 0.2s;
}
#service-next figure {
  flex: 1;
  height: 100%;
  transform: translateX(50%) translateY(0%);
  opacity: 0;
  transition: opacity 0.4s ease-in 0s, translate 0.3s ease-out 0.1s;
}
#service-next figure > * {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.home-services {
  font-size: clamp(40px, 3.5vw, 3em);
  display: flex;
  min-height: 100vh;
  align-items: center;
}
.home-services > .wrapper {
  padding-top: 0;
}

.home-services-title {
  font-size: 40%;
  color: rgb(var(--color-main));
}

.prestation-item {
  --offset: var(--margin-8);
  position: relative;
  border-bottom: 1px solid rgb(var(--color-black));
  padding: calc(var(--margin-8)) 0;
}
@media only screen and (min-width: 992px) {
  .prestation-item {
    display: flex;
    align-items: center;
    min-height: 110px;
    padding: calc(var(--margin-8) / 2) 0;
  }
}
.prestation-item .prestation-headline {
  font-weight: 500;
  transition: all 0.3s ease-out;
  position: relative;
  z-index: 10;
  margin: 0;
  line-height: 120%;
  font-size: clamp(14px, 35%, 1.5em);
}
@media only screen and (max-width: 992px) {
  .prestation-item .prestation-headline {
    padding-right: calc(17px + 0.5em + 1em);
  }
}
@media only screen and (min-width: 992px) {
  .prestation-item .prestation-headline {
    opacity: 0;
    max-width: 300px;
    transform: translateX(calc(var(--offset) * -1)) translateY(0%);
  }
}
.prestation-item .prestation-headline span {
  background: rgb(var(--color-pink));
}
.prestation-item .prestation-headline em {
  display: block;
  font-weight: 300;
  font-size: 0.8em;
}
@media only screen and (min-width: 992px) {
  .prestation-item:hover {
    z-index: 2;
  }
  .prestation-item:hover .prestation-headline {
    opacity: 1;
    translate: 0 0;
  }
  .prestation-item:hover .prestation-media {
    translate: 0 -50%;
    opacity: 1;
    z-index: 5;
  }
  .prestation-item:hover .prestations-link {
    margin-right: 0;
    background: rgb(var(--color-black));
    color: rgb(var(--color-pink));
    z-index: 10;
  }
}

.icon-foc-arrow-right.square {
  border: 2px solid rgb(var(--color-black));
  font-size: clamp(17px, 3vw, 1.75rem);
  padding: 0.25em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (min-width: 992px) {
  .icon-foc-arrow-right.square {
    aspect-ratio: 1/1;
  }
}

.prestation-title {
  margin: 0;
  margin-right: var(--margin-6);
  font-size: clamp(40px, 3.5vw, 3em);
  line-height: 100%;
  translate: 0 0.12em;
}
@media only screen and (max-width: 992px) {
  .prestation-title {
    margin-bottom: 0.35em;
    font-size: clamp(24px, 3.5vw, 3em);
  }
}

.prestation-media {
  pointer-events: none;
  rotate: -2.49deg;
  overflow: hidden;
  aspect-ratio: 3/2;
  transition: all 0.3s ease-out;
  position: absolute;
}
@media only screen and (max-width: 992px) {
  .prestation-media {
    max-width: 400px;
    translate: 50% 0;
  }
}
@media only screen and (max-width: 992px) {
  .prestation-media {
    display: none;
  }
}
@media only screen and (min-width: 992px) {
  .prestation-media {
    opacity: 0;
    width: 30%;
    top: 50%;
    translate: var(--offset) -50%;
    right: calc(var(--margin-8) / 2);
  }
}
.prestation-media > * {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.prestations-link {
  margin-left: auto;
  margin-right: var(--margin-8);
  font-size: var(--margin-8);
  transition: all 0.3s ease-out;
  z-index: 1;
}
@media only screen and (max-width: 992px) {
  .prestations-link {
    position: absolute;
    bottom: var(--margin-8);
    right: 0;
  }
}
@media only screen and (max-width: 576px) {
  .prestations-link {
    margin-right: 0;
  }
}

/* ABOUT */
body:has(.choosen):has(.choose-gallery:focus) .choose {
  translate: 100% 0;
}
body:has(.choosen):has(.choose-description:focus) .choose {
  translate: -100% 0;
}

.about {
  position: relative;
  /* scroll-snap-type: mandatory;
   scroll-snap-points-x: repeat(100vw);
   scroll-snap-type: x mandatory;
   overflow-x:auto;
   -webkit-overflow-scrolling: touch;*/
}

#about-gallery {
  min-width: 100vw;
  position: relative;
}
#about-gallery .grid-container {
  --gap: calc(var(--margin-8)/3);
  display: grid;
  top: 0 !important;
  translate: 0 0 !important;
  grid-column-gap: var(--gap);
  grid-row-gap: var(--gap);
  justify-items: stretch;
  align-items: stretch;
  width: 100%;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 0.5fr 1fr 1fr 1fr 0.5fr 1fr 1fr 1fr 0.5fr 1fr 1fr 1fr;
  grid-template-areas: "item1 item1 item1 item1 item1 item1 item2 item2 item2 item2 item3 item3 item3 item3 item3 item3 item4 item4 item4 item4 item5 item5 item5 item5 item5 item5 item6 item6 item6 item6 item7 item7 item7 item7 item7 item7 item8 item8 item8 item8" "item1 item1 item1 item1 item1 item1 item2 item2 item2 item2 item3 item3 item3 item3 item3 item3 item4 item4 item4 item4 item5 item5 item5 item5 item5 item5 item6 item6 item6 item6 item7 item7 item7 item7 item7 item7 item8 item8 item8 item8" "item9 item9 item9 item9 item10 item10 item10 item10 item10 item10 item3 item3 item3 item3 item3 item3 item4 item4 item4 item4 item13 item13 item13 item13 item14 item14 item14 item14 item14 item14 item7 item7 item7 item7 item7 item7 item8 item8 item8 item8" "item9 item9 item9 item9 item10 item10 item10 item10 item10 item10 item11 item11 item11 item11 item12 item12 item12 item12 item12 item12 item13 item13 item13 item13 item14 item14 item14 item14 item14 item14 item15 item15 item15 item15 item16 item16 item16 item16 item16 item16" "item9 item9 item9 item9 item10 item10 item10 item10 item10 item10 item11 item11 item11 item11 item12 item12 item12 item12 item12 item12 item13 item13 item13 item13 item14 item14 item14 item14 item14 item14 item15 item15 item15 item15 item16 item16 item16 item16 item16 item16" "item17 item17 item17 item17 item17 item17 item18 item18 item18 item18 item19 item19 item19 item19 item19 item19 item20 item20 item20 item20 item21 item21 item21 item21 item21 item21 item22 item22 item22 item22 item23 item23 item23 item23 item23 item23 item24 item24 item24 item24" "item17 item17 item17 item17 item17 item17 item18 item18 item18 item18 item19 item19 item19 item19 item19 item19 item20 item20 item20 item20 item21 item21 item21 item21 item21 item21 item22 item22 item22 item22 item23 item23 item23 item23 item23 item23 item24 item24 item24 item24" "item25 item25 item25 item25 item26 item26 item26 item26 item26 item26 item19 item19 item19 item19 item19 item19 item20 item20 item20 item20 item29 item29 item29 item29 item30 item30 item30 item30 item30 item30 item23 item23 item23 item23 item23 item23 item24 item24 item24 item24" "item25 item25 item25 item25 item26 item26 item26 item26 item26 item26 item27 item27 item27 item27 item28 item28 item28 item28 item28 item28 item29 item29 item29 item29 item30 item30 item30 item30 item30 item30 item31 item31 item31 item31 item32 item32 item32 item32 item32 item32" "item25 item25 item25 item25 item26 item26 item26 item26 item26 item26 item27 item27 item27 item27 item28 item28 item28 item28 item28 item28 item29 item29 item29 item29 item30 item30 item30 item30 item30 item30 item31 item31 item31 item31 item32 item32 item32 item32 item32 item32" "item33 item33 item33 item33 item33 item33 item34 item34 item34 item34 item35 item35 item35 item35 item35 item35 item36 item36 item36 item36 item37 item37 item37 item37 item37 item37 item38 item38 item38 item38 item39 item39 item39 item39 item39 item39 item40 item40 item40 item40" "item33 item33 item33 item33 item33 item33 item34 item34 item34 item34 item35 item35 item35 item35 item35 item35 item36 item36 item36 item36 item37 item37 item37 item37 item37 item37 item38 item38 item38 item38 item39 item39 item39 item39 item39 item39 item40 item40 item40 item40" "item41 item41 item41 item41 item42 item42 item42 item42 item42 item42 item35 item35 item35 item35 item35 item35 item36 item36 item36 item36 item45 item45 item45 item45 item46 item46 item46 item46 item46 item46 item39 item39 item39 item39 item39 item39 item40 item40 item40 item40" "item41 item41 item41 item41 item42 item42 item42 item42 item42 item42 item43 item43 item43 item43 item44 item44 item44 item44 item44 item44 item45 item45 item45 item45 item46 item46 item46 item46 item46 item46 item47 item47 item47 item47 item48 item48 item48 item48 item48 item48" "item41 item41 item41 item41 item42 item42 item42 item42 item42 item42 item43 item43 item43 item43 item44 item44 item44 item44 item44 item44 item45 item45 item45 item45 item46 item46 item46 item46 item46 item46 item47 item47 item47 item47 item48 item48 item48 item48 item48 item48";
}
#about-gallery .grid-container .item1 {
  grid-area: item1;
}
#about-gallery .grid-container .item2 {
  grid-area: item2;
}
#about-gallery .grid-container .item3 {
  grid-area: item3;
}
#about-gallery .grid-container .item4 {
  grid-area: item4;
}
#about-gallery .grid-container .item5 {
  grid-area: item5;
}
#about-gallery .grid-container .item6 {
  grid-area: item6;
}
#about-gallery .grid-container .item7 {
  grid-area: item7;
}
#about-gallery .grid-container .item8 {
  grid-area: item8;
}
#about-gallery .grid-container .item9 {
  grid-area: item9;
}
#about-gallery .grid-container .item9 > * {
  object-position: top center;
}
#about-gallery .grid-container .item10 {
  grid-area: item10;
}
#about-gallery .grid-container .item11 {
  grid-area: item11;
}
#about-gallery .grid-container .item12 {
  grid-area: item12;
}
#about-gallery .grid-container .item12 > * {
  object-position: top center;
}
#about-gallery .grid-container .item13 {
  grid-area: item13;
}
#about-gallery .grid-container .item14 {
  grid-area: item14;
}
#about-gallery .grid-container .item15 {
  grid-area: item15;
}
#about-gallery .grid-container .item16 {
  grid-area: item16;
}
#about-gallery .grid-container .item17 {
  grid-area: item17;
}
#about-gallery .grid-container .item18 {
  grid-area: item18;
}
#about-gallery .grid-container .item19 {
  grid-area: item19;
}
#about-gallery .grid-container .item19 > * {
  object-position: top center;
}
#about-gallery .grid-container .item20 {
  grid-area: item20;
}
#about-gallery .grid-container .item21 {
  grid-area: item21;
}
#about-gallery .grid-container .item22 {
  grid-area: item22;
}
#about-gallery .grid-container .item23 {
  grid-area: item23;
}
#about-gallery .grid-container .item24 {
  grid-area: item24;
}
#about-gallery .grid-container .item25 {
  grid-area: item25;
}
#about-gallery .grid-container .item26 {
  grid-area: item26;
}
#about-gallery .grid-container .item27 {
  grid-area: item27;
}
#about-gallery .grid-container .item28 {
  grid-area: item28;
}
#about-gallery .grid-container .item29 {
  grid-area: item29;
}
#about-gallery .grid-container .item30 {
  grid-area: item30;
}
#about-gallery .grid-container .item31 {
  grid-area: item31;
}
#about-gallery .grid-container .item32 {
  grid-area: item32;
}
#about-gallery .grid-container .item32 > * {
  object-position: top center;
}
#about-gallery .grid-container .item33 {
  grid-area: item33;
}
#about-gallery .grid-container .item34 {
  grid-area: item34;
}
#about-gallery .grid-container .item35 {
  grid-area: item35;
}
#about-gallery .grid-container .item36 {
  grid-area: item36;
}
#about-gallery .grid-container .item37 {
  grid-area: item37;
}
#about-gallery .grid-container .item38 {
  grid-area: item38;
}
#about-gallery .grid-container .item39 {
  grid-area: item39;
}
#about-gallery .grid-container .item40 {
  grid-area: item40;
}
#about-gallery .grid-container .item41 {
  grid-area: item41;
}
#about-gallery .grid-container .item42 {
  grid-area: item42;
}
#about-gallery .grid-container .item43 {
  grid-area: item43;
}
#about-gallery .grid-container .item44 {
  grid-area: item44;
}
#about-gallery .grid-container .item45 {
  grid-area: item45;
}
#about-gallery .grid-container .item46 {
  grid-area: item46;
}
#about-gallery .grid-container .item47 {
  grid-area: item47;
}
#about-gallery .grid-container .item48 {
  grid-area: item48;
}
#about-gallery figure {
  position: relative;
  width: 100%;
  height: 100%;
}
#about-gallery figure > * {
  filter: grayscale(100%);
  mix-blend-mode: multiply;
  width: 100%;
  height: 100%;
  transition: filter 0s ease-out 0s, scale 0.3s ease-out, rotate 0.3s ease-out;
  object-fit: cover;
  object-position: center;
  position: relative;
  pointer-events: none;
}
#about-gallery figure:nth-child(-n+8) > * {
  transform-origin: 50% -20%;
}
#about-gallery figure:nth-child(n+40) > * {
  transform-origin: 50% 130%;
}
#about-gallery figure:nth-child(8n) > * {
  transform-origin: 100% 50%;
}
#about-gallery figure:nth-child(8n-7) > * {
  transform-origin: -10% 50%;
}
#about-gallery figure:nth-child(1) > * {
  transform-origin: -30% -50%;
}
#about-gallery figure:nth-child(8) > * {
  transform-origin: 130% -10%;
}
#about-gallery figure:nth-child(41) > * {
  transform-origin: -30% 140%;
}
#about-gallery figure:nth-child(48) > * {
  transform-origin: 130% 160%;
}
#about-gallery figure::before {
  background-color: rgb(255, 149, 245);
  content: "";
  height: 100%;
  left: 0;
  top: 0;
  mix-blend-mode: color;
  position: absolute;
  width: 100%;
  z-index: 2;
  transition: all 0.3s ease-out 0.2s;
}
#about-gallery figure::after {
  background-color: rgb(var(--color-red));
  content: "";
  height: 100%;
  left: 0;
  top: 0;
  mix-blend-mode: lighten;
  position: absolute;
  width: 100%;
  z-index: 2;
  transition: all 0.3s ease-out 0.2s;
}
#about-gallery figure:hover {
  z-index: 999;
}
#about-gallery figure:hover > * {
  filter: grayscale(0%);
  scale: 1.5;
  object-fit: contain;
  width: 250%;
  height: auto;
  max-width: 20vw;
  max-height: 50vh;
  left: 50%;
  top: 50%;
  position: absolute;
  translate: -50% -50%;
}
#about-gallery figure:hover::before, #about-gallery figure:hover::after {
  opacity: 0;
  transition: all 0s ease-out 0s;
}

.item1:hover {
  grid-area: item1;
  transform: rotate(3deg);
}

.item2:hover {
  grid-area: item2;
  transform: rotate(2deg);
}

.item3:hover {
  grid-area: item3;
  transform: rotate(3deg);
}

.item4:hover {
  grid-area: item4;
  transform: rotate(2deg);
}

.item5:hover {
  grid-area: item5;
  transform: rotate(3deg);
}

.item6:hover {
  grid-area: item6;
  transform: rotate(3deg);
}

.item7:hover {
  grid-area: item7;
  transform: rotate(3deg);
}

.item8:hover {
  grid-area: item8;
  transform: rotate(-2deg);
}

.item9:hover {
  grid-area: item9;
  transform: rotate(-2deg);
}
.item9:hover > * {
  object-position: top center;
}

.item10:hover {
  grid-area: item10;
  transform: rotate(3deg);
}

.item11:hover {
  grid-area: item11;
  transform: rotate(-2deg);
}

.item12:hover {
  grid-area: item12;
  transform: rotate(-2deg);
}
.item12:hover > * {
  object-position: top center;
}

.item13:hover {
  grid-area: item13;
  transform: rotate(-3deg);
}

.item14:hover {
  grid-area: item14;
  transform: rotate(-3deg);
}

.item15:hover {
  grid-area: item15;
  transform: rotate(2deg);
}

.item16:hover {
  grid-area: item16;
  transform: rotate(2deg);
}

.item17:hover {
  grid-area: item17;
  transform: rotate(2deg);
}

.item18:hover {
  grid-area: item18;
  transform: rotate(-3deg);
}

.item19:hover {
  grid-area: item19;
  transform: rotate(3deg);
}
.item19:hover > * {
  object-position: top center;
}

.item20:hover {
  grid-area: item20;
  transform: rotate(-2deg);
}

.item21:hover {
  grid-area: item21;
  transform: rotate(-2deg);
}

.item22:hover {
  grid-area: item22;
  transform: rotate(2deg);
}

.item23:hover {
  grid-area: item23;
  transform: rotate(-2deg);
}

.item24:hover {
  grid-area: item24;
  transform: rotate(2deg);
}

.item25:hover {
  grid-area: item25;
  transform: rotate(2deg);
}

.item26:hover {
  grid-area: item26;
  transform: rotate(-3deg);
}

.item27:hover {
  grid-area: item27;
  transform: rotate(3deg);
}

.item28:hover {
  grid-area: item28;
  transform: rotate(3deg);
}

.item29:hover {
  grid-area: item29;
  transform: rotate(-3deg);
}

.item30:hover {
  grid-area: item30;
  transform: rotate(2deg);
}

.item31:hover {
  grid-area: item31;
  transform: rotate(3deg);
}

.item32:hover {
  grid-area: item32;
  transform: rotate(2deg);
}
.item32:hover > * {
  object-position: top center;
}

.item33:hover {
  grid-area: item33;
  transform: rotate(3deg);
}

.item34:hover {
  grid-area: item34;
  transform: rotate(2deg);
}

.item35:hover {
  grid-area: item35;
  transform: rotate(3deg);
}

.item36:hover {
  grid-area: item36;
  transform: rotate(-3deg);
}

.item37:hover {
  grid-area: item37;
  transform: rotate(-3deg);
}

.item38:hover {
  grid-area: item38;
  transform: rotate(2deg);
}

.item39:hover {
  grid-area: item39;
  transform: rotate(2deg);
}

.item40:hover {
  grid-area: item40;
  transform: rotate(-3deg);
}

.item41:hover {
  grid-area: item41;
  transform: rotate(-3deg);
}

.item42:hover {
  grid-area: item42;
  transform: rotate(-2deg);
}

.item43:hover {
  grid-area: item43;
  transform: rotate(2deg);
}

.item44:hover {
  grid-area: item44;
  transform: rotate(-2deg);
}

.item45:hover {
  grid-area: item45;
  transform: rotate(3deg);
}

.item46:hover {
  grid-area: item46;
  transform: rotate(2deg);
}

.item47:hover {
  grid-area: item47;
  transform: rotate(3deg);
}

.item48:hover {
  grid-area: item48;
  transform: rotate(3deg);
}

.about {
  background: rgb(var(--color-pink));
  width: 100vw;
  height: 100vh;
}

#about-choose {
  pointer-events: none;
  width: 100%;
  align-content: end;
}
#about-choose p {
  margin: 0;
}
#about-choose h2 {
  position: relative;
  top: calc(var(--margin-8) * 2 + var(--margin-3));
  left: 50%;
  translate: -50% 0%;
  font-size: clamp(20px, 4vw, 72px);
  font-size: clamp(20px, var(--margin-3), 132px);
  text-transform: uppercase;
  z-index: 1;
  text-align: center;
  padding: 0.25em 0.75em;
  background: var(--color-light);
  display: inline-block;
  font-family: var(--font-special);
  width: 100%;
  text-wrap: balance;
}
@media only screen and (max-width: 768px) {
  #about-choose h2 {
    padding: 0.25em var(--margin-8);
    font-size: clamp(20px, 12vw, 132px);
  }
}
#about-choose img {
  position: relative;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  display: flex;
  height: calc(100vh - var(--margin-8) * 2 - var(--margin-3));
  width: auto;
  z-index: 5;
}
@media only screen and (max-width: 768px) {
  #about-choose img {
    height: auto;
    width: 80%;
  }
}

.choose-text, .choose-image {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
}
.choose-text p, .choose-image p {
  margin: 0;
}
.choose-text video, .choose-image video {
  position: absolute;
  object-fit: cover;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: all 0s ease;
}
.choose-text a, .choose-image a {
  position: absolute;
  display: flex;
  align-items: center;
  padding-top: 50vh;
  min-height: clamp(24px, 22vw, 250px);
  gap: 0;
  bottom: calc(var(--margin-8) * -1);
  z-index: 8;
  transition: all 0s ease;
  width: calc(100% + var(--margin-8));
  height: calc(100% + var(--margin-8));
}
.choose-text a em, .choose-image a em {
  font-size: clamp(16px, 2vw, 20px);
  opacity: 0;
  transition: all 0s ease;
  max-width: 180px;
  text-wrap: balance;
  display: block;
  align-content: center;
  background: rgb(var(--color-pink));
  min-height: clamp(24px, 6.25vw, 71px);
  translate: -2px 0.15em;
}
.choose-text a .icon, .choose-image a .icon, .choose-text a .mobile-navigation-opened #navigation, .choose-image a .mobile-navigation-opened #navigation, .mobile-navigation-opened .choose-text a #navigation, .mobile-navigation-opened .choose-image a #navigation {
  font-size: clamp(24px, 22vw, 250px);
  color: rgb(var(--color-pink));
  display: flex;
}
.choose-text:hover video, .choose-image:hover video {
  transition: all 0.3s ease-out;
  opacity: 1;
  translate: 0 0;
}
.choose-text:hover em, .choose-image:hover em {
  opacity: 1;
  display: flex;
  align-items: center;
  transition: all 0.3s ease-out;
}
.choose-text:hover a, .choose-image:hover a {
  transition: all 0.3s ease-out;
  translate: 0 0;
}

.choose-image {
  left: 0;
}
.choose-image video {
  translate: -50px 0;
}
.choose-image a {
  translate: 100px 0;
  left: calc(var(--margin-8) * -1);
}

.choose-text {
  right: 0;
}
.choose-text video {
  translate: 50px 0;
}
.choose-text a {
  translate: -100px 0;
  right: calc(var(--margin-8) * -1);
}
.choose-text a em {
  text-align: right;
  translate: 2px 0.15em;
  margin-left: auto;
  max-width: 170px;
}

.choose-button {
  align-self: start;
  display: flex;
  align-items: center;
  z-index: 2;
  min-width: auto !important;
  transition: all 0.6s ease-in;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.choose-button a {
  position: absolute;
  display: block;
  flex: 1;
  width: 50%;
  top: 0;
  left: 0;
  z-index: 2;
}
.choose-button a:last-child {
  left: inherit;
  right: 0;
}
.choose-button video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-title {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -100%;
  font-size: clamp(20px, 4vw, 72px);
  text-transform: uppercase;
  z-index: 5;
  white-space: nowrap;
  text-align: center;
  padding: 0.25em 0.75em;
  background: var(--color-light);
  display: inline-block;
}

.about-content {
  position: sticky;
  left: 0;
  top: 50%;
  z-index: 20;
  text-align: center;
}
.about-content > *:not(button) {
  background: rgb(var(--color-pink));
  display: inline;
  padding: 0.2em;
  line-height: 1.4em;
}

#about-description {
  min-width: 100vw;
  position: relative;
}
#about-description .wrapper {
  background: rgb(var(--color-pink));
  max-width: 800px;
  margin: 0 auto;
  margin-top: var(--margin-8);
  height: calc(100% - var(--margin-8));
  overflow: auto;
  position: relative;
}
#about-description .about-description-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  padding: var(--margin-8);
  padding-bottom: calc(var(--margin-8) / 2);
  background: rgb(var(--color-pink));
}
#about-description .about-description-header h2 {
  font-size: var(--font-size-title);
}
#about-description .about-description-header > * {
  margin-bottom: 0;
}
#about-description .about-description-content {
  padding: var(--margin-8);
  padding-bottom: var(--margin-4);
}
#about-description .icon-foc-close, #about-description .mobile-navigation-opened #navigation, .mobile-navigation-opened #about-description #navigation {
  display: block;
  position: absolute;
  padding: var(--margin-8);
  cursor: pointer;
  right: 0;
  top: 0;
}
#about-description h3:not(:first-child),
#about-description h4:not(:first-child),
#about-description h5:not(:first-child),
#about-description h6:not(:first-child) {
  margin-top: var(--margin-4);
}
#about-description hr {
  border: none;
  margin: var(--margin-8) 0;
  border-bottom: 1px solid rgb(var(--color-black));
}

.why-the-foc > .wrapper {
  margin: 0;
  width: 100%;
  position: relative;
  padding: 0;
}
.why-the-foc p:has(a) {
  position: relative;
  z-index: 1;
  background: rgb(var(--color-pink));
  display: flex;
  align-items: center;
  gap: 1em;
  flex-direction: column;
  padding-top: var(--margin-3);
  margin-bottom: 0;
}

.why-header {
  padding-left: calc(var(--margin-half) + var(--margin-8) / 2);
  position: sticky;
  top: var(--margin-8);
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  background: rgb(var(--color-red));
}
.why-header > *:not(h2) {
  max-width: 600px;
}
.why-header h2 {
  font-size: clamp(42px, 9vw, var(--margin-half));
  font-family: var(--font-special);
  line-height: 0.85em;
  display: flex;
  align-items: end;
}

.page-intro-wrapper {
  z-index: 0;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding-top: calc(var(--margin-8) * 2 + var(--margin-3));
  padding-bottom: calc(var(--margin-3));
  display: flex;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  font-family: "Montserrat";
}

.page-intro-text-wrapper {
  translate: 0 4.5vw;
  padding: 0 var(--margin-8);
  text-align: center;
}

.is-title {
  font-family: "Bastardo Grotesk";
  font-size: clamp(2.25rem, 12vw, var(--margin-3));
  line-height: 0.8em;
  font-weight: 800;
  text-wrap: balance;
}

.is-subtitle {
  margin: 0;
  line-height: 0.8em;
  font-size: clamp(0.9rem, 2.5vw, 20px);
  margin-bottom: 0.8em;
}
@media only screen and (min-width: 992px) {
  .is-subtitle {
    text-align: left;
  }
}

.page-intro-splitscreen-wrapper {
  z-index: 1;
  pointer-events: none;
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.section-after-intro-text-wrapper {
  max-width: 885px;
  margin: auto;
  text-align: center;
}

.page-intro-splitscreen {
  background-color: #000000;
  width: 100%;
  height: 0%;
}

.section-after-intro-text {
  color: rgb(var(--color-pink));
  background: rgb(var(--color-black));
  position: relative;
  z-index: 2;
  font-size: clamp(16px, 4vw, 24px);
  min-height: 100vh;
  margin-top: 0;
}
.section-after-intro-text .icon, .section-after-intro-text .mobile-navigation-opened #navigation, .mobile-navigation-opened .section-after-intro-text #navigation {
  display: block;
  margin-top: 2em;
  visibility: visible;
  -webkit-animation-duration: 800ms;
  -moz-animation-duration: 800ms;
  animation-duration: 800ms;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  40%, 43% {
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  40%, 43%, 70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  }
  70% {
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
.section-after-intro-text > * {
  margin-top: 0vh;
}

.values-container {
  display: flex;
  background: rgb(var(--color-pink));
  position: relative;
}
@media only screen and (max-width: 992px) {
  .values-container {
    flex-direction: column;
  }
}

.video-display-container {
  width: 60%;
  height: 100vh;
  top: 0;
  translate: 0 -50vh;
  position: sticky;
  max-width: 900px;
}
@media only screen and (max-width: 992px) {
  .video-display-container {
    max-width: 100%;
    width: 100%;
  }
}

#videoDisplay {
  pointer-events: none;
}
#videoDisplay video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  pointer-events: none;
}
@media only screen and (max-width: 768px) {
  #videoDisplay video {
    height: 70%;
  }
}
#videoDisplay video:nth-child(1) {
  z-index: 10;
}
#videoDisplay video:nth-child(2) {
  z-index: 9;
}
#videoDisplay video:nth-child(3) {
  z-index: 8;
}
#videoDisplay video:nth-child(4) {
  z-index: 7;
}
#videoDisplay video:nth-child(5) {
  z-index: 6;
}
@media only screen and (max-width: 992px) {
  #videoDisplay {
    width: 100%;
    height: 100vh;
  }
}

.values {
  flex: 1;
}
@media only screen and (min-width: 992px) {
  .values {
    width: 35%;
    flex: inherit;
  }
}
.values .value {
  height: 100vh;
  align-content: center;
  position: relative;
  z-index: 2;
  flex-direction: column;
  justify-content: center;
}
@media only screen and (max-width: 992px) {
  .values .value {
    padding-right: var(--margin-8);
    padding-bottom: var(--margin-4);
    display: flex;
    flex-direction: column;
    height: 90vh;
    justify-content: end;
  }
  .values .value > * {
    background: rgba(var(--color-pink), 0.9);
    color: rgb(var(--color-red));
    border: calc(var(--margin-8) * 2) solid rgba(var(--color-pink), 0);
  }
}
@media only screen and (max-width: 768px) {
  .values .value {
    padding: 0;
  }
}
.values .value h2,
.values .value h3,
.values .value h4,
.values .value h5,
.values .value h6 {
  font-family: var(--font-special);
  font-size: clamp(3.25rem, 6vw, var(--margin-3));
  font-size: clamp(3.25rem, 4.5vw, 8.5vh);
  line-height: 0.8em;
  border-bottom: 0;
}
@media only screen and (min-width: 992px) {
  .values .value h2,
  .values .value h3,
  .values .value h4,
  .values .value h5,
  .values .value h6 {
    translate: calc(var(--margin-8) * -1) 0;
  }
}
@media only screen and (max-width: 992px) {
  .values .value h2,
  .values .value h3,
  .values .value h4,
  .values .value h5,
  .values .value h6 {
    margin: 0;
    padding-bottom: clamp(1rem, 0.5em, 2rem);
    font-size: clamp(2.25rem, 6vw, var(--margin-3));
  }
}
.values .value p {
  border-top: 0;
  text-wrap: balance;
  font-size: 1.1em;
}
@media only screen and (max-width: 992px) {
  .values .value p {
    color: rgb(var(--color-black));
  }
}
@media only screen and (min-width: 992px) {
  .values .value p {
    max-width: 450px;
    padding-left: var(--margin-8);
  }
}
@media only screen and (max-width: 768px) {
  .values .value p {
    padding: 0;
  }
}
.values .value p:last-child {
  margin-bottom: var(--margin-8);
  min-height: var(--margin-3);
}
@media only screen and (min-width: 992px) {
  .values .value p:not(:has(img, video)) {
    max-width: 450px;
    padding: 0 var(--margin-8);
  }
}
.values .value img,
.values .value video {
  display: none;
}

.page-about #page {
  overflow-y: scroll;
  height: 100vh;
  scroll-snap-type: y mandatory;
}
.page-about .section {
  display: flex;
  min-height: 100vh;
}
@media only screen and (max-width: 992px) {
  .page-about .section {
    min-height: 100dvh;
  }
}
.page-about .section-01 {
  position: relative;
  z-index: 5;
  align-items: center;
  justify-content: center;
}
.page-about .section-02 {
  align-items: center;
  background: none;
  position: relative;
  z-index: 11;
  justify-content: start;
  flex-direction: column;
  pointer-events: none;
}
.page-about .section-02 .icon, .page-about .section-02 .mobile-navigation-opened #navigation, .mobile-navigation-opened .page-about .section-02 #navigation {
  font-size: var(--margin-8);
  position: relative;
  z-index: 100;
  pointer-events: all;
  cursor: pointer;
}
.page-about .section-02 .is-description {
  text-wrap: balance;
  padding: 0 calc(var(--margin-3) + var(--margin-8) * 2);
  max-width: 1250px;
  margin-bottom: 0;
  opacity: 0;
}
.page-about .section-02 .is-description br {
  display: block;
  margin-bottom: var(--margin-8);
}
@media only screen and (max-width: 992px) {
  .page-about .section-02 .is-description {
    padding: 0 var(--margin-8);
  }
}
.page-about .section-02 p {
  font-size: clamp(18px, 3vw, 28px);
  text-align: center;
  color: rgb(var(--color-pink));
  position: sticky;
  top: 80vh;
}
@media only screen and (max-width: 992px) {
  .page-about .section-02 p {
    top: 60vh;
  }
}
@media only screen and (max-width: 768px) {
  .page-about .section-02 p {
    top: 60vh;
    translate: 0 20vh;
  }
}
.page-about .page-intro-splitscreen-wrapper {
  z-index: 10;
  pointer-events: none;
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  height: 100%;
  display: flex;
  position: fixed;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}
.page-about .page-intro-splitscreen {
  background-color: #000000;
  width: 100%;
  height: 0%;
}

@media only screen and (max-width: 992px) {
  .modular {
    padding-top: calc(var(--margin-3) + var(--margin-8)) var(--margin-8);
    padding: var(--margin-8);
  }
}

.page-about .modular {
  scroll-snap-align: initial;
  height: auto;
  overflow-y: initial;
}
.page-about .section {
  scroll-snap-align: start;
  min-height: 100vh;
  overflow-y: visible;
}
@media only screen and (max-width: 768px) {
  .page-about .section {
    min-height: 100dvh;
  }
}

#nos-valeurs {
  overflow: hidden;
  scroll-snap-align: inherit;
  height: auto;
}
#nos-valeurs .section {
  scroll-snap-align: start;
  min-height: 100vh;
  overflow-y: auto;
}
@media only screen and (max-width: 768px) {
  #nos-valeurs .section {
    min-height: 100dvh;
  }
}

.modular.services {
  min-height: calc(100vh - var(--margin-8) * 2 - var(--margin-3));
  display: flex;
  align-items: center;
  padding: var(--margin-8);
  padding-top: calc(var(--margin-3) + var(--margin-8) * 2);
  flex-direction: column;
}
@media only screen and (max-width: 768px) {
  .modular.services {
    justify-content: center;
  }
}
.modular.services > * {
  width: 100%;
}
.modular.services .modular-title {
  color: rgb(var(--color-red));
  font-size: clamp(16px, 2vw, 22px);
  margin-bottom: 0;
}

.service-item-link {
  position: static;
  display: inline-block;
  width: var(--margin-8);
  min-height: 100%;
  mix-blend-mode: difference;
}
.service-item-link strong {
  display: none;
}

.service-item-arrow {
  transition: all 0s ease;
  position: relative;
  transform: none;
}
@media only screen and (min-width: 992px) {
  .service-item-arrow {
    opacity: 0;
    translate: -100% -50%;
  }
}
@media only screen and (max-width: 992px) {
  .service-item-arrow path {
    d: path("M774.3,106.2L498,382.5L645.5,530H448.3l0,0H57.8v390.5H613l0,0h32.5L498,1068.1l276.3,276.3l619.1-619.1L774.3,106.2z") !important;
  }
}
.service-item:hover .service-item-arrow {
  opacity: 1;
  transform: none;
  translate: 0 -50%;
  transition: all 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}

.service-item {
  border-bottom: 1px solid rgb(var(--color-black));
  display: flex;
  justify-content: space-between;
  padding: calc(var(--margin-8) / 2) 0;
  overflow: hidden;
}
@media only screen and (max-width: 992px) {
  .service-item {
    align-items: end;
  }
}
.service-item * {
  margin: 0;
}

.service-item-content {
  position: relative;
  flex: 1;
}
.service-item-content .service-item-title {
  font-family: var(--font-special);
  font-weight: 800;
  transition: all 0.3s cubic-bezier(0.3, 1, 0.8, 1);
  line-height: 1em;
  transform-origin: left bottom;
  font-size: clamp(26px, 5vw, 64px);
}
@media only screen and (min-width: 992px) {
  .service-item-content .service-item-title {
    position: absolute;
    top: 50%;
    left: 0;
    translate: 0 -40%;
  }
  .service-item:hover .service-item-content .service-item-title {
    translate: 0 -10vw;
  }
}
@media only screen and (max-width: 992px) {
  .service-item-content .service-item-title {
    font-size: clamp(1rem, 2vw, 64px);
    padding-right: 1rem;
    font-family: var(--font-content);
    font-weight: 500;
    text-transform: lowercase;
    margin-bottom: 0.35em;
  }
}

@media only screen and (max-width: 992px) {
  .service-item-content-details .service-item-headline {
    display: none;
  }
}
@media only screen and (min-width: 992px) {
  .service-item-content-details {
    translate: 0 200%;
    transition: all 0.3s cubic-bezier(0.3, 1, 0.8, 1);
  }
  .service-item:hover .service-item-content-details {
    translate: 0 0%;
  }
}

.service-item-real-title {
  font-size: clamp(32px, 4vw, 58px);
  line-height: 1em;
  text-wrap: balance;
}
@media only screen and (max-width: 992px) {
  .service-item-real-title {
    font-size: clamp(22px, 4vw, 58px);
    padding-right: 1rem;
  }
}

@keyframes squareToArrow {
  0% {
    d: path("M449.6,529.6h-69.5l-64.6,0.4H118.3h70H57.8v390.5H283l0,0h32.5l64.6,0.4h69.5V724.4V529.6z");
  }
  5% {
    d: path("M705.6,529.6h-65.5l-64.6,0.4H378.3h70H57.8v390.5H543l0,0h32.5l64.6,0.4h65.5l70-196.6L705.6,529.6z");
  }
  10% {
    d: path("M775.6,529.6h-65.5l-64.6,0.4H448.3l0,0H57.8v390.5H613l0,0h32.5l64.6,0.4h65.5l117.2-195.7L775.6,529.6z");
  }
  15% {
    d: path("M774.3,384.8l-64.2,144.8l-64.6,0.4H448.3l0,0H57.8v390.5H613l0,0h32.5l64.6,0.4l64.2,148.3l172-344L774.3,384.8z");
  }
  20% {
    d: path("M774.3,265.8l-64.2,119L645.5,530H448.3l0,0H57.8v390.5H613l0,0h32.5l64.6,148.7l64.2,150l377.2-494L774.3,265.8z");
  }
  40%, 100% {
    d: path("M774.3,106.2L498,382.5L645.5,530H448.3l0,0H57.8v390.5H613l0,0h32.5L498,1068.1l276.3,276.3l619.1-619.1L774.3,106.2z");
  }
}
.modular-title {
  line-height: 0.8em;
}

.page-template-service #page-footer {
  position: sticky;
  top: 0;
}
.page-template-service #page-footer + .modular {
  background: rgb(var(--color-pink));
}

/*--------------------------

  MODULAR PROJECT

--------------------------*/
.modular.projects {
  min-height: 100vh;
}
.modular.projects > .wrapper {
  margin: var(--margin-8);
  margin-top: calc(var(--margin-3) + var(--margin-8) * 2);
  height: calc(100vh - var(--margin-3) - var(--margin-8) * 3);
  position: relative;
}

.projects-list {
  display: flex;
  height: 100%;
  gap: calc(var(--margin-8) / 2);
}

.project-item {
  flex: 1;
  transition: all 0.4s cubic-bezier(0.3, 1, 0.8, 1) 0.1s;
  position: relative;
  min-width: 0%;
  z-index: 1;
  align-content: end;
  padding: calc(var(--margin-8) / 2);
  overflow: hidden;
}
.project-item:hover {
  flex: 3;
  min-width: 70%;
  transition: all 0.4s cubic-bezier(0.3, 1, 0.8, 1) 0s;
}

.project-item-content {
  overflow: hidden;
  translate: 0 var(--margin-3);
  mix-blend-mode: difference;
  transition: all 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}
.project-item:hover .project-item-content {
  translate: 0 0;
}

.project-item-title {
  width: 100%;
  font-family: var(--font-special);
  text-transform: uppercase;
  color: rgb(var(--color-red));
  font-size: 10px;
  /*  font-size: clamp(16px, 1.25vw, 48px);
    text-orientation: mixed;
    writing-mode: vertical-rl;
    scale: -1;*/
  margin-top: auto;
  align-content: end;
  transition: all 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}
.project-item:hover .project-item-title {
  font-size: clamp(20px, 2vw, 64px);
  scale: 1;
  writing-mode: inherit;
}

.project-item-description {
  color: rgb(var(--color-red));
}

.project-item-link {
  color: rgb(var(--color-red));
  text-align: right;
  display: block;
}

.project-item-arrow {
  left: inherit;
  right: calc(var(--margin-full) + var(--margin-8));
  transition: all 0s ease;
  justify-self: end;
  margin-left: auto;
  color: rgb(var(--color-red));
}
.project-item-video {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  pointer-events: none;
}
.project-item-video video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.project-item:hover .project-item-video video {
  object-fit: contain;
}

.modular.word-switch {
  padding: calc(var(--margin-3) + var(--margin-8)) var(--margin-8);
  padding-top: calc(var(--margin-3) + var(--margin-8) * 2);
  align-content: center;
}
@media only screen and (min-width: 992px) {
  .modular.word-switch {
    text-align: center;
  }
}
.modular.word-switch .modular-title {
  font-size: clamp(0.9rem, 2.5vw, 20px);
  font-family: var(--font-content);
  font-weight: 500;
}
.modular.word-switch .words-list {
  padding: 0 var(--margin-8);
  max-width: 1000px;
  margin: auto;
}
.modular.word-switch .word {
  font-family: var(--font-special);
  font-size: clamp(28px, 5vw, 64px);
  min-height: var(--margin-half);
  line-height: 0.85em;
  text-wrap: balance;
  display: block;
}

@media only screen and (max-width: 992px) {
  .word-switch {
    margin-bottom: 0;
  }
  .word-switch .words-container {
    min-height: 55px;
  }
}
.word-switch .word-switch-title {
  font-size: clamp(1.2rem, 2.5vw, 20px);
  font-family: var(--font-content);
  font-weight: 500;
}
@media only screen and (min-width: 992px) {
  .word-switch .word-switch-title {
    text-transform: uppercase;
  }
}
@media only screen and (max-width: 992px) {
  .word-switch .word-switch-title {
    font-weight: 400;
    line-height: 1em;
    font-size: 24px;
    margin-bottom: 1em;
  }
}
@media only screen and (max-width: 992px) {
  .word-switch .word-switch-title {
    margin-bottom: 0.5em;
  }
}

.page-internal-navigation {
  position: fixed;
  mix-blend-mode: difference;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  z-index: 100;
}
@media only screen and (max-width: 992px) {
  .page-internal-navigation {
    display: none;
  }
}

.page-internal-navigation-link {
  position: relative;
  display: flex;
  align-items: center;
  padding: calc(var(--margin-8) / 6) var(--margin-8);
  color: rgb(var(--color-pink));
  justify-content: flex-end;
}

.page-internal-navigation-label {
  position: absolute;
  right: calc(var(--margin-8) * 2);
  white-space: nowrap;
  top: 50%;
  translate: 50% -50%;
  opacity: 0;
  font-size: 14px;
  font-weight: 400;
  transition: all 0.3s cubic-bezier(0.3, 1, 0.8, 1);
}
.page-internal-navigation-link:hover .page-internal-navigation-label {
  opacity: 1;
  translate: 0 -50%;
}

.page-internal-navigation-list {
  text-align: right;
}

.page-internal-navigation-bullet {
  display: inline-block;
  width: calc(var(--margin-8) / 4);
  height: calc(var(--margin-8) / 4);
  background: rgb(var(--color-pink));
  transition: all 0.3s cubic-bezier(0.3, 1, 0.8, 1);
}
.page-internal-navigation-link:hover .page-internal-navigation-bullet, .active .page-internal-navigation-bullet {
  width: calc(var(--margin-8) / 2);
  height: calc(var(--margin-8) / 2);
}

.modular.bullet-list {
  background: rgb(var(--color-red));
  padding: calc(var(--logo-offset) / 2) var(--logo-offset);
  color: rgb(var(--color-black));
  display: flex;
  flex-direction: column;
}
.modular.bullet-list h3 {
  font-weight: 600;
  font-family: var(--font-special);
}
@media only screen and (max-width: 992px) {
  .modular.bullet-list {
    padding: calc(var(--margin-8) * 2);
  }
}
.modular.bullet-list * {
  text-wrap: balance;
}
.modular.bullet-list .modular-title {
  margin-bottom: 0;
  line-height: 1em;
}
@media only screen and (min-width: 992px) {
  .modular.bullet-list .modular-title {
    padding-left: calc(var(--margin-8) * 2);
    padding-right: calc(var(--margin-8) * 2);
  }
}
@media only screen and (max-width: 992px) {
  .modular.bullet-list .modular-title {
    font-size: clamp(30px, 5vw, 100vw) !important;
  }
}
.modular.bullet-list > .wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.modular.bullet-list em {
  font-style: italic;
}
.modular.bullet-list em i {
  font-style: normal;
}
.modular.bullet-list p:has(+ ul) {
  margin-bottom: 0;
}
.modular.bullet-list ul {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  flex: 1;
  justify-content: center;
  list-style: square;
  padding-left: 1em;
}
.modular.bullet-list ul li {
  padding-left: 0.5em;
}
.modular.bullet-list ul li p {
  margin-bottom: 0;
}
.modular.bullet-list ul li em {
  position: relative;
  display: block;
  font-size: clamp(14px, 0.85em, 20px);
  opacity: 0.7;
  font-style: normal;
}
.modular.bullet-list .bullet-list-link {
  color: rgb(var(--color-pink));
  mix-blend-mode: difference;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: end;
  margin-top: auto;
  gap: 1em;
  font-weight: 500;
  font-size: 0.9rem;
  opacity: 0.8;
  transition: all 0.3s cubic-bezier(0.3, 1, 0.8, 1);
}
.modular.bullet-list .bullet-list-link .icon, .modular.bullet-list .bullet-list-link .mobile-navigation-opened #navigation, .mobile-navigation-opened .modular.bullet-list .bullet-list-link #navigation {
  font-size: 1rem;
  display: flex;
  align-items: center;
}
.modular.bullet-list .bullet-list-link:hover {
  opacity: 1;
  translate: var(--margin-8) 0;
}

.modular.default {
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 992px) {
  .modular.default {
    padding: calc(var(--margin-3) + var(--margin-8) * 2);
    padding-bottom: var(--margin-8);
  }
}
.modular.default > .wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  font-size: clamp(0.9rem, 2.5vw, 20px);
}
.page-template-service .modular.default > .wrapper p {
  max-width: 850px;
}
.modular.default > .wrapper p:not(:has(strong)) {
  max-width: 1050px;
  text-wrap: balance;
}
.modular.default > .wrapper p:last-of-type {
  margin-bottom: var(--margin-8);
}
.modular.default .modular-title {
  font-family: var(--font-special);
  font-size: clamp(28px, 10vw, 120px);
  text-wrap: balance;
  margin: 0.25em 0;
  translate: -0.075em 0;
}
.modular.default .modular-title + em {
  font-style: italic;
  margin-top: -0.75em;
}
.modular.default .default-link {
  color: rgb(var(--color-pink));
  mix-blend-mode: difference;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: end;
  margin-top: auto;
  gap: 1em;
  font-weight: 500;
  font-size: 0.9rem;
  opacity: 0.7;
  transition: all 0.3s cubic-bezier(0.3, 1, 0.8, 1);
}
.modular.default .default-link .icon, .modular.default .default-link .mobile-navigation-opened #navigation, .mobile-navigation-opened .modular.default .default-link #navigation {
  font-size: 1rem;
  display: flex;
  align-items: center;
}
.modular.default .default-link:hover {
  opacity: 1;
  translate: var(--margin-8) 0;
}

.modular.faq {
  padding-top: calc(var(--margin-3) + var(--margin-8) * 2);
}
@media only screen and (min-width: 992px) {
  .modular.faq {
    padding: var(--margin-8) calc(var(--margin-3) + var(--margin-8) * 2);
    align-content: center;
  }
}
.modular.faq .modular-title {
  line-height: 0.8em;
  translate: -0.075em 0;
  color: rgb(var(--color-red));
}
.modular.faq > .wrapper {
  display: flex;
  flex-direction: column;
  font-size: clamp(0.9rem, 2.5vw, 20px);
}
.modular.faq .faq-item.active .question {
  cursor: pointer;
}
.modular.faq .question {
  padding: calc(var(--margin-8) / 2) 0;
  display: block;
  font-size: clamp(1.1rem, 2.8vw, 20px);
  font-weight: 700;
  line-height: 1em;
}
.modular.faq .answer {
  display: none;
  font-size: 0.9em;
  max-width: 900px;
}
.modular.faq .answer a {
  color: rgb(var(--color-red));
}
.modular.faq .faq-item {
  border-bottom: 2px solid rgb(var(--color-black));
}
.modular.faq .subquestions-container {
  padding-left: var(--margin-8);
  padding-bottom: calc(var(--margin-8) / 2);
  list-style: initial;
}
.modular.faq .faq-subquestion-item:last-of-type .subquestion-item.answer {
  border-bottom: none;
}
.modular.faq .faq-subquestion-item.active {
  margin-bottom: calc(var(--margin-8) / 2);
}
.modular.faq .subquestion-item.question {
  font-size: 0.9em;
  font-weight: 600;
  padding: 0.35em 0;
}
.modular.faq .subquestion-item.answer {
  border-bottom: 1px solid rgb(var(--color-black));
}

.modular.switch-on-click {
  background: rgb(var(--color-red));
  padding: calc(var(--margin-3) + var(--margin-8)) var(--margin-8);
  padding-top: calc(var(--margin-3) + var(--margin-8) * 2);
  scroll-snap-align: start;
  overflow-y: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.modular.switch-on-click .wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
}
@media only screen and (max-width: 992px) {
  .modular.switch-on-click .wrapper {
    margin: 0 var(--margin-8);
  }
}
@media only screen and (min-width: 992px) {
  .modular.switch-on-click .wrapper {
    margin-left: calc(var(--margin-3) + var(--margin-8));
    margin-right: calc(var(--margin-3));
  }
}
.modular.switch-on-click .sentence {
  font-size: clamp(42px, 4.5vw, 78px);
  display: block;
  text-wrap: balance;
  flex: 1;
  align-content: center;
  cursor: pointer;
  line-height: 0.8em;
  position: relative;
  z-index: 10;
}
@media only screen and (max-width: 768px) {
  .modular.switch-on-click .sentence {
    font-size: clamp(30px, 4.5vw, 78px);
  }
}
.modular.switch-on-click .sentence:last-of-type {
  cursor: default;
}
.modular.switch-on-click .sentence p {
  margin: 0;
  line-height: 0.9em;
  flex-wrap: wrap;
  font-family: var(--font-special);
}
.modular.switch-on-click .sentence p em {
  font-size: 1rem;
  font-family: var(--font-content);
  display: block;
}
.modular.switch-on-click .second-sentence {
  display: none;
  position: absolute;
  height: 100%;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .modular.switch-on-click .second-sentence {
    top: 50%;
    left: 0%;
    translate: 0 -50%;
  }
}
.modular.switch-on-click .sentence-link {
  font-size: clamp(14px, 0.5em, 24px);
  font-weight: 500;
  translate: 0 50%;
  opacity: 0;
  z-index: 999;
  width: 100%;
  display: flex;
  align-items: center;
  gap: calc(var(--margin-8) / 2);
  transition: all 0.3s cubic-bezier(0.3, 1, 0.8, 1);
  animation-fill-mode: forwards; /* Maintient l'état final de l'animation */
  margin-top: var(--margin-8);
}
@media only screen and (min-width: 768px) {
  .modular.switch-on-click .sentence-link {
    position: absolute;
    bottom: 0;
    right: 0;
    justify-content: end;
  }
}
.modular.switch-on-click .active .sentence-link {
  transition: all 0.3s cubic-bezier(0.3, 1, 0.8, 1);
  animation: SentenceLinkfadeIn 0.6s cubic-bezier(0.3, 1, 0.8, 1) 1.5s forwards;
}
.modular.switch-on-click .active .sentence-link:hover {
  right: calc(var(--margin-8) * -1);
}

@keyframes SentenceLinkfadeIn {
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
.modular.motherfoc-image {
  display: flex;
  flex-direction: column;
}
.modular.motherfoc-image > .wrapper {
  position: relative;
  flex: 1;
}
.modular.motherfoc-image .intro-video-text {
  margin-top: calc(var(--margin-3) + var(--margin-8) * 2);
}
.modular.motherfoc-image .intro-video {
  cursor: pointer;
  background: rgb(var(--color-pink));
  align-content: center;
}
.modular.motherfoc-image img {
  max-width: 100%;
}
.modular.motherfoc-image .intro-video-text {
  text-align: center;
}
.modular.motherfoc-image .about-slide-title {
  font-weight: 800;
  font-size: clamp(20px, 12vw, 170px);
  z-index: 5;
  text-wrap: balance;
  text-align: center;
  line-height: 0.8em;
  max-width: 70%;
  margin: auto;
}
@media only screen and (max-width: 992px) {
  .modular.motherfoc-image .about-slide-title {
    font-size: clamp(20px, 16vw, 170px);
    max-width: initial;
  }
}
.modular.motherfoc-image .about-slide-title em {
  font-family: var(--font-content);
  font-weight: 400;
  letter-spacing: -0.05em;
  white-space: nowrap;
  font-style: normal;
  line-height: 1em;
  font-size: clamp(14px, 2vw, 18px);
}
@media only screen and (max-width: 992px) {
  .modular.motherfoc-image .about-slide-title em {
    line-height: 1em;
    font-size: clamp(14px, 2vw, 18px);
  }
}
.modular.motherfoc-image .intro-motherfoc-text {
  margin-bottom: var(--margin-4);
  display: flex;
  flex-direction: column;
}
@media only screen and (max-width: 992px) {
  .modular.motherfoc-image .intro-motherfoc-text {
    margin-top: var(--margin-8);
  }
}
.modular.motherfoc-image .intro-video-title {
  position: absolute;
  left: 50%;
  top: 47%;
  transform: translateX(-50%) translateY(-90%) !important;
  cursor: pointer;
}
@media only screen and (max-width: 992px) {
  .modular.motherfoc-image .intro-video-title {
    top: 47%;
    transform: translateX(-50%) translateY(calc(-50% + var(--margin-8))) !important;
    min-height: calc(var(--margin-full) + var(--margin-half));
    font-size: clamp(20px, 16vw, 170px);
    max-width: initial;
  }
}
@media only screen and (max-width: 768px) {
  .modular.motherfoc-image .intro-video-title {
    top: 37.5%;
  }
}
.modular.motherfoc-image .intro-video-title em {
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translateX(-50%) translateY(-200%);
}
.modular.motherfoc-image .intro-video-image {
  width: calc(var(--margin-full) + var(--margin-half));
  height: calc(var(--margin-full) + var(--margin-half));
  aspect-ration: 1/1;
  position: absolute;
  bottom: var(--margin-8);
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 0;
  cursor: pointer;
}
@media only screen and (max-width: 768px) {
  .modular.motherfoc-image .intro-video-image {
    top: 40%;
  }
}
.modular.motherfoc-image .bottom {
  overflow: hidden;
}
.modular.motherfoc-image .top {
  bottom: 0;
  z-index: 10;
  top: calc(50% + var(--margin-8));
}
@media only screen and (max-width: 992px) {
  .modular.motherfoc-image .top {
    top: calc(53% + var(--margin-8));
  }
}
@media only screen and (max-width: 768px) {
  .modular.motherfoc-image .top {
    top: calc(40% + var(--margin-3));
  }
}
.modular.motherfoc-image .then {
  transform: rotateY(720deg); /* Rotation de 720 degrés sur l'axe Y */
  transition: transform 0.4s ease-in, opacity 0.2s ease-out 0.3s, filter 0.4s ease-out; /* Transition pour la rotation */
  transform-origin: 40% 0;
  opacity: 1;
  translate: 0 0;
}
.modular.motherfoc-image .now {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  left: 0;
  top: 0;
  translate: -10% 0;
  opacity: 0;
  transform: rotateY(90deg);
  filter: blur(10px);
  transition: transform 0.4s ease-out, opacity 0.2s ease-in 0.1s, filter 0.4s ease-in; /* Transition pour la rotation */
}
.modular.motherfoc-image .intro-video-background {
  width: 100%;
  height: 100%;
  background-size: cover;
  transform: scale(1.2);
}
.modular.motherfoc-image .link {
  position: fixed;
  bottom: var(--margin-8);
  right: var(--margin-8);
  display: flex;
  text-decoration: none;
  align-items: center;
  color: rgb(var(--color-black));
  text-wrap: balance;
  max-width: var(--margin-3);
  line-height: 1.25em;
  text-align: right;
  gap: 1em;
  transition: all 0.3s ease-out;
}
.modular.motherfoc-image .link:hover {
  translate: 0.5em 0;
}
.modular.motherfoc-image svg {
  width: calc(var(--margin-8) * 2);
}

.motherfoc-text {
  text-align: left;
}
.motherfoc-text h1,
.motherfoc-text h2,
.motherfoc-text h3,
.motherfoc-text h4 {
  font-family: var(--font-special);
  margin-top: 2em;
}
.motherfoc-text em {
  font-style: italic;
  font-size: 0.9em;
}
.motherfoc-text .motherfoc-text-content {
  max-width: 750px;
  margin: auto;
}
.motherfoc-text a {
  z-index: inherit;
}
.motherfoc-text .wrapper {
  padding: var(--logo-offset);
}
@media only screen and (max-width: 992px) {
  .motherfoc-text .wrapper {
    padding: var(--margin-8);
    padding-bottom: calc(var(--logo-offset) + var(--margin-half) + var(--margin-4));
  }
}

.intro-video-image:hover .me.now {
  transform: rotateY(540deg); /* Rotation de 720 degrés sur l'axe Y */
  opacity: 1;
  filter: blur(0);
}
.intro-video-image:hover .me.then {
  opacity: 0;
  filter: blur(10px);
  transform: rotateY(90deg); /* Rotation de 720 degrés sur l'axe Y */
}

.suprise-item {
  cursor: pointer;
}

#surpriseVideo,
#bubblesVideo {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 1000000;
  top: 0;
  align-content: center;
  text-align: center;
  display: none;
}
#surpriseVideo img,
#bubblesVideo img {
  width: calc(var(--margin-full) + var(--margin-half));
  rotate: -2deg;
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

#bubblesVideo img {
  width: 50%;
}

#dontTouchIt {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 1000000;
  top: 0;
  align-content: center;
  text-align: center;
  background: rgb(var(--color-black));
  display: none;
}
#dontTouchIt > * {
  position: absolute;
}
#dontTouchIt #dontTouchIt-safe-button {
  color: rgb(var(--color-pink));
  bottom: var(--margin-8);
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(0%);
  cursor: pointer;
  transition: all 0.3s ease-in;
}
#dontTouchIt #dontTouchIt-safe-button:hover {
  opacity: 0.4;
}
#dontTouchIt #dontTouchIt-button {
  width: 200px;
  height: 190px;
  position: absolute;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: -10px -12px;
  padding: 0;
  background-size: auto 210px;
  border: 0;
  display: block;
  -webkit-tap-highlight-color: transparent;
  background-color: red;
  border-radius: 500px;
  overflow: hidden;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
#dontTouchIt #dontTouchIt-button:active {
  background-position: -230px -12px;
}
#dontTouchIt #dontTouchIt-safe-gif {
  width: 50%;
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(-2deg);
  z-index: 100000;
}
#dontTouchIt #dontTouchIt-click {
  width: 100%;
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(-2deg);
  z-index: 100000;
}

#songs-buttons {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 1000000;
  top: 0;
  align-content: center;
  text-align: center;
  background: rgb(var(--color-red));
  display: none;
}
#songs-buttons .buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2em;
}
#songs-buttons .button {
  background-image: url("https://focstudio.ch/user/themes/foc/images/button-sprite.webp");
  width: 200px;
  height: 190px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: -10px -12px;
  padding: 0;
  background-size: auto 210px;
  border: 0;
  display: block;
  -webkit-tap-highlight-color: transparent;
  border-radius: 500px;
  overflow: hidden;
}
@media only screen and (max-width: 768px) {
  #songs-buttons .button {
    width: 150px;
    height: 140px;
    background-size: auto 160px;
  }
}
#songs-buttons .button:active {
  background-position: -230px -12px;
}
@media only screen and (max-width: 768px) {
  #songs-buttons .button:active {
    background-position: -178px -12px;
  }
}
#songs-buttons #button-cat {
  background-color: #eb0202;
}
#songs-buttons #button-message {
  background-color: #f0f0f0;
}
#songs-buttons #button-fuck {
  background-color: #292929;
}
#songs-buttons #button-windows {
  background-color: rgb(var(--color-pink));
}
#songs-buttons #choose-message {
  font-family: var(--font-special);
  text-transform: uppercase;
  color: rgb(var(--color-pink));
  margin-bottom: var(--margin-3);
  font-size: var(--margin-6);
  line-height: 0.8em;
}
#songs-buttons .this-is-the-end {
  margin-top: 20px;
  color: white;
  min-height: 1em;
  padding: 50px;
  opacity: 0;
}
#songs-buttons .this-is-the-end.active {
  opacity: 1;
}

.trail {
  position: absolute;
  z-index: 0;
  font-size: clamp(20px, 16.6666666667vw, 280px);
  color: rgb(var(--color-pink));
  font-family: var(--font-special);
  pointer-events: none;
}

@keyframes bounceRight {
  0%, 20%, 50%, 80%, 100% {
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  40% {
    -ms-transform: translateX(-30px);
    transform: translateX(-30px);
  }
  60% {
    -ms-transform: translateX(-15px);
    transform: translateX(-15px);
  }
}
/* /right bounce */
.full-letter-link {
  -webkit-animation: bounceRight 2s infinite;
  animation: bounceRight 2s infinite;
  animation-delay: 1s;
  animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);
  float: right;
  font-size: clamp(32px, 12vw, 140px);
}

.full-letter-bg-video-container {
  pointer-events: none;
  width: 100vw;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.full-letter-bg-video-container video {
  pointer-events: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media only screen and (min-width: 992px) {
  .full-letter-bg-video-container video {
    object-fit: contain;
    object-position: 83.5% 50%;
  }
}
@media only screen and (min-width: 992px) {
  .full-letter-bg-video-container .display-bg-video {
    background-size: contain;
    background-position: 83.5% 50%;
  }
}

#motherfoc-video-container {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 99999999;
  background: rgba(var(--color-black), 0.8);
}
#motherfoc-video-container video {
  position: absolute;
  left: var(--margin-8);
  top: var(--margin-8);
  object-fit: contain;
  width: calc(100% - var(--margin-8) * 2);
  height: calc(100% - var(--margin-8) * 2);
  rotate: -0.75deg;
}

.mother-of-foc-en-1-000-mots .modular-title em {
  font-size: 14px;
  font-family: var(--font-content);
  font-weight: 400;
  letter-spacing: -0.05em;
  position: absolute;
  top: 5vw;
  white-space: nowrap;
}

#about-mother-foc {
  position: relative;
}
@media only screen and (max-width: 992px) {
  #about-mother-foc {
    padding: 0;
  }
}
#about-mother-foc > .wrapper {
  width: 100vw;
  overflow: hidden;
  position: relative;
}
#about-mother-foc .about-slider-container {
  display: flex;
  width: 200vw;
  transition: all 0.3s ease-out;
  position: relative;
}
#about-mother-foc .about-slider-container:before {
  content: "";
  width: 100vw;
  height: var(--logo-offset);
  background: rgb(var(--color-pink));
  background: linear-gradient(0deg, rgba(var(--color-pink), 1) 70%, rgba(var(--color-pink), 0.1) 100%);
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}
@media only screen and (max-width: 768px) {
  #about-mother-foc .about-slider-container:before {
    height: calc(var(--logo-offset) + var(--margin-half) + var(--margin-4));
  }
}
#about-mother-foc .about-slide {
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  position: relative;
}
#about-mother-foc .about-inline-link {
  position: absolute;
  display: flex;
  align-items: center;
  max-width: 300px;
  padding: var(--margin-8);
  text-wrap: balance;
  z-index: 8;
  gap: 1em;
}
#about-mother-foc .about-inline-link .icon, #about-mother-foc .about-inline-link .mobile-navigation-opened #navigation, .mobile-navigation-opened #about-mother-foc .about-inline-link #navigation {
  font-size: var(--margin-8);
  max-height: 35px;
  display: flex;
  align-items: end;
}
#about-mother-foc .slide-nav-image {
  left: 0;
  position: sticky;
  top: 50%;
  transform: translateX(0%) translateY(-50%);
}
@media only screen and (max-width: 992px) {
  #about-mother-foc .slide-nav-image {
    max-width: 80px;
    left: inherit;
    right: 0;
    top: calc(100% - var(--margin-4));
  }
}
@media only screen and (max-width: 768px) {
  #about-mother-foc .slide-nav-image {
    top: calc(95% - var(--margin-half));
  }
}
#about-mother-foc .slide-nav-word {
  right: 0;
  bottom: 50%;
  transform: translateX(0%) translateY(50%);
  padding-bottom: var(--margin-6);
  max-width: 220px;
  text-align: right;
}
@media only screen and (max-width: 992px) {
  #about-mother-foc .slide-nav-word {
    bottom: inherit;
    top: 70vh;
    top: 70dvh;
    gap: 1em;
    text-align: right;
  }
}
#about-mother-foc .more-about {
  bottom: 0;
  flex-direction: column;
  left: 50vw;
  transform: translateX(-50%) translateY(0%);
  z-index: 10;
  gap: 1em;
}
@media only screen and (max-width: 768px) {
  #about-mother-foc .more-about {
    bottom: var(--margin-half);
    bottom: inherit;
    top: 85vh;
    top: 85dvh;
  }
}

#audio-popup-end {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 99999999;
  padding: var(--margin-8);
  background: rgba(var(--color-black), 0.9);
  align-content: center;
  display: none;
}
#audio-popup-end .wrapper {
  background: rgb(var(--color-pink));
  max-width: 700px;
  margin: auto;
  min-height: var(--margin-full);
  padding: var(--margin-8);
  text-align: center;
  align-content: center;
}
#audio-popup-end .audio-popup-end-message {
  margin-bottom: var(--margin-8);
  text-wrap: balance;
}

#wtf-popup-end {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 99999999;
  padding: var(--logo-offset);
  background: rgba(var(--color-black), 0.9);
  align-content: center;
  display: none;
}
@media only screen and (max-width: 992px) {
  #wtf-popup-end {
    padding: var(--margin-8);
  }
}
#wtf-popup-end .icon, #wtf-popup-end .mobile-navigation-opened #navigation, .mobile-navigation-opened #wtf-popup-end #navigation {
  font-size: var(--margin-8);
  padding: var(--margin-8);
  position: absolute;
  top: 0;
  right: 0;
}
#wtf-popup-end .wrapper {
  background: rgb(var(--color-pink));
  max-width: 1000px;
  margin: auto;
  min-height: var(--margin-full);
  padding: var(--margin-3);
  text-align: center;
  align-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  gap: 1em;
}
#wtf-popup-end .wtf-popup-end-message {
  font-family: var(--font-special);
  margin-bottom: 0.25em;
  font-size: clamp(20px, 4vw, 4vw);
  text-wrap: balance;
}

.modular.five-days-list {
  text-align: left;
}
.modular.five-days-list > .wrapper > *:not([class*=link]),
.modular.five-days-list .modular-title {
  padding: 0;
}
@media only screen and (min-width: 992px) {
  .modular.five-days-list > .wrapper > *:not([class*=link]),
  .modular.five-days-list .modular-title {
    padding-left: var(--margin-3);
  }
}
.modular.five-days-list ul {
  gap: 0.25em;
}
.modular.five-days-list p {
  text-wrap: balance;
}
.modular.five-days-list p strong {
  display: block;
}

.modular.next-step {
  min-height: 100dvh;
  padding: calc(var(--margin-8) * 2 + var(--margin-3));
  padding-right: calc(var(--margin-8) + var(--margin-3));
  display: flex;
  flex-direction: column;
  position: relative;
}
@media only screen and (max-width: 1200px) {
  .modular.next-step {
    padding: var(--margin-8);
    padding-top: calc(var(--margin-8) * 2 + var(--margin-3));
  }
}
.modular.next-step > .wrapper {
  flex: 1;
  max-width: 60%;
}
.modular.next-step.with-image .modular-title {
  padding-right: var(--margin-3);
}
.modular.next-step .modular-title {
  color: rgb(var(--color-red));
  line-height: 0.8em;
  text-wrap: balance;
}
.modular.next-step .next-step-figure {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100dvh;
  pointer-events: none;
  transform: translateX(-20%) translateY(0%);
}
@media only screen and (max-width: 1600px) {
  .modular.next-step .next-step-figure {
    translate: 20% 0;
    transform: translateX(20%) translateY(0%);
  }
}
.modular.next-step .next-step-figure img {
  width: auto;
  height: 100%;
  display: block;
  margin-left: auto;
  object-fit: contain;
  object-position: right bottom;
}

.next-step-link {
  --bullet-size: .8em;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  position: relative;
  mix-blend-mode: difference;
  padding: calc(var(--margin-8) / 2);
  padding-left: calc(var(--margin-8));
}
@media only screen and (max-width: 992px) {
  .next-step-link {
    width: 100%;
    justify-content: space-between;
    padding-left: 4px;
  }
}
.next-step-link .icon, .next-step-link .mobile-navigation-opened #navigation, .mobile-navigation-opened .next-step-link #navigation {
  pointer-events: none;
  transform: translateX(-0.5em) translateY(0%);
  opacity: 0;
  transition: all 0.3s ease-out;
}

.next-step-item {
  line-height: 1em;
}
.next-step-item:hover .next-step-label:before {
  width: 100%;
}

.next-step-label {
  display: inline-block;
  max-width: var(--margin-full);
  text-wrap: balance;
  color: rgb(var(--color-pink));
  background: rgb(var(--color-black));
  position: relative;
}
.next-step-label:before {
  content: "";
  background: rgb(var(--color-pink));
  width: 0;
  height: 85%;
  position: absolute;
  top: 50%;
  transform: translateX(0%) translateY(-50%);
  left: 0;
  mix-blend-mode: difference;
  transition: all 0.3s cubic-bezier(0.3, 1, 0.8, 1);
}

/*FULL LETTER */
#if-you-think-pro-a-expensive,
#what-the-f-c {
  overflow: hidden;
}
@media only screen and (max-width: 992px) {
  #if-you-think-pro-a-expensive,
  #what-the-f-c {
    padding: 0;
  }
}
#if-you-think-pro-a-expensive svg,
#what-the-f-c svg {
  width: 100%;
  height: 110%;
  fill: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-30%) translateY(-50%);
  z-index: -1;
}
@media only screen and (max-width: 768px) {
  #if-you-think-pro-a-expensive svg,
  #what-the-f-c svg {
    transform: translateX(-50%) translateY(-50%);
  }
}
#if-you-think-pro-a-expensive .letter-moving,
#what-the-f-c .letter-moving {
  font-size: clamp(300px, 35vw, 35vw); /* Ajuste la taille du texte selon tes besoins */
  fill: rgb(var(--color-pink)); /* Couleur du texte */
  opacity: 0.2; /* Initialement invisible */
  transition: opacity 0.3s;
  line-height: 0.5em;
  color: rgb(var(--color-pink));
  font-weight: bold;
}
#if-you-think-pro-a-expensive #text-path,
#what-the-f-c #text-path {
  fill: none;
  stroke: rgba(0, 0, 0, 0.05);
}
#if-you-think-pro-a-expensive #text-elements,
#what-the-f-c #text-elements {
  transform: translateX(-12%) translateY(105%);
}
#if-you-think-pro-a-expensive .letter-trail,
#what-the-f-c .letter-trail {
  font-size: 25vw;
  position: absolute;
  pointer-events: none;
  color: pink;
  left: 0;
  top: 0;
}

.full-letters {
  position: relative;
  font-family: var(--font-special);
  font-weight: 800;
  background: rgb(var(--color-red));
  padding: var(--margin-8);
}
.full-letters.home-about-foc {
  background: rgb(255, 62, 0);
  overflow: hidden;
}
@media only screen and (max-width: 992px) {
  .full-letters {
    padding: 0;
  }
}
.full-letters .full-letter-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  letter-spacing: -0.05em;
  line-height: 0.8em;
  gap: 0;
  padding-top: calc(var(--logo-offset) - var(--margin-8));
  padding-left: var(--logo-offset);
  justify-content: start;
  transition: all 0.3s ease-out;
  height: calc(100vh - var(--margin-8) * 2);
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 992px) {
  .full-letters .full-letter-wrapper {
    padding: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    font-size: clamp(26vw, 16.6666666667vw, 205px) !important;
  }
}
.full-letters .moving-letter {
  position: absolute;
  color: rgb(var(--color-pink));
}
.full-letters .full-letter-link {
  line-height: 0.6em;
  align-self: end;
  transform: translateX(0%) translateY(calc(var(--margin-8) * -1));
  width: 100%;
  position: absolute;
  right: var(--margin-8);
  bottom: var(--margin-8);
}
.full-letters .full-letter-link .icon, .full-letters .full-letter-link .mobile-navigation-opened #navigation, .mobile-navigation-opened .full-letters .full-letter-link #navigation {
  display: flex;
  margin-left: auto;
  justify-content: flex-end;
}

/*----*/
.pulsing-container {
  cursor: pointer;
  width: 15vw;
  height: 15vw;
  max-width: 200px;
  max-height: 200px;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .pulsing-container {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}

.pusling {
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.pusling:before,
.pusling:after {
  content: "";
  position: absolute;
  display: block;
  box-sizing: border-box;
  transform: translateX(-50%) translateY(-50%);
  left: 50%;
  top: 50%;
  border-radius: 100vw;
  opacity: 0;
  background-color: rgba(var(--color-pink), 0.15);
}

.pusling:before {
  width: var(--margin-full);
  height: var(--margin-full);
  animation: pulse-ring 3s cubic-bezier(0.215, 0.61, 0.355, 1) infinite 1s;
}

.pusling:after {
  display: block;
  width: var(--margin-half);
  height: var(--margin-half);
  animation: pulse-ring 3s cubic-bezier(0.215, 0.61, 0.355, 1) infinite 1.25s;
}

.pusling.second:after {
  display: none;
}

@keyframes pulse-ring {
  0% {
    opacity: 1;
    scale: 0.1;
  }
  95%, 100% {
    opacity: 0;
  }
}
.btn-floating {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(0%);
  bottom: var(--margin-8);
}

.floating-link {
  color: rgb(var(--color-pink));
  mix-blend-mode: difference;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: end;
  margin-top: auto;
  gap: 1em;
  font-weight: 500;
  font-size: 0.9rem;
  transition: all 0.3s cubic-bezier(0.3, 1, 0.8, 1);
  position: fixed;
  right: 0;
  transform: translateX(0%) translateY(0%);
  bottom: 0;
  width: 100%;
  padding: var(--margin-8);
}
.floating-link .icon, .floating-link .mobile-navigation-opened #navigation, .mobile-navigation-opened .floating-link #navigation {
  font-size: 1rem;
  display: flex;
  align-items: center;
}
.floating-link:hover {
  transform: translateX(1rem) translateY(0%);
}

.modular.commencer-maintenant {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: rgb(var(--color-red));
}
@media only screen and (min-width: 992px) {
  .modular.commencer-maintenant {
    padding: calc(var(--margin-3) + var(--margin-8) * 2);
  }
}
.modular.commencer-maintenant > .wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  font-size: clamp(0.9rem, 2.5vw, 20px);
}

.start-5days-now {
  font-family: var(--font-special);
  font-size: clamp(30px, 3.85vw, var(--margin-3));
  line-height: 0.8em;
  width: var(--logo-size);
  min-height: var(--logo-size);
  background: rgb(var(--color-pink));
  color: rgb(var(--color-black));
  padding: var(--margin-8);
  display: flex;
  gap: 0.1em;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s cubic-bezier(0.3, 1, 0.8, 1);
  aspect-ratio: 1/1;
}
@media only screen and (max-width: 992px) {
  .start-5days-now {
    width: calc(var(--logo-size) + var(--margin-3));
    padding: calc(var(--margin-6));
    font-size: clamp(30px, 6.85vw, var(--margin-3));
  }
}
.start-5days-now > * {
  transition: all 0.3s cubic-bezier(0.3, 1, 0.8, 1);
}
.start-5days-now .first-step {
  font-size: clamp(16px, 1.5vw, var(--margin-4));
}
@media only screen and (max-width: 992px) {
  .start-5days-now .first-step {
    font-size: clamp(16px, 3vw, var(--margin-4));
  }
}
.start-5days-now span {
  text-wrap: balance;
}
.start-5days-now .icon, .start-5days-now .mobile-navigation-opened #navigation, .mobile-navigation-opened .start-5days-now #navigation {
  text-align: right;
  flex: 1;
  display: block;
  align-content: end;
}
.start-5days-now:hover {
  rotate: -2deg;
}
.start-5days-now:hover > * {
  rotate: 2deg;
}
.start-5days-now:hover .icon, .start-5days-now:hover .mobile-navigation-opened #navigation, .mobile-navigation-opened .start-5days-now:hover #navigation {
  transform: translateX(calc(var(--margin-8) / 2)) translateY(0%);
}

.modular.pack {
  padding: var(--logo-offset);
  padding-right: calc(var(--margin-3) + var(--margin-8));
  padding-bottom: var(--margin-8);
  display: block;
  scroll-padding-top: 50vh;
}
@media only screen and (min-width: 992px) {
  .page-template-service .modular.pack {
    min-height: 100vh;
  }
}
@media only screen and (max-width: 992px) {
  .modular.pack {
    padding: var(--margin-8);
    padding-top: var(--logo-offset);
    display: block;
  }
}
@media only screen and (max-width: 768px) {
  .modular.pack {
    --pack-max-width: calc(var(--margin-full) + var(--margin-half));
  }
}

.pack-list {
  display: flex;
  gap: var(--margin-8) calc(var(--margin-8) / 2);
}
@media only screen and (max-width: 992px) {
  .pack-list {
    flex-direction: column;
    flex-wrap: wrap;
    gap: calc(var(--margin-8) / 2);
  }
}
@media screen and (max-width: 500px) {
  .pack-list {
    align-items: center;
    gap: var(--margin-8);
  }
}

.pack-item {
  flex: 1;
  max-width: var(--pack-max-width);
  min-height: var(--pack-max-width);
  background: rgb(var(--color-red));
  color: rgb(var(--color-black));
  padding: var(--margin-8);
  transition: 0.3s cubic-bezier(0.3, 1, 0.8, 1);
}
.page-home .pack-item {
  border: solid 3px rgb(var(--color-black));
  opacity: 0;
  transform: translateY(100%);
}
.page-home .pack-item:hover {
  background: rgb(var(--color-pink));
  border-color: rgb(var(--color-pink));
}
@media only screen and (min-width: 1600px) {
  .pack-item {
    flex: inherit;
    aspect-ratio: 1/1;
    min-height: inherit;
  }
}
@media only screen and (max-width: 992px) {
  .pack-item {
    max-width: inherit;
    min-height: inherit;
  }
}
@media only screen and (max-width: 768px) {
  .pack-item {
    width: calc(50% - var(--margin-8) / 4);
  }
}
@media screen and (max-width: 500px) {
  .pack-item {
    aspect-ratio: inherit;
    width: inherit;
    padding: var(--margin-6);
    max-width: 100%;
  }
}
.pack-item:hover {
  rotate: -2deg;
}
.pack-item:hover .icon, .pack-item:hover .mobile-navigation-opened #navigation, .mobile-navigation-opened .pack-item:hover #navigation {
  transform: translateX(calc(var(--margin-8) / 2)) translateY(0%);
}

.pack-item-content {
  display: flex;
  flex-direction: column;
}
.pack-item-content .icon, .pack-item-content .mobile-navigation-opened #navigation, .mobile-navigation-opened .pack-item-content #navigation {
  justify-self: end;
  display: flex;
  justify-content: end;
  font-size: var(--margin-8);
  transition: 0.3s cubic-bezier(0.3, 1, 0.8, 1);
}

.pack-item-title {
  font-size: clamp(2rem, 3vw, 40px);
  margin-bottom: 0.5em;
  line-height: 0.9em;
}
.pack-item-title a {
  color: rgb(var(--color-black));
}

.pack-item-price {
  margin-top: 0.75em;
  margin-bottom: 0.25em;
  font-weight: 600;
  font-size: 1.3em;
}

.pack-item-headline {
  margin-bottom: 0;
  color: rgb(var(--color-black));
}

/* supplement pack horziontal scroll */
/* SUPPLEMENT PACK - MODULE COMPLEMENTAIRE */
.page-home .supplement-pack {
  z-index: 20;
  position: relative;
  padding-top: 0;
  padding-bottom: var(--margin-8);
  opacity: 0;
}
.supplement-pack .modular-title {
  margin-bottom: var(--margin-8);
}
.page-home .supplement-pack .modular-title {
  font-size: clamp(30px, 3.2vw, 72px);
  text-align: center;
  text-wrap: balance;
}
@media only screen and (max-width: 992px) {
  .supplement-pack.modular {
    padding: var(--margin-8) 0;
  }
  .page-template-service .supplement-pack.modular {
    padding: calc(var(--margin-8) * 2);
  }
}

.supplement-grid {
  --pack-max-width: 280px;
  --pack-max-width: 33.333%;
  padding: var(--logo-offset);
}
@media only screen and (max-width: 1200px) {
  .supplement-grid {
    padding-right: var(--margin-3);
  }
}
@media only screen and (max-width: 992px) {
  .supplement-grid {
    --pack-max-width: 50%;
    margin: 0 var(--margin-8);
  }
}
@media only screen and (max-width: 576px) {
  .supplement-grid {
    --pack-max-width: 100%;
  }
}
.supplement-grid .supplement-list {
  --pack-max-width: calc(33.33% - var(--margin-8)/3);
  max-width: 100vw;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--margin-8) / 2);
}
@media only screen and (max-width: 992px) {
  .supplement-grid .supplement-list {
    --pack-max-width: calc(50% - var(--margin-8)/3);
  }
}
@media only screen and (max-width: 768px) {
  .supplement-grid .supplement-list {
    --pack-max-width: 100%;
  }
}
.supplement-grid .supplement-item {
  border: 3px solid rgb(var(--color-full-black));
}
@media only screen and (min-width: 1200px) {
  .supplement-grid .supplement-item {
    max-width: calc(330px - var(--margin-8) / 3);
    max-width: var(--pack-max-width);
  }
}

@media only screen and (min-width: 992px) {
  .supplement-slider {
    padding-top: calc(var(--margin-3));
    padding-bottom: var(--margin-8);
  }
  .supplement-slider .modular-title {
    padding-left: var(--logo-offset);
  }
}
.supplement-slider .supplement-list {
  display: flex;
  padding-right: var(--logo-offset);
  width: calc(330px * var(--supplement-total));
}
@media only screen and (min-width: 992px) {
  .supplement-slider .supplement-list {
    margin: 0 var(--logo-offset);
    width: calc(330px * (var(--supplement-total) - 1));
  }
}
.supplement-slider .supplement-item.is-highlighted {
  width: var(--pack-max-width);
}

.supplement-item {
  padding: var(--margin-8);
  border: 1px solid rgb(var(--color-full-black));
  border-collapse: collapse;
  min-height: var(--pack-max-width);
  width: var(--pack-max-width);
  min-width: var(--pack-max-width);
  position: relative;
  mix-blend-mode: difference;
  background-color: rgb(var(--color-pink)); /* Juste pour la visibilité, tu peux changer ou retirer */
  color: rgb(var(--color-full-black));
}
@media only screen and (max-width: 1200px) {
  .supplement-item {
    min-height: clamp(0px, (100vw - var(--logo-offset) * 2) / 3, 300px);
  }
}
@media only screen and (max-width: 992px) {
  .supplement-item {
    padding: calc(var(--margin-8) / 2);
    width: var(--pack-max-width);
    min-height: calc((100vw - var(--logo-offset) * 2) / 2);
  }
}
@media only screen and (max-width: 576px) {
  .supplement-item {
    padding: calc(var(--margin-8));
  }
}
.supplement-item:before {
  content: "";
  width: 100%;
  height: 100%;
  background: rgb(var(--color-pink));
  position: absolute;
  left: 0;
  top: 0;
  transform: rotateX(90deg);
  mix-blend-mode: difference;
  z-index: 1;
  transition: transform 0.2s ease-out;
}

.supplement-item-content {
  display: flex;
  height: 100%;
  flex-direction: column;
}
.supplement-item-content .icon, .supplement-item-content .mobile-navigation-opened #navigation, .mobile-navigation-opened .supplement-item-content #navigation {
  font-size: 1.3em;
  justify-self: end;
  display: block;
  margin-top: auto;
  text-align: right;
}

.supplement-item.is-highlighted {
  width: calc(var(--pack-max-width) * 2);
  max-width: inherit;
}
@media only screen and (max-width: 768px) {
  .supplement-item.is-highlighted {
    width: var(--pack-max-width);
  }
}

.supplement-item.is-included {
  background: rgb(var(--color-pink));
  color: rgb(var(--color-full-black));
  border-color: rgb(var(--color-full-black));
}
.page-template-service .supplement-item.is-included {
  background-color: rgb(var(--color-full-black)); /* Juste pour la visibilité, tu peux changer ou retirer */
  color: rgb(var(--color-pink));
  border-color: rgb(var(--color-pink));
}

.supplement-item-title {
  font-size: 1.5em;
}

.supplement-item-details {
  position: relative;
}

.supplement-item-headline {
  transform: rotateY(0deg);
  transition: opacity 0s ease-in 0.2s, transform 0.2s ease-in 0.2s;
}

.supplement-item-price p > em,
.supplement-item-price p > strong {
  display: block;
}
.supplement-item-price p > strong {
  display: block;
  margin-top: 0.75em;
}

@media only screen and (min-width: 992px) {
  .supplement-item-price {
    transition: all 0.3s ease-out 0s;
    transform: translateX(0%) translateY(-10px);
    opacity: 0;
  }
  .supplement-item-price p > strong {
    font-weight: 800;
    display: inline-block;
  }
  .supplement-item.hover-enabled:hover {
    border-color: rgb(var(--color-full-black));
  }
  .supplement-item.hover-enabled:hover:before {
    transform: rotateX(0deg);
  }
  .supplement-item.hover-enabled:hover .supplement-item-price {
    transform: translateX(0%) translateY(0%) rotateX(0deg);
    opacity: 1;
    transition: all 0.4s ease-out 0.1s;
  }
  .supplement-item.hover-enabled:hover .icon, .supplement-item.hover-enabled:hover .mobile-navigation-opened #navigation, .mobile-navigation-opened .supplement-item.hover-enabled:hover #navigation {
    opacity: 0;
  }
}
/* pack content */
.pack-content {
  position: relative;
}
.pack-content > .wrapper {
  position: relative;
}

.pack-header-content {
  padding: var(--logo-offset);
  padding-bottom: var(--margin-8);
  flex: 1;
  align-content: center;
}
@media only screen and (min-width: 992px) {
  .pack-header-content {
    min-height: 100vh;
  }
  .pack-header-content .word-switch-title {
    text-align: center;
  }
}
@media only screen and (max-width: 992px) {
  .pack-header-content {
    padding: var(--margin-8);
    padding-top: 0;
  }
}
.pack-header-content .word {
  font-family: var(--font-special);
  font-size: clamp(30px, 3.25vw, 38px);
  line-height: 0.8em;
  text-wrap: balance;
  display: block;
  margin-bottom: 0;
}
@media only screen and (min-width: 992px) {
  .pack-header-content .word {
    text-align: center;
    min-height: 70px;
  }
}
@media only screen and (max-width: 992px) {
  .pack-header-content .word {
    line-height: 0.9em;
  }
}
@media only screen and (max-width: 768px) {
  .pack-header-content .word {
    min-height: 2.75em;
  }
}

.modular.full-media {
  width: 100%;
  height: 100vh;
  pointer-events: none;
}
@media only screen and (max-width: 992px) {
  .modular.full-media {
    position: relative;
    z-index: 995;
    padding: 0;
  }
}
.modular.full-media > * {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.pack-sticky-title {
  margin-bottom: 0;
  color: rgb(var(--color-black));
  pointer-events: none;
  z-index: 990;
  padding-top: var(--margin-8);
  font-size: clamp(22px, 9.5vw, 45px);
}
.pack-sticky-title .pack-sticky-title-box {
  background: rgb(var(--color-pink));
  height: var(--margin-3);
  border: 2px solid rgb(var(--color-pink));
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 0 var(--margin-8);
}
.pack-sticky-title.modular-title {
  position: absolute;
  font-size: clamp(16px, 2.5vw, 45px);
  top: 0;
  height: calc(var(--margin-8) + var(--margin-3));
  left: calc(var(--margin-8) + var(--margin-3));
}
@media only screen and (max-width: 992px) {
  .pack-sticky-title.modular-title {
    display: none;
  }
}
.pack-sticky-title.mobile-title {
  padding-bottom: 0.1em;
  margin-bottom: 1em;
  line-height: 0.8em;
}
@media only screen and (max-width: 768px) {
  .pack-sticky-title.mobile-title {
    margin-bottom: var(--margin-4);
  }
}
@media only screen and (min-width: 992px) {
  .pack-sticky-title.mobile-title {
    display: none;
  }
}
@media only screen and (max-width: 992px) {
  .pack-sticky-title.desktop-title {
    display: none;
  }
}
@media only screen and (max-width: 992px) {
  .pack-sticky-title {
    margin-top: var(--margin-8);
    left: calc(var(--margin-8) + var(--margin-3));
    padding: var(--margin-8);
    color: rgb(var(--color-black));
    background: rgb(var(--color-pink));
  }
}
@media only screen and (min-width: 992px) {
  .pack-sticky-title {
    margin-top: 100vh;
    padding-top: var(--margin-8);
  }
}

.pack-content-price {
  font-family: var(--font-content);
  font-weight: 400;
  line-height: 1em;
  font-size: clamp(16px, 0.9em, 24px);
}
@media only screen and (max-width: 992px) {
  .pack-content-price {
    margin-top: 0.4em;
  }
}

.pack-content-details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--margin-8);
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 992px) {
  .pack-content-details {
    margin-left: var(--margin-8);
    justify-content: center;
  }
}

@media only screen and (min-width: 992px) {
  .pack-resume-firestarter .word-switch {
    text-align: center;
  }
}
.pack-content-details-block {
  width: calc(50% - var(--margin-8) / 2);
  max-width: 360px;
}
@media only screen and (max-width: 768px) {
  .pack-content-details-block {
    width: 100%;
  }
}
.pack-content-details-block h3 {
  font-size: 1.15em;
  margin-bottom: 0.5em;
  font-weight: 600;
}
@media only screen and (min-width: 992px) {
  .pack-content-details-block h3 {
    margin-top: var(--margin-8);
  }
}
@media only screen and (max-width: 768px) {
  .pack-content-details-block h3 {
    margin-top: 0.5em;
  }
}
.pack-content-details-block ul {
  list-style: square;
  margin-left: 0.9em;
}
.pack-content-details-block ul li {
  padding: 0.25em 0.5em;
  padding-right: 0;
}

.pack-content-buttons {
  margin-top: var(--margin-3);
  text-align: center;
  font-size: 1.1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
@media only screen and (max-width: 992px) {
  .pack-content-buttons {
    margin-top: var(--margin-6);
    flex-direction: row;
    align-items: start;
    flex-wrap: wrap;
  }
}
@media only screen and (max-width: 768px) {
  .pack-content-buttons {
    justify-content: center;
  }
}
.pack-content-buttons .btn-third,
.pack-content-buttons .btn-secondary {
  text-transform: uppercase;
}
@media only screen and (min-width: 992px) {
  .pack-content-buttons .btn-third,
  .pack-content-buttons .btn-secondary {
    margin-top: 1em;
  }
}

.process-steps {
  padding: var(--logo-offset);
}

.process-steps-container {
  display: flex;
  gap: var(--margin-8);
}

.process-step {
  transition: all 0.3s ease-in;
  overflow: hidden;
  background: rgb(var(--color-red));
  color: rgb(var(--color-pink));
  width: 33.3333333333%;
  aspect-ratio: 1/1;
}
.process-step .wrapper {
  margin-left: calc(var(--margin-8) / 2);
  background: rgb(var(--color-red));
  padding: var(--margin-8);
  padding-left: 0;
  min-height: 100%;
  color: rgb(var(--color-pink));
}
.process-step .process-step-number {
  font-size: var(--margin-3);
  font-family: var(--font-special);
  float: left;
  margin-right: var(--margin-8);
  margin-left: -0.1em;
  height: 100%;
}
/*
.process-steps-container:not(:hover) .first-step,
.first-step:hover {
  flex: 1;
  h3,
  p,
  .process-step-cta {
    display: block;
  }

}

.second-step:hover {
  flex: 1;
  h3,
  p,
  .process-step-cta {
    display: block;
  }
}

.third-step:hover {
  flex: 1;
  h3,
  p,
  .process-step-cta {
    display: block;
  }
}
*/
.home-scroll-section {
  --column-gap: calc(var(--margin-8) / 2);
  --row-gap: var(--margin-8);
}
.home-scroll-section > .wrapper {
  position: relative;
  align-items: start;
  padding: calc(50vh - var(--logo-size) / 2) var(--logo-offset);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: var(--column-gap);
  grid-row-gap: var(--row-gap);
  padding-bottom: calc(var(--margin-3));
}
@media only screen and (max-width: 1200px) {
  .home-scroll-section > .wrapper {
    padding-right: var(--margin-3);
    padding: var(--margin-8);
  }
}
@media only screen and (max-width: 992px) {
  .home-scroll-section > .wrapper {
    display: flex;
  }
}
@media only screen and (max-width: 768px) {
  .home-scroll-section > .wrapper {
    display: inherit;
  }
}
.home-scroll-section .modular {
  min-height: inherit;
  height: inherit;
  padding: 0;
  overflow: visible;
}
.home-scroll-section .modular > .wrapper {
  padding: 0;
}
.home-scroll-section .home-logo-banner {
  height: inherit;
}
@media only screen and (min-width: 768px) {
  .home-scroll-section .pack-list {
    margin-top: 50vh;
  }
}
@media only screen and (max-width: 768px) {
  .home-scroll-section .pack-list {
    margin: var(--margin-3) 0;
  }
}

.home-banner-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.home-highlighted-pack {
  position: sticky;
  top: calc(50vh - 18%);
  max-width: var(--pack-max-width);
  margin-left: auto;
}
@media only screen and (max-width: 992px) {
  .home-highlighted-pack {
    margin-left: 0;
    flex: inherit;
    max-width: var(--logo-size);
  }
}
@media only screen and (max-width: 768px) {
  .home-highlighted-pack {
    position: relative;
    max-width: 100%;
    top: 100vh;
  }
}

.home-scroll-section-content {
  grid-area: 1/2/4/4;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-column-gap: var(--column-gap);
  grid-row-gap: var(--row-gap);
}
.home-scroll-section-content #logo-animation {
  grid-area: 1/1/2/2;
  min-height: 100vh;
}
.home-scroll-section-content .modular > .wrapper {
  font-size: 1.125em;
}
.home-scroll-section-content .service-header-content {
  grid-area: 2/1/3/3;
  margin-left: var(--margin-8);
}
.home-scroll-section-content .service-header-content h3 {
  font-family: var(--font-special);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 600;
}
.home-scroll-section-content .service-header-content .service-header-list-title {
  font-weight: 600;
  margin-bottom: 0.25em;
}
.home-scroll-section-content .service-header-content ul {
  list-style: "·";
  padding-left: 0.5em;
  margin-bottom: 1em;
}
.home-scroll-section-content .service-header-content ul li {
  padding-left: 0.5em;
  margin: 0.25em 0;
}
.home-scroll-section-content .pack {
  grid-area: 3/1/4/3;
}

#focstudio-logo {
  --duration: .3s;
  transition: transform var(--duration) ease, opacity var(--duration) ease; /* Ajoute une transition pour le logo */
  transform-origin: left center; /* Fixe l'origine de la transformation sur le bord gauche */
  transform: perspective(200px) rotateY(0deg) translateY(-50%) translateX(-50%);
  width: 28vw;
  position: fixed;
  top: 50vh;
  left: 50%;
}
@media only screen and (max-width: 1200px) {
  #focstudio-logo {
    width: 35vw;
  }
}
@media only screen and (max-width: 768px) {
  #focstudio-logo {
    width: 40vw;
  }
}
@media only screen and (max-width: 576px) {
  #focstudio-logo {
    width: 60vw;
  }
}

.home-highlighted-pack {
  --duration: .3s;
  /*opacity: 0; !* Cache la boîte noire au départ *!
  transform-origin: right center; !* Fixe l'origine de la transformation sur le bord gauche *!
  transform: perspective(200px) rotateY(-90deg);*/
  transition: opacity var(--duration) ease, transform var(--duration) ease; /* Ajoute une transition pour la boîte noire */
  background-size: cover;
  background-position: bottom center;
  transform: scale(0.8) translateY(var(--logo-offset));
  opacity: 1;
  transform-origin: center right;
  transform: perspective(400px) rotateY(-90deg);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 5;
}
@media only screen and (max-width: 768px) {
  .home-highlighted-pack {
    z-index: 110;
  }
}

.game .option:before, .game .option:after {
  content: "";
  pointer-events: none;
  position: absolute;
  display: block;
  box-sizing: border-box;
  translate: -50% -50%;
  left: 50%;
  top: 50%;
  border-radius: 100vw;
  opacity: 0;
  z-index: -1;
  background-color: rgba(var(--color-red), 0.3);
}
.game .option:before {
  width: var(--margin-full);
  height: var(--margin-full);
  animation: pulse-ring-option 6s cubic-bezier(0.215, 0.61, 0.355, 1) infinite var(--pulse-delay);
}
.game .option:after {
  display: block;
  width: var(--margin-half);
  height: var(--margin-half);
  animation: pulse-ring-option 6s cubic-bezier(0.215, 0.61, 0.355, 1) infinite var(--pulse-second-delay);
}
.game .option.paper {
  --pulse-delay: 1s;
  --pulse-second-delay: 1.25s;
}
.game .option.rock {
  --pulse-delay: 3s;
  --pulse-second-delay: 3.25s;
}
.game .option.scissors {
  --pulse-delay: 5s;
  --pulse-second-delay: 5.25s;
}
@keyframes pulse-ring-option {
  0% {
    opacity: 1;
    scale: 0.1;
  }
  50%, 55% {
    opacity: 0;
  }
}

.supplement-pack-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(var(--color-black), 0.2);
  color: rgb(var(--color-pink));
  align-content: center;
  padding: var(--margin-3);
  z-index: 999;
  display: none;
}
@media only screen and (max-width: 992px) {
  .supplement-pack-popup {
    padding: var(--margin-8);
  }
}
.supplement-pack-popup > .wrapper {
  background: rgba(var(--color-black), 1);
  max-width: 800px;
  margin: auto;
  padding: var(--margin-3);
  position: relative;
}
@media only screen and (max-width: 992px) {
  .supplement-pack-popup > .wrapper {
    padding: var(--margin-8);
  }
}
.supplement-pack-popup .icon-foc-close, .supplement-pack-popup .mobile-navigation-opened #navigation, .mobile-navigation-opened .supplement-pack-popup #navigation {
  position: absolute;
  top: 0;
  right: 0;
  font-size: var(--margin-8);
  display: flex;
  line-height: 0.5em;
  padding: var(--margin-8);
  cursor: pointer;
}
.supplement-pack-popup .supplement-pack-popup-buttons {
  margin-top: var(--margin-8);
  display: flex;
}
@media only screen and (max-width: 768px) {
  .supplement-pack-popup .supplement-pack-popup-buttons {
    flex-direction: column;
    align-items: start;
  }
}
.supplement-pack-popup .bt-primary {
  background: rgb(var(--color-pink));
  border-color: rgb(var(--color-pink));
  color: rgb(var(--color-black));
  display: flex;
  align-items: center;
  font-size: 1.1em;
}
.supplement-pack-popup .bt-primary em {
  font-family: var(--font-content);
  font-size: 0.75em;
}
.supplement-pack-popup .bt-primary:hover {
  box-shadow: 0px 0px 0px 3.5px rgb(var(--color-black)) inset, 0px 0px 0px 3px rgb(var(--color-pink));
}
.supplement-pack-popup .phone-button {
  color: rgb(var(--color-pink));
  margin-left: 0.5em;
  display: flex;
  align-items: center;
  font-size: 1.1em;
}
.supplement-pack-popup .phone-button:hover {
  box-shadow: 0px 0px 0px 2.5px rgb(var(--color-black)) inset, 0px 0px 0px 3px rgb(var(--color-pink));
}
.supplement-pack-popup .bt-third {
  padding: var(--margin-8);
  gap: 0.5em;
  font-size: 0.9em;
  color: rgb(var(--color-pink));
  font-family: var(--font-content);
  font-weight: 400;
  align-self: end;
}
@media only screen and (min-width: 992px) {
  .supplement-pack-popup .bt-third {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
  }
}
.supplement-pack-popup .bt-third .icon, .supplement-pack-popup .bt-third .mobile-navigation-opened #navigation, .mobile-navigation-opened .supplement-pack-popup .bt-third #navigation {
  font-size: 0.9em;
  transform: translateX(0%) translateY(0.25em);
}

.btn-secondary .btn-hover-message {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  background: yellow;
}

.btn-fire {
  background: rgb(var(--color-black));
  z-index: 100;
  font-weight: bold;
  color: rgb(var(--color-pink));
  box-shadow: none;
  transition: none;
  pointer-events: all;
  cursor: pointer;
}

@media only screen and (max-width: 992px) {
  #catch-the-flame {
    display: none;
  }
}

.game-catch-it > .wrapper {
  margin: var(--margin-8);
  position: relative;
}
@media only screen and (max-width: 992px) {
  .game-catch-it > .wrapper {
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 992px) {
  .game-catch-it > .wrapper {
    padding-top: calc(var(--margin-3) + var(--margin-8) * 2);
    height: calc(100vh - var(--margin-3) - var(--margin-8) * 3);
  }
}
.game-catch-it svg {
  display: none;
}
.game-catch-it #game-catch-it {
  width: 100%;
  position: relative;
}
@media only screen and (min-width: 992px) {
  .game-catch-it #game-catch-it {
    height: 100vh;
  }
}
.game-catch-it .not-catchable-container {
  min-height: 45vh;
  margin: 0 var(--margin-3);
  position: relative;
}
.game-catch-it .modular-game-title {
  font-size: clamp(20px, 3.5vw, 60px);
  text-align: center;
}
@media only screen and (max-width: 992px) {
  .game-catch-it .modular-game-title {
    font-size: clamp(1rem, var(--font-size-title) * 0.6, var(--font-size-title));
  }
}
.game-catch-it .flame-spacing {
  position: absolute;
  padding: 20px;
  top: 70%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.game-catch-it #flame-to-catch {
  cursor: pointer;
  display: block;
}
.game-catch-it img {
  width: 100px;
  max-height: 100px;
  object-fit: contain;
}
.game-catch-it .catchable-container {
  text-align: center;
  margin-top: var(--margin-half);
}
.game-catch-it .catchable-text {
  display: none;
  z-index: 100;
  position: absolute;
  width: 45vw;
  left: 50%;
  text-wrap: balance;
  transform: translateX(-50%) translateY(calc(var(--margin-half) * -1));
}

.pack-game {
  min-height: 100vh;
  background: rgb(var(--color-pink));
  position: relative;
  z-index: 994;
}

.fire-button-container {
  pointer-events: none;
  position: relative;
}
.fire-button-container .fire {
  display: inline-block;
  position: relative;
  padding: 15px 0;
}
.fire-button-container .fire:hover .fire-container {
  opacity: 1;
}
.fire-button-container .fire:hover .catch-flame-button {
  background: rgb(var(--color-red));
  border-color: rgb(var(--color-red));
}
.fire-button-container .catch-flame-button {
  font-family: var(--font-special);
  border: 2px solid rgb(var(--color-black));
  padding: 1em 2em;
  text-transform: uppercase;
  background: rgb(var(--color-black));
  z-index: 100;
  color: rgb(var(--color-pink));
  white-space: nowrap;
  pointer-events: all;
}
.fire-button-container .fire-container {
  filter: url(#goo);
  transition: all 0.3s ease;
  z-index: 100;
  height: 280px;
  position: absolute;
  overflow: hidden;
  width: 100%;
  left: 50%;
  bottom: 1.75em;
  translate: -50% 0;
  opacity: 0;
  pointer-events: none;
}
.fire-button-container .particle {
  position: absolute;
  height: 80px;
  background: rgb(var(--color-red));
  border-radius: 100%;
  display: block;
  margin-right: auto;
  left: 50%;
  bottom: 0;
  width: 40%;
  translate: -80% 0;
}
.fire-button-container .particle:nth-child(1) {
  animation: firecircle 1.4s 0.14s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 63px;
  margin-bottom: -35px;
}
.fire-button-container .particle:nth-child(2) {
  animation: firecircle 1.4s 0.28s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 10px;
  margin-bottom: -17px;
}
.fire-button-container .particle:nth-child(3) {
  animation: firecircle 1.4s 0.42s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 51px;
  margin-bottom: -18px;
}
.fire-button-container .particle:nth-child(4) {
  animation: firecircle 1.4s 0.56s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 59px;
  margin-bottom: -31px;
}
.fire-button-container .particle:nth-child(5) {
  animation: firecircle 1.4s 0.7s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 64px;
  margin-bottom: -38px;
}
.fire-button-container .particle:nth-child(6) {
  animation: firecircle 1.4s 0.84s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 8px;
  margin-bottom: -20px;
}
.fire-button-container .particle:nth-child(7) {
  animation: firecircle 1.4s 0.98s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 4px;
  margin-bottom: -33px;
}
.fire-button-container .particle:nth-child(8) {
  animation: firecircle 1.4s 1.12s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 20px;
  margin-bottom: -37px;
}
.fire-button-container .particle:nth-child(9) {
  animation: firecircle 1.4s 1.26s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 26px;
  margin-bottom: -30px;
}
.fire-button-container .particle:nth-child(10) {
  animation: firecircle 1.4s 1.4s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 60px;
  margin-bottom: -32px;
}
.fire-button-container .particle:nth-child(11) {
  animation: firecircle 1.4s 1.54s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 3px;
  margin-bottom: -40px;
}
.fire-button-container .particle:nth-child(12) {
  animation: firecircle 1.4s 1.68s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 27px;
  margin-bottom: -34px;
}
.fire-button-container .particle:nth-child(13) {
  animation: firecircle 1.4s 1.82s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 26px;
  margin-bottom: -40px;
}
.fire-button-container .particle:nth-child(14) {
  animation: firecircle 1.4s 1.96s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 45px;
  margin-bottom: -29px;
}
.fire-button-container .particle:nth-child(15) {
  animation: firecircle 1.4s 2.1s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 3px;
  margin-bottom: -32px;
}
.fire-button-container .particle:nth-child(16) {
  animation: firecircle 1.4s 2.24s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 49px;
  margin-bottom: -22px;
}

@keyframes fireMoving {
  0% {
    transform: translateX(-70%) translateY(0%);
  }
  100% {
    transform: translateX(-46%) translateY(0%);
  }
}
@keyframes firecircle {
  0% {
    transform: translateY(0) scale(1);
    background: rgb(var(--color-red));
  }
  100% {
    transform: translateY(-175px) scale(0);
    opacity: 1;
    background: rgb(var(--color-pink));
  }
}
.cta-container {
  text-align: center;
  margin-top: var(--margin-8);
}

.modular .devil-container {
  text-align: center;
  margin-top: var(--margin-4);
}
.modular .devil-container .devil-pact-button {
  font-family: var(--font-special);
  border: 2px solid rgb(var(--color-black));
  padding: 1em 2em;
  text-transform: uppercase;
  background: rgb(var(--color-black));
  z-index: 100;
  color: rgb(var(--color-pink));
  white-space: nowrap;
  pointer-events: all;
  text-decoration: none;
  display: inline-block;
}

.devil-container:hover .devil-pact-image {
  pointer-events: none;
}
.devil-container:hover .devil-pact-image img {
  transition: all 1.15s cubic-bezier(1, 0.4, 1, 0.6);
  transform: translateX(0%) translateY(15%);
}
.devil-container:hover .devil-pact-button {
  background: rgb(var(--color-red));
  border-color: rgb(var(--color-red));
}

.devil-pact-image {
  max-width: 100px;
  position: absolute;
  left: 50%;
  transform: translateX(-100%) translateY(-90%);
  overflow-y: hidden;
}
.devil-pact-image img {
  max-width: 100%;
  transform: translateX(0%) translateY(100%);
  transition: all 0.3s ease-in;
}

.devil-pact-text {
  display: none;
  z-index: 10;
  position: absolute;
  width: 45vw;
  left: 50%;
  text-wrap: balance;
  transform: translateX(-50%) translateY(0%);
}

.display-bg-video {
  position: absolute;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center bottom;
  z-index: 10;
  background-color: transparent;
  top: 0;
  pointer-events: none;
  left: 0;
}
@media only screen and (max-width: 768px) {
  #videoDisplay .display-bg-video {
    height: 70vh;
  }
}

.solutions-section {
  background-color: #ff99ff; /* Rose */
  color: #ff3600; /* Rouge */
  position: relative;
  padding: 2rem 0;
  overflow: clip;
}

.title {
  transform: translateY(25vh);
  color: rgb(var(--color-black));
  position: sticky;
  top: 200px;
  transform-style: preserve-3d;
  opacity: 0;
}
.title > * {
  display: inline-block;
  transform-origin: 100% 100%;
  transform: translate3d(0px, 0px, 0px) rotate(352deg) rotateY(33deg) rotateX(355deg) skew(-7.3495deg, 0deg) scale(1.0747, 0.9884);
  transform: translate3d(0px, 0px, 0px) rotate(5deg) rotateY(20.7184deg) rotateX(-0.114deg) skew(21deg, 358deg) scale(1.0301, 0.9946);
}

.bands {
  display: flex;
  width: 100vw;
  position: fixed;
  top: 0;
  z-index: 5;
  pointer-events: none;
}

.band-box {
  flex: 1;
  display: flex;
}

.red-bands {
  z-index: 5;
}
.red-bands .band {
  height: 100vh;
  width: 0;
  background: #ff3600;
  margin: auto;
}

.pink-bands {
  z-index: 15;
  flex-direction: column;
  height: 100vh;
}
.pink-bands .band {
  height: 0;
  width: 100%;
  background: #ff99ff;
  margin-top: auto;
}

.products {
  opacity: 1;
  min-height: 80vh;
  z-index: 5;
  color: black;
  position: sticky;
  margin-top: 90vh;
  top: calc(var(--logo-offset) * 2);
}

.products-title {
  margin: var(--margin-8);
  transform: translateY(200px);
  opacity: 0;
  font-family: var(--font-special);
  font-size: clamp(30px, 3.2vw, 72px);
  color: rgb(var(--color-pink));
  text-wrap: balance;
  text-align: center;
}
@media only screen and (min-width: 992px) {
  .products-title {
    margin: 0 var(--logo-offset);
    margin-bottom: var(--margin-8);
  }
}

.products-wrapper {
  display: flex;
  gap: var(--margin-8);
  padding: var(--margin-8);
}
@media only screen and (min-width: 992px) {
  .products-wrapper {
    justify-content: center;
  }
}
@media only screen and (max-width: 768px) {
  .products-wrapper {
    flex-direction: column;
  }
}

.citation {
  text-align: center;
}
.citation .wrapper {
  padding: var(--margin-8);
}
@media only screen and (max-width: 768px) {
  .citation .wrapper {
    padding-right: calc(var(--margin-8) * 2);
  }
}
@media only screen and (min-width: 992px) {
  .citation .wrapper {
    max-width: calc(100vw - var(--logo-offset) - var(--margin-3));
    margin: var(--logo-offset);
    margin-right: var(--margin-3);
  }
}
.citation blockquote {
  font-family: var(--font-special);
  color: rgb(var(--color-red));
  font-size: clamp(24px, 3.2vw, 72px);
  line-height: 0.9em;
  letter-spacing: -0.03em;
  text-wrap: balance;
  text-align: left;
}
@media only screen and (max-width: 768px) {
  .citation blockquote {
    font-size: clamp(20px, 9vw, 72px);
    margin-top: var(--margin-3);
  }
  .citation blockquote span {
    display: block;
  }
}
.citation blockquote span {
  color: rgb(var(--color-black));
}

.citation-author {
  margin-top: var(--margin-8);
}
@media only screen and (max-width: 768px) {
  .citation-author {
    text-align: right;
  }
}
@media only screen and (min-width: 768px) {
  .citation-author {
    transform: translateX(100%) translateY(0%);
    text-align: center;
    display: inline-block;
  }
}

#rgpd-ask-popin {
  color: rgb(var(--color-black));
  padding: 0;
}

#rgpd-ask-popin .wrapper {
  padding: var(--margin-8);
  background: rgba(var(--color-red), 1);
  box-shadow: none;
}

#rgpd-ask-popin .content {
  height: auto;
  padding: 0;
}

#rgpd-ask-popin .links {
  align-self: inherit;
}