body{
  font-family: "GT Sectra";
}
img{
  width: 100%;
}
@font-face{
  font-family: "GT Sectra";
  src: url("typo/gt-sectra-fine-book.ttf");
  font-size: 10%;
}


.reinventer{
  width: 32%;
  position: absolute;
  margin-left: 6%;
  margin-top: 0.5%;
  z-index: 10;
}

.accueil1{
  transform: rotate(-55deg);
  width: 23%;
  position: absolute;
  margin-left: 60%;
  margin-top: 12%;

}

.accueil1 :hover{
		transform: scale(1.3);
		z-index: 2;
	}



.accueil2{
  transform: rotate(45deg);
  width: 14%;
  position: absolute;
  margin-left: 49%;
  margin-top: 19.5%;
}
.accueil2 :hover{
		transform: scale(1.3);
		z-index: 2;
	}



.accueil3{
  transform: rotate(140deg);
  width: 14%;
  position: absolute;
  margin-left: 75%;
  margin-top: 41%;
}
.accueil3 :hover{
		transform: scale(1.3);
		z-index: 2;
	}



.accueil4{
  transform: rotate(90deg);
  width: 17%;
  position: absolute;
  margin-left: 10%;
  margin-top: 14.5%;
  z-index: 9;
}
.accueil4 :hover{
		transform: scale(1.3);
		z-index: 2;
	}



.accueil5{
  transform: rotate(3deg);
  width: 30%;
  position: absolute;
  margin-left: 7.5%;
  margin-top: 26%;
  z-index: 0;
}
.accueil5 :hover{
		transform: scale(1.3);
		z-index: 2;
	}



.accueil6{
  transform: rotate(20deg);
  width: 15%;
  position: absolute;
  margin-left: 33.5%;
  margin-top: 33%;
}
.accueil6 :hover{
		transform: scale(1.3);
		z-index: 2;
	}



.accueil7{
  transform: rotate(-115deg);
  width: 20%;
  position: absolute;
  margin-left: 44%;
  margin-top: 32%;
}
.accueil7 :hover{
		transform: scale(1.3);
		z-index: 2;
	}



.accueil8{
  transform: rotate(145deg);
  width: 14%;
  position: absolute;
  margin-left: 47%;
  margin-top: 3%;
}
.accueil8 :hover{
		transform: scale(1.3);
		z-index: 2;
	}



.accueil9{
  transform: rotate(190deg);
  width: 30%;
  position: absolute;
  margin-left: 20%;
  margin-top: 7%;
  z-index: 9;
}
.accueil9 :hover{
		transform: scale(1.3);
		z-index: 2;
	}



.accueil10{
  transform: rotate(-115deg);
  width: 11%;
  position: absolute;
  margin-left: 67%;
  margin-top: 3%;
}
.accueil10 :hover{
		transform: scale(1.3);
		z-index: 2;
	}





.titre1{
  position: absolute;
  z-index: 10;
  width: 15%;
  margin-top: 4%;
  margin-left: 5.5%;
}

.img1{
  position: absolute;
  margin-top: -15%;
  width: 50%;
  z-index: 0;
}
.article1{
  color : #ff72e0;
  margin-left: 50%;
  margin-top: 8%;
  margin-right: 10%;
  position: absolute;
  font-size: 80%;

}

.italique{
  margin-top: 5%;
  margin-bottom: 40%;
}
.bottom{
  position: absolute;
  margin-top: 100%;
  margin-left: 12%;
  padding-bottom: 3%;
  z-index: 12;
  color : #ff72e0;
}





.titre2{
  position: absolute;
  z-index: 10;
  width: 10%;
  margin-top: 4%;
  margin-left: 5.5%;
}

.img2{
  position: absolute;
  margin-top: 3%;
  width: 40%;
  z-index: 0;
}
.article2{
  color : #ff72e0;
  margin-left: 50%;
  margin-top: 8%;
  margin-right: 10%;
  position: relative;
  font-size: 80%;

}

.italique{
  margin-top: 5%;
  margin-bottom: 40%;
}





.titre3{
  position: absolute;
  z-index: 10;
  width: 15%;
  margin-top: 4%;
  margin-left: 5.5%;
}

.img3{
  position: absolute;
  margin-top: 3%;
  width: 40%;
  z-index: 0;
}
.article3{
  color : #ff72e0;
  margin-left: 50%;
  margin-top: 8%;
  margin-right: 10%;
  margin-bottom: 10%;
  position: absolute;
  font-size: 80%;

}

.italique{
  margin-top: 5%;
  margin-bottom: 40%;
}
.bottom3{
  position: absolute;
  margin-top: 140%;
  margin-left: 12%;
  padding-bottom: 3%;
  z-index: 12;
  color : #ff72e0;
}



.titre4{
  position: absolute;
  z-index: 10;
  width: 15%;
  margin-top: 4%;
  margin-left: 5.5%;
}

.img4{
  position: absolute;
  margin-top: -10%;
  margin-left: -3.5%;
  width: 50%;
  z-index: 0;
}
.article4{
  color : #ff72e0;
  margin-left: 50%;
  margin-top: 8%;
  margin-right: 10%;
  position: absolute;
  font-size: 80%;

}

.italique{
  margin-top: 5%;
}

.bottom4{
  position: absolute;
  margin-top: 100%;
  margin-left: 12%;
  padding-bottom: 3%;
  z-index: 12;
  color : #ff72e0;
}



.titre5{
  position: absolute;
  z-index: 10;
  width: 15%;
  margin-top: 2%;
  margin-left: 5.5%;
}

.img5{
  position: absolute;
  margin-top: 1.5%;
  margin-left: -3.5%;
  width: 50%;
  z-index: 0;
}
.article5{
  color : #ff72e0;
  margin-left: 50%;
  margin-top: 8%;
  margin-right: 10%;
  position: absolute;
  font-size: 80%;

}

.italique{
  margin-top: 5%;
}



.titre6{
  position: absolute;
  z-index: 10;
  width: 15%;
  margin-top: 4%;
  margin-left: 5.5%;
}

.img6{
  position: absolute;
  margin-top: -1.5%;
  margin-left: 5%;
  width: 40%;
  z-index: 0;
}
.article6{
  color : #ff4a00;
  margin-left: 50%;
  margin-top: 8%;
  margin-right: 10%;
  position: absolute;
  font-size: 80%;

}

.italique{
  margin-top: 5%;
}

.bottom6{
  position: absolute;
  margin-top: 120%;
  margin-left: 12%;
  padding-bottom: 3%;
  z-index: 12;
  color : #ff72e0;
}



.titre7{
  position: absolute;
  z-index: 10;
  width: 15%;
  margin-top: 4%;
  margin-left: 5.5%;
}

.img7{
  position: absolute;
  margin-top: -15%;
  margin-left: 5%;
  width: 40%;
  z-index: 0;
}
.article7{
  color : #ff4a00;
  margin-left: 50%;
  margin-top: 8%;
  margin-right: 10%;
  position: absolute;
  font-size: 80%;

}

.italique{
  margin-top: 5%;
}

.bottom7{
  position: absolute;
  margin-top: 120%;
  margin-left: 12%;
  padding-bottom: 3%;
  z-index: 12;
  color : #ff72e0;
}


.titre8{
  position: absolute;
  z-index: 10;
  width: 15%;
  margin-top: 4%;
  margin-left: 5.5%;
}

.img8{
  position: absolute;
  margin-top: 6%;
  margin-left: 9%;
  width: 30%;
  z-index: 0;
}
.article8{
  color : #ff4a00;
  margin-left: 50%;
  margin-top: 8%;
  margin-right: 10%;
  position: absolute;
  font-size: 80%;

}


.titre9{
  position: absolute;
  z-index: 10;
  width: 15%;
  margin-top: 4%;
  margin-left: 5.5%;
}

.img9{
  position: absolute;
  margin-top: 10%;
  margin-left: 9%;
  width: 40%;
  z-index: 0;
}
.article9{
  color : #ff72e0;
  margin-left: 50%;
  margin-top: 8%;
  margin-right: 10%;
  position: absolute;
  font-size: 80%;

}


.titre10{
  position: absolute;
  z-index: 10;
  width: 15%;
  margin-top: 2%;
  margin-left: 5.5%;
}

.img10{
  position: absolute;
  margin-top: 5%;
  margin-left: 9%;
  width: 30%;
  z-index: 0;
}
.article10{
  color : #ff72e0;
  margin-left: 50%;
  margin-top: 8%;
  margin-right: 10%;
  position: absolute;
  font-size: 80%;

}








@media (min-width: 300px) and (max-width: 900px){
  body {
padding: 1% 1% 1% 1%;}
.accueil11{
width: : 200%;}
.img1{
  position: relative;
  width: 100%;
}
.article1{
  color : #ff72e0;
  margin-left: 5%;
  margin-top: 8%;
  margin-right: 10%;
  position: relative;
  font-size: 80%;
}
.bottom{
  position: relative;
  margin-top: 120%;
  margin-left: 12%;
  padding-bottom: 3%;
  z-index: 12;
  color : #ff72e0;
}
.img2{
  position: relative;
  margin-top: 3%;
  width: 100%;
  z-index: 0;
}
.article2{
  color : #ff72e0;
  margin-left: 5%;
  margin-top: 8%;
  margin-right: 10%;
  position: relative;
  font-size: 80%;

}
.img3{
  position: relative;
  margin-top: 3%;
  width: 100%;
  z-index: 0;
}
.article3{
  color : #ff72e0;
  margin-left: 5%;
  margin-top: 8%;
  margin-right: 10%;
  margin-bottom: 10%;
  position: relative;
  font-size: 80%;

}

.bottom3{
  position: relative;
  margin-top: 140%;
  margin-left: 12%;
  padding-bottom: 3%;
  z-index: 12;
  color : #ff72e0;
}
.img4{
  position: relative;
  margin-top: -10%;
  margin-left: -3.5%;
  width: 100%;
  z-index: 0;
}
.article4{
  color : #ff72e0;
  margin-left: 5%;
  margin-top: 8%;
  margin-right: 10%;
  position: relative;
  font-size: 80%;

}


.bottom4{
  position: relative;
  margin-top: 100%;
  margin-left: 12%;
  padding-bottom: 3%;
  z-index: 12;
  color : #ff72e0;
}
.img5{
  position: relative;
  margin-top: 1.5%;
  margin-left: -3.5%;
  width: 100%;
  z-index: 0;
}
.article5{
  color : #ff72e0;
  margin-left: 5%;
  margin-top: 8%;
  margin-right: 10%;
  position: relative;
  font-size: 80%;

}

.img6{
  position: relative;
  margin-top: -1.5%;
  margin-left: 5%;
  width: 100%;
  z-index: 0;
}
.article6{
  color : #ff4a00;
  margin-left: 5%;
  margin-top: 8%;
  margin-right: 10%;
  position: relative;
  font-size: 80%;

}
.bottom6{
  position: relative;
  margin-top: 120%;
  margin-left: 12%;
  padding-bottom: 3%;
  z-index: 12;
  color : #ff72e0;
}

.img7{
  position: relative;
  margin-top: -15%;
  margin-left: 5%;
  width: 100%;
  z-index: 0;
}
.article7{
  color : #ff4a00;
  margin-left: 5%;
  margin-top: 8%;
  margin-right: 10%;
  position: relative;
  font-size: 80%;

}

.bottom7{
  position: relative;
  margin-top: 120%;
  margin-left: 12%;
  padding-bottom: 3%;
  z-index: 12;
  color : #ff72e0;
}
.img8{
  position: relative;
  margin-top: 6%;
  margin-left: 9%;
  width: 100%;
  z-index: 0;
}
.article8{
  color : #ff4a00;
  margin-left: 5%;
  margin-top: 8%;
  margin-right: 10%;
  position: relative;
  font-size: 80%;

}
.img9{
  position: relative;
  margin-top: 10%;
  margin-left: 9%;
  width: 100%;
  z-index: 0;
}
.article9{
  color : #ff72e0;
  margin-left: 5%;
  margin-top: 8%;
  margin-right: 10%;
  position: relative;
  font-size: 80%;

}
.img10{
  position: relative;
  margin-top: 5%;
  margin-left: 9%;
  width: 100%;
  z-index: 0;
}
.article10{
  color : #ff72e0;
  margin-left: 50%;
  margin-top: 8%;
  margin-right: 10%;
  position: absolute;
  font-size: 80%;

}









}
}