:root {
  --color-terracotta: #e2725b;
  --color-brown: #2d2424;
  --color-silk: #f9f1f0;
  --color-white: #fff;

  --btn-padding-x: 1.5rem; /* px-6 */
  --btn-padding-y: 0.6rem; /* py-3 */
  --btn-radius: 0.5rem; /* rounded-lg */
  --btn-font-weight: 700; /* font-bold */
}

/*************************************/
/************* GENERAL ***************/
/*************************************/
html {
  /* scroll-snap-type: y mandatory; */
  scroll-behavior: smooth;
}

/* section {
  scroll-snap-align: start;
} */

body {
  font-family: "Montserrat", sans-serif;
}

h1,
h2 {
  font-family: "Italianno", serif;
  font-weight: 300;
}

p {
  font-size: 16px;
  font-weight: 300;
}

/*** TITRES ***/
.font-h1-clamp {
  font-size: clamp(50px, 8vw, 200px);
  line-height: clamp(50px, 6vw, 200px);
}

.font-h2-clamp {
  font-size: clamp(35px, 4vw, 100px);
  line-height: clamp(35px, 4vw, 100px);
}

.font-h3-clamp {
  font-size: clamp(20px, 3vw, 32px);
}

.container {
  max-width: clamp(200px, 80vw, 1200px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/*** BOUTONS ***/
.brown-btn {
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-radius);
  font-weight: var(--btn-font-weight);
  color: var(--color-white);
  background-color: var(--color-terracotta);
  border: 1px solid var(--color-terracotta);
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.brown-btn:hover {
  background-color: var(--color-silk);
  border: 1px solid var(--color-silk);
  color: var(--color-brown);
}

/**********************************/
/************* HERO ***************/
/**********************************/
.hero-bg-img {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("img/massage-pierre.avif");
  background-position: center 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-clip: border-box;
  height: 100dvh;
}

.hero {
  background-size: cover;
  align-items: center;
  display: flex;
  justify-content: center;
}

.transbox {
  background-color: rgba(255, 255, 255, 0);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-weight: bold;
  border: rgba(255, 255, 255, 0.3) solid 1px;
  color: white;
}

.bubble {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: float 6s ease-in-out infinite;
}

.orbit {
  animation: orbit 18s ease-in-out infinite;
}

.orbit1 {
  animation-delay: 0.5s;
}
.orbit2 {
  animation-delay: 1s;
}
.orbit3 {
  animation-delay: 1.5s;
}
.orbit4 {
  animation-delay: 2s;
}

@keyframes orbit {
  0% {
    transform: translate(0px, 0px);
  }

  12% {
    transform: translate(10px, 18px);
  }

  25% {
    transform: translate(20px, 30px);
  }

  37% {
    transform: translate(32px, 38px);
  }

  50% {
    transform: translate(40px, 40px);
  }

  62% {
    transform: translate(38px, 30px);
  }

  75% {
    transform: translate(30px, 20px);
  }

  87% {
    transform: translate(15px, 10px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

.float {
  animation: float 9s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px) scale(1);
  }

  20% {
    transform: translateY(-4px) scale(1.02);
  }

  40% {
    transform: translateY(3px) scale(0.99);
  }

  60% {
    transform: translateY(-6px) scale(1.01);
  }

  80% {
    transform: translateY(2px) scale(0.98);
  }

  100% {
    transform: translateY(0px) scale(1);
  }
}

/**************************************/
/************* A PROPOS ***************/
/**************************************/

.about-bg-img {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("img/bg-brown.png");
  background-position: right bottom;
  background-size: cover;
  background-repeat: no-repeat;
  background-clip: border-box;
}

/*****************************************/
/************* PRESTATIONS ***************/
/*****************************************/

.services-bg-img {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("img/jacuzzi.avif");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-clip: border-box;
}

/***************************************************/
/************* POURQUOI NOUS CHOISIR ***************/
/***************************************************/

.imgbox1 {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("img/pipette.avif");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-clip: border-box;
  border: rgba(255, 255, 255, 0.3) solid 1px;
  color: white;
}
.imgbox2 {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("img/plateau.avif");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-clip: border-box;
  border: rgba(255, 255, 255, 0.3) solid 1px;
  color: white;
}
.imgbox3 {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("img/massage-pierre.avif");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-clip: border-box;
  border: rgba(255, 255, 255, 0.3) solid 1px;
  color: white;
}
.imgbox4 {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("img/bougie.avif");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-clip: border-box;
  border: rgba(255, 255, 255, 0.3) solid 1px;
  color: white;
}

/*****************************************/
/************* TEMOIGNAGES ***************/
/*****************************************/

.avis-bg-img {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("img/huile.avif");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-clip: border-box;
}

.guillement {
  font-family: "Italianno", serif;
  font-weight: 300;
  line-height: 1;
  font-size: 200px;
}

/**************************************/
/************* ACCROCHE ***************/
/**************************************/

.sentence-bg-img {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("img/bg-brown.png");
  background-position: right bottom;
  background-size: cover;
  background-repeat: no-repeat;
  background-clip: border-box;
}

/*********************************/
/************* CTA ***************/
/*********************************/

.cta-bg-img {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("img/bougie.avif");
  background-position: center 70%;
  background-size: cover;
  background-repeat: no-repeat;
  background-clip: border-box;
  height: 100dvh;
}