* {
  box-sizing: border-box;
}

html,
body,
main,
section {
  margin: 0;
}

.responsive-background {
  width: 100%;
  height: 700px;
  background-image: url(/images/danseuses.jpg);
  background-size: 640px 348.6px;
  background-position: center 443px;
  background-repeat: no-repeat;
  margin-top: -461px;
}

@media (min-width: 639px) and (orientation: landscape) {
  .responsive-background {
    height: 385px;
    background-position: center 47px;
    background-size: 1023px 568px;
    margin-top: -145px;
  }
}

@media (min-width: 1023px) and (orientation: landscape) {
  .responsive-background {
    height: 918px;
    background-size: 1440px 900px;
    background-position: center 246px;
    margin-top: -250px;
  }
}

@media (min-width: 1441px) and (orientation: landscape) {
  .responsive-background {
    height: 1000px;
    background-size: 2000px 1111px;
    background-position: center 340px;
    margin-top: -344px;
  }
}

#annonce {
  font-family: 'Playfair Display', serif;
  background-color: #2a3ca1;
  color: white;
  text-align: center;
  margin: 0;
  font-size: 30px;
}

#annonce h1 {
  margin: 0;
  padding: 2rem;
}

#commentaire {
  font-family: 'IBM Plex Sans', sans-serif;
  text-align: center;
  background-color: #ef672d;
  color: white;
  padding: 1rem;
}

#commentaire p {
  margin: 0;
  font-size: 34px;
}

#presentation {
  margin-top: 0.1rem;
  display: flex;
}

#presentation > * {
  flex: 1;
}

#presentation > *:nth-child(odd) {
  background-color: #ef672d;
  color: white;
}

#presentation > *:nth-child(even) {
  background-color: #384999;
  color: white;
}

#contact {
  display: flex;
  flex-direction: column;
  height: 80vh;
}

#contact-text {
  padding: 2rem;
  flex: 2; /* Occupe 2 parts */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#img-mymy-container {
  flex: 1; /* Occupe 1 part */
  background-color: #faebd7; /* Couleur de fond pour tester */
}

#question {
  color: #384a81;
}

#img-mymy-container img {
  width: 100%;
  display: block;
}