@font-face {
    font-family: 'josefinsans-regular';
    src: url('polices/josefinsans-regular.woff') format('woff'),
         url('polices/josefinsans-regular.ttf') format('truetype');
}

*
{
	font-family:'josefinsans-regular';
	font-size:17px;
}

html, body
{
	overflow-x:hidden;
}

body
{
	margin:0;
	padding:0;
	text-align:center;
	position:relative;
}

h1
{
	font-weight:normal;
	margin:0;
}

h2, h2 *
{
	font-size:22px;
	font-weight:bold;
	margin:0;
}

h3, h3 *
{
	font-size:18px;
	font-weight:bold;
	margin:0;
}

img, .pouh, .padou, #imgsprod, #descprod, #order
{
	max-width:100%;
	height:auto;
	box-sizing:border-box;
}

a img
{
	border: 0;
}

a
{
	text-decoration:none;
	font-weight:600;
	cursor:pointer;
}

/* Inputs, textareas, selects */

input, textarea, select, button
{
	border-radius:3px;
	width:259px;
	height:34px;
	display:block;
	margin:20px auto;	
}

textarea
{
	width:45%;
	height:16em;
	display:inline;
	margin:0 1em;
}

select
{
	width:auto;
}

input[type="submit"], input[type="button"], button
{
	border:none;
	cursor:pointer;
}

input[type="number"]
{
	width:60px;
	display:inline;
	margin:0 1em;
}

input[type="color"], .inlineinputs
{
	display:inline;
	margin:0;
	vertical-align:text-bottom;
}

input[type="color"], .inlineinputs:not([type="submit"]):not(.smallinputs)
{
	width:100px;
}

.smallinputs
{
	width:47px;
}

input:not([type="file"]):not([type="submit"]):not([type="button"]), textarea, select
{
	padding-left:8px;
    box-sizing:border-box;
}

input:focus::placeholder, textarea:focus::placeholder{color:transparent;}

.btndel
{
	width:34px;
	font-weight:600;
	display:inline;
}

/* Popup */

.overlay
{
	background-color: rgba(0, 0, 0, 0.6);
	bottom: 0; left: 0; right: 0; top: 0;
	display:none;
	position:fixed;
	align-items:center;
	justify-content:center;
	overflow:auto;
	z-index: 10;
}

.popup
{
	z-index:20;
	border-radius:5px;
	max-width:100%;
}

/* Login */

#inscriptiontab
{
	border-top-right-radius:5px;
	display:inline-block;
	width:150px;
	max-width:50%;
	font-size:20px;
	font-weight:normal;
	padding-top:5px;
	padding-bottom:8px;
	outline-style:none;
}

#connexiontab
{
	border-top-left-radius:5px;
	display:inline-block;
	width:150px;
	max-width:50%;
	font-size:20px;
	font-weight:normal;
	padding-top:5px;
	padding-bottom:8px;
	outline-style:none;
}

.messagelogin
{
	color:red;
	margin:20px auto;
}

#inscription
{
	display:none;
	max-width:100%;
}

#connexion
{
	max-width:100%;
}

/* Cart et order */

#order
{
	width:520px;
	margin:0 auto;
	padding:0.8em;
}

#cart .popup
{
	padding:0.8em;
	text-align:right;
}

#cart div, #order div
{
	text-align:left;
	clear:both;
}

#cart img, #order img
{
	float:left;
	margin-right:1em;
	border-radius:5px;
}

.cartitempri, .orderprodpri
{
	float:right;
	margin-left:1em;
}

#cartprods span
{
	font-size:14px;
	cursor:pointer;
}

#cart select
{
	height:20px;
	font-size:15px;
	float:left;
	margin:0;
}

#cart .button
{
	display:inline;
	margin:0.8em 0 0;
}

/* Menu */

.show
{
	display:block !important;
}

.showf
{
	display:flex !important;
}

#headermobile
{
	display:none;
	position:fixed;
	height:35px;
	top:0;
	width:100%;
	z-index:1;
	transition:transform 0.15s;
}

#headermobile.shome
{
	display:flex;
}

@media screen and (min-width:900px)
{
	#headermobile.shome #headermobiletitle, #headermobile.shome #cartminimobile
	{
		display:none;
	}
}

#boutonmenumobile, #cartminimobile
{
	padding:6px 0.7em;
	cursor:pointer;
}

#aside
{
	width:10em;
	height:100vh;
	padding:0 1.2em;
	position:fixed;
	top:0;
	overflow:auto;
	display:flex;
	flex-direction:column;
}

#aside.shome
{
	display:none;
}

#aside a
{
	flex-shrink:0;
}

#aside .logo
{
	margin-top:1em;
}

nav
{
	flex-grow:1;
	flex-shrink:0;
}

nav a, .smenulien
{
	font-weight:normal;
	padding:0.2em 0;
	display:block;
	cursor:pointer;
}

nav a::before, .smenulien::before
{
	color:transparent;
	visibility:hidden;
}

nav a::after, .smenulien::after
{
	color:transparent;
	visibility:hidden;
}

nav a:hover::before, nav a:hover::after, .smenulien:hover::before, .smenulien:hover::after, nav a.currentpage::before, nav a.currentpage::after
{
	visibility:visible;
	transition:all 0.6s ease 0s;
}

#cartmini
{
	display:none;
	padding:0.4em 0;
	margin:0.2em 0 1em;
	text-align:left;
	cursor:pointer;
}

#cartmini .cartstot
{
	float:right;
}

.smenu
{
	display:none;
}

#cartmini .cartitemsnbr, .smenu a, #asidefooter a, #nightmodebtn
{
	font-size:15px;
}

#asidefooter
{
	padding-top:1em;
	width:10em;
}

#nightmodebtn img
{
	vertical-align:text-bottom;
}

#nightmodebtn, #connexionlien
{
	cursor:pointer;
}

/* Main */

#main
{
	padding:1em 0;
	margin-left:12.4em;
	position:relative;
	min-height:100vh;
	transition:transform 0.15s;
}

.translate
{
	transform:translate(12.4em, 0px);
}

@media screen and (min-width:901px)
{
	#main.shome
	{
		margin-left:0;
	}
	
	#main.index
	{
		background:url("images/autres/bg-index.jpg") fixed center;
		background-size:cover;
		padding-top:0;
	}
	
	#accueil
	{
		min-height:100vh;
		display:flex;
		align-items:center;
		justify-content:center;
	}
}

#menuaccueil
{
	width:100%;
}

#menuaccueil div
{
	filter:grayscale(100%);
}

#menuaccueil div:hover
{
	filter:none;
}

.textoverimg
{
	position:absolute;
	top:50%;
	left:50%; 
	transform:translate(-50%, -50%);
	margin:0;
	color:white;
	text-shadow: 0 0 7px rgba(0,0,0, 0.5);
}

.pouh
{
	border-radius:2px;
}

.logo
{
	overflow:hidden;
}

.padou
{
	font-size:16px;
	margin:0.6vw;
	display:inline-block;
	position:relative;
}

.poupi
{
	max-width:31%;
}

.cuttextline
{
	font-size:16px;
	white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
	font-weight:normal;
	width:100%;
	max-width:220px;
}

#gallerydiv .padou img
{
	cursor:pointer;
}

.moi
{
	float:right;
	margin:1em;
}

.noiraude
{
	text-align:left;
	margin:1em;
}

.noiraude img
{
	float:left;
	margin:0 0.7em;
}

.email, .comment
{
	display:none;
}

.ligne
{
	padding-top:1em;
	margin-bottom:1em;
}

/* Boutique*/

#imgsprod
{
	vertical-align:top;
	display:inline-block;
	margin:0.5em;
	width:650px;
}

#imgsprod img
{
	margin:0 5px 5px;
	border-radius:5px;
	cursor:pointer;
}

#descprod
{
	vertical-align:top;
	display:inline-block;
	padding:1em;
	width:400px;
	text-align:left;
}

@media screen and (max-width:1300px)
{	
	#imgsprod, #descprod
	{
		width:auto;
	}
}

#ajoutpanier
{
	width:100%;
	height:38px;
	font-size:20px;
	font-weight:bold;
}

#divpreviews
{
	display:inline-block;
}

#divpreviews img
{
	cursor:pointer;
}

.conteneur div, #divpreviews div
{
	margin:0;
	padding:20px 0 0 20px;
	display:inline-block;
}

.conteneur input
{
	display:inline;
	margin:0 1em;
}

.btnsadmin
{
	position:absolute;
	top:0;
	right:0;
}

.btnsadmin button
{
	width:34px;
	margin:0.2em;
	display:inline;
}

.btnsadmin img
{
	vertical-align:top;
}