/* CSS Document */

/* Elements de base */
html { width: 100%; height: 100%; }
body { margin: 0px; padding: 0px; font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 16px; line-height: normal; color: #fff; background: #000; height: 100%; width: 100%; }
table { margin: 0px; padding: 0px; }
tr, thead, tbody { margin: 0px; padding: 0px; }
td { margin: 0px; padding: 0px; vertical-align: top; } 
th { margin: 0px; padding: 0px; vertical-align: top; }
p { margin: 0px; padding: 0px; margin-bottom: 8px; height: auto; }
ul, ol { margin: 12px 0px; padding: 0; padding-left: 40px; } 
li { margin-top: 0px; margin-bottom: 0px; list-style-image: url(/img/front/bull-li.png); line-height: 1.2em; }
img { border: none; vertical-align: top; }
input { vertical-align: middle; margin: 0px; border: 1px solid #888; padding: 3px 6px; font-size: 14px; line-height: normal; color: #000; font-family: 'Roboto', sans-serif; box-sizing: border-box; }
input[type=file] { border: none; }
input[type=checkbox] { margin-top: -2px; border: none; }
input[type=radio] { margin-top: -3px;  border: none; }
input[type=submit] { background: #eee; padding: 3px 8px; border: 1px solid #888; color: #666; cursor: pointer; }
input.date { width: 90px; }
textarea { margin: 0px; border: 1px solid #888; padding: 3px 6px; font-size: 14px; color: #000; resize: none; font-family: Arial, sans-serif; box-sizing: border-box; }
select { margin: 0px; border: 1px solid #888; font-size: 14px; color: #000; font-family: Arial, sans-serif; }
select option { background: #fff !important; color: #4c4c4e !important; padding: 3px 5px; }
div { position: relative; }
hr { color: #999; background-color: #999; height: 1px; border: none; }
strong { font-weight: 700; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; text-rendering: geometricPrecision; }
b { font-weight: 700; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; text-rendering: geometricPrecision; }
iframe, object { max-width: 100%; }

/* Liens et classes associées */
a, a:link, a:visited { text-decoration: none; color: #00afcc; }
a:hover { text-decoration: none; }
a.actif { font-weight: bold; }
li a { text-decoration: none; color: #00afcc; }
a.ficpdf { display: inline-block; background: url(/img/admin/pdf.png) no-repeat left center; padding-left: 24px; }
a.bouton { display: block; width: 400px; max-width: 100%; padding: 12px 24px; border-radius: 8px; margin: 8px auto; text-align: center; background: #888; color: #fff !important; font-weight: 700; 
	opacity: 0.7; transition: all .3s ease-in-out; box-sizing: border-box; }
a.bouton:hover { opacity: 1; }
h3 > a.bouton { color: #fff; }
.btnpdf { display: inline-block; padding: 4px 4px 4px 30px; margin: 0 24px; background: url(/img/front/picto-download.png) no-repeat left top; min-height: 24px; }

/* Titres */
h1 { position: relative; font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 42px; line-height: 42px; margin: 5px 0; padding: 0px; text-align: center; letter-spacing: 3px; }
h2 { position: relative; font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 32px; line-height: 32px; margin: 5px 0; padding: 0px; }
h2.souligne { font-size: 26px; line-height: 32px; margin: 0 0 20px 0; padding: 0 0 12px 0; border-bottom: 1px dotted #999; }
h2 > .trait { display: inline-block; width: 240px; height: 0px; overflow: hidden; border: 2px solid #666; border-radius: 2px; margin: 16px 24px 0 24px; vertical-align: top; }
h3 { position: relative; font-family: 'Quicksand', sans-serif; font-weight: 400; font-size: 26px; line-height: 26px; margin: 5px 0; padding: 0px; letter-spacing: 2px; color: #b3b3b3; }
h3 > .trait { display: inline-block; width: 240px; height: 0px; overflow: hidden; border: 1px solid #b3b3b3; border-radius: 1px; margin: 14px 20px 0 20px; vertical-align: top; }
h4 { position: relative; font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 12px; line-height: 18px; margin: 12px 0 8px 0; padding: 4px 8px; text-transform: uppercase; 
	letter-spacing: 2px; background: #666; color: #fff; }

/* Classes de style */
.content { position: relative; width: 1280px; margin: 0 auto; box-sizing: border-box; }
.nodisp { display: none; }
.clear { display: block; clear: both; }
.erreur { font-size: 13px; font-style: italic; color: #F00; background: url(/img/front/erreur.png) no-repeat left; padding-left: 22px; font-weight: 500; }
.alerte { display: inline-block; font-size: 11px; font-style: normal; color: #ffae00; background: url(/img/front/erreur.png) no-repeat left top; padding-left: 20px; font-weight: normal; }
.info { font-size: 11px; font-style: italic; font-weight: 400; color: #369; }
.gros { font-size: 18px; font-weight: bold; color: #000; margin-bottom: 8px; }
.petit { font-size: 12px; font-style: normal; font-weight: 300; } 
.surligne { background: #FF0; color: #036; font-style: normal; font-weight: bold; }
.hr { border-top: 1px solid #777; height: 1px; font-size: 0px; }
.ombre { -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); }
.tombre { text-shadow: 0px 0px 4px #000; -moz-text-shadow: 0px 0px 4px #000; -webkit-text-shadow: 0px 0px 4px #000; }
.outline { font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; color: #fff; }
.espace { height: 5px; font-size: 0px; overflow: hidden; }
.icone { width: 16px; height: 16px; }
.contenu { left: 50%; width: 1280px; margin-left: -640px; } .contenu > .padding { padding: 0px; }
.cntcol { display: table; width: 100%; }
.cntcol > .col2 { display: table-cell; width: 50%; }
.cntcol > .col2 > .padding { padding: 0 12px; } 
.cntcol > .col3 { display: table-cell; width: 33%; border-left: 1px solid #c7c7c7; } .cntcol > .col3:first-child { border-left: none; }
.cntcol > .col3 > .padding { padding: 0 12px; } 
.inline { display: inline-block; }
.w100pct { width: 100%; }
.fright { float: right; }
.aright { text-align: right; } .aleft { text-align: left; } .acenter { text-align: center; }
.vacenter { vertical-align: middle; } .vatop { vertical-align: top; } 
.disabled { color: #d7d7d7; }
.br { height: 0; overflow: hidden; }
.big { font-size: 50px; }
.vbig { font-size: 60px; }
.vvbig { font-size: 66px; font-weight: 700; vertical-align: top; }
.rond-coul { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background-color: #aaa; }
.marge-fmax { margin: 0 6px; }
.marge2-fmax { display: inline-block; margin: 8px 55px 0 38px; width: 4px; height: 46px; line-height: 64px; background: rgba(255,255,255,0.4); vertical-align: middle; }
.nopadding { padding: 0 !important; }
.noborder { border: none !important; }
.cnt-centre { width: 800px; max-width: 100%; margin: 0 auto; box-sizing: border-box; }
.cnt-centre.padhor { padding: 0 20px; }

/* Elements uniques */
#bg-home { position: fixed; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; z-index: 1; opacity: .5; filter: blur(3px); }
#bg-home > video { min-width: 100%; min-height: 100%; z-index: 1; }
#entete { position: fixed; top: 24px; left: 32px; right: 32px; height: 66px; overflow: visible; z-index: 2; text-align: left; }
#entete > #cnt-titre { display: inline-block; text-align: center; }
#entete > #chx-langue { position: absolute; top: 0; right: 0; height: 48px; width: 48px; overflow: hidden; }
#entete > #chx-langue > img { display: block; width: 48px; height: 48px; }
#entete > #btn-close { position: absolute; top: 0; right: 0; }
#contenu { position: fixed; top: 114px; bottom: 24px; left: 32px; right: 32px; overflow: auto; z-index: 3; text-align: center; }

/* Menus / formulaires */
.cnt-menu { position: absolute; top: 50%; left: 50%; min-width: 300px; max-width: 90%; max-height: 90%; font-size: 20px; transform: translate(-50%, -50%); 
    transition: all .2s ease-in-out; }
.cnt-menu.inactif { visibility: hidden; opacity: 0; transform: translate(-50%, -150%); }
.cnt-menu .btn-menu { text-align: center; padding: 6px 8px; background: rgba(255,255,255,.1); transition: all .2s ease-in-out; margin: 0 0 6px 0; }
.cnt-menu .btn-menu:hover { background: rgba(255,255,255,.7); color: #000; }
.cnt-menu .btn-menu.btnret { background: rgba(255,128,128,.3); }
.cnt-menu .btn-menu.btnret:hover { background: rgba(255,128,128,.7); }
.cnt-menu a { font-size: 13px; }
form .label { font-size: 13px; font-style: italic; line-height: 18px; text-align: left; margin: 6px 0 4px 0; }
form input, form select { display: block; padding: 6px 8px; background: #fff; border: none; margin: 0 0 6px 0; width: 100%;
    outline: none; box-sizing: border-box; box-shadow: 0 0 0 40px #fff inset !important; }
form input[type=submit] { background: rgba(128,255,192,.3); box-shadow: 0 0 0 0px #fff inset !important; padding: 6px 8px; font-size: 20px; color: #fff; 
    border: none; transition: all .2s ease-in-out; margin: 12px 0 6px 0; }
form input[type=submit]:hover { background: rgba(128,255,192,.7); color: #000; }

/* Interfaces des jeux */
#cntjeu { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#cntjeu #cadre { border: 1px solid #ccc; }
#cadre .case { position: absolute; border: 1px solid #ccc; text-align: center; vertical-align: middle; box-sizing: border-box; font-size: 32px; }
#cadre .case > span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 50%; height: 50%; border-radius: 50%; cursor: pointer; transition: all .2s ease-in-out; }
#cadre .case > span:hover { color: #000; background: rgba(255,255,255,.7); }
#cadre .case.select > span { color: #000; background: rgba(128,255,192,.7); }
#cntjeu #saisie { background: none; border: none; text-align: center; color: #fff; display: block; width: 100%; box-sizing: border-box; }