/*
======================================================================================

    @ stylesheet.css
    @ STYLESHEET
    @ CSS by Nicow - wb x dsg - http://www.wbxdsg.com/

======================================================================================
*/

/*------------------------------------------------- RESET -------------------------------------------------*/
    
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td,p,figure,figcaption,button,em,i{padding:0;margin:0;font-size:inherit;color:inherit;background:transparent;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
a{text-decoration:none;}
table{border-spacing:0;}
fieldset,img,button,textarea{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-weight:normal;font-style:normal;}
strong{font-weight:bold;}
ol, ul{list-style:none;margin:0;padding:0;}
caption,th{text-align:left;}
q:before, q:after{content:'';}
abbr, acronym{border:0;}
input,textarea{border:0;margin:0;font-family:inherit;resize:none;}
i{font-style:normal;font-weight:bold;}
a,button,input[type=submit]{cursor:pointer;}
.clear{clear:both;}
.clear-right{clear:right;}
.clear-left{clear:left;}
.slick-slider, .slick-list, .slick-track, .slick-slide{height:100%;}
.slick-slide{overflow:hidden;float:left;min-height:1px;}
.slick-slider{overflow:hidden;display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;touch-action:pan-y;-webkit-tap-highlight-color:transparent;}
    

*::selection{background:rgba(29,38,43,.9);color:#ffffff;}
*::-moz-selection{background:rgba(29,38,43,.9);color:#ffffff;}
*::-webkit-selection{background:rgba(29,38,43,.9);color:#ffffff;}
*::-khtml-selection{background:rgba(29,38,43,.9);color:#ffffff;}
*::-o-selection{background:rgba(29,38,43,.9);color:#ffffff;}

::-webkit-input-placeholder{color:#2e5164;opacity:.4;}
::-moz-placeholder{color:#2e5164;opacity:.4;}
:-ms-input-placeholder{color:#2e5164;opacity:.4;}
:-moz-placeholder{color:#2e5164;opacity:.4;}

@font-face{font-family:Arial;}

*{position:relative;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
*:focus{outline-style:none;}
*:before, *:after{position:relative;z-index:1;}

a{color:inherit;}

.ct{width:1100px;max-width:100%;padding:0 10px;margin:auto;}

h2{font-size:27px;color:#103e70;padding:0 25px;font-weight: 600;}


/********** paragraphe **********/   

.paragraphe{text-transform:uppercase;font-size:25px;}
.paragraphe p + p{margin-top:25px;}
.paragraphe .small{font-size:15px;line-height:1.5;}
.paragraphe .small + p{margin-top:0;}
.paragraphe.key{font-size:22px;width:750px;max-width:100%;margin:auto;}
.paragraphe a{color:#103e70;}
.paragraphe a:hover{opacity:.7;}
.paragraphe .cle{color:#103e70;white-space:nowrap;display:block;font-size:80px;margin:15px auto 20px;}


/********** btn **********/   

.btn{z-index:100;display:inline-block;font-family:Arial, Helvetica, sans-serif;color:#fff;background:#103e70;border-radius:30px;}
.btn:hover{opacity:.7;}
.btn i{font-size:80%;top:-1px;}
.back{margin-bottom:25px;position:absolute;left:20px;top:20px;font-size:18px;padding:13px 20px 10px;}


/*------------------------------------------------- APP -------------------------------------------------*/

/********** * **********/   

    html{color:#2e5164;width:100%;height:100%;line-height:1.1;background:#103e70;overflow-x:hidden!important;font-family:Arial, Helvetica, sans-serif;font-weight:regular;}
    body{width:100%;height:100%;}


/********** header **********/

	header{border:3px solid #103e72;border-width:4px 0;line-height:0;}
	header img{z-index:1;width:100%;}
	header h1{z-index:0;position:absolute;font-size:0;}


/********** game **********/
	
	.game{border-radius:25px;width:1400px;max-width:100%;margin:auto;padding:calc(15px + 2.5%) 0 calc(15px + 2%);background:url(../img/bg-game.jpg) center center #fff;background-size:cover;box-shadow:0 5px 20px rgba(69,112,119,.5);}
	#game{margin-top:calc(15px + 2.5%);height:250px;width:calc(100% + 40px);left:-20px;}
	#game .slick-btn{color:#fff;font-size:18px;padding-top:1px;top:50%;transform:translateY(-50%);position:absolute;width:45px;height:45px;background:#103e72;border-radius:50%;z-index:9999;}
	#game .slick-btn:hover{opacity:.85;}
	#game .slick-prev{left:0;}
	#game .slick-next{right:0;}
	#game .slick-slide{padding:0 25px 0 195px;text-align:left!important;}
	#game .slick-list{overflow:hidden;width:calc(100% - 110px);margin:auto;}
	#game .slick-track{overflow:hidden;}
	#game .pochette{border-radius:3px;left:0;position:absolute;width:170px;}
	#game .title{font-size:16px;color:#103e70;font-weight:600; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
	#game .infos p{font-family:Arial;text-transform:none;font-size:11px;line-height:1.3;margin:15px 0;}
	#game .choose{left:-5px;padding:10px 15px 8px;margin-top:20px;font-weight: 600;}
	#game .plus{color:#103e70;margin-top:-10px;cursor:pointer;z-index:100;font-weight:600;}
	#game .plus:hover{opacity:.7;}


/********** footer **********/
	
	footer{padding:30px 0 23px;text-align:center;color:#fff;text-transform:uppercase;font-size:20px;}
	footer:before{content:'';display:block;height:2px;background:#fff;width:100%;top:4px;position:absolute;}
	footer li{display:inline;}
	footer li:not(:last-child):after{content:'-';margin:0 5px 0 8px;}
	footer a:hover{opacity:.7;cursor:pointer;}


/********** form **********/
	
	form{padding-top:10px;}
	form input{max-width:100%;display:block;margin:15px auto;font-size:20px;height:70px;text-transform:uppercase;width:300px;text-align:center;border:3px solid #2e5164;border-radius:13px;}
	form input:focus{border-color:#103e70;color:#103e70;}
	form small{display:block;font-size:16px;}
	form .btn{margin-top:25px;font-size:30px;padding:10px 40px;}


/********** main **********/
	
	#main{text-transform:uppercase;background:#fff;text-align:center;padding:calc(20px + 2%);}
	.blue{color:#103e70!important;}


/********** modal **********/
	
	.modal{display:none;background:rgba(36,138,144,.5);position:fixed;z-index:999999;top:0;left:0;width:100vw;height:100%;}
	.modal > div{width:calc(100vw + 80px);overflow-y:scroll;height:100%;}
	.modal > div > div{display:flex;min-height:100%;justify-content:center;align-items:center;max-width:100vw;padding:25px;}
	.modal .jeu{min-height:465px;display:none;transition:.2s;transform:scale(.8);opacity:0;overflow:hidden;padding:calc(15px + 1%) calc(20px + 1.5%);border-radius:25px;background:url(../img/bg-game.jpg) center center #fff;background-size:cover;box-shadow:0 5px 20px rgba(69,112,119,.5);align-selft:center;margin:auto;max-width:100%!important;width:800px;}
	.modal .jeu [data-close]{background:#103e70;color:#fff;font-size:22px;line-height:50px;text-align:center;padding:18px 20px 0 0;position:absolute;border-radius:15px;width:65px;height:65px;position:absolute;right:-20px;top:-20px;}
	.modal .jeu [data-close]:hover{opacity:.7;}
	.modal .jeu.open{transform:scale(1);opacity:1;}
	.modal .jeu h3{font-size:20px;text-transform:uppercase;color:#103e70;margin:25px 0 15px;}
	.modal .jeu h2{line-height:.9;font-size:40px;text-transform:uppercase;padding:0 40px 0 0;margin-bottom:-10px;}
	.modal .jeu h2 + div{padding-left:260px;}
	.modal .jeu .pochette{position:absolute;width:230px;left:0;}
	.modal .jeu p{font-family:Arial;text-transform:none;font-size:13px;line-height:1.7;}
	.modal .jeu p a{color:#103e70!important;font-weight:bold;}
	.modal .jeu .rate{margin:10px 0 20px;font-family:Arial;font-size:13px;}
	.modal .jeu .rate i{display:inline-block;margin-left:-3px;font-size:16px;}
	.modal .jeu .rate strong{margin-left:7px;}


/*------------------------------------------------- MEDIA -------------------------------------------------*/
    
@media screen and (max-width:1100px){
	
	.back{position:relative;left:0;top:0;}
	
	.paragraphe{font-size:calc(20px + 9 * (100vw - 320px) / 1080);}
	.paragraphe.key{font-size:calc(18px + 6 * (100vw - 320px) / 1080);}
	.paragraphe .small{font-size:calc(12px + 3 * (100vw - 320px) / 1080);}
	.paragraphe .cle{font-size:calc(35px + 60 * (100vw - 320px) / 1080);}

	form small{font-size:calc(13px + 4 * (100vw - 320px) / 1080);}
	
	h2{font-size:calc(20px + 10 * (100vw - 320px) / 1080);}

}
@media screen and (max-width:800px){
	
	.modal .jeu h2{font-size:calc(25px + 30 * (100vw - 320px) / 1080);padding:0 35px;}
	.modal .jeu h3{font-size:calc(18px + 5 * (100vw - 320px) / 1080);}
	.modal .jeu .pochette{width:35%;}
	.modal .jeu h2 + div{padding-left:calc(35% + 25px);}

}
@media screen and (max-width:650px){
	
	#game{height:auto;margin-top:0;}
	#game .slick-track{display:flex;flex-wrap:wrap;width:100%!important;}
	#game .slick-list{width:calc(100% - 70px);}
	#game .slick-slide{margin-top:25px;padding:0 10px;text-align:center!important;height:auto;width:50%!important;}
	#game .infos p{display:none;}
	#game .pochette{max-width:100%;position:relative;display:block;margin:0 auto 10px;}
	#game .btn{top:-7px;left:0;}
	#game .title{font-size:15px;padding-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
	#game .plus{font-size:13px;margin-top:10px;}

}
@media screen and (max-width:500px){

	.modal .jeu{text-align:center;}
	.modal .jeu .pochette{position:relative;margin:25px auto 0;display:block;max-width:100%;width:230px;}
	.modal .jeu h2 + div{padding-left:0;}
	.modal .jeu [data-close]{width:50px;height:50px;line-height:50px;right:-10px;top:-10px;border-radius:15px;padding:5px 10px 0 0;}

}	
@media screen and (max-width:400px){

	/* #game .slick-slide{width:50%!important;} */
	
	.modal .jeu{text-align:center;}
	.modal .jeu .pochette{position:relative;margin:25px auto 0;display:block;max-width:100%;width:230px;}
	.modal .jeu h2 + div{padding-left:0;}
	.modal .jeu [data-close]{width:50px;height:50px;line-height:50px;right:-10px;top:-10px;border-radius:15px;padding:5px 10px 0 0;}
}