/* Import Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,700;1,700&display=swap");

body {
  font-family: "Nunito", sans-serif;
  color: #ffffff;
  text-align: center;
  background-color: #2c3e50;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  position: relative;
}

.snow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.snow__layer {
  position: absolute;
  left: -100px;
  right: -100px;
  -webkit-animation: wind 5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
          animation: wind 5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
  -webkit-perspective: 100px;
          perspective: 100px;
  -webkit-transform: translateX(-50px);
      -ms-transform: translateX(-50px);
          transform: translateX(-50px);
}

.snow__fall {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2000px;
  background: url(snow-light.png);
  -webkit-animation: fall 10s linear infinite;
          animation: fall 10s linear infinite;
}

.snow__layer:nth-child(1) {
  -webkit-animation-duration: 35s;
          animation-duration: 35s;
}

.snow__layer:nth-child(1) .snow__fall {
  background: url(snow-blur.png);
  -webkit-transform: translateZ(25px);
          transform: translateZ(25px);
  -webkit-animation-name: fallblur;
          animation-name: fallblur;
  width: 4000px;
  left: -2000px;
}

.snow__layer:nth-child(2) {
  -webkit-animation: wind 5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
          animation: wind 5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

.snow__layer:nth-child(2) .snow__fall {
  background: url(snow-medium.png);
  -webkit-animation-duration: 25s;
          animation-duration: 25s;
}

.snow__fall:nth-child(3) {
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
  background-size: 250px;
}

.snow__fall:nth-child(2) {
  -webkit-animation-duration: 20s;
          animation-duration: 20s;
  background-size: 500px;
}

.snow__layer:nth-child(4) .snow__fall {
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-transform: translateZ(50px);
          transform: translateZ(50px);
  -webkit-animation-name: falllight;
          animation-name: falllight;
}

@-webkit-keyframes fall {
  from {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
  }
}

@keyframes fall {
  from {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
  }
}

@-webkit-keyframes falllight {
  from {
    -webkit-transform: translateY(-1000px) translateZ(50px);
            transform: translateY(-1000px) translateZ(50px);
  }
}

@keyframes falllight {
  from {
    -webkit-transform: translateY(-1000px) translateZ(50px);
            transform: translateY(-1000px) translateZ(50px);
  }
}

@-webkit-keyframes fallblur {
  from {
    -webkit-transform: translateY(-1000px) translateZ(25px);
            transform: translateY(-1000px) translateZ(25px);
  }
}

@keyframes fallblur {
  from {
    -webkit-transform: translateY(-1000px) translateZ(25px);
            transform: translateY(-1000px) translateZ(25px);
  }
}

@-webkit-keyframes wind {
  to {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
  }
}

@keyframes wind {
  to {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
  }
}

.conteudo__geral {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
}

img {
  display: block;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.container-carrossel {
  --widthItem: 150px;
  --heightItem: 100px;
  width: var(--widthItem);
  height: var(--heightItem);
  perspective: 1000px;
}

.carrossel {
  --rotatey: 0;
  position: relative;
  transform: rotatey(var(--rotatey));
  transform-style: preserve-3d;
  user-select: none;
  cursor: grab;
}

.carrossel-item {
  opacity: 0.9;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  transition: opacity 0.5s;
  border: 3px solid #ffffff;
}

.carrossel-item:hover {
  opacity: 1;
}

.carrossel-item:active {
  border-radius: 5px;
}

.carrossel-item > * {
  margin: 3px;
}

.carrossel,
.carrossel-item {
  width: 100%;
  height: 100%;
}

.carrossel-item:nth-child(1) {
  --rotatey: 0;
  transform: rotatey(var(--rotatey)) translatez(var(--tz));
  background: #ff4d4d;
}

.carrossel-item:nth-child(2) {
  --rotatey: 0;
  transform: rotatey(var(--rotatey)) translatez(var(--tz));
  background: #33cc33;
}

.carrossel-item:nth-child(3) {
  --rotatey: 0;
  transform: rotatey(var(--rotatey)) translatez(var(--tz));
  background: #ffcc00;
}

.carrossel-item:nth-child(4) {
  --rotatey: 0;
  transform: rotatey(var(--rotatey)) translatez(var(--tz));
  background: #8C3527;
}

.carrossel-item:nth-child(5) {
  --rotatey: 0;
  transform: rotatey(var(--rotatey)) translatez(var(--tz));
  background: #ff944d;
}

.carrossel-item:nth-child(6) {
  --rotatey: 0;
  transform: rotatey(var(--rotatey)) translatez(var(--tz));
  background: #33ccff;
}

.carrossel-item:nth-child(7) {
  --rotatey: 0;
  transform: rotatey(var(--rotatey)) translatez(var(--tz));
  background: #c0c0c0;
}

@media screen and (min-width: 576px) {
  .container-carrossel {
    --widthItem: 350px;
    --heightItem: 300px;
  }
}

@media (orientation: portrait) {
  font-size: 1rem;
}

@media (orientation: landscape) {
  font-size: 3rem;
}

a {
  overflow: hidden;
  position: relative;
  display: inline-block;
  color: #ffffff;
  font-size: 3em;
}

a::before,
a::after {
  content: '';
  position: absolute;
  width: 100%;
  left: 0;
}

a::before {
  background-color: #33ccff;
  height: 2px;
  bottom: 0;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
}

a::after {
  content: attr(data-replace);
  height: 100%;
  top: 0;
  transform-origin: 100% 50%;
  transform: translate3d(200%, 0, 0);
  transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
  color: #ffe200;
}

a:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}

a:hover::after {
  transform: translate3d(0, 0, 0);
}

a span {
  display: inline-block;
  transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
}

a:hover span {
  transform: translate3d(-200%, 0, 0);
}


.formule {
  color: #ffe200;
  border-radius: 25px;
  padding: 20px;
  padding-left: 60px;
  padding-right: 150px;
  max-height: 100%;
  margin: 70px;
  background-image: url('fond.jpg'); /* Chemin vers ton image */
  background-size: cover; /* Ajuste l'image pour couvrir tout le div */
  background-position: center; /* Centre l'image dans le div */
  background-repeat: no-repeat;
}

.formule h2 {
  margin-bottom: 15px;
}

.formule ul {
  text-align: left;
}

.formule li {
  padding: 10px 0;
  text-align: left;
}

.formule .prix {
  font-weight: bold;
  color: #33ccff;
}

.formule .prix.barré {
  text-decoration: line-through;
  color: #ff4d4d;
}

.total {
  margin-top: 20px;
}

.total p {
  font-size: 1.2em;
}
