*{
  padding: 0px;
  margin: 0px;
}

body{
  background-color: white;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

header{
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  height: auto;
  background-color: white;
  padding-bottom: 5px;
  position: sticky;
  top: 0;
  z-index: 2;
}

header .contentheader{
  width: 1200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 15px 10px 10px 10px;
  border-bottom: 2px solid black;
  position: relative;
}

header .contentheader h1{
  font-size: 35px;
  font-weight: bold;
  letter-spacing: -1px;
}

header .contentheader nav{
  width: 420px;
}

header .contentheader nav ul{
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

header .contentheader nav ul li{
  list-style-type: none;
}

header .contentheader nav ul li a, header .mobile nav ul li a{
  text-decoration: none;
  color: black;
  font-weight: bold;
  font-size: 16px;
  letter-spacing: normal;
  padding: 5px 0px;
}

header .contentheader nav ul li a:hover, header .mobile nav ul li a:hover{
  color: #3889f2;
  border-bottom: 3px solid #3889f2;
}

header .contentheader .headerbouton, header .mobile .headerbouton, main .apropos .up .left .leftboutons{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

header .contentheader .headerbouton a, header .mobile .headerbouton a, main .apropos .up .left .leftboutons a{
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  padding: 10px 15px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: normal;
  border: 1px solid #3889f2;
}

header .contentheader .headerbouton a:first-child, header .mobile .headerbouton a:first-child, main .apropos .up .left .leftboutons a:first-child{
  color: #3889f2;
}

header .contentheader .headerbouton a:first-child:hover, header .mobile .headerbouton a:first-child:hover, main .apropos .up .left .leftboutons a:first-child:hover{
  background-color: #3889f2;
  color: white;
}

header .contentheader .headerbouton a:last-child, header .mobile .headerbouton a:last-child, main .apropos .up .left .leftboutons a:last-child{
  background-color: #3889f2;
  color: white;
}

header .contentheader .headerbouton a:last-child:hover, header .mobile .headerbouton a:last-child:hover, main .apropos .up .left .leftboutons a:last-child:hover{
  background-color: white;
  color: #3889f2;
}

header .contentheader .fa-bars{
  display: none;
}

header .mobile{
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  background-color: white;
  border-bottom: 2px solid black;
}

header .mobile nav{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 10px;
  margin-top: 30px;
}

header .mobile nav ul{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

header .mobile nav ul li{
  list-style-type: none;
}

header .mobile .fa-xmark{
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 30px;
  padding: 5px 10px;
  border-radius: 5px;
  color: #3889f2;
  border: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

header #mobile{
  display: none;
}

@media screen and (max-width: 1250px) {
  header .contentheader{
    width: 1100px;
  }

  main .apropos .up{
    width: 1100px !important;
  }

  main .apropos .down{
    width: 1100px !important;
  }

  .projet .swiper {
    width: 1100px !important;
  }

  .gallerie .swiper2{
    width: 1100px !important;
  }

  .services .group{
    width: 1100px !important;
  }
  
  .services .affiches{
    width: 1100px !important;
  }

  .services .affiches .affiche img{
    width: 250px !important;
  }

  .contact .informations{
    width: 1100px !important;
  }

  .contact .informations .left img{
    height: 310px !important;
  }

  .contact .informations .center{
    height: 450px !important;
  }

  footer .footer{
    width: 1100px !important;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 50px;
  }
  
  footer .footer .part{
    width: auto !important;
  }
}

@media screen and (max-width: 1150px) {
  header .contentheader{
    width: 900px;
  }

  header .contentheader h1{
    font-size: 30px;
  }

  main .apropos .up{
    width: 900px !important;
  }

  main .apropos .up .left p:first-child{
    font-size: 16px !important;
  }
  
  main .apropos .up .left .text{
    line-height: 25px !important;
    font-size: 16px !important;
  }
  
   main .apropos .up .left h1{
    font-size: 35px !important;
  }
  
  main .apropos .up .left .boutons-icons{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 30px !important;
  }
  
  main .apropos .up .left .information{
    width: 90% !important;
    margin-top: 30px !important;
  }
  
  main .apropos .up .left .information p{
    font-size: 15px !important;
  }

  main .apropos .up .left .information p span{
    font-size: 18px !important;
  }

  main .apropos .up .right{
    width: 300px !important;
    height: 300px !important;
  }

  main .apropos .down{
    width: 900px !important;
  }

  main .apropos .up{
    margin-bottom: 60px !important;
  }

  .projet .swiper {
    width: 900px !important;
  }

  .gallerie .swiper2{
    width: 900px !important;
  }

  .services .group{
    width: 900px !important;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
  }

  .services .affiches{
    width: 900px !important;
  }

  .services .affiches .affiche img{
    width: 200px !important;
  }

  .services .affiches .affiche p{
    font-size: 16px;
    font-weight: bold;
  }

  .contact .informations{
    width: 900px !important;
  }

  .contact .informations .left img{
    height: 260px !important;
  }

  .contact .informations .center{
    height: 400px !important;
    border: 3px solid black !important;
  }

  .contact .informations .right{
    gap: 15px !important;
  }
  
  .contact .informations .right h1{
    font-size: 25px !important;
    margin-bottom: 15px !important;
  }

  .contact .informations .right textarea{
    height: 100px !important;
  }

  footer .footer{
    width: 900px !important;
  }
  
  footer .footer .part h1{
    font-size: 25px;
  }
}

@media screen and (max-width: 950px) {
  header .contentheader{
    width: 800px;
  }

  header .contentheader nav{
    display: none;
  }

  header .contentheader .headerbouton{
    display: none;
  }

  header .contentheader .fa-bars{
    display: block;
    font-size: 30px;
    padding: 5px 10px;
    border-radius: 5px;
    color: #3889f2;
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
  }

  header .contentheader .fa-bars:hover{
    border: 1px solid rgba(56, 137, 242, 0.9);
  }

  main .apropos .up{
    width: 800px !important;
  }

  main .apropos .down{
    width: 800px !important;
    margin-bottom: 60px !important;
  }

  main .apropos .down img{
    width: 45px !important;
    height: 45px !important;
  }

  .projet .swiper {
    width: 800px !important;
  }

  .gallerie .swiper2{
    width: 800px !important;
  }

  .services .group{
    width: 800px !important;
  }

  .services .affiches{
    width: 800px !important;
    gap: 10px !important;
  }

  .contact .informations{
    width: 800px !important;
  }

  .contact .informations .left img{
    height: 220px !important;
  }

  .contact .informations .center{
    height: 380px !important;
  }

  footer .footer{
    width: 800px !important;
  }
}

@media screen and (max-width: 850px) {
  header .contentheader{
    width: 600px;
  }

  main .apropos .up{
    width: 100% !important;
    flex-direction: column;
    gap: 20px;
  }

  main .apropos .up .upright{
    display: block !important;
  }

  main .apropos .up .right{
    display: none !important;
  }

  main .apropos .up .left{
    width: 80% !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  main .apropos .up .left .information{
    width: 90% !important;
  }

  main .apropos .up .left .boutons-icons{
    justify-content: center;
  }

  main .apropos .up .upright{
    width: 280px !important;
    height: 280px !important;
  }

  main .apropos .down{
    width: 600px !important;
  }

  .projet .swiper {
    width: 600px !important;
  }

  .projet .swiper-slide {
    flex-wrap: wrap;
    gap: 20px !important;
  }

  .projet .swiper-slide img {
    width: 100% !important;
    height: 200px !important;
  }

  .projet .swiper-slide .rightslide{
    gap: 20px !important;
    width: 100% !important;
    padding-left: 10px;
    padding-right: 10px;
  }

  .projet .swiper-slide .rightslide h1:first-child{
    font-size: 35px !important;
  }
  
  .projet .swiper-slide .rightslide h1:nth-child(2){
    font-size: 20px !important;
  }
  
  .projet .swiper-slide .rightslide .text{
    font-size: 16px !important;
    line-height: 25px;
  }
  
  .projet .swiper-slide .rightslide .name{
    font-size: 20px !important;
  }

  .gallerie .swiper2{
    width: 600px !important;
  }

  .services .group{
    width: 600px !important;
    padding-left: 50px !important;
    padding-right: 50px !important;
  }

  .services .affiches{
    width: 600px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding-left: 20px;
    padding-right: 20px;
    gap: 50px !important;
  }

  .services .affiches .affiche{
    width: 100% !important;
  }

  .services .affiches .affiche img{
    width: 100% !important;
  }

  .services .affiches .affiche p{
    font-size: 18px !important;
    margin: 10px 20px;
  }

  .contact .informations{
    width: 600px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 50px !important;
  }

  .contact .informations .left{
    width: 100% !important;
  }

  .contact .informations .center{
    display: none;
  }

  .contact .informations .right{
    width: 100% !important;
  }
  
  .contact .informations .right h1{
    font-size: 20px !important;
  }

  footer .footer{
    width: 600px !important;
  }
}

@media screen and (max-width: 600px) {
  main .apropos .up .left{
    width: 95% !important;
  }

  main .apropos .up .left .information{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  main .apropos .up .left .information p{
    font-size: 13px !important;
  }

  main .apropos .up .left .information p:first-child{
    font-size: 13px !important;
  }

  main .apropos .up .left .information p span{
    font-size: 16px !important;
  }

  main .apropos .up .left p:first-child{
    font-size: 15px !important;
  }
  
  main .apropos .up .left .text{
    font-size: 15px !important;
  }

  main .apropos .up .left h1{
    font-size: 30px !important;
  }

  main .apropos .up .upright{
    width: 260px !important;
    height: 260px !important;
  }

  main .apropos .down{
    width: 90% !important;
    gap: 50px !important;
    margin-bottom: 40px !important;
  }

  main .apropos .down img{
    width: 40px !important;
    height: 40px !important;
  }
}

@media screen and (max-width: 600px) {
  .projet .swiper {
    width: 500px !important;
  }

  .projet .swiper-slide {
    gap: 15px !important;
  }

  .projet .swiper-slide img {
    height: 180px !important;
  }

  .projet .swiper-slide .rightslide{
    gap: 15px !important;
  }

  .gallerie .swiper2{
    width: 500px !important;
  }

  .services .group{
    width: 500px !important;
  }

  .services .affiches{
    width: 500px !important;
  }

  .contact .informations{
    width: 500px !important;
  }

  footer .footer{
    width: 500px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  
  footer .footer .part p{
    font-size: 14px !important;
  }

  footer .footer .part a{
    font-size: 14px !important;
  }
}

@media screen and (max-width: 500px) {
  .projet .swiper {
    width: 400px !important;
  }

  .projet .swiper-slide .rightslide{
    gap: 12px !important;
  }

  .projet .swiper-slide img {
    height: 150px !important;
  }

  .gallerie .swiper2{
    width: 400px !important;
  }

  .services .group{
    width: 400px !important;
  }

  .services .affiches{
    width: 400px !important;
  }

  .contact .informations{
    width: 400px !important;
  }

  footer .footer{
    width: 400px !important;
  }
}

@media screen and (max-width: 400px) {
  .projet .swiper {
    width: 320px !important;
  }

  .projet .swiper-slide .rightslide{
    gap: 10px !important;
  }

  .gallerie .swiper2{
    width: 320px !important;
  }

  .services .group{
    width: 320px !important;
  }

  .services .affiches{
    width: 320px !important;
  }

  .contact .informations{
    width: 320px !important;
  }

  .contact .informations .left .information .i1 .info, .contact .informations .left .information .i2 .info{
    flex-direction: column !important;
    align-items: start !important;
  }
  
  .contact .informations .left .information .i1 .info i, .contact .informations .left .information .i2 .info i{
    padding: 5px !important;
  }

  footer .footer{
    width: 320px !important;
  }
}

main, main .apropos{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

main .apropos .up{
display: flex;
align-items: center;
justify-content: space-between;
width: 1200px;
margin-top: 50px;
margin-bottom: 60px;
}

main .apropos .up .upright{
  display: none;
}

main .apropos .up .left{
  width: 60%;
}

main .apropos .up .left p:first-child{
  font-size: 18px;
  text-transform: capitalize;
  font-weight: bold;
  margin-bottom: 20px;
}

main .apropos .up .left .text{
  line-height: 25px;
  font-size: 18px;
  margin-bottom: 30px;
}

main .apropos .up .left p span{
  font-weight: bold;
  text-decoration: underline;
}

main .apropos .up .left h1{
  font-size: 40px;
  font-family: serif;
  margin-bottom: 20px;
}

main .apropos .up .left h1 span{
  color: #3687f2;
}

main .apropos .up .left .boutons-icons{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

main .apropos .up .left .lefticones{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

main .apropos .up .left .lefticones i{
  font-size: 30px;
}

main .apropos .up .left .lefticones i:hover{
  color: #3687f2;
}

main .apropos .up .left .information{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  background-color: black;
  border-radius: 100px;
  padding-left: 30px;
  padding-right: 30px;
  margin-top: 40px;
  border: 1px dashed #3889f2;
  box-shadow: 2px 5px 30px #3889f2;
}

main .apropos .up .left .information p{
  color: white;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 0px !important;
}

main .apropos .up .left .information p span{
  color: #3687f2;
}

.line{
  height: 60%;
  border: 1px solid white;
}

@keyframes bordercolor {
  0%{
    box-shadow: 0px 0px 2px #3687f2;
  }

  50%{
    box-shadow: 0px 0px 10px #3687f2;
  }

  100%{
    box-shadow: 0px 0px 20px #3687f2;
  }
}

main .apropos .up .right, main .apropos .up .upright{
  width: 350px;
  height: 350px;
  border-radius: 100%;
  border: 1px solid #3687f2;
  animation: bordercolor 10s infinite;
}

main .apropos .down{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 1200px;
  gap: 50px;
  overflow: hidden;
  margin-bottom: 100px;
}

main .apropos .down img{
  width: 60px;
  height: 60px;
}

/* Projets */

.projet{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.projet .swiper {
  width: 1200px;
  margin-bottom: 100px;
}

.projet .title, .gallerie .title, .services .title, .contact .title{
  color: #3889f2;
  font-size: 35px;
  margin-bottom: 10px;
}

.projet .bottomline, .gallerie .bottomline, .services .bottomline, .contact .bottomline{
  width: 50px;
  border: 3px solid #000;
  border-radius: 20px;
  margin-bottom: 50px;
}

.projet .swiper-slide {
  background: #fff;
  display: flex;
  justify-content: center;
  gap: 50px;
}

.projet .swiper-slide img {
  display: block;
  width: 50%;
  /* height: 50%; */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  object-fit: cover;
}

.projet .swiper-slide .rightslide{
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 50%;
}

.projet .swiper-slide .rightslide h1:first-child{
  font-size: 50px;
  font-weight: bold;
}

.projet .swiper-slide .rightslide h1:nth-child(2){
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
}

.projet .swiper-slide .rightslide .text{
  font-size: 20px;
  text-transform: capitalize;
}

.projet .swiper-slide .rightslide .slideline{
  width: 40%;
  border: 2px solid #444;
  border-radius: 10px;
}

.projet .swiper-slide .rightslide .name{
  color: #3889f2;
  font-size: 25px;
  font-weight: bold;
}

.projet .autoplay-progress {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 10;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: var(--swiper-theme-color);
}

.projet .autoplay-progress svg {
  --progress: 0;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 10;
  width: 100%;
  height: 100%;
  stroke-width: 4px;
  stroke: var(--swiper-theme-color);
  fill: none;
  stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
  stroke-dasharray: 125.6;
  transform: rotate(-90deg);
}

.gallerie{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.gallerie .swiper2 {
  width: 1200px;
  margin-bottom: 100px;
  overflow: hidden;
}

.gallerie .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gallerie .swiper-slide img {
  display: block;
  width: 100%;
  object-fit: cover;
}

.services{
  width: 100%;
}

.services, .services .group{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.services .bottomline{
  margin-bottom: 20px;
}

.services .texttitle{
  font-size: 16px;
  font-weight: bold;
  letter-spacing: normal;
  color: #3889f2;
  margin-bottom: 50px;
}

.services .affiches{
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
  width: 1200px;
  margin-bottom: 100px;
}

.services .affiches .affiche{
  width: 25%;
}

.services .affiches .affiche img{
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-bottom: 5px;
}

.services .affiches .affiche p{
  font-size: 16px;
  font-weight: bold;
}

.services .affiches .affiche p span{
  font-size: 20px;
  color: #3889f2;
}

.contact{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
  width: 100%;
}

.contact .informations{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 1200px;
  margin-bottom: 100px;
}

.contact .informations .left{
  width: 48%;
}

.contact .informations .left img{
  width: 100%;
  height: 350px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-bottom: 20px;
}

.contact .informations .left .information{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 30px;
}

.contact .informations .left .information .i1, .contact .informations .left .information .i2{
  display: flex;
  flex-direction: column;
  gap: 30px;
  justify-content: space-between;
}

.contact .informations .left .information .i1 .info, .contact .informations .left .information .i2 .info{
  display: flex;
  align-items: center;
  gap: 5px;
}

.contact .informations .left .information .i1 .info i, .contact .informations .left .information .i2 .info i{
  padding: 10px;
  border: 1px solid black;
  border-radius: 50px;
  color: #fff;
  background-color: #000;
}

.contact .informations .left .information .i1 .info i:hover, .contact .informations .left .information .i2 .info i:hover{
  color: #000;
  background-color: #fff;
}

.contact .informations .left .information .i1 .info div, .contact .informations .left .information .i2 .info div{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact .informations .left .information .i1 .info div .t1, .contact .informations .left .information .i2 .info div .t1{
  font-size: 18px;
  font-weight: bold;
}

.contact .informations .center{
  height: 480px;
  border: 4px solid black;
  border-radius: 20px;
}

.contact .informations .right{
  width: 48%;
  display: flex;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  gap: 20px;
}

.contact .informations .right h1{
  font-size: 30px;
  font-weight: 800;
  margin-bottom: 20px;
}

.contact .informations .right input{
  height: 50px;
  border-radius: 50px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 16px;
  color: #000;
  font-weight: bold;
}

.contact .informations .right textarea{
  height: 140px;
  border-radius: 30px;
  padding: 20px;
  font-size: 18px;
  font-weight: bold;
}

.contact .informations .right a{
  background-color: #3889f2;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 15px !important;
  text-transform: uppercase;
  text-decoration: none !important;
  font-weight: bold;
  color: #fff;
  border-radius: 50px;
  border: 1px solid #3889f2;
}

.contact .informations .right a:hover{
  background-color: #fff;
  color: #3889f2;
}

footer .footer{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 1200px;
  margin-bottom: 50px;
  padding-top: 30px;
  border-top: 2px solid #000;
}

footer .footer .part{
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 20px;
}

footer .footer .part h1{
  text-transform: capitalize;
}

footer .footer .part1 p{
  font-size: 16px;
  font-weight: 600;
  line-height: 25px;
}

footer .footer .part1 a{
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
  padding: 10px 15px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: normal;
  border: 1px solid #3889f2;
  background-color: #3889f2;
  color: #fff;
}

footer .footer .part1 a:hover{
  background-color: #fff;
  color: #3889f2;
}

footer .footer .part2 ul{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

footer .footer .part2 ul li{
  list-style-type: none;
}

footer .footer .part2 ul li a{
  text-decoration: none !important;
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
  padding: 5px 0px;
  color: #000;
}

footer .footer .part2 ul li a:hover{
  color: #3889f2;
  border-bottom: 3px solid #3889f2;
}

footer .footer .part3 p{
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
}

footer .footer .part4 .footericons{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

footer .footer .part4 .footericons i{
  font-size: 25px;
}

footer .footer .part4 .footericons i:hover{
  color: #3889f2;
}

footer .footer .part4 p{
  font-size: 16px;
  font-weight: 600;
}