body

{
 background-color:  #FFFFFF;
}

#conteneurlogo
{
display: flex;
justify-content: center;
}


.alignement_gain_connexion
{
display: flex;
flex-direction: row;
justify-content: flex-end;
margin-top: 20px;
margin-right: 20px;
}

.alignement_connexion
{
display:none;
margin-left: 12px;
}

.carre_gain
{
display: flex;
justify-content : center;
align-items: center;
width: 77px;
height: 41px;
border: 2px solid #F3F3F0;
border-radius: 4px;
}

.carre_gain_etat2
{
display: flex;
justify-content : center;
align-items: center;
width: 77px;
height: 41px;
background: #D4FFA0;
border-radius: 4px;
}

.elements_logo_nombre
{
display: flex;
justify-content : center;
align-items: center;
flex-direction: row;
}

.logo_gain
{

}

.nombre_gain
{
width: 29px;
height: 22px;
margin-left: 5px;
font-family: 'Quantico';
font-style: normal;
font-weight: 400;
font-size: 15px;
line-height: 21px;
text-align: center;
color: #5DC4F0;
}


.carrelogo
{
width: 112px;
height: 131px;
background: #FFFFFF;
}

.carreorange
{
position: absolute;
margin-left: 19px;
margin-top: 15.72px;
width: 21.51px;
height: 21.51px;
background: #F19300;
border-radius: 5px;
}

.carrejaune
{
position: absolute;
margin-left: 19px;
margin-top: 43.26px;
width: 44.74px;
height: 44.74px;
background: #FFDD00;
border-radius: 5px;
}

.carrevert
{
position: absolute;
margin-left: 46.53px;
margin-top: 15.72px;
width: 46.47px;
height: 21.51px;
background: #69C200;
border-radius: 5px;
}

.carrebleu
{
position: absolute;
margin-left: 71.49px;
margin-top: 43.26px;
width: 21.51px;
height: 44.74px;
background: #41B2E5;
border-radius: 5px;
}

.nutripixi
{
position: absolute;
margin-left: 18px;
margin-top: 95px;
width: 80px;
height: 27px;
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-size: 21px;
line-height: 25px;
color: #B3B3B3;
}

.slogan
{
margin-top: 23px;
display: flex;
justify-content: center;
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-size: 17px;
line-height: 20px;
text-align: center;
color: rgba(179, 179, 179, 0.77);
}

.conteneurmenu
{
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 50px;
}

.menublanc1
{
margin-left: 10px;
margin-right:37px;
width: 82px;
height: 114px;
background: #FFFFFF;
border-bottom :3px solid #FFFFFF;
}

.menublanc1:hover
{
border-bottom: 3px solid #FFDD00;
}

.lampe
{
position: absolute;
margin-left: 4px;
margin-top: 5px;

}

.concept
{
position: absolute;
margin-top: 95px;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
text-align: center;
color: #FFDD00;
}

.menublanc2
{
margin-right: 34px;
width: 72px;
height: 114px;
background: #FFFFFF;
border-bottom :3px solid #9BED39;
}

.menublanc2:hover
{
border-bottom: 3px solid #9BED39;
}

.plante
{
position: absolute;
margin-top: 7px;

}

.cours
{
position: absolute;
margin-top: 95px;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
text-align: center;
color: #9BED39;
}


.menublanc3
{
width: 80px;
height: 114px;
background: #FFFFFF;
border-bottom :3px solid #FFFFFF;
}

.lappli
{
position: absolute;
margin-top: 5px;
}

.lawebapp
{
position: absolute;
margin-top: 95px;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
text-align: center;
color: #87D7F4;
}

.menublanc3
{
margin-left: 20px;
width: 80px;
height: 114px;
background: #FFFFFF;
border-bottom :3px solid #FFFFFF;
}

.menublanc3:hover
{
margin-left: 20px;
width: 80px;
height: 114px;
background: #FFFFFF;
border-bottom :3px solid #87D7F4;
}


.carregrisclair
{
width: 680px;
height: 303px;
border: 2px solid #F3F3F0;
}


.alignboutoncommencer
{
display: flex;
justify-content: center;
margin-top: 11px;
}

.boutoncommencer
{
width: 681px;
height: 52px;
background: #9BED39;
border-radius: 7px;
text-align: center;
}

.boutoncommencer:hover
{
background: #8CFF04;
}


.commencertexte
{
margin-top: 14px;
font-family: 'Scope One';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 52px;
color: #000000;
}

.placementindications
{
display: flex;
justify-content: center;
margin-top: 43px;
}

.indications
{
width: 716px;
height: 42px;
background: #F3F3F0;
text-align: center;
}

.indicationstexte
{
font-family: 'Scope One';
font-style: normal;
font-weight: 400;
font-size: 17px;
line-height: 42px;
color: #000000;

}

.lecteur
{
border: none; 
width:716px; 
height:220px;
}


.placementboutontexte
{
display: flex;
justify-content: center;
margin-top: 73px;
}

.boutontexte
{
width: 254px;
height: 48px;
background: #F3F3F0;
border-radius: 4px;
text-align: center;
}



.introdebut
{
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 21px;
  line-height: 34px;
  text-align: justify;
  width: 100%;
  color: #5B5B5B;
}

.textedubouton
{
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 48px;
text-align: center;
color: #4F4F4F;
}

.placementimagecours
{
display: flex;
justify-content: center;
}

.imagecours
{
width: 737px;
height: 481px;
border: 2px solid #F3F3F0;
border-radius: 10px;
text-align: center;
}

.imageducours
{
margin-top: 20px;
width:423px;
height: 423px;
line-height: 481px;
}



.titrecours
{
margin-top: 43px;
display: flex;
justify-content: center;
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-size: 30px;
line-height: 35px;
text-align: center;
color: #B3B3B3;
}

.conteneur
{
position: relative;
margin-top: 50px;
margin-right: 20px;
margin-bottom: 37px;
}

.carreblanc
{

background: #FFFFFF;
border: 2px solid #F3F3F0;
border-radius: 7px;
width: 168px;
height: 218px;
}

.carreblanc:hover
{

background: #FFFFFF;
border: 2px solid #9BED39;
border-radius: 7px;
width: 168px;
height: 218px;
}

.temps
{
position: absolute;
margin-left: 109px;
margin-top: 9px;
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-size: 16px;
line-height: 19px;
text-align: center;
color: #B3B3B3;
}

.image
{
position: absolute;
margin-left: 49px;
margin-top: 34px;
}

.titre
{
position: absolute;
margin-left: 36px;
margin-top: 115px;
width: 97px;
height: 38px;
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-size: 16px;
line-height: 19px;
color: #4F4F4F;
text-align: center;
}

.choisir
{
position: absolute;
margin-left: 38px;
margin-top: 173px;
width: 92px;
height: 25px;
background: #F3F3F0;
border-radius: 5px;
}

.inside
{
position: absolute;
margin-left: 15px;
margin-top: 3px;
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-size: 16px;
line-height: 19px;
text-align: center;
color: #4F4F4F;
}

.bande
{
width: 750px;
display: none;
justify-content: flex-start;
overflow-x: scroll;
}

.titrecarrousel
{
display: none;
justify-content: center;
margin-top: 70px;
font-family: 'Noto Sans';
font-size: 21px;
font-weight: 600;
}


.pyramid
{
margin-top: 37px;
display: flex;
justify-content: center;
}

.placement
{
display: flex;
justify-content: center;
margin-top: 16px;
}


.carregris
{
box-sizing: border-box;
width: 95px;
height: 32px;
left: 679px;
top: 1786px;
border: 2px solid #E8E6D9;
text-align: center;
}

.placementcourssuivant
{
display: flex;
margin-top: 16px;
}


.carregriscourssuivant
{
box-sizing: border-box;
width: 174px;
height: 109px;
border: 2px solid #E8E6D9;
}

.textecourssuivant
{
position: absolute;
width: 149px;
height: 28px;
margin-top: 67px;
margin-left: 12.5px;
font-family: 'Scope One';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 28px;
text-align: center;
color: #4F4F4F;
}

.carregris:hover
{
border: 2px solid #9BED39;
}

.equipe
{
font-family: 'Scope One';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 32px;
color: #4F4F4F;
}

.bouton_basdepage
{
display: flex;
justify-content: space-between;
margin-top: 70px;
}

/* Bouton sommaire*/

.sommaire1
{
position: absolute;
width: 103px;
height: 27px;
margin-top: 67px;
margin-left: 35.5px;
font-family: 'Scope One';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 28px;
text-align: center;
color: #4F4F4F;
}

.imageprecedent
{
position: absolute;
margin-top: 9px;
margin-left: 58px
}

.sommaire3
{
width: 174px;
height: 109px;
margin-top: 4px;
margin-left: 2px;
border: 2px solid #E8E6D9;
background: #FFFFFF;
}

.sommaire3:hover
{
width: 174px;
height: 109px;
margin-top: 4px;
margin-left: 2px;
border: 2px solid #9BED39;
background: #FFFFFF;
}

.sommaire4
{
width: 178px;
height: 117px;
position: relative;
background-color: white;
padding: 10px;
}

/* Bouton sommaire*/


/* Bouton cours suivant*/

.courssuivant1
{
position: absolute;
width: 149px;
height: 27px;
margin-top: 67px;
margin-left: 12.5px;
font-family: 'Scope One';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 28px;
text-align: center;
color: #4F4F4F;
}

.imagesuivant
{
position: absolute;
margin-top: 9px;
margin-left: 58px
}

.courssuivant3
{
width: 174px;
height: 109px;
margin-top: 4px;
margin-left: 2px;
border: 2px solid #E8E6D9;
background: #FFFFFF;
}

.courssuivant3:hover
{
width: 174px;
height: 109px;
margin-top: 4px;
margin-left: 2px;
border: 2px solid #9BED39;
background:  #FFFFFF;
}

.courssuivant4
{
width: 178px;
height: 117px;
position: relative;
background-color: white;
padding: 10px;
}

/* Bouton cours suivant*/

.suiveznous
{
margin-top: 25px;
display: flex;
justify-content: center;
font-family: 'Scope One';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 28px;
text-align: center;
color: #000000;
}

.reseauxsociaux
{
display: flex;
justify-content: center;
margin-top: 11px;
}

.clicreseaux
{
margin-right: 8px;
border: 2px solid #FFFFFF;
box-sizing: border-box;
}

.clicreseaux:hover
{
border: 2px solid #9BED39;
border-radius: 33px;
}


.page

{
padding: 20px;
}

.contenu

{
width: 750px;
margin: auto;
}

.img

{
margin: auto;
display: flex;
justify-content: center;
}

.imageok

{
width :750px;
height:auto;
}



.intro
{
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  text-align: center;
  width: 100%;
  color: #5B5B5B;
}

p{
  font-size: 18px;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 22px;
  line-height: 34px;
  width: 100%;
text-align: justify;
color: #1E1E1E;
}


.titre_jaune {
    font-family: 'Poppins';
    font-size: 48px;
    font-weight: 700;
    color: #F4DC05;
    width: 750px;
}

.titre_bleu {
    font-family: 'Poppins';
    font-size: 48px;
    font-weight: 700;
    color: #5DC4F0;
    width: 750px;
}


h2 {
    font-family: 'Noto Sans';
    font-size: 24px;
    font-weight: 600;

}


@media all and (max-width: 500px)
{

#conteneurlogo
{
display: flex;
justify-content: center;
margin-top: -72px;

}

body
{
 margin: 0;
 }
 
.alignement_gain_connexion
{
display: flex;
flex-direction: column-reverse;
align-items : flex-end;
margin-top: 10px;
}

.alignement_connexion
{
margin-left: 3px;
}

.alignement_gain
{
margin-top : 25px;
}



.carre_gain
{
width: 41px;
height: 63px;
background: #FFFFFF;
border: 2px solid #F3F3F0;
border-radius: 4px;
}

.nombre_gain
{
margin-left:-1px;
}

.elements_logo_nombre
{
display: flex;
flex-direction: column;
margin-top: 4px;

}


.carrelogo
{

width: 112px;
height: 131px;
background: #FFFFFF;

}

.carreorange
{
position: absolute;
margin-left: 13px;
margin-top: 11px;
width: 25px;
height: 25px;
background: #F19300;
border-radius: 5px;

}

.carrejaune
{
position: absolute;
margin-left: 13px;
margin-top: 43px;
width: 52px;
height: 52px;
background: #FFDD00;
border-radius: 5px;

}

.carrevert
{
position: absolute;
margin-left: 45px;
margin-top: 11px;
width: 54px;
height: 25px;
background: #69C200;
border-radius: 5px;

}

.carrebleu
{
position: absolute;
margin-left: 74px;
margin-top: 43px;
width: 25px;
height: 52px;
background: #41B2E5;
border-radius: 5px;
}

.nutripixi
{
position: absolute;
margin-left: 18px;
margin-top: 105px;
width: 80px;
height: 27px;
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-size: 21px;
line-height: 25px;
color: #B3B3B3;
}

.slogan
{

width: 192px;
margin-top: 23px;
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 20px;
text-align: center;
color: rgba(179, 179, 179, 0.77);
}

.conteneurslogan
{
display: flex;
justify-content: center;
}

.menublanc1
{
margin-right:28px;
}

.menublanc2
{
margin-right:28px;
}

.conteneurmenu
{
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 29px;
}

.titreserie
{
margin-top: 19px;
display: flex;
justify-content: center;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 21px;
line-height: 25px;
text-align: center;
color: #4F4F4F;
text-transform: uppercase;
}

.contenu

{
width: 100%;
margin: auto;
}

.img

{
display: flex;
justify-content: center;
}

.imageducours

{
width: 95%;
}

.imagecours
{
width: 90%;
height: auto;
border: 2px solid #F3F3F0;
border-radius: 10px;
text-align: center;
}

.titre_bleu {
    margin-top: 17px;
    font-family: 'Poppins';
    font-size: 28px;
    font-weight: 700;
    color: #5DC4F0;
    width: 98%;
    text-align: center;
}

.titre_jaune {
    margin-top: 17px;
    font-family: 'Poppins';
    font-size: 28px;
    font-weight: 700;
    color: #5DC4F0;
    width: 98%;
    text-align: center;
}

h2 {
    font-family: 'Noto Sans';
    font-size: 24px;
    font-weight: 600;
}

.placementindications
{
display: flex;
justify-content: center;
margin-top: 43px;
}

.indications
{
padding-top: 20px;
width: 90%;
height: 80px;
background: #F3F3F0;
text-align: center;
}

.indicationstexte
{
padding: 10px;
font-family: 'Scope One';
font-style: normal;
font-weight: 400;
font-size: 17px;
line-height: 30px;
color: #000000;

}

.lecteur
{
border: none; 
width:90%; 
height:500px;
}

.alignboutoncommencer
{
display: flex;
justify-content: center;
margin-top: 5px;
}

.boutoncommencer
{
margin-top: 30px;
width: 330px;
height: 59px;
text-align: center;
background: #9BED39;
border-radius: 27px;
line-height: 59px;
}

.boutoncommencer:hover
{
background: #A4FF39;
}

.bouton_basdepage
{
display: flex;
justify-content: center;
margin-top: 70px;
}

/* Bouton sommaire*/

.sommaire1
{
position: absolute;
width: 100px;
height: 27px;
margin-top: 76px;
margin-left: 6px;
font-family: 'Scope One';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 28px;
text-align: center;
color: #4F4F4F;
}

.imageprecedent
{
position: absolute;
margin-top: 5px;
margin-left: 30.7px
}

.sommaire3
{
width: 120px;
height: 124px;
margin-top: 5px;
margin-left: 3.5px;
border: 2px solid #E8E6D9;
background: #FFFFFF;
border-radius: 7px;
}

.sommaire3:hover
{
width: 120px;
height: 124px;
margin-top: 5px;
margin-left: 3.5px;
border: 2px solid #9BED39;
background:  #FFFFFF;
border-radius: 7px;
}

.sommaire4
{
width: 127px;
height: 134px;
position: relative;
background-color: white;
margin-left: 30px; 
}

/* Bouton sommaire*/


/* Bouton cours suivant*/

.courssuivant1
{
position: absolute;
width: 82px;
height: 27px;
margin-top: 63px;
margin-left: 19px;
font-family: 'Scope One';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 28px;
text-align: center;
color: #4F4F4F;
}

.imagesuivant
{
position: absolute;
margin-top: 5px;
margin-left: 31.01px
}

.courssuivant3
{
width: 120px;
height: 124px;
margin-top:5px;
margin-left: 3.5px;
border: 2px solid #E8E6D9;
border-radius: 7px;
background: #FFFFFF;
}

.courssuivant3:hover
{
width: 120px;
height: 124px;
margin-top: 5px;
margin-left: 3.5px;
border: 2px solid #9BED39;
background:  #FFFFFF;
border-radius: 7px;
}

.courssuivant4
{
width: 178px;
height: 117px;
position: relative;
background-color: white;
}

.imageok

{
width :105%;
height:auto;
}

/* Bouton cours suivant*/

.bande
{
display: none;
}

}