@import url('https://fonts.googleapis.com/css?family=Roboto');

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

*{
	--primary-color: #E24830;
	--dark-primary-color: #b5301b;
	--secondary-color: #4D4D4D;
	--main-font: 'museo-sans';
	--second-font: 'quicksand';
}

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
p{font-family: var(--main-font);}
sup {vertical-align: super;font-size: smaller;text-transform: none;}
b, strong{font-weight:bold;}
i{font-style:italic;}
.tac{text-align: center;}
.tal{text-align: left;}
.tar{text-align: right;}
.dt{display:table;width:100%;}
.dtr{display:table-row;}
.dtc{display:table-cell;}
.dib{display:inline-block;}
.vam{vertical-align: middle;}
.vat{vertical-align: top;}
.vab{vertical-align: bottom;}
.pr {position:relative;}
.mb-small{margin-bottom:0.5rem;}
.nw{white-space: nowrap;}

.display_mobile {display:none;}
.overlay{visibility: hidden;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #000;opacity: 0;transition: 0.5s all ease;z-index: 10;}
.overlay.active{visibility: visible;opacity: 0.2;}
.custom_btn {display:inline-block;border-radius:30px;margin:0.4em;color:#25345f; transition: 0.5s all ease;font-family: 'quicksand';}
.custom_btn.left {border-radius:0 30px 30px 0;margin:0.4em 0;}
.custom_btn.left:hover a {margin-left: 1.5rem;}
.custom_btn.right:hover a {padding: 0.8rem 6.5rem 0.8rem 2rem;}
.custom_btn.left a {padding: 0.8rem 2rem 0.8rem 5rem;}
.custom_btn.right a {padding: 0.8rem 5rem 0.8rem 2rem;}
/*.custom_btn.bleu.left,.custom_btn.bleu.left a{width: 100%;transition: 0.5s all ease;}*/
/*.custom_btn.bleu.left:hover,.custom_btn.bleu.left:hover a{width: 110%;}*/

.titre_popup{font-size: 3.5em;text-align: center;padding: 0 15px 20px;line-height: 1.2em;color: var(--primary-color);font-family: var(--second-font);font-weight: bold;}
.content_popup{box-sizing:border-box;padding:0 15px 20px;text-align: center;line-height: 1.4;}
.main_popup .custom_btn a{padding: 0.4rem 1.5rem ;white-space: nowrap;}

#text_header_droite .custom_btn.right{background-color: var(--primary-color);}
.custom_btn.right {border-radius:30px 0 0 30px;margin:0.4em 0;}
.custom_btn.right:hover; {margin-right: 10px;}
.custom_btn a {display:inline-block;padding:0.7rem 3rem;color:#25345f;text-align: center;text-decoration: none;line-height: 1;transition: 0.5s all ease;}
.contenu_texte_header .custom_btn{font-size: 1.5rem;z-index: 2;position: relative;}
#text_header_gauche .custom_btn{box-shadow: 0px 0px 12px 0px #000;}
.custom_btn.jaune {border: 3px solid var(--primary-color);background-color:var(--primary-color);font-weight:bold;}
.custom_btn.jaune:not(.right):hover {background-color:var(--dark-primary-color);border-color: var(--dark-primary-color);}
.custom_btn.jaune a {color:#fff;}
.custom_btn.reverse {border: 3px solid var(--primary-color);font-weight:bold;z-index: 11;}
.custom_btn.reverse:hover {background: var(--primary-color);}
.custom_btn.reverse a {color:var(--primary-color);padding-top: 8px;}
.custom_btn.reverse:hover a{color:#fff;}

.custom_btn.bleu {border: 3px solid var(--secondary-color);background-color:var(--secondary-color);font-weight:bold;}
.custom_btn.bleu a {color:white;}

.color_calendar{color:#ff525a;}

html, body {width: 100%;min-height: 100%;font-family:'Roboto', 'Arial', sans-serif;font-size:16px;line-height:1.5em;height:100%;}
body {position: relative;line-height:1.2em;overflow:hidden ;}
body *{box-sizing:border-box;}

/*.neige {background:url('../img/neige.gif');position:absolute;left:0;top:0;bottom:0;right:0;opacity: 0.4;}*/
#middle_content {filter: blur(0px);position: fixed;width: 100%;height: 100%;overflow: auto;background:url('../img/elements/bkg.svg') no-repeat  center center white fixed;background-size:cover;overflow-x: hidden;transition: 0.5s all ease;}
#middle_content.blured{filter: blur(5px);}
#header {margin:0 auto;position:relative;padding:1em 0;}
#header #logo_calendrier{position:absolute;width:450px;height:450px;top:-190px;left:0;right:0;margin:auto;}
#header #logo_calendrier img{width:100%;position: absolute;height:175px;bottom:70px;z-index: 2;filter: drop-shadow(2px 4px 6px #484848);}
#header.gagnants{height: 26%;}
#header.gagnants #logo_calendrier img{width:100%;position: absolute;height: 200px;bottom:0;z-index: 2;filter: drop-shadow(2px 4px 6px #484848);}
#header #text_header{width:100%;color:black;}
#header #text_header .custom_btn a{text-align: left;}
#header #text_header .contenu_texte_header {max-width:450px;font-size:18px;display:inline-block;line-height: 1.5em;}
#header #text_header #text_header_droite .contenu_texte_header {font-weight: bold;letter-spacing: 0.5px;line-height:1.3em;}
#header #text_header #text_header_droite .contenu_texte_header .indication{font-size:0.7em;margin-top:0.5em;}
#header.mobile{display: none;}
#header.mobile .inputs{display: flex;justify-content: space-between;align-items: center;width: 100%;gap: 20px;}
#header.mobile #text_header{width: fit-content;}


.maison{position: absolute;bottom: 5%;z-index: 1;width: 96%;margin: auto;left: 0;right: 0;
	/*min-width: 1105px;*/
}
.maison.pc{max-width: 60vw;}
.maison.mobile{display: none;}
.maison.mobile .cases-maison{display: grid;grid-template-columns: 1fr 1fr 1fr;}
.maison.mobile .sapin{position: absolute; bottom: 0;right: -5%;z-index: 3;width: 35%}
.sapin.gagnants{display: none;position: absolute; bottom: 0;z-index: 1;}
.sapin.gagnants.left{left: -42%;width: 80%;}
.sapin.gagnants.right{right: -30%;width: 60%;}
.maison .fumee{width: 25%;position: absolute;top: -13%;right: -8%;opacity: 0.5;}
.maison.mobile .fumee{width: 44%;top: -4.25%;right: -20%;opacity: 0.5;}
.maison .maison-pc{width: 100%;}
.maison .porte{width: 18%;position: absolute;bottom: -6%;right: 0;left: -4%;margin: auto;}
.maison .porte.toOpen{display: none;z-index: 2;}
.maison .cases-toit{position: absolute;top: 3%;left: 9%;height: 27%;align-items: center;margin: auto;width: 65%;display: flex;justify-content: space-between;}
/*.maison .cases-toit div {max-width: 13%;}*/
.maison .cases-toit div img{width: 100%;}
.herbe{z-index: 2;position: absolute;bottom: 0;max-width: 100%;left: 0;right: 0;margin: auto;}
.herbe img{width: 95%;}
.maison .cases-maison {position: absolute;top: 34%;left: 1.5%;height: 55%;margin: auto;width: 97%;padding: 0 3%;}
.maison .cases-maison .row{display: flex;justify-content: space-between;margin-bottom: 2%;}
.maison .case.current{cursor:pointer;}
.maison .case .statut{text-align: center;}
.maison .case .front{margin-bottom: 5px;}
.maison .case.current.opened:not(.porte){position: relative;}
.maison .case.opened-porte{position: absolute;width: 19%;left: -5%;z-index: 2;}



.maison .case .toOpen,.maison .case.opened-window .window{position: absolute;top: -10%;left: -31%;width: 162%;z-index: 2;}

.maison .case.current.opened .toOpen,.maison .case.current.opened-window .window{display: block;}
.maison .case.current.opened .closed{opacity: 0;}
.maison .case.current .closed{opacity: 1;z-index: 2;position: relative;}
/*.maison .case.current.opened{opacity: 0;}*/
.maison .case.current .toOpen{display: none;}

.maison .case.current .ombre,.maison .case.future .ombre{position: absolute;top: 0;left: 1%;z-index: 1;width: 97%;}
.maison .case.future .closed{z-index: 2;position: relative;}
.maison .case.opened-window .ombre{position: relative;top: inherit;left: inherit;z-index: 1;width: 95px;}


/*.maison .case.current.opened .back img:not(.toOpen){position: absolute;top: 0;left: 0;}*/
.maison .cases-toit .case.current.opened .chiffre .front,.maison .cases-toit .case.current.opened-window .chiffre .front{color: #C1CBCC;}
.maison .cases-maison .case.current.opened .chiffre .front,.maison .cases-maison .case.current.opened-window .chiffre .front{color: #905736;}
.maison .cases-toit .case .chiffre{transition: 0.5s all ease;color: #000;font-family: 'quicksand';font-weight: bold; font-size: 1.6rem;}
.maison .cases-maison .case .chiffre {transition: 0.5s all ease;color: #fff;font-family: 'quicksand';font-weight: bold; font-size: 1.6rem;}
.maison .cases-maison .chiffre .rate{color: #905736;}
.maison .cases-toit .chiffre .rate{color: #C1CBCC;}
.porte_text{font-family: 'quicksand';}

#site-logo{padding: 30px;}
#site-logo img{max-width: 199px;position: relative;z-index: 2;filter: drop-shadow(2px 4px 6px black);}
#header #site-logo img{width: 100%;}
#info_popup{display:none;width: 50vw;padding: 50px 20px;overflow-x: hidden;}
.popup_logo{width: 20%;margin-bottom: 1.5rem;}

.indication{font-style: italic;}


#cases_calendrier {width:100%;max-width:700px;margin:0 auto;table-layout: fixed;}
#cases_calendrier .case {padding: 0.5em;}
#cases_calendrier .case .statut {position:absolute;top:0;bottom:0;left: 0;right: 0;display:inline-block;height:18px;margin:auto;color:#888888;font-size:1.2em;font-family:Arial;font-weight:bold;}
#cases_calendrier .case .statut_gain {position: absolute;display: inline-block;background-color: #3d5951;border: 2px solid white;color: white;font-size: 0.9em;padding: 5px 3px;border-radius: 20px;right: 0;top: 0;}
#cases_calendrier .case[data-day="24"] .chiffre{max-width: 140px;}
#cases_calendrier .case[data-day="24"] img {width:140px;}

#footer img {    vertical-align: bottom;}

.bkg-white {    background-color: white;    border-radius: 100px;padding: 2rem 3rem;box-shadow: 0.7px 0.7px 1.7px rgb(0 0 0 / 1%), 1.7px 1.7px 4px rgb(0 0 0 / 1%), 3.1px 3.1px 7.5px rgb(0 0 0 / 2%), 5.6px 5.6px 13.4px rgb(0 0 0 / 2%), 10.4px 10.4px 25.1px rgb(0 0 0 / 2%), 25px 25px 60px rgb(0 0 0 / 3%);position:relative;z-index:2;}

.nuage.gauche {position: absolute;width: 50%;right: -28%;bottom: -45%;z-index:3;}
.nuage.droite {position: absolute;width: 12%;right: 21%;top: -7%;z-index: 1;}
/*.main_popup{padding: 50px 0;}*/
.main_popup{padding: 50px;}
.main_popup .anecdote{max-width:350px;font-size: 0.9rem;padding: 20px;font-style: italic;box-shadow:0px 10px 15px #0000002C;border-radius: 5px;}
.main_popup .anecdote .custom_btn{position: relative;text-align: center;font-style: normal;width: fit-content; margin: 0 auto;margin-top: 10px;display: block;font-family: var(--main-font);z-index: 11;}
.main_popup .custom_btn.jaune{z-index: 11;}
.main_popup.liste_gagnants span {white-space: nowrap;}

/*.snow{position: absolute;left: 0;top: 0;bottom: 0;right: 0;z-index: 1;overflow: hidden;}*/
.snowball{opacity: 0;position: absolute;background-color: #fff;top: 110vh;width: 300px;height: 300px;border-radius: 100%;z-index: 0;-webkit-transition: 0.3s top ease,0.3s left cubic-bezier(0, 0.79, 0, 1.12),0.3s width ease,0.3s height ease,0.3s opacity ease;;transition: 0.3s top ease,0.3s left cubic-bezier(0, 0.79, 0, 1.12),0.3s width ease,0.3s height ease,0.3s opacity ease;}
.snowball.launched{opacity: 1;width: 10px;height: 10px;z-index: 3;}
.reseaux{position: relative;}
.reseaux-band{font-family: var(--main-font);opacity: 0;visibility: hidden;position: absolute;top: 100%;left: -5%;width: 110%;padding: 15px;background: #fff;border-radius: 20px;box-shadow: 0px 3px 16px #00000029; z-index: 12;transition: 0.5s all ease;}
.result-block .reseaux-band{bottom: 102%;top: initial;width: 60%;right: 0;left: initial;}
.custom_btn .reseaux-band{width: initial;top: 150%;left: 50%;transform: translateX(-50%);}
.reseaux-band.active{opacity: 1;visibility: visible;}
.reseaux-band .title{color: #444;font-size: 1.1rem;font-style: normal;font-weight: bold;margin-bottom: 5px;}
.reseaux-band-links{display: flex;justify-content: space-evenly;align-items: center;}
.reseaux-band-links a{color: #767676 !important;text-decoration: none;font-style: normal;font-weight: normal;}
.reseaux-band-links a img{width: 30px;display: block;margin: 0 auto;}
 .case img{max-width: 100%;}
 .maison .case .toOpen, .maison .case.opened-window .window{max-width: inherit;}
.btns-winner{display:flex;justify-content:space-evenly;align-items:center;flex-wrap:wrap;}

.blocks{display: flex;justify-content: center;gap: 80px;flex-wrap: wrap;}
.blocks .title_gagnants{text-align: center;color: var(--primary-color);font-size: 1.5rem;font-weight: bold;margin-bottom: 20px;}
.blocks .result-block{padding: 40px;background: #fff;border-radius: 20px;width: 40%;max-height: 500px;min-width: 400px;box-shadow: 0px 5px 20px 0px #00000059;z-index: 2;position: relative;}
.blocks .result-block #liste_anecdotes, .blocks .result-block #liste_gagnants_fin{overflow-y: auto;max-height: 90%;}
.blocks .result-block #liste_anecdotes::-webkit-scrollbar, .blocks .result-block #liste_gagnants_fin::-webkit-scrollbar{width:13px;}
.blocks .result-block #liste_anecdotes::-webkit-scrollbar-track , .blocks .result-block #liste_gagnants_fin::-webkit-scrollbar-track {box-shadow: inset 0 0 10px 10px #0000000d;border: solid 3px transparent;}
.blocks .result-block #liste_anecdotes::-webkit-scrollbar-thumb , .blocks .result-block #liste_gagnants_fin::-webkit-scrollbar-thumb {border-radius:1rem;box-shadow: inset 0 0 10px 10px var(--primary-color);border: solid 3px transparent;}
/*.blocks:hover::-webkit-scrollbar-thumb {box-shadow: inset 0 0 10px 10px #DDD;}*/
.big_subtitle{color: #fff;font-size: 2rem;text-align: center;font-family: var(--main-font);margin: 2rem 2rem 5rem 2rem;line-height: 2rem;}
.share{position: absolute;top: 2%;right: 2%;}
.share img{width: 25px;}

/* Smartphones et tablettes ----------- */
@media only screen
and (orientation: landscape)
and (max-width: 1750px)
 {
.cases-maison .case.vam.tac{max-width: 7%;}
.cases-toit .case.vam.tac{max-width: 10%;}

 .maison{min-width: initial;
 	/*top: 150px;*/
 }
 .maison .case.opened-window .ombre{width: 100%;}

}
@media only screen
and (orientation: portrait)
and (min-width: 768px){
.cases-maison .case.vam.tac{max-width: 7%;}
.cases-toit .case.vam.tac{max-width: 10%;}
.maison.pc{max-width: 90vw;}
}
@media only screen
and (orientation: landscape)
and (max-height: 470px){
	.maison{top: 150px;bottom: inherit;}
	.herbe{display: none;}
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 767px) {
	body{overflow-x: hidden;overflow-y: auto;}
	.main_popup{padding: 20px;}
#header.mobile{display: block;}
#header.pc,.maison.pc{display: none;}
.maison.mobile {display: block;}
#site-logo{padding: 10px 30px;}
#site-logo img{max-width: 130px;}
#event-logo{max-width: 200px;padding-left: 30px;}
#event-logo img{width: 100%;}
.maison-pc{content: url('https://cloud.madeinsurveys.com/events/calendrier-avent-2022/img/elements/Maison-mobile.svg');width: 90vw;margin: 0 auto;display: block;}
.maison{min-width: inherit;position: relative;margin-top: 10%;}
.maison .cases-toit{display: grid;grid-template-columns: 1fr 1fr;top: 1%;height: 21%;}
.maison .cases-maison{top: 24%;height: 75%;}
.maison .cases-maison .row{display: grid; grid-template-columns: 1fr 1fr 1fr;}
	#middle_content {position: relative;height: initial;background: url('../img/elements/bkg-mobile.svg') no-repeat  center center white;background-size: cover;overflow: hidden;}
	.maison .case .toOpen, .maison .case.opened-window .window{position: absolute;top: -11%;left: 7%;width: 86%;z-index: 2;}
	.maison .cases-toit div img,.maison .cases-maison div img{position: relative;top: inherit;left: inherit;z-index: 1;width: 53%;}
	.maison .case.opened-window .ombre{width: 53%;}
	.maison .case.current:not(.opened-window) .ombre, .maison .case.future .ombre{left: 25%;width: 50%;}
	.maison .case.future .closed{z-index: 2;}
	
	.maison .porte{width: 30%;bottom: -2%;margin: initial;left: 1%;}
	.maison .case.opened-porte{width: 32%;left: 0;}
	.blocks{margin-bottom: 5rem;}
	.blocks .result-block{width: 80%;min-width: initial;padding: 40px 20px;}

	.titre_popup{font-size: 2.5em;}
	.custom_btn a{white-space: nowrap;}
	.display_mobile {display:block;}

	#btn_header .custom_btn.jaune{position:absolute;top:85px;left:0;}
	#btn_header .custom_btn.bleu{position:absolute;top:85px;right:0;}
	#text_header .custom_btn{width: 100%;}
	.custom_btn.right:hover a{padding: 0.8rem 3rem 0.8rem 2rem;}
	.custom_btn.right a{padding: 0.8rem 3rem 0.8rem 2rem;}

	#cases_calendrier{text-align: center;}
	#cases_calendrier, #cases_calendrier tbody{display:block;}
	#cases_calendrier tr{display:inline;}
	#cases_calendrier td {display:inline-block;width:32%;}
	#cases_calendrier .case[data-day="24"] img {width:auto;}

	#info_popup{width: 90vw;overflow-x: hidden;}
	.popup_logo{width: 50%;}

	.main_popup.liste_gagnants span {white-space: inherit;}

	.bkg-white{margin: 0rem auto;max-width: 90%; padding: 1rem 1.5rem;font-size: 16px;}
	.nuage{display:none;}
    
    .custom_btn a{padding:0.5rem 1rem;font-size:16px;}
    .reseaux-band{bottom: 30%;top: initial !important;}

    /*#header {background:url('../img/neige.gif');}*/
	.neige {display:none;}
	.btns-winner{flex-direction: column-reverse;}
	.snowball{width: 200px;height: 200px;}
	.sapin.gagnants{display: block;}
	.herbe{display: none;}
	#header.gagnants .inputs{flex-direction: column-reverse;}
	#header.gagnants .inputs #event-logo{padding-left: 0;}
	.result-block .reseaux-band{width: 90%;}

	.custom_btn.reverse a{font-size: 12px;}

	
}

@media only screen
and (max-height : 901px) {
	body *{font-size: 16px;}
	#header #logo_calendrier{width:315px;height:350px;}
	#header.gagnants #logo_calendrier{height:400px;}
	#header #logo_calendrier img {height:115px;bottom:30px;}
}
/* Tablettes (portrait and landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1300px) {
	header.mobile{display: block;}
	header.pc{display: none;}
	/*.maison{overflow-x: auto;}*/
	body *{font-size: 16px;}
	/*#header {padding-top:7em;}*/
	/*#header .dt{table-layout: fixed;}*/
	#header #logo_calendrier{width:315px;height:350px;}
	#header #logo_calendrier{width:315px;height:350px;}
	#header #logo_calendrier img {height:115px;bottom:30px;}
	#header #text_header .contenu_texte_header{max-width: 80%;}
	.nuage.gauche {position: absolute;width: 40%;left: -6%;top: -75%;z-index: 3;}
	.nuage.droite {position: absolute;width: 14%;right: -26px;top: 12%;z-index: 1;}

}