@import url("https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@300&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: smooth;
}
html {
  scroll-behavior: smooth;
}

body {
  width: 100%;
  height: 300vh;
}

header {
  margin-bottom: 4.47vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(/assets/pexels-cmonphotography-1809644.jpg);
  background-position: center;
  background-size: 100%;
  width: 100%;
  height: 51vw;
}
/************************************************************************************************panel*/

.panel nav.scroll {
  background: #000;
  padding-top: 1.4vw;
  transition: 0.4s;
  height: 4vw;
  width: 100%;
  z-index: 1;
}
.panel nav.scroll li.box {
  margin: 0.7vw;
}
.panel nav.scroll ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  padding: 0;
}
div.panel nav.scroll ul li a.pa {
  text-decoration: none;
  font-family: "Frank Ruhl Libre", serif;
  font-size: 1.5vw;
  font-weight: lighter;
  color: #fff;
  cursor: pointer;
}
div.panel nav.scroll ul li p.pa {
  font-family: "Frank Ruhl Libre", serif;
  font-size: 1.5vw;
  font-weight: lighter;
  color: #fff;
}
div.panel nav.scroll ul li a.pa:hover {
  color: rgb(79, 79, 255);
  transition: 0.2s;
}
/************************************************************************************************panel*/
header .profil {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 40%;
  height: 35vw;
}
header .profil .photo {
  background-image: url(/assets/photo\ portfolio\ -\ Copie.jpg);
  background-size: 100%;
  width: 7vw;
  height: 10.5vw;
}
header .profil h1 {
  color: rgb(255, 255, 255);
  font-family: "Frank Ruhl Libre", serif;
  font-weight: lighter;
  font-size: 10.5vw;
  text-align: center;
  font-style: italic;
}
header .presentation {
  font-family: "Frank Ruhl Libre", serif;
  margin-left: 7vw;
  background: rgba(0, 0, 0, 0.267);
  color: rgb(255, 255, 255);
  width: 60%;
  height: 38vw;
}
header .presentation h2 {
  border-bottom: solid 0.044vw #fff;
  text-align: center;
  margin: 2.1vw;
  margin-bottom: none;
  font-size: 5vw;
  font-weight: lighter;
}
header .presentation p.pr {
  font-size: 1.3vw;
  text-align: justify;
  margin: 2.1vw;
  font-weight: lighter;
}
/***********************************************<fin>******************************************************/
#line1 {
  background: #000;
  margin: 0;
  height: 0.044vw;
  width: 100%;
}

/*****************************************présentations des projet******************************************/
section#projet {
  margin: 2.24vw;
  height: 105vh;
}
section#projet .h1 {
  display: flex;
  justify-content: center;
  width: 100%;
}
section#projet .h1 h1 {
  color: #000;
  font-family: "Frank Ruhl Libre", serif;
  font-weight: lighter;
  font-size: 4.42vw;
  text-align: center;
  border-radius: 0.89vw;
  width: 45%;
  margin: 4.42vw;
  margin-top: 2.21vw;
  box-shadow: rgb(0, 0, 0, 0.1) 0 0 0.89vw 0.45vw;
  font-style: italic;
}

section#projet .content {
  display: flex;
  justify-content: center;
  align-items: center;
}
section#projet .content .content1 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  margin: 2.21vw;
  background: rgba(155, 10, 10, 0.5);
  border-radius: 1.34vw;
  height: 35.76vw;
  width: 44.71vw;
}
section#projet .content .content1 h2 {
  width: 90%;
  border-bottom: solid 0.044vw rgb(0, 0, 0);
  font-family: "Frank Ruhl Libre", serif;
  font-weight: lighter;
  margin: 2.24vw;
  margin-bottom: 0;
  text-align: center;
  font-size: 2.24vw;
}
section#projet .content .content1 .draw {
  width: 40.24vw;
  height: 22.35vw;
  background-image: url(/assets/photo\ projet.jpg);
  background-size: 100%;
  border-radius: 0.89vw;
}
section#projet .content .content1 a {
  font-family: "Frank Ruhl Libre", serif;
  font-weight: lighter;
  border-radius: 0.45vw;
  background: #fff;
  color: #000;
  font-size: 1.34vw;
  padding: 0.45vw;
  box-shadow: rgba(0, 0, 0, 0.287) 0 0.45vw 0.45vw;
}
section#projet .content .content1 a:hover {
  transition: 200ms;
  box-shadow: rgba(0, 0, 0, 0.287) 0 0 0;
  background: rgb(16, 90, 175);
  transform: translateY(0.45vw);
  cursor: pointer;
}

section#projet .content .content2 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  margin: 2.24vw;
  background: rgb(16, 90, 175, 0.5);
  border-radius: 1.34vw;
  height: 35.76vw;
  width: 44.71vw;
}
section#projet .content .content2 h2 {
  width: 90%;
  border-bottom: solid 0.044vw rgb(0, 0, 0);
  font-family: "Frank Ruhl Libre", serif;
  font-weight: lighter;
  margin: 2.24vw;
  margin-bottom: 0;
  text-align: center;
  font-size: 2.24vw;
}
section#projet .content .content2 .logo {
  width: 40.24vw;
  height: 22.35vw;
  background-image: url(/assets/photo\ logo.jpg);
  background-size: 100%;
  border-radius: 0.89vw;
}
section#projet .content .content2 a {
  font-family: "Frank Ruhl Libre", serif;
  font-weight: lighter;
  border-radius: 0.45vw;
  background: #fff;
  color: #000;
  font-size: 1.34vw;
  padding: 0.45vw;
  box-shadow: rgba(0, 0, 0, 0.287) 0 0.45vw 0.45vw;
}
section#projet .content .content2 a:hover {
  transition: 200ms;
  box-shadow: rgba(0, 0, 0, 0.287) 0 0 0;
  background: rgb(170, 44, 44);
  transform: translateY(0.45vw);
  cursor: pointer;
}

/***********************************************<fin>*******************************************************/
#line2 {
  background: #000;
  margin: 0;
  height: 0.044vw;
  width: 100%;
}
/*****************************************présentations des sites*******************************************/
section#site1 .h1 {
  margin: 2.24vw;
  display: flex;
  justify-content: center;
  width: 100%;
}
section#site1 .h1 h1 {
  color: #000;
  font-family: "Frank Ruhl Libre", serif;
  font-weight: lighter;
  font-size: 4.47vw;
  text-align: center;
  border-radius: 0.89vw;
  width: 40%;
  margin-top: 4.47vw;
  box-shadow: rgb(0, 0, 0, 0.1) 0 0 0.89vw 0.45vw;
  font-style: italic;
}

section#site1 {
  margin: 2.24vw;
  height: 200vh;
}

section#site1 #eng1 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100vh;
  width: 100%;
}
section#site1 #eng1 .enc1 {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  background: rgba(34, 99, 173, 0.267);
  height: 40.24vw;
  width: 22.35vw;
  border-radius: 1.34vw;
}
section#site1 #eng1 .enc1 p {
  font-family: "Frank Ruhl Libre", serif;
  margin: 1.79vw;
  text-align: justify;
  font-size: 1.12vw;
}
section#site1 #eng1 .enc1 p a {
  text-decoration: none;
  color: #000;
  background-color: #fff;
  padding: 0.45vw;
  border-radius: 0.45vw;
}
section#site1 #eng1 .enc1 p a:hover {
  background-color: #000;
  color: #fff;
  transition: 200ms;
}
section#site1 #eng1 .enc1 h2 {
  border-bottom: solid 0.044vw rgb(0, 0, 0);

  font-family: "Frank Ruhl Libre", serif;
  font-weight: lighter;
  margin: 2.24vw;
  margin-bottom: 0;
  text-align: center;
  font-size: 2.24vw;
}
section#site1 #eng1 .ent1 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: rgba(34, 99, 173, 0.267);
  height: 31.29vw;
  width: 58.12vw;
  border-radius: 1.34vw;
}
section#site1 #eng1 .ent1 .img1 {
  background-image: url(/assets/screen\ site\ coworking.png);
  background-position: center;
  background-size: 100%;
  height: 26.82vw;
  width: 53.65vw;
}
.toogle {
  background: linear-gradient(90deg, rgb(0, 0, 0), rgba(0, 0, 0, 0));
  height: 13.41vw;
  width: 44.71vw;
}
a {
  text-decoration: none;
}
.toogle p.toogle {
  color: #fff;
  font-family: "Frank Ruhl Libre", serif;
  font-weight: lighter;
  padding-top: 4.47vw;
  margin-top: 6.71vw;
  margin-bottom: 0;
  text-align: center;
  font-size: 2.24vw;
}
.toogle p.toogle:hover {
  font-size: 2.68vw;
  transition: 200ms;
  background: rgba(34, 99, 173, 0.267);
}

/********************************************************************<fin>**********************************************/
section#site1 {
  height: 100vh;
}

section#site1 #eng2 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100vh;
  width: 100%;
}
section#site1 #eng2 .enc2 {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  background: rgba(122, 0, 0, 0.267);
  height: 40.24vw;
  width: 22.35vw;
  border-radius: 1.34vw;
}
section#site1 #eng2 .enc2 p {
  font-family: "Frank Ruhl Libre", serif;
  margin: 1.39vw;
  text-align: justify;
  font-size: 1.12vw;
}
section#site1 #eng2 .enc2 p a {
  text-decoration: none;
  color: #000;
  background-color: #fff;
  padding: 0.45vw;
  border-radius: 0.45vw;
}
section#site1 #eng2 .enc2 p a:hover {
  background-color: #000;
  color: #fff;
  transition: 200ms;
}
section#site1 #eng2 .enc2 h2 {
  border-bottom: solid 0.044vw rgb(0, 0, 0);
  width: 90%;
  font-family: "Frank Ruhl Libre", serif;
  font-weight: lighter;
  margin: 2.24vw;
  margin-bottom: 0;
  text-align: center;
  font-size: 2.24vw;
}
section#site1 #eng2 .ent2 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: rgba(122, 0, 0, 0.267);
  height: 31.29vw;
  width: 58.12vw;
  border-radius: 1.34vw;
}
section#site1 #eng2 .ent2 .img2 {
  background-image: url(/assets/screen\ site\ de\ vetements.png);
  background-position: center;
  background-size: 100%;
  height: 26.82vw;
  width: 53.65vw;
}
.toogle2 {
  background: linear-gradient(90deg, rgb(0, 0, 0), rgba(0, 0, 0, 0));
  height: 13.41vw;
  width: 44.71vw;
}
.toogle2 p.toogle2 {
  color: #fff;
  font-family: "Frank Ruhl Libre", serif;
  font-weight: lighter;
  padding-top: 4.47vw;
  margin-top: 6.71vw;
  margin-bottom: 0;
  text-align: center;
  font-size: 2.24vw;
}
.toogle2 p.toogle2:hover {
  font-size: 2.68vw;
  transition: 200ms;
  background: rgba(122, 0, 0, 0.267);
}