@font-face {
	font-family: 'Nunito';
	src:	url('fonts/Nunito-Light.woff') format('woff'),
		url('fonts/Nunito-Light.ttf') format('truetype');
	font-weight: 300;
}
@font-face {
	font-family: 'TrajanusBricks';
	src:	url('fonts/TrajanusBricks.woff') format('woff'),
		url('fonts/TrajanusBricks.otf') format('truetype');
	font-weight: 400;
}
@keyframes fade_in {
	0%	{ opacity: 0; }
}
@keyframes background_in {
	0%	{ background-position: -512px; }
}
@keyframes rotate {
	0%	{ transform: rotate(0deg); }
	100%	{ transform: rotate(360deg); }
}
@keyframes rotate2 {
	0%	{ transform: rotate(360deg) scaleX(-1); }
	100%	{ transform: rotate(0deg) scaleX(-1); }
}
html {
	height: 100%;
}
body {
	min-height: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
	background: radial-gradient(rgba(0,0,0,0) 50%, rgba(102, 49, 28, 0.2) 90%, rgba(72, 24, 48, 0.35)) 0 /cover fixed, linear-gradient(rgba(255,255,240,0.8), rgba(247, 228, 195, 0.8) 20%, rgba(30, 10, 12, 0.9)) fixed, url('images/noise.svg'), url('images/fond_texture.jpg');
	font-family: 'Nunito', sans-serif;
}
a {
	color: #a01;
	text-decoration: none;
	transition: 0.3s;
}
a:hover {
	color: #800;
}
p>a,
p>strong>a {
	padding: 0 4px;
	border: double 3px rgba(255,255,255, 0.3);
	position: relative;
	display: inline-block;
	line-height: 1;
}
p>a:hover,
p>strong>a:hover {
	border-color: rgba(170, 0, 17, 0.3);
}
p>a::after,
p>strong>a::after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: -4px;
	left: -3px;
	border: double 3px rgba(68, 0, 0, 0.1);
}
p strong {
	font-weight: normal;
	color: #600;
	text-shadow: 0 1px 0 rgba(255,255,255,0.7);
}
q		{ font-style: italic; }
q::before	{ content: '« '; }
q::after	{ content: ' »'; }
h2 {
	margin: 16px;
	font-family: TrajanusBricks, serif;
	font-size: 32px;
	text-align: center;
	color: #510;
	line-height: 120%;
	letter-spacing: 2px;
	text-shadow: 0 1px 1px rgba(255, 248, 240, 0.2);
}
h3 {
	margin: 16px;
	font-family: TrajanusBricks, serif;
	font-size: 22px;
	font-weight: normal;
	text-align: left;
	line-height: 120%;
	letter-spacing: 2px;
}
h4 {
	margin: 8px 0;
	padding: 2px 16px;
	border-bottom: solid 1px;
	clear: both;
	font-weight: normal;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 2px;
}
p {
	hyphens: auto;
}

img {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(#999, #777);
	animation: fade_in ease-out 1s;
}
img.transparent {
	background: none;
}
img:before {
	padding: 48px 64px;
	font-size: 14px;
	text-transform: uppercase;
	text-align: center;
	color: #000;
	text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
figure {
	display: flex;
	flex-direction: column;
	align-items: center;
}
figure.l,
figure.r {
	margin: 0 0 16px;
}
figure img {
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 0 2px rgba(64,8,0,0.2), 0 0 16px rgba(64,8,0,0.2);
}
a>figure img		{ transition: 0.3s; }
a:hover>figure img	{ transform: scale(1.05); }
figure figcaption {
	margin: 0 0 -8px;
	padding: 2px 4px;
	font-size: 14px;
	text-align: center;
}

.hidden,
section.hidden {
	display: none;
}


/*	=======================================
		ENTÊTE
	======================================= */

header {
	margin: 0 0 8px;
}
header>h1 {
	font-weight: normal;
	text-align: center;
}
header>h1>strong {
	margin: 0 0 -16px;
	display: block;
	font-size: 56px;
	font-weight: normal;
	font-family: TrajanusBricks, serif;
	text-shadow: 0 2px 1px #ffe;
}
header>h1>strong>a {
	color: #801;
}
header>h1>strong>a>span {
	color: #200;
	transition: 0.3s;
}
header>h1>strong>a:hover,
header>h1>strong>a:hover>span {
	color: #a01;
}
header>h1>em {
	font-size: 16px;
	font-style: normal;
}
header>nav>ul {
	text-align: center;
	margin: 0;
	padding: 0 24px;
}
header>nav>ul>li {
	margin: 64px 0 0;
	display: inline-block;
	position: relative;
	list-style: none;
	text-align: center;
}
header>nav>ul>li::before {
	content: '';
	width: 64px;
	height: 64px;
	margin: -40px;
	border: solid 8px #fff;
	border-radius: 3px;
	position: absolute;
	top: -16px;
	left: 50%;
	background: url('images/menu.png'), radial-gradient(#ddd, #fff 70%);
	box-shadow: 0 0 2px rgba(0,0,0,0.1), 0 0 8px rgba(0,0,0,0.1);
	transition: 0.3s;
}
header>nav>ul>li.selected::before,
header>nav>ul>li:hover::before {
	top: -32px;;
}
#h_monde::before	{ background-position: -64px	0; }
#h_coeurs::before	{ background-position: 0	-64px; }
#h_trefles::before	{ background-position: -64px	-64px; }
#h_carreaux::before	{ background-position: -128px	-64px; }
#h_piques::before	{ background-position: -192px	-64px; }
#h_deniers::before	{ background-position: 0	-128px; }
#h_coupes::before	{ background-position: -64px	-128px; }
#h_batons::before	{ background-position: -128px	-128px; }
#h_epees::before	{ background-position: -192px	-128px; }
#h_atouts::before	{ background-position: -128px	0; }
#h_a_propos::before	{ background-position: -192px	0; }
header>nav>ul>li>* {
	min-width: 72px;
	padding: 2px 8px;
	border-radius: 3px;
	position: relative;
	display: block;
	background: rgba(0,0,0,0.8);
	font-size: 16px;
	color: #fff;
	user-select: none;
}
header>nav>ul>li.selected>*,
header>nav>ul>li>a:hover {
	color: #fff;
	text-shadow: 0 0 2px #fff;
}
header>nav>ul>li>*::before {
	content: '';
	width: 100%;
	height: 56px;
	position: absolute;
	bottom: 100%;
	left: 0;
	transition: 0.3s;
}
header>nav>ul>li.selected>*::before,
header>nav>ul>li:hover>*::before {
	height: 72px;
}
header>nav>ul>li>.c_page {
	background: #fff;
	color: #000;
	box-shadow: 0 0 2px rgba(0,0,0,0.1), 0 0 10px rgba(0,0,0,0.1);
}


/*	=======================================
		CONTENU
	======================================= */

main {
	box-sizing: border-box;
	padding: 16px;
	position: relative;
	flex: 1;
}
body.loading>main::before,
body.loading>main::after {
	display: none;
}
main>* {
	box-sizing: border-box;
	max-width: 1280px;
	margin: 16px auto;
	position: relative;
	z-index: 1;
}
main>section {
	padding: 8px 16px;
	border-radius: 3px;
	overflow: hidden;
	background: rgba(255, 242, 224, 0.9);
	font-size: 20px;
	text-align: justify;
	color: #210;
}
main>section>p {
	margin: 16px 0;
}


/*	=======================================
		ACCUEIL
	======================================= */

#accueil {
	padding: 64px 16px;
	text-align: center;
}
#accueil>#intro {
	max-width: 512px;
	padding: 0 16px;
	font-size: 20px;
	text-align: justify;
	line-height: 120%;
	text-shadow: 0 1px 0 rgba(255,255,255,0.2), 0 2px 4px rgba(255,255,224,0.2);
	animation: fade_in 4s;
}
#accueil>a {
	margin: 304px auto 16px;
	border-radius: 20px;
	display: inline-block;
	font-family: TrajanusBricks, serif;
	font-size: 24px;
	font-weight: bold;
	line-height: 140%;
	text-transform: lowercase;
	text-align: center;
	letter-spacing: 16px;
	text-indent: 16px;
	color: rgba(32,0,0,0.7);
	text-shadow: 0 1px 1px rgba(255,255,255,0.4), 0 0 8px rgba(172, 130, 85, 0.5);
}
#accueil>a:hover {
	color: #200;
}
#accueil>a.loading::before,
#accueil>a.loading::after {
	display: none;
}
#accueil>#counter::before,
#accueil>a::before {
	content: '';
	width: 256px;
	height: 256px;
	margin: -128px;
	border-radius: 50%;
	position: absolute;
	top: -152px;
	left: 50%;
	background: url('images/logo.svg');
	opacity: 0.8;
	transition: 0.5s;
}
#accueil>a:hover::before {
	width: 272px;
	height: 272px;
	margin: -136px;
	opacity: 1;
}
#accueil>a::after {
	content: '';
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	margin: 111px -12px;
	border: solid 3px #331919;
	border-radius: 50%;
	position: absolute;
	top: -152px;
	left: 50%;
	transform-origin: 12px -111px;
	opacity: 0.8;
	transition: 0.5s;
	animation: fade_in ease-out 0.5s;
}
#accueil>a:hover::after {
	transform: scale(1.06) rotate(360deg);
	opacity: 1;
}
#accueil>#dates {
	max-width: 240px;
	border: double 3px rgba(32,0,0,0.5);
	position: relative;
	padding: 8px 16px;
	background: radial-gradient(rgba(0,0,0,0) 50%, rgba(102, 49, 28, 0.2) 90%, rgba(72, 24, 48, 0.35)) 0 /cover fixed, linear-gradient(rgba(255,255,240,0.8), rgba(247, 228, 195, 0.8) 20%, rgba(138, 119, 103, 0.85), rgba(102, 74, 74, 0.9)) fixed, url('images/fond_texture.jpg');
	text-shadow: 0 1px 1px rgba(255,192,0,0.2), 0 0 16px rgba(32,0,0,0.5);
}
#accueil>#dates::before,
#accueil>#dates::after,
#accueil>#dates>*:first-child::before,
#accueil>#dates>*:first-child::after {
	content: '';
	width: 8px;
	height: 8px;
	border: double 3px rgba(32,0,0,0.5);
	position: absolute;
}
#accueil>#dates::before			{ right: 100%;	bottom: 100%; }
#accueil>#dates::after			{ left: 100%;	bottom: 100% }
#accueil>#dates>*:first-child::before	{ right: 100%;	top: 100% }
#accueil>#dates>*:first-child::after	{ left: 100%;	top: 100% }
#accueil>#dates>span {
	margin: 2px 0;
	display: block;
	font-family: TrajanusBricks, serif;
	font-weight: bold;
	letter-spacing: 1px;
	color: #500;
}
#accueil.loading>a::before,
#accueil.loading>a::after {
	display: none;
}
#counter {
	width: 256px;
	margin: 384px auto 192px;
	font-family: TrajanusBricks, serif;
	font-size: 48px;
	text-align: center;
	color: rgba(32,0,0,0.7);
}
#counter>span {
	width: 64px;
	height: 64px;
	margin: 24px 4px;
	border: solid 1px rgba(32,0,0,0.6);
	position: relative;
	display: inline-block;
}
#counter>span::before,
#counter>span::after {
	content: '';
	position: absolute;
}
#counter>span::before {
	width: 100%;
	border-top: solid 1px rgba(32,0,0,0.2);
	top: 50%;
	left: 0;
}
#counter>span::after {
	height: 100%;
	border-left: solid 1px rgba(32,0,0,0.2);
	top: 0;
	left: 50%;
}


/*	=======================================
		CARTE
	======================================= */

#carte_aide {
	padding: 8px 16px;
	border-radius: 8px;
	background: rgba(0,0,0,0.8);
	font-size: 16px;
	line-height: 120%;
	color: #ddd;
}
#carte {
	height: 688px;
	padding: 0;
	border-radius: 16px;
	overflow: hidden;
	position: relative;
	background: url('images/carte_fond.jpg') 50% 0, radial-gradient(#a89775, #6d5b46);
	box-shadow: 0 0 1px rgba(255,255,255,0.8), 0 0 32px rgba(255,192,128,0.5);
	list-style: none;
}
#carte::after {
	content: '';
	box-sizing: border-box;
	width: 1280px;
	height: 688px;
	position: absolute;
	top: 0;
	left: 0;
	background: url('images/carte_contous.png');
	animation: fade_in ease-out 4s;
}
#carte>li>.fiche {
	width: 256px;
	height: 384px;
	margin: -192px -128px;
	border-radius: 3px;
	position: absolute;
	top: 50%;
	left: 50%;
	background: rgba(0,0,0,0.7);
	box-shadow: 0 0 2px rgba(0,0,0,0.2), 0 0 8px rgba(0,0,0,0.2);
}
#carte>li::before,
#carte>li::after {
	content: '';
	width: 1280px;
	height: 688px;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('images/carte_atlas.svg');
	opacity: 0;
	transition: 0.3s;
}
#carte>li>a {
	display: none;
}
#carte>.selected::before {
	opacity: 0.67;
}
#carte>#m_coeurs::before	{ width: 324px;	height:	394px;	left: 437px;	top: 302px;	background-position: -384px -512px; }
#carte>#m_trefles::before	{ width: 332px;	height:	480px;	left: 435px;	top:  56px;	background-position: 0 -1056px; }
#carte>#m_carreaux::before	{ width: 484px;	height:	549px;	left:  74px;	top:   0px;	background-position: -768px -512px; }
#carte>#m_piques::before	{ width: 595px;	height:	252px;	left: 232px;	top: 426px;	background-position: -384px -1280px; }
#carte>#m_deniers::before	{ width: 354px;	height:	273px;	left: 372px;	top: 134px;	background-position: -384px -960px; }
#carte>#m_coupes::before	{ width: 270px;	height:	342px;	left: 756px;	top: 157px;	background-position: -992px -1152px; }
#carte>#m_batons::before	{ width: 217px;	height:	205px;	left: 610px;	top: 473px;	background-position: -768px -1072px; }
#carte>#m_epees::before		{ width: 326px;	height:	513px;	left: 802px;	top:  75px;	background-position: 0 -512px; }
#carte>#m_atouts::before	{ width:1280px;	height:	501px; }

#carte>.infos {
	box-sizing: border-box;
	width: 320px;
	padding: 0 16px;
	border-radius: 6px;
	position: absolute;
	bottom: 64px;
	left: 64px;
	z-index: 1;
	background: #fff;
	box-shadow: 0 0 2px rgba(0,0,0,0.2), 0 0 8px rgba(0,0,0,0.2);
	cursor: auto;
	animation: fade_in ease-out 0.3s;
	transition: 0.3s;
}
#carte>#t_coeurs	{ bottom: 256px;	left: 403px; }
#carte>#t_trefles	{ bottom: 352px;	left: 460px; }
#carte>#t_carreaux	{ bottom: 520px;	left: 134px; }
#carte>#t_piques	{ bottom: 160px;	left: 405px; }
#carte>#t_deniers	{ bottom: 480px;	left: 404px; }
#carte>#t_coupes	{ bottom: 157px;	left: 549px; }
#carte>#t_batons	{ bottom: 372px;	left: 666px; }
#carte>#t_epees		{ bottom: 284px;	left: 794px; }
#carte>#t_atouts	{ bottom: 351px;	left: 496px; }
#carte>.infos::before {
	content: none;
}
#carte>.infos::after {
	content: '';
	width: 16px;
	height: 16px;
	margin: -8px;
	position: absolute;
	top: 100%;
	left: 50%;
	background: #fff;
	box-shadow: 0 0 2px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.8);
	clip-path: polygon(32px -16px, 32px 32px, -16px 32px);
	transform: rotate(45deg);
	opacity: 1;
}
#carte>#t_atouts::after {
	content: none;
}
#carte>.infos>h3 {
	margin: 16px 0;
	font-size: 16px;
	text-align: center;
	letter-spacing: 2px;
}
#carte>.infos>p {
	min-height: 64px;
	margin: 16px 8px 16px -16px;
	padding: 0 0 0 96px;
	position: relative;
	text-align: justify;
	line-height: 120%;
	hyphens: auto;
}
#carte>.infos>p::before {
	content: '';
	width: 64px;
	height: 64px;
	margin: -32px;
	position: absolute;
	top: 50%;
	left: 48px;
	background: url('images/menu.png');
}
#carte>#t_coeurs>p::before	{ background-position: 0 -64px; }
#carte>#t_trefles>p::before	{ background-position: -64px -64px; }
#carte>#t_carreaux>p::before	{ background-position: -128px -64px; }
#carte>#t_piques>p::before	{ background-position: -192px -64px; }
#carte>#t_deniers>p::before	{ background-position: 0 -128px; }
#carte>#t_coupes>p::before	{ background-position: -64px -128px; }
#carte>#t_batons>p::before	{ background-position: -128px -128px; }
#carte>#t_epees>p::before	{ background-position: -192px -128px; }
#carte>#t_atouts>p::before	{ background-position: -128px 0; }


/*	=======================================
		FAMILLES
	======================================= */

.famille {
	margin: 0 -4px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	text-align: center;
}
.famille>li {
	margin: 4px;
}
.famille>li>a {
	box-sizing: border-box;
	min-width: 128px;
	margin: 136px 0 0;
	padding: 4px 8px;
	border-radius: 3px;
	position: relative;
	display: inline-block;
	background: rgba(0,0,0,0.8);
	font-size: 13px;
	color: #fff;
	line-height: 110%;
}
.famille>li>a:hover {
	color: #fff;
	text-shadow: 0 0 2px #fff;
}
.famille>li>a::before {
	content: '';
	width: 128px;
	height: 128px;
	margin: -64px;
	border-radius: 3px;
	position: absolute;
	top: -68px;
	left: 50%;
	background-color: rgba(0,0,0,0.7);
	background-size: 256px;
	transition: 0.3s;
}
a.cavalier_coeurs::before,
a.cavalier_carreaux::before,
a.cavalier_trefles::before,
a.cavalier_piques::before,
a.cavalier_deniers::before,
a.cavalier_coupes::before,
a.cavalier_batons::before,
a.cavalier_epees::before {
	background-position: -128px 0;
}
a.dame_coeurs::before,
a.dame_carreaux::before,
a.dame_trefles::before,
a.dame_piques::before,
a.dame_deniers::before,
a.dame_coupes::before,
a.dame_batons::before,
a.dame_epees::before {
background-position: 0 -128px;
}
a.roi_coeurs::before,
a.roi_carreaux::before,
a.roi_trefles::before,
a.roi_piques::before,
a.roi_deniers::before,
a.roi_coupes::before,
a.roi_batons::before,
a.roi_epees::before {
	background-position: -128px -128px;
}
.famille>li>a:hover::before {
	transform: scale(1.02);
}
.valet_coeurs::before,
.cavalier_coeurs::before,
.dame_coeurs::before,
.roi_coeurs::before {
	background-image: url('images/portraits_coeurs.jpg');
}
.valet_carreaux::before,
.cavalier_carreaux::before,
.dame_carreaux::before,
.roi_carreaux::before {
	background-image: url('images/portraits_carreaux.jpg');
}
.valet_trefles::before,
.cavalier_trefles::before,
.dame_trefles::before,
.roi_trefles::before {
	background-image: url('images/portraits_trefles.jpg');
}
.valet_piques::before,
.cavalier_piques::before,
.dame_piques::before,
.roi_piques::before {
	background-image: url('images/portraits_piques.jpg');
}
.valet_deniers::before,
.cavalier_deniers::before,
.dame_deniers::before,
.roi_deniers::before {
	background-image: url('images/portraits_deniers.jpg');
}
.valet_coupes::before,
.cavalier_coupes::before,
.dame_coupes::before,
.roi_coupes::before {
	background-image: url('images/portraits_coupes.jpg');
}
.valet_batons::before,
.cavalier_batons::before,
.dame_batons::before,
.roi_batons::before {
	background-image: url('images/portraits_batons.jpg');
}
.valet_epees::before,
.cavalier_epees::before,
.dame_epees::before,
.roi_epees::before {
	background-image: url('images/portraits_epees.jpg');
}

.fiche {
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	padding: 16px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 8;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fiche>a {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	background: rgba(0,0,0,0.8);
	text-indent: -999px;
	cursor: zoom-out;
}
.fiche>div {
	box-sizing: border-box;
	max-width: 1024px;
	max-height: 95vh;
	padding: 16px 32px;
	border-radius: 3px;
	overflow: auto;
	position: relative;
	z-index: 1;
	display: block;
	flex: 1 0 0;
	background: #edc;
	animation: fade_in ease-out 0.5s;
}
.fiche>div>nav {
	position: sticky;
	top: 0;
	z-index: 2;
	height: 0;
}
.fiche>div>nav>a {
	width: 24px;
	height: 40px;
	margin: -20px -12px;
	position: absolute;
	border: solid 2px;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: inset 1px 1px 1px rgba(255,255,255,0.8), 1px 1px 1px rgba(255,255,255,0.8);
	text-indent: -999px;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.fiche>div>nav>a::before {
	box-sizing: border-box;
	width: 24px;
	margin: -12px;
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 20px;
	text-align: center;
	line-height: 24px;
	text-indent: 0;
}
.fiche>div>nav>.prev {
	top: 72px;
	right: 24px;
}
.fiche>div>nav>.prev::before	{ content: '◄'; }
.fiche>div>nav>.next {
	top: 72px;
	right: -8px;
}
.fiche>div>nav>.next::before	{ content: '►'; }
.fiche>div>nav>.close {
	width: 40px;
	margin: -20px;
	border-radius: 50%;
	top: 24px;
	right: 8px;
}
.fiche>div>nav>.close::before {
	content: '×';
	width: 40px;
	margin: -20px;
	font-size: 40px;
	line-height: 38px;
}
.fiche>div>h3 {
	margin: -16px -32px;
	padding: 32px 72px 32px 32px;
	position: sticky;
	top: -16px;
	left: -32px;
	z-index: 1;
	background: linear-gradient(#edc 95%, rgba(0,0,0,0));
}
.fiche>div>p {
	margin: 16px 0;
}
.fiche>div>ul {
	padding: 0;
	list-style: none;
	text-align: center;
}
.fiche>div>ul>li {
	display: inline-block;
}
.fiche>div>ul>li>a {
	width: 128px;
	height: 128px;
	margin: 4px 0;
	display: block;
	background: rgba(0,0,0,0.5);
}
.fiche blockquote {
	min-height: 256px;
	margin: 16px -16px;
	padding: 8px 16px;
	border-radius: 3px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: radial-gradient(#ffe, rgba(255,245,220,0.9) 25%, rgba(228,200,190,0.95) 60%, #655) 50%/980px 980px fixed, #a84 url('images/motif.png');
	box-shadow: 0 -1px 1px #fff inset, 0 0 2px rgba(0,0,0,0.1) inset, 0 0 32px rgba(0,0,0,0.1) inset;
}
.fiche blockquote>p {
	margin: 8px 0 16px;
	font-family: serif;
	font-size: 24px;
	font-style: italic;
	text-align: justify;
	text-align-last: center;
	color: #520;
}
.fiche blockquote>p::before	{ content: '“ '; }
.fiche blockquote>p::after	{ content: ' „'; }
.fiche blockquote>small {
	font-style: italic;
	text-align: center;
}
.fiche blockquote>small::before {
	content: '';
	width: 256px;
	height: 256px;
	margin: 0 auto 4px;
	border-radius: 3px;
	display: block;
	background-color: rgba(0,0,0,0.8);
}
	small.cavalier_coeurs::before,
	small.cavalier_carreaux::before,
	small.cavalier_trefles::before,
	small.cavalier_piques::before,
	small.cavalier_deniers::before,
	small.cavalier_coupes::before,
	small.cavalier_batons::before,
	small.cavalier_epees::before {
		background-position: -256px 0;
	}
	small.dame_coeurs::before,
	small.dame_carreaux::before,
	small.dame_trefles::before,
	small.dame_piques::before,
	small.dame_deniers::before,
	small.dame_coupes::before,
	small.dame_batons::before,
	small.dame_epees::before {
		background-position: 0 -256px;
	}
	small.roi_coeurs::before,
	small.roi_carreaux::before,
	small.roi_trefles::before,
	small.roi_piques::before,
	small.roi_deniers::before,
	small.roi_coupes::before,
	small.roi_batons::before,
	small.roi_epees::before {
		background-position: -256px -256px;
	}


/*	=======================================
		ATOUTS
	======================================= */

.atouts {
	margin: 0;
	padding: 0;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
}
.atouts>li {
	margin: 8px;
	position: relative;
}
.atouts>li {
	position: relative;
	z-index: 1;
}
.atouts>li::before,
.atouts>li::after {
	content: '';
	width: 128px;
	height: 221px;
	border-radius: 8px;
	transition: 0.3s;
}
.atouts>li::before {
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.3);
	box-shadow: 0 0 2px rgba(0,0,0,0.2), 0 0 4px rgba(0,0,0,0.2);
	transition: 0.3s;
}
.atouts>li::after {
	position: relative;
	display: block;
	background: #444 url('images/atouts.jpg') 0 / 2300%;
	box-shadow: 0 0 1px rgba(0,0,0,0.5);
}
.atouts>li:hover::before {
	background: rgba(0,0,0,0.45);
	box-shadow: 0 0 23px rgba(0,0,0,0.5), 0 0 16px rgba(0,0,0,0.5);
}
.atouts>li:hover::after {
	transform: perspective(400px) translate3D(0,-8px,32px) rotateX(8deg);
}
.atouts>li>a,
.atouts>li>span {
	box-sizing: border-box;
	width: 128px;
	margin: 0 -64px;
	padding: 6px 4px 4px;
	border: solid 1px;
	border-radius: 3px;
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 1;
	background: rgba(0,0,0,0.9);
	font-family: TrajanusBricks, serif;
	font-size: 14px;
	text-align: center;
	line-height: 120%;
	opacity: 0;
	box-shadow: 0 0 2px rgba(0,0,0,0.2), 0 0 8px rgba(0,0,0,0.2);
}
.atouts>li>span	{ color: rgba(255,255,255,0.7); }
.atouts>li>a	{ color: #b75; }
.atouts>li:hover>a,
.atouts>li:hover>span {
	opacity: 1;
}
.atouts>li>a::before {
	content: '';
	width: 100%;
	height: 220px;
	border-radius: 8px;
	position: absolute;
	left: 0;
	bottom: 0;
	transition: 0.3s;
}
.atouts>li:hover>a::before {
	transform: perspective(400px) translate3D(0,-8px,32px) rotateX(8deg);
}
.atouts>li>a:hover {
	background: #000;
	color: #d98;
}
.atouts>li>a::first-letter {
	font-size: 24px;
	color: rgba(0,0,0,0);
	text-shadow: 0 2px 0 #b75;
}
.atouts>li>a:hover::first-letter {
	text-shadow: 0 2px 0 #d98;
}
.atouts>li>span::first-letter {
	font-size: 24px;
	color: rgba(0,0,0,0);
	text-shadow: 0 2px 0 rgba(255,255,255,0.7);
}

.atouts>.atout_00::after	{ background-position: -128px 0; }
.atouts>.atout_01::after	{ background-position: -256px 0; }
.atouts>.atout_02::after	{ background-position: -384px 0; }
.atouts>.atout_03::after	{ background-position: -512px 0; }
.atouts>.atout_04::after	{ background-position: -640px 0; }
.atouts>.atout_05::after	{ background-position: -768px 0; }
.atouts>.atout_06::after	{ background-position: -896px 0; }
.atouts>.atout_07::after	{ background-position: -1024px 0; }
.atouts>.atout_08::after	{ background-position: -1152px 0; }
.atouts>.atout_09::after	{ background-position: -1280px 0; }
.atouts>.atout_10::after	{ background-position: -1408px 0; }
.atouts>.atout_11::after	{ background-position: -1536px 0; }
.atouts>.atout_12::after	{ background-position: -1664px 0; }
.atouts>.atout_13::after	{ background-position: -1792px 0; }
.atouts>.atout_14::after	{ background-position: -1920px 0; }
.atouts>.atout_15::after	{ background-position: -2048px 0; }
.atouts>.atout_16::after	{ background-position: -2176px 0; }
.atouts>.atout_17::after	{ background-position: -2304px 0; }
.atouts>.atout_18::after	{ background-position: -2432px 0; }
.atouts>.atout_19::after	{ background-position: -2560px 0; }
.atouts>.atout_20::after	{ background-position: -2688px 0; }
.atouts>.atout_21::after	{ background-position: -2816px 0; }
.atouts>.atout_22::after	{ background-position: -2944px 0; }


/*	=======================================
		À PROPOS
	======================================= */

#a_propos>section {
	max-width: 1024px;
	overflow: visible;
}
#a_propos figure {
	content: '';
	box-sizing: border-box;
	width: 208px;
	height: 208px;
	margin: 16px auto;
	padding: 8px;
	border-radius: 3px;
	display: block;
	background: #fff;
	box-shadow: 0 0 2px rgba(32,8,0,0.2), 0 0 16px rgba(32,8,0,0.2);
}


/*	=======================================
		PIED DE PAGE
	======================================= */

footer {
	padding: 16px 32px;
	display: flex;
	flex-wrap: wrap;
	background: linear-gradient(#000, #2b2527);
	font-size: 13px;
	color: #ddd;
}
footer>* {
	flex: 1 0 0;
}
footer>div {
	margin: 16px 8px;
}
footer ul {
	padding: 0 0 0 16px;
}
footer ul strong {
	font-weight: normal;
	letter-spacing: 1px;
}
footer>p {
	margin: 8px 0;
	flex: 1 0 100%;
	text-align: center;
}
footer a {
	color: #c02;
}
footer a:hover {
	color: #f03;
}


/*	=======================================
		RESPONSIVE
	======================================= */

@media screen and (min-width: 640px) {
	figure.l {
		margin: 0 16px 8px 0;
		float: left;
	}
	figure.r {
		margin: 0 0 8px 16px;
		float: right;
	}
	main::before,
	main::after {
		content: '';
		width: 100%;
		height: 100%;
		max-height: 768px;
		position: absolute;
		bottom: 0;
		left: 0;
		background: -256px 100% / contain no-repeat;
		transition: 0.3s;
		animation: background_in ease-out 0.5s;
	}
	main::after	{ transform: scaleX(-1); }
	main.g_coeurs::before,		main.d_coeurs::after	{ background-image: url('images/fond_coeurs.png');}
	main.g_trefles::before,		main.d_trefles::after	{ background-image: url('images/fond_trefles.png');}
	main.g_carreaux::before,	main.d_carreaux::after	{ background-image: url('images/fond_carreaux.png');}
	main.g_piques::before,		main.d_piques::after	{ background-image: url('images/fond_piques.png');}
	main.g_deniers::before,		main.d_deniers::after	{ background-image: url('images/fond_deniers.png');}
	main.g_coupes::before,		main.d_coupes::after	{ background-image: url('images/fond_coupes.png');}
	main.g_batons::before,		main.d_batons::after	{ background-image: url('images/fond_batons.png');}
	main.g_epees::before,		main.d_epees::after	{ background-image: url('images/fond_epees.png');}
	.fiche>div>nav>.prev {
		top: 24px;
		right: 88px;
	}
	.fiche>div>nav>.next {
		top: 24px;
		right: 56px;
	}
	.fiche>div>h3 {
		padding: 32px 144px 32px 32px;
	}
	.fiche blockquote {
		padding: 8px 16px 8px 288px;
	}
	.fiche blockquote>small {
		min-height: auto;
		padding: 0;
	}
	.fiche blockquote>small::before {
		margin: -128px;
		position: absolute;
		top: 50%;
		left: 136px;
	}
}
@media screen and (min-width: 1024px) {
	main::before,
	main::after {
		background-position: -128px;
	}
	p {
		hyphens: none;
	}
	#accueil>#dates {
		position: absolute;
		bottom: 100%;
		right: 24px;
		background: none;
		transition: 0.3s;
	}
	
	.famille>li>a {
		min-width: 192px;
		margin: 200px 0 0;
		font-size: 16px;
	}
	.famille>li>a::before {
		background-size: 384px;
	}
	a.cavalier_coeurs::before,
	a.cavalier_carreaux::before,
	a.cavalier_trefles::before,
	a.cavalier_piques::before,
	a.cavalier_deniers::before,
	a.cavalier_coupes::before,
	a.cavalier_batons::before,
	a.cavalier_epees::before {
		background-position: -192px 0;
	}
	a.dame_coeurs::before,
	a.dame_carreaux::before,
	a.dame_trefles::before,
	a.dame_piques::before,
	a.dame_deniers::before,
	a.dame_coupes::before,
	a.dame_batons::before,
	a.dame_epees::before {
		background-position: 0 -192px;
	}
	a.roi_coeurs::before,
	a.roi_carreaux::before,
	a.roi_trefles::before,
	a.roi_piques::before,
	a.roi_deniers::before,
	a.roi_coupes::before,
	a.roi_batons::before,
	a.roi_epees::before {
		background-position: -192px -192px;
	}
	.famille>li>a::before {
		width: 192px;
		height: 192px;
		margin: -96px;
		top: -100px;
	}
	.fiche blockquote>p {
		font-size: 32px;
		text-shadow: 0 1px 1px rgba(255,255,192,0.3);
	}
	.atouts::before,
	.atouts::after {
		content: '';
		width: 320px;
		height: 192px;
		position: absolute;
		bottom: 0;
		background: url('images/pantheon_deco.png') no-repeat;
	}
	.atouts::before {
		left: 0;
	}
	.atouts::after {
		transform: scale(-1,1);
		right: 0;
	}
	#a_propos {
		padding: 16px 96px;
	}
	#a_propos>section:nth-child(odd) {
		padding: 8px 16px 8px 160px;
		left: 64px;
	}
	#a_propos>section:nth-child(even) {
		padding: 8px 160px 8px 16px;
		left: -64px;
	}
	#a_propos figure {
		margin: -104px;
		position: absolute;
		top: 50%;
		right: 32px;
	}
	#a_propos>section:nth-child(odd) figure {
		left: 32px;
	}
}
@media screen and (min-width: 1216px) {
	main::before,
	main::after {
		background-position: 0;
	}
	#accueil>#dates {
		right: 48px;
	}
	.famille>li>a {
		min-width: 256px;
		margin: 264px 0 0;
		font-size: 16px;
	}
	.famille>li>a::before {
		background-size: 512px;
	}
	a.cavalier_coeurs::before,
	a.cavalier_carreaux::before,
	a.cavalier_trefles::before,
	a.cavalier_piques::before,
	a.cavalier_deniers::before,
	a.cavalier_coupes::before,
	a.cavalier_batons::before,
	a.cavalier_epees::before {
		background-position: -256px 0;
	}
	a.dame_coeurs::before,
	a.dame_carreaux::before,
	a.dame_trefles::before,
	a.dame_piques::before,
	a.dame_deniers::before,
	a.dame_coupes::before,
	a.dame_batons::before,
	a.dame_epees::before {
		background-position: 0 -256px;
	}
	a.roi_coeurs::before,
	a.roi_carreaux::before,
	a.roi_trefles::before,
	a.roi_piques::before,
	a.roi_deniers::before,
	a.roi_coupes::before,
	a.roi_batons::before,
	a.roi_epees::before {
		background-position: -256px -256px;
	}
	.famille>li>a::before {
		width: 256px;
		height: 256px;
		margin: -128px;
		top: -132px;
	}
	
	.atouts>li::before,
	.atouts>li::after {
		width: 160px;
		height: 276px;
	}
	.atouts>li>a,
	.atouts>li>span {
		width: 160px;
		margin: 0 -80px;
	}
	.atouts>li>a::before {
		height: 274px;
	}
	.atouts>.atout_00::after	{ background-position: -160px 0; }
	.atouts>.atout_01::after	{ background-position: -320px 0; }
	.atouts>.atout_02::after	{ background-position: -480px 0; }
	.atouts>.atout_03::after	{ background-position: -640px 0; }
	.atouts>.atout_04::after	{ background-position: -800px 0; }
	.atouts>.atout_05::after	{ background-position: -960px 0; }
	.atouts>.atout_06::after	{ background-position: -1120px 0; }
	.atouts>.atout_07::after	{ background-position: -1280px 0; }
	.atouts>.atout_08::after	{ background-position: -1440px 0; }
	.atouts>.atout_09::after	{ background-position: -1600px 0; }
	.atouts>.atout_10::after	{ background-position: -1760px 0; }
	.atouts>.atout_11::after	{ background-position: -1920px 0; }
	.atouts>.atout_12::after	{ background-position: -2080px 0; }
	.atouts>.atout_13::after	{ background-position: -2240px 0; }
	.atouts>.atout_14::after	{ background-position: -2400px 0; }
	.atouts>.atout_15::after	{ background-position: -2560px 0; }
	.atouts>.atout_16::after	{ background-position: -2720px 0; }
	.atouts>.atout_17::after	{ background-position: -2880px 0; }
	.atouts>.atout_18::after	{ background-position: -3040px 0; }
	.atouts>.atout_19::after	{ background-position: -3200px 0; }
	.atouts>.atout_20::after	{ background-position: -3360px 0; }
	.atouts>.atout_21::after	{ background-position: -3520px 0; }
	.atouts>.atout_22::after	{ background-position: -3680px 0; }
}

.new {
	padding: 0 0 0 16px;
	position: absolute;
	top: 0;
	left: 40px;
	z-index: 1;
	font-size: 16px;
	color: #ffd;
	text-shadow: 0 0 2px #ffb, 0 0 6px #fcb, 0 0 8px #fb8;
}
.new::before,
.new::after {
	content: '';
	width: 64px;
	height: 64px;
	margin: -32px;
	position: absolute;
	top: 50%;
	left: 0;
	background: url('images/star.svg') 0 / 100% 100%;
	mix-blend-mode: color-dodge;
}
.new::before {
	animation: rotate linear 17s infinite;
}
.new::after {
	animation: rotate2 linear 27s infinite;
}