@import url('https://fonts.googleapis.com/css2?family=Pattaya&display=swap');

:root {
  /* WebSite Theme Colors */
  --misty-rose: #FEDFDFff;
  --misty-rose-2: #FEE5E5ff;
  --seashell: #FDEEEBff;
  --snow: #FFF4F4ff;
  --snow-2: #FEF8F9ff;

  /* Dark Colors */
  --night: #0D0B0Cff;
  --eerie-black: #1F1D1Eff;
  --jet: #302E2Fff;
  --onyx: #444243ff;

  /* Orange Colors */
  --ochre: #C27400ff;
  --harvest-gold: #DD9513ff;
  --sunglow: #FFC646ff;

  /* LinearGradient |ASSET| */
  --lg-b-var-1: to right, rgba(194, 116, 0, 1) 0%, rgba(255, 198, 70, 1) 48%, rgba(221, 149, 19, 1) 100%;
  --lg-b-var-2: to left, rgba(255, 198, 70, 1) 0%, rgba(194, 116, 0, 1) 51%, rgba(221, 149, 19, 1) 98%;
  --lg-b-var-3: to right, rgba(221, 149, 19, 1) 0%, rgba(194, 116, 0, 1) 48%, rgba(255, 198, 70, 1) 100%;

  /* BoxShadow |ASSET| */
  --bs-var-1: rgba(0, 0, 0, 0.2) 0px 16px 10px -2px;
}

body {
  background-color: var(--snow);
  width: 100%;
  font-family: "Pattaya", serif;
  font-weight: 400;
  font-style: normal;
}

/* <Title |TEXT| */

h1,
h2,
h3 {
  color: #842034ce;
}

.h1-me {
  font-size: min(72px, 12vw);
}

.h2-me {
  font-size: min(64px, 10vw);
}

.h1-me,
.h2-me,
.h3-me {
  -webkit-text-stroke: 0.8px var(--harvest-gold);
  transition: 0.5s;

  strong {
    font-weight: normal;
    color: #842034;
    -webkit-text-stroke: 1.5px var(--harvest-gold);
  }

  &:hover {
    color: #842034;
  }
}

/* Title> */

.img-border-lg {
  position: relative;
  margin: 0 7vw;
  width: calc(100% - 14vw);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;

  a {
    display: flex;
    justify-content: center;
    text-decoration: none;
    width: min(400px, 100%);
    border-radius: 100%;
    z-index: 2;
  }

  img {
    border-radius: 100%;
    width: min(400px, 100%);
    height: min(400px, 100%);
    background: var(--seashell);
    overflow: hidden;
    object-fit: cover;
    z-index: 1;
  }

  &::before {
    content: "";
    position: absolute;
    width: min(408px, calc(100% + 8px));
    height: min(408px, calc(100% + 8px));
    border-radius: 100%;
    background: linear-gradient(var(--lg-b-var-1));
    box-shadow: var(--bs-var-1);
    z-index: -1;
  }
}

div.confetti {
  z-index: -1;
  position: absolute;
  top: 0;
  transform: rotate(180deg);
  object-fit: cover;
  width: 100%;
  height: 150px;
  background: url(../img/asset/Confetti.png) center;
  background-size: cover;

  &.confetti-inv {
    top: auto;
    bottom: 0;
    transform: rotate(0deg) !important;
  }
}

div.sep-lg {
  width: 100%;
  height: min(150px, 10vh);
  background: linear-gradient(180deg, rgba(255, 244, 244, 1) 0%, rgba(254, 223, 223, 1) 100%);
}

div.sep-lg-inverse {
  width: 100%;
  height: min(150px, 10vh);
  background: linear-gradient(0deg, rgba(255, 244, 244, 1) 0%, rgba(254, 223, 223, 1) 100%);
}

header {
  position: relative;

  nav {
    padding-top: 32px;

    >div,
    >ul {
      display: flex;
      align-items: center;
      position: relative;
      border-radius: 16px;
      background: linear-gradient(var(--lg-b-var-1));
      box-shadow: var(--bs-var-1);
      padding: 16px;
      height: 64px;
      z-index: 1;

      &::before {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        border-radius: 14px;
        background: var(--snow-2);
        z-index: -1;
      }
    }

    .btn-bg-menu {
      padding: 4px 16px;

      div.line {
        border-radius: 15px;
        height: 3px;
        width: 32px;
        background: linear-gradient(var(--lg-b-var-1));
      }
    }

    ul {
      padding: 0;
      margin: 0;
      display: flex;
      gap: 12px;

      li {
        list-style: none;

        a {
          position: relative;
          padding-bottom: 8px;
          font-size: 24px;
          color: var(--night);
          text-decoration: none;
          transition: 0.3s ease;

          &:hover {
            &::after {
              width: 100%;
            }
          }

          &::after {
            content: "";
            position: absolute;
            width: calc(100% - 24px);
            height: 2px;
            bottom: 0px;
            border-radius: 8px;
            left: 0;
            background: linear-gradient(var(--lg-b-var-1));
            transition: 0.3s ease;
          }
        }
      }
    }

    >ul {
      display: none;
      visibility: hidden;
    }

    .burger-menu {
      all: unset;
      position: fixed;
      top: 0;
      z-index: 10;
      height: 100vh;
      width: 100%;
      background: var(--harvest-gold);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      right: 100%;
      transition: 0.5s ease;

      &::before {
        all: unset;
      }

      svg.close-icon {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 22px;
        height: 22px;
      }

      ul {
        display: flex;
        flex-direction: column;
        padding: 48px 24px;
        background: var(--eerie-black);
        border-radius: 16px;

        a {
          color: var(--snow-2);
        }
      }

      div.reseaux__container {
        display: flex;
        gap: 12px;

        a {
          text-decoration: none;

          svg {
            width: 29px;
            height: 29px;
          }
        }
      }
    }

    .burger-menu.open {
      right: 0;
    }

    div.email {
      display: flex;
      align-items: center;

      svg {
        width: 35px;
      }
    }
  }

  h1 {
    margin: 24px 7vw;
    padding-bottom: 64px;
    text-align: center;
  }

  .carousel {
    position: relative;
    height: 250px;
    width: 100%;
    overflow: hidden;
    background: linear-gradient(var(--lg-b-var-1));

    .carousel__container {
      position: relative;
      display: flex;
      transition: transform 0.5s ease-in-out;

      .carousel__item {
        display: flex;
        justify-content: center;
        align-items: center;
        clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%);

        img {
          height: 250px;
          width: 250px;
          object-position: center;
          object-fit: cover;
        }
      }

      .carousel__item.even {
        clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
      }

      .carousel__item.odd {
        clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%);
      }
    }
  }
}

main {
  position: relative;
  display: flex;
  flex-direction: column;

  >div.text__container {
    background: var(--misty-rose);
    display: flex;
    flex-direction: column;
    gap: min(24px, 1vh);
    padding: min(128px, 8vh) 0 0;

    p {
      font-size: min(48px, 5vh);
      margin: 0 14vw;
      width: calc(100% - 28vw);
      text-align: center;

      &:nth-of-type(1) {
        color: #0097b2d5;

        strong {
          color: #0097B2;
        }
      }

      &:nth-of-type(2) {
        color: #fb38b0c7;

        strong {
          color: #FB38B0;
        }
      }

      &:nth-of-type(3) {
        color: #5e17ebc2;

        strong {
          color: #5E17EB;
        }
      }

      strong {
        font-weight: normal;
      }
    }
  }

  section {
    background: var(--misty-rose);

    div.title__container {
      margin: 0 min(64px, 6vw);
      width: calc(100% - min(128px, 12vw));
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 50vh;
      z-index: 2;

      img {
        opacity: 0.50 !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        z-index: -1;
      }

      h2 {
        text-align: center;
        width: 75vw;
        position: relative;
        z-index: 2;
      }
    }
  }
}

section#surprise {
  position: relative;
  background: var(--misty-rose);

  >p {
    text-align: center;
    margin: 0 12vw 64px;
    font-size: min(36px, 6vw);
    color: #842034;

    strong {
      font-weight: normal;
      position: relative;
      z-index: 2;

      &::before {
        content: "";
        background: url("../img/asset/Trace_or.png") center;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        background-size: cover;
        filter: brightness(1.35);
        opacity: 0.45;
      }
    }
  }

  div.description__container {
    position: relative;
    z-index: 3;
    background: var(--snow-2);
    text-align: center;
    padding: 64px min(90px, 6vw);
    margin-bottom: 128px;
    border-width: 4px;
    border-right: 0px;
    border-left: 0px;
    border-style: solid;
    border-image: linear-gradient(var(--lg-b-var-1)) 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;

    div.description {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: var(--misty-rose-2);
      border-radius: 16px;
      border: 2px solid var(--eerie-black);
      padding: 24px;
      max-width: 345px;
      height: 250px;

      strong {
        padding: 0 24px;
        font-size: min(32px, 8vw);
        font-weight: normal;
        position: relative;
        z-index: 2;

        &::before {
          content: "";
          background: url("../img/asset/Trace_or.png") center;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          right: 0;
          z-index: -1;
          background-size: cover;
          filter: brightness(1.35);
          opacity: 0.45;
        }
      }

      p {
        color: #842034;
        font-size: min(24px, 6vw);
      }

      &:nth-of-type(1) {
        strong {
          color: #0097B2;
        }
      }

      &:nth-of-type(2) {
        strong {
          color: #FB38B0;
        }
      }

      &:nth-of-type(3) {
        strong {
          color: #5E17EB;
        }
      }
    }
  }

  div.confetti {
    z-index: 2;
  }
}

section#chest,
section#theme {
  position: relative;

  div.confetti {
    z-index: 1;
    transform: rotateX(180deg);
  }

  div.title__container {
    flex-direction: column;
    height: fit-content;

    >p {
      text-align: center;
      margin-top: 32px;
      font-size: min(36px, 6vw);
      color: #842034;

      strong {
        font-weight: normal;
        position: relative;
        z-index: 3;

        &::before {
          content: "";
          background: url("../img/asset/Trace_or.png") center;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: -1;
          background-size: cover;
          filter: brightness(1.35);
          opacity: 0.45;
        }
      }
    }
  }

  div.chest-content__container,
  div.theme-content__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    background: var(--snow);
    padding-bottom: 64px;

    div.img-border-lg {
      margin-top: 0 !important;
    }

    article {
      margin: 0 min(24px, 6vw);
      min-height: 650px;

      div.title__container {
        gap: 12px;
        align-items: start;
        margin: 24px 0 0;

        h4 {
          color: #842034;
          font-size: min(36px, 6vw);

          strong {
            font-weight: normal;
            position: relative;
            z-index: 3;

            &::before {
              content: "";
              background: url("../img/asset/Trace_or.png") center;
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
              z-index: -1;
              background-size: cover;
              filter: brightness(1.35);
              opacity: 0.45;
            }
          }
        }

        p {
          margin: 0;
          text-align: left;
        }

        p:nth-of-type(1) {
          font-size: min(28px, 5.5vw);
          color: #842034b2;

          strong {
            font-size: min(36px, 6vw);
            color: #842034;
          }
        }

        ul {
          margin-bottom: 0;

          li {
            font-size: min(36px, 6vw);
            color: #842034;
          }
        }

        p:last-of-type {
          font-size: min(28px, 3vh);
        }
      }

      p.price {
        margin-bottom: 0;
        font-size: min(28px, 5.5vw);
        text-align: center;
        color: #842034b2;

        strong {
          color: #842034;
        }
      }
    }

    div.line {
      height: 2px;
      width: min(800px, 90vw);
      background: #842034;
    }
  }

  div.theme-content__container {
    background: var(--misty-rose);
    margin: 64px 0;

    article {
      min-height: auto;

      .text__container {
        text-align: center;

        .title__container p {
          color: #842034b2;
        }
      }
    }
  }
}

section#options {
  position: relative;
  padding-bottom: 128px;

  div.title__container {
    height: fit-content;

    p {
      text-align: center;
      color: #842034;
      font-size: min(24px, 5vw);
    }
  }

  div.options__container {
    display: flex;
    flex-direction: column;
    align-items: center;

    >img {
      height: min(680px, 100%);
      width: min(680px, 100%);
    }

    div.img__wrap:nth-of-type(1) {
      background: url('../img/background/Taches-1.webp') center no-repeat;
      background-size: contain;
    }

    div.img__wrap:nth-of-type(2) {
      background: url('../img/background/Taches-2.webp') center no-repeat;
      background-size: contain;
    }

    div.img__wrap:nth-of-type(3) {
      background: url('../img/background/Taches-3.webp') center no-repeat;
      background-size: contain;
    }

    div.img__wrap:nth-of-type(4) {
      background: url('../img/background/Taches-4.webp') center no-repeat;
      background-size: contain;
    }

    div.img__wrap {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      height: min(1000px, 50vh);
      color: var(--snow);

      h3 {
        font-size: min(72px, 6vh);
        color: var(--snow);
      }

      >p {
        max-width: min(450px, 35vw);
        font-size: min(40px, 2vh);
        color: var(--snow);
      }
    }
  }

  div.title__container.help p {
    padding-bottom: 32px;
    font-size: min(48px, 10vh);

    a {
      text-decoration: none;
    }

    strong {
      white-space: wrap;
      word-wrap: break-word;
      hyphens: auto;
      color: #842034;
      position: relative;
      z-index: 2;

      &::before {
        content: "";
        background: url("../img/asset/Trace_or.png") center;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        background-size: cover;
        filter: brightness(1.35);
        opacity: 0.45;
      }
    }

    span {
      color: #C9193C;
      text-decoration: underline;
    }
  }

  div.confetti {
    z-index: 1;
    top: auto;
    bottom: 0;
    transform: rotate(0);
  }
}

section#formulaire {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  background: var(--snow);

  >div.confetti {
    z-index: 1;
    transform: rotateX(180deg);
  }

  >div.sep-lg-inverse {
    height: 28vh;
  }

  div.title__container {
    background: var(--snow);
    height: fit-content;
  }

  form {
    position: relative;
    align-self: center;
    display: flex;
    flex-direction: column;
    margin: 0 32px;
    max-width: 750px;
    width: calc(100% - 64px);

    div.bg-form {
      position: relative;
      display: flex;
      flex-direction: column;
      align-self: center;
      align-items: center;
      min-width: 50vw;
      gap: 12px;
      border-radius: 16px;
      background: linear-gradient(var(--lg-b-var-1));
      box-shadow: var(--bs-var-1);
      padding: 32px 24px;
      z-index: 1;

      &::before {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        border-radius: 14px;
        background: var(--misty-rose-2);
        z-index: -1;
      }

      p.description {
        font-size: 10px;
        color: var(--onyx);
        opacity: 0.5;
        margin-bottom: 0;
      }

      div.input__wrap {
        display: flex;
        gap: 18px;
        background: var(--snow-2);
        border-radius: 16px;
        border: 2px solid var(--eerie-black);
        padding: 12px;
        width: 100%;

        label {
          img {
            width: min(72px, 5vh);
            height: min(48px, 5vh);
          }

          strong {
            display: flex;
            align-items: center;
            text-align: start;
            white-space: nowrap;
            font-size: min(24px, 2.5vh);
            height: min(48px, 5vh);
          }
        }

        input {
          font-size: min(20px, 2.3vh);
          padding: 8px 12px 8px 2px;
          border-radius: 16px;
          background: none;
          border: none;
          outline: none;
          width: 100%;
          transition: 0.3s ease;

          &::placeholder {
            text-transform: capitalize;
          }

          &:focus {
            padding-left: 12px;
            outline: 2px solid var(--harvest-gold);
          }
        }
      }

      div.input__wrap:has(input.is-valid) {
        border: 2px solid green;
      }

      div.input__wrap:has(input.is-invalid) {
        border: 2px solid red;

        label {
          color: red;
        }
      }

      div.g-recaptcha.is-invalid-captcha #rc-anchor-container {
        border: 2px solid red !important;
        border-radius: 12px;

        &:hover {
          background-color: rgba(255, 0, 0, 0.199);
        }
      }



      hr {
        height: 2px;
        background: var(--night);
        opacity: 1;
        border-radius: 15px;
        margin: 0 32px;
        width: calc(100% - 64px);
      }
    }

    p.info-p {
      margin-top: 64px;
      color: #842034;
      font-weight: bold;
      letter-spacing: 1.1px;
      font-size: min(32px, 3vh);
    }

    div.submit__wrap {
      position: relative;
      display: flex;
      justify-content: center;
      align-self: flex-end;
      gap: 12px;
      border-radius: 28px;
      border: 2px solid var(--eerie-black);
      background: var(--seashell);
      box-shadow: var(--bs-var-1);
      max-width: 275px;
      width: calc(100% - 64px);
      padding: 12px;
      margin: 32px 0 64px;

      >div {
        position: relative;
        width: 40px;
        height: 40px;
      }

      input {
        background: linear-gradient(var(--lg-b-var-3));
        background-clip: text;
        /* Clip le gradient au texte */
        -webkit-text-fill-color: transparent;
        /* Rend le fond visible à travers le texte */
        border: none;
        outline: none;
        font-size: 32px;
      }

    }

  }

  div.title__container.help {
    margin: 0;
    padding: 0 32px;
    width: 100%;
    background: var(--misty-rose);
    display: flex;
    flex-direction: column;

    h2 {
      font-size: min(72px, 8vh);
    }

    div {
      width: 100%;
      display: flex;
      flex-direction: column;
      padding-bottom: 32px;
      font-size: min(48px, 5vh);
      flex-direction: column;
      white-space: wrap;
      word-wrap: break-word;
      hyphens: auto;

      span {
        color: #C9193C;
        text-decoration: underline;
      }

      a {
        display: block;
        color: #842034;
        text-decoration: none;
      }
    }
  }
}

footer {
  background: var(--jet);
  width: 100%;
  padding: 28px;

  div.content__wrap {
    display: flex;
    flex-direction: column;

    div.img-border-lg {
      a {
        text-decoration: none;
        width: min(132px, 100%);
        height: min(132px, 100%);
        border-radius: 100%;
        z-index: 1;

        img {
          width: min(132px, 100%);
          height: min(132px, 100%);
        }
      }

      &::before {
        width: min(140px, calc(100% + 8px));
        height: min(140px, calc(100% + 8px));
      }
    }

    p.description {
      text-align: center;
      color: var(--harvest-gold);
    }

    strong {
      position: relative;
      padding-bottom: 12px;
      display: block;
      color: var(--snow-2);
      font-size: 24px;
      font-weight: normal;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(var(--lg-b-var-1));
      }
    }

    div.links__container {
      display: grid;
      gap: 12px;
      justify-content: center;
      justify-items: center;
      margin: 12px 0;

      a {
        width: fit-content;
        color: var(--snow-2);
        font-size: 16px;
        font-weight: normal;
        text-align: center;
      }
    }

    div.socials__container {
      display: flex;
      justify-content: center;
      gap: 24px;
      margin: 12px 0;
    }
  }

  div.bottom__wrap {
    hr {
      opacity: 1;
      display: block;
      height: 1px;
      border-radius: 10px;
      background: var(--ochre);
      padding: 0 32px;
    }

    >p {
      text-align: center;
      font-size: 12px;
      color: var(--snow);
    }
  }
}



/* Media */

@media (min-width: 768px) {

  main >div.text__container p {
    &:nth-of-type(1) {
      text-align: left;
    }

    &:nth-of-type(2) {
      text-align: center;
    }

    &:nth-of-type(3) {
      text-align: end;
    }
  }

  div.confetti {
    background-size: 65%;
  }

  header {
    nav {
      div.btn-bg-menu {
        display: none !important;
        visibility: hidden;
      }

      >ul {
        display: flex;
        visibility: visible;
        padding: 0 24px;
      }
    }
  }
}

@media (min-width: 992px) {

  header .carousel .carousel__container .carousel__item img {
    width: 25vw;
  }

  div.confetti {
    background-size: 50%;
  }

  section#chest,
  section#theme {

    div.chest-content__container,
    div.theme-content__container {
      gap: 56px;

      article {
        display: flex;
        align-items: center;
        max-width: 1500px;

        >div {
          width: 50%;

          >div.title__container {
            width: 100%;
          }
        }

        .text__container {
          margin: 0 7vw;
        }
      }

      article:nth-of-type(even) {
        flex-direction: row-reverse;
      }
    }
  }

  section#options {
    div.options__container {

      div.img__wrap:nth-of-type(1),
      div.img__wrap:nth-of-type(2),
      div.img__wrap:nth-of-type(3),
      div.img__wrap:nth-of-type(4) {
        overflow: visible;
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: 75%;
      }

      div.img__wrap:nth-of-type(2) {
        background-size: 65%;
      }

      div.img__wrap:nth-of-type(3) {
        background-size: 58%;
      }

    }
  }

  footer {
    div.zone__container {
      display: flex;

      div.content__wrap {
        width: 100%;

        p.description {
          text-align: left;
        }

        strong::after {
          width: 25%;
        }

        div.links__container {
          height: 100%;
          display: grid;
          grid-template-columns: 50% 50%;
        }

        div.socials__container {
          justify-content: start;
        }
      }
    }
  }
}