
/*                            */
/*           ACCUEIL          */
/*                            */

/* ---------------------------------- */
/*          Section Bannière          */
/* ---------------------------------- */

.home-main{
  text-align: center;
}

.home-header, .home-container{
  width: 100%;
  height: auto;
}

.home-header{
  background-color: var(--color_beige);
  text-align: center;
  padding-top: 15px;
}

.home-banner{
  margin-bottom: 125px;
  z-index: 1;
  position: relative;
}

.home-header-widget{
  height: auto;
  max-width: 100%;
  width: 900px;
  /* border: 1px solid; */
  margin: auto;
  position: relative;
  z-index: 2;
}

/* wave-transition */
.wave-transition {
  position: relative;
  width: 100%;
  line-height: 0;
  overflow: hidden;
  z-index: 1;
  margin-top: -80px;
}

.wave-transition svg {
  width: 100%;
  height: auto;
  display: block;
  background: var(--color_blanc);
}



/* ------------------------------------- */
/*          Section a l'affiche          */
/* ------------------------------------- */

.home-container {
  position: relative;
  z-index: 1;
  margin-top: -172px;
}

.home-widget{
  margin: 30px 0px;
}



/* ------------------------------------------ */
/*          Dégradé blanc vers beige          */
/* ------------------------------------------ */

.transition-white-beige {
  height: 100px;
  background: linear-gradient(to bottom, var(--color_blanc), var(--color_beige));
}

.transition-beige-white {
  height: 100px;
  background: linear-gradient(to bottom, var(--color_beige), var(--color_blanc));
}



/* ----------------------------------- */
/*          Section Comédiens          */
/* ----------------------------------- */

.home-comediens {
  background-color: var(--color_beige);
  text-align: center;
  padding: 40px 20px;
}

.comediens-image img {
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
}



/* ----------------------------------------- */
/*          Section Infos Pratiques          */
/* ----------------------------------------- */

.home-infos{
  background-color: var(--color_orange);
  padding: 50px 0px 1px 0px;
}

.infos-flex{
  width: 745px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: row;
  margin: 60px auto;
  gap: 20px;
}

.info-box{
  width: 47%;
  display: flex;
  align-content: center;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-evenly;
}

.info-box:nth-child(4) > p{
  background: red;
}


.info-box img{
  min-width: 130px;
}

.images{
  width: 40%;
}


.texte{
  width: 60%;
  text-transform: uppercase;
  font-weight: 700;
  font-family: 'League Spartan Variable';
  color: var(--color_beige);
  font-size: 16px;
  text-align: left;
  padding-left: 40px;
}

.texte p{
  margin: 0px;
}

.texte a{
  cursor: pointer;
  transition: 700ms all;
  background-color: var(--color_rouge);
  padding: 14px 20px 10px 20px;
  border-radius: 12px;
  color: var(--color_beige);
}

.texte a:hover{
  transition: 700ms all;
  color: var(--color_rouge);
  background-color: var(--color_beige);
}

.home-infos .bouton{
    margin-bottom: 51px;
}

@media (max-width: 780px) {
  .infos-flex{
    display: flex;
    flex-direction: column;
    align-content: center;
    width: 50%;
  }
  .info-box {
    width: 100%;
  }
}

@media (max-width: 580px) {
  .infos-flex{
    width: 83%;
    margin-bottom: 30px;
  }
}




/* ------------------------------------ */
/*          Section Newsletter          */
/* ------------------------------------ */

.home-newsletter {
  width: 100%;
  padding: 100px 0;
  background-color: var(--color_beige);
}

.newsletter-wrapper {
  display: flex;
  width: 900px;
  margin: auto;
}

.newsletter-col{
  padding: 10px;
}

.newsletter-col.left {
  text-align: left;
}

.newsletter-col.left h2 {
  margin-left: 60px;
}

.newsletter-col.left h2, .newsletter-col.left h3 {
  text-align: left;
}

.newsletter-col.right {
  padding-top: 40px;
}

.newsletter-form input[type="email"] {
  padding: 18px 30px;
  font-size: 1rem;
  border: none;
  border-radius: 50px;
  background-color: var(--color_orange) !important;
  color: white;
  font-weight: 700;
  text-align: center;
  width: 80%;
  max-width: 350px;
}

.newsletter-form input::placeholder {
  color: #ffffff73;
  text-transform: uppercase;
}

input:-internal-autofill-selected,
input:is(:-webkit-autofill, :autofill) {
  border: 3px solid var(--color_orange) !important;
  background-color: var(--color_orange) !important;
}

button{
    margin-top: 20px;
}

@media (max-width: 900px) {
  .newsletter-wrapper{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}





/* ------------------------------------- */
/*          Section Partenaires          */
/* ------------------------------------- */

.home-partenaires {
  text-align: center;
  padding: 120px 20px 14px 20px;
  background-color: var(--color_blanc);
}

.partenaires-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 50px;
  margin-top: 20px;
}

.partenaire {
  flex: 0 1 120px;
  max-width: 120px;
}

.partenaire img {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
  object-fit: contain;
  filter: grayscale(0%);
  transition: 700ms all;
}

.partenaire img:hover {
  filter: grayscale(100%);
}

@media (max-width: 768px) {
  .partenaires-title {
    font-size: 2rem;
  }

  .partenaire {
    flex: 0 1 100px;
    max-width: 100px;
  }
}
