html{
	overflow-x: hidden;	
}

body{
	margin:0px;
	padding:0px;
}
@font-face {
	font-family:MADESAON;
	src: url(font/MADESAONARAPERSONAL.otf);
}
.globale{
	margin:0;
	padding:0;
	width: 100%;
	height: 20%;
	overflow-y: scroll;
	scroll-behavior: smooth;
	background-color:  rgb(250, 247, 247);
}

.haeder{
	width: 100%;
	display:flex;
	height:6.5vh;
	position: fixed;
	z-index: 1000000;
	background-color: rgb(250, 247, 247);
	border-bottom: 1px solid black;
	overflow: hidden;
}

.entete{
	padding: 0.2vw;
	width: 10vw;
	margin-left:90vw;
}

.entete img{
	width: 100%;
	height: 100%;
}

.pagedaccueil{
 	font-family:MADESAON;
	color: rgb(242, 45, 27);
	margin-top: 3%;
	margin-left: 5%;
	font-size: 12vw;
}

.scroll{
}

.zonebouton{
    display: block;
    width: 15vw;
    height: 40vh; 
	margin-left: 55%;
}
 
.bouton{
    display: block;
}
 
.bouton img{
    width:150%;	
}
 
.moi{
	border: 1px solid black;
	display:flex;
	height: 80vh;
}


.profil img{
	bottom:0;
	width:auto;
	height: 130vh;
	border-left: 1px solid black;
}

.texte{
	
	width:50%;
	position: relative;
}

.textelecture{
	position: absolute;
	bottom: 0;
	width: 90%;
	margin-left: 5%;
	margin-bottom: 10%;
	
}

.image{
	overflow: hidden;
	width:50%;
}

.projet{

	position: relative;	
	border-left: 1px solid black;
	border-right: 1px solid black;
}

.titreprojet{
	display: flex;
	width: 100%;
	font-family: MADESAON;
}
.titre{
	color:rgb(242, 45, 27);
	font-size:15vw;
	padding-left:5%;
	padding-top:2%;
	flex: 1 1 80%;
	font-family: MADESAON;
}

.formegeometrique{
	align-items: center;
	justify-content: center;
	flex:1 1 10%;
}


.formegeometrique img{
	margin-top: 9%;
	width: 30%;
}
.formegeometriques img{
	width: 100%;
	padding-top: 20%;
}

.formegeometriques{
	
	flex:1 2 20%;
	padding-right: 10%;
}
.formegeometriquess img{
	width: 80%;
	padding-top: 7%;
	padding-left: 3%;
	
}

.galerie{
	border:1px solid black;
	position: relative;
}

.contact{
	background-color:rgb(242, 45, 27);
	border-bottom: 1px solid;
	border-left: 1px solid;
	border-right: 1px solid;
	position: relative;
}

.haut{
	display: block;
	position: relative;
	margin-left: 4%;
	margin-right: 4%;
}
.bas{
	display: block;
	position: relative;
	margin-left: 4%;
	margin-right: 4%;
	padding-bottom: 8%;
}

.miniature{
	display: flex;	
	width: 100%;
	overflow-x: hidden;
	gap:1vw;	
}


.miniature img{
	width: 100%;
	height: 100%;
}

.info{
	flex:1 1 30%;
	padding:2%	;
}

.info img{
	height: 37vw;
	overflow: hidden;
}

.info:hover{
	color:rgb(242, 45, 27);
}

.info:hover img{
	filter: grayscale(100%); 
	filter: grayscale(100%);
}

.info:hover>.soustitre{
	border:1px solid rgb(242, 45, 27);
}

.info:hover>.date{
	border:1px solid rgb(242, 45, 27);
}

.ovals{
	position: absolute;
	width: 220px;
	height: 110px;
	font-family: MADESAON;
	border:2px solid rgb(242, 45, 27);
	border-radius: 100%;
	margin-left: 48%;
	margin-top: 0%;
	transform:  rotate(-150deg);
	background-color:  rgb(250, 247, 247);
	z-index: 999;
}

.ovalss{
	position: absolute;
	width: 200px;
	height: 90px;
	border:2px solid black;
	border-radius: 100%;
	margin-right: 0%;
	margin-top: 0%;
	transform:  rotate(150deg);
	background-color:  rgb(250, 247, 247);
	z-index: 1;
}

.nomprojets{
	font-size:3vw;
	font-family:MADESAON;
}

.nomprojets:hover{
	font-size:3vw;
}

.soustitre{
	padding-left:5%;
	font-size:1.5vw;
	margin-top: 2%;
	border:1px solid black;
	border-radius: 30px;
	margin-right:35%;
}

.date{
	padding-left:5%;
	font-size:1.5vw;
	margin-top: 2%;
	margin-right:65%;
	border:1px solid black;
	border-radius: 30px;	
}


@keyframes rotating {
	from {
	  transform: rotate(0deg);
	}
	to {
	  transform: rotate(360deg);
	}
}
.rotating {
	animation: rotating 10s linear infinite;
	position: absolute;
	width: 25vh;
	height: 25vh;
	margin-top: 27%;
	margin-left: 65%;
}

.rotating.image{
	width: 100%;
	height: auto;
}

.smyiley{
	position: absolute;
	width: 25vh;
	height: 25vh;
	margin-top: 27%;
	margin-left: 65%;
}

.smyiley.image{
	width: 100%;
	height: auto;
}

.oval{
	position: absolute;
	width: 200px;
	height: 110px;
	background-color: rgb(250, 247, 247);
	border:2px solid black;
	border-radius: 50%;
	margin-left: 96%;
	margin-top: 2%;
	transform:  rotate(150deg);
}

.titregalerie{
	display: flex;
	width: 100%;	
}

.titress{
	color:  rgb(250, 247, 247);
	text-align: center;
	font-size:9vw;
	padding-top:7%;
	margin-left:2% ;
	margin-right:2% ;
	font-family: MADESAON;
}

.titres{
	-webkit-text-stroke: 1px rgb(242, 45, 27);
	color:  rgb(250, 247, 247);
	font-size: 11vw;
	padding-top:7%;
	margin-left:1% ;
	margin-right:5% ;
	font-family: MADESAON;
}


.photos{
	background-color:rgb(242, 45, 27);
	margin-left:1% ;	
	margin-right:1% ;
	margin-bottom:5% ;
	margin-top: 2%;
	border:1px solid black;
	display: flex;
	height: 70vh;	
	position: relative;
	overflow-x: scroll;
	overflow-y: hidden;
}

.photos img {
	border-left: 1px solid black;
	width: 49vw;
	height: auto;
	overflow: hidden;
}

.photoun{
	width: 100%;
}

.photoun:hover > .legende{
	opacity: 1;
}

.photodeux{
	
}

.legende{
	color: rgb(255, 255, 255);
	position: absolute;
	margin-top: 60vh;
	margin-left: 5%;
	opacity: 0;
	width: 35vw;
	font-size: 3vh;
	transition-duration: 1s;
	text-align: center;
}

.ronddeux{
	position: absolute;
	height: 30vh;
	width: 30vh;
	margin-bottom: 60%;
	transform:  rotate(20deg);
}

.ronddeux img {
	height: 100%;
	width: 100%;
	border:0 none;
}

.formedeux{
	position: absolute;
	height: 35vh;
	width: 35vh;
	transform:  rotate(-150deg);
}

.formedeux img {
	height: 100%;
	width: 100%;
	border:0 none;
}

.formetrois{
	position: absolute;
	height: 40vh;
	width: 40vh;
	margin-left:0%;
	margin-top: 25%;
	transform:  rotate(-10deg);
}

.formetrois img {
	height: 100%;
	width: 100%;
	border: 0 none;
}


.titrecontact{
	display: flex;	
	width: 80%;	
	padding-left:10%;
	font-family: MADESAON;
}

.marquee{
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	overflow: hidden;		
}	
	
.marquee-content {
	display: flex;
	animation: scrolling 10s linear infinite;
}
	
.marquee-item {
	flex: 0 0 10vw;
	margin: 0 1vw;
}
	
.marquee-item img {
	display: block;
	width: 100%;
}
	
@keyframes scrolling {
	100% { transform: translateX(0); }
	0% { transform: translateX(-140vw); }
}

.infocontact{
	height: 17vw;
	margin-top: 5%;
	margin-left: 7%;
	margin-right: 7%;
	display: flex;
	overflow: hidden;
}

.lienresaux{
	display: flex;
	text-decoration: none;
}

.skill{
	margin-left:7%;
	margin-right:7%;
	margin-top: 1%;
	margin-bottom: 1%;
	font-size: 0.5vw;
	color:  rgb(250, 247, 247);
	text-align: center;
	padding-top: 2%;
}

.resaux{
	width: 35%;
	display: block;
	margin-left: 5%;
	margin-right: 5%;
}

.contactme{
	margin-left: 5%;
	margin-right: 5%;
	width: 55%;	
}

.soustitrecontact{
	margin-top: 3%;
	font-size:1.5vw;
	width: 15vw;
	text-align:center;
	padding: 7%;
	border:2px solid   rgb(250, 247, 247);
	border-radius: 100%;
	transform: rotate(-30deg);
}
	  
.mail{
	text-align: center;
}

.titreresaux{
	margin-top: 1%;
	color: rgb(250, 247, 247);
	font-size:3vw;
	padding: 3%;
	margin-bottom: 3%;
	padding-left: 3%;
	text-align: center;
	font-family: MADESAON;
}

.formeoval{
	color:  rgb(250, 247, 247);
	width: auto;
	height: 30%%;
	border:2px solid white;
	border-radius: 100%;
	padding: 3% 10% 3% 10%;
	overflow: hidden;	
}

a{
	text-decoration: none;
	color:white;
}

a:active{
	text-decoration: none;
	color:white;
}

a:visited{
	text-decoration: none;
}

a:hover{
	text-decoration: none;
}

@media(min-width: 768px) and (max-width: 1388px) {

.haeder{
	height: 5.5vh;
	z-index:1;
}

.entete{
	padding: 0.2vw;
	width: 10vw;
	margin-left:90vw;
}

.pagedaccueil{
	margin-top: 7%;
	margin-bottom: 15%;
}

.zonebouton{
	display: none;
}

.moi{
	height: 60vh;
}

.profil img{
	height: 80vh;	
}

.oval{
	width: 150px;
	height: 80px;	
	margin-left: 97%;
	margin-top: 6%;
}

.rotating{
	width: 19vh;
	height: 19vh;
	margin-top: 27%;
	margin-left: 55%;
}

.smyiley{
	width: 19vh;
	height: 19vh;
	margin-top: 27%;
	margin-left: 54%;
}

.ovals{
	width: 130px;
	height: 60px;
	border:1.5px solid rgb(242, 45, 27);
}

.ovalss{
	width: 130px;
	height: 60px;
	border:1.5px solid black;
}

.nomprojets{
	font-size:4vw;
}

.nomprojets:hover{
	font-size:4vw;
}

.soustitre{
	font-size:2vw;
}

.date{
	font-size:2vw;
}

.photos{
	height: 40VH;
}

.legende{
	margin-top: 30vh;
	font-size: 2vh;
}

.ronddeux{
	display: none;
}

.formetrois{
	display: none;
}

.formedeux{
	display: none;
}

.skill{
	font-size: 1vw;
}
}

@media(max-width: 768px){
	

	.haeder{
		padding-left: 60VW;
		height: 4.5vh;
	}

	.pagedaccueil{
		margin-top: 7%;
		margin-bottom: 15%;
	}
	
	.zonebouton{
		display: none;
	}

	.moi{
		height: 45vh;
	}
	
	.profil img{
		height: 60vh;	
	}
	
	.oval{
		width: 120px;
		height: 60px;	
		margin-left: 97%;
		margin-top: 6%;
	}

	.rotating{
		width: 14vh;
		height: 14vh;
		margin-top: 40%;
		margin-left: 55%;
	}
	
	.smyiley{
		width: 14vh;
		height: 14vh;
		margin-top: 40%;
		margin-left: 55%;
	}

	.projet{
		margin: 0%;
		padding: 0%;
		overflow: hidden;
		padding: 0%;
		height: 60vh;
	}

	.contenue{
		display: flex;
		overflow-x: scroll;
		overflow-y: hidden;
		margin: 0%;
		padding: 0%;
	}

	.miniature{
		display:flex;
		margin: 0%;
		padding: 0%;
		height: auto;
	}

	.info{
		width:40vw ;
		height: auto;
	}

	.haut{
		margin-left: 0%;
		margin-right: 0%;
	}
	.bas{
		margin-left: 0%;
		margin-right: 0%;
	}

	.info img{
		height: 35vh;
		overflow: hidden;
	}
	.nomprojets{
		font-size:4vw;
	}
	
	.nomprojets:hover{
		font-size:4vw;
	}
	
	.soustitre{
		font-size:2vw;
	}
	
	.date{
		font-size:2vw;
	}

	.ovals{
		display: none;
	}
	
	.ovalss{
		display: none;
	}

	.photos{
		height: 30VH;
	}

	.ronddeux{
		display: none;
	}
	
	.formetrois{
		display: none;
	}
	
	.formedeux{
		display: none;
	}

	.legende{
		margin-top: 30vh;
		font-size: 2vh;
	}

	.skill{
		font-size: 1.3vw;
	}

	.formegeometriquess{
		display: none;
	}

	.titress{
		margin-left: 20%;
	}

	.soustitrecontact{
		font-size:2vw;
		border:1px solid white;
	}

	.formeoval{
		border:1px solid white;
	}

	}