.spectacles-top-container {
  width: 100%;
  height: calc(100vh - 150px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

 

}



.spectacles-top-title {
  font-size: 75px;
  /* color: #e9e7e7; */
  text-align: center;
 
}

/* spectacles liste  */
.spectacles-list-container {
  width: 100%;
  height: fit-content;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.spectacle-item {
  margin: 2rem 0;
  width: 80%;
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid #88a3b2
}

.spectacle-thumbnail {
  width: 50%;
  height: fit-content;
}
.spectacle-thumbnail img {
  width: 100%;
  height: auto;
}

.spectacle-infos {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* color: #e9e7e7; */
}

.spectacle-infos h2 {
  text-align: center;
  font-size: 35px;
  margin-bottom: 1rem;
}

.spectacle-infos p {
    margin: 5px;
  padding: 0 1rem;
}

.wp-block-file {
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wp-element-button {
padding: 1rem;
}


/* --------------------------------------spectacles ancien --------------------------- */
.spectacle-ancien-container {
  width: 100%;
  height: fit-content;
  display: flex;
  justify-content: center;
}

.spectacle-ancien {
  width: 80%;
  height: fit-content;
  border-top: 1px solid #88a3b2;
  padding: 1rem;
}

.spectacle-ancien-title {
  font-size: 50px;
}

.spectacles-ancien-list {
  width: 100%;
  height: fit-content;
  margin-top: 1rem;
 

}

.spectacles-ancien-block {

width: 100%;
height: fit-content;
display: flex;
align-items: center;

--s: 50px; /* the size on the corner */
--t: 4px; /* the thickness of the border */
padding: 2rem;
outline: var(--t) solid #88a3b2a2; /* the color here */
outline-offset: calc(-1 * var(--t));
mask: conic-gradient(at var(--s) var(--s), #0000 75%, #000 0) 0 0 /
    calc(100% - var(--s)) calc(100% - var(--s)),
  linear-gradient(#000 0 0) content-box;
border-radius: 25px;

margin: 1rem 0;
}

.spectacles-ancien-block-img-container {
height: 250px;
width: 350px;
overflow: hidden; /* Empêche l'image de déborder */
position: relative;
}

.spectacles-ancien-block-img {
  width: 100%;
    height: 100%;
    object-fit: cover; /* Adapte l'image en mode cover */
    position: absolute;
    top: 0;
    left: 0;
}


.spectacles-ancien-block-infos {
width: 100%;
padding: 1rem;
}

.spectacles-ancien-block-title {
font-size: 25px;
}

.spectacles-ancien-block-text {
margin-top: 1rem;
}




/*    responsive */

@media (max-width: 862px) {

    .spectacles-top-container {
        width: 100%;
        height: 50vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      
      
      }

    .spectacles-top-title {
        font-size: 35px;

      }



    .spectacle-item {
       flex-direction: column;
       width: 90%;
      }

    .spectacle-thumbnail {
        width: 100%;
      }

     
      
      .spectacle-infos {
        width: 100%;

      }
      
      .spectacle-infos h2 {
        text-align: center;
        font-size: 35px;
      }

      .spectacle-infos p {
        margin: 5px;
      padding: 0;
    }

      .wp-block-file {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }


    /* --------------------------------------spectacles ancien --------------------------- */



.spectacle-ancien {
  width: 90%;
  height: fit-content;
  border-top: 1px solid #88a3b2;
  padding: 0;
}

.spectacle-ancien-title {
  font-size: 30px;
}



.spectacles-ancien-block {
flex-direction: column;

}

.spectacles-ancien-block-img-container {

width: 100%;

}





.spectacles-ancien-block-title {
font-size: 20px;
}

.spectacles-ancien-block-text {
margin-top: 1rem;
}




}