/*------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*							css pour page accueil balades photographiques							*/
/*------------------------------------------------------------------------------------------------------------------------------------------------------*/
html, body {
	height: 100vh;
	width: 100%;
	margin: 0;
	padding: 0;
	background : linear-gradient(45deg, rgb(46, 48, 52), rgb(130, 130, 130), rgb(187, 185, 180));
	border: 0px solid transparent;
	color: rgb(240,240,240);
	font-family: Constantia;
	font-size: 1em; /* Ideal: 16px */
}
html { 	
	zoom: 1.0;
}
a:link {
	color: rgb(240,240,240);
	text-align: center;
	text-decoration: none;
}
a:visited {
	color: rgb(240,240,240);
	text-align: center;
}
ul {
	padding-left: 0;
}
img, object, embed, canvas, video, audio, picture {
	max-width: 100%;
	height: auto;
	display: block;
}
figure {
	margin: auto;
}
.clear {
	clear: both;
}
/*------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*							Page																														*/
/*------------------------------------------------------------------------------------------------------------------------------------------------------*/
#content {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"header"
		"article"
		"footer";
		/*background-color: #119955;*/
/*---------------------------------------------------------------------------------------------------------------------------------*/
/*							                                 Entete														           */
/*---------------------------------------------------------------------------------------------------------------------------------*/
	header{
		height: 6vh;
		grid-area: header;
		display: flex;
		justify-content: center;
		/*background-color: #442255;*/
		.content-header {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-around;
			align-items: center;
			height: 5vh;
			width: 30%;
			font-size: clamp(0.5rem, 1.7vw, 2rem);
			/*background-color: #112233;*/
			.touche_nav {
				font-size: clamp(1.2rem, 1.5vw, 2rem);
				width: 10%;
			}
		}
	}
/*--------------------------------------------------------------------------------------------------------------------------------*/
/*                                                            Corps                                                               */
/*--------------------------------------------------------------------------------------------------------------------------------*/
	article {
		height: 90vh;
		grid-area: article;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: center;
		align-items: start;
		/*background-color: #662255;*/
		.content-article-galerie {
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			justify-content: space-around;
			align-content: space-around;
			height: 100%;
			width: 85%;
			overflow: hidden;
			border: 1px solid rgb(190,190,190);
			/*background-color: #995511;*/
			.content-article-galerie-left {
				display: flex;
				flex-wrap: wrap;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				writing-mode: vertical-rl;
				-ms-writing-mode: bt-rl;
				text-orientation: upright;
				font-size: clamp(0.3rem, 1.3vw, 2rem);
				height: 100%;
				width: 8%;
				/*background-color: #112233;*/
			}
			.content-article-galerie-body {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-around;
				align-items: center;
				align-content: center;
				height: 100%;
				width: 84%;
				font-size: clamp(0.3rem, 1.3vw, 2rem);
				/*background-color: #552233;*/
				.vign-galerie {
					max-width: 600px;
					max-height: 400px;
					width: 30%;
					margin-left: 0;
					margin-right: 0;
					/*background-color: #228811;*/
				}
			}
			.content-article-galerie-right {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-around;
				align-items: center;
				height: 100%;
				width: 8%;
				/*background-color: #778811;*/
			}
		}
	}
/*--------------------------------------------------------------------------------------------------------------------------------*/
/*                                                                Pied                                                            */
/*--------------------------------------------------------------------------------------------------------------------------------*/
	footer {
		height: 4vh;
		grid-area: footer;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		font-size: clamp(0.4rem, 0.85vw, 1rem);
		/*background-color: #663311;*/
	}
}
/*------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*                                                                   Gestion texte                                                                      */
/*------------------------------------------------------------------------------------------------------------------------------------------------------*/
.texte_petit {
	float: right;
	margin : 0.5% 0 0 0;
	font-size: clamp(0.5rem, 0.9vw, 1.5rem);
}
.texte_vignette {
	float: left;
	font-size: clamp(0.5rem, 1vw, 1.5rem);
}