@font-face
{
	font-family: 'PoliceDeTitre';
	src : url('../fonts/AlexBrush-Regular.ttf') format('truetype');	/* ce format est "compatible" sur tous les navigateurs, inutile donc de charger d'autres formats */
}

h1, h2, h3 {font-family: PoliceDeTitre, verdana, times new roman, arial;}

h2
{
	font-size: 1.7em;
	color: #963F09;
	text-align: center;		
	margin : 0px;
	padding : 0px;
}

a
{
	text-decoration: none;
	color: inherit;
}

body
{
	background-color: #4a4a4a;
	margin-top: 0px;
	margin-bottom: 0px;

	display: flex;
	flex-direction: column;
	justify-content: center;

	position: relative;
}

#enTete, nav, #tableaux { width: 100%; }

#enTete
{
	background: radial-gradient(rgb(220, 220, 220), rgb(200, 200, 200));
	border: solid thin #222;
	border-top: unset;
	border-radius: 0px 0px 12px 12px;
	z-index: 3;

	box-sizing: border-box;
}

#enTete h1
{
	font-size : 3.8em;
	color: #963F09;
	text-align: center;
	text-shadow: 3px 7px 4px rgb(126, 126, 126);
	margin-bottom: 14px;
	margin-top: 20px;
}

nav
{
	margin-top : 6px;
	padding: 3px;

	box-sizing: border-box;
	
	display: flex;
	justify-content: space-around;
	
	background: radial-gradient(rgb(220, 220, 220), rgb(200, 200, 200));
	border: solid thin #222;
	border-radius: 10px;
	
	z-index: 1;
}

nav a {box-sizing: border-box;}
nav a:hover
{
	background-color: #F1F1F1;
	border-radius: 10px;
	color: #C1241F;
	box-shadow: 0px 0px 2px #777;
}
nav a:active
{
	background-color: white;
	border-radius: 10px;
}

nav a {flex : 1;}

#tableaux
{
	display: flex;
	justify-content: space-around;
	align-items: baseline;
	flex-wrap: wrap;
	margin-top: 6px;
	padding-top: 0px;
	border : solid 3px #999;
	border-radius: 15px;
	overflow: auto;
	scrollbar-width: thin;

	box-sizing: border-box;
}

.tableau
{
	width: 162px;
	margin: 20px;
	text-align: center;
	position: relative;
	
	/* Permet d'aménager un espace pour les icônes contextuelles */
	padding-bottom: 20px;
	margin-bottom: 0px;
}
figure
{
	margin: 0px;
	width: 100%;
	font-style: italic;
	color: #a7a7a7;
	text-overflow: wrap;

	position: relative;
}
figure:hover {color:#ddd;}

figure img
{
	border: outset 6px rgb(190, 190, 190);
	box-shadow: 0px 0px 3px black;
	transition-property: box-shadow;
	transition-duration: 1s;
	-webkit-transition-property: box-shadow;
	-webkit-transition-duration: 1s;
	-moz-transition-property: box-shadow;
	-moz-transition-duration: 1s;
}

figure img:hover {box-shadow: 0px 0px 15px #FFE46D;}
figure img:active
{
	box-shadow: unset;
	border: outset 6px white;
}

.soldMask {
	width: 100%;
	
	position: absolute;
	top: 0px;
	left: 0px;

	display: flex;
	align-items: center;
	
	opacity: 0;
	
	animation: soldMaskAppear 1.5s 0.5s forwards;
	-webkit-animation: soldMaskAppear 1.5s 0.5s forwards;
	-moz-animation: soldMaskAppear 1.5s 0.5s forwards;

	display: none;
}
.labelMask {
	width: 100%;
	font-size: 2.4em; 
	transform: rotate(-45deg);
	text-align: center;
	text-decoration: line-through;
	
	color: black;
	text-shadow: #FFE46D 0px 4px 4px;
}

.tableau input[type="submit"] {all: unset;}

.imgIcons 
{
	position: absolute;
	bottom: 0px;
	left: 0px;

	width: 100%;
	height: 20px;
	justify-content: center;

	display: none;
}
.imgIcons a 
{
	display: flex;
	align-items: flex-end;
}

.imgIcon
{
	width: 20px;
	margin-left: 4px;
	margin-right: 4px;

	transition: transform 0.2s;

	cursor: pointer;
}

.tableau:hover .imgIcons {display: flex;}
.imgIcon:hover {transform: scale(1.4);}

.twitter-share-button {display: none;}

.contextContainer
{
    position: absolute;
    bottom: -8px;
    left: 0px;
    width: 100%;
    display: flex;
    align-items: flex-start;
}

.contextIcons
{
	width: 15px;
	height: 100%;
	position: absolute;
	right: 0px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;

	padding: 4px 0px 4px 0px;
	box-sizing: border-box;
}

.yesNoIcon
{
	width: 100%;
	opacity: 0.4;
	transition: opacity 0.4s;
}
.yesNoIcon:hover {opacity: 1;}

#checkout, #boutonInfo
{
	width: 4%;
	min-width: 38px;
	max-width: 75px;
	background-color: white;
	position: fixed;
	top: 174px;
	border-radius: 100px;
}

#boutonInfo
{
	margin-left: 8px;

	transition-property: box-shadow;
	transition-duration: 0.5s;
	-webkit-transition-property: box-shadow;
	-webkit-transition-duration: 0.5s;
	-moz-transition-property: box-shadow;
	-moz-transition-duration: 0.5s;

	z-index: 2;
}
#boutonInfo:hover {box-shadow: 0px 0px 20px #FFE46D;}

#checkout
{
	left: 5%;
	margin-left: 4px;

	border: double medium black;
	padding: 2px;
	box-sizing: border-box;

	transition-property: box-shadow;
	transition-duration: 0.5s;
	-webkit-transition-property: box-shadow;
	-webkit-transition-duration: 0.5s;
	-moz-transition-property: box-shadow;
	-moz-transition-duration: 0.5s;

	z-index: 2;
}
#checkout:hover {box-shadow: 0px 0px 20px #FFE46D;}


#piedDePage
{
	width: 15%;
	min-width: 130px;
	margin-top: 0px;
	padding: 8px;

	text-align: center;
	border : solid 3px #AAA;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-left-radius: 140px;
	border-bottom-right-radius: 140px;
	box-shadow: 0px 0px 12px brown;

	background: radial-gradient(rgb(220, 220, 220), rgb(200, 200, 200));
	position: absolute;
	top: 104px;
	left: 42%;
	z-index: 2;
	
	animation: signatureAppear 4s 4s forwards;	
	-webkit-animation: signatureAppear 4s 4s forwards;
	-moz-animation: signatureAppear 4s 4s forwards;
}	

#piedDePage p
{
	margin-bottom: 3px;
	margin-top: 4px;
}

#signature
{
	font-family: PoliceDeTitre;
	font-size: 1.3em;
	color: #963F09;
	animation: ombreOrange 2s 1s alternate infinite;
	-webkit-animation: ombreOrange 2s 1s alternate infinite;
	-moz-animation: ombreOrange 2s 1s alternate infinite;
}

#messageReseauxSociaux
{
	position: fixed;
	bottom: 14px;
	right: 30px;
	color: #aaa;

	z-index: 4;
}
#messageReseauxSociaux .imgIcon {position: relative; top: 2px;}

#messagePaypal 
{
	display: inline;
	margin-right: 2px;
	height: 30px;
}
#messagePaypal + img 
{
	width: 60px;
	height: 60px;
	vertical-align: bottom;
}

/* Animations */

@keyframes signatureAppear
{
	from
	{
		top: 104px;
		left: 42%;
	}
	to
	{
		top: 40px;
		left: 42%;
	}
}

@-webkit-keyframes signatureAppear
{
	from
	{
		top: 104px;
		left: 42%;
	}
	to
	{
		top: 40px;
		left: 42%;
	}
}

@-moz-keyframes signatureAppear
{
	from
	{
		top: 104px;
		left: 42%;
	}
	to
	{
		top: 40px;
		left: 42%;
	}
}

@keyframes soldMaskAppear {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@-webkit-keyframes soldMaskAppear {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@-moz-keyframes soldMaskAppear {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes ombreOrange
{
	from{text-shadow: none;}
	to{text-shadow: 0px 0px 15px #FFCB38;}
}

@-webkit-keyframes ombreOrange
{
	from{text-shadow: none;}
	to{text-shadow: 0px 0px 15px #FFCB38;}
}

@-moz-keyframes ombreOrange
{
	from{text-shadow: none;}
	to{text-shadow: 0px 0px 15px #FFCB38;}
}

@keyframes ombreBlock
{
	from{box-shadow: none;}
	20%{box-shadow: 0px 0px 10px #FF6C12;}
	40%{box-shadow: 0px 0px 20px #FF6C12;}	
	60%{box-shadow: 0px 0px 8px #FF6C12;}
	80%{box-shadow: 0px 0px 5px #FF6C12;}
	to{box-shadow: none}
}

@-webkit-keyframes ombreBlock
{
	from{box-shadow: none;}
	20%{box-shadow: 0px 0px 10px #FF6C12;}
	40%{box-shadow: 0px 0px 20px #FF6C12;}	
	60%{box-shadow: 0px 0px 8px #FF6C12;}
	80%{box-shadow: 0px 0px 5px #FF6C12;}
	to{box-shadow: none}
}

@-moz-keyframes ombreBlock
{
	from{box-shadow: none;}
	20%{box-shadow: 0px 0px 10px #FF6C12;}
	40%{box-shadow: 0px 0px 20px #FF6C12;}	
	60%{box-shadow: 0px 0px 8px #FF6C12;}
	80%{box-shadow: 0px 0px 5px #FF6C12;}
	to{box-shadow: none}
}

/* Responsive Design */

@media all and (max-width: 1024px)
{	
	#enTete
	{
		margin-top: 0px;
		border-radius: 0px 0px 15px 15px;
	}

	#enTete h1
	{
		font-size: 2.7em;
		margin-top: 8px;
		margin-bottom: 9px;
	}

	nav
	{
		padding: 2px 0px 2px 0px;
		margin-top: 4px;		
	}

	nav a
	{
		position: relative;
		top: 0px;
	}

	#boutonInfo, #checkout
	{
		width: 6%;
		top: 135px;
	}

	.tableau {margin-top: 15px;}
	.tableau:hover .imgIcons {display: none;}

	#piedDePage
	{
		width: 40%;
		position: relative;
		top: 0px;
		left: 30%;
		
		padding-top: 0px;
		padding-bottom: 3px;
		margin: unset;
		margin-top: 6px;
		border-width: 2px;
		
		animation: unset;
		-webkit-animation: unset;
		-moz-animation: unset;
		
		z-index: 3;
	}

	#piedDePage p {margin: 7px 2px 0px 0px;}

	#messageReseauxSociaux 
	{
		bottom: 56px;
		right: 12px;
	}
}

@media all and (max-width: 720px) and (min-height: 600px)
{
	.tableau {margin: 12px 8px 0px 8px;}

	#enTete, nav, #piedDePage {border-color: #888;border-width: 2px;}

	#enTete
	{
		position: initial;
		border-radius: 50px 50px 0px 0px;
		text-align: center;
		margin-top: 6px;	
		box-sizing: border-box;
	}

	#enTete h1 
	{
		font-size: 2.5em;
		margin-bottom: 0px;
		margin-top: 0px;
	}

	nav, nav a:hover, nav a:active {border-radius: 0px 0px 50px 50px;}

	#piedDePage 
	{
		width: 65%;
		position: unset;
		margin: auto;
		margin-top: 5px;
		padding-bottom: 4px;
		box-shadow: none;
	}

	figure img {border-width: 5px;}

	#boutonInfo, #checkout {top: 120px;}
	#checkout {left: 58px;}

	#messageReseauxSociaux
	{
		bottom: 58px;
		right: 10px;
	}
}

@media all and (max-width: 520px)
{
	body {background-color: #5E5E5E;}
	#enTete, nav, #piedDePage {border-color: #AAA;}
	#enTete h1 
	{
		font-size: 2.2em;
		text-shadow: none;
	}
	h2 {font-size: 1.5em;font-weight: normal;}

	#boutonInfo, #checkout {top: 110px;}
	#checkout {left: 54px;}
}

@media all and (max-width: 400px)
{
	body
	{
		width: 98%;
		margin: auto;
	}

	#enTete, nav, #piedDePage {border: solid 1px #555;}

	nav, nav a:hover, nav a:active {border-radius: 0px 0px 40px 40px;}

	#enTete 
	{
		border-radius: 40px 40px 0px 0px;
		margin-top: 4px;
	}

	#enTete h1
	{
		font-size: 1.8em;
		margin-top: 1px;
		margin-bottom: 0px;
	}

	nav {margin-top: 1px;}

	h2 {font-size: 1.4em;}

	#boutonInfo, #checkout {top: 90px;}
	#checkout{left: 48px;}

	.tableau
	{
		margin: 8px 5px 0px 5px;
		flex: unset;
	}

	figure img 
	{
		border-width: 4px;
		border-color: #CCC;
	}

	#piedDePage 
	{
		position: unset;
		margin: auto;
		margin-top: 5px;
		width: 280px;
		padding-bottom: 3px;
	}

	#messageReseauxSociaux
	{
		bottom: 52px;
		right: 8px;
	}
	#messagePaypal {display: none;}
}

@media all and (max-height: 600px) and (orientation: landscape)
{
	#enTete
	{
		z-index: 1;
		position: relative;
		top: 0px;
	}

	#enTete h1
	{
		font-size: 1.8em;
		margin-top: 2px;
		margin-bottom: 0px;
		text-shadow: none;
	}

	nav
	{
		z-index: 2;
		position: relative;
	}

	#boutonInfo, #checkout
	{
		z-index: 4;
		width: 5%;
		top: 50px;
	}
	#checkout {left: 65px;}

	#tableaux
	{
		z-index: 3;
		background-color: #6F6F6F;
	}

	.tableau {margin: initial;}

	figure img
	{
		border-width: 4px;
		margin-top: 10px;
	}

	.blocGalerie:nth-child(1) {order: 1;}	
	.blocGalerie:nth-child(2)
	{
		order: 5;
		margin-top: 6px;
	}
	.blocGalerie:nth-child(4) {order: 2;}
	.blocGalerie:nth-child(5) {order: 5;}

	#piedDePage {display: none;}
	#messageReseauxSociaux {top: 16px;}
	#messagePaypal {display: none;}
}

@media all and (max-height: 460px) and (orientation: landscape)
{
	#enTete
	{
		z-index: 1;
		position: relative;
		top: 0px;
	}

	nav
	{
		z-index: 2;
		position: relative;
	}

	#checkout {left: 55px;}

}

@media all and (max-width: 355px) and (orientation: portrait)
{
	#tableaux {margin-top: 3px;}
	#enTete {margin-top: 3px;}
	#piedDePage {margin-top: 3px;margin-bottom: 0px;}

	#checkout 
	{
		margin-left: 0px;
		margin-right: 8px;
		left: unset;
		right: 0px;
	}
}

@media handheld 
{
	.tableau:hover .imgIcons {display: none;}

}