:root {
	--ev-blue : rgb(0,81,114);
	--ev-green: rgb(81,114,0);
	--ev-purple: rgb(114,0,81);
	--ev-brown: rgb(114,81,0);
	--ev-purple-2: rgb(81,0,114);
	--ev-teal: rgb(0,114,81);
	
	/* définition de la couleur de base */
	
	--primary-color-h: 197;
	--primary-color-s: 100%;
	--primary-color-l: 22%;
	
	--primary-color: hsl(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l));
	
	/* définition du %age d'assombrissement / éclaircissement */
	
	--lighten-percentage: 20%;
	--darken-percentage: 15%;
	
	/*Calcul des couleurs "dark" et "light" */
	
	--primary-color-light: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + var(--lighten-percentage)));
	--primary-color-dark: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) - var(--darken-percentage)));
	--primary-background-color: hsla(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l), 0.15);
	
	/*Calcul des complémentaires: */
	
	--primary-color-complement: hsl(calc(var(--primary-color-h) + 180), var(--primary-color-s), var(--primary-color-l));
	
	--primary-color-triad-1: hsl(calc(var(--primary-color-h) + 120), var(--primary-color-s), var(--primary-color-l));
	--primary-color-triad-1-dark: hsl(calc(var(--primary-color-h) + 120), var(--primary-color-s), calc(var(--primary-color-l) - var(--darken-percentage)));
	--primary-color-triad-1-light: hsl(calc(var(--primary-color-h) + 120), var(--primary-color-s), calc(var(--primary-color-l) + var(--lighten-percentage)));
	
	--primary-color-triad-2: hsl(calc(var(--primary-color-h) + 240), var(--primary-color-s), var(--primary-color-l));
	--primary-color-triad-2-dark: hsl(calc(var(--primary-color-h) + 240), var(--primary-color-s), calc(var(--primary-color-l) - var(--darken-percentage)));
	--primary-color-triad-2-light: hsl(calc(var(--primary-color-h) + 240), var(--primary-color-s), calc(var(--primary-color-l) + var(--lighten-percentage)));
	
	--primary-color-quad-1: hsl(calc(var(--primary-color-h) + 90), var(--primary-color-s), var(--primary-color-l));
	--primary-color-quad-1-dark: hsl(calc(var(--primary-color-h) + 90), var(--primary-color-s), calc(var(--primary-color-l) - var(--darken-percentage)));
	--primary-color-quad-1-light: hsl(calc(var(--primary-color-h) + 90), var(--primary-color-s), calc(var(--primary-color-l) + var(--lighten-percentage)));
	
	--primary-color-quad-2: hsl(calc(var(--primary-color-h) + 180), var(--primary-color-s), var(--primary-color-l));
	--primary-color-quad-2-dark: hsl(calc(var(--primary-color-h) + 180), var(--primary-color-s), calc(var(--primary-color-l) - var(--darken-percentage)));
	--primary-color-quad-2-light: hsl(calc(var(--primary-color-h) + 180), var(--primary-color-s), calc(var(--primary-color-l) + var(--lighten-percentage)));
	
	--primary-color-quad-3: hsl(calc(var(--primary-color-h) + 270), var(--primary-color-s), var(--primary-color-l));
	--primary-color-quad-3-dark: hsl(calc(var(--primary-color-h) + 270), var(--primary-color-s), calc(var(--primary-color-l) - var(--darken-percentage)));
	--primary-color-quad-3-light: hsl(calc(var(--primary-color-h) + 270), var(--primary-color-s), calc(var(--primary-color-l) + var(--lighten-percentage)));

}




*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;

}

html, body {
	height: 100%;
	overflox: hidden;

html {
	scroll-behavior: smooth;
}

body {
	font-family: "Gill Sans", sans-serif;

}

#container {
	max-width: var(--container-max-width);
	
	&:has(section #antichronological) {
		--container-max-width: 1500px;
	}
	&:has(section #field) {
		--container-max-width: 1100px;
	}
	&:has(section #type) {
		--container-max-width: 1200px;
	}
	margin: 0 auto;
}


button {

	border-radius: 15px;
	background: none;
}



@keyframes apparition {
	from { transform: scale(0); }
	to { transform: scale(1); }
}

header#main-header {
	animation-name: apparition;
	animation-duration: 1s;
	width: 100%;
	max-width: var(--container-max-width);
	max-height: 10vh;
	
	position: fixed;
	top: 0;
	z-index: 15;
	
	border-radius: 10px;
	background-color: var(--primary-color-dark);
	text-align: center;
	& h1 {
		color: var(--primary-color-light);
		font-size: 3vh;
	}
	& h2 {
		color: var(--primary-color-light);
		font-size: 2.5vh;
	}
	button {
		position: absolute;
		right: 3vh;
		top : 1vh;
		/*bottom: 0;*/
		color: var(--primary-color-triad-2-light);
		border: 1px solid currentcolor /*var(--primary-color-quad-2-light)*/;
		box-shadow: 3px 3px currentcolor /*var(--primary-color-quad-2-light)*/;
		font-size: 2vh;
		padding: 0.5vh 2vh;
	}

	#miscellaneous {
		font-size: 0.9rem;
		max-height: 80vh;
		max-width: min(80vw, 80ch);
		margin: auto;
		padding: 0.5em;
		color: var(primary-color-quad-2-dark);
		border: 5px solid var(--primary-color-complement);
		border-radius: 2em;
		line-height: 2em;

		div {
			margin-bottom: 1.5em;
			border-top: 1px solid var(--primary-color-quad-2-light);
		}
		ul {
			list-style-position: inside;

		} 
		ul, h4 {
			text-align: left;
			background: var(--primary-background-color);
			margin: 0.5em;
			padding: 0.5em;
			border-radius: 0.5em;
		}

		
		h2, h3 {
			color: var(--primary-color-quad-2-light);
		}
		h3 {
			padding-top: 1em;
		}
		
		img {
			height: 12vh;
		}
		button {
			
		}
		ul img {
			width: 1.5em;
			height: auto;
			margin-right: 0.3em;
			position: relative;
			top: 0.3em;
		}
		#technos {
			display: grid;
			grid-template-columns: 50% 50%;
			/*border-top: 1px solid var(--primary-color-quad-2-light);*/
			/*border-bottom: 1px solid var(--primary-color-quad-2-light);*/
			h3 {
				grid-column: 1 / 3;
			}
			
		}
		button {
			position: sticky;
			bottom: 0;
			padding: 1em;
			color: var(--primary-color-quad-2-light);
			background-color: white;
			font-size: 1rem;
		}
		@media only screen and (min-width: 768px) {
			/*display: grid;
			grid-template-columns: auto auto;*/
			button {
				width: 80%;
				margin: auto;
			}	
			#portofolio, #scolaire {
				width: 49%;
			}
			#portofolio {
				float: left;
			}
			#scolaire, p {
				float: right;
			}
			
			p {
				width: 79%;
				margin-top: 2em;
			}
			h3 {
				clear: both;
			}
		}
	}
}


#main {

	display: flex;
	/*height: calc(100vh - 5rem);*/
	height: calc(100vh - 10vh);
	
	position:relative;
	/*top: 5rem;*/
	top: 7vh;
	@media only screen and (max-width: 768px) {
		display: grid;
		grid-template-rows: auto auto;
		height: calc(91vh - 4rem);
		@media only screen and (max-height: 600px) {
			height: 90vh;
		}
	}
	
}


aside, #cv {
	flex: 1 auto;
	overflow-y: auto;
	scroll-behavior: smooth;
}


aside {
	min-width: 20vw;
	max-width: 15em;
	margin-right: 0.5rem;
	
	button {
		display: flex;
		justify-content: space-start;
		align-items: center;
		width: 70%;
		height: 5vh;
		margin-top: 1em;
		font-size: 0.7rem;
		color: var(--primary-color);
		border: 2px solid currentcolor;
		background-color: white;
		&:hover {
			background-color: var(--primary-background-color);
			color: white;
			border: 2px solid var(--primary-color-light);
		}
	}

	@media only screen and (max-width: 768px) {
		max-width: 100vw;
		top: 5rem;
		padding: 1%;
		& article {
			margin: 0.3rem 0rem;
			padding: 0.2rem;
		}
	}
	div {
		border: 1px solid black;
	}
	span {
		display: block;
		width: 3rem;
		max-width: 5vh;
		height: 3rem;
		max-height: 4vh;
		background-repeat: no-repeat;
		background-position: center center;
			
		margin: 0;
		background-size: contain;
	}	
}


#contact {
	text-align: center;
	& span {
		display: block;
		width: 4rem;
		max-width: 5vh;
		height: 4rem;
		max-height: 5vh;
		background-repeat: no-repeat;
		background-position: center center;
		
		margin: auto;
		background-size: contain;
	}
	#location-icon {
		background-image: url("../data/images/house-svgrepo-com.svg");

	}
	#phone-icon {
		background-image: url("../data/images/phone-svgrepo-com.svg");
	}
	#email-icon {
		background-image: url("../data/images/email-address-svgrepo-com.svg");
	}
	
	
	@media only screen and (max-width: 768px) {
		display: flex;
		/*
		width: 38%;
		float: left;
		*/
		position: fixed;
		bottom: 0;
		height: 4rem;
		max-height: 6vh;

		p {
			display: none;
			& span {
				display: block;
			}
		}
		span:hover+p, span:active+p {
			display: block;
			
			position: fixed;
			/*right: 0;*/
			width: 70%;
			margin: auto;

			bottom: 5rem;
			/*margin-left: 2rem;*/
			border: 2px solid white;
			padding: 1em;
			box-shadow: 10px 10px 5px;
			
			/*left: 0;*/
			
			background: var(--primary-color-light);
			border-radius: 0.5em;
		}
		@media only screen and (max-height: 600px) {
			position: static;
			width: 18%;
			float: left;
		}
		
	}
}

/* Pour faire disparaitre le menu sur les écrans trop petits */
/*
@media only screen and (max-height: 600px) {
	aside:has(~ section.type) article#contact, aside:has(~ section.type) article#filter {
	background-color: blue;
	}
}
*/
#filter {

	p.btn-order-text {
		display: inline-block;

	}
	
	#chonology-icon {
		background-image: url("../data/images/chronology.png");
	}
	#type-icon {
		background-image: url("../data/images/type.png");
	}
	#field-icon {
		background-image: url("../data/images/field.png");
	}
	
	
	@media only screen and (max-width: 768px) {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		float: right;
		button {
			/*display: inline-block;*/
			width: fit-content;
			margin-left: 0.5em;
			margin-right: 0.5em;
		}
		button:hover > p, #filter-container {
			display: block;
			position: absolute;
			right: 1.5rem;
			/*color: var(--primary-color-light);
			background-color: var(--primary-color-dark);*/
			font-size: 1rem;
			padding: 0.5em;
			border-radius: 0.5em;
		}
		button:hover > p {
			/*height: 100%;*/
			color: var(--primary-color-light);
			background-color: var(--primary-color-dark);
			@media only screen and (max-width: 600px) {
				display: none;
			}
		}
		#filter container {
			display:flex;
			flex-direction: column;
		}
		
		#current-order-value, #current-filter-value {
			font-size: 0.8em;
			background: none;
		}
		
		h5, div {
			text-align: center;
			color: var(--primary-color);
			
			/*display: none;*/
			
		}
		p.btn-order-text {
			display: none;
		}
		#btn-filter-all {
			order: 2;
			/*flex-grow: 1;*/
		}
		#btn-order-by-type {
			order: 3;
			/*flex-grow: 1;*/
		}
		#btn-order-by-field {
			order: 4;
			/*flex-grow: 1;*/
		}
		h5 {
			order: 1;
			@media only screen and (max-width: 600px) {
				display: none;
			}
			
			/*flex-grow: 1;*/
		}
		div#current-order-value {
			order: 5;
			top: calc(10vh +5rem);
		}
		
		#current-filter-value {
			bottom: 0;
		}
		
		@media only screen and (max-height: 600px) {
			position: static;
			width: 78%;
			float: right;
		}
	}
	@media only screen and (max-height: 768px) {
		margin: 0;
		padding: 0;
		border: none;
	}
	& div:empty {
		display: none;
	}
	& div {
		border: none;
	}
}

#links-to-section {
	display: none;
	padding: 0;
	border: none;
	
	&:has(a ~ a) {
		width: 100%;
		display: flex;
		flex-direction:column;
		@media only screen and (max-width: 768px) {
			flex-direction: row;
			justify-content: space-between;
		}
	}
	a {
		display: block;
		padding: 0.5em;
		margin: 0.5em 0;
		border: 3px solid white;
		border-radius: 15px;
		text-align: center;
		/*border: 3px solid;*/
		
		&.emploi-stage-alternance {
			color: var(--primary-color);
		}
		&.diplome-formation {
			color: var(--primary-color-triad-1);
		}
		&.hobbies {
			color: var(--primary-color-triad-2);
		}
		&.optique {
			color: var(--primary-color);
		}
		&.enseignement {
			color: var(--primary-color-quad-1);
		}
		&.veille {
			color: var(--primary-color-quad-2);
		}
		&.physique {
			color: var(--primary-color-quad-3);
		}
		
		@media only screen and (max-height: 768px) {
			margin: 0;
			padding: 0;
		}
		@media only screen and (max-width: 768px) {
		margin: 0.1em;
		padding: 0.1em;
		}	
	}
	a:hover, a:active {
		/*
		background-color: currentcolor;
		text-shadow: 2px 2px  white;
		*/
		border: 3px solid currentcolor;
	}
	
}

aside:has(~ section.type) #links-to-section {
	display: none;
}


@keyframes filterTag-animation {
	0% {
		text-shadow: none;
		color: black;
	}
	50% {
		text-shadow: 0 0 4px blue;
		color: white;
	}
	100% {
		text-shadow: none;
		color: black;
	}
}

#cv {
	@media only screen and (max-width: 600px) {
		grid-row: 2;
	}
}
		
.filterTag {
	padding: 0.3em;
	margin: 0.3em;
	cursor:pointer;
	border: 1px solid grey;
	border-radius: 10px;
	animation-name: filterTag-animation;
	animation-duration: 3s;
	animation-iteration-count: infinite;

	&:nth-of-type(n) {
		animation-delay: 2s;
	}
	&:nth-of-type(2n) {
		animation-delay: 1s;
	}
	&:nth-of-type(3n) {
		animation-delay: 3s;
	}


}

article {
	background-image: linear-gradient(to left, var(--section-color), white, white);
	margin: 1rem 0;
	padding: 0.8em;
	border: 1px solid black;
	height: auto;
	border-radius: 15px;
	overflow: hidden;
	& header {
		display: flex;
		margin-bottom: 1rem;
		background-color: rgb(o,o,o,o.2);
		justify-content: space-between;
		em {
			display: block;
			width: 25%;
		}
	}
	img {
		width: clamp(2.5rem, 7vw, 7rem);
	}		
	& ul {
		list-style-position: inside;
	}
	
	& ul:empty, & li:empty, & button:empty {
		display: none;
	}
	h4:has(+ ul li:empty), h4:has(+ div button:empty) {
		display: none;
	}
	button {
		color: var(--section-color);
		background-color: white;
		border-color: currentColor;
		box-shadow: 3px 3px 5px currentColor;
	}
}

@keyframes articleDisplay { 
	0% { height: 0;}
	100% { height: 100%;}
}



abbr {
	text-decoration: none;
}

/*
.field {
	float: left;
}

*/

/*----------------------------------------*/
/*             Antichronologique          */
/*----------------------------------------*/

#antichronological {
	h1 {
		text-align: center;
		color: var(--primary-color);
	}
	
	.chronology {
		&:has(.optique) {
			--section-color: var(--primary-color);
			--section-color-light: var(--primary-color-light);
		}
		&:has(.enseignement) {
			--section-color: var(--primary-color-triad-1);
			--section-color-light: var(--primary-color-triad-1-light);
		}
		&:has(.veille), &:has(.Physique) {
			--section-color: var(--primary-color-triad-2);
			--section-color-light: var(--primary-color-triad-2-light);
		}
	}
}


/*----------------------------------------*/
/*             Type                       */
/*----------------------------------------*/

@keyframes opening-article {
	from {
		width: clamp(3.1rem, calc(7vw + 0.6rem), 7.6rem);
		height: clamp(3.6rem, calc(8vw + 0.6rem), 8.1rem);
		/*float: left;*/
	}
	to {
		width: auto;
		height: auto;
		/*clear: both;*/
	}
}

div#type {
	
	article {
		background: none;
		border: none;
		box-shadow: 10px 10px 5px var(--section-color);
	}
	
	h1 {
			background-color: var(--section-color);
			color: white;
			text-align: center;
			font-size: 2rem;
			position: sticky;
			top: 0;
			margin: 0 0.5rem;
			border-radius: 1rem;
	}
	
	#emploi-stage-alternance {
		--section-color: var(--primary-color);
		--section-color-light: var(--primary-color-light);
	}
	
	#diplome-formation {
		--section-color: var(--primary-color-triad-1);
		--section-color-light: var(--primary-color-triad-1-light);
	}
	#hobbies {
		--section-color: var(--primary-color-triad-2);
		--section-color-light: var(--primary-color-triad-2-light);
	}
	
		
		article {
		margin-left: 0.5rem;
		margin-right: 0.5rem;

	}
	
	display: flex;
	flex-direction: row;
	
	@media only screen and (max-width: 1200px) {
		display: grid;
		grid-template-columns: auto auto;
		grid-template-rows: auto auto;
		
		article {
			width: clamp(3.1rem, calc(7vw + 0.6rem), 7.6rem);
			height: clamp(4.6rem, calc(8vw + 2.6rem), 9.1rem);
			float: left;
			transition: width 1s;

		}
		input {
			visibility: hidden;
		}
		article > div {
			display: none;
		}
		article header {
			display: block;
			margin: 0;
			padding: 0;
			height: 100%;
			/*order: 1;*/
		}
		article header em, article header button {
			display:none;
		}
		article header h2 {
			display: block;
			margin: 0.5em 0;
			padding: 0;
			font-size: 0.8rem;
			text-align: center;
			color: var(--section-color);
			
		}
		

		article label {
			display: flex;
			height: 100%;
			flex-direction: column;
			justify-content: space-between;
		}
		input:checked ~ div {
			display: block;
			/*order: 3;*/
		}
		article:has(input:checked) {
			header *{
				display: block;
				/*order: 2;*/
			}
			div {
				display: block;	
			}
			width: 95%;
			height: auto;
			clear: both;
			top: 0;
		}
		
	}
	& header {
		display: grid;
		grid-template-columns: auto auto;
		em {
			grid-column: 1 / span 2;
		}
	}	
}


/*----------------------------------------*/
/*             Domaine                    */
/*----------------------------------------*/

#field {
	h1 {
			background-color: white;
			color: var(--section-color);
			text-align: center;
			font-size: 2rem;
			position: sticky;
			top: 0;
	}
	#optique {
		--section-color: var(--primary-color);
		--section-color-light: var(--primary-color-light);
	}
	#enseignement {
		--section-color: var(--primary-color-quad-1);
		--section-color-light: var(--primary-color-quad-1-light);
	}
	#veille {
		--section-color: var(--primary-color-quad-2);
		--section-color-light: var(--primary-color-quad-2-light);
	}
	#physique {
		--section-color: var(--primary-color-quad-3);
		--section-color-light: var(--primary-color-quad-3-light);
	}
	.title-abbreviated {
		display: none;
	}
}



/*
.optique .place, .veille .place, .physique .place, .enseignement .place {
	float: none;
}
*/


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	#main {
	width: 100% ;
	}
}

@media only screen and (max-width: 768px) {	
	.requiredSkills-hardSkills > ul {
			display: none;
	}
	
	.requiredSkills-hardSkills:hover > ul, .requiredSkills-hardSkills:active > ul {
		display: block;
	}
	/*
	@keyframe tagAnimation {
		0% { 
		padding: 0.3em;
		color: black;
		border: 2px solid;
		border-color: rgb(255, 51, 255,0);
		border-radius: 10%;
		}
		100% {
		text-shadow: 0 0 4px blue;
		color: white;
		}
	}
	.filterTag {
		animation-name: tagAnimation;
		animation-duration: 2s;
	}
	*/
}
	


/* Small devices (portrait tablets and large phones, 600px and up) 
@media only screen and (min-width: 600px) {
	#main {
	grid-template-columns: 2fr 6fr ;
	}
}


/* Medium devices (landscape tablets, 768px and up) 
@media only screen and (min-width: 768px) {
	#main {
	grid-template-columns: 1fr 6fr 1fr;
	}
}


/* Large devices (laptops/desktops, 992px and up) 
@media only screen and (min-width: 992px) {
	#main {
	grid-template-columns: 1fr 3fr 1fr;
	}
}


/* Extra large devices (large laptops and desktops, 1200px and up) 
@media only screen and (min-width: 1200px) {
	#main {
	grid-template-columns: 1fr 5fr 1fr;
	}
}
*/