@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;600;800&display=swap');

@font-face {
    font-family: 'GhiyaStrokes';
    src: url('/webfont/GhiyaStrokes.eot');
    src: url('/webfont/GhiyaStrokes.eot?#iefix') format('embedded-opentype'),
        url('/webfont/GhiyaStrokes.woff2') format('woff2'),
        url('/webfont/GhiyaStrokes.woff') format('woff'),
        url('/webfont/GhiyaStrokes.svg#GhiyaStrokes') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

*{
font-family:'Montserrat',arial;
font-weight:500!important;
line-height:1.2em;
}

.mentions{
position:fixed;
bottom:0;
left:50%;
transform:translateX(-50%);
width:100%;
}
.mentions a{
border-radius:8px 8px 0 0;
background:#000;
text-decoration:none;
font-size:12px;
padding:8px 16px;
color:white;
transition:all ease 0.3s;
opacity:.7;
display:inline-block;
}
.mentions a:hover{
opacity:1;
}

body{
background:#ffffff;
color:#000;
max-width:480px;
margin:auto;
position:relative;
font-size:1rem;
}

#bkgBox{
top:0;
left:0;
background:#ffffff;
position:fixed;
width:100%;
height:100%;
opacity:.75;
cursor:pointer;
}

#popupBox{
position:absolute;
z-index:999;
background:#000;
width:90%;
margin:5%;
padding:calc(5% - 5px);
border:5px solid #000000;
margin:auto;
border-radius:10px;
top: 50%;
transform: translateY(-50%);
}
#popupBox input,
#popupBox select{
width:90%;
background:#ffffff;
border:none;
color:#000;
padding:5%;
margin:0 0 15px 0;
font-size:1.1em;
border-radius:8px;
}
#popupBox select{
padding:5px 5%;
width:100%;
}

#popupBox input::placeholder{
color:#000;
opacity:1;
}
#popupBox h2,
#popupBox p{
color:#ffffff;
font-weight:400;
margin:0;
font-size:1em;
}
#popupBox h2{
font-weight:600;
font-size:1.2em;
text-align:center;
margin-bottom:10px;
}
#popupBox input.updMyLog{
background:#000000;
width:100%;
border-radius:10px;
margin:10px 0 0 0;
font-size:1.4em;
font-weight:400;
color:#ffffff;
}
#popupBox .error{
color:#fff;
background:#000000;
font-weight:600;
text-align:center;
padding:10px 0;
font-size:1em;
border-radius:10px;
margin-bottom:10px;
animation: blinkError 0.3s step-start 0s 15 forwards;
}
@keyframes blinkError{
50%{background:#ffffff;}
}
#popupBox p strong{
font-weight:600;
color:#ffffff;
}
#popupBox .closePop{
position:absolute;
top:-24px;
right:-24px;
width:48px;
height:48px;
cursor:pointer;
transition:all ease 0.5s
}
#popupBox .closePop:hover{
transform:scale(1.2);
}

h1{
margin:20px 0 20px 0;
text-align:center;
}
h1 img{
max-width:100%;
max-width:320px;
}
h1.ingame img{
max-height:92px;
}

#resps{
text-align:center;
}

#resps h3.decount{
font-size:5em!important;
font-weight:800!important;
}


#timer{
display:inline-block;
width:100%;
margin:30px auto 10px auto;
text-align:center;
box-sizing:border-box;
}
#timer .sablier{
display:block;
vertical-align:middle;
position:relative;
width:60px;
}
.sablier img{
width:60px;
height:auto;
position:absolute;
top:-10px;
left:0;
}

#round-time-bar {
display:inline-block;
width:calc(100% - 80px);
margin:0 auto 0 40px;
overflow: hidden;
background:#ffffff;
border-radius:8px;
}
#round-time-bar div {
height: 40px;
animation: roundtime calc(var(--duration) * 1s) steps(var(--duration)) forwards;
transform-origin: left center;
background: #ae2049;
}

#round-time-bar[data-style='smooth'] div {
  animation: roundtime 8s linear forwards;
}

@keyframes roundtime {
  to {
    transform: scaleX(0);
  }
}

.button{
width:100%;
background:#ffffff;
color:#000000;
border-radius:8px;
padding:15px;
margin:15px auto;
cursor:pointer;
font-size:1.1em!important;
text-align:center!important;
font-weight:600!important;
box-sizing:border-box;
}
.button .rank{
font-weight:800;
}
.button.choice{
background:#ae2049;
}
.button.nochoice:hover{
opacity:.65;
}
.button.good{
background:#329770;
animation: blink 0.2s step-start 0s 5 forwards;
}
@keyframes blink{
50%{background:#ffffff;}
}

#quest{
width:95%;
margin:auto;
text-align:left;
font-size:1.1em;
font-weight:300;
}
#quest p b{
font-weight:600;
text-transform:uppercase;
}
#quest h2{
text-align:left;
font-size:1.2em;
color:#000000;
text-transform:uppercase;
margin:0;
padding:0;
line-height:1em;
}
#quest .question h2{
text-align:left;
font-size:1.1em;
color:#000000;
text-transform:uppercase;
margin:0 0 5px 0;
padding:0;
line-height:1em;
font-weight:600;
}
#quest .question p{
text-align:left;
font-size:1em;
margin:0;
padding:0;
/* line-height:1.1em; */
}

#quest h3{
color:#000000;
font-size:100px;
line-height:1em;
margin:0;
}

#quest .question h3{
color:#000000;
font-size:22px;
line-height:1em;
font-weight:700!important;
margin:0 0 5px 0;
}

#details{
margin-top:20px;
text-align:left;
}
#details .responses{
text-align:center!important;
width:100%;
background:#ffffff;
color:#000000;
border-radius:8px;
padding:15px;
margin:15px auto;
cursor:pointer;
font-size:1.1em;
text-align:left;
font-weight:600!important;
box-sizing:border-box;
}
#details .savoirPlus{
background:#ffffff85;
box-sizing:border-box;
padding:10px;
border-radius:8px;
}
#details .savoirPlus p{
font-size:.8em;
line-height:1.3em;
font-style:italic;
}

#details p strong{
font-weight:600;
}
#nextQuest{
display:block;
margin:auto;
text-align:center;
margin-top:30px;
}
#nextQuest input{
background:black;
color:white;
font-size:18px!important;
font-family:'Montserrat';
width:auto!important;
padding:14px 18px!important;
border-radius:8px!important;
cursor:pointer;
transition:all ease 0.3s;
border:none;
font-weight:600!important;
text-transform:uppercase;
}
#nextQuest input:hover{
background:white;
color:black;
}


#quest .bravo h2{
text-transform:none;
font-weight:600;
}
.bonjour p,
.bravo p{
margin:0;
}
.bravo .score{
display:block;
color:#000000;
font-size:1.6em;
font-weight:300;
}
.bravo .score strong{
font-weight:600;
}
.bravo img{
width:64px;
display:inline-block;
margin-right:10px;
}
.bravo div{
display:inline-block;
}

.bonjour img{
width:60px;
display:inline-block;
margin-right:10px;
}
#quest .bonjour h2{
text-transform:none;
font-weight:600;
margin:0;
}
.bonjour div{
display:inline-block;
width:70%;
}
.bonjour strong{
font-weight:600;

}



p.solo{
display:block;
margin:40px 0;
text-align:center;
}

p a.button{
color:#ffffff;
text-decoration:none;
text-transform:uppercase;
padding:15px 30px;
font-weight:600;
font-size:2em;
}
p a.button:hover{
background:#000
}

#quest.home,
#quest .question{
background:#329770;
padding:30px;
border-radius:16px;
box-sizing:border-box;
}
#quest.home form{
text-align:center;
}
#quest.home form input,
#quest.home form select{
width:100%;
display:inline-block;
padding:8px 10px;
border-radius:6px;
margin:4px 0;
border:none;
box-sizing:border-box;
font-size:.9em;
font-weight:500;
}
#quest.home form input::placeholder{
color:#0000008c;
}
#quest .avantjeu{
margin:20px 0;
text-align:left;
}
#quest.home h2{
text-transform:none;
font-weight:700!important;
line-height:1.2em;
font-size:1.1em;
text-align:center;
}
#quest.home p{
margin:0 0 15px 0;
font-size:.9em;
font-weight:500;
text-align:center;

}

h1.bravo{
font-size:56px!important;
font-family:'Montserrat';
line-height:.7em;
}
h1.bravo .pseudo{
font-family:'Montserrat';
font-size:38px!important;
}
#quest .bravoText{
text-align:center!important;
font-size:1.2em!important;
margin-bottom:20px!important;
}
.score{
text-align:center;
margin-bottom:15px;
box-sizing:border-box;
background:white;
padding:16px;
border-radius:8px;
font-size:24px;
color:#000;
}
.score span{
font-size:1.8em;
font-weight:600!important;
color:#ae2049;
}
.endText{
margin-bottom:30px;
}
.endText p{
margin-bottom:10px!important;
}
.formulaire {
text-align:center;
}
.formulaire h3{
font-size:1em!important;
max-width:80%;
margin:10px auto!important;
}
.formulaire input{
width:70%;
box-sizing:border-box;
padding:6px 8px;
margin-bottom:4px;
border:none;border-radius:4px;
}
.formulaire input::placeholder{
font-style:italic;
color:#00000057;
}
.formulaire input[type="text"]:hover,
.formulaire input[type="phone"]:hover,
.formulaire input[type="mail"]:hover{
background:#ffffffa3;
}
.formulaire input[type="submit"]{
background:#000000;
color:white;
font-size:1.1em;
width:auto;
padding:6px 16px;
font-weight:400!important;
cursor:pointer;
margin:10px auto;
}
.formulaire input[type="submit"]:hover{
background:#ae2049;
}
.formulaire p{
text-align:center!important;
}
.formulaire p small{
font-size:12px;
text-align:center;
}
.merci h2{
font-size:22px!important;
text-align:center!important;
font-weight:600!important;
color:white!important;
}


.poserQuestion,
.voirClassement{
display:block;
margin:auto;
text-align:center;
}
.poserQuestion input{
background:black;
color:white;
margin-bottom:30px;
}
.voirClassement input{
background:white;
color:black;
}
.poserQuestion input,
.voirClassement input{
border:none;
padding:12px;
border-radius:4px;
font-size:16px;
font-weight:600;
width:auto;
transition:all ease 0.2s;
cursor:pointer;
}
.poserQuestion input:hover,
.voirClassement input:hover{
background:#ed1e79;
color:white;
}

input#letsGo{
background:black;
color:white;
font-size:1.6em!important;
font-family:'GhiyaStrokes';
width:auto!important;
padding:16px!important;
border-radius:16px!important;
cursor:pointer;
text-transform:uppercase;
font-weight:400;
transition:all ease 0.3s;
}
input#letsGo:hover{
background:#ae2049;
color:white;
}

.pied{
margin-top:20px;
display:inline-block;
text-align:center;
width:100%;
font-size:12px;
font-weight:400;
}
.pied img{
max-width:160px;
display:block;
margin:0 auto 50px auto;
}
.pied p {
font-size:12px;
font-weight:400;
}
.pied p a{
margin:0 10px;
font-size:12px;
font-weight:400;
}
.home a{
color:#504248;
}
.pied a{
margin:0 10px;
}
.home a:hover{
color:#000000
}

#logMeIn input{
display:block;
border:none;
padding:4%;
width:92%;
margin:15px 0;
}

#letsGo.button{
display:block;
border:none;
}

#retLogBox .error{
color:#000000;
text-align:center;
font-weight:600;
text-transform:uppercase;
}

#letsGo.button,
#logMeIn input.button{
color:#ffffff;
text-decoration:none;
text-transform:uppercase;
padding:15px 30px;
margin:20px auto 20px auto;
font-weight:600;
font-size:2em;
width:auto;
}
input.button:hover{
background:#504248;
color:#000000;
}
#logMeIn input::placeholder{
font-weight:400;
color:#444;
opacity:.7;
}

#firstLog.button{
color:#ffffff;
text-decoration:none;
text-transform:none;
padding:10px 15px;
font-weight:400;
font-size:1.1em;
width:auto;
margin-top:10px;
display:block;
text-align:center;
}


#text{
width:95%;
margin:auto;
}
#text p,
#text li{
font-size:.9em;
margin:0 0 5px 0;
}
#text p{
margin-bottom:10px;
}
#text ul{
margin:0;
padding:0 0 0 30px;
}

#text h2,
#text h4{
color:#000000;
margin:0;
padding:0;
}

#text h2{
font-size:1.2em;
}

#text h4{
margin-top:20px;
font-size:1em;
font-weight:600;
display:block;
}

#text p a{
color:#000000;
}
#text p a:hover{
color:#504248;
}

.comnambules{
font-size:14px;
text-align:center;
color:#504248;
font-weight:600;
}
.comnambules a{
color:#504248;
text-decoration:none;
font-weight:600;
}
.comnambules a:hover{
color:#000000;
}

#askQuestion input,
#askQuestion textarea{
width:100% !important;
border-radius:8px !important;
box-sizing:border-box;
padding:8px !important;
border:none;
font-size:.9em!important;
}
#askQuestion textarea{
height:120px;
margin-bottom:30px;
}
#askQuestion  input[type="submit"]{
background:black;
color:white;
width:auto!important;
padding:8px 24px!important;
cursor:pointer;
}
#askQuestion  input[type="submit"]:hover{
background:#ed1e79;
}
#askQuestion input::placeholder,
#askQuestion textarea::placeholder{
font-style:italic;
font-weight:500;
opacity:.5;
}

#classement{
display:block;
margin-top:10px;
}
#classement *{
font-size:16px;
}
.player{
box-sizing:border-box;
display:block;
border-bottom:1px solid black;
background:white;
padding:4px;
line-height:20px;
height:28px;
width:100%;
text-align:left;
}
.player.participant{
background:#000000;
color:white;
}
.player.participant{
  animation: blinker .15s 10 ease-in-out;
}
@keyframes blinker {
  50% {
    background:#00000080;
  }
}

#classement .place,
#classement .pseudo,
#classement .pts,
#classement .date{
display:inline-block;
}
#classement .place{
/* background:red;   */
width:15%!important;
font-weight:600;
text-align:center;
}
#classement .pseudo{
/* background:blue;   */
width:70%!important;
text-align:left;
}
#classement .pts{
/* background:green;   */
width:15%!important;
}
#classement .participant .place,
#classement .participant .pseudo,
#classement .participant .pts,
#classement .participant .date{
font-weight:600!important;
}