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


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

		font-family: Times, serif;
		font-weight: normal;
		color: darkslategray;
		font-size: calc(0.9rem + 0.1vw);
		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{
		margin-top: calc(2px + 1vw);
		position:fixed;
		top: 0px;
		width: 100%;
		z-index: 100;

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


			.chloe, .liens{
			margin: calc(8px + 0.3vw);
			text-align: center;
			line-height: 20%;
			}		

		/*
		* -------------------------------------------
		* Index
		* -------------------------------------------
		*/
		.conteneur-index{
		margin: calc(8px + 0.3vw);
		margin-top: calc(43px + 2vw);
		display: grid;
		grid-template-columns: 1fr;
		gap: calc(8px + 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{
		}					
	
			.conteneur-presentation{
			margin: calc(8px + 0.3vw);
			margin-top: calc(50px + 2vw);
			margin-bottom: calc(8px + 1.2vw);			
			}

					h1{
					}

						b{
						letter-spacing: 0.25em;
						word-spacing: 0.05em;
						text-transform: uppercase;
						}
		

			.conteneur-images{
			}

				.conteneur-image-horizontale, .conteneur-image-verticale{
				margin: calc(8px + 0.3vw);
				}


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


		/* Retour index */
		.index{
		margin: calc(8px + 0.3vw);	
		z-index: 100;
		text-align: end;
		}

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

		.index a:hover{
		color: silver;
		}	


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

		.conteneur-a-propos{
		margin-top: calc(50px + 2vw);
		}

			.bio{
			margin: calc(8px + 0.3vw);	
			text-align: justify;
			}


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

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

				.categorie{

				}

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

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


	}