/*
 * @autor : dynamic creative
 * @date : 2017
 */

/* ---------------------------- */
/*	   Mise en page générale	*/
/* ---------------------------- */
.container { margin: 0 auto; position: relative; width: 980px; padding-left: 10px; padding-right: 10px; }
section { position:relative; }
.row { margin-left: -10px;  margin-right: -10px; }
.wrap { position:relative; width:100%; }

#global {
  width: 1px;
  min-width: 100%;
  *width: 100%;
}

.flight {font-family: 'martinli', sans-serif;}
.fbold {font-family: 'martinbold', sans-serif;}
.txt-underline {text-decoration: underline;}

/* BANDEAU COOKIES */
#cookie-banner {font-family:Arial; position: fixed;bottom: 0;left: 0;right: 0;z-index: 9999;min-height: 40px;background-color: #efe5d9;padding: 10px 30px 10px 10px;line-height: 20px;font-size: 12px;}
#cookie-banner > button {position: absolute;right:5px; top:4px; background: none; border:0; color: #6a533d; font-size:20px;}
#cookie-banner a {text-decoration: underline;}

/*HEADER*/
header .container > div {background:#8e9626;}
header img {margin:10px;}
header {margin-bottom:10px;}


/*FOOTER*/
footer {position:relative; padding: 20px 0; font-family:'Open Sans', sans-serif; z-index: 9998;}
footer a {font-size: 13px; display:block;}
footer .right a {font-size: 10px; vertical-align: middle;}
footer .right a img {padding-left:5px;}
#jeux.mobile footer {display:none}

#jeux footer .right {font-size:13px;}

/*HOME*/
#home #content > .container {overflow: hidden;}
.owl-carousel .item .min {display:none;}
.owl-dots {position: absolute; bottom:0; left:0; width:100%; text-align:center;}
.owl-carousel .owl-dot { display:inline-block; padding:0 5px;}
.owl-carousel .owl-dot span {width:20px; height:20px; background: #e3b46a; display:block; border-radius:20px;}
.owl-carousel .owl-dot.active span {background: transparent; border:3px solid #e3b46a;}

.bloc-ins {background:#f0f2f3 url(../img/bg-ins.png) bottom center no-repeat; min-height:320px; padding-top:20px;}
.bloc-ins > .fl > div {width:50%;}
.bloc-ins .txt p:first-child {margin-bottom:30px;}

.bloc-ins form {max-width:280px; margin:0 auto; position: relative; z-index: 2;}
.bloc-ins form h2 {text-transform: uppercase; font-size:24px; margin-bottom:20px;}
form .bt_1 span.t14 { display: block; line-height: 1.1; }
form .no { font-size: 14px; padding: 15px 0; }

/*JEUX*/
#preloader {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; z-index: 99;}
#status {position:absolute; top:50%; left:50%; margin:-25px 0 0 -25px; width:50px; height:50px; background:#c12026; border-radius: 50px; padding:5px;}
#status img {-webkit-animation:spin 3s linear infinite;
    -moz-animation:spin 3s linear infinite;
    animation:spin 3s linear infinite;}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

#blocjeux {opacity: 0;}
.game {position:relative; /*z-index: 2;*/ width:480px; height:700px; margin:0 auto; overflow: hidden;}
.game .titre {font-weight:normal; line-height: 1.1; padding-top:20px;}
#jeux section .container > .ct {background:#f2f2f5 url(../img/fd-jeux.jpg) top center no-repeat;}
#maison1 {width:41%; height:auto; position:absolute; top:50.42%; left:5.42%;}
.ie #maison1 {height:33.93%}
#maison2 {width:35%; height:auto; position:absolute; top:33%; left:59.38%;}
.ie #maison2 {height:29.86%}
#maison3 {width:31.67%; height:auto; position:absolute; top:16.43%; left:4.17%;}
.ie #maison3 {height:28.43%}
.colline1, .colline2, .colline3 {pointer-events: none; width:100%; height:auto; position:absolute; top:0; left:0;}
#chemin1 {width:42.5%; height:auto; position:absolute; top:60%; left:42.7%;}
.ie #chemin1 {height:17.29%}
#chemin2 {width:40.62%; height:auto; position:absolute; top:40.29%; left:23.54%;}
.ie #chemin2 {height:14.14%}
#chemin0 {width:43.96%; height:auto; position:absolute; top:82.43%; left:18.13%;}
.ie #chemin0 {height:16.29%}

.gfull {position: absolute;top: 0;left: 10px; background:url(../img/collines.png) center top no-repeat; width:960px; height:700px;}

.maison.active {cursor: pointer;}
.maison .under {opacity:0; /*transition:all 350ms ease;*/}
.maison.active .under/*, .maison.ok .under*/ {opacity:1;}
.maison.active .under {
    animation-name: bip;
    animation-duration: 1.5s;
    animation-iteration-count: infinite; 
    animation-direction: alternate;
}

@keyframes bip {
    from {/*fill:#9e1116;*/opacity:0;}
    to {/*fill:#fff;*/opacity:1;}
}

.maison.active .front {
    /*-webkit-filter: drop-shadow( 0px 0px 5px rgba(0,0,0,0.5) ); 
            filter: drop-shadow( 0px 0px 5px rgba(0,0,0,0.5) );*/
}
/*.noie .maison.active .frontpath {
  -webkit-filter:url(#shadow);
  filter:url(#shadow);
}*/

#maison1.active .under {
  -webkit-filter:url(#myshadow);
  filter:url(#myshadow);
}
#maison2.active .under {
  -webkit-filter:url(#myshadow2);
  filter:url(#myshadow2);
}
#maison3.active .under {
  -webkit-filter:url(#myshadow3);
  filter:url(#myshadow3);
}

/*animation*/
.loading {opacity:0;}
.loaded .loading {opacity:1;}
#snow {position:absolute; /*z-index:10;*/ top: 0;left: 10px; width:960px; height:700px; overflow: hidden; pointer-events: none;}
#home #snow {z-index:10;}
#snow .flocon {display:block;}

.dot{
  width:35px;
  height:35px;
  position:absolute;
  background-size: 100% 100%;
}
#home .dot {top:0; left:0; z-index:2;}
.flocon {display:none;}

/*popin*/
.planche {width:480px; margin:0 auto; padding:0 60px;}
.planche .item {width:50%; padding-bottom:5px;padding-top:4px;}
.planche .item.lastline {padding-bottom:15px;}
#popup1 {background:#f7e59d url(../img/etape1/fd-planche.png) center top no-repeat;}
#popup1 .planche {background:url(../img/etape1/planche.png) center top no-repeat; }
#popup2 {color:#fff; background:#d45752 url(../img/etape2/fd-planche.png) center top no-repeat;}
#popup2 .planche {background:url(../img/etape2/planche.png) center top no-repeat; }
#popup3 {background:#edeef2 url(../img/etape3/fd-planche.png) center top no-repeat;}
#popup3 .planche {background:url(../img/etape3/planche.png) center top no-repeat; }

.planche .item.ticket {padding-top:10px;}
.scratchpad {width:160px; height:90px; margin:0 auto;}
.scratchpad canvas {left:0; top:0;}
.white-popup .ast {font-size:12px; margin-top:5px;}
.white-popup .btfin, .white-popup .ast {display: none;}
.white-popup .bas {padding:20px 0 0; min-height:85px;}
.white-popup h2 {padding-bottom:10px;}
.white-popup .bas .txt {padding-bottom: 10px;}
.white-popup .bas .txt, .white-popup h2 {line-height: 1.1;}
.white-popup.on .bas .txt {display:none;}
.white-popup.on .btfin, /*.mobile */.white-popup.on .ast {display: block;}
#bggrat {top:0; left:0;}

/*popin fin*/
#popup4 {padding:20px 40px 40px; background:#f0f2f3;}
#popup4 > .top > div { line-height: 1.1; background: #fff; padding:20px 0; }
#popup4 > .top > div:first-child { }
#popup4 .offre {padding:0 20px;}
#popup4 h2.merci {padding:0 10px 30px; line-height: 1;}
#popup4 h2.merci span {display:block;}
#popup4 h2.discover {padding:20px 10px;}
#popup4 .ml {display:none; padding-top:10px;}
.mobile #popup4 .ml {display:block;}
.mobile #popup4.white-popup {padding:20px 0 10px;}
.bloc-av {width:70%;}
.bloc-av > .fl {position: relative;}
.bloc-av > .fl > div {width:50%;}
.bloc-av > .fl > div.ou {position:absolute; width: 40px;left: calc(50% - 20px);}
.bloc-fb {width:27%;}
.bloc-fb > p {padding-top:30px;}

.owl-carousel {overflow: hidden;}

/*plugin*/
/* overlay at start */
.mfp-fade.mfp-bg {
  opacity: 0;

  -webkit-transition: all 0.35s ease-out;
  -moz-transition: all 0.35s ease-out;
  transition: all 0.35s ease-out;
}
/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}
/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;

  -webkit-transition: all 0.35s ease-out;
  -moz-transition: all 0.35s ease-out;
  transition: all 0.35s ease-out;
}
/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}
.mfp-wrap.mfp-ready {top:0!important;}
.mfp-bg.mfp-ready {display:none;}
.mfp-container {padding:0;}
.mfp-content {vertical-align: top; margin-top:70px;}
button.mfp-close {/*display:none;*/}
.white-popup { position: relative; background: #FFF; padding: 20px; width: auto; max-width: 720px; margin: 0 auto; border:10px solid #fff; 
-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
-o-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);}
.mfp-bg {background: transparent;}


/**************/
/*BOUTON*/
.bouton { text-align: center; position: relative; background: #7c171c; width: 100%; color: #fff; font-size: 14px; font-weight: normal; }
a.bouton { color:#fff; display:inline-block; }
.bt_1 {position: relative; padding: 10px 10px 13px; line-height: 1.1; }
.bt_2 {padding: 14px 10px; line-height: 1.1; font-size:20px; width:240px; }

.bouton:hover { opacity:0.9; }

/*FLEX*/
.fl {display: -ms-flexbox; display: -webkit-flex; display:flex;}
.fl-col {-ms-flex-direction: column; webkit-flex-direction: column; flex-direction:column;}
.fl-wrap {-ms-flex-wrap:wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.fl-one {-ms-flex: 1; -webkit-flex: 1; flex:1;}
.fl-jc-c {-ms-flex-pack:center; -webkit-justify-content:center; justify-content:center;}
.fl-jc-e {-ms-flex-pack:end; -webkit-justify-content:flex-end; justify-content:flex-end;}
.fl-jc-sb {-ms-flex-pack:justify; -webkit-justify-content:space-between; justify-content:space-between;}
.fl-jc-sa {-ms-flex-pack:distribute; -webkit-justify-content:space-around; justify-content:space-around;}
.fl-ac-c {-ms-flex-line-pack:center; -webkit-align-content: center; align-content: center;}
.fl-ai-c {-ms-flex-align:center; -webkit-align-items: center; align-items: center;}
.bottom {margin-top:auto;}
.fl-ai-e {-ms-flex-align:flex-end; -webkit-align-items:flex-end; align-items:flex-end;}


/* COMMUN */
.m1 { margin:10px 0; }
.m2 { margin:20px 0; }
.m3 { margin:40px 0; }
.m4 { margin-bottom: 20px; }
.m5 { margin: 10px 0 20px; }
.m6 { margin:30px 0; }

.t10 { font-size:10px; }
.t11 { font-size:11px; }
.t12 { font-size:12px; }
.t15 { font-size:15px; }
.t16 { font-size:16px; }
.t18 { font-size:18px; }
.t20 { font-size:20px; }
.t22 { font-size:22px; }
.t24 { font-size:24px; }
.t25 { font-size:25px; }
.t30 { font-size:30px; }
.t34 { font-size:34px; }


.semi { font-weight:600; }

.c_rge { color:#a64148; }
.c_gri { color:#4d4d4f; }
.c_org { color:#ebad19; }
.c_blu { color:#376988; }

a.c_rge:visited { color:#e86743; }
a.c_rge:hover { text-decoration:underline; }

.grid_66, .grid_33, .grid_75, .grid_25, .grid_50 { position: relative; display: inline; float: left; }
.grid_50 { width:50%; }
.grid_66 { width:66.666666%; }
.grid_33 { width:33.333333%; }
.grid_75 { width:75%; }
.grid_25 { width:25%; }



.tab_100 { display:table; width:100%; }
.tab { display:table; }
.cell_1, .cell_2, .cell_3, .cell_4, .cell_5, .cell_50 { display:table-cell; vertical-align:top; }
.cell_1 { width:120px; }
.cell_50 { width:50%; }


.cell_mid { vertical-align:middle; }
.cell_bot { vertical-align:bottom; }

h1, h2, h3, h4 {  }
.titre_1 { color:#fff; font-size:60px; font-weight:300; line-height:.8; }


/* ---------------------------- */
/*	    Element Formulaire  	*/
/* ---------------------------- */
input[type], select, textarea {
  position:relative; font-size: 16px; width:100%; height:50px; margin-bottom:20px; border: 1px solid #bab2ab; background:#fff; /*border-radius:3px;*/ padding: 6px 5px;
  color:#6a533d; font-weight: normal; font-family: 'martinli', sans-serif; -webkit-appearance:none; -webkit-text-size-adjust: 100%;
}
textarea { height:auto; } 

button { border:none; cursor:pointer; margin:0; }
button:hover, button:focus, button:active { /*opacity:0.9;*/ }

.form-control { display:block; }
.form-group { position:relative; }

.form-inline {margin-left:-10px;margin-right:-10px;}
.form-inline .form-group { position:relative; float:left; padding:0 10px; }

.col-50, .col-66, .col-33, .col-75, .col-25, .col-40, .col-20, .col-30, .col-80 { position:relative; float: left; }
.col-50 { width:50%; }
.col-75 { width:75%; }
.col-25 { width:25%; }
.col-66 { width:66.66666666%; }
.col-33 { width:33.33333333%; }
.col-40 { width:40%; }
.col-20 { width:20%; }
.col-30 { width:30%; }
.col-80 { width:80%; }

.ast { position:relative; margin-top:10px; font-size:11px; text-align:center; }

.form-control-icon {position: relative;}
.form-control-icon input, .form-control-icon select {padding-left:50px;}
.form-control-icon > span.icon-mail {position: absolute; top:15px; left:14px; font-size:20px; color:#bab2ab; z-index:2; display: block; text-align: center; pointer-events: none;}
.icon-right {right:0;}

.radio-inline .form-group {display: inline-block; margin-bottom: 20px;}
.radio-inline label {padding-right:10px;}

/*select { -moz-appearance: none; appearance: none; }
.inner-addon {position: relative;}
.inner-addon.select:after {position:absolute; right: 12px; top: 13px; pointer-events: none;}
.inner-addon span {position:absolute; right: 12px; top: 13px; pointer-events: none; color:#bbbbbb;}*/

/*ERROR*/
#errors { margin-top:10px; text-align:center; color:red; }

#error-message h2 { font-size: 26px; font-weight: normal; text-transform:uppercase; }
input.error, select.error { border: 1px solid red;}
label.error,
#form_home label.error,
#form_mobile label.error { display: none !important;}
input.error[type="radio"] {box-shadow: 0 0 5px #ff0000;}
/**********/

/*radio*/
.radio.titre { position: absolute;top:-15px;left:20px;padding-left: 10px;padding-right: 15px; background: #FFF;}
.radio.titre label {color: #A50034;font-size: 20px;padding-left:0px;}
.radio.titre [type="radio"]:not(:checked) + label,
.radio.titre [type="radio"]:checked + label {
  padding-left: 30px; padding-top:0px;   
}

[type="radio"]:not(:checked),
[type="radio"]:checked {
  position: absolute;
  left: -9999px;
}
[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
  position: relative; padding-left: 25px; padding-top:2px; cursor: pointer; display:inline-block;   
}
/* Aspect des checkboxes */
[type="radio"]:not(:checked) + label:before,
[type="radio"]:checked + label:before {
  content: '';
  position: absolute;
  left:0; top: 2px;
  width: 20px; height: 20px;
  border: 1px solid #c7c9c7;
  background: #fff;
  border-radius: 10px; 
}
 
/* Aspect général de la coche */
[type="radio"]:not(:checked) + label:after,
[type="radio"]:checked + label:after {
  content: '';
  position: absolute;
  top: 7px; left: 5px;
  color: #09ad7e;
  background: #595959; width: 10px; height: 10px;border-radius: 7px;
  transition: all .2s; /* on prévoit une animation */
}
/* Aspect si "pas cochée" */
[type="radio"]:not(:checked) + label:after {
  opacity: 0; /* coche invisible */
  transform: scale(0); /* mise à l'échelle à 0 */
}
/* Aspect si "cochée" */
[type="radio"]:checked + label:after {
  opacity: 1; /* coche opaque */
  transform: scale(1); /* mise à l'échelle 1:1 */
}

/*checkbox*/
/* Cachons la case à cocher */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}
 
/* on prépare le label */
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative; 
  padding-left: 25px; 
  cursor: pointer;    /
}

/* Aspect des checkboxes */
/* :before sert à créer la case à cocher */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left:0; top: 2px;
  width: 20px; height: 20px;
  border: 1px solid #c7c9c7;
  background: #f8f8f8;
  border-radius: 3px; 
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3) /* légère ombre interne */
}
 
/* Aspect général de la coche */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: '✔';
  position: absolute;
  top: 2px; left: 4px;
  font-size: 16px;
  color: #09ad7e;
  transition: all .2s;
}
/* Aspect si "pas cochée" */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0; 
  transform: scale(0); 
}
/* Aspect si "cochée" */
[type="checkbox"]:checked + label:after {
  opacity: 1; 
  transform: scale(1); 
}
/* aspect désactivée */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
/* styles de la coche (si cochée/désactivée) */
[type="checkbox"]:disabled:checked + label:after {
  color: #999;
}
/* on style aussi le label quand désactivé */
[type="checkbox"]:disabled + label {
  color: #aaa;
}
 
/* aspect au focus de l'élément */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
  border: 1px dotted blue;
}


/*******************/
/*DATEPICKER*/
.ui-datepicker {color: #6f6660; font-family:Arial, sans-serif; padding:0;box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);max-width:320px; margin-top: 8px;}
.ui-datepicker.ui-corner-all, .ui-datepicker .ui-corner-all {border:none;border-radius:0;}
.ui-datepicker .ui-datepicker-header { padding: 10px 0; }
.ui-datepicker .ui-widget-header {border:none;background:none;color: #6f6660;font-size:14px;}
.ui-datepicker .ui-widget-header .ui-icon {/*background-image: url(../img/global--sprite.png);*/}
.ui-datepicker .ui-icon-circle-triangle-w {/*background-position: -87px -373px;*/}
.ui-datepicker .ui-icon-circle-triangle-e {/*background-position: -99px -373px;*/}
.ui-datepicker .ui-icon-circle-triangle-w.ui-icon, .ui-datepicker .ui-icon-circle-triangle-e.ui-icon {/*width:7px; height:7px;*/}
.ui-datepicker .ui-datepicker-prev {left:10px;}
.ui-datepicker .ui-datepicker-next {right:10px;}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {/*background:#F5F4F1;*/ width:27px; height:27px; top:10px;}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {/*margin-left: -3px;margin-top: -4px;*/}
.ui-datepicker .ui-state-hover {border:0; background:none;}
/*.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover {top:10px; background:#333333;}
.ui-datepicker .ui-datepicker-prev-hover .ui-icon-circle-triangle-w {background-position: -267px -373px;}
.ui-datepicker .ui-datepicker-next-hover .ui-icon-circle-triangle-e {background-position: -279px -373px;}
.ui-datepicker th {font-weight: normal;}*/
.ui-datepicker .ui-state-default, .ui-datepicker .ui-widget-content .ui-state-default, .ui-datepicker .ui-widget-header .ui-state-default {padding: 5px 0; line-height: 1; border: 1px solid #d6d3cc; background-color: white; background-image:none; color:#6f6660; }
.ui-datepicker td span, .ui-datepicker td a {text-align: center; position:relative;}
.ui-datepicker td .ui-state-hover, .ui-datepicker td .ui-state-active {border-color: #6f6660;color: #333;border-width: 2px; padding-top:4px; padding-bottom:4px;}
.ui-datepicker .ui-state-highlight, .ui-datepicker .ui-widget-content .ui-state-highlight { border-color: #d6d3cc; color:#6f6660;}
.ui-datepicker .ui-state-highlight::after { display: block; content: ''; position: absolute; right: 2px; top: 2px; border: 3px solid; border-color: #BE1902 #BE1902 transparent transparent; height:5px;}
.ui-datepicker td .ui-state-active { border-color: #BE1902; color: #BE1902; font-weight: bold; }
.ui-datepicker-calendar {background-color: #f5f4f1;}
.ui-datepicker table {margin:0;padding:0 5px 10px; border-collapse:inherit;}
.ui-datepicker::before {display: block; content: ''; position: absolute; left: 50%;
top: -16px; margin-left: -8px; border: 8px solid transparent; border-color: transparent transparent white transparent;}
.cal {position: relative;}

.ui-dialog {
  max-width: 95%;
}