* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
}

body {
  background-color: #1E2329;
  background-image: linear-gradient(#22272D 0.2vw, transparent 0.2vw), linear-gradient(90deg, #22272D 0.2vw, transparent 0.2vw);
  background-size: 8.32vw 8.32vW;
  font-family: Clash;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}


/*--------------------------------------------------*/


.container1 {
  width: 100%;
  height: 40vw;
  display: flex;
  justify-content: left;
  align-items: center;
  padding: 3VW 0;
  overflow: hidden;

}

.grid-item {
  display: grid;
  grid-template-columns: 12VW 12VW 12VW 12VW;
  grid-template-rows: 5vw 5vw 12vw 12vw;
  gap: 1.5vw;
  margin-left: 3vw;
}

.grid-item div {
  display: flex;
  justify-content: center;
  align-items: center;
}


#name-item {
  grid-column: 1 /4;
  grid-row: 1 /2;
}

#name-item h1 {
  font-family: Upton;
  font-weight: 700;
  font-size: 7vw;
  text-transform: uppercase;
  color: #f2e3d5;
  font-style: oblique 30deg;
}

#name-item img {
  width: 12vw;
  margin-left: 1vw;
}

#def-item {
  grid-column: 1 /4;
  grid-row: 2 /3;
}

#def-item h2 {
  font-family: Upton;
  font-weight: 700;
  font-size: 7vw;
  text-transform: uppercase;
  -webkit-text-stroke-width: 0.05vw;
  -webkit-text-stroke-color: #f2e3d5;
  -webkit-text-fill-color: transparent;
  font-style: oblique 30deg;
}

#def-item img {
  width: 7.5vw;
}

#info-item1 {
  background-color: #8405e7;
  border-radius: 2vw;
  grid-column: 1 /2;
  grid-row: 3 /4;

}

#info-item1 p{
  color: #fff6ee;
  font-family: Clash;
  font-weight: 800;
  font-size: 5.5vw;
  line-height: 0.7;
  text-align: center;

}

#info-item2 {
  background-color: #cdff00;
  grid-column: 2 /4;
  grid-row: 3 /4;
  border-radius: 2vw 0 0 2vw;
  clip-path: polygon(0 0, 96% 0%, 79.5% 100%, 0% 100%);
}

#info-item2 p {
  color: #fff6ee;
  font-family: Clash;
  font-weight: 800;
  font-size: 5.5vw;
  line-height: 0.8;
  text-align: left;
  margin-right: 2.5vw;
}

#info-item3 {
  background-color: #ee1653;
  grid-column: 1 /4;
  grid-row: 4 /5;
  clip-path: polygon(0 0, 85.5% 0%, 74.5% 100%, 0% 100%);
  border-radius: 2vw 0 0 2vw;
  height: 100%;
}

#info-item3 p {
  color: #fff6ee;
  font-family: Clash;
  font-weight: 800;
  font-size: 5.5vw;
  line-height: 0.8;
  text-align: left;
  margin-left: 2.5vw;
}

#picture-bg-item {
  grid-column: 4 /8;
  grid-row: 1 /5;
}

#picture-bg-item img {
  width: 75vw;
  position: relative;
  margin-left: -8vw;
}


/*--------------------------------------------------*/


.container2 {
  width: 100%;
  height: 15vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 5.5vw;

}

.container2 #item-paragraphe {
  width: 55%;
}

.container2 #item-paragraphe p,strong {
  font-family: Clash;
  font-size: 1.1vw;
  text-align: justify;
  font-weight: 350;
  line-height: 140%;
}

.container2 #item-paragraphe p b {
  font-weight: 500;
  font-style: italic;
  color: #cdff00;
}

.container2 #item-paragraphe p span {
  font-weight: 900;
  text-transform: uppercase;
}


.container2 #asset2, img {
  width: 10vw;
}






/*--------------------------------------------------*/


.container3 {
  width: 100%;
  height: 42vw;
  padding-bottom: 10vw;
  border-bottom: #ee1653 5px solid;
  display: flex;
  justify-content: space-around;
  align-items: start;
}

.container3 #competence-item1 {
  height: 100%;
  width: 25%;
  border-radius: 50vw 50vw 0 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container3 a {
  position: absolute;
  font-family: Upton;
  font-weight: 900;
  font-size: 7.5vw;
  text-transform: uppercase;
  transform: rotate(-90deg);
  -webkit-text-stroke-width: 0.07vw;
  -webkit-text-stroke-color: #f2e3d5;
  -webkit-text-fill-color: transparent;
  transition: 0.4s ease-in-out;
}

.container3 a:hover {
  color: #f2e3d5;
  -webkit-text-stroke-width: 0px;
  -webkit-text-stroke-color: #f2e3d5;
  -webkit-text-fill-color: #f2e3d5;
  transform: rotate(-90deg) scale(1.05);
}



.container3 #formations-item2 {
  height: 100%;
  width: 25%;
  border-radius: 0 0 50vw 50vw;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

}

.container3 #atouts-item3 {
  height: 100%;
  width: 25%;
  border-radius: 50vw 50vw 0 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container3 img {
  width: 120%;

}


/*--------------------------------------------------*/


.container4 {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: #cdff00 solid 5px;
  padding: 12vw 0 5vw 0;
}

.container4 #title1 {
  position: absolute;
  height: auto;
  margin-bottom: 42%;
  width: 92%;
}

.container4 #title1 h3 {
  color: #ee1653;
  font-family: Upton;
  font-size: 6vw;
  font-weight: 900;
  font-style: oblique 20deg;
  text-transform: uppercase;
  text-align: center;
}

.grid-item3 {
  display: grid;
  width: 90%;
  height: 28vw;
  justify-content: center;
  align-items: center;
  grid-template-columns: 30% 70%;
  grid-template-rows: repeat(2, 1fr);
  gap: 2vw;
}

.grid-item3 div {
  display: flex;
  justify-content: left;
  align-items: center;
}

.label1 {
  grid-column: 1/2;
  grid-row: 1/2;
  background-color: #ee1653;
  height: 100%;
}

.label2 {
  grid-column: 1/2;
  grid-row: 2/3;
  background-color: #ee1653;
  height: 100%;
}

.label3 {
  grid-column: 1/2;
  grid-row: 3/4;
  background-color: #ee1653;
  height: 100%;
}

.grid-item3 .label1 p {
  font-family: Upton;
  font-weight: 800;
  font-size: 6vw;
  line-height: 80%;
  color: #1E2329;
  text-transform: uppercase;
  margin-left: 1vw;
}

.grid-item3 .label2 p {
  font-family: Upton;
  font-weight: 800;
  font-size: 6vw;
  line-height: 80%;
  color: #1E2329;
  text-transform: uppercase;
  margin-left: 1vw;
}

.grid-item3 .label3 p {
  font-family: Upton;
  font-weight: 800;
  font-size: 6vw;
  line-height: 80%;
  color: #1E2329;
  text-transform: uppercase;
  margin-left: 1vw;
}

#section1 {
  grid-column: 2/3;
  grid-row: 1/2;
  height: 100%;
  background-color: #f2e3d5;
  background-image: linear-gradient(#FFF7EF 0.1vw, transparent 0.1vw), linear-gradient(90deg, #FFF7EF 0.1vw, transparent 0.1vw);
  background-size: 4.5vw 4.5vW;
  background-position: center;
}


.grid-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 100%;
  width: 100%;
  gap: 1vw
}

.grid-section div {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
}

.grid-section #item {
  height: 100%;
  width: 100%;
}

.grid-section #item p:first-of-type {
  font-size: 1.8vw;
  text-transform: uppercase;
  font-weight: 500;
  color: #1E2329;
  margin-left: 2vw;
  font-family: Clash;
}

.grid-section #item p:last-of-type {
  font-size: 1.4vw;
  font-weight: 400;
  color: #1E2329;
  line-height: 1;
  margin-left: 2vw;
  font-family: Clash;
}


#section2 {
  grid-column: 2/3;
  grid-row: 2/3;
  height: 100%;

  background-color: #f2e3d5;
  background-image: linear-gradient(#FFF7EF 0.1vw, transparent 0.1vw), linear-gradient(90deg, #FFF7EF 0.1vw, transparent 0.1vw);
  background-size: 4.5vw 4.5vW;
  background-position: center;
}


#section3 {
  grid-column: 2/3;
  grid-row: 3/4;
  height: 100%;

  background-color: #f2e3d5;
  background-image: linear-gradient(#FFF7EF 0.1vw, transparent 0.1vw), linear-gradient(90deg, #FFF7EF 0.1vw, transparent 0.1vw);
  background-size: 4.5vw 4.5vW;
  background-position: center;
}



/*--------------------------------------------------*/


.container5 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60vw;
  border-bottom: #8405e7 solid 5px;
}

.container5 #title2 {
  position: absolute;
  height: auto;
  left: 72%;
  margin-bottom: 47%;
}

.container5 #title2 h3 {
  color: #cdff00;
  font-family: Upton;
  font-size: 6vw;
  font-weight: 900;
  font-style: oblique 20deg;
  text-transform: uppercase;
  text-align: center;
}

.container5 #grid-item2 {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(5, 1fr);
  width: 90%;
  height: 50vw;
  gap: 0vw 2vw;
  margin: 3vw 0;
}

.grid {
  border-radius: 2vw;
  border: 2px solid #fff6ee;
  display: inline;
  justify-content: center;
  align-items: start;
}

.section1 {
  grid-row: 1/4;
  grid-column: 1/4;
}

.section2 {
  grid-row: 2/5;
  grid-column: 4/7;
}

.section3 {
  grid-row: 3/6;
  grid-column: 7/10;
}

hr {
  width: 100%;
  padding: 0;
  margin: 0;

}

.item-hr1 {
  grid-column: 4/10;
  grid-row: 1/2;
  display: flex;
  justify-content: end;
  align-items: center;
}

.item-hr2 {
  grid-column: 7/10;
  grid-row: 2/3;
  display: flex;
  justify-content: end;
  align-items: center;

}

.item-hr3 {
  grid-column: 1/4;
  grid-row: 4/5;
  display: flex;
  justify-content: start;
  align-items: center;

}

.item-hr4 {
  grid-column: 1/7;
  grid-row: 5/6;
  display: flex;
  justify-content: start;
  align-items: center;
}

.grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.grid #date {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.grid h4 {
  font-family: StretchPro;
  color: #fff6ee;
  font-style: oblique 20deg;
  font-size: 2vw;
  font-weight: 500;
}

.grid #date h4 {
  text-align: center;
  font-family: StretchPro;
  color: #fff6ee;
  font-style: oblique 20deg;
  font-size: 2vw;
  margin: 0.5VW 0;
}

.grid #date hr {
  width: 24vw;
  margin: 0.7vw 0;
}

.grid #info {
  text-align: left;
  width: 80%;
}

.grid #info h5 {
  font-family: Upton;
  color: #cdff00;
  font-size: 2.3vw;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.4vw;
}

.grid #info h6 {
  font-family: Clash;
  font-weight: 500;
  color: #cdff00;
  font-size: 0.8vw;
  font-style: oblique 20deg;
}

.grid #info p {
  font-family: Clash;
  font-weight: 300;
  color: #fff6ee;
  margin: 2vw 0;
  font-size: 1vw;
  text-align: justify;
}

.grid #info-plus1 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid #info-plus1 hr {
  width: 22%;
  color: #FFF7EF;

}

.grid #info-plus1 p {
  color: #FFF7EF;
  font-size: 1vw;
  font-weight: 400;
  margin-right: 8%;
  font-style: oblique 20deg;
}

.grid #info-plus2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid #info-plus2 hr {
  width: 80%;
  color: #FFF7EF;

}

.grid #info-plus2 p {
  color: #FFF7EF;
  font-size: 1vw;
  font-weight: 400;
  margin-right: 8%;
  font-style: oblique 20deg;
}

.grid #info-plus3 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid #info-plus3 hr {
  width: 36%;
  color: #FFF7EF;

}

.grid #info-plus3 p {
  color: #FFF7EF;
  font-size: 1vw;
  font-weight: 400;
  margin-right: 8%;
  font-style: oblique 20deg;
}

/*--------------------------------------------------*/

.container6 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 70vw;
}

.container6 .bg-atouts {
  width: 90%;
  height: 90%;
  background-image: url(../IMAGE/BACKGROUND/bg-atouts.svg);
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: center;
}

.container6 .bg-atouts div p {
  color: #f2e3d5;
  font-family: Clash;
  font-size: 2.5vw;
  font-weight: 500;
  transition: 0.3s ease-in-out;
}

.container6 .bg-atouts #label1 {
  position: absolute;
  left: 22%;
  margin-top: 13%;
}

.container6 .bg-atouts #label2 {
  position: absolute;
  left: 55%;
  margin-top: 20%;
}

.container6 .bg-atouts #label3 {
  position: absolute;
  left: 63%;
  margin-top: 47%;
}

.container6 .bg-atouts #label4 {
  position: absolute;
  left: 40%;
  margin-top: 30%;
}

.container6 .bg-atouts #label5 {
  position: absolute;
  left: 17%;
  margin-top: 53%;
}

.container6 .bg-atouts div p:hover {
  transform: scale(1.1);
}

.container6 #title3 {
  position: absolute;
  height: auto;
  left: 10%;
  margin-bottom: 60%;
}

.container6 #title3 hr {
  width: 500%;
}

.container6 #title3 h3 {
  color: #8405e7;
  font-family: Upton;
  font-size: 6vw;
  font-weight: 900;
  font-style: oblique 20deg;
  text-transform: uppercase;
  text-align: center;
}