@import url('reset.css');
@import url('ultra_system_fonts.css');
:root {
	--black: #0C0A0D;
	--yellow: #F0E64E;
	--orange: #F96900;
	--white: #F0F0F0;
	--blue: #3C91E6;
	--red: #E02932;
}
html {
	font-size: 62.5%;
	overflow: hidden; /*cache scrollbars*/
}
header {
	position: absolute;
	z-index: 300;
	height: 10rem;
	width: 100vw;
}
header nav {
	position: fixed;
	right: 0;
	width: 33vw;
	display: grid;
	grid-template-columns: repeat(4, 25%);
	height: 10rem;
	margin-right: 5rem;
}
header #nav-accueil-txt {
	display: none;
}
header nav a {
	font-family: futura-pt, 'Source Sans Pro', sans-serif;
	font-weight: 300;
	text-decoration: none;
	color: var(--white);
	font-size: 1.1vw;
	align-self: center;
	justify-self: center;
	transition: all 1s ease-out;
}

html:not([data-scroll='0']) header nav a {
  	color: var(--black);
}
header nav svg {
	fill: var(--white);
	height: 2.4rem;
	width: auto;
	transition: all 1s ease-out;
}
html:not([data-scroll='0']) header nav svg {
	fill: var(--black);
}

html:not([data-scroll='0']) header .menu-icon .navicon,
html:not([data-scroll='0']) header .menu-icon .navicon:before,
html:not([data-scroll='0']) header .menu-icon .navicon:after {
	background-color: var(--black);
}
/* menu icon */
header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  right: 5rem;
  top: 5rem;
  position: fixed;
  user-select: none;
  z-index: 350;
}
header .menu-icon .navicon {
  background: var(--white);
  display: block;
  height: .5rem;
  position: relative;
  transition: background .2s ease-out;
  width: 4rem;

}
header .menu-icon .navicon:before,
header .menu-icon .navicon:after {
  background: var(--white);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}
header .menu-icon .navicon:before {
  top: 1.2rem;
}
header .menu-icon .navicon:after {
  top: -1.2rem;
}
/* menu btn */
header .menu-btn {
  display: none;
}
header .menu-btn:checked ~ .menu {
  max-height: 340px;
}
header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}
header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
  background: var(--white);
}
header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
   background: var(--white);
}
header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}
header .menu-icon {
	display: none;
}

section {
	display: grid;
	height: 100vh;
}
/* SECTION ACCUEIL */
#accueil {
	background-color: var(--black);
	grid-template: 10% 48% 42% / 4% 54% 21% 21%;
	color: var(--white);

}
#accueil * { z-index: 10; } /*pour chrome*/

#accueil .logo {
	grid-row-start: 1;
	grid-column-start: 2;
	align-self: center;
	display: flex;
}
#accueil .logo svg {
	fill: var(--white);
	height: 3.8rem;
	width: auto;
}

#accueil .logo span {
	font-family: futura-pt, 'Source Sans Pro', sans-serif;
	font-weight: 300;
	font-size: 2.2rem;
	align-self: center;
	margin-left: 1rem;
}

#accueil .sous-titres {
	grid-area: 2 / 3 / 3 / 5;
	width: 15vw;
	justify-self: center;
	align-self: center;
}
#accueil .sous-titres h2 {
	font-family: futura-pt, 'Source Sans Pro', sans-serif;
	font-weight: 200;
	font-size: 3.5vw;
	line-height: 1.25;
	margin-left: 3.5rem;
}

#accueil .nom {
	grid-area: 3 / 2 / 4 / 3;
	display: grid;
	grid-template: 6vh 6vh 6vh 13vh / 10vw 7.5vw 4.2vw 27vw;
	grid-row-gap: 1.3vh;
	grid-column-gap: 1.25vw;
	justify-items: center;
	align-items: center; 
	position: relative;
}

#accueil .nom div {
	width: 100%;
	height: 100%;
}
#accueil .nom div:nth-child(1) {
	grid-row: 1/2;
	grid-column: 1/3;
	font-family: futura-pt, 'Source Sans Pro', sans-serif;
	font-weight: 900;
	font-size: 4.15vw;
	line-height: 5.7vh;
	text-indent: -.4rem;
}
#accueil .nom div:nth-child(2) {
	grid-row: 1/2;
	grid-column: 3/5;
	background-color: var(--white);
}
#accueil .nom div:nth-child(3) {
	grid-row: 2/3;
	grid-column: 1/2;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: .5rem solid var(--white);
}
#accueil .nom div:nth-child(4) {
	grid-row: 2/3;
	grid-column: 2/3;
	font-family: futura-pt, 'Source Sans Pro', sans-serif;
	font-weight: 200;
	font-size: 4.15vw;
	line-height: 5.7vh;
}
#accueil .nom div:nth-child(5) {
	grid-row: 2/3;
	grid-column: 3/5;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: .5rem solid var(--white);
}
#accueil .nom div:nth-child(6) {
	grid-row: 3/4;
	grid-column: 1/4;
	font-family: 'ultra_systemsans', sans-serif;
	font-size: 4.05vw;
	line-height: 6.9vh;
	text-indent: -.5rem;
}
#accueil .nom div:nth-child(7) {
	grid-row: 3/4;
	grid-column: 4/5;
	background-color: var(--white);
}
#accueil .nom div:nth-child(8) {
	font-family: 'ultra_systemsans_line_one', sans-serif;
	font-size: 9.8vw;
	line-height: 8.1vw;
	text-indent: -1rem;
} 

#accueil .d-arrows {
	grid-area : 3 / 3 / 4 / 4;
	justify-self: center;
	align-self: end;
	z-index: 100;
}

#accueil .d-arrows svg {
	fill: var(--white);
	width: 5rem;
	height: auto;
	margin-bottom: 3.5rem;
	animation: bounce 2s 3;
	animation-delay: 2s;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
#accueil .barcodes {
	grid-area: 3 / 4 / 4 /5;
	font-family: 'Libre Barcode 128 Text', cursive;
	font-size: 5rem;
	line-height: 8vh;
	text-align: right;
	display: grid;
	justify-self: end;
	align-self: end;
	padding-bottom: 2rem;
	padding-right: 2.8rem;
}

/*SECTION MOI*/
#moi {
	background-color: var(--red);
	grid-template: 9.5vh 9.6vh 12.3vh 11.7vh 9.3vh 3.8vh 34.7vh 9.8vh / 4.7vw 18.9vw 35.4vw 5.2vw 29vw 6.8vw;
	color: var(--black);
	font-family: futura-pt, 'Source Sans Pro', sans-serif;
}

#moi .chapitre_1 {
	grid-area: 2 / 2 / 5 / 3;
	font-weight: 200;
	align-self: end;
	font-size: 20vw;
	line-height: .73;
	text-indent: -3.3rem;
}

#moi .mains_1 {
	grid-area: 2 / 3 / 6 / 4;
	background-color: var(--white);
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

#moi .mains_1 img {
	flex: none;
	width: 20vw;
}

#moi .titre_chapitre_1 {
	grid-area: 5 / 2 / 7 / 4;
	font-family: 'ultra_systemsans', sans-serif;
	font-size: 4.89vw;
	display: grid;
	justify-items: end;
	align-items: end;
	text-align: right;
	line-height: 1.8;
}

#moi .resume {
	grid-area: 7 / 2 / 8 /4;
	justify-self: center;
	align-self: center;

}
#moi .resume p {
	font-size: 2.5rem;
	font-weight: 300;
	margin-top: 4rem;
	text-align: justify;
}

#moi .exp-diplomes {
	grid-area: 3 / 5 / 4 / 6;
	font-family: 'ultra_systemsans', sans-serif;
	font-size: 5rem;
	line-height: 7vh;
}

#moi #single_animation_c1 {
	grid-area: 1 / 5 / 3 / 7;

}

/*SECTION MOI -> timeline*/
#moi .timeline {
	grid-area: 4 / 5 / 8 / 6;
	display: grid;
	grid-template: 10.28% 12.83% 11.52% 12.83% 3.74% 12% 13.4% 6.08% 12.77% 4.37% / 22.26% 25.32% 52.42%;
	font-size: 1.8rem;
}

#moi .timeline .timeline_annee {
	font-family: 'ultra_systemsans', sans-serif;
	margin-top: .25vh;
}

#moi .timeline .timeline_mois {
	font-weight: 200;
	text-indent: 10%;
}

#moi .timeline .timeline_intitule {
	font-size: 2rem;
	font-weight: 600;
}

#moi .timeline .timeline_lieu {
	font-weight: 200;
	font-style: italic;
}

#moi .timeline div:nth-child(1) {
	grid-area: 2 / 1 / 3 / 2;
}

#moi .timeline div:nth-child(2) {
	grid-area: 4 / 1 / 5 / 2;
}

#moi .timeline div:nth-child(3) {
	grid-area: 6 / 1 / 7 / 2;
}

#moi .timeline div:nth-child(4) {
	grid-area: 7 / 1 / 8 / 2;
}

#moi .timeline div:nth-child(5) {
	grid-area: 9 / 1 / 10 / 2;
}

#moi .timeline div:nth-child(6) {
	grid-area: 2 / 2 / 10 / 3;
	justify-self: start;

}
#moi .timeline:nth-child(6) div svg {
	height: 93.79%;
	fill: var(--black);
	margin-top: 4%;

}

#moi .timeline div:nth-child(7) {
	grid-area: 2 / 3 / 3 / 4;
}

#moi .timeline div:nth-child(8) {
	grid-area: 4 / 3 / 5 / 4;
}

#moi .timeline div:nth-child(9) {
	grid-area: 7 / 3 / 8 / 4;
}

#moi .timeline div:nth-child(10) {
	grid-area: 9 / 3 / 10 / 4;
}

#moi .timeline div:nth-child(7), #moi .timeline div:nth-child(8), #moi .timeline div:nth-child(9), #moi .timeline div:nth-child(10) { align-self: end; }

/*SECTION COMPETENCES*/

#competences {
	background-color: var(--yellow);
	grid-template: 10vh 6.48vh 13.61vh 6.48vh 12.04vh 32.31vh 10.56vh 3.43vh 5.09vh / 4.53vw 35.31vw 23.96vw 36.2vw;
	color: var(--black);
	font-family: futura-pt, 'Source Sans Pro', sans-serif;
	font-weight: 300;
}

#competences svg {
	height: 6vh;
	width: auto;
	fill: var(--black);
}
#competences .design_print {
	grid-area: 2 / 2 / 3 / 3;
}

#competences .design_print, #competences .web, #competences .je_sais .je_sais_titre {
	font-family: 'ultra_systemsans', sans-serif;
	font-size: 2.5vw;
}

#competences .liste_1 {
	grid-area: 3 / 2 / 4 / 3;
	display: flex;
}

#competences .liste_1 div, #competences .liste_2 div {
	margin-right: 3.6vw;
	text-align: center;
	font-size: 1.5rem;
	margin-top: 1rem;
} 
#competences .web {
	grid-area: 4 / 2 / 5 / 3;
}

#competences .liste_2 {
	grid-area: 5 / 2 / 6 / 3;
	display: flex;
}

#competences .mains_2 {
	grid-area: 6 / 2 / 8 / 3;
	background-color: var(--blue);
	display: grid;
	justify-items: center;
	align-items: center;
	padding-right: 5%;
	overflow: hidden;
}

#competences .mains_2 img {
	width: 20vw;
}

#competences .titre_chapitre_2 {
	grid-area: 7 / 2 / 9 / 4;
	font-family: 'ultra_systemsans', sans-serif;
	font-size: 4.89vw;
	display: grid;
	align-items: end;
	line-height: 1.98;
	text-indent: -.3vw;
}

#competences .chapitre_2 {
	grid-area: 6 / 3 / 7 / 4;
	align-self: end;
	font-size: 20vw;
	line-height: .73;
	text-indent: 2.7rem;
}

#competences .je_sais {
	grid-area: 3 / 4 / 8 / 5;
}
#competences .je_sais div p {
	font-size: 2.5vh;
	margin: 2rem 0;
}
#competences #single_animation_c2 {
	grid-area: 1 / 3 / 6 / 4;
}

/*SECTION CONTACT*/
#contact {
	background-color: var(--blue);
	grid-template: 12.22vh 54.26vh 8.61vh 15.65vh 9.26vh / 33.9vw 3.54vw 14.8vw 16.25vw 24.11vw 7.4vw;
	color:	var(--white);
	font-family: futura-pt, 'Source Sans Pro', sans-serif;
	font-weight: 300;
}

#contact .form {
	width: 100%;
	grid-area: 1 / 1 / 5 / 2;
	background-color: var(--white);
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
}

#contact .form form {
	width: 80%;
	margin: 7% auto 2%;
}

#contact .form input, #contact .form textarea {
	width: 95%;
	border-width: 0 .2rem .2rem .2rem;
	border-color: var(--blue);
	background: transparent;
	color: var(--blue);
	margin-top: 6%;
	padding: 1% 2%;
	font-size: 1.8rem;
	font-family: futura-pt, 'Source Sans Pro', sans-serif;
	transition: all .1s ease-out;
}

#contact .form input:focus, #contact .form textarea:focus {
	border: transparent .2rem solid;
	border-top: 0;
	outline: none;
	background-color: var(--blue);
	color: var(--white);
}

#contact .form input:invalid {
	border: transparent .2rem solid;
	border-top: 0;
	outline: none;
	background-color: var(--red);
	color: var(--white);
}
#contact .form input::placeholder, #contact .form textarea::placeholder {
	font-family: futura-pt, 'Source Sans Pro', sans-serif;
	color: var(--blue);
	font-size: 1.5rem;
	opacity: 1;

}
#contact .form textarea {
	height: 25rem;
	resize: none;
	text-indent: 0;
	overflow: hidden;
}

#contact .form textarea::placeholder {
	padding-bottom: 25rem;
}

#contact .form input[type="submit"] {
	padding: 0;
	width: 15rem;
	height: 5rem;
	border: .2rem var(--blue) solid;
	color: var(--blue);
	float: right;
	cursor: pointer;
	transition: all .1s ease-out;
}
#contact .form input[type="submit"]:hover {
	background-color: var(--blue);
	color: var(--white);
	transform: scale(1.1);
}

#contact .form input[type="submit"]:focus {
	color: var(--white);
	outline: none;
}
#contact .form #single_animation_c3 {
	width: 100%;
	height: 9vh;
}
#contact .form div:nth-child(3) {
	color: var(--blue);
	font-size: 2rem;
	text-align: center;
	margin-bottom: 7%;
}

#contact .form div:nth-child(3) a {
	font-size: 2.2rem;
	font-weight: 500;
	display: inline-block;
	color: var(--blue);
	text-decoration: none;
	margin-top: 1rem;
	transition: all .1s ease-out;
}
#contact .form div:nth-child(3) a:hover {
	transform: scale(1.1);
}

#contact .envoyer_message {
	grid-area: 1 / 2 / 5 / 3;
	align-self: center;
	justify-self: center;
}

#contact .envoyer_message h3 {
	transform: rotate(90deg);
	font-family: 'ultra_systemsans', sans-serif;
	font-size: 4vh;
	white-space: nowrap;
}

#contact .texte_stage {
	grid-area: 4 / 3 / 5 / 6;
	padding: 0 5rem;
	font-size: 2rem;
	display: grid;
	justify-items: center;
	align-items: center;
}
#contact .titre_chapitre_3 {
	grid-area: 2 / 4 / 3 / 6;
	font-family: 'ultra_systemsans', sans-serif;
	font-size: 4.89vw;
	display: grid;
	align-items: end;
	z-index: 5;
}

#contact .chapitre_3 {
	grid-area: 2 / 4 / 3 / 5;
	font-size: 20vw;
	display: grid;
	align-items: center;
	margin-bottom: 10rem;
	z-index: 10;
}

#contact .mains_3 {
	grid-area: 2 / 5 / 4 / 6;
	background-color: var(--black);
	display: grid;
	justify-items: center;
	align-items: center;
	overflow: hidden;
}

#contact .mains_3 img {
	width: 22vw;
}

#contact #single_animation_c3_2 {
	grid-area: 1 / 3 / 2 / 5;
}

footer {
	grid-area: 5 / 1 / 6 / 7;
	justify-self: center;
	align-self: center;
	font-size: 1.4rem;
}

@media (max-width: 1600px) {

	#accueil .barcodes {
		align-self: center;
	}
	#moi .timeline p {
		font-size: 1.5rem;
	}
	#moi .timeline {
		column-gap: 2vw;
	}

	#moi .exp-diplomes {
		font-size: 4.2rem;
	}

}

/* Tablettes */
@media (max-width: 1224px) {

	/*HEADER*/
	header .menu-icon {
		display: inline-block;
	}
	header #nav-accueil-icon {
		display: none;
	}
	header .menu-btn:checked ~ nav {
		display: flex;
	}
	header nav {
		margin: 0;
		padding: 0;
		display: none;
		height: 100vh;
		width: 100vw;
		background: rgb(12, 10, 13, .95);
		flex-flow: column nowrap;
		justify-content: space-around;
		transition: all .2s ease-out;
		padding: 5% 0;
	}

	header nav a, header #nav-accueil-txt {
		display: block;
		font-size: 8vw;
	}
	header nav svg {
		height: 5vw;
	}
	html:not([data-scroll='0']) header nav a {
  		color: var(--white);
	}

	/*ACCUEIL*/
	#accueil {
		grid-template: 5.37vh 46.7vh 35.2vh 10.98vh 1.75vh / 5.21vw 59.58vw 30vw 5.21vw;
	}

	#accueil .logo {
		align-self: start;
		margin-top: 4vh;
	}
	#accueil .sous-titres {	grid-area: 2 / 3 / 3 / 4; }
	#accueil .sous-titres h2 {
		margin-left: 2rem;
		font-size: 4rem;
	}
	#accueil .nom {
		grid-area: 3 / 2 / 4 / 4;
		grid-template: 50% 50% / 59.58vw 30vw;
		grid-row-gap: 0;
		grid-column-gap: 0;
	}
	#accueil .nom div:nth-child(1) {
		grid-area: 1 / 2 / 3 / 3;
		display: grid;
		align-content: center;
		justify-items: end;
		font-size: 5.2vw;
		line-height: 5.2vh;
		margin-bottom: 10vw;
	}
	#accueil .nom div:nth-child(4) {
		grid-area: 1 / 2 / 3 / 3;
		display: grid;
		align-content: center;
		justify-items: end;
		font-size: 12.2vw;
		font-style: italic;
		line-height: inherit;
		margin-top: 10vw;
	}
	#accueil .nom div:nth-child(6) {
		grid-area: 1 / 1 / 2 / 2;
		display: grid;
		align-content: end;
		font-size: 10vw;
		text-indent: -.5rem;
		line-height: inherit;
	}
	#accueil .nom div:nth-child(8) {
		grid-area: 2 / 1 / 3 / 2;
		display: grid;
		font-size: 11.1vw;
		text-indent: -.5rem;
		line-height: inherit;
	}
	#accueil .nom div:nth-child(2),
	#accueil .nom div:nth-child(3),
	#accueil .nom div:nth-child(5),
	#accueil .nom div:nth-child(7) {
		display: none;
	}

	#accueil .barcodes {
		grid-area: 4 / 2 / 5 / 4;
		padding: 0;
		align-self: end;
		width: 100%;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		font-size: 5.8vw;
	}

	#accueil .d-arrows { grid-area: 4 / 2 / 5 / 4; }
	#accueil .d-arrows svg { margin: 1.5vh; }

	/*MOI*/
	#moi .resume p {
		font-size: 2rem;
		margin-top: 2rem;
	}

	#moi .timeline svg {
		display: none;
	}
	#moi .timeline div:nth-child(7), #moi .timeline div:nth-child(8), #moi .timeline div:nth-child(9), #moi .timeline div:nth-child(10) {
		align-self: start;
		grid-column: 2 / 4;
	}

	#moi .timeline div:nth-child(9) {
		grid-row: 6 / 8;
		align-self: center;
		padding-bottom: 3vh;
	}

	#moi .exp-diplomes {
		font-size: 3vw;
	}

	/*COMPETETENCES*/
	#competences .je_sais div p {
		font-size: 2rem;
	}

	#competences .design_print,
	#competences .liste_1,
	#competences .web,
	#competences .liste_2 {
		grid-column: 2 / 4;
	}
	#competences .design_print,
	#competences .web,
	#competences .je_sais .je_sais_titre {
		font-size: 3vw;
	}
	#competences #single_animation_c2 {
		grid-area: 1 / 3 / 3 / 5;
	}

	/*CONTACT*/
	#contact {
		grid-template: 12.22vh 54.26vh 8.61vh 15.65vh 9.26vh / 50vw 5vw 8vw 10vw 25vw 2vw;
	}
}

@media(max-width: 769px) {
	/*MOI*/
	#moi {
		grid-template: 10vh 40vh 40vh 10vh / 3vw 50vw 2vw 42vw 3vw;
	}

	#moi .chapitre_1 {
		grid-area: 2 / 2 / 3 / 3;
		z-index: 1;
		justify-self: center;
		align-self: center;
		font-size: 60vw;
		/*color: var(--red);*/
	}

	#moi .titre_chapitre_1 {
		grid-area: 3 / 2 / 4 / 3;
		align-self: start;
		justify-self: center;
		font-size: 3.9vw;
	}

	#moi .mains_1 {
		grid-area: 2 / 2 / 3 / 3;

	}
	#moi .mains_1 img {
		width: 45vw;
		opacity: .8;
	}

	#moi .resume {
		grid-area: 3 / 2 / 4 / 3;
		padding-right: 2rem;
	}
	#moi .resume p{
		font-size: 1.7rem;
	}

	#moi .exp-diplomes {
		grid-area: 2 / 4 / 3 / 5;
	}

	#moi .timeline {
		grid-area: 2 / 4 / 4 / 5;
		margin-top: 15vh;
	}
	#moi .timeline p {
		font-size: 1.4rem !important;
	}

	#moi #single_animation_c1 {
		grid-area: 4 / 2 / 5 / 5;
	}

	/*COMPETENCES*/
	#competences {
		grid-template: 10vh 4vh 18vh 4vh 18vh 38vh 8vh / 2vw 47vw 2vw 47vw 2vw;
	}

	#competences .design_print,
	#competences .liste_1,
	#competences .web,
	#competences .liste_2 { grid-column: 2 / 3; }

	#competences .liste_1, #competences .liste_2 {
		flex-wrap: wrap;
	}
	#competences .liste_1 svg, #competences .liste_2 svg {
		height: 4rem;
	}

	#competences .liste_1 p, #competences .liste_2 p {
		font-size: 1.3rem;
	}

	#competences .design_print,
	#competences .web,
	#competences .je_sais .je_sais_titre {
		font-size: 4vw;
	}

	#competences .mains_2 {
		grid-area: 6 / 2 / 7 / 3;
	}

	#competences .mains_2 img {
		width: 45vw;
		opacity: .8;
	}

	#competences .titre_chapitre_2 {
		align-self: start;
		justify-self: left;
		font-size: 3.9vw;
	}
	#competences .chapitre_2 {
		grid-area: 6 / 2 / 7 / 3;
		justify-self: center;
		align-self: center;
		font-size: 60vw;
		z-index: 10;
	}	
	#competences .je_sais {
		padding-left: 2rem;
	}
	#competences .je_sais div p {
		font-size: 1.8rem;
		/*margin: 2rem 0;*/
	}

	/*CONTACT*/
	#contact {
		grid-template: 12vh 38vh 20vh 20vh 10vh / 48vw 2vw 47vw 2vw;
	}

	#contact .form {
		justify-content: space-around;
	}

	#contact .form form {
		width: 90%;
		margin: 15% auto 2rem;
	}
	#contact .form input, #contact .form textarea {
		width: 97%;
		border-width: 0 .2rem .2rem .2rem;
		margin-top: 6%;
		padding: 1% 1%;
		font-size: 1.4rem;
	}

	#contact .form input[type="submit"] {
		font-size: 1.8rem;
	}
	#contact .form textarea {
		height: 18rem;
	}
	#contact .envoyer_message {
		grid-area: 1 / 1 / 2 / 2;
		align-self: start;
		padding-top: 3rem; 
	}

	#contact .envoyer_message h3 {
		transform: inherit;
		color: var(--blue);
		font-size: 2.3vw;
	}
	#contact .mains_3 {
		grid-area: 2 / 3 / 3 / 4;
	}

	#contact .mains_3 img {
		width: 45vw;
		opacity: .8;
	}
	#contact .chapitre_3 {
		grid-area: 2 / 3 / 3 / 4;
		justify-self: center;
		align-self: center;
		font-size: 60vw;
		line-height: 1.98;
		z-index: 10;
		margin: 0;
	}	

	#contact .titre_chapitre_3 {
		grid-area: 3 / 3 / 4 / 4;
		justify-self: center;
		align-self: start;
	}

	#contact .texte_stage {
		grid-area: 3 / 3 / 5 / 4;
		padding: 0 .5rem;
		text-align: justify;
	}
}

/*smartphones*/
@media(max-width: 421px) {
	html {
		overflow: inherit;
	}
	header .menu-icon {
		right: 5vw;
		top: 5vh;
	}

	/*ACCUEIL*/
	#accueil {
		grid-template: 6.15vh 34.12vh 49.88vh 9.85vh / 2vw 98vw 2vw;		
	}

	#accueil .logo {
		grid-area: 1 / 2 / 2 / 3;
		align-self: end;
		margin-top: 0;
		margin-left: 2rem;
	}

	#accueil .logo span {
		font-size: 1.5rem;
	}

	#accueil .logo svg {
		height: 2.7rem;
	}
	#accueil .sous-titres {
		grid-area: 2 / 2 / 3 / 3;
		display: grid;
		justify-self: right;
		width: 30%;
		margin-right: 15vw;
	}
	#accueil .sous-titres h2 {
		margin: 0;
		font-size: 3rem;
	}
	#accueil .nom {
		grid-area: 3 / 2 / 4 / 3;
		grid-template: 14.82% 33.33% 14.82% 37.03%/ 100%;
		grid-row-gap: 0;
		grid-column-gap: 0;
	}
	#accueil .nom div:nth-child(1) {
		grid-area: 3 / 1 / 4 / 2;
		display: grid;
		align-content: start;
		justify-items: center;
		font-size: 5.2vw;
		line-height: 5.2vh;
		margin: 0;
	}
	#accueil .nom div:nth-child(4) {
		grid-area: 4 / 1 / 5 / 2;
		display: grid;
		align-content: start;
		justify-items: center;
		font-size: 12.2vw;
		font-style: normal;
		line-height: inherit;
		margin: 0;
	}
	#accueil .nom div:nth-child(6) {
		grid-area: 1 / 1 / 2 / 2;
		display: grid;
		justify-content: center;
		align-content: end;
		font-size: 15vw;
		line-height: inherit;
	}
	#accueil .nom div:nth-child(8) {
		grid-area: 2 / 1 / 3 / 2;
		display: grid;
		justify-content: center;
		font-size: 16.8vw;
		line-height: inherit;
	}

	#accueil .barcodes {
		grid-area: 4 / 2 / 5 / 3;
		padding: 0;
		align-self: start;
		width: 100%;
		display: grid;
		grid-template: 100% / 50% 50%;
		justify-content: start;
		font-size: 7vw;
		line-height: 8vw;
		padding: 0 2vw;
	}

	#accueil .barcodes span:nth-child(1) {
		text-align: left;
	}
	#accueil .barcodes span:nth-child(2) {
		padding-left: 50%;
		justify-self: end;
	}

	#accueil .d-arrows { grid-area: 4 / 2 / 5 / 3; }
	#accueil .d-arrows svg { margin: 1.5vh; }

	/*MOI*/
	#moi {
		height: auto;
		grid-template: 10vh 38vh 40vh 45vh 7vh / 4vw 92vw 4vw;
	}
	#moi .chapitre_1 {
		grid-area: 2 / 2 / 3 / 3;
		z-index: 1;
		justify-self: center;
		align-self: center;
	}

	#moi .titre_chapitre_1 {
		grid-area: 1 / 2 / 2 / 3;
		align-self: center;
		justify-self: start;
		font-size: 5.5vw;
	}

	#moi .mains_1 {
		grid-area: 2 / 2 / 3 / 3;

	}
	#moi .mains_1 img {
		width: 70vw;
	}

	#moi .resume {
		grid-area: 3 / 2 / 4 / 3;
	}
	#moi .resume p{
		font-size: 1.5rem;
		margin-top: 2rem;

	}
	#moi .exp-diplomes {
		grid-area: 4 / 2 / 5 / 3;
		justify-self: center;
	}
	#moi .exp-diplomes h3 {
		display: inline-block;
		font-size: 5vw;
	}

	#moi .timeline {
		grid-area: 4 / 2 / 5 / 3;
		margin-top: 5vh;
	}
	#moi .timeline p {
		font-size: 1.2rem !important;
	}

	#moi .timeline svg {
		display: inherit;
	}

	#moi .timeline div:nth-child(7), #moi .timeline div:nth-child(8), #moi .timeline div:nth-child(9), #moi .timeline div:nth-child(10) {
		align-self: end;
		grid-column: 3 / 4;
		padding-bottom: 0;
	}

	#moi .timeline div:nth-child(9) {
		grid-row: 7 / 8;
	}

	#moi #single_animation_c1 {
		display: none;
	}

	/*COMPETENCES*/
	#competences {
		height: inherit;
		grid-template: 10vh 8vh 15vh 4vh 15vh 38vh 7vh 80vh 7vh / 4vw 92vw 4vw;
	}

	#competences .design_print,
	#competences .web { align-self: end; }

	#competences .design_print,
	#competences .web,
	#competences .je_sais .je_sais_titre { font-size: 5vw; }

	#competences .liste_1 svg, #competences .liste_2 svg {
		height: 9vw;
	}

	#competences .liste_1 p, #competences .liste_2 p {
		font-size: 1.4rem;
	}
	#competences .mains_2 img {
		width: 70vw;
		padding-bottom: 5%;
	}
	#competences .titre_chapitre_2 {
		grid-area: 1 / 2 / 2 / 3;
		align-self: center;
		font-size: 5.5vw;
	}
	#competences .je_sais {
		grid-area: 8 / 2 / 9 / 3;
		text-align: right;
	}
	#competences .je_sais div p {
		font-size: 1.5rem;
		margin-top: .5rem;
	}

	#competences #single_animation_c2 {
		display: none;
	}

	/*CONTACT*/
	#contact {
		height: auto;
		grid-template: 10vh 38vh 30vh 100vh 10vh / 4vw 92vw 4vw;
	}

	#contact .form {
		grid-area: 4 / 1 / 5 / 4;
	}
	#contact .form form {
		margin: 8% auto 0;
	}
	#contact .form input, #contact .form textarea {
		height: 3rem;
	}
	#contact .form input[type="submit"] {
		font-size: 2rem;
		text-transform: uppercase;
		float: none;
		display: block;
		width: 60%;
		height: 7rem;
		margin: 6% auto 0;
	}
	#contact .form textarea {
		height: 18rem;
	}
	#contact .envoyer_message {
		grid-area: 3 / 2 / 4 / 3;
		padding-bottom: 1.5rem;
		align-self: end;
	}
	#contact .envoyer_message h3 {
		color: var(--white);
		font-size: 4.5vw;
	}

	#contact .mains_3 {
		grid-area: 2 / 2 / 3 / 3;
	}

	#contact .mains_3 img {
		width: 70vw;
	}
	#contact .chapitre_3 {
		grid-area: 2 / 2 / 3 / 3;
	}	

	#contact .titre_chapitre_3 {
		grid-area: 1 / 2 / 2 / 3;
		justify-self: start;
		align-self: center;
	}

	#contact .texte_stage {
		grid-area: 3 / 2 / 4 / 3;
		padding: 0 .5rem 8vh;
		text-align: justify;
	}
	#contact #single_animation_c3_2 {
		display: none;
	}

	#contact .form div:nth-child(3) p {
		font-size: 1.8rem;
	}
	#contact .form div:nth-child(3) a {
		font-size: 2.8rem;
		text-decoration: underline;
	}

	#contact .form #single_animation_c3 {
		display: none;
	}
	footer {
		grid-area: 5 / 2 / 6 / 3;
	}
}