@charset "utf-8";

/* Style Tablette horizontale */
@media screen and (min-width: 992px) and (max-width: 1200px){

.tablette{
	display:block;
}
}

/* Style Mobile & Tablette verticale */
@media screen and (max-width: 991px){

html{
	font-size:100%;	/* Permet de gêrer les fonts en em */
	-webkit-text-size-adjust:none;	/* Containte taille de police automatique sur iphone et ipad au changement d'orientation */
}

body{
}
    
.fdBlanc{
    background-color:#fff;
}

.content{
	min-width:320px;
	box-shadow: 0 0 0 #999;
}

.mobile{
    
	display:block;
}

.web{
	display:none;
}

.bouton a{
	max-width:100%;
    padding:0 24px;
	font-size:14px;
	line-height:36px;
}
	
.bouton-left a, .bouton-right a{
	margin:10px 10px;
}

.bouton a br.mobile{
	display:inline-block;
}

label{
}

input[type=text], input[type=password], input[type=email], input[type=tel]{
}

select{
}

textarea{
}

input[type=checkbox]{
}

input[type=radio]{
}

#captcha{
}

::-webkit-input-placeholder{
}

:-moz-placeholder{ /* Firefox 18- */
}

::-moz-placeholder{  /* Firefox 19+ */
}

:-ms-input-placeholder{
}

.check_btn{
}

.check_label{
}


/* HEADER */

header{
    padding:11px 0;
}

#logo{
    width:80px;
}


/* CONTENU */

h1{
	font-size:20px;
}

.text1{
	font-size:14px;
}

#bravo{
    top:40%;
    left:0;
    width:100%;
    padding-top:75px;
    padding-bottom:75px;
	background-image:url("../img/m_bg_bravo.png");
	background-position:top center;
	background-repeat:no-repeat;
    background-size:100% 100%;
    -webkit-transform:none;
    -ms-transform:none;
    -moz-transform:none;
    -o-transform:none;
	transform:none;
}

#bravo_titre{
    width:180px;
}

#bravo_player{
    width:214px;
    height:41px;
    margin-top:16px;
    border:2px solid #7d69ac;
    border-radius:20px;
}

#bravo_player img{
    width:25px;
    height:25px;
    margin:0 5px;
}

#bravo_text{
    margin-top:15px;
    font-size:14px;
}

#bravo_fleche{
    width:25px;
    margin-top:4px;
    margin-bottom:18px;
}

#bravo_deploi{
    width:80%;
    max-height:440px;
    padding:0 5%;
    font-size:14px;
}


/* PAGE: Accueil */

#page_home{
    background:none;
}

#page_home #bl_contenu{
    padding-top:0;
    padding-bottom:0;
}

#page_home #m_bgtop{
    width:100%;
    height:auto;
}

#page_home h1{
    margin-top:27px;
}

#page_home #bl_histoire{
    width:90%;
    margin:0 auto;
    margin-top:30px;
    text-align:justify;
}

#page_home #visuel_perso{
    float:right;
    position:inherit;
    top:inherit;
    left:inherit;
    width:29%;
    max-width:100px;
    height:auto;
    margin-left:25px;
}

#page_home #page_home_text1{
    margin-top:34px;
    font-size:20px;
}

#page_home #bl_calendrier{
    height:auto;
    background:none;
}

#page_home #m_bg_calendrier{
    display:flex;
    width:100%;
    height:auto;
}

#page_home .jour_numero{
    border:4px solid #7d69ac;
    width:100% !important;
    height:auto !important;
    aspect-ratio: 1 !important;
}

#page_home .jour_calendrier .ombre{
    height:3px;
    margin-top:10px;
}

#page_home #jour_1{
    top:59%;
    left:7%;
    width:12%;
    margin-left:0;
}

#page_home #jour_1 .jour_numero{
    font-size:24px;
}

#page_home #jour_2{
    top:32%;
    right:11%;
    width:12%;
    margin-right:0;
}

#page_home #jour_2 .jour_numero{
    font-size:23px;
}

#page_home #jour_3{
    top:41%;
    right:19%;
    width:11%;
    margin-right:0;
}

#page_home #jour_3 .jour_numero{
    font-size:22px;
}

#page_home #jour_4{
    top:42%;
    left:30%;
    width:11%;
    margin-left:0;
}

#page_home #jour_4 .jour_numero{
    font-size:21px;
}

#page_home #jour_5{
    top:68%;
    left:16%;
    right:inherit;
    width:11%;
    margin-right:0;
}

#page_home #jour_5 .jour_numero{
    font-size:22px;
}

#page_home #jour_6{
    top:16%;
    right:15%;
    width:12%;
    margin-right:0;
}

#page_home #jour_6 .jour_numero{
    font-size:26px;
}

#page_home #jour_7{
    top:7.5%;
    left:13%;
    width:12.5%;
    margin-left:0;
}

#page_home #jour_7 .jour_numero{
    font-size:25px;
}

#page_home #jour_8{
    top:19%;
    left:6.5%;
    width:13%;
    margin-left:0;
}

#page_home #jour_8 .jour_numero{
    font-size:26px;
}

#page_home #jour_9{
    top:51%;
    right:9%;
    width:11%;
    margin-right:0;
}

#page_home #jour_9 .jour_numero{
    font-size:22px;
}

#page_home #jour_10{
    top:9%;
    right:34%;
    width:11.5%;
    margin-right:0;
}

#page_home #jour_10 .jour_numero{
    font-size:23px;
}

#page_home #jour_11{
    top:64.5%;
    left:35%;
    width:11%;
    margin-left:0;
}

#page_home #jour_11 .jour_numero{
    font-size:21px;
}

#page_home #jour_12{
    top:24%;
    right:40.5%;
    width:14.5%;
    margin-right:0;
}

#page_home #jour_12 .jour_numero{
    font-size:30px;
}

#page_home #jour_13{
    top:6%;
    right:9%;
    width:11%;
    margin-right:0;
}

#page_home #jour_13 .jour_numero{
    font-size:22px;
}

#page_home #jour_14{
    top:49.5%;
    left:10%;
    width:12.5%;
    margin-left:0;
}

#page_home #jour_14 .jour_numero{
    font-size:25px;
}

#page_home #jour_15{
    top:35%;
    right:41.5%;
    width:14.5%;
    margin-right:0;
}

#page_home #jour_15 .jour_numero{
    font-size:30px;
}

#page_home #jour_16{
    top:30.5%;
    left:17%;
    width:12.5%;
    margin-left:0;
}

#page_home #jour_16 .jour_numero{
    font-size:25px;
}

#page_home #jour_17{
    top:58.5%;
    right:17%;
    width:11%;
    margin-right:0;
}

#page_home #jour_17 .jour_numero{
    font-size:22px;
}

#page_home #jour_18{
    top:56%;
    left:32%;
    width:10.5%;
    margin-left:0;
}

#page_home #jour_18 .jour_numero{
    font-size:21px;
}

#page_home #jour_19{
    top:24.5%;
    right:10.5%;
    width:11.5%;
    margin-right:0;
}

#page_home #jour_19 .jour_numero{
    font-size:23px;
}

#page_home #jour_20{
    top:14.5%;
    left:36.5%;
    width:12%;
    margin-left:0;
}

#page_home #jour_20 .jour_numero{
    font-size:26px;
}

#page_home #jour_21{
    top:47.5%;
    left:48.5%;
    width:11.5%;
    margin-left:0;
}

#page_home #jour_21 .jour_numero{
    font-size:25px;
}

#page_home #jour_22{
    top:39%;
    left:5.5%;
    width:11%;
    margin-left:0;
}

#page_home #jour_22 .jour_numero{
    font-size:25px;
}

#page_home #jour_23{
    top:1%;
    left:45%;
    width:13%;
    margin-left:0;
}

#page_home #jour_23 .jour_numero{
    font-size:28px;
}

#page_home #jour_24{
    top:70%;
    right:31%;
    width:15.5%;
    margin-right:0;
}

#page_home #jour_24 .jour_numero{
    font-size:34px;
}


/* PAGE: Jeu cherche et trouve */

#page_cherchetrouve{
    background:none;
}

#page_cherchetrouve #bl_contenu{
    padding-top:0;
    padding-bottom:91px;
  background-image: url('../img/m_bottom_montagne.jpg');
  background-repeat: no-repeat;
    background-size: 100%;
  background-color:#7e69ac;
    background-position: bottom;
}

#page_cherchetrouve #m_bgtop{
    width:100%;
    height:auto;
}

#page_cherchetrouve #jour{
    width:54px;
    height:54px;
    margin-top:41px;
    border:4px solid #7d69ac;
}

#page_cherchetrouve #jour p{
    font-size:30px;
    line-height:46px;
}

#page_cherchetrouve #jour_ombre{
    width:74px;
    height:auto;
    margin-top:3px;
}

#page_cherchetrouve h1{
    margin-top:12px;
	font-size:16px;
}

#page_cherchetrouve #panneau_grange{
    position:relative;
    top:-114px;
    left:0;
    width:82px;
    margin-left:-200px;
}

#page_cherchetrouve #player{
    width:214px;
    height:41px;
    margin-top:-80px;
    border:2px solid #7d69ac;
    border-radius:20px;
}

#page_cherchetrouve #player img{
    width:25px;
    height:25px;
    margin:0 5px;
}

#page_cherchetrouve #bt_ancre{
    margin-top:27px;
}

#page_cherchetrouve #histoire{
    width:90%;
}

#page_cherchetrouve #histoire_titre{
    font-size:14px;
}

#page_cherchetrouve #histoire_fleche{
    width:25px;
    margin-top:4px;
    margin-bottom:0px;
}

#page_cherchetrouve #histoire_deploi{
    min-height:inherit;
}

#page_cherchetrouve #histoire_text{
    left:auto;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

#page_cherchetrouve #histoire_text p{
    font-size:14px;
}

#page_cherchetrouve #bl_cherchetrouve{
    position:relative;
    width:100%;
    height:auto;
    background-image: url('../img/m_bgjeu_cherchetrouve.jpg');
    background-repeat:no-repeat;
    background-size: 100%;
    background-color: #7d69ac;
}

#page_cherchetrouve #cherchetrouve{
    width: 100%;
    height: auto;
    margin-top: 20%;
    padding-bottom: 500px;
}

#page_cherchetrouve .cadre_violet{
    width: 100%;
  height:50px;
  background-color: #7d69ac;
}

#page_cherchetrouve #btn_retour{
    bottom:20px;
    width:93px;
    margin-left:-142px;
}

#page_cherchetrouve #btn_home{
    bottom:30px;
    width:98px;
    margin-right:-144px;
}
 #jeu_titre{
   display:none;

}

 #jeu_titre_mobile{
    
  font-size: 45px;
  width: 45%;
  text-align: center;
  margin-left: 12%;
  padding-top: 10%;
  min-height: 250px;
   display:flex;
align-items:center;

}
  #jeu_titre_mobile p{
  text-align: center;
  display: block;
  width: 100%;
  }
#jeu_titre_mobile img{
  
  width:100%;
  max-width:260px;
    
}  
  
/* PAGE: Jeu memory */



#demo_carte{
    width: 40%;
    max-width: 500px;
}


.carte{
    margin:6px 5px;
}


/* LIGHTBOX */

.lightbox_content{
	width:92%;
	max-width:450px;
	padding:4em 4% 2.5em 4%;
}

.lightbox_close{
	top:5px;
	right:5px;
}

.lightbox_titre{
	margin-bottom:15px;
	font-size:20px;
}

.lightbox_text{
	max-width:100%;
	font-size:18px;
}

.lightbox_content .bouton{
	margin-top:2em;
}

.lightbox_content .bouton a{
	max-width:100%;
}


/* FOOTER */

footer{
    min-height:inherit;
	padding:20px 0;
	overflow:hidden;
}

footer ul{
	float:left;
	width:92%;
    padding:0;
	margin:0 4%;
}

footer li a{
	float:left;
	width:100%;
	margin:0;
	line-height:20px;
}

#footer_copyright{
    float:left;
    margin-top:20px;
    margin-bottom:16px;
	font-size:14px;
}

#footer_mondelez{
    position:relative;
    top:auto;
    left:auto;
    display:block;
    margin:0 auto;
    width:83px;
}
}


@media screen and (min-width: 480px) and (max-width: 639px){
#page_home #jour_1 .jour_numero{
    font-size:34px;
}
#page_home #jour_2 .jour_numero{
    font-size:33px;
}
#page_home #jour_3 .jour_numero{
    font-size:32px;
}
#page_home #jour_4 .jour_numero{
    font-size:31px;
}
#page_home #jour_5 .jour_numero{
    font-size:32px;
}
#page_home #jour_6 .jour_numero{
    font-size:36px;
}
#page_home #jour_7 .jour_numero{
    font-size:35px;
}
#page_home #jour_8 .jour_numero{
    font-size:36px;
}
#page_home #jour_9 .jour_numero{
    font-size:32px;
}
#page_home #jour_10 .jour_numero{
    font-size:33px;
}
#page_home #jour_11 .jour_numero{
    font-size:31px;
}
#page_home #jour_12 .jour_numero{
    font-size:40px;
}
#page_home #jour_13 .jour_numero{
    font-size:32px;
}
#page_home #jour_14 .jour_numero{
    font-size:35px;
}
#page_home #jour_15 .jour_numero{
    font-size:40px;
}
#page_home #jour_16 .jour_numero{
    font-size:35px;
}
#page_home #jour_17 .jour_numero{
    font-size:32px;
}
#page_home #jour_18 .jour_numero{
    font-size:31px;
}
#page_home #jour_19 .jour_numero{
    font-size:33px;
}
#page_home #jour_20 .jour_numero{
    font-size:36px;
}
#page_home #jour_21 .jour_numero{
    font-size:35px;
}
#page_home #jour_22 .jour_numero{
    font-size:35px;
}
#page_home #jour_23 .jour_numero{
    font-size:38px;
}
#page_home #jour_24 .jour_numero{
    font-size:44px;
}
}
    
@media screen and (min-width: 640px) and (max-width: 991px){
#page_home .jour_numero{
    border:5px solid #7d69ac;
}
#page_home #jour_1 .jour_numero{
    font-size:46px;
}
#page_home #jour_2 .jour_numero{
    font-size:45px;
}
#page_home #jour_3 .jour_numero{
    font-size:44px;
}
#page_home #jour_4 .jour_numero{
    font-size:43px;
}
#page_home #jour_5 .jour_numero{
    font-size:44px;
}
#page_home #jour_6 .jour_numero{
    font-size:48px;
}
#page_home #jour_7 .jour_numero{
    font-size:47px;
}
#page_home #jour_8 .jour_numero{
    font-size:48px;
}
#page_home #jour_9 .jour_numero{
    font-size:44px;
}
#page_home #jour_10 .jour_numero{
    font-size:45px;
}
#page_home #jour_11 .jour_numero{
    font-size:43px;
}
#page_home #jour_12 .jour_numero{
    font-size:52px;
}
#page_home #jour_13 .jour_numero{
    font-size:44px;
}
#page_home #jour_14 .jour_numero{
    font-size:47px;
}
#page_home #jour_15 .jour_numero{
    font-size:52px;
}
#page_home #jour_16 .jour_numero{
    font-size:47px;
}
#page_home #jour_17 .jour_numero{
    font-size:44px;
}
#page_home #jour_18 .jour_numero{
    font-size:43px;
}
#page_home #jour_19 .jour_numero{
    font-size:45px;
}
#page_home #jour_20 .jour_numero{
    font-size:48px;
}
#page_home #jour_21 .jour_numero{
    font-size:47px;
}
#page_home #jour_22 .jour_numero{
    font-size:47px;
}
#page_home #jour_23 .jour_numero{
    font-size:50px;
}
#page_home #jour_24 .jour_numero{
    font-size:56px;
}
}

@media screen and (max-width: 850px){
#jeu_titre_mobile{   
    font-size: 32px;  
}
#page_cherchetrouve #cherchetrouve{
    padding-bottom: 450px;
    margin-top: 19%;
}
#page_cherchetrouve #bravo_deploi{
    width:70%;
    max-height:300px;
} 
}

@media screen and (max-width: 640px){
#jeu_titre_mobile{   
    font-size: 23px;
}
#page_cherchetrouve #cherchetrouve{
    padding-bottom: 420px;
    margin-top: 15%;
}
#page_cherchetrouve #bravo_deploi{
    width:76%;
    max-height:240px;
}
}

@media screen and (max-width: 451px){
#jeu_titre_mobile{   
    font-size: 20px;  
}
#page_cherchetrouve #cherchetrouve{
    padding-bottom: 280px;
}
#page_cherchetrouve #bravo_deploi{
    width:80%;
    max-height:100px;
}
}