/* CSS Document */
html, body { width:100%; height:100%; font-family: 'Kalam', cursive; font-size:16px; font-weight:400; color:#00224d; }
body { background:url(../images/fond.png) fixed top center no-repeat; }

h1 { color:#00224d; text-transform:uppercase; font-family: 'Bangers', cursive; }
h2 { color:#00224d; text-transform:uppercase; font-family: 'Bangers', cursive; }

input[type=text] { width:100%; padding:0 5px; }
input.error { border:1px solid #ff0000; }

input[type=button].btn-default { min-width:25%; background-color:transparent; padding:10px 15px; margin:auto; display:block; border-radius:10px; }
input[type=button].btn-default:hover { background-color:#ffffff; }
input[type=submit], input[type=button].btn-primary, a.btn-primary { min-width:25%; background:#ff0000; color:#fff; padding:10px 15px; margin:auto; display:block; border:2px solid #ff0000; border-radius:10px; }
input[type=submit]:hover, input[type=button].btn-primary:hover, a.btn-primary:hover { background:#ee0202; border:2px solid #ee0202; text-decoration:none; }
a.btn-primary { display:inline-block; min-width:auto; }

#header { margin:15px 0; }
#header img { width:30%; }

#index #section form table { width:50%; margin:20px auto; border-radius:15px; }
#index #section form table, #index #section form table tr, #index #section form table tr th, #index #section form table tr td { border:2px solid #00224d; border-collapse:collapse; }
#index #section form table tr th, #index #section form table tr td { padding:10px 15px;  }
#index #section form table tr th { font-weight:bold; background:transparent; }
#index #section form table tr th label { margin:0; }
#index #section form table tr th label:hover { cursor:pointer; text-decoration:underline; }

#config #zone_participants { float:right; }
#config #zone_participants ul { padding:0; list-style:none; }

#partie #section { margin:20px 0; }
#partie #section #zone_enonce td { padding:0 5px; }
#partie #section #zone_enonce td #pile_carte, #partie #section #zone_enonce td #enonce, #partie #section #zone_cartes #listing_cartes .carte { display:flex; align-items:center; }
#partie #section #zone_enonce td #pile_carte { background:#00224d; min-height: 250px; padding:15px; border:3px solid #fff; border-radius:10px; text-align:center; }
#partie #section #zone_enonce td #pile_carte img { margin:auto; }
#partie #section #zone_enonce td #enonce { background-color:#ffffff; min-height: 250px; padding:15px; border:3px solid #00224d; border-radius:10px; font-size:1.125rem; background-image:url(../images/fond_carte_bleu.png); background-repeat:no-repeat; background-position:right 10px bottom 10px; }
#partie #section #alert { margin-top:20px; }
#partie #section .container #zone_classement { padding:0 20px; }
#partie #section .container #zone_classement h2 { margin-top:0; }
#partie #section #zone_cartes { margin-top:20px; }
#partie #section #zone_cartes #form_cartes { position:relative; }
#partie #section #zone_cartes #form_cartes #listing_cartes { padding-top:30px; }
#partie #section #zone_cartes #form_cartes #listing_cartes .slick-arrow { position: absolute; top: 0; left:10px; font-family:Arial, Helvetica, sans-serif; }
#partie #section #zone_cartes #form_cartes #listing_cartes .slick-arrow.slick-next { left:50px; }
#partie #section #zone_cartes #listing_cartes .carte { min-height: 250px; width:170px; padding:15px; border-radius:10px; font-size:1.125rem; margin:10px; color:#af0003; background-color:#ffffff; border:3px solid #af0003; background-image:url(../images/fond_carte_rouge.png); background-repeat:no-repeat; background-position:right 10px bottom 10px; }
#partie #section #zone_cartes #listing_cartes .carte:hover { cursor:pointer; }
#partie #section #zone_cartes #listing_cartes .carte.disabled:hover { cursor:not-allowed; }
#partie #section #zone_cartes #listing_cartes .carte.checked { color:#ffffff; background-color:#af0003; background-image:url(../images/fond_carte_blanc.png); }
#partie #section #zone_cartes #form_cartes input[type=button].btn-default { position:absolute; top:-5px; right:10px; background-color:none; padding:5px 15px; min-width:auto; }
#partie #section #zone_cartes #form_cartes input[type=button].btn-primary { position:absolute; top:-5px; right:10px; padding:5px 15px; min-width:auto; }

#finish #podium { margin-top:50px; display:flex; align-items:flex-end; }
#finish #podium h3 span { font-size:0.8rem; font-style:italic; display:block; }
#finish #podium .marche { border:2px solid #00224d; padding:5px; display:flex; align-items:center; justify-content:center; }
#finish #podium .marche span { border:1px solid #00224d; border-radius:50px; padding:5px; text-align:center; background:#00224d; color:#fff;  }
#finish #podium #marche1 { height:150px; }
#finish #podium #marche1 span { font-size:1.5rem; width:47px; height:47px; }
#finish #podium #marche2 { height:100px; border-right:none; }
#finish #podium #marche2 span { font-size:1.25rem; width:41px; height:41px; }
#finish #podium #marche3 { height:50px; border-left:none; }
#finish #podium #marche3 span { width:35px; height:35px; }



@media (max-width: 991px) {
	#index #section form table { width:100%; }
	
	#partie #section .container { display:flex; flex-direction: column; }
	#partie #section .container #zone_enonce { order:1; }
	#partie #section .container #alert { order:2; }
	#partie #section .container #zone_cartes { order:3; }
	#partie #section .container #zone_classement { order:4; padding:0; margin-top:20px; }
}

@media (min-width: 576px) and (max-width: 991px) {
	#partie #section #zone_enonce td #pile_carte img { max-width:150px; }
}

@media (max-width: 767px) {
	#partie #section #zone_enonce td #pile_carte, #partie #section #zone_enonce td #enonce, #partie #section #zone_cartes #form_cartes #listing_cartes .carte { min-height:200px; }
}

@media (max-width: 575px) {
	#partie #section #zone_enonce td #pile_carte, #partie #section #zone_enonce td #enonce { min-height:150px; padding:15px 5px; }
	#partie #section #zone_cartes #form_cartes #listing_cartes .carte { min-height:200px; padding:15px 5px; }
}