* {

  box-sizing: border-box;

}

body {

  background-color: #33333310;

}

.header {
  display: flex;
  justify-content: space-between;

  height: 70px;
  padding: 10px;
  background: linear-gradient(90deg, rgba(62, 157, 165, 1) 0%, rgba(29, 76, 98, 1) 100%);
  color: #fff;

}



/* CORPS */

.corps {
  margin: 0 auto;
  width: 60%;
  /* largeur relative */
  min-width: 1400px;
  /* largeur minimale */
  padding: 0px;



}


.top {
  margin-top: 30px;

}


@media screen and (max-width: 1400px) {
  .corps {
    margin: 0 auto;
    width: 100%;
    /* largeur relative */
    min-width: 100%;
    /* largeur minimale */
    padding: 0px;



  }

}




.corps2 {
  margin: 0 auto;
  width: 60%;
  /* largeur relative */
  min-width: 1400px;
  /* largeur minimale */




}

@media screen and (max-width: 1400px) {
  .corps2 {
    margin: 0 auto;
    width: 100%;
    /* largeur relative */
    min-width: 100%;
    /* largeur minimale */



  }

}

/* FIN CORPS */


.logo {

  width: 150px;

}

.logo2 {

  width: 140px;
  padding: 30px;
}




.menu {
  display: flex;
  gap: 20px;
}

/* Image front */

img,
#front {

  width: 100%;


}

.image-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.3s;
}

.image-container:hover img {
  transform: scale(1.3);
}

.image-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid transparent;
  transition: border-color 0.3s;
}

.image-container:hover::before {
  border-color: #000;
}

/* Photo profil */


.cont {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  align-items: center;



}


.box {

  padding: 20px;

}




#texteprofil {
  padding: 15px;
  text-align: justify;
}



.d-block {

  border-radius: 20px;
}

/* Slider photo */

#art {
  height: 100px;
  background: linear-gradient(90deg, rgba(62, 157, 165, 1) 0%, rgba(29, 76, 98, 1) 100%);
  color: #fff;
  clip-path: polygon(100% 100%, 0% 100%, 0.00% 76.77%, 2.00% 73.81%, 4.00% 70.72%, 6.00% 67.51%, 8.00% 64.20%, 10.00% 60.81%, 12.00% 57.36%, 14.00% 53.87%, 16.00% 50.36%, 18.00% 46.84%, 20.00% 43.34%, 22.00% 39.88%, 24.00% 36.48%, 26.00% 33.15%, 28.00% 29.92%, 30.00% 26.81%, 32.00% 23.82%, 34.00% 20.99%, 36.00% 18.32%, 38.00% 15.83%, 40.00% 13.53%, 42.00% 11.44%, 44.00% 9.57%, 46.00% 7.93%, 48.00% 6.53%, 50.00% 5.37%, 52.00% 4.47%, 54.00% 3.83%, 56.00% 3.45%, 58.00% 3.33%, 60.00% 3.48%, 62.00% 3.90%, 64.00% 4.57%, 66.00% 5.51%, 68.00% 6.69%, 70.00% 8.13%, 72.00% 9.80%, 74.00% 11.70%, 76.00% 13.82%, 78.00% 16.14%, 80.00% 18.65%, 82.00% 21.35%, 84.00% 24.20%, 86.00% 27.20%, 88.00% 30.34%, 90.00% 33.58%, 92.00% 36.92%, 94.00% 40.33%, 96.00% 43.80%, 98.00% 47.30%, 100.00% 50.81%);
  position: relative;
  bottom: -2px;
}

#art2 {
  height: 100px;
  background: linear-gradient(90deg, rgba(62, 157, 165, 1) 0%, rgba(29, 76, 98, 1) 100%);
  color: #fff;


  clip-path: polygon(100% 0%, 0% 0%, 0.00% 23.83%, 1.33% 22.82%, 2.67% 21.83%, 4.00% 20.87%, 5.33% 19.94%, 6.67% 19.04%, 8.00% 18.18%, 9.33% 17.35%, 10.67% 16.55%, 12.00% 15.80%, 13.33% 15.08%, 14.67% 14.40%, 16.00% 13.76%, 17.33% 13.17%, 18.67% 12.62%, 20.00% 12.12%, 21.33% 11.66%, 22.67% 11.24%, 24.00% 10.88%, 25.33% 10.56%, 26.67% 10.29%, 28.00% 10.06%, 29.33% 9.89%, 30.67% 9.77%, 32.00% 9.69%, 33.33% 9.67%, 34.67% 9.69%, 36.00% 9.77%, 37.33% 9.89%, 38.67% 10.06%, 40.00% 10.29%, 41.33% 10.56%, 42.67% 10.88%, 44.00% 11.24%, 45.33% 11.66%, 46.67% 12.12%, 48.00% 12.62%, 49.33% 13.17%, 50.67% 13.76%, 52.00% 14.40%, 53.33% 15.08%, 54.67% 15.80%, 56.00% 16.55%, 57.33% 17.35%, 58.67% 18.18%, 60.00% 19.04%, 61.33% 19.94%, 62.67% 20.87%, 64.00% 21.83%, 65.33% 22.82%, 66.67% 23.83%, 68.00% 24.87%, 69.33% 25.94%, 70.67% 27.02%, 72.00% 28.12%, 73.33% 29.24%, 74.67% 30.38%, 76.00% 31.53%, 77.33% 32.69%, 78.67% 33.86%, 80.00% 35.04%, 81.33% 36.22%, 82.67% 37.41%, 84.00% 38.59%, 85.33% 39.78%, 86.67% 40.96%, 88.00% 42.14%, 89.33% 43.31%, 90.67% 44.47%, 92.00% 45.62%, 93.33% 46.76%, 94.67% 47.88%, 96.00% 48.98%, 97.33% 50.06%, 98.67% 51.13%, 100.00% 52.17%);


  position: relative;
  bottom: 2px;
}

#art3 {
  height: 100px;
  background: linear-gradient(90deg, rgba(62, 157, 165, 1) 0%, rgba(29, 76, 98, 1) 100%);
  color: #fff;
  clip-path: polygon(100% 0%, 0% 0%, 0.00% 45.35%, 2.00% 45.58%, 4.00% 45.41%, 6.00% 44.84%, 8.00% 43.89%, 10.00% 42.60%, 12.00% 40.98%, 14.00% 39.08%, 16.00% 36.97%, 18.00% 34.68%, 20.00% 32.28%, 22.00% 29.84%, 24.00% 27.42%, 26.00% 25.08%, 28.00% 22.90%, 30.00% 20.91%, 32.00% 19.19%, 34.00% 17.77%, 36.00% 16.69%, 38.00% 15.98%, 40.00% 15.66%, 42.00% 15.74%, 44.00% 16.22%, 46.00% 17.08%, 48.00% 18.30%, 50.00% 19.85%, 52.00% 21.68%, 54.00% 23.75%, 56.00% 26.01%, 58.00% 28.38%, 60.00% 30.82%, 62.00% 33.25%, 64.00% 35.61%, 66.00% 37.84%, 68.00% 39.88%, 70.00% 41.66%, 72.00% 43.16%, 74.00% 44.32%, 76.00% 45.11%, 78.00% 45.52%, 80.00% 45.53%, 82.00% 45.15%, 84.00% 44.38%, 86.00% 43.24%, 88.00% 41.76%, 90.00% 39.99%, 92.00% 37.97%, 94.00% 35.75%, 96.00% 33.40%, 98.00% 30.97%, 100.00% 28.53%);

  position: relative;
  bottom: 2px;
}

#art4 {
  height: 100px;
  background: linear-gradient(90deg, rgba(62, 157, 165, 1) 0%, rgba(29, 76, 98, 1) 100%);
  color: #fff;


  clip-path: polygon(100% 0%, 0% 0%, 0.00% 23.83%, 1.33% 22.82%, 2.67% 21.83%, 4.00% 20.87%, 5.33% 19.94%, 6.67% 19.04%, 8.00% 18.18%, 9.33% 17.35%, 10.67% 16.55%, 12.00% 15.80%, 13.33% 15.08%, 14.67% 14.40%, 16.00% 13.76%, 17.33% 13.17%, 18.67% 12.62%, 20.00% 12.12%, 21.33% 11.66%, 22.67% 11.24%, 24.00% 10.88%, 25.33% 10.56%, 26.67% 10.29%, 28.00% 10.06%, 29.33% 9.89%, 30.67% 9.77%, 32.00% 9.69%, 33.33% 9.67%, 34.67% 9.69%, 36.00% 9.77%, 37.33% 9.89%, 38.67% 10.06%, 40.00% 10.29%, 41.33% 10.56%, 42.67% 10.88%, 44.00% 11.24%, 45.33% 11.66%, 46.67% 12.12%, 48.00% 12.62%, 49.33% 13.17%, 50.67% 13.76%, 52.00% 14.40%, 53.33% 15.08%, 54.67% 15.80%, 56.00% 16.55%, 57.33% 17.35%, 58.67% 18.18%, 60.00% 19.04%, 61.33% 19.94%, 62.67% 20.87%, 64.00% 21.83%, 65.33% 22.82%, 66.67% 23.83%, 68.00% 24.87%, 69.33% 25.94%, 70.67% 27.02%, 72.00% 28.12%, 73.33% 29.24%, 74.67% 30.38%, 76.00% 31.53%, 77.33% 32.69%, 78.67% 33.86%, 80.00% 35.04%, 81.33% 36.22%, 82.67% 37.41%, 84.00% 38.59%, 85.33% 39.78%, 86.67% 40.96%, 88.00% 42.14%, 89.33% 43.31%, 90.67% 44.47%, 92.00% 45.62%, 93.33% 46.76%, 94.67% 47.88%, 96.00% 48.98%, 97.33% 50.06%, 98.67% 51.13%, 100.00% 52.17%);


  position: relative;
  bottom: 0px;
}


#arthaut {
  height: 100px;
  background-color: #F4C550;
  color: #fff;
  clip-path: polygon(100% 100%, 0% 100%, 0.00% 97.72%, 1.43% 97.67%, 2.86% 97.53%, 4.29% 97.30%, 5.71% 96.98%, 7.14% 96.57%, 8.57% 96.06%, 10.00% 95.47%, 11.43% 94.80%, 12.86% 94.04%, 14.29% 93.19%, 15.71% 92.27%, 17.14% 91.27%, 18.57% 90.20%, 20.00% 89.05%, 21.43% 87.84%, 22.86% 86.57%, 24.29% 85.23%, 25.71% 83.84%, 27.14% 82.39%, 28.57% 80.90%, 30.00% 79.36%, 31.43% 77.79%, 32.86% 76.17%, 34.29% 74.53%, 35.71% 72.87%, 37.14% 71.18%, 38.57% 69.47%, 40.00% 67.76%, 41.43% 66.04%, 42.86% 64.32%, 44.29% 62.60%, 45.71% 60.89%, 47.14% 59.20%, 48.57% 57.53%, 50.00% 55.88%, 51.43% 54.25%, 52.86% 52.67%, 54.29% 51.11%, 55.71% 49.61%, 57.14% 48.14%, 58.57% 46.73%, 60.00% 45.38%, 61.43% 44.08%, 62.86% 42.85%, 64.29% 41.68%, 65.71% 40.59%, 67.14% 39.56%, 68.57% 38.61%, 70.00% 37.74%, 71.43% 36.96%, 72.86% 36.25%, 74.29% 35.63%, 75.71% 35.10%, 77.14% 34.66%, 78.57% 34.30%, 80.00% 34.04%, 81.43% 33.87%, 82.86% 33.80%, 84.29% 33.81%, 85.71% 33.92%, 87.14% 34.12%, 88.57% 34.41%, 90.00% 34.79%, 91.43% 35.27%, 92.86% 35.83%, 94.29% 36.48%, 95.71% 37.21%, 97.14% 38.02%, 98.57% 38.92%, 100.00% 39.89%);
  bottom: -4px;
  position: relative;
}

#artmid {
  height: 100px;
  background: linear-gradient(90deg, rgba(62, 157, 165, 1) 0%, rgba(29, 76, 98, 1) 100%);
  color: #fff;

  position: relative;
}

#artbas {
  height: 100px;
  background-color: #F4C550;
  color: #fff;
  clip-path: polygon(100% 0%, 0% 0%, 0.00% 97.72%, 1.43% 97.67%, 2.86% 97.53%, 4.29% 97.30%, 5.71% 96.98%, 7.14% 96.57%, 8.57% 96.06%, 10.00% 95.47%, 11.43% 94.80%, 12.86% 94.04%, 14.29% 93.19%, 15.71% 92.27%, 17.14% 91.27%, 18.57% 90.20%, 20.00% 89.05%, 21.43% 87.84%, 22.86% 86.57%, 24.29% 85.23%, 25.71% 83.84%, 27.14% 82.39%, 28.57% 80.90%, 30.00% 79.36%, 31.43% 77.79%, 32.86% 76.17%, 34.29% 74.53%, 35.71% 72.87%, 37.14% 71.18%, 38.57% 69.47%, 40.00% 67.76%, 41.43% 66.04%, 42.86% 64.32%, 44.29% 62.60%, 45.71% 60.89%, 47.14% 59.20%, 48.57% 57.53%, 50.00% 55.88%, 51.43% 54.25%, 52.86% 52.67%, 54.29% 51.11%, 55.71% 49.61%, 57.14% 48.14%, 58.57% 46.73%, 60.00% 45.38%, 61.43% 44.08%, 62.86% 42.85%, 64.29% 41.68%, 65.71% 40.59%, 67.14% 39.56%, 68.57% 38.61%, 70.00% 37.74%, 71.43% 36.96%, 72.86% 36.25%, 74.29% 35.63%, 75.71% 35.10%, 77.14% 34.66%, 78.57% 34.30%, 80.00% 34.04%, 81.43% 33.87%, 82.86% 33.80%, 84.29% 33.81%, 85.71% 33.92%, 87.14% 34.12%, 88.57% 34.41%, 90.00% 34.79%, 91.43% 35.27%, 92.86% 35.83%, 94.29% 36.48%, 95.71% 37.21%, 97.14% 38.02%, 98.57% 38.92%, 100.00% 39.89%);
}

#fondart {
  background: linear-gradient(90deg, rgba(62, 157, 165, 1) 0%, rgba(29, 76, 98, 1) 100%);
  color: #fff;


}

/* Bouton Bootstraps */

.button {

  background-color: #F4C550;
  border-color: #F4C550;

}

.card {

  border: 0px;
  min-height: 400px;
}


/* GOOGLE MAP */

.googlemap {
  width: 100%;
  height: 350px;
  border-radius: 50px;
}


/* MvnuArt CV */




h2,
h3,
h4 {

  color: #F4C550;
}




/* Art  */

.art3 {
  height: 100px;
  clip-path: polygon(100% 100%, 0% 100%, 0.00% 86.33%, 2.00% 86.29%, 4.00% 86.15%, 6.00% 85.92%, 8.00% 85.60%, 10.00% 85.19%, 12.00% 84.69%, 14.00% 84.11%, 16.00% 83.44%, 18.00% 82.68%, 20.00% 81.84%, 22.00% 80.92%, 24.00% 79.92%, 26.00% 78.85%, 28.00% 77.70%, 30.00% 76.49%, 32.00% 75.20%, 34.00% 73.86%, 36.00% 72.45%, 38.00% 70.99%, 40.00% 69.47%, 42.00% 67.90%, 44.00% 66.29%, 46.00% 64.64%, 48.00% 62.95%, 50.00% 61.23%, 52.00% 59.48%, 54.00% 57.70%, 56.00% 55.91%, 58.00% 54.10%, 60.00% 52.28%, 62.00% 50.46%, 64.00% 48.63%, 66.00% 46.81%, 68.00% 44.99%, 70.00% 43.19%, 72.00% 41.41%, 74.00% 39.64%, 76.00% 37.91%, 78.00% 36.20%, 80.00% 34.53%, 82.00% 32.90%, 84.00% 31.31%, 86.00% 29.77%, 88.00% 28.28%, 90.00% 26.84%, 92.00% 25.46%, 94.00% 24.15%, 96.00% 22.90%, 98.00% 21.72%, 100.00% 20.61%);

  background: #333333;
  position: relative;
  display: flex;
  bottom: -2px;
}





/* Contact  */

.imgcontact {

  display: flex;
  width: 100px;
  padding: 10px;
  margin: 20px;
}

.imgcontact img {
  width: 100%;
  height: 100%;
  transition: transform 0.5s, scale 0.5s;
}

.imgcontact:hover img {
  transform: rotate(45deg) scale(1.1);
}

.contact {
  text-decoration: none;
  color: #fff;

}




.lien {

  padding: 10px;
}


.btn {

  background-color: #F4C550;
  border: 0px;
}

.btn:hover {

  background-color: #f2d792;
  border: 0px;
}






/* Footer */

.footer {
  display: flex;
  justify-content: center;
  height: 70px;
  align-items: center;
  background: #333333;
  color: #ffffff;
}



/* Scroll button */

#scrollToTopBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;

  font-size: 22px;
  padding: 10px;
  background-color: #F4C550;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#scrollToTopBtn:hover {
  background-color: #F4C550;
}





.otherimg {
  margin: auto;
  width: 60%;

}

h1 {
  color: #F4C550;
  margin: 10px;

}

hr {
  border: 1px solid #F4C550;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: 0px;
  margin-left: 0px;
}

.borderadius {

  border-radius: 8px;
}

/* etoile */

.star {
  font-size: 30px;
  cursor: default;
}

.star.selected {
  color: #F4C550;
}

.rating .star {
  font-size: 30px;
  cursor: default;

}

.rating .star.selected {
  color: #F4C550;
}

.rating.global-rating .star {
  color: #F4C550;
  /* Change la couleur des étoiles en or */
}



/* formulaire */
.form-control {

  width: 500px;

}


.oner {
  font-family: "Alfa Slab One", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 200px;
  /* Taille de police par défaut */
  color: #ffffff;
  position: absolute;
  top: 0;
  left: 20px;
  z-index: 1;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Media queries pour ajuster la taille du texte pour différentes tailles d'écran */
@media screen and (max-width: 1200px) {
  .oner {
    font-size: 150px;
  }
}

@media screen and (max-width: 992px) {
  .oner {
    font-size: 100px;
  }
}

@media screen and (max-width: 768px) {
  .oner {
    font-size: 80px;
  }
}

@media screen and (max-width: 576px) {
  .oner {
    font-size: 200px;
  }
}

.oner2 {
  font-family: "Alfa Slab One", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 200px;
  color: #fff;
  position: absolute;
  top: 0;
  left: 60px;
  z-index: 1;
  /* Pour placer le "1" au-dessus de la div gray overlay */
}


.classcenter {

  display: flex;
  justify-content: center;
  align-items: center;
}

.classcenter2 {


  justify-content: center;
  align-items: center;
}


.form-control {
  width: 100%;
}

.contmin {
  min-height: 85vh;
}

.fontyellow {
  color: #F4C550;
  font-size: 26px;
  display: inline;
}

.logout-link {
  float: right;
}

.container-fluid {
  padding: 0px;
}

.boxwhite {
  padding: 19px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  ;
}



/* top biere */

.text-justify {
  text-align: justify;
}


.phone {
  display: none;
}

@media screen and (max-width: 576px) {
  .pc {
    display: none;
  }

  .phone {
    display: block;
  }
}

.padwhite {

  margin: 10px;
}

.comment-container {
  width: 100%;
  /* Ou la largeur que vous souhaitez */
  overflow-x: auto;
  white-space: nowrap;
}

.box1 {
  display: inline-block;

  /* ajustez la largeur selon vos besoins */
  margin-right: 10px;
  vertical-align: top;
}

.box1 p {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.accueiltop {
  background-image: url('../img/top1screen.png');
  background-size: 100% 100%;
  /* ou background-size: contain; */

  height: 100%;
  width: 100%;

}

/* Pop up  */



.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.popup {
  background-color: #fff;
  width: 300px;
  padding: 20px;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.popup h2 {
  margin-top: 0;
}

.popup button {
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #F4C550;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.imgbefore {
  overflow: hidden;
  position: relative;
  margin-top: -22px !important;
}

.imgaccueil {
  background-image: url('../img/bg2.png');
  background-size: cover;
  background-position: center;

  height: 600px;
  margin: 0;
  padding: 0;
  position: relative;

  transition: transform 0.5s ease;
  background-color: rgba(0, 0, 0, 0.5);
}

.imgaccueil {

  background-size: cover;
  background-position: center;

  height: 600px;
  margin: 0;
  padding: 0;
  position: relative;

  transition: transform 0.5s ease;

}



.up {

  z-index: 999;
}

@media screen and (max-width: 576px) {
  .imgaccueil {
    height: 400px;
  }

}




@media screen and (max-width: 576px) {
  #titre {
    display: none;
  }

}

#titremobile {
  padding: 10px;
  display: none;

}

@media screen and (max-width: 576px) {
  #titremobile {
    display: block;
  }

}

.imgbefore:hover .imgaccueil {
  transform: scale(1.3);

}

.imgaccueil .text-center {
  transition: transform 0.5s ease;

}

.imgbefore:hover .text-center {
  transform: perspective(1000px) translateY(-20px) scale(1.1);

}

/*  transform: perspective(1000px) rotateX(10deg) rotateY(10deg) translateY(-20px) scale(1.1);*/

.textaccueil {
  color: #fff;
  font-size: 60px;
  font-weight: 900;

}

.footer-logo {
  max-width: 100px;
  /* Ajustez selon vos besoins */
}

.form-control {
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  background-color: white;
  border: 2px solid #ced4da;



}