html
{
    overflow:hidden;
    touch-action:manipulation;
}

/* La carte */
#map
{
    width:100%;
    height:100vh;
    cursor:crosshair;
}

body
{
/*    overflow-x:hidden;*/
}

/* L'overlay transparente de chargement */
#loading
{
    background-color:rgba(255,255,255,1);
    z-index:1000000000;
    position:fixed;
    width:100%;
    height:100vh;
    bottom:0;
    display:flex;
}
#loadingGif
{
    width:50px;
    height:10px;
    margin:auto;
    display:block;
}

#voirCarteCont
{
    position:fixed;
    display:flex;
    z-index:5000000000;
    width:100%;
    height:100vh;
    top:0;
    left:0;
    background-color:rgba(0, 0, 0, 0.7);
}

#voirCarte
{
   
    margin: auto;
    width: 300px;
    height: 70px;
    font-size: 1.5em;
    background-color: rgba(0,0,0,0.7);
    color: white;
    border: dotted white 0.1px;
    border-radius: 1em;
    cursor:pointer;
}

#cacherCarte
{
    position:fixed;
    z-index:4999999999;
    width:150px;
    left:15px;
    top:20px;
    display:none;
    background-color: rgba(0,0,0,0.7);
    color: white;
    border: dotted white 0.1px;
    border-radius: 1em;
    cursor:pointer;
}

/*
[tooltip]:not([tooltip-persistent]):before {
    pointer-events: none;
}
*/


.leaflet-marker-icon
{
    display:flex;
}
.label
{
    text-align:center;
    color:white;
    text-shadow: 1px 1px 2px black,-1px 1px 2px black,1px -1px 2px black, -1px -1px 2px black; 
    margin:auto;
}
#legende
{
    
    width:100%;
    position:absolute;
    left:-100%;
    bottom:0;
    background-color:white;
    z-index:10000;
    padding:10px;
    padding-left:30px;
    padding-right:30px;
    transition:0.3s;
}

.color{
    display:inline-block;
    width:20px;
    height:20px;
}
#boutonLegende
{
    z-index:3999;
    font-size:0.8em;
    padding:5px;
    display:block;
    position:fixed;
    background-color:#ec1d25;
    color:white;
    bottom:30px;
    left:20px;
    font-size:1.2em;
    border:none;
    border-radius:0.5em;
    
}
#cacherLegende
{
    display:block;
    background-color:#ec1d25;
    color:white;
    border:none;
    border-radius:1em;
    position:absolute;
    top:5px;
    right:5px;
}

.leaflet-control-container {
    display: none;
}

.rouge
{
    color:red;
    font-weight:600;
    font-size:1.1em;
}
.gras
{
    font-weight:600;
    font-size:1.1em;
}

#swali ul
{
    max-width:500px;
    margin:auto;
}

#map
{
    display:inline-block;
    
}
#barre_score
{
    display:inline-block;
    margin-right:-4px;
    vertical-align:top;
}

#secondes
{
    color:white;
    font-size:20px;
    text-align:center;
    display:table-cell;
    
    vertical-align: middle;
/*    margin-bottom:20px;*/
}

#lieu
{
    display:table-cell;
    
    vertical-align: middle;
}


#ecran_depart
{
    z-index:1000;
    background-color:black;
    position:absolute;
    display:flex;
}
#mode_emploi
{
    z-index:999;
    background-color:black;
    position:absolute;
    display:flex;
}

.centrer
{
    color:white;
    width:90%;
    margin:auto;
/*    margin-bottom:20px;*/
}


.leaflet-interactive
{
    cursor:crosshair;
}


.centrer h2
{
    text-align:center;
    font-size:3.5em;
    margin-bottom:30px;
    
}
.centrer button
{
    margin:auto;
    display:block;
    border-radius:2em;;
    font-size:60px;
    padding:20px;
    border: dotted white 1px;
    color:white;
    background-color:rgba(0,0,0,0);
    margin-bottom:20px;
    cursor:pointer;
}

.centrer p
{
    max-width:800px;
    margin:auto;
    font-size:2em;
    margin-bottom:30px;
}

.centrer li
{
    max-width:800px;
    margin:auto;
    font-size:2em;
    margin-bottom:15px;
}

#level
{
    z-index:997;
    background-color:rgba(0,0,0,0.9);
    position:absolute;
    display:flex;
}

#inserer_score
{
    z-index:998;
    background-color:black;
    position:absolute;
    display:none;
}
#inserer_score input
{
    display: block;
    margin: auto;
    margin-bottom: 20px;
}
.centrer .rejouer
{
    display:none;
}

#level .centrer
{
/*    margin-top:3000px;*/
    transform: translateY(-100%);
    transition-duration:1s;
}

#scoreee
{
    position:absolute;
    padding:7px;
    z-index:1000;
    top:-300px;
    color:white;
    background-color:black;
    padding:20px;
    
    transition:top 0.3s linear, background-color 0.6s linear;
}


#scoreee p
{
    font-size:4em;
}

#montrer_save
{
    display:none;
    
}
.case
{
    text-align:center!important;
    text-overflow: ellipsis;
    overflow:hidden;
    border-bottom:dotted gray 1px;
}
.headers .case
{
    font-weight:600;
}

#score_palier
{
    font-size:3em;
    margin-bottom:20px;
}

.compteur_devinette
{
    border:solid gray 1px;
    background-color:lightgray;
    border-radius:1em;
}

#plein-ecran
{
    z-index:995;
    position:absolute;
    right:20px;
    top:20px;
    width:50px;
    height:50px;
    background-color:rgba(255,255,255,0.8);
}
#exit_fullscreen
{
    display:block;
}
#enter_fullscreen
{
    display:none;
}
/*________________________________________________________*/


@media  screen and (max-width:1300px),
        screen and (max-height:1300px)
{
    #scoree
    {
        
    }
    #scoreee p
    {
        font-size:3em;
    }
}
@media  screen and (max-width:1200px),
        screen and (max-height:1200px)
{
    
    
    .centrer h2
    {
        font-size:3em;
        margin-bottom:25px;
        
    }
    #score_palier
    {
        font-size:2.5em;
    }
    .centrer button
    {
        
        
        font-size:50px;
        padding:20px;
        margin-bottom:15px;
    }

    .centrer p,.centrer li
    {
        max-width:700px;
        font-size:1.8em;
        margin-bottom:30px;
    }
    
    #scoree
    {
        
    }
    #scoreee p
    {
        font-size:2em;
    }

}
@media  screen and (max-width:1100px),
        screen and (max-height:11000px)
{
    
}
@media  screen and (max-width:1000px),
        screen and (max-height:1000px)
{
    .centrer h2
    {
        font-size:2.7em;
        margin-bottom:20px;
        
    }
    #score_palier
    {
        font-size:2.2em;
    }
    .centrer button
    {
        
        
        font-size:40px;
        padding:20px;
        margin-bottom:15px;
    }

    .centrer p,.centrer li
    {
        max-width:600px;
        font-size:1.6em;
        margin-bottom:20px;
    }
}
@media  screen and (max-width:900px),
        screen and (max-height:900px)
{
    #scoreee p
    {
        font-size:1.6em;
    }
    
    
    
}

@media  screen and (max-width:800px),
        screen and (max-height:800px)
{
    
    .centrer h2
    {
        font-size:2.3em;
        margin-bottom:20px;
        
    }
    #score_palier
    {
        font-size:2em;
    }
    .centrer button
    {
        
        
        font-size:30px;
        padding:20px;
        margin-bottom:15px;
    }

    .centrer p,.centrer li
    {
        max-width:500px;
        font-size:1.4em;
        margin-bottom:20px;
    }
    #plein-ecran
    {
        width:40px;
        height:40px;
    }
}

@media  screen and (max-width:700px),
        screen and (max-height:700px)
{
    #scoreee p
    {
        font-size:1.5em;
    }
}

@media  screen and (max-width:600px),
        screen and (max-height:600px)
{
    
    .centrer h2
    {
        font-size:2em;
        margin-bottom:20px;
        
    }
    #score_palier
    {
        font-size:1.5em;
    }
    .centrer button
    {
        
        
        font-size:30px;
        padding:20px;
        margin-bottom:15px;
    }

    .centrer p,.centrer li
    {
        max-width:500px;
        font-size:1.2em;
        margin-bottom:15px;
    }
    #scoreee
    {
        padding:10px;
    }
    #scoreee p
    {
        margin:2px;
        font-size:1.2em;
    }
    
    
}

@media  screen and (max-width:500px),
        screen and (max-height:500px)
{
    #scoreee p
    {
        
        font-size:1.4em;
    }
    .centrer h2
    {
        font-size:2em;
        margin-bottom:20px;
        
    }
    #score_palier
    {
        font-size:1.2em;
    }
    .centrer button
    {
        
        
        font-size:25px;
        padding:10px;
        margin-bottom:15px;
    }

    .centrer p,.centrer li
    {
        max-width:500px;
        font-size:1em;
        margin-bottom:10px;
    }
    #plein-ecran
    {
        top:5px;
        width:30px;
        height:30px;
    }
}

@media  screen and (max-width:400px),
        screen and (max-height:400px)
{
    .centrer br
    {
        display:none;
    }
    .centrer h2
    {
        font-size:1.5em;
        margin-bottom:20px;
        
    }
    #score_palier
    {
        font-size:1em;
    }
    .centrer ul
    {
        margin-bottom:10px!important;
    }
    .centrer button
    {
        
        
        font-size:15px;
        padding:7px;
        margin-bottom:15px;
    }

    .centrer p,.centrer li
    {
        max-width:500px;
        font-size:0.8em;
        margin-bottom:7px;
    }
    #scoreee p
    {
        font-size:0.8em;
    }
   
}
@media  screen and (max-width:300px),
        screen and (max-height:300px)
{
    .centrer h2
    {
        font-size:1.1em;
    }
    #score_palier
    {
        font-size:0.8em;
    }
    .centrer button
    {
        
        font-size:10px;
        padding:5px;
    }
    .centrer p
    {
        font-size: 0.7em;
        margin-bottom: 5px;
    }
    .centrer li
    {
        font-size:0.7em;
    }
    #lieu
    {
        font-size:16px!important;
        line-height:40px!important;
    }
    #scoreee p
    {
        
        font-size:0.7em;
        margin:1px;
    }
    
    #plein-ecran
    {
        top:5px;
        width:20px;
        height:20px;
    }
}
@media  screen and (max-width:250px),
        screen and (max-height:250px)
{
   
    .centrer p
    {
        font-size: 0.5em;
        margin-bottom: 5px;
    }
    .centrer li
    {
        font-size:0.5em;
    }
    
}