/*
	* -------------------------------------------
	* Responsive petit écran (smartphone, tablette verticale)
	* -------------------------------------------
	*/
	@media only screen and (min-width: 765px) and (max-width: 1023px){


			/*
		* -------------------------------------------
		* Général
		* -------------------------------------------
		*/		
		body{
		background-color: whitesmoke;
		overflow-wrap: anywhere;		

		font-family: Times, serif;
		font-weight: normal;
		color: darkslategray;
		font-size: calc(0.45rem + 0.7vw);
		line-height: 105%;
		}

		i{
		font-style: italic;	
		}

		img{
		width: 100%;
		display: flex;
		}

		a{
		color: darkslategray;
		text-decoration: none;	
		}

		a:hover, .active{
		text-decoration-style: dotted;
		color: silver;
		text-decoration: underline dotted;
		text-decoration-thickness: 0.2em;	
		}


		/*
		* -------------------------------------------
		* Header
		* -------------------------------------------
		*/
		header{
		position:fixed;
		top: 0px;
		width: 100%;
		display: grid;			
		grid-template-columns: 2fr 1fr;
		z-index: 100;

		font-family: Times, serif;
		letter-spacing: 0.1em;
		}

			.chloe, .liens{
			margin: calc(10px + 0.3vw);	
			margin-top: calc(12px + 0.4vw);		
			}

		/*
		* -------------------------------------------
		* Index
		* -------------------------------------------
		*/
		.conteneur-index{
		margin: calc(10px + 0.3vw);			
		margin-top: calc(25px + 1.8vw);
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: calc(10px + 0.3vw);	
		}

			.projets{
			position:relative;
			}	

				.legende{
				position: absolute;
				width: 100%;
				height: 100%;
				background-color: black;
				opacity: 0;
				display: flex;
				justify-content: center; 
			 	align-items: center;
				}	

				.legende:hover{
				cursor: pointer;
				opacity: 100;
				}	

					figcaption{
					text-align: center;
					color: white;
					letter-spacing: 0.25em;
					word-spacing: 0.05em;			
					}

		/*
		* -------------------------------------------
		* Projets
		* -------------------------------------------
		*/
		.conteneur{
		margin-top: calc(25px + 1.8vw);
		}

		.conteneur-presentation{
		display: grid;
		grid-template-columns: 7fr 2fr;
		gap: calc(10px + 0.3vw);
		position: fixed;
		}

			h1{
			grid-column-start: 2;
			margin-right: calc(10px + 0.3vw);
			margin-left: -7px;
			}

			b{
			letter-spacing: 0.25em;
			word-spacing: 0.05em;
			text-transform: uppercase;
			font-size: calc(0.3rem + 0.8vw);
			}


		.conteneur-images{
		}

			.conteneur-image-horizontale{
			margin: calc(10px + 0.3vw);	
			display: grid;
			grid-template-columns: 7fr 2fr;
			gap: calc(10px + 0.3vw);	
			}

			.conteneur-image-verticale{
			margin: calc(10px + 0.3vw);	
			display: grid;
			grid-template-columns: 6fr 3fr;
			gap: calc(10px + 0.3vw);	
			}

			/* Figure */
			.fig{
			margin: calc(10px + 0.3vw);	
			}	


		/* Retour index */
		.index{
		margin: calc(10px + 0.3vw);	
		position:fixed;
		bottom: -5px;	
		right: 0%;
		z-index: 100;
		}

		.index a{
		color: darkslategray;
		text-decoration: none;
		}

		.index a:hover{
		color: silver;
		}


		/*
		* -------------------------------------------
		* À propos
		* -------------------------------------------
		*/

		.conteneur-a-propos{
		margin-top: calc(25px + 1.8vw);
		}
			.bio{
			display: grid;						
			grid-template-columns: 3fr 1fr;	
			margin: calc(10px + 0.3vw);	
			text-align: justify;
			}

				.bio br{
				margin-bottom: 6px;
				}


			.cv{
			display: grid;			
			grid-template-columns: 1fr 2fr 3fr;	
			margin: calc(10px + 0.3vw);	
			}

				.categorie, .date{
				grid-column-start: 1;
				}

				.partenariat{
				grid-column-start: 2;	
				}

				.experiences{
				grid-column-start: 3;			
				}

	}