/* screen - spectacles */

.spectacles {
  align-items: center;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  min-height: 1024px;
  width: 100%;
}

.spectacles .navbar {
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  display: flex;
  height: 40px;
  overflow: hidden;
  width: 100%;

}

.spectacles .overlap-group3 {
  align-items: center;
  justify-content: center;
  background-color: var(--eerie-black);
  display: flex;
  width: 100%;
  height: 50px;
  margin-top: -5px;
  min-width: 100%;
  padding: 13.5px 350px;

}

.spectacles .logo-texte {
  align-items: center;
  justify-content: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap : 44px 44px;

}

.spectacles .logo {
  cursor: pointer;
  height: 22px;
  position: relative;
  width: 38px;
}

/*Ici Commence la page */

.spectacles .frame-59 {
  align-items: center;
  display: inline-flex;
  flex-direction: column;
  gap: 21px;
  margin-right: 18.0px;
  margin-top: 32px;
  padding: 0px 11px;
  position: relative;
}

.spectacles .cie52hertz-sirnes-spectacle-titre-1 {
  height: 166.67px;
  object-fit: cover;
  position: relative;
  width: 400px;
}

/* Par défaut, alignement horizontal */
.spectacles .grille-spectacles {
  display: inline-flex;
  justify-content: center;
  align-items: center; /* Alignement horizontal par défaut */
  flex-wrap: wrap;
  gap: 53px 53px;
  margin-top: 131px;
  position: relative;
}


.spectacles .sirnes {
  cursor: pointer;
  height: 235px;
  position: relative;
  width: 202px;
}

.spectacles .overlap-group {
  height: 235px;
  position: relative;
  width: 200px;
}

.spectacles .cie-52-hertz-spectac {
  height: 220px;
  left: 0;
  object-fit: cover;
  position: absolute;

  top: 0;
  width: 200px;
}

.spectacles .cie-52-hertz-spectac-histoires {
  height: 220px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 250px;
}

.spectacles .brush {
  height: 29px;
  left: 22px;
  position: absolute;
  top: 206px;
  width: 146px;
  mix-blend-mode: multiply;
}

.spectacles .s-irnes {
  height: 1px;
  left: 52px;
  letter-spacing: 0;
  line-height: 0.1px;
  position: absolute;
  text-shadow: 0px 0px 1.9px #00000099;
  top: 213px;
  width: 105px;
}

.spectacles .coraline {
  height: 235px;
  position: relative;
  width: 202px;
}

.spectacles .cie-52-hertz-spectac-1 {
  cursor: pointer;
  height: 220px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 200px;
}

.spectacles .brush-1 {
  height: 36px;
  left: 5px;
  position: absolute;
  top: 195px;
  width: 184px;
  mix-blend-mode: multiply;
}

.spectacles .brush-2 {
  height: 39px;
  left: 5px;
  position: absolute;
  top: 196px;
  opacity: 0;
  width: 184px;
  mix-blend-mode: multiply;
}

.spectacles .s-irnes-1 {
  height: 1px;
  left: 5px;
  line-height: 0.1px;
  top: 213px;
  width: 189px;
}

.spectacles .nouveau-projet {
  cursor: pointer;
  height: 267px;
  margin-right: -2.00px;
  position: relative;
  width: 202.12px;
}

.spectacles .overlap-group2 {
  height: 267px;
  position: relative;
  width: 200px;
}

.spectacles .brush-3 {
  height: 36px;
  left: 26px;
  position: absolute;
  top: 230px;
  width: 138px;
  scale: 105%;
  transform: rotate(180deg);
}

.spectacles .brush-4 {
  height: 40px;
  left: 29px;
  position: absolute;
  top: 188px;
  width: 153px;
  mix-blend-mode: multiply;
}

.spectacles .brush-5 {
  height: 42px;
  left: 26px;
  position: absolute;
  top: 190px;
  left: -10px;
  width: 230px;
  scale: 105%;
  mix-blend-mode: multiply;
  transform: rotate(180deg);
}

.spectacles .brush-6 {
  height: 42px;
  left: 26px;
  position: absolute;
  top: 230px;
  left: 0px;
  width: 200px;
  scale: 105%;
  mix-blend-mode: multiply;
}

.spectacles .s-irnes-2 {
  height: 78px;
  left: 3px;
  line-height: 39px;
  top: 189px;
  width: 197px;
}

.spectacles .compagnie-52-hertz-b {
  align-items: flex-start;
  display: flex;
  height: 65px;
  margin-top: 322px;
  min-width: 244px;
}

.spectacles .s-irnes-3 {
  letter-spacing: 0;
  position: absolute;
  text-align: center;
  text-shadow: 0px 0px 1.9px #00000099;
}









/* Media query pour les écrans étroits (alignement vertical) */
@media screen and (max-width: 720px) {
 
  .spectacles {
    width: 100vw;
  }
 
 
 
  .spectacles .grille-spectacles {
    flex-direction: column; /* Alignement vertical */
    align-items: flex-start; /* Alignement à gauche */
  }

  .spectacles .navbar{
    height: 280px;
    width:100%;
    display: flex;
    justify-content: flex-end;
    background-color:var(--eerie-black)

  }

  .spectacles .overlap-group3 {
    height: 280px;
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
    flex-direction: column;
    /*background-color: blueviolet;*/
    align-items: flex-end;
    padding: 0px 0px;
    margin-top: -23px;
    margin-right: 35px;
  }

  .spectacles .logo-texte {
    width: 100%;
    height: 280px;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-end;
    /*background-color: rgb(226, 116, 43);*/
    align-items: flex-end;
  }

  .spectacles .navbar-1 {
    flex-direction: column; 
    justify-content: flex-end;
    /*background-color: blue;*/
    align-items: flex-end;

  }

  


}