:root {
  --darkRed: #4F0000;
  --lightPink: #F4D1D1;
}


main a{
  display: block;
}


/* intro */

header{
  height: 100vh;
  background-color: var(--lightPink);
  position: relative;
  z-index: 0;
}

.intro {
  padding-top: 15vh;
  width: 550px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  
}

h1 {
  margin-top: 0px;
  margin-bottom: 10px;
  font-size: 5rem;
  z-index: 2;
}

.intro p {
  color: var(--darkRed);
  font-size: 1.5rem;
  margin-top: -2px;
}

.intro a {
  text-decoration: none;
  color: #fff;
  text-align: center;
  background-color: var(--darkRed);
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 5px #000000b0;
  font-size: 1.5rem;
  border-radius: 20px;
  padding: 15px 10px;
  width: 300px;
  transition: ease 0.5s;
}

.intro a:hover{
  color: var(--darkRed);
  text-align: center;
  background-color: var(--lightPink);
  transition: ease 0.5s;
  transform: scale(1.05);
  border: var(--darkRed) 2px solid;
}

.intro nav {
  margin-top: 15vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 25px;
}

/* Animation */

.animated-image {
  animation: moveUpAndDown 3s infinite ease-in-out;
}

@keyframes moveUpAndDown {
  0% {
      transform: translateY(0) rotate(var(--rotate-angle));
  }
  50% {
      transform: translateY(-15px) rotate(var(--rotate-angle));
  }
  100% {
      transform: translateY(0) rotate(var(--rotate-angle));
  }
}

.rotate1 {
  --rotate-angle: 25deg;
}

.rotate2 {
  --rotate-angle: -30deg;
}

.rotate3 {
  --rotate-angle: 20deg;
}

.rotate4 {
  --rotate-angle: -25deg;
}

.rotate5 {
  --rotate-angle: 40deg;
}

/* Délais d'animation spécifiques */
.delay1 {
  animation-delay: 0s;
}

.delay2 {
  animation-delay: 1s;
}

.delay3 {
  animation-delay: 2s;
}


/* Header déco */


.down_wave{
  position: absolute;
  right: 0;
  top: 0;
  width: 40%;
  z-index: -1;
}

.up_wave{
  position: absolute;
  left: 0;
  bottom: 0vh;
  width: 45%;
  z-index: -1;
}

.cafe {
  position: absolute;
  width: 10vw;
  min-width: 100px;
  max-width: 250px ;
  height: auto;
  z-index: -1;
}

.shapeG1 {
  top: 10%;
  left: 5%;
  transform: rotate(25deg);
}

.shapeG2 {
  top: 42%;
  right: 67%;
  transform: rotate(-30deg);
}

.shapeD3 {
  top: 30%;
  left: 67%;
  transform: rotate(20deg);
}

.shapeD4 {
  bottom: 5%;
  left: 62%;
  transform: rotate(-25deg);
}
.shapeD5 {
  bottom: 20%;
  right: 5%;
  transform: rotate(40deg);
}


/* Presentation */

.presentation {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 80%;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  z-index: 1;
}

.presentation div {
  width: 80%;
  padding: 20px;
}

.presentation h2 {
  font-size: 2.5rem;
  margin-left: 3%;
}

.presentation img {
  width: 40%;
}

.studio {
  flex-direction: row-reverse;
}


/* Section nouveauté tendance */

section {
  position: relative;
  width: 80vw;
  max-width: 1300px ;
  margin-right: auto;
  margin-left: auto;
}

.nouveaute, .tendance {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  border: var(--darkRed) 5px solid;
  border-radius: 5px;
}

.nouveaute button, .tendance button{
  margin-top: 20px;
  margin-bottom: 40px;
}

.text {
  width: 400px;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}

/* Liste Salles */


.ListeSalles{
  position: relative;
  display: flex;
  gap: 10px;
  transition: left 0.3s ease;
  margin-top: 20px;
  margin-bottom: 20px;
}

.carteSalle img {
  width: 200px;
  height: 200px;
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
}

.carteSalle a{
  text-decoration: none;
  font-size: 1.2rem;
  margin-top: 10px;
}

.text h3{
  font-size: 2rem;
}

/* Style de la carte */
.carteSalle {
  display: flex;
  flex-direction: column;
  text-align: center;
  background-color: #F4D1D1;
  border-radius: 30px;
  width: 250px;
  padding: 20px 12.5px;
  margin-bottom: 20px;
}

.carteSalle:hover{
  animation: ease 1s;
  transform: scale(1.05);
}

/* Form */

.search-section{
  text-align: center;
  background-color: var(--lightPink);
  height: 150px ;

}
.search-section h3{
  font-size: 1.7rem;
  padding-top: 25px ;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}

#search{
  border: var(--darkRed) 2px solid;
  width: 200px;
  height: 30px;
  border-radius: 5px;
}


/* Autre */

blockquote {
  font-family: "Itim", cursive, Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 1.2rem;
  width: 80%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.cache {
  display: none;
}

.visible {
  display: block;
}

.presentation, section{
  margin-top: 20vh;
  margin-bottom: 20vh;
}

.studio img{
  width: 30%;
}