*{margin: 0;
  padding: 0;}

#BodyBienvenu{background-color:rgb(255, 255, 255);
              background: url(./Images/figure-reine.PNG) center/cover;
              text-align: center;}
h1{font-size: 45px;}
#Legere_description{background-color: rgba(100, 100, 100, 0.452);
                    width: 35%;
                    height: max-content;
                    margin: auto;
                    margin-top: 15px;
                    margin-bottom: 25px;
                    box-shadow: 0 0 25px rgb(50, 50, 50);
                    border-radius: 15px;
                    font-size: 22px; 
                    padding: 15px 25px 15px 25px;}
@media(max-width:800px)
{#Legere_description{width: 80vw;} 
 #BodyBienvenu{background: url(./Images/figure-reine2.PNG) center/cover;} 
}
#BtnContinuer{font-size: 30px; 
              padding: 15px;
              margin-top: 150px;
              transition: 0.2s;}
#TelechargerCamerNDOLO{font-size: 12px; 
                        border-radius: 15px;
                        padding: 10px;
                        margin-bottom: 3px;}
#BtnContinuer:hover, #TelechargerCamerNDOLO:hover{background-color: rgb(241, 128, 124);
                                                  cursor: pointer;} 
/*-----------------------------------------------------------------------------*/
/*#BodyLes_chalenges{text-align: center;}*/
#ImgBaniere{background: url(./Images/reineBaniere.png) center;
            width: auto;
            position: relative;
            height: 173px;}
#ContenuLeader{background-color: rgb(208, 208, 255);
              display: grid;
              width: 100%;
              height: 100%;
              padding: 5px 0;
              grid-template-columns: auto max-content;
              grid-template-rows: 1fr 1fr;
            grid-template-areas: 
            "div1 div2"
            "div3 div3";}
#ContenuLeader div{background-color: rgba(255, 255, 255, 0.432);
              width: 97%;
              height: 200px;
              margin: 5px;
              border-radius: 3px;}
#MesChallenges{grid-area: div1;
              position: relative;
              width: max-content;}
#MesChallenges h2{width: max-content;
                text-decoration: underline;
                position: absolute;}
#MesChallenges img{position: absolute; 
                  top: 30%;
                  border-radius: 30px;}
#MesChallenges #LeMotModifier{position: absolute; 
                  background-color: rgb(151, 196, 255);
                  font-size: smaller;
                    top: 30%;
                    margin-left: 60px;
                    padding: 3px;
                    border-radius: 5px;}
#MesConcurents{grid-area: div2;
                position: relative;}
#PetitClassement{text-decoration: none;
                  max-height: 100%;
                  overflow-x: hidden;
                  overflow-y: scroll;
                  scroll-behavior: 100%;}
#TousLesClassements{background-color: rgb(173, 173, 173); 
                    position: absolute;
                    bottom: 0;
                    left: 15%;
                    padding: 3px;
                    border-radius: 5px;
                    width: max-content;
                    height: 20px;}
#MesFollowers{grid-area: div3;
              position: relative;
              background-color: blue;
              width: max-content;
              display: grid;
              grid-template-columns: 70% 30%;}
#ZoneMessages3{width: 68%;
                height: calc(100% - 10px);
                margin: 5px;
                overflow-x: hidden;
                overflow-y: scroll;
                scroll-behavior: 100%;
                position: absolute;
                left: 0;
                top: 0;}
#ZoneMessages3 p{width: max-content;
            max-width: 93%;
            background-color: rgba(212, 212, 81, 0.900);
            padding: 5px;
            margin: 5px 5px 5px 0;
            border-radius: 10px;}
#LesNouveaux{text-decoration: underline;
            background-color: rgba(151, 196, 255, 0.753);
            margin: 5px;
            position: absolute;
            right: 0;
            top: 0;
            height: calc(100% - 10px);
            width: 28%;}
#VoirMesChallenges{position: absolute;
                  top: calc(30% + 60px);
                  display: flex;
                  flex-flow: wrap;
                  flex-direction: row;
                  width: 100%;
                  height: 40%;}
#VoirMesChallenges button{border: none;
                    padding: 2px;
                    margin: 3px;
                    width: max-content;
                    height: max-content;}
#VoirPlus{background-color: rgb(151, 196, 255);
                      right: 0;
                      border-radius: 5px;}
#PorteurBulbes{width: 100px; background-color: none;
                height: 100px;
                border: none;
                position: absolute;
                left: 55vw;
                top: 120px;
                position: relative;}   
#MessageAuxFollw{background-color: rgb(202, 202, 202);   
            font-size: 10px;
            border: none;
            padding: 3px 3px 15px 3px;
            position: absolute;
            right: 8px;
            bottom: 40px;}                      
#VoirPlus2{background-color: rgb(151, 196, 255);
            padding: 10px;
            border-radius: 25px;
            border: none;
            box-shadow: 3px 3px 10px rgb(50, 50, 50);
            position: absolute;
            right: 8px;
            bottom: 5px;}
#NextChallenge{background-color: gray;
              display: grid;
              padding: 5px;
              grid-template-columns: 15% 85%;
              justify-content: center;
              align-items: center;
              width: 99%;
              height: 45px;}
#NumNoAccess{background-color: rgb(151, 196, 255);
              border-radius: 10px;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 30px; 
                width: 100%;
                height: 100%;}
#MessageNoAccess{background-color: rgb(175, 175, 108);
                  font-size: 20px; 
                  width: 100%;
                  height: max-content;}
#ElmtChallenge{background-color: rgb(255, 255, 105);
              display: grid;
              grid-template-columns: 15% 85%;
              padding: 5px;
              width: 99%;
              height: 75px;}
#NumChallenge{background-color: rgb(134, 134, 54);
              border-radius: 10px;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 36px; 
                width: 100%;
                height: 100%;}
#DenomChallenge{background-color: rgb(202, 202, 88);
                  font-size: 28px; 
                    width: 100%;
                    height: 100%;}
#BulleListeChallenge{background-color: rgb(197, 222, 255);
                    padding: 0 5px;
                    border-radius: 5px;
                    font-size: 20px;
                    border: none;
                    width: max-content;
                    height: 250px;
                    overflow-x: hidden;
                    overflow-y: scroll;
                    scroll-behavior: 100%;
                    position: fixed;
                    z-index: 10;
                    right: 7vw;
                    bottom: 15vh;}
#ListeChallenge, #Classements{background-color: rgb(151, 196, 255);
                padding: 13px 15px;
                border-radius: 60px;
                font-size: 20px;
                border: none;
                box-shadow: 3px 3px 10px rgb(50, 50, 50);
                position: fixed;
                right: 5vw;
                bottom: 10vh;}
#ListeChallenge{z-index: 15;}
#Classements{bottom: 20vh; }
#Activation{width: max-content;
            background-color: rgb(255, 133, 133);
            z-index: 15;
            position: absolute;
            left: 0;
            bottom: 0;
            height: 20px;} 
#CreationEspace{width: max-content;
                background-color: rgb(151, 196, 255);
                position: absolute;
                right: 0;
                bottom: 0;
                height: 20px;
                padding: 0 10px 0 20px;} 
#VoirPlus:hover, #VoirPlus2:hover, #ListeChallenge:hover, #Classements:hover, #TousLesClassements:hover{background-color: rgb(202, 202, 88); 
                                                                                                    cursor: pointer;} 
@media(max-width:800px)
{ #PorteurBulbes{left: 45vw;}
  #BulleListeChallenge{right: 10vw;}
  /*#ImgBaniere{background: url(./Images/reineBanierePetit.PNG) center;
                width: 100%;
                height: 307px;}*/
}
@media(max-width:1000px)
{ #NumNoAccess{font-size: 18px;
              text-align: center;}
  #MessageNoAccess{font-size: 15px;}
}