/*Police*/

@font-face{
	font-family:"Exo2-Thin";
	src:url('police/Exo2-Thin.ttf');
}

@font-face{
	font-family:"PTSans-Regular";
	src:url('police/PTSans-Regular.ttf');
}


/* INITIALISATION */

html { 
	margin:0; 
	padding:0;
	font-size:100%;
	width:100%;
	height:100%;
	scroll-behavior:smooth;
	cursor:  url('../img/cursor.svg'), auto;
}

body{
	background-color:#063843;
	width:100%;
}

h1{
	font-family:"Exo2-Thin","Helvetica","Arial";
	font-size:4.7rem;
}

h2{
	font-family:"Exo2-Thin","Helvetica","Arial";
	font-size:3rem;
}

h3{
	font-family:"Exo2-Thin","Helvetica","Arial";
	font-size:2.1rem;
}

nav a{
	font-family:"Exo2-Thin","Helvetica","Arial";
	font-size:2.7rem;
}

p{
	font-family:"PTSans-Regular","Tahoma","Arial";
	font-size:1.5rem;
}


article a {
	font-family:"PTSans-Regular","Tahoma","Arial";
	font-size:1.5rem;
}


html,body,header,main,footer,p,a{
	margin:0px 0px;
	padding:0px 0px;
}

main{
	position:relative;
}


/* HEADER */

header{
	width:100%;
	height:100vh;
	min-height:calc(600px + 4rem);
	display:flex;
	flex-flow:row wrap;  
	align-items:center;
	justify-content: space-between;
}

header section{
	width:100%;
	height:90vh;
	min-height:600px;
	display:flex;
	flex-flow:row wrap;  
	align-items:center;
	justify-content: center;
}

header section::before{
	content: " ";
	position: absolute;
	width:100%;
	height:90vh;
	min-height:600px;
	background-image:url("../img/motif.svg"); 
	background-repeat: repeat; 
	background-size: 50%; 
	animation-name: MOVE-BG;
  	animation-duration: 30s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
	opacity: 0.05;
	z-index: -1;
}

header section h1{
	max-width:40vw;
	color:#FFFFFF;
}

header section div {
	align-self: flex-end;
	position:relative;
	width:50vw;
}


header section div picture{
	width:80%;
	position:absolute;
	bottom: 0%;
	display:flex;
	align-items:flex-end;
	z-index:1;
}

picture img{
	width:100%;
}

img#bg{
	width:120%;
	bottom: 0%;
	left: -20%;
	position:absolute;
}


header nav{
	background-color:#2185D5;
	width:100%;
	height:10vh;
	align-self: flex-end;
	min-height:4rem;
}

header nav ul{
	min-height:4rem;
	width: 97%;
	height:10vh;
	margin:0px;
	padding:0px;
	display:flex;
	flex-flow:row nowrap; 
	align-items:center;
	justify-content: space-around;
}

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

header nav li a{
	text-decoration:none;
	display:block;
	color:#FFFFFF;
	transition: transform 0.5s;
}

header nav li a:link{
	color:#FFFFFF;
}

header nav li a:visited{
	color:#FFFFFF;
}

header nav li a:hover,header nav li a:focus{
	font-weight:bold;
	color:#303841;
	background-color:#2185D5;
	cursor:  url('../img/cursor_pointer.png') 16 16, pointer;
	transform: scale(1.1);
}

header nav li a:active{
	color:#FFFFFF;
	background-color:#2185D5;
}

/* MAIN */

#presentation{
	display:flex;
	flex-flow:row wrap; 
	align-items:center;
	justify-content: center;
	width:100%;
}

#presentation div{
	width:30%;
	margin:30px;
	color:#2185D5;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
}

#presentation div>a{
	font-family:"PTSans-Regular","Tahoma","Arial";
	font-size:1.5rem;
	margin-top:2rem;
	text-decoration:none;
	color:#303841;
	background-color:#2185D5;
	font-weight:bold;
	border-radius:50px;
	padding:10px 22px;
	border-style: none;
	user-select: none;
	transition: transform 0.5s;
}

#presentation div>a:link{
	color:#303841;
}

#presentation div>a:visited{
	color:#303841;
}

#presentation div>a:hover,#presentation div>a:focus{
	font-weight:bold;
	background-color:#FFFFFF;
	cursor:  url('../img/cursor_pointer.png') 16 16, pointer;
	transform: scale(1.1);
}

#presentation div>a:active{
	color:#FFFFFF;
	background-color:#303841;
}


#presentation picture{
	width:20%;
	margin:30px;
}

#presentation iframe{
	width:55%;
	min-height:60vh;
	margin:0px auto;
	border-radius:20px;
}

h2{
	color:#F3F3F3;
	padding:10px 10px 0px 10px;
	text-align:center;
	margin:0px;
}
h2#invisible{
	display:none;
}


h3{
	color:#F3F3F3;
	margin:0px;
	padding:25px 0px;
}


article.pair h3,article.pair p,article.pair a{
	text-align:right;
}

.intercalaire{
	width:100%;
	height:25vh;
	min-height:150px;
	background-image:url("../img/motif.svg"); 
	background-repeat: repeat; 
	background-size: 30%; 
	background-attachment: fixed;
	animation-name: MOVE-BG;
  	animation-duration: 30s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes MOVE-BG {
    0% {
        background-position: 0px 0px; 
    }
    50% { 
        background-position: 500px 500px;  
    }
	100% { 
        background-position: 0px 0px;  
    }
}


section article picture{
	width:25%;
}

section article picture img{
	border-radius: 10% ;
	transition: transform 0.5s;
}

section article picture img:hover{
	transform: scale(1.05);
}


article{
	display:flex;
	flex-flow:row nowrap; 
	align-items:center;
	width:65vw;
	height:44vh;
	min-height:50%;
	margin:0vh 3vw 0vh 3vw;
}

article div{
	width:50%;
	margin:0px 5% 0px 5%;
}

article p{
	width:100%;
	margin:0px;
	color:#2185D5;
}

section#presentation p>a{
	color:#2185D5;
	text-decoration:underline;
	text-decoration-color: #B5E4FB;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

section#presentation p>a:link{
	color:#2185D5;
}

section#presentation p>a:visited{
	color:#2185D5;
}

section#presentation p>a:hover,section#presentation p>a:focus{
	color:#FFFFFF;
	cursor:  url('../img/cursor_pointer.png') 16 16, pointer;
}

section#presentation p>a:active{
	color:#303841;
}

article a{
	margin:10px 0px;
	text-decoration:none;
	color:#303841;
	background-color:#2185D5;
	font-weight:bold;
	border-radius:50px;
	padding:10px 22px;
	transition: transform 0.5s;
}


article a:link{
	color:#303841;
}

article a:visited{
	color:#303841;
}

article a:hover,article a:focus{
	font-weight:bold;
	background-color:#FFFFFF;
	cursor:  url('../img/cursor_pointer.png') 16 16, pointer;
	transform: scale(1.1);
}

article a:active{
	color:#FFFFFF;
	background-color:#303841;
}

article.pair {
	justify-content:end;
}

article.impair{
	margin-left:32vw;
	justify-content:start;
}

article.pair>div{
	display:flex;
	justify-content:center;
	flex-flow:column nowrap;
	align-items:end;
}

article.impair>div{
	display:flex;
	justify-content:center;
	flex-flow:column nowrap;
	align-items:start;
}


article.impair div{
	order:2;
}

div.lucarne{
	overflow:hidden;
	position:relative;
	height:94vh;
	min-height:750px;
}

.fleche1{
	position:absolute;
	top:50%;
	left:3%;
	width:3%;
	z-index:2;
	cursor:  url('../img/cursor_pointer.png') 16 16, pointer;
	user-select:none;
	transition: transform 0.5s;
}

.fleche2{
	position:absolute;
	top:50%;
	right:3%;
	width:3%;
	transform: scaleX(-1);
	z-index:2;
	cursor:  url('../img/cursor_pointer.png') 16 16, pointer;
	user-select:none;
	transition: transform 0.5s;
}

.fleche1:hover{
	transform: scale(1.2);
}

.fleche2:hover{
	transform: scale(-1.2, 1.2);
}

div.silder{
	display:flex;
	flex-flow:column wrap; 
	justify-content: center;
	width:200%;
	height:94vh;
	min-height:750px;
	position:absolute; 
	top:0; 
	left:0; 
	transition:1000ms;
}

div.fenetre{
	display:none;
	width:100vw;
	height:100vh;
	margin:0px;
	background-color:rgba(0,0,0,0.5);
	position:fixed;
	top:0;
	left:0;
	z-index:3;
	justify-content: center;
	align-items:center;
	
}

div.fenetre img{
	max-height:90vh;
	margin:auto;
	user-select:none;
	border-radius: 2%;
}


/* LOGICIELS */


#logiciels{
	display:flex;
	flex-flow:row wrap;
	justify-content:center;
}

#logiciels>p,#logiciels>h2{
	width:90vw;
}

#logiciels>h2{
	width:90vw;
}

#logiciels>p{
	text-align:center;
	color:#2185D5;
	margin:30px;
}




#logiciels article{
	display:flex;
	flex-flow:row wrap;
	justify-content:center;
	align-items:start;
	max-width:70vw;
	width:auto;
	margin:30px auto;
	height:auto;
}

#logiciels article div{
	display:flex;
	flex-flow:column nowrap; 
	align-items:center;
	margin:0px 10px;
	width:25%;
}

#logiciels .point{
	width:90%;
	display:flex;
	flex-flow:row nowrap;
	justify-content: center;
	align-items:center;
	margin:0px 0px;
}

#logiciels .point>div{
	border-radius:50%;
	background-color:#2185D5;
	width:30px;
	height:30px;
	margin:0px 20px;
	
}


#logiciels .un div:last-child{
	background-color:transparent;
	border:solid 3px #2185D5;
}

#logiciels .deux div{
	background-color:transparent;
	border:solid 3px #2185D5;
}

#logiciels .deux div:first-child{
	background-color:#2185D5;
	border:none;
}



#logiciels img{
	max-width:4vw;
	margin:30px 30px 5px 30px;
}

#logiciels article div p{
	width:auto;
	text-align:center;
}




/* FOOTER */

footer{
	background-color:#2185D5;
	width:100%;
	height:10vh;
	color:#FFFFFF;
	display:flex;
	flex-flow:column wrap; 
	align-items:center;
	justify-content: center;
}

footer h2{
	font-family:"PTSans-Regular","Tahoma","Arial";
	font-size: 1.5rem;
	font-weight:normal;
	padding:0px;
}



.invisible{
	opacity:0;
	transform:translateY(40px);
}

.apparition{
	transition:1000ms;
}






/*page projet*/

iframe.youtube{
	max-width:90vw;
	border-radius:30px;
}

section.projet>p{
	color:#2185D5;
	width:40vw;
	margin:10px;
	text-align:center;	
}

model-viewer{
	width:75%;
	height:75vh;
	background-color:#052E38;
	margin:0px auto;
	--poster-color: transparent;
}

a.lien_behance{
	margin:30px;
	color:#2185D5;
	display:inline-block;
}

a.lien_behance:link{
	color:#2185D5;
}

a.lien_behance:visited{
	color:#2185D5;
}

a.lien_behance:hover,section a:focus{
	color:#FFFFFF;
	cursor:  url('../img/cursor_pointer.png') 16 16, pointer;
}

a.lien_behance:active{
	color:#303841;
}

.lien_behance p{
	display:inline-block;
}

.lien_behance.logo_tfe{
	margin: 3rem;
	display: flex;
	flex-flow: column nowrap;
	align-items:center;
	justify-content: center;
}

.lien_behance.logo_tfe img{
	width: 50%;
}

section.projet{
	display:flex;
	flex-flow:column wrap; 
	align-items:center;
	justify-content: center;
}

section.galerie_d_image{
	display:flex;
	flex-flow:row wrap; 
	margin:0px auto;
	max-width:75%;
}

section.galerie_d_image div{
	padding:10px;
	margin:auto;
	max-width:45vh;
	height:27vh;
}

section.galerie_d_image div img{
	max-height:100%;
	max-width:100%;
}

section.video{
	width:75%;
}

video,section.video iframe{
	width:100%;
	min-height:75vh;
	margin:15px;
}

model-viewer p{
	font-family:"PTSans-Regular","Tahoma","Arial";
	font-size:1.5rem;
	margin:5px;
	color:#2185D5;
}

model-viewer select{
	font-family:"PTSans-Regular","Tahoma","Arial";
	font-size:1.2rem;
	margin: 0px 5px 0px 5px;
	color:#2185D5;
	background-color:#303841;
	border:solid 0px;
	max-width:95%;
}

.intercalaire{
	margin-top:40px;
}

section.PDF{
	width:75%;
	height:90vh;
	margin:10px;
}

div.fenetre{
	overflow-x: hidden;
	overflow-y: hidden;
	justify-content: start;
	align-items:center;
}


div.fenetre img#croix,div.fenetre img#moins,div.fenetre img#plus{
	cursor:  url('../img/cursor_pointer.png') 16 16, pointer;
	position:fixed;
	width:60px;
	height:60px;
	background-color:#2A323A;
	border-radius:10px;
	z-index:4;
	user-select:none;
}

div.fenetre img#croix{
	top:10px;
	right:5vw;
}

div.fenetre img#moins{
	left:10px;
	top:100px;
}

div.fenetre img#plus{
	left:10px;
	top:10px;
}

.titre_img{
	position:fixed;
	color:#2185D5;
	background-color:#2A323A;
	z-index:4;
	bottom:40px;
	right:4vw;
	text-align:center;
	padding:20px;
	border-radius:10px;
	user-select:none;
} 












@media screen and (max-width: 1100px){


/* INITIALISATION */


nav a{
	font-size:2.5rem;
}

p{
	font-size:1.5rem;
}

h2{
	font-size:2.7rem;
}

h1{
	font-size:3.7rem;
}


/* HEADER */


header section{
	align-items:start;
}

header section::before{
	background-size: 100%; 
}

/* MAIN */

#presentation{
	flex-flow:column nowrap; 
	align-items:center;
}

#presentation div{
	order:2;
	width:90%;
}

#presentation div>a{
	margin-bottom: 1rem;
}

#presentation picture{
	order:1;
	width:40%;
}

#presentation iframe.youtube{
	width:90%;
	display:flex;
	order:3;
}

h2{
	color:#F3F3F3;
	padding:20px;
	text-align:center;
	margin:0px;
}

h3{
	padding:10px;
}

.intercalaire{
	background-size: 60%; 
}

section article picture{
	width:50%;
}

article{
	flex-flow:column nowrap; 
	align-items:center;
	width:90vw;
	padding-top:7vh;
	margin:auto;
	height: auto;
}

article div{
	width:100%;
	margin:5px 5% 5% 5%;
}

article p{
	width:100%;
	margin:0px;
}

article.pair {
	justify-content:center;
	align-items:center;
}

article.pair div{
	order:2;
}

article.pair>div, article.impair>div{
	align-items:center;
}

article.impair{
	margin:20px auto 0px auto;
	
}
article.impair div{
	order:1;
}

div.lucarne{
	overflow:visible;
	position:static;
	height:auto;
}

.fleche1{
	visibility:hidden;
}
.fleche2{
	visibility:hidden;
}

div.silder{
	display: block;
	width:100%;
	height:auto;
	position:static;
	transition: 0ms;
}

article.pair h3,article.impair h3,article.pair p,article.pair a,article.impair a,section p{
	text-align:center;
}


footer{
	height: 15vh;
}

footer h2{
	font-family:"PTSans-Regular","Tahoma","Arial";
	font-size: 1.5rem;
	font-weight:normal;
	padding:0px;
}

/* LOGICIELS */

#logiciels article{
	max-width:90vw;
}

#logiciels article div{
	width:45%;
}

#logiciels img{
	max-width:10vw;
	margin:30px 30px 5px 30px;
}




/*page projet*/

section.projet>p{
	width:70vw;	
}

model-viewer p{
	text-align:start;	
}


section.galerie_d_image{ 
	max-width:95%;
}

section.galerie_d_image div{
	padding:10px;
	margin:auto;
	max-width:45vw;
	height:auto;
}

section.video{
	width:85%;
}


model-viewer p{
	font-size:1.5rem;
}


section.PDF{
	width:85%;
}

section.projet h2{
	font-size:2.1rem;
}

section.projet h3{
	font-size:1.8rem;
	margin-top:20px;
}







}


@media only screen and (hover: none) and (pointer: coarse){

div.fenetre img#moins,div.fenetre img#plus{
	display:none !important;
}

}


@media screen and (max-width: 700px){


div.fenetre img#croix{
	top:0px;
	right:0vw;
}

.titre_img{
	bottom:0px;
    right:0vw;
}

div.fenetre img{
	max-height:none;
	max-width:90%;
}


/* HEADER */

h1{
	font-size:2.5rem;
}

nav a{
	font-size:2.5rem;
}

header section::before{
	background-size: 120%; 
}


p{
	font-size:1.5rem;
}

h2{
	font-size:2.7rem;
}

.intercalaire{
	background-size: 80%; 
}

header{
	min-height:calc(400px + 16rem);
}

header section{
	width:100%;
	height:60vh;
	display:flex;
	flex-flow:column nowrap; 
	min-height:400px;
}

header section h1{
	max-width:75vw;
	height:45vw;
	padding:20px;
}

header section div {
	height:45vh;
	width:60vw;
}

header nav{
	height:40vh;
	align-self:start;
	min-height:16rem;
}

header nav ul{
	height:100%;
	width: 100%;
	min-height:16rem;
}


header nav ul{
	flex-flow:column nowrap; 
}


/* MAIN */

#presentation picture{
	width:60%;
}


section article picture{
	width:75%;
}

footer{
	height: 20vh;
}


/* LOGICIELS */


#logiciels img{
	max-width:15vw;
}




/*page projet*/

section.projet>p{
	width:85vw;	
}

section.galerie_d_image{
	flex-flow:column nowrap;
	max-width:90%;
}

section.galerie_d_image div{
	max-width:100%;
}

section.video{
	width:95%;
}

section.PDF{
	width:95%;
}






}