@charset "utf-8";

/*Définition de la police pour toute la feuille de style*/
@font-face {
    font-family: 'latolight';
    src: url('../font/Lato-light.eot') format('eot');
    src: url('../font/Lato-light.eot?#iefix') format('embedded-opentype'),
         url('../font/lato-light-webfont.woff') format('woff'),
         url('../font/lato-light-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/*VARIABLES DE LA FEUILLE CSS*/

:root {
	--couleur-fond: #ffffff; /*#EFEFEF rgba(213,237,245,1)*/
	--couleur-police: #5B5B5B;
	--nb-category-menu: 4; /*nombre de catégories du menu principal*/
	--largeur-divmiddle: 80%; /*largeur du menu en % de la page*/
	--largeur-divmiddle-portrait: 80%; /*pareil mais pour mode portrait natel*/
	--largeur-menu: 100%; /*largeur du menu par rapport à la div middle*/
	--largeur-menu-portrait: 100%; /*pareil mais pour mode protrait natel*/
	--height-header: calc(30px + 5.2vw); /*hauteur du header pour ajuster les anchors en conséquence, valeur à calculer à la main!*/
	--height-header-landscape: calc(25px + 4.1vw);
	--height-header-portrait: calc(25px + 4.5vw);
	--nbimgperrow: 4;
	--nbimgperrow-portrait: 1;
	--imgborder: 5px; /*bordures de images de la galerie en nombre de px*/
	--height-signature-logo-portrait: calc(25px + 2vw);
	--largeur-vignette: max(calc((100% / var(--nbimgperrow)) - var(--imgborder) * 2),300px);
}

/*FIN DES VARIABLES*/

html {
	font-family:latolight;
	color:var(--couleur-police);
	scroll-behavior:smooth;
	font-size:calc(10px + 0.4vw);
    

}

body {
	margin:0;
	padding:0;
	display:flex;
	flex-flow:column wrap;
    
	
}

/*GENERAL*/

/*Pas d'effet de style particulier sur les liens*/
a {
	text-decoration:none;
	color:inherit;
}

a:hover {
	color:#5AAECB;
}


/*FIN GENERAL*/

/*HEADER*/
.header {
	display:flex;
	flex-flow:row;
	align-items:center;
	padding-bottom:0.5vw;
	position:fixed;
	top:0;
	left:0;
	right:0;
	background-color:var(--couleur-fond);
	z-index:1;
	justify-content:space-between;
	

	
}

.left, .right{
	flex-basis:calc((100% - var(--largeur-divmiddle)) / 2);	
}
.middle {
	display:flex;
	flex-flow:column;
	flex-basis:var(--largeur-divmiddle);
}


.menu {
	display:flex;
	flex-flow:row;
	justify-content:center;
}

.menu div {
	padding:0 2vw 0 2vw;	
}

.logo_entete {
		opacity:1;
		padding-left:30%;
}

.signature {
	margin-left:auto;
	margin-right:auto;
	padding-top:0.5vw;
	padding-bottom:1vw;
}

.img_signature {
    opacity:0.5;
}

.img_signature, .logo_entete {
		height:calc(20px + 2.5vw);
		object-fit:contain;		
}

.right {
	position:relative;
	z-index:2;
}

#sidebar {
	display:none;	
}


/*CONTENT*/
.content {
	display:flex;
	flex-flow:column;
}

.anchor { /*Permet de créer un span invisible afin de décaler les sections de la taille du header*/
	background:url(../Images/logo_couleur.png) no-repeat;
	background-size:calc(20px + 2.5vw);
	background-position:center;
	height:var(--height-header);
	
}

.img-area {
	display:flex;
	flex-flow:row wrap;
	justify-content:center;

	padding:0;
	margin:0;
}

	.img-area div {
		flex-basis: var(--largeur-vignette);
		flex-grow: 1;
		margin: var(--imgborder);
	}

.img-area img {
	width:100%;
	/*object-fit:contain;*/
	
}


.img_hover {
	opacity:0;
    height:100%;
    object-fit:fill;
}

.img_hover:hover {
	
	opacity:0.6;
	transition:0.3s;
}

/*ABOUT ME*/


.flexcontainerrow {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

.vignette {
	flex-basis: var(--largeur-vignette);
	margin: var(--imgborder);
	/*background-color: rgba(90,174,203,0.5);*/
    flex-grow:1;
}

.withpadding {
    padding:var(--imgborder);
}

.divcenter {
    margin-left:auto;
    margin-right:auto;
}

.widthhalf {
	width:50%;
}

.flexthird{
    flex-basis:33%;
}

.flexitem {
	text-align: center;
    margin:auto;
    flex-grow:1;
}


.flexitem img {
    width:100%;
    object-fit:contain;
}

.withmargin {
    margin:var(--imgborder);
}

.containeraboutme {
	display: flex;
	align-items: flex-start;
}

.containeraboutme div {
	flex-basis: 50%;
	margin: var(--imgborder);

}

.aboutme p {
	text-align: justify;
}

.containeraboutme img {
    width:100%;
}

.leftaboutme {
    display:none;
}



/*FOOTER*/

.footer {
	background: var(--couleur-fond);
	display: flex;
	flex-flow: column;
	text-align: left;
	padding-left: 5px;
}





form {
	margin:0;
}

h1 {
	font-size:calc(10px + 1vw);
	font-weight:1000;
	padding-bottom:1vw;
	
	margin:0;
	
}

.footer h1 {
	padding-top: calc(10px + 1.5vw);
}

h2 {
	font-size:calc(10px + 0.8vw);
	font-weight:600;
	padding: 0vw 0vw 0.5vw 0vw;
	margin:0;
}

p {
	margin-bottom:1vw;	
}

.formulaire {
	width:33%;
	margin-left:auto;
	margin-right:auto;
}
.contactform {
	display:flex;
	flex-flow:column wrap;
	border:0;
	padding:0;
}

.contactform input, textarea {
	margin: 0 0 5px;
	padding:5px;
	resize:none;
}

.contactform input::placeholder, textarea::placeholder {
	color:var(--couleur-police);
	font-family:'latolight';
	font-size:calc(10px + 0.4vw);
}

.submitbutton {
    display: flex;
    flex-flow: row;
    justify-content: flex-end;	
}

	.submitbutton input {
		background-color: #5AAECB;
		border: 0;
		padding: 5px 10px;
		font-family: 'latolight';
		font-size: calc(10px + 0.4vw);
	}
.bottom_footer {
	display:flex;
	flex-flow:row;
	margin:2vw 0 2vw 0;
	font-style:italic;
	flex-basis:100%;
}

.copyright {
	flex-grow:3;
	text-align:center;
}

@media screen and (min-width:1240px) {
    .vignette {
        flex-grow:0;/*section aboutme comprend 3 vignettes => adaptation si galerie affiche 4 vignettes par ligne*/
    }
}

@media screen and (max-width:930px) {
	/*SIDEBAR*/
	#sidebar {
		display: block;
		position: fixed;
		right: -100%;
		width: 100%;
		height: 100%;
		background-color: rgba(250,250,250,0.95);
		transition: all .3s ease;
		top: 0;
	}

		#sidebar.active {
			right: 0px;
		}

		#sidebar ul {
			padding: 0;
			top: 20px;
			width: 100%;
			margin-top: 50px;
		}



			#sidebar ul li {
				color: rgba(90,174,203);
				list-style-type: none;
				padding: 30px 0px;
				text-align: center;
				border-bottom: 1px solid rgba(90,174,203,0.2);
				margin: 0;
				font-size: 6vw;
			}

		#sidebar .toggle-btn {
			position: relative;
			right: 15px;
			top: 15px;
		}

	.toggle-btn-span {
		display: block;
		width: 25px;
		height: 3px;
		background: rgba(90,174,203,.8);
		border: 1px solid rgba(0,0,0,.3);
		border-radius: 3px;
		margin: 4px 0px;
	}

		.toggle-btn-span.active {
			background: white;
			border: 1px solid rgba(0,0,0,0.5);
		}
	/*FIN SIDEBAR*/

	/*ON CACHE LE MENU INITIAL*/
	.menu {
		display: none;
	}

	/*ON AGRANDIT LOGO ET SIGNATURE*/
	.img_signature, .logo_entete {
		height: var(--height-signature-logo-portrait);
		/*object-fit:contain;*/
	}

	.logo_entete {
		opacity: 0.8;
	}

	.anchor { /*Permet de créer un span invisible afin de décaler les sections de la taille du header*/
		height: var(--height-header-portrait);
	}

	/*ON AGRANDIT FORMULAIRE DE CONTACT ET TAILLE DE LA POLICE*/
	.formulaire {
		width: 95%;
		font-size: 15px;
	}

    .flexitem {
        font-size:15px;
    }

    .leftaboutme {
        display:none;
    }


	
}

@media screen and (max-width:930px) and (orientation:landscape) {

    #sidebar ul li {
      padding:15px 0px;
      font-size:3vw;
  
    }

    .anchor { /*Permet de créer un span invisible afin de décaler les sections de la taille du header*/
	    height:var(--height-header-landscape);
    }

	.flexcontainerrow {
		flex-flow: row wrap;
	}

}