/* rubik regular */
@font-face{
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 400;
	src: url('../font/Rubik/Rubik-Regular.ttf') format('truetype');
	font-display: swap;
}

/* rubik medium */
@font-face{
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 500;
	src: url('../font/Rubik/Rubik-Medium.ttf') format('truetype');
	font-display: swap;
}

/* rubik regular */
@font-face{
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 400;
	src: url('../font/Oswald/Oswald-Regular.ttf') format('truetype');
	font-display: swap;
}

/* rubik medium */
@font-face{
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 500;
	src: url('../font/Oswald/Oswald-Medium.ttf') format('truetype');
	font-display: swap;
}

:root{
	--color-jauneABT: #ffd700;
}
body, h1, h2, h3, h4, h5, h6, p, ul, li{
	margin: 0;
	padding: 0;
}
body{
	text-align: center;
	font-family: 'Rubik', sans-serif;
	font-size: 16px;
	font-weight: 400;
	background-color: #fff;
}

/*entete*/
#entete hr, #piedPage hr{
	display: none;
}

/*logo*/
#logo{
	display: none;
}

/*nav1Toogle*/
#nav1Toogle{
	position: absolute;
	z-index: 20000;
	width: 40px;
	height: 40px;
	padding: 5px;
	border-radius: 50%;
	background-color: #000;
	background-clip: content-box;
	font-size: 0;
	cursor: pointer;
	transition: background-color 0.2s ease-in;
	-webkit-transition: background-color 0.2s ease-in;
}
#nav1Toogle span{
	position: absolute;
	left: 15px;
	display: block;
	width: 20px;
	height: 2px;
	background-color: #fff;
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	transition: background-color 0.2s ease-out, top 0.2s ease-out, left 0.2s ease-out, width 0.2s ease-out, transform 0.2s ease-out;
	-webkit-transition: background-color 0.2s ease-out, top 0.2s ease-out, left 0.2s ease-out, width 0.2s ease-out, transform 0.2s ease-out;
}
#nav1Toogle:hover span{
	background-color: var(--color-jauneABT);
}
#nav1ToogleL1{
	top: 17px;
}
#nav1ToogleL2{
	top: 25px;
}
#nav1ToogleL3{
	top: 33px;
}
#nav1.open #nav1ToogleL1{
	top: 20px;
	left: 9px;
	width: 15px;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
}
#nav1.open #nav1ToogleL2{
	left: 10px;
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
}
#nav1.open #nav1ToogleL3{
	top: 30px;
	left: 9px;
	width: 15px;
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
}

/*nav1*/
#nav1{
	position: fixed;
	z-index: 20000;
	top: 0;
	width: 100%;
}
#nav1 > ul{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	max-width: 400px;
	height: calc(100vh - 90px);
	padding: 90px 0 0 0;
	overflow-y: auto;
	background-color: #000;
	text-align: center;
	transform: translateX(-100%);
	-webkit-transform: translateX(-100%);
	transition: transform 0.25s ease-in;
	-webkit-transition: transform 0.25s ease-in;
}
#nav1.open > ul{
	transform: translateX(0);
	-webkit-transform: translateX(0);
}
#nav1 li{
	padding: 10px 0;
	list-style: none;
	background-position: center 15px;
	background-repeat: no-repeat;
	background-size: 40px 40px;
}
#nav1 li#nav1Home a{
	width: 200px;
	height: 100px;
	margin: auto;
	padding: 0 0 10px 0;
	background-image: url(../img/logo-alsace-bike-tour@250.png);
	background-repeat: no-repeat;
	background-size: contain;
}
#nav1 li:last-child{
	border-bottom: none;
}
#nav1 li a{
	display: block;
	padding: 50px 0 0 0;
	text-decoration: none;
	color: #fff;
	font-size: 0.9em;
	transition: background-color 0.2s ease-in, color 0.2s ease-in;
}
#nav1 li a:hover{
	color: var(--color-jauneABT);
	background-color: rgba(0, 0, 0, 0.5);
}
#nav1 #nav1VTT{
	background-image: url(../img/picto_menu/vtt@100.png);
}
#nav1 #nav1Gravel{
	background-image: url(../img/picto_menu/gravel@100.png);
}
#nav1 #nav1Vttae{
	background-image: url(../img/picto_menu/vttae@100.png);
}
#nav1 #nav1Atelier{
	background-image: url(../img/picto_menu/atelier@100.png);
}
#nav1 #nav1BonPlan{
	background-image: url(../img/picto_menu/coupon@100.png);
}
#nav1 #nav1Shop{
	position: absolute;
	top: 0;
	right: 40px;
	background-image: url(../img/picto_menu/panier@100.png);
}
#nav1 #nav1Magasin{
	background-image: url(../img/picto_menu/magasin@100.png);
}
#nav1 #nav1Contact{
	background-image: url(../img/picto_menu/contact@100.png);
}

/* sous menu */
#nav1 li ul{
	margin: 15px;
	border-bottom: 1px solid #333;
}
#nav1 li ul li{
	border-top: 1px solid #333;
}
#nav1 li ul li a{
	font-size: 1em;
	margin: 0 0 6px 0;
	padding: 6px 10px;
	color: #ccc;
}
/*footer*/
#piedPage{
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	padding: 40px 5%;
	background-color: #000;
	color: var(--color-jauneABT);
}
#menuSocFooterWrap{
	order: 1;
}
#menuSocFooterWrap li{
	position: relative;
	display: inline-block;
	width: 25px;
	height: 25px;
	margin: 25px 50px;
	overflow: hidden;
}
#menuSocFooterWrap li a{
	position: absolute;
	top: 0;
	display: block;
	width: 25px;
	height: 50px;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 25px 50px;
	font-size: 0;
	transition: top 0.2s ease-in;
}
#menuSocFooterWrap li a:hover{
	top: -25px;
}
#menuSocFooterWrap #soc1 a{
	background-image: url(../img/logo-soc1@200.png);
}
#menuSocFooterWrap #soc2 a{
	background-image: url(../img/logo-soc2@200.png);
}
#menuFooterWrap{
	order: 4;
}
#menuFooterWrap li{
	list-style: none;
}
#menuFooterWrap a{
	display: block;
	padding: 10px 5px;
	color: var(--color-jauneABT);
	text-decoration: none;
	font-size: 1.2em;
	transition: background-color 0.2s ease-in, color 0.2s ease-in;
}
#menuFooterWrap a:hover{
	background-color: var(--color-jauneABT);
	color: #000;
}
#piedPageDescription{
	order: 2;
}
#piedPageDescription p{
	margin: 0.6em 0;
}
#piedPageImg{
	order: 3;
	margin: 50px 0;
}
#photoFooter{
	width: 100%;
	height: 150px;
	background-image: url(../img/home/cycling-1533270_1920.jpg);
	background-size: cover;
	background-position: top center;
}
#piedPageImg img{
	width: auto;
	max-width: 100%;
	height: auto;
}
/*contenu*/
.textContent{
	margin: 50px 3%;
	text-align: left;
}
.textContent h1, .textContent h2, .textContent h3, .textContent h4, .textContent h5, .textContent h6{
	margin-top: 2em;
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
}
.textContent h1{
	margin-top: 0;
	font-size: 2em;
	text-align: center;
	border-bottom: 4px solid var(--color-jauneABT);
}
.textContent h2{
	font-size: 1.5em;
	border-bottom: 4px solid var(--color-jauneABT);
}
.textContent h3{
	font-size: 1.25em;
}
.textContent h4{
	font-size: 1.15em;
}
.textContent h5{
	font-size: 1.1em;
}
.textContent p{
	margin: 0.7em 0;
}
.textContent img{
	max-width: 100%;
	height: auto;
}
.textContent a{
	color: #000;
	padding: 0 0.1em;
	text-decoration: none;
	border-radius: 2px;
	border-bottom: 1px dotted #000;
	transition: background-color 0.2s ease-in, border-bottom-color 0.2s ease-in;
}
.textContent a:hover{
	background-color: var(--color-jauneABT);
	border-bottom-color: var(--color-jauneABT);
}

/*produit catégorie*/
#productLst, #productCatLst{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: flex-start;
}
#productLst li, #productCatLst li{
	width: 100%;
	list-style: none;
}
#productLst li a, #productCatLst li a{
	display: block;
	border-bottom: none;
	text-decoration: none;
	color: #000;
	font-size: 1.5em;
	text-align: center;
}
#productLst li a img, #productCatLst li a img{
	display: block;
	width: 100%;
	height: 150px;
	object-fit: contain;
	margin: auto;
}
#productLst li a:hover, #productCatLst li a:hover{
	background: none;
}
#productLst li .productImg, #productCatLst li .productImg{
	margin: 0;
}





@media screen and (min-width: 500px){
/*produit cat*/
#productLst, #productCatLst{
	flex-direction: row;
}
#productLst li, #productCatLst li{
	width: 46%;
	margin: 0 2%;
}
}





@media screen and (min-width: 800px){
/*entete*/
#entete{
	position: sticky;
	z-index: 1000;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	height: 70px;
	background-color: #000;
	border-top: 2px solid var(--color-jauneABT);
}
/*logo*/
#logo{
	position: static;
	z-index: auto;
	display: block;
	width: 120px;
	height: 60px;
}
#logo p, #logo a{
	display: block;
	width: 100%;
	height: 100%;
	font-size: 0;
}
}




@media screen and (min-width: 800px) and (min-height: 600px){
/*entete*/
#entete{
	height: 100px;
}
}





@media screen and (min-width: 1000px){
body{
	font-size: 17px;
}
/* menu */
#nav1{
	position: static;
	width: auto;
}
#nav1Toogle{
	display: none;
}
#nav1 ul{
	position: static;
	top: auto;
	left: auto;
	max-width: none;
	height: auto;
	overflow: auto;
	padding: 0;
	text-align: center;
	transform: none;
	-webkit-transform: none;
}
#nav1 li{
	padding: 10px 0;
	display: inline-block;
	background-position: center 10px;
	background-size: 25px 25px;
	border-bottom: none;
}
#nav1 li#nav1Home{
	display: none;
	background: transparent;
}
#nav1 li a{
	padding: 30px 10px 0;
}
#nav1 #nav1Home{
	display: none;
}
#nav1 #nav1Shop{
	position: static;
}
/* sous menu */
#nav1 li ul{
	display: none;
	position: absolute;
	width: max-content;
	margin: 0;
	background-color: #000;
	text-align: left;
}
#nav1 li:hover ul{
	display: block;
}
#nav1 li ul li{
	padding: 10px 0;
	display: list-item;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}
#nav1 a, #nav1 li ul li a{
	margin: auto;
	padding: 6px 30px;
	font-size: 1em;
	transition: background-color 0.25s ease-in, color 0.25s ease-in;
	-webkit-transition: background-color 0.25s ease-in, color 0.25s ease-in;
}
#nav1 a:hover{
	background-color: #fff;
	color: #000;
}
}





@media screen and (min-width: 1200px){
body{
	font-size: 18px;
}
/*nav*/
#nav1 li a{
	padding-left: 20px;
	padding-right: 20px;
}
}