body {
  margin: 4.5vh 1vw;
  padding: 0;
  box-sizing: border-box;
  font-size: 2vh;
  background-color: rgb(33, 33, 33);
}

@font-face {
  font-family: 'Aileron';
  src: url('../fonts/aileron.light.otf') format('opentype');
}

@font-face {
  font-family: 'Arteria';
  src: url('Arteria_Std_Comp_Bold.otf') format('opentype'),
  url('../fonts/Arteria_Std_Comp_Bold.otf');
}

@font-face {
  font-family: 'Pliant';
  src: url('../Pliant-SemiBold.ttf') format('truetype');
}

h1 {
  margin: 0vh;
  font-family: 'Arteria', sans-serif;
  font-size: 4vw;
  color: white;
}

h2 {
  text-align: center;
  margin: 0;
  font-family: 'Pliant', sans-serif;
  font-size: 1.8vw;
  color: rgb(13,41,72);
}

h3 {
  padding-left: 1vh;
  font-family: 'Aileron', sans-serif;
  margin: 0vw;
  font-size: 1.2vw;
  color: white;
}

.grille {
  margin-top: 17vh;
  margin-left: 2.9vw;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8vw;
  padding: 0.5vw;
}

.show {
  margin-top: 19vh;
  width: 97vw;
  border-radius: 1vh 1vw;
  overflow: hidden;
  position: relative;
  
}

.show iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
}

.cadre {
  width: 44vw;
  border-radius: 1vh 1vw;
  overflow: hidden;
  position: relative;
}

.cadre iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(
    to top,
    rgba(255,255,255,0.75),
    rgba(0,0,0,0)
  );
  opacity: 0;
  transition: 0.3s ease;
}

.cadre:hover .overlay {
 
  opacity: 1;
}

.overlay h2 {

  margin: 2vw 5vh;
  font-size: 3vh;
  color: rgb(33, 33, 33);
}

.BandHAUT {
  width: 120%;
  margin: -18vh -10vw;
  position: relative;
    z-index: 1;
}

.BandHAUT img {
  width: 100%;
  height: auto;
  display: block;
}

.Etiquette {
  position: absolute;
  top: 67%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(33, 33, 33, 1);
  padding: 3vh 3vw;
  border-radius: 1vh 1vw;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}


.BarreHaut {
display: flex;
justify-content: space-between;
margin-top: 15vh;
position: fixed;
z-index: 9999999;
} 

.Menu {
 display: flex;
  gap: 1vw;
  z-index: 9999999;
} 

.ClickJaune {
  position: relative;
  display: inline-block;
}

.ClickJaune img{
justify-content: flex-end;
width: 10.6vw;
height: auto;
} 


.ClickText h2{
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5vw;
  color: white;
}


@media (max-width: 840px) {
  
  .BarreHaut {
margin-top: 4vh;
}

  .grille {
    margin-top: 6vh;
    margin-left: 0vw;
    padding: 2vw;
    grid-template-columns: repeat(1, 80%);
  }
  
  .show{ 
  margin-top: 10vh;
  }
  
  .cadre {
  width: 94vw;

}

  .BandHAUT {
    margin: -8vh -10vw;
  }

  .Etiquette {
    top: 57%;
    padding: 2vh 4vw;
  }
  
  .ClickText h2{
  top: 47%;
}

  
}