/*
style.css
commentaires si nécessaires
*/

/* Définition des polices personnalisées */

@font-face 
{
    font-family: 'cardinalregular';
    src: url('polices/cardinal-webfont.eot');
    src: url('polices/cardinal-webfont.eot?#iefix') format('embedded-opentype'),
         url('polices/cardinal-webfont.woff') format('woff'),
         url('polices/cardinal-webfont.ttf') format('truetype'),
         url('polices/cardinal-webfont.svg#cardinalregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face 
{
    font-family: 'england_hand_dbregular';
    src: url('polices/england-webfont.eot');
    src: url('polices/england-webfont.eot?#iefix') format('embedded-opentype'),
         url('polices/england-webfont.woff') format('woff'),
         url('polices/england-webfont.ttf') format('truetype'),
         url('polices/england-webfont.svg#england_hand_dbregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face 
{
    font-family: 'baskerville_old_faceregular';
    src: url('polices/baskvill-webfont.eot');
    src: url('polices/baskvill-webfont.eot?#iefix') format('embedded-opentype'),
         url('polices/baskvill-webfont.woff') format('woff'),
         url('polices/baskvill-webfont.ttf') format('truetype'),
         url('polices/baskvill-webfont.svg#baskerville_old_faceregular') format('svg');
    font-weight: normal;
    font-style: normal;
}





/* Eléments principaux de la page */

body
{
	background: #FFFFFF;
	font-family: 'baskerville_old_faceregular', Times New Roman, Arial, Trebuchet MS, serif;
}
#bloc_page
{
	width: auto;
	margin: auto;
}
@media all and (max-width: 1280px)
{
	#bloc_page
	{
		width: auto;
	}
}




/* Header */

header
{
	background-color: #84a5d7;
}
#en_tete
{
	width: 100%;
	display: inline-block;
	text-align: center;
}
#logo_joueizh, #logo_cardinal, #logos_reseaux_sociaux
{
	display: inline-block;
	vertical-align: middle;
	width: 32%;
}
#logo_joueizh
{
	text-align: left;
}
#logos_reseaux_sociaux
{
	display: inline-block;
	text-align: right;
}
#icone_facebook, #icone_youtube
{
	vertical-align: middle;
}
#icone_facebook
{
	margin-right: 5px;
}
@media all and (max-width: 480px)
{
	#en_tete
	{
		padding-top: 10px;
		padding-bottom: 10px;
	}
	#logo_joueizh, #logo_cardinal, #logos_reseaux_sociaux
	{
		display: block;
		text-align: center;
		margin: auto;
		width: 100%;
	}
	#logo_cardinal
	{
		margin-top: 5px;
		margin-bottom: 5px;
	}
	#icone_joueizh
	{
		width: 15%;
	}
	#icone_cardinal
	{
		width: 50%;
	}
	#icone_facebook, #icone_youtube
	{
		width: 5%;
	}
}		
		
	
	


	
/* Navigation */

nav
{
	display: inline-block;
	background-color: #0f243e;
	width: 100%;
	text-align: center;
	vertical-align: middle;
}
nav > ul
{
	width: 100%;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
}
nav li 
{
	list-style-type: none;
}
nav ul::after
{
	content: "";
	display: block;
	clear: both;
}
nav > ul > li
{
	display: inline-block;
	margin: 0px 7px;
	float: center;
	position: relative;
}
nav a
{
	color: #84a5d7;
	text-decoration: none;
}
nav a:hover
{
	color: #B82010;
}
nav li:hover .sous_menu
{
	display: inline-block;
	position: absolute;
	top: 100%;
	left: 0px;
	padding: 5px 10px;
	z-index: 100;
	text-align: left;
}
.sous_menu
{
	display: none;
	background-color: #84a5d7;
	margin-top: 0px;
	width: 120px;
}
.sous_menu li a
{
	font-size: 0.8em;
	color: #0f243e;
}
.sous_menu li a:hover
{
	color: #B82010;
}
@media all and (max-width: 748px)
{
	nav a 
	{
		font-size: 0.9em;
	}
	.sous_menu
	{
		width: 105px;
	}
	.sous_menu li a
		{
			font-size: 0.7em;
		}
}
@media all and (max-width: 480px)
{
	nav > ul > li
	{
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	nav a 
	{
		font-size: 0.8em;
	}
	nav a:hover
	{
		border-bottom: 0;
	}
	.menu_l_accueil
	{
		width: 66px;
	}
	.menu_le_jeu
	{
		width: 41px;
	}
	.menu_la_philosophie
	{
		width: 108px;
	}
	.menu_les_clubs
	{
		width: 67px;
	}
	.menu_les_versions
	{
		width: 90px;
	}
	.menu_la_boutique
	{
		width: 90px;
	}
	.sous_menu
	{
		width: 90px;
	}
	.sous_menu li a
	{
		font-size: 0.6em;
	}
	nav li:hover .sous_menu
	{
		top: 100%;
		left: 0px;
	}
}





/* Body */

section
{
	text-align: center;
	margin-bottom: 48px;
	margin-top: 48px;
}

#play-button
{
	background-color: #B82010;
	color: #FFFFFF;
	font-family: 'england_hand_dbregular';
	font-size: 30px;
	padding: 15px 30px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	display: inline-flex;
	width: fit-content;
	height: fit-content;
}

.resize-button 
{
	background-color: #B82010;
	color: #FFFFFF;
	font-family: 'england_hand_dbregular';
	font-size: 30px;
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	display: inline-flex;
	width: fit-content;
	height: fit-content;
}

.resize-buttons-container
{
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
}

#game-container
{
	display: inline-flex;
	/* width: 1152px;
	height: 648px;
	background-color: #e9e9e9; */

	justify-content: center;
	align-items: center;
}

.icon_play
{
	vertical-align: middle;
	margin-right: 5px;
	width: 36px;
}


#avertissement
{
	font-family: 'england_hand_dbregular';
	color: #B82010;
	font-size: 50px;
}
@media all and (max-width: 748px)
{
	section
	{
		margin-bottom: 150px;
		margin-top: 150px;
	}
	#avertissement
	{
		font-size: 2em;
	}
}
@media all and (max-width: 480px)
{
	section
	{
		margin-bottom: 100px;
		margin-top: 100px;
	}
	#avertissement
	{
		font-size: 1.5em;
	}
}
@media all and (max-width: 375px)
{
	section
	{
		margin-bottom: 50px;
		margin-top: 50px;
	}
	#avertissement
	{
		font-size: 1.2em;
	}
}








/* Icônes contacts */

#bandeau_icones_contact
{
	text-align: center;
	background-color: #0f243e;
	width: 100%;
	margin: auto;
	color: #84a5d7;
	text-decoration: none;
}
.lien_adresse, .lien_courriel, .lien_telephone
{
	display: inline-block;
	padding-top: 5px;
}
.lien_courriel
{
	margin-left: 200px;
	margin-right: 200px;
}
.icone_adresse, .icone_courriel, .icone_telephone, p
{
	display: inline-block;
	margin: auto;
	color: #84a5d7;
}
p
{
	margin-bottom: 10px;
}
@media all and (max-width: 1024px)
{
	.lien_courriel
	{
		margin-left: 150px;
		margin-right: 150px;
	}
}
@media all and (max-width: 480px)
{
	.lien_adresse, .lien_courriel, .lien_telephone
	{
		font-size: 0.9em;
	}
	.lien_courriel
	{
		margin-left: 50px;
		margin-right: 50px;
	}
	#image_adresse, #image_courriel, #image_telephone
	{
		width: 80%;
	}
}
@media all and (max-width: 375px)
{
	.lien_adresse, .lien_courriel, .lien_telephone
	{
		font-size: 0.8em;
	}
	#image_adresse, #image_courriel, #image_telephone
	{
		width: 70%;
	}
}





/* Footer */

footer
{
	display: inline-block;
	background-color: #84a5d7;
	width: 100%;
	margin: auto;
}
footer p
{
	color: #0f243e;
	margin-left: 15px;
	margin-top: 15px;
}
footer ul
{
	list-style-type: none;
	float: right;
	margin-right: 15px;
}
footer li
{
	display: inline-block;
	color: #0f243e;
}
footer a
{
	text-decoration: none;
	color: #0f243e;
}
footer p, footer ul
{
	display: inline-block;
}
@media all and (max-width: 748px)
{
	footer p, footer ul
	{
		font-size: 0.9em;
	}
}
@media all and (max-width: 480px)
{
	footer p, footer ul
	{
		display: block;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 5px;
		margin-bottom: 5px;
		float: none;
	}
	footer ul
	{
		padding: 0px;
	}
}
@media all and (max-width: 375px)
{
	footer p, footer ul
	{
		font-size: 0.8em;
	}
}