@font-face {
	font-family: 'AutographyRegular';
	src: url('../font/Autography.eot');
	src: url('../font/Autography.eot') format('embedded-opentype'),
		 url('../font/Autography.woff') format('woff'),
		 url('../font/Autography.ttf') format('truetype'),
		 url('../font/Autography.svg#AutographyRegular') format('svg');
}
html, body, header, footer, nav, label, ul, li, a, section, h1, h2, h3, h4, h5, h6, p, img, figure, div, span, input, textarea {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-family:Arial, Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	color:black;
	vertical-align: baseline;
	line-height: 1;
}
* { 
	box-sizing: border-box;
}
#bton_menu,
input[type=submit] {
	cursor:pointer;
}
a {
	text-decoration:none;
}
body {
	overflow-y:scroll;
	overflow-x:hidden;
}
#content br {   
	display: block;
   	margin: 2vh 0;
	content: " ";
}
input[type=radio] {
	display:none;
}
h1 {	
	font-family:"AutographyRegular",arial; font-size: calc((100vw - 2vmin)/ 11);
	color:gainsboro;
	text-shadow:1px 1px 1px black;
	align-self:flex-end;
	justify-self: center;	
	position:relative;
	z-index:5;
	transform: rotate(-10deg); 
}
footer {
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
}
/************************************/
#content {
	display:grid;
	grid-template-rows :40% 1fr min-content;
	padding:1vmax;
	min-height:100vh;
}
#content h1 {
	grid-column: 1 / span 2; 
	grid-row: 1;	
	color:aqua;
}
.mini {
	font-family:"AutographyRegular",arial; 
	font-size: calc(100vw / 22); 
	color:silver;
}
.texte { 
	grid-row: 2;
	text-align:justify;
	align-self:center;
}
.texte p {
	line-height:1.2;
	position:relative;
	z-index:6;
}
.conditions h2 {
	padding-bottom:2vh;
}
.conditions .texte p{
	font-size: calc(0.9vw + 4px); 
}
.image {
	grid-row: 1 / span 3;
	align-self:center;
	justify-self: center;
}
.image img {
	height:95vh;
	width:auto;
	position:relative;
	z-index:3;
}
#content footer {
	grid-column:1 / span 2;
	grid-row: 3;
}
#adresse {
	font-size: calc(50vw / 40 + 2px);
	background-color:rgba(255,255,255,0.6);
	background-color:azure;
	position:relative;
	z-index:4;
	padding:1vmin;
	border-radius:10px;
	border:2px solid aqua;
}
/*************************/
#menu_bton {
	display:none;
}
#bton_menu {
	position:fixed;
	z-index:10;
	top:1vmin;
	right:1vmin;
	width:calc(2.5vh + 2.5vw);
	min-width:60px;
	height:calc(2.5vh + 2.5vw);
	min-height:60px;
	background: aqua url(../img/navigation/menu_on.png) center / 70% no-repeat;
	border:1px solid #666;
	border-radius:50% 15% 50% 15%;
	box-shadow:1px 2px 1px black;
}
#menu_bton:checked ~ #bton_menu {
	background: orange url(../img/navigation/menu_off.png) center / 70% no-repeat;
} 
nav { 
	position:fixed;
	top:0;
	bottom:0;
	background-color:white;
	z-index:9;
	left:-100%;
	overflow-y:scroll;
}

#menu_bton:checked + #content_list {
	display:none;
}
.rien {
	font-size:calc(10px + 1vmax);
	padding:1vmax;
	background-color:rgba(255,255,255,0.8);
}
#menu_bton:checked ~ nav { 
	left:0;
}
#menu_bton ~ nav { 
	-webkit-transition: left 0.9s; 
	-o-transition: left 0.9s; 
	transition: left 0.9s;
}
nav ul {
	list-style:none;
}
#cadre_menu {
	display:grid;
	grid-template-rows :min-content min-content 1fr max-content;
	grid-template-columns :1fr 1fr 1fr;
	grid-column-gap:1vw;
	padding:1vmax;
	min-height:100vh;
	width:calc(100vw - 20px);
}
/* Accueil - Contact - Conditions */
.menu_l1_c1{
	grid-row:1;
	grid-column:1 / span 3;
	margin:1vh 0;
	border:1px solid aqua;
	border-radius:10px;
}
.menu_l1_c1 ul{
	display:flex;
	justify-content:space-around;
	padding:1vmin;
}
.menu_l1_c1 li {
	color:black;
	text-shadow:1px 1px 1px rgba(0,0,0,0.5);
	font-size:calc(10px + 1vmin);
}
.menu_l1_c1 a {
	color:aqua;
	text-shadow:1px 1px 1px rgba(0,0,0,0.5);
	font-size:calc(10px + 1vmin);
}
.menu_l1_c1 a:hover {
	text-shadow:1px 1px 1px black;
}
/* Recherche */
.menu_l2_c1 {
	grid-row:2;
	grid-column:1 / span 3;
	border:1px solid aqua;
	border-radius:10px;
}
.menu_l2_c1 label {
	font-size:calc(14px + 0.9vmin);
}
.menu_l2_c1 ul {
	display:flex;
	justify-content:space-around;
	padding:1vmin;
}
.menu_l2_c1 form {
	text-align:center;
}
.menu_l2_c1 input[type=submit] {
	font-size:calc(14px + 0.9vmin);
	background-color:azure;
	padding:1vmin;
	box-shadow:1px 1px 1px black;
	border-radius:15px;
}
.menu_l2_c1 input[type=submit]:hover {
	background-color:aqua;
	box-shadow:1px 1px 1px silver;
}
#mots input,
#mots select {
	border:1px solid silver;
	padding:0.5vmin;
	font-size:calc(14px + 0.9vmin);
	color:#3B3B3B;
}
#genre,
#categorie {
	margin-right:2vw;
}

/*Menu couleurs*/

#couleur {
	padding:1vmin;
}
.nul	{border:none !important; background: url(../img/navigation/menu_off.png) center / 70% no-repeat;}
.blanc 	{background-color:white;}
.jaune 	{background-color:yellow;}
.vert 	{background-color:green;}
.rose 	{background-color:pink;}
.rouge 	{background-color:red;}
.bleu 	{background-color:blue;}
.violet {background-color:purple;}
.brun 	{background-color:chocolate;}
.noir 	{background-color:black;}
.gris 	{background-color:silver;}
.orange {background-color:orange;}
input[type=radio]:checked+label {border:3px solid red !important;}
input[type=radio]:checked+.rose,
input[type=radio]:checked+.rouge {border:3px solid black !important;}
input[type=radio]:checked+.nul {border:none !important;}
.multiple {
	background: -webkit-repeating-linear-gradient(left top, red, yellow 10%, green 20%);
  	background: -o-repeating-linear-gradient(bottom right, red, yellow 10%, green 20%);
  	background: -moz-repeating-linear-gradient(bottom right, red, yellow 10%, green 20%);
  	background: repeating-linear-gradient(to bottom right, red, yellow 10%, green 20%);
}


/*Accessoires*/
.menu_l4_c1 {	
	grid-column:1 / span 3;
}
.menu_l4_c1 ul {
	padding:1vmin 0;
	display:grid;
    grid-gap: 1vmax;
}
.menu_l4_c1 ul li {
	padding:1vmin;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	text-align:center;
	border:1px solid aqua;
	border-radius:5%;
	overflow:hidden;
	font-size:calc(6px + 1vmin);
}
.menu_l4_c1 ul li:hover {
	background-color:azure;
}
.menu_l4_c1 .portrait {
	height: 8vw;
	max-height:150px;
	min-height:100px;
	width: auto;
}
.menu_l4_c1 .paysage {
	height: auto;
	width: 8vw;
	max-width:150px;
	min-width:100px;
}
/*************************************************/
#content-one {
	display:grid;
	grid-template-columns :10vw 1fr 1fr 10vw;
	grid-template-rows :min-content 15vh min-content minmax(min-content, 1fr) min-content;
	padding:1vmax;
	min-height:100vh;
}
#content-one h1 {
	grid-row:3;
	grid-column:1 / span 4;
	z-index:3;
}
#content-one h2 { /*background-color:rgba(12,128,45,0.5);*/
	grid-row:1;
	grid-column:1 / span 2;
	/*font-family:"AutographyRegular",arial; */
	font-size: calc((40vw - 2vmin)/ 11);
	color:aqua;
	padding:1vmax;
	font-weight:normal;
}
#content-one h3 {
	grid-row:2;
	grid-column:1 / span 2;
	font-size: calc(10px + 1vmin);
	font-style:italic;
	color:darkgrey;
	padding:1vmax;
	font-weight:normal;
	line-height:1.5;
}
#content-one figure { /*background-color:rgba(125,125,250,0.41);*/
	grid-row:1 / span 5;
	grid-column:3 / span 2;
	z-index:5;
	text-align:left;
}
#content-one figure img {
	height:95vh;
	width:auto;
}
.paysage {
	display:flex;
	align-items:center;
	height:95vh;
}
.paysage img {
	width:40vw !important;
	height:auto !important;
}
#content-one footer {
	grid-column:1 / span 4;
	grid-row: 5;
}
#content-one .av {/*background-color:rgba(187,232,187,0.51);*/
	grid-column:1;
	grid-row:4;
	display:flex;
	align-items:flex-end;
	z-index:6;
}
#content-one .ap {/*background-color:rgba(241,128,244,0.47);*/
	grid-column:4;
	grid-row:4;
	display:flex;
	align-items:flex-end;
	z-index:6;
}
#info {/*background-color:rgba(170,201,133,0.49)*/;
	grid-column:2;
	grid-row:4;
	display:flex;
	justify-content:flex-end;
	align-items:flex-end;
	padding:0 10vh 10vh 0;
}
#compo {/*background-color:rgba(121,228,190,0.44);*/
	grid-column:1 / span 2;
	grid-row:3;
	display:flex;
	flex-wrap:wrap;
	z-index:4
}
.moyen {
	border:1px solid aqua;
    border-radius: 5px;
	padding: 1vmin;
	background-color:rgba(240,255,255,0.8);	
	margin:1vmin;
	height:calc(50px + 10vh);
	width:calc(50px + 10vh);
}
.ap img,
.av img {
	width:10vw;
	height:10vw;
}
/*************************************************/
#content-list {
	display:grid;
	grid-template-columns :40% 1fr;
	grid-template-rows :min-content 25vw minmax(min-content, 1fr) min-content;
	padding:1vmax;
	min-height:100vh;
}
#content-list h1 {
	grid-row:2;
	grid-column:1 / span 2;
}
#content-list h2 {
	grid-row:1;
	grid-column:1 / span 2;
	/*font-family:"AutographyRegular",arial; */
	font-size: calc((40vw - 2vmin)/ 11);
	color:aqua;
	padding:1vmax;
	font-weight:normal;
}
#vignette {
	grid-row:2 /span 2;
	grid-column:1 / span 2;
	z-index:6;
	display:flex;
	justify-content : center;
	align-items:center;
	margin:auto;
}
#vignette ul {
	list-style:none;
    display: flex;
	flex-wrap:wrap;
	justify-content:center;
}
#vignette li {
	border:1px solid aqua;
    border-radius: 5px;
    padding: 1vmin;
	text-align:center;
	overflow:hidden;
	display:flex;
	justify-content:center;
	align-items:center;
	background-color:rgba(240,255,255,0.8);	
	margin:1.5vw;
}
#vignette img{
	max-height:200px;
	max-width:200px;
	padding:1vmin;
}
#content-list footer {
	grid-column:1 / span 2;
	grid-row: 4;
}	
#formulaire input,
#formulaire textarea {
	border:1px solid aqua;
	padding:1vmin;
}
#formulaire {
	font-size:calc(4px + 10vmin);
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-templates-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-gap:1vmin;
}
#name {
	grid-row:1;
	grid-column:1 / span 2;
}
#prenom {
	grid-row:1;
	grid-column:3 / span 2;
}
#rue {
	grid-row:2;
	grid-column:1 / span 3;
}
#numero {
	grid-row:2;
	grid-column:4;
}
#cp {
	grid-row:3;
	grid-column:1;
}
#ville {
	grid-row:3;
	grid-column:2 / span 3;
}
#email {
	grid-row:4;
	grid-column:1 / span 4;
}
#notel {
	grid-row:5;
	grid-column:1 / span 4;
}
#message {
	grid-row:6;
	grid-column:1 / span 4;
}
.menu_l3_c1,
.menu_l3_c2,
.menu_l3_c3 {
	display:none;
}
#vignette img {min-width:150px;}
@media screen and (orientation: portrait){
	#content {
		grid-template-columns :60% 1fr;
	}
	.texte { 
		grid-column: 1 / span 2;
		font-size: calc(50vh / 40 + 4px); 
		height:100%;
		padding:5vw;
		z-index:8;
		display:flex;
		align-items:center;
		background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.7), rgba(255,255,255,0));
	}
	.texte p {
		background-color:rgba(255,255,255,0.1);
	}
	.image {
		grid-column:1 / span 2;
	}
	.menu_l4_c1 ul {
		grid-template-columns: repeat(auto-fill, minmax(20vw, 1fr) ) ;
	}
	#vignette img{
		min-width:150px;
	}
	#couleur label {
		display:inline-block;
		width:calc(100vw / 8.5);
		min-width:60px;
		max-width:80px;
		height:calc(100vw / 8.5);
		min-height:40px;
		max-height:50px;
		border:1px solid black;
		border-radius:50%;
		cursor:pointer;
	}	
	#cadre_menu {
		grid-template-rows :min-content min-content 1fr;
	}
	.menu_l4_c1 {	
		grid-row:3;
		grid-column:1 / span 3;
	}
	.msg-landscape {display:none;}
}
@media screen and (orientation: landscape){
	#content {
		grid-template-columns :40% 1fr;
	}	
	.texte { 
	
		grid-column: 2;
		font-size: calc(50vw / 40 + 4px); 
		max-width:50vw;
	}	
	.image {
		grid-column:1;
	}
	.menu_l3_c1 ul li,
	.menu_l3_c2 ul li,
	.menu_l3_c3 ul li {
		text-align:right;
		padding:3vh 1vw 0 0;
	}
	.menu_l4_c1 ul {
		grid-template-columns: repeat(auto-fill, minmax(8vw, 1fr) ) ;
	}	
	#vignette img{
		width:9vw;
		height:auto;	
	}	
	/*Costumes*/
	.menu_l3_c1,
	.menu_l3_c2,
	.menu_l3_c3 {
		display:block;
		margin:1vh 0;
		padding:1vmin;
		grid-row:3;
		border:1px solid aqua;
		border-radius:10px;
	}
	/*Femmes*/
	.menu_l3_c1{
		grid-column:1;
		background: azure url(../img/femme/epoque/431.png) center bottom / contain no-repeat;
	}
	/*Hommes*/
	.menu_l3_c2{
		grid-column:2;
		background: azure url(../img/homme/epoque/446.png) center bottom / contain no-repeat;
	}
	
	/*Enfants*/
	
	.menu_l3_c3{
		grid-column:3;
		background: azure url(../img/enfant/epoque/613.png) center bottom / contain no-repeat;
	}
	.menu_l3_c1 ul li,
	.menu_l3_c2 ul li,
	.menu_l3_c3 ul li {
		text-align:right;
		padding:3vh 1vw 0 0;
	}
	.menu_l3_c1 ul a,
	.menu_l3_c2 ul a,
	.menu_l3_c3 ul a {
		font-size:calc(18px + 0.9vmin);
		font-weight:bold;
	}
	.menu_l3_c1 li a,
	.menu_l3_c2 li a,
	.menu_l3_c3 li a {
		font-size:calc(15px + 0.9vmin);
		font-weight:normal;
	}
	.menu_l3_c1 ul a:hover,
	.menu_l3_c2 ul a:hover,
	.menu_l3_c3 ul a:hover {
		color:aqua;
	}
	#couleur label {
		display:inline-block;
		width:2vw;
		min-width:40px;
		max-width:50px;
		height:2vw;
		min-height:40px;
		max-height:50px;
		margin:0 1vmin;
		border:1px solid black;
		border-radius:50%;
		cursor:pointer;
	}
	/*Accessoires*/	
	.menu_l4_c1 {	
		grid-row:4;
	}	
	#mobile .msg-landscape {
		display:flex;
		width:100vw;
		height:90vh;
		flex-direction:column;
		justify-content:center;
		align-items:center;
		background: url(../img/femme/epoque/431.png) center center / 50vh no-repeat;
		font-size:calc(100vw / 35);
	}	
	#pc .msg-landscape {
		display:none;
	}
	#mobile #menu,
	#mobile #content,	
	#mobile #content-list,	
	#mobile #content-one{
		display:none;
	}
}