@import url(./common.css);

/* ----- Header ----- */

.header-container {
  background-image: url("../img/banniere_sup.png");
  background-size: cover;
  background-repeat: round;
  font-size: 1.75em;
  color: #8d4923;
  font-family: 'AmiriI';
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/*1er jalon responsive = 1000px*/
@media (max-width: 1000px) {
  .header-container {
    font-size: 1.40em;
  }
  .p-12 {
    width: 20%;
    height: 20%;
  }
}

/*2ème jalon responsive = 694px*/
@media (max-width: 694px) {
  .header-container {
    font-size: 1.2em;
  }
  .p-12 {
    width: 20%;
    height: 20%;
  }
}

/*3ème jalon responsive = 550px*/
@media (max-width: 550px) {
  .header-container {
    font-size: 0.95em;
  }
  .p-12 {
    width: 20%;
    height: 20%;
  }
}

/*4ème jalon responsive = iphone 13 & 13 Pro*/
@media (max-width: 390px) {
  .header-container {
    font-size: 0.75em;
  }
  .p-12 {
    width: 20%;
    height: 20%;
  }
}

/* ----- Body ----- */

.img-home {
  background-image: url("../img/Fond\ accueil.jpg");
  background-position: center;
  background-size: cover;
  height: 200vh;
  background-repeat: no-repeat;
  align-items: center;
  justify-content: center;
}

.container-home {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.phraseDaccroche {
  width: 50%;
  pointer-events: none;
  margin-top: 50%;
  margin-right: 3%;
}

.button-home {
  background-color: transparent;
  border: none;
  cursor: pointer;
  position: absolute;
  top: 65%;
  left: 43%;
}

.btn-img {
  width: 85%;
}

@media (max-width: 1000px) {
  .phraseDaccroche {
    width: 70%;
  }

  .btn-img {
    width: 95%;
    height: 95%;
  }
}

/*1er jalon responsive = MacBook Air M1*/
@media (max-width: 1280px) {
  .phraseDaccroche{
    width: 60%;
    margin-top: 48%;
    margin-right: 5%;
  }
  .button-home{
    top: 58%;
    left: 39%;
    width: 20%;
  }
}


/* ----- Footer ----- */

.footer-container {
  height: 100px;
  background-image: url("../img/fond\ bandeau\ inf.png");
  background-size: cover;
  background-repeat: round;
  font-size: 1.5em;
  color: #ecbca0;
  font-family: 'AmiriR';
  display: flex;  /* Ajout de cette ligne */
  justify-content: space-around;
  align-items: self-end;
}

.left-element{
  margin-left: 260px;
}

.middle-element a,
.middle-element a:hover,
.middle-element a:active,
.middle-element a:visited {
  font-size: 1.125em;
  text-align: center;
  margin-left: 250px;
  margin-right: 250px;
  text-decoration: none;
  color: #ecbca0;
}

/*1er jalon responsive = MacBook Air M1*/
@media (max-width: 1280px) {
  .footer-container {
    font-size: 1.2em;
  }
  .left-element{
    position: relative;
    left: -100px;
    bottom: 15px;
  }
  .middle-element{
    position: relative;
    right: 50px;
  }
  .right-element{
    font-size: 0.9em;
    position: relative;
    left: 30px;
    bottom: 15px;
  }
}