@media only screen and (max-width: 1000px) {  /* Petits écrans PC + iPad */
	:root {
		--body_width: 90vw;
		--height-container: 40vh;
	}
	div#header {
		max-height: 1500px;
	}

	div.bar_centered {
		margin-left: 0;
		transform: translateX(0);
		width: 100%;
	}
	div.bar_centered div.logo {
		display: none !important;
	}
	.navigation li a {
		font-size: 15px;
	}

	div.container, div.container.contact {
		width: 80vw;
	}
	div.logo_cont img {
		display: none;
	}

	div.professional {
		/* padding-top: 320px; */
	}
}




/* MOBILE */
@media only screen and (max-width: 858px) {  /* Mobile */
	:root {
		--body_width: 90vw;
	}
	/* NAVIGATION */
	div.bar_centered div.logo {
		display: block !important;
	    z-index: 99 !important;
	}
	.checkbtn{
		display: inline-block;
		/* border: 1px solid black; */
	}
	div.navigation{
		position: fixed;
		z-index: 99 !important;
		width: 100vw;
		height: 105vh;
		background: var(--conteneur);
		top: 0px;
		left: -100%;
		text-align: center;
		transition: all .5s ease-in-out;
		overflow: hidden;
		padding-top: 100px;
		/* border: 1px solid black; */
	}
	div.nav_bar div.navigation li{
		display: block;
		margin: 0;
		line-height: 15px;
		width: 100%;
		/* border: 1px solid black; */
	}
	div.nav_bar div.navigation li a{
		width: 90%;
		font-family: 'lulo-bold';
		text-transform: uppercase;
		font-size: 15px;
		color: var(--light_color);
		/* border: 1px solid blue; */
	}
	#check:checked ~ div.navigation {
		left: 0;
	}




	/* HEADER & PRESENTATION */
	div#header {
		background: linear-gradient(rgba(51, 59, 80, 0.65), rgba(51, 59, 80, 0.7)), url("/images/mobile/presentation.png");
		background-position: right bottom;
		background-size: cover;
		background-repeat: no-repeat;
		padding-bottom: 150px;
	}
	div.presentation {
		width: calc(var(--body_width) - 20px);
		min-width: 0;
		margin-left: calc(100vw - var(--body_width));
		transform: translateX(0);
		/* border: 1px solid black; */
	}
	div.name h1 {
		font-size: 12vw;
		width: calc();
	}
	div.occupation h2 {
		font-size: 5vw;
	}

	#lang_selector {
		width: calc(240px + 2 * 12px);
	}




	/* PROFESSIONAL */
	div.professional {
		background: linear-gradient(rgba(51, 59, 80, 0.85), rgba(51, 59, 80, 0.85)), url("/images/mobile/professional.jpg");
		background-position: center 75%;
		padding-top: 85px;
	}
	div.title h2 {
		font-size: 6vw;
	}
	div.title h3 {
		font-size: 4.5vw;
	}


	/* PORTFOLIO */
	:root {
		--a: calc(100vw / 3);
	}
	.portfolio {
		height: calc(6 * var(--a))
	}
	div#n2 {
		top: calc(2 * var(--a));
		left: 0;
	}
	div#n3 {
		top: calc(5 * var(--a));
		left: 0;
	}
	div#n4 {
		top: calc(5 * var(--a));
		left: calc(1 * var(--a));
	}







	/* EXPERIENCE */
	div.exp_body {
		margin-top: 0px;
	}
	div.exp_space {
		padding-top: 0px;
	}
	div.green_point {
		display: none;
	}
	div.green_line {
		left: 0 !important;
		background: none !important;
		border: none !important;
	}
	div.exp_space {
		transform: translateX(0);
	}
	div.exp_activity_right {
		width: var(--body_width);
		padding-left: 5%;
		padding-right: 0;
		margin-top: 60px;
		text-align: left;
		transform: translateX(0);
	}
	div.exp_activity_left {
		width: var(--body_width);
		padding-right: 5%;
		padding-left: 0;
		margin-top: 60px;
		text-align: right;
		transform: translateX(0);
	}





	/* POPUP */
	.popup {
		width: 88%;
		padding: 20px;
		padding-bottom: 20px;
	}
	.popup p {
		line-height: 1.7em;
	}
	.project_image {
		width: 90%;
	}
	.popup legend {
		width: 90%;
	}
}