/* Palette de couleur */
:root {
    --ciel: #82DDF0; 
    --bleu_canard: #5296A5;
    --abricot: #F6C28B;
    --fleur_oranger: #FCD7AD; 
    --cafe: #A57548;
}

body{
    background-color: var(--fleur_oranger);
}

/*Classes haute de page*/
.topbox{
    background-color: var(--ciel);
    width: 100vw;
    height: 20vh;
    position: absolute;
    top: 0vw;
    left: 0vw;

}

.menuPanneau{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.menuPanneau ul{
    list-style-type: none;
    display: flex;
    flex-direction: row;
}

.affichePanneau{
    height: 10vh;
    width: auto;
    justify-content: center;
    margin-top: -1.2vh;
    margin-left: 0.3vw;
    margin-right: 0.3vw;
    display: inline;
    z-index: 0;
}

/*Permet la auperposition d'une image sur une autre (panneau + texte)*/
.top1{
    position: absolute;
    margin-left: -4.6vw;
    margin-top: 0.3vh;
    height: 3vh;
    z-index: 0;
}
.top2{
    position: absolute;
    margin-left: -3.8vw;
    margin-top: 0.3vh;
    height: 3vh;
    z-index: 0;
}
.top3{
    position: absolute;
    margin-left: -4.3vw;
    margin-top: 0.3vh;
    height: 3vh;
    z-index: 0;
}
.top4{
    position: absolute;
    margin-left: -4.3vw;
    margin-top: 0.3vh;
    height: 3vh;
    z-index: 0;
}
.top5{
    position: absolute;
    margin-left: -4.1vw;
    margin-top: 0.3vh;
    height: 3vh;
    z-index: 0;
}
.top6{
    position: absolute;
    margin-left: -4.2vw;
    margin-top: 0.3vh;
    height: 3vh;
    z-index: 0;
}
.top7{
    position: absolute;
    margin-left: -4.5vw;
    margin-top: 0.3vh;
    height: 3vh;
    z-index: 0;
}
.top8{
    position: absolute;
    margin-left: -4.5vw;
    margin-top: 0.3vh;
    height: 3vh;
    z-index: 0;
}
.top9{
    position: absolute;
    margin-left: -3.9vw;
    margin-top: 0.3vh;
    height: 3vh;
    z-index: 0;
}

.afficheLogo{
    height: 8vh;
    width: auto;
    margin-top: 0.8vh;
}

.afficheBadge{
    position: absolute;
    top: 0.5vh;
    left: 11.5vw;
    height: 19vh;
    z-index: 0;
}

.afficheOie{
    position: absolute;
    top: 7vh;
    left: 18vw;
    height: 12vh;
    z-index: 1;
}

.afficheCorpsGauche{
    position: absolute;
    top: 21vh;
    left: 9vw;
    height: 76vh;
    width: 15vw;
    
    box-shadow: 5px 5px 5px var(--cafe);
    border: solid var(--abricot);
    border-radius: 20px;
    background: var(--bleu_canard);
}
.afficheCorpsCentre{
    position: absolute;
    top: 21vh;
    left: 25vw;
    height: 76vh;
    width: 50vw;
    box-shadow: 5px 5px 5px var(--cafe);
    border: solid var(--abricot);
    border-radius: 20px;
    background: var(--bleu_canard);
}
.afficheCorpsDroit{
    position: absolute;
    top: 21vh;
    left: 76vw;
    height: 76vh;
    width: 15vw;
    box-shadow: 5px 5px 5px var(--cafe);
    border: solid var(--abricot);
    border-radius: 20px;
    background: var(--bleu_canard);
}

.wip{
    margin-top: 5vh;
    z-index: 2;
}