html {
   scroll-behavior: smooth;
   
}

body {
    font-family: 'roboto';
    font-size: 14px;
	background-color:#fff;

	
}
*{
	margin:0;
	padding:0;
}
.custom-file-input ~ .custom-file-label::after {
    content: "Choisir";
	font-family: 'roboto';
}
/*.navbar{
	box-shadow: rgb(34 34 43 / 8%) 0px 3px 11px 0px!important;
}*/
.navbar-marketing .navbar-toggler {
    color:#1565C0;
	font-family: 'roboto';
}

.btn-teal:hover {
    color: white;
    background-color:#1565C0;
    border-color: #1565C0;
	font-family: 'roboto';
}
a:not([href]):hover {
    color: #1565C0;
}
/*UNIQUEMENT POUR LE BOUTON INSCRIPTION*/
.green-inscription:hover{
	background-color:#42b72a;
	border-style:#fff;
}


/*FIN*/


.img-don {
    background-color: #23B2F3;
    background-size:cover;
    background-repeat:no-repeat;
    height: unset;
    /*padding-bottom: 3rem;*/
}

.navbar-logo {
    width: 100%;
}
.navbar .container,
.navbar .container-fluid,
.navbar .container-sm,
.navbar .container-md,
.navbar .container-lg,
.navbar .container-xl {
  display:inline-block;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: justify;
          /*justify-content: space-between;*/
}
.navbar-brand {
  display: inline-block;
  /*padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;*/
  margin-right: 0rem;
  font-size: 1.25rem;
  width:10rem;
  height:100%;
  white-space: nowrap;
}
footer{
	background-color:#1565C0;
}
.pt-4{
	background-color:#1565C0;
}
.bg-dark{
		background-color:#1565C0;
}
.col-sm-6 .col-md-3 .pb-4{
	background-color:#1565C0;
	
}
.col .d-flex .justify-content-center{
		background-color:#1565C0;
}

/*pour le bonhom sur les téléphone*/
.icon--white {
    color: #fff;
}
/*fin du bonhome*/
.navbar-marketing.navbar-dark {
    background-color: unset !important;
}

.navbar-marketing.navbar-dark.navbar-scrolled {
    background-color: white !important;
	}

@media (max-width: 991.98px) {
    .navbar-marketing.bg-transparent.navbar-dark {
        background-color: unset !important;
    }

    .navbar-marketing.bg-transparent.navbar-dark.navbar-scrolled {
        background-color: white !important;
    }
}

.navbar-dark .navbar-nav .nav-link {
    color: #1565C0;
	font-weight:700!important;
}
.navbar-dark .navbar-nav .nav-link:hover {
    font-weight:700!important;
    color:#1565C0;
}

.btn-teal {
    color: #1565C0;
    border-color:#1565C0;
}

.page-header-dark {
    background-color: white !important;
	
}

.page-header-dark .page-header-title {
    color: #1565C0;
    font-weight: bolder;
	
}

.bg-dark {
    background-color:#1565C0  !important;
	
}

.btn-primary {
    background-color: #1565C0 !important;
    border-color: #1565C0!important;

}

.wrapper {
    width: 450px;
    padding: 20px;
}

.help-block {
    color: red;
}

.border-bottom {
    border-bottom: #555 2px solid;
}

.bonus-image {
    background-color: #FFAEAD;
    height: 80%;
    background-position: top;
    position: absolute;
    width: 100%;
}
  
.bonus-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
    color: black;
}


.site-content {
    padding-top: 7rem;
}

.index- {
   /* padding-top: 2rem;*/
}

.mobile {
    display: block;
}

.code-kookee {
    padding: 4px;
    border: 2px solid black;
    width: 100%;
    margin: auto;
}

header a {
    font-size: 18px;
	
}

header {
    height: 100vh;
	 font: roboto;
	 

}
.title{
	font-size:1.5em;
}

.page-header-content {
    padding-top: 7rem;
   /* margin-bottom: 0.5rem;*/
   height:100%;
}

.picture
{
    margin-left: 5px;
	width:40px;
	height:40px;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	background-size:cover;
	background-repeat:no-repeat;
    background-position: top;
    border-radius: 50%;
    /*transform: rotate(90deg);*/
	top:2;
	padding-bottom:10px;
}
.login-block {
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
}

/* DEBUT BTN INSCRIPTION */
.raise {
    background-color: #1565C0;
   /* border: 2px solid;*/
    font: inherit;
    line-height: 1;
    margin: 0.5em;
    padding: 1em 2em;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-weight: normal;
	justify-content:center;
	text-decoration:none;
}

.raise {  
    color: white!important;
    transition: 0.25s;
}
.raise:hover,
.raise:focus { 
    border-color: #fff;
    color: white !important;
}

.raise:hover,
.raise:focus {
 /* box-shadow: 0 0.5em 0.5em -0.4em #42b72a;*/
 /* transform: translateY(-0.25em);*/
}
/* FIN BTN INSCRIPTION */
/* DEBUT AVATAR */
.avatar-upload {
    position: relative;
    max-width: 205px;
    margin: 50px auto;
    
}

.avatar-edit {
    position: absolute;
    right: 12px;
    z-index: 1;
    top: 10px;
}

.avatar-input {
    display: none;
}

.avatar-label {
    padding-left: 9px;
    padding-top: 9px;
    display: inline-block;
    width: 34px;
    height: 34px;
    margin-bottom: 0;
    border-radius: 100%;
    background: #FFFFFF;
    border: 1px solid transparent;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    font-weight: normal;
    transition: all .2s ease-in-out;
}

.avatar-label:hover {
    background: #f1f1f1;
    border-color: #d6d6d6;
}


.avatar-preview {
    width: 192px;
    height: 192px;
    position: relative;
    border-radius: 100%;
    border: 6px solid #F8F8F8;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}

.avatar-preview > div {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}
/* FIN AVATAR */
/* DEBUT CARD */
.my-card
{
    position:absolute;
    left:45%;
    top:-20px;
    border-radius:50%;
}

.row-card {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

.row-card > div > .card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.row-card > div > a > .card {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.card-h2 {
    font-size: 20px;
}

.card-h3 {
    font-size: 16px;
}

.card-padding {
    padding-top: 3rem;
}

/* FIN CARD */

.info-h2 {
    font-size: 16px;
}

.info-h6 {
    font-size: 2rem;
    border-radius: 100%;
    border: 1px solid;
    width: 50px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    padding-top: 5px;
}

.info-etape-img {
    width: 80%;
    padding-left: 2rem;
    padding-right: 2rem;
}

.info-g {
    margin-right: auto;
    margin-left: auto;
}

.info-d {
    margin-left: auto;
    margin-right: auto;
}

.text-kookee {
    color: white !important;
}

hr {
    width: 10rem;
    border-top: 3px solid #1f2d41;
    margin-top: 2rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.25rem;
}

h4 {
    
    font-size: 1.15rem;
}

.card-bons-plans {
    border: 1px solid rgba(0,0,0,.125);
    display: flex;
    align-items: center;
}

a#cRetour{
    border-radius:3px;
    padding:10px;
    font-size:15px;
    text-align:center;
    color:#fff;
    background:rgba(0, 0, 0, 0.25);
    position:fixed;
    right:20px;
    opacity:1;
    z-index:99999;
    transition:all ease-in 0.2s;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    text-decoration: none;
  }
  a#cRetour:before{ content: "\25b2"; }
  a#cRetour:hover{
    background:rgba(0, 0, 0, 1);
    transition:all ease-in 0.2s;
  }
  a#cRetour.cInvisible{
    bottom:-35px;
    opacity:0;
    transition:all ease-in 0.5s;
  }
  
  a#cRetour.cVisible{
    bottom:20px;
    opacity:1;
  }

.hidden-mobile {
    display: none;
}

.no-hidden-mobile {
    display: block;
}
@media screen and (max-width:580px){
	.taillephoto{
	width:100%!important;
	height:100%!important;
}
.lesgains{
	flex-direction:column;
}
.lecode12{
	justify-content:center;
}
#search{
	position:center!important;
	width:310px!important;
	
}
.monprofile{
	flex-direction:column;
	justify-content:center;	
}
.commentfaire{
	height:50px!important;
}
/*.monprofile div{
	margin-left:7rem;
	margin-bottom:1rem;
	
}*/
.profilcompte{
	flex-direction:column;
}
}
@media screen and (max-width:580px){
	.navbar-brand{
	margin-left:;
	margin-right:41%;	
	width:100%;
	top:0;
	position:center!important;
	justify-content:center;
	text-align:center;
}
.navbar-logo{
	width:100%;
	height:100%;
	
}
.supprimer{
	display:none;
}
.dropdown-menu.nav-item .dropdown .dropdown-lg{
	display:none;
}
.profilepc{
	display:none;
}
#roundButton{
	margin-right:0.80rem;
}
.closebtn1{
	padding-left:35%;
}
.form1{
	margin-top:10rem;
}
#nom{
	width:90%;
}
.bonplanpc{
	display:none;
}
/*#deroulantmenu ul{
	margin-left:40rem;
}*/
#deroulantmenu{
	top:10rem;
	
}
.bonplansanté{
	position:absolute;
	top:2rem;
}

.taillephoto{
	width:100%;
	height:100%;
}
.lesgains{
	flex-direction:column;
}
.parrainer{
flex-direction:column!important;
	margin-bottom:2rem;
}
.lecode{
	margin-bottom:2rem;
}
.lecode input{
	width:200px!important;
	justify-content:centre;
}
.overlay{
	z-index:1!important;
}
/*.monprofile{
	display:column;
	justify-content:center;
	
}
/*.monprofile div{
	justify-content:center!important;
}*/
.profilcompte{
	flex-direction:column;
}
}
@media screen and  (max-width: 580px) {

    /*.page-header */ .page-header-content .page-header-title {
        font-size: 2.5rem;
    }
	.grid-container{
		width:110%;
		
	}
	.flex-items {
		width:100%;
	}
	.text {
		width:100%;
		
	}
	.marquee-content li{
		width:100%;
		
	}

	
.don p {
	
}
.don img{
	width:250px;
	height:300px;
}
.parrainage{
	 transform: rotate(90deg)
}

.title{
	margin-bottom:1rem;
}
.btnsurimage1{
	width:100%;
}
.titrebp{
	margin-left:0;
	left:0;
	justify-content:left;
	text-align:left;
}
.imageaccueil {
height:364px;
	
}
.texteaccueil{
	height:364px;
}
/*.page-header-content {
    padding-top: 10rem;
	
}*/

.marquee{
	width:100%;
}
.section1{
	right:0;
}
.commente{
	display:none;
}
.commt{
	display:none;
}
.section311{
	display:none;
}
/*pour masquer les informations prsonnelles sur le compte*/
.infopersonnelle{
	display:none;
}




/*pour masquer les images qui défilent sur le pc*/
.section3{
	display:none;
}
.menu{
margin-top:0.3rem;
}



.supprimer{
	display:none;
}
.navbar-brand{
	position:middle;
	justify-content:middle;
	text-align:middle;
	margin-right:38%;
	/*margin-left:20%;*/
	width:8rem;
}
.navbar-logo{
	width:100%;
	height:100%;
}
.pe-connect{
	padding: 0.30rem 0.75rem;

}
.login00{
	
	padding: 0.30rem 0.75rem;
}
.dropdown-menu .nav-item .dropdown .dropdown-lg{
	display:none;
}
.profilepc{
	display:none;
}
#roundButton{
	margin-right:1rem;
}
.
btn1{
	padding-left:38%;
}
.form1{
	margin-top:10rem;
}
#nom{
	width:90%;
}
.bonplanpc{
	display:none;
}
.telpadding img{
	margin-top:0;
}
/*#deroulantmenu ul{
	/margin-left:40rem;
}*/
#deroulantmenu{
	margin-top:10rem;
}
.bonplansanté{
	position:absolute;
	top:4rem;
}
.taillephoto{
	width:100%!important;
	height:100%!important;
}
.envoimail{
	flex-direction:column;
}
.lesgains{
	flex-direction:column;
}
.profile{
	width:100%!important;
}
.parrainer{
flex-direction:column!important;
	margin-bottom:1rem;
}
.lecode{
	margin-bottom:2rem;
	
}
.lecode input{
	width:300px!important;
	
}
/*.monprofile{
	display:column!important;
	justify-content:center;
	
}
/*.monprofile div{
	justify-content:center!important;
}
*/
.profilcompte{
	flex-direction:column;
}
}




@media screen and (min-width:581px)and (max-width:992px) {
    .code-kookee {
        width: 80%;
    }
    
    .img-don {
        background: url('../img/bonus-don.jpeg');
        background-size: cover;
        background-repeat: no-repeat;
        height: 60vh;
        padding-bottom: unset;
    }

    .raise {
        width: 50%;
    }

    .site-content {
        padding-top: 10rem;
    }

    .info-h2 {
        font-size: 16px;        
    }

    .info-h6 {
        font-size: 2rem;
        width: 50px;
        height: 50px;
        padding-top: 5px;
    }
.marquee-content li{
		width:100%;
		
	}
	
.don img{
	width:400px;
	height:400px;
}

.imageaccueil{
	height:50%;
	
}
.texteaccueil{
	height:50%;
}

.accueil{
	height:100%;
}
.section1{
	right:0;
}

.menuToggle .menu{
	display:block;
}
.menuToggle input{
	display:block;
}
.monburger{
	display:block;
}
.section31{
	display:block;
}
.section3{
	display:none;
}
.menu{
	margin-top:0.7rem;
}




::-webkit-scrollbar {
    display: none;
}
.marquee-content li{
		width:100%;
		
}
.iconeconnxion{
	display:block;
}
.supprimer{
	display:none;
}
.navbar-brand{
	width:8rem;
	position:middle;
	justify-content:middle;
	text-align:middle;
	margin-right:43%;
	margin-left:20%;
	top:0;
}
.navbar-logo{
	height:100%;
	width:100%;
}
.pe-connect{
	padding: 0.6rem 3.5rem;
	
}
.login00{
	
	padding: 0.4rem 3.5rem;
}
.ml-auto{
	margin-right:5rem;
}
.dropdown-menu.nav-item .dropdown .dropdown-lg{
	display:none;
}
.profilepc{
	display:none;
}
#roundButton{
	margin-right:2.3rem;
}
.closebtn1{
	padding-left:58%;
}
.bonplanpc{
	display:none;
}
.defile {
	width:447px;
}
/*#deroulantmenu ul{
	margin-left:15rem;
}*/
#deroulantmenu{
	margin-top:10rem;
}
.bonplansanté{
	position:absolute;
	top:5rem;
}
.comm{
	width:500px;
}
.taillephoto{
	width:400px!important;
	height:177px!important;
}
.flex-items{
	flex-direction:column!important;
}
.parrainer{
flex-direction:column!important;
	margin-bottom:2rem;
}
.lecode{
	margin-bottom:2rem;
	
	margin-right:1rem;
}
.lecode input{
	width:300px;
}

.parrainage{
	 transform: rotate(90deg)
}
#search{
	
	width:350px!important;
	position:center!important;
	text-align:center;
}
/*.monprofile{
	display:column!important;
	justify-content:center!important;
}
.monprofile div{
	justify-content:center;
}*/
.section311{
	display:none;
}
.profilcompte{
	flex-direction:column;
}


}
/*le point de rupture */
@media screen and (min-width: 993px) and (max-width:2900px){
    .border-mdp {
        border-left: black 1px solid;
    }

    .code-kookee {
        width: 100%;
    }

    .site-content {
        padding-top: 7rem;
    }

    .info-h2 {      
        padding-bottom: 1rem;
    }

    .info-etape-img {
        width: 70%;
    }
	.marquee-content li{
		width:100%;
		
	}
	
   .don img{
	width:400px;
	height:400px;
}
.flex-items {
		width:100%;
	}
	.imageaccueil {
		width:100%;
}
.texteaccueil{
	width:100%;
}
.accueil{
	height:100%;
}


.menuToggle .menu{
	display:block;
}
.menuToggle input{
	display:block;
}
.burger{
	display:block;
	color:blue;
}

.section31{
	display:none;
}
.section3{
	display:block;
}
.monburger{
	display:block;
}

::-webkit-scrollbar {
    display: none;
}
.pe-connect{
	display:none;
}
.iconeconnxion{
	display:none;
}
.supprimer{
	display:block;
}
.pe-connect{
	padding: 0.6rem 5rem;
	
}
.login00{
	
	padding: 0.4rem 5rem;
}
#myNav{
	display:none;
}
.burger{
	display:none;
}
#roundButton{
	display:none;
}
.imagedefilant{
	margin-left:38rem;
}
.bonplanmobile{
	display:none;
}
.defile {
	width:60%;
}
.telpadding img{
	margin-top:4rem;
}
.bonplansanté{
	position:absolute;
	top:22rem;
}
.comm{
	width:900px;
}
.monprofile{
	display:flex!important;
	justify-content:center;
}

}



.login00{
	right:0;
	justify-content:center;
	/*background-color:#fff;*/
	float:right;
	/*margin-left:80px;*/
	position:fixed;
	top:0rem;
}


.pe-connect {
	right:0;
	justify-content:center;
	/*background-color:#fff;*/
	float:right;
	/*margin-left:80px;*/
	position:fixed;
	top:0.4rem;
 /* right: 0;
  
  z-index: 1030;*/
 
}
.pe-connect li{
	top:0;
	
}
.nav-item .dropdown .dropdown-lg  .pe-connect{
	top:0;
	margin-left:0;
	position:fixed;
}
.pe-connect .button-pe-connect {
  
  /* display: inline-block;
  padding: 6px 10px 5px 13px;
  border-radius: 100px;
 border: 2px #1b2e57 solid;*/
  font-weight: bolder;
  text-decoration: none;
  /*background-color:#fff;*/
}
.pe-connect .button-pe-connect:hover, .pe-connect .button-pe-connect:focus {
  text-decoration: none;
   /*background-color:#fff;*/
}
.pe-connect .button-pe-connect:hover {
 /* box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);*/
   /*background-color:#fff;*/
}
.pe-connect .button-pe-connect:focus {
  opacity: 0.7;
   /*background-color:#fff;*/
}
.pe-connect .button-pe-connect.is-blue {
 /* background-color: #fff;*/
  color: #fff;
}
.pe-connect .button-pe-connect.is-white {
  /*background-color: #fff;*/
  color: #1b2e57;
}
.pe-connect .button-pe-connect .icon-pe-connect,
.pe-connect .button-pe-connect  {
  display: inline-block;

  
}
.pe-connect .button-pe-connect .icon-pe-connect {
  vertical-align: right;
}
.pe-connect .button-pe-connect  {
  padding: 0 10px;
 
}
/* icone de connexion*/
/*pour le formulaire de contact*
.form1{
	width:60%;
	background-color:#d9d9d9;
	height:70%;
	margin-top:10rem;
	
}
.contenu{

}
/*.textaccueil{
   display:flex;  
}*/

/*image teste*/
.texte1{
	
	justify-content:left;
	text-align:left;
}
.texte1 h2{
	margin-right:15rem;
	text-align:left;
	justify-content:left;
}
.don{
	width:100%;
}
.don p{
	text-align:left;
	justify-content:center;
	
}
.bonplanmobile{
	width:100%;
}

#nom{
	border-radius: 50px ;
	border-color:none;
	border-style:solid;
	width:250px;
	height:40px;
	justify-content:center;
	text-align:center;
	
	
}
#prenom{
	border-color:none;
	border-style:solid;
	border-radius: 50px;
	width:250px;
	height:40px;
	justify-content:center;
	text-align:center;
	
}
#telephone{
	border-color:none;
	border-style:solid;
	border-radius: 50px;
	width:250px;
	height:40px;
	justify-content:center;
	text-align:center;
	
}
#code{
	border-color:none;
	border-style:solid;
	border-radius: 50px ;
	width:250px;
	height:40px;
	justify-content:center;
	text-align:center;
	color:gray;
}
#envoi{
	border-color:blue;
	border-style:solid;
	border-radius: 50px;
	width:250px;
	height:40px;
	justify-content:center;
	text-align:center;
	
	background-color:blue;
}
.disponibilité {
	
	border-style:solid;
	border-radius: 50px;
	width:250px;
	height:40px;
	justify-content:center;
	text-align:center;
	
}
.dispo{
	border-radius: 50px;
	border-style:solid;
	font-size:36px;
	justify-content:ecnter;
	text-align:center;
}

/*fin formulaire de contact*/


.telpadding{
	
}

	
.centre{
	justify-content:center;
	margin-left: auto;
  margin-right: auto;
	text-align:center;	
	width:100%;	
}
.btnsurimage{
	width:180px;
	height:40px;
	justify-content:center;
	text-align:center;
	border-radius: 50px;
	margin-bottom:1rem;
}
.btnsurimage1{
	width:250px;
	height:40px;
	justify-content:center;
	text-align:center;
	border-radius: 50px;
	margin-bottom:1rem;
	margin-right:20px;
}
.form-control{
	border-radius: 50px;
	background-color:#fff;
}
.btnconnexion{
	border-radius: 50px;
	background-color:#fff;
}
.button-1{
	
	
}
/*le bouton d'accueil*/
.btnaccueil{
	width:350px;
	height:50px;
	justify-content:center;
	text-align:center;
	border-radius: 50px;
}
/*fin du bouton d'accueil*/

/*margin des titre des bons plans*/

/*fin des titres */
/*les images qui defilent sur la page d'accueil*/
.grid-container {

    display: grid;
    grid-template-rows:repeat(2, 1fr);
	position:center;
    justify-content: center;
    justify-items: center;
	margin-bottom:0.3rem;
	
	left:0;
}

.flex-items {
    display:flex;
    justify-content: center;
	width:100%; 
	padding-bottom:0.2rem;
	
}
.accueil{
	height:100%;
}

/* // style */

.pic {
    position: relative;
    padding:0.3rem;
    /* height: 300px; */
    overflow: hidden;
	left:0;
	
}

.text {
    position: absolute;
    bottom: 0;
    height: 0;
    text-align: left;    
    background: white;
    transition: height 0.2s ease-out;   
	display:flex;
	width:100%;
	
}
.text p{
	margin-left:14px;
	margin-right:14px;
	padding-bottom:10px;
	text-align:left;
	font-size:18px;
	margin-top:1.5rem;
	/*margin-right:6rem;*/
	width:80%;
}
.text a{
	margin-top:1.4rem;
}
.pic:hover > .text {
    height: 33%;
}

/*pour les textes sur les nouvelles pages */
.textbp {
    position: absolute;
    bottom: 0;
    height: 0;
    text-align: left;    
    background: white;
    transition: height 0.5s ease-out;   
	justify-content:left;
	width:430px;
	
	
}
.textbp p{
	
}

.pic:hover > .textbp {
    height: 100%;
}
/* fin */

@media screen and (max-width: 900px) {
    .flex-items {
        display: flex;
        flex-direction:column;
		width:100%;
    }
	.marquee-content li{
		width:100%;
		/*margin-left:0.8px;*/
	}
	
	
}
@media screen and (max-width: 450px) {
img {
    max-width: 100%;
}
.text {
    max-width: 100%;
}
.marquee-content li{
		width:100%;
		margin-left:0.6em;
	}

}
/*fin des slides*/
/*debut des sections sur la page d'accueil*/
.fontbonplan{
	background-color:#FFFAFB;
	right:0;
}
.bons-plan{
	padding-bottom:4rem;
}

header{
	height:100%;
	margin-bottom:4rem;
}
.section1{
	margin-bottom:4rem;
	background-color:white;
	right:0;
	
}
.title{
	margin-bottom:4rem;
	font-weight:bolder;
}
.section0{
	top:0;
	margin-bottom:4rem;	
	
}

.title1{
	margin-bottom:1px;
}

.section2{
	
	margin-bottom:4rem;
	right:0;
}
.section3{
right:0;
	margin-bottom:5rem;
}
.section31{
	margin-bottom:4rem;
	right:0;
}

.section4{
	right:0;
	margin-bottom:4rem;
	justify-content:center;
	
}
.section5{

	margin-bottom:4rem;
	right:0;
}
.textaccueil{
	justify-content:center;
	text-align:center;
	display:flex;
	width:100%;
	
}

/*.page-header-dark{
	margin-bottom:2rem;
}*/
.unique{
	display:flex;
}


/*les images qui défilent */
:root {
  --marquee-width: 100vw;
  --marquee-height: 30vh;
   --marquee-elements:34;  
  --marquee-elements-displayed:6;
  --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
  --marquee-animation-duration: calc(var(--marquee-elements) * 2s);
}

.marquee {
  width: var(--marquee-width);
  height: var(--marquee-height);
  background-color: #fff;
 /* color: #eee;*/
  overflow: hidden;
  position: relative;
 
 
}


.marquee:before, .marquee:after {
  position: absolute;
 
  width: 10rem;
  height: 100%;
  content: "";
  z-index: 1;
}
.marquee:before {
  left: 0;
  background: linear-gradient(to right,  0%, transparent 100%);
}
.marquee:after {
  right: 0;
  background: linear-gradient(to left,  0%, transparent 100%);
}
.marquee-content {
  list-style: none;
  height: 100%;
  display: flex;
  animation: scrolling var(--marquee-animation-duration)  linear infinite;
  justify-content:center;

 
}
 .marquee-content li img {

 position:center;
 margin-left:0.5rem;

 
}
@keyframes scrolling {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements))); }
}
.marquee-content li {
  display: flex;
  justify-content: center;
  align-items: center;
   text-align: center; 
  flex-shrink: 0;
  width: var(--marquee-element-width);
  max-height: 100%;
  /*font-size: calc(var(--marquee-height)*3/4); /* 5rem; */
  white-space: nowrap;
  margin-top:1rem;
  
 
}

.marquee-content li img {
  width: 100%;
  /* height: 100%; */
/*border: 2px solid #eee;*/}

@media (max-width: 778px) {
  html { font-size: 12px; }
  :root {
    --marquee-width: 100vw;
    --marquee-height: 16vh;
    --marquee-elements-displayed: 3;
  }
  .marquee:before, .marquee:after { width: 1px; }
}
/*fin des images qui défilent*/


/*du code pour le parrainage */
.parrain{
	padding-top:33rem;
}
#texteMailDestinationContainer{
	border:2px solid #f0f0f0;
	border-radius:5px;padding:15px;
	}
	/*fin*/
	/*bons plans défilant */
.carousel{
	width:100%;
}
.carousel-cell {
    width: 100%;
	height:300px;
    }
    /* cell number */
    .carousel-cell:before {
      display: block;
    }
	
/*images défilant sur les bonsplans */
.carouse1{
	width:100%;
}
.carousel-cell1 {
    width: 100%;
	height:350px;
    }
    /* cell number */
    .carousel-cell1:before {
      display: block;
    }
/* fin des défilant */
/*les commentaires*/
.commentaire{
	width:80%;
	display:flex;
	height:400px;
	justify-content:space-around;
	
}
.commente{
	width:380px;
	height:380px;
	
	 
	margin:10px;

transition: all 1s ease;
}
.commenteur{
	-moz-box-shadow: 0px 0px 10px #343434;
	-webkit-box-shadow: 0px 0px 10px #343434;
	-o-box-shadow: 0px 0px 10px #343434;
	
	overflow:hidden;
	-webkit-border-radius:50px;
	-moz-border-radius: 50%;
	border-radius:50px;
	width:80px;
	height:80px;
}
/*teste */
.menu--user .list {
    background: #fff;
    width: 100%;
}
.inline-block-txt {
    display: inline-block;
}
.list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0;
    padding: 0;
}
.list {
    list-style-type: none;
}
ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
* {
    box-sizing: border-box;
}
user agent stylesheet
ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}
.nav--menu-user {
    position: relative;
    cursor: pointer;
}


.menuToggle
{
  display: block;
  position: relative; 
  -webkit-user-select: none;
  user-select: none;
  justify-content:center;
  background-color:#fff;
  float:bottom;
	/*margin-left:80px;*/
  position:fixed;
  top:1rem;
  display: inline-block;
  vertical-align: bottom;
}

.menuToggle a
{
  text-decoration: none;
  color: #232323;
  transition: color 0.3s ease;
}

.menuToggle a:hover
{
  color: #1565C0;
}


.menuToggle input
{
  display: block;
  width: 65px;
  height: 50px;
  position: absolute;
  top: -7px;
  left: -10px;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 1; /* and place it over the hamburger */
 /* -webkit-touch-callout: none;*/
  color:#1565C0;
  top:0.5rem;
}

/*
 * Just a quick hamburger
 */
.menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  top:1rem;
  background: #1565C0;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.3s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.3s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.40s ease;
}

.menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

.menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
.menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #1565C0;
}

/*
 * But let's hide the middle one.
 */
.menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
 /* transform: rotate(0deg) scale(0.2, 0.2);*/
}

/*
 * Ohyeah and the last one should go the other direction
 */
.menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
.menu
{
  position: absolute;
  width:1000px;
 margin: -100px 0 0 -50px;
  
 margin-top:1rem;
  
  background: #fff;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
 /* transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);*/
}

.menu li
{
  /*padding: 10px 0;*/
  font-size: 22px;
}

/*
 * And let's slide it in from the left
 */
.menuToggle input:checked ~ ul
{
  transform: none;
}
/*fin menu burger*/
/*bouton qui défile */
.imagedefilant{
	 position: absolute;
    bottom: 0;
    height: 0;
    text-align: center;    
	z-index:1;
    transition: height 0.5s ease-out;   
	width:20%;
	justify-content:center;
	
	
}
.imagedefilant p {
	justify-content:center;
	
	text-align:center;
}
.carousel-cell:hover > .imagedefilant {
    height:100%;
}
.Carousel-cell{
	 position: relative;
    
    /* height: 300px; */
    overflow: hidden;
	margin:0.3rem;
	
}


/* menu déroulant */
#deroulantmenu{
	 position:fixed;
    
	 font-weight:700;
      height: 50px; 
      margin: 0;
		z-index:2;
	 
      box-sizing:border-box;
      background-color: #fff;
	  overflow-x:scroll;
	  white-space: nowrap;
    list-style-type: none;
	display:flex;
	justify-content:center;
	box-shadow: rgb(34 34 43 / 8%) 0px 3px 11px 0px;
	border-top:1px solid #dadce0;
	border-bottom:1px solid #dadce0;
}
.sousmenu{
	box-shadow: rgb(34 34 43 / 8%) 0px 3px 11px 0px;
}
#deroulantmenu ul li{
	
	margin:1rem;
}
#deroulantmenu ul li a{
	font-weight:400;
}
/*#deroulantmenu ul li a:fucus{
	background-color:red;
}


/*	.menuderoulant{
      padding: 0;
      margin: 0;
       display: flex;
    justify-content: left;
    margin: 0px auto;
    max-width: 1900px;
    padding-left: 0px;
    overflow-x: scroll;
    white-space: nowrap;
    list-style-type: none;
	overflow-y: hidden;
	
}
      
      .menuderoulant li{
      height: 50px;
      width: 135.8px; 
      float: left;  
      text-align: center; 
      list-style: none;  
      padding: 0;
      margin: 0;
      background-color: #fff;
	  
      }
      .menuderoulant a{							
      padding: 10px 0;  
      /*border-left: 1px solid #ccc9c9;*
      text-decoration: none; 
      font-size:14px;
      display: inline-block;
	  justify-content:center;
	  height:100%;
	  margin:10px;
	  color:464650;
      }
      .menuderoulant li:hover, a:hover {
       /*background-color: blue;*
	   
      } 
      .menuderoulant li ul{
      display: none;
      height: auto;									
      margin: 0; 
      padding: 0; 
      }				
      .menuderoulant li:hover ul{
      display:inline-block;
      }
      .menuderoulant li ul li {
      background-color: #fff;
      } 
      .menuderoulant li ul li a{
      /*border-left: 1px solid #; 
      border-right: 1px solid #444444; 
      border-top: 1px solid #c9d4d8; 
      border-bottom: 1px solid #444444; *
      }
      .menuderoulant li ul li a:hover{
      background-color: #fff;
      }*/
.fixed-top .navbar-scrolled{
  background-color: #fff !important;
  transition: background-color 20ms linear;
  
}
/*le nouveau menu burger*/
.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
 background-color: rgba(94, 96, 94, 0.4);

  /*background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);*/
  overflow-x: hidden;
   overflow-y: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 0;
 
  text-align: left;
  width:80%;
  height:100%;
  
}

.overlay a {

  text-decoration: none;
  
 
  display: block;
  transition: 0.3s;
  
}

.overlay a:hover, .overlay a:focus {
 
  text-decoration:none;
}

.overlay .closebtn {
  position: absolute;
  top: 0;
  left:70%;
  font-size: 30px;
}
/*-------------------------------le profile------------------------------*/

#roundButton {
           
           
            width: 50px;
            height: 50px;
			text-align:center;
            justify-content:center;
            outline: none;
           transition: 0.5s;
           right:0;
           position: absolute;
        }
 
        #roundButton:hover {
            
            cursor: pointer;
            
            
        }
 
        #roundButton:active {
           
            
        }
#flyoutMenu {
    width: 100%;
    height: 100%;
  background-color: rgba(94, 96, 94, 0.4);

    position: fixed;
    top: 0;
    right: 0;
    transform: translate3d(110vw, 0, 0);
   /* transition: transform .5s cubic-bezier(0, .52, 0, 1);*/
	justify-content:right;
	text-align:right;
	transition: 0.5s;
	 z-index: 1;
}
 
#flyoutMenu  a {
    color: #818181;
  display: block;
  transition: 0.3s;
}
 #flyoutMenu a:hover, #flyoutMenu a:focus {
 
  text-decoration: none;
}
/*#flyoutMenu  a:hover {
    text-decoration: none;
} */  
#flyoutMenu.show {
    transform: translate3d(0vw, 0, 0);
}   

 

/*les image défilant sur les bons plans du mobile*/

/*les autres */
.tech-slideshow {
  height: 350px;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.tech-slideshow > div {
  height: 100%;
  width: 2526px;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: translate3d(0, 0, 0);
}
.tech-slideshow .mover-1 {
  animation: moveSlideshow 55s linear infinite;
}
.tech-slideshow .mover-2 {
  opacity: 0;
  transition: opacity 0.9s ease-out;
  background-position: 0 -200px;
  animation: moveSlideshow 25s linear infinite;
}
.tech-slideshow:hover .mover-2 {
  opacity: 1;
}

@keyframes moveSlideshow {
  100% { 
    transform: translateX(-66.6666%);  
  }
}
/*un autre */
#slideshow {
	position: relative;
	width: 100%;
	height: 200px;
	
	border: 1px solid #ddd;
	background: #FFF;
	/* CSS3 effects */
	background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	border-radius: 2px 2px 2px 2px;
	box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}
 
/* avanced box-shadow
 * tutorial @
 * https://www.creativejuiz.fr/blog/les-tutoriels/ombre-avancees-avec-css3-et-box-shadow 
*/
#slideshow:before,
#slideshow:after {
	position: absolute;
	
	z-index: -100;
	width: 100%;
	
	
	background: rgba(0,0,0,0.1);
	
	box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
}
#slideshow:before {
	left:0;
	}
#slideshow:after {
	right:0;
	
}
#slideshow .containermobile {
	position:relative;
	width: 100%;
	height: 200px;
	overflow: hidden;
}
	
/* on prévoit un petit espace gris pour la timeline */
#slideshow .containermobile:after {
	position:absolute;
	
	width: 100%;
	
	background: #999;
}
/* 
   le conteneur des slides
   en largeur il fait 100% x le nombre de slides
*/
#slideshow .slider {
	position: absolute;
	display:inline-block;
	width: 800%;
	height: 200px;
}

/* annulation des marges sur figure */
#slideshow figure {
	position:relative;
	display:inline-block;
	
}
/* petit effet de vignette sur les images */
#slideshow figure:after {
	position: absolute;
	display:block;
	
	
}
/* styles de nos légendes */
#slideshow figcaption {
	position:absolute;
	
	
	text-align:center;
	
	
	color: #555;
	
}
/* fonction d'animation, n'oubliez pas le prefixer ! */
@keyframes slider {
	0%, 20%, 100%	{ left: 0 }
	25%, 45%		{ left: -100% }
	50%, 70%		{ left: -200% }
	75%, 95%		{ left: -300% }
}
/* complétez le sélecteur : */
#slideshow .slider {
	/* ... avec la propriété animation */
	animation: slider 5s infinite;
}
#timeline {
	position: absolute;
	background: #999;
	
	background: rgb(214,98,13);
	background: rgba(214,98,13,.8);
	width: 0;
	/* fonction d'animation */
	animation: timeliner 32s infinite;
}
@keyframes timeliner {
	0%, 25%, 50%, 75%, 100%	{ width: 0;		}
	20%, 45%, 70%, 90%		{ width: 640px;	}
}
@keyframes figcaptionner {
	0%, 25%, 50%, 75%, 100%						{ bottom: -55px;	}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ bottom: 5px;		}
}
/* ajouter à l'élément : */
#slideshow figcaption {
	/* ... la propriété animation */
	animation: figcaptionner 32s infinite;
}
#slideshow .commands {
	position: absolute;
	
	font-size: 1.3em;
	color: #aaa;
	text-decoration:none;
	background-color: #eee;
	background-image: linear-gradient(#fff,#ddd);
	text-shadow: 0 0 1px #aaa;
	border-radius: 50%;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
 
#slideshow .prev { left: -48px; }
#slideshow .next { right: -48px; }
 
#slideshow .commands { display:none; }
#slideshow .commands1 {	display: block; }




/*c'est les images qui défile à la fin de chaque section je vais le modifer */
.slideshow {

  

  width:50%;

   overflow: hidden;

   border: 3px solid #F2F2F2;

}

.slideshow ul {

    /* 3 images donc 4 x 100% */

   width: 1000%;

   height: 300px;

   padding:0; margin:0;

   list-style: none;

}

.slideshow li {

   float: left;

}
/*fin */
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}



div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 10s slidy infinite; 
}
/*logo sur la page santé*/
.partenairelogo img{
	margin:2px;
}
/*slider sur la page habitation*/
#slider1{
	display:flex;
    justify-content: center;
	width:100%; 
	padding-bottom:0.2rem;
}
.comm{
	width:900px;
}
/*confuguration du profile */
.profile{
	display:flex;
	border-color: #fff;
	margin-bottom:1rem;
	margin-top:0;
	width:98%;
	margin-bottom:10px;
	box-shadow: 1px 1px 1px 1px grey;
	position:right;
	justify-content:right;
	
}
.btn-inscris{
	float:left;
	margin-left:2rem;
}
.btn-inscris:hover{
	border-style:#fff;
}
.text-left{
	font-size:16px;
	font-weight:400;
}
.text-center{
	
	font-weight:400!important;
}
.titrebp{
	margin-bottom:2rem;
}
.supprimer:hover{
	color:#fff!important;
}
/*POUR METTRE LES TRAITS ENTRE LES LIGNE DU MENU*/
.trait-menu{
	height:50px;
	font-size:18px;
	/*border-top:1px solid #dadce0;*/
	border-bottom:1px solid #dadce0;
	padding-top:1rem;
}
.trait-menu:hover{
	background-color:#1565C0;
	color:#fff;
}
.trait-menupc{
	height:50px;
	font-size:18px;
	/*border-top:1px solid #dadce0;*/
	border-bottom:1px solid #dadce0;
}
.trait-menupc:hover{
	background-color:#1565C0;
	color:#fff;
}
/*pour les écriture du faq*/
.faq{
	font-size:16px!important;
	color:#464650;
}
.parrainer{
	display:flex;
	margin-bottom:2rem;
}
.lecode{
	
	
}
.lecode1 a{
	margin-left:1.5rem;
}

/*pour mettre un OU et le trait*/
.section-divider {
  height: 0;
  border-top: 1px solid #DDD;
  text-align: center;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.section-divider > span {
  color:#464650;
  background: #fff;
  display: inline-block;
  position: relative;
  padding: 0 20px;
  top: -11px;
  font-size: 16px;
}
/*le text sur les 8 pages bons plans */
.textbonplan{
	font-size:16px;
	margin-top:5px;
	margin-left:5px;
	margin-right:5px;
}
/*le popup sur le mobile*/
.popupmobile{
	border:none;
	background-color:#fff;
}
/* teste pour les images qui défilent */


/*POUR LE MON PROFILE*/

.monprofile div{
	justify-content:center!important;
	text-align:center;
}

/*Fin de MON PROFILE*/
/*Espace entre les elements du footer*/
.text-light{
	/*margin-bottom:1rem!important;*/
}
#scroll_to_top {
  position: fixed;
  width: 50px;
  height: 50px;
  bottom: 18px;
  right: 18px;
}
#scroll_to_top img {
  width: 50px;
}
/*Fin espace entre les element du footer */


.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border-bottom:1px solid #fff;
  text-align: left;
  outline: none;
  font-size: 15px;
  /*transition: 0.4s;*/
  
}

.active, .accordion:hover {
  /*background-color: #ccc; */
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  /*overflow: hidden;*/
  border-style:solid #fff;
}
/*superposition du texte et de l'image pour la page faq*/
.contenant {
  position: relative;
  text-align: center;
 
}

.texte_centrer {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
}	




#mycal .dijitCalendarDisabledDate {
    background-color: #333;
    text-decoration: none;
}

#mycal .dijitCalendarContainer {
    margin: 25px auto;
}
/*pour tester les popup*/
#ac-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("images/pop-bg.png") repeat top left transparent;
    z-index: 1001;
}
#popup {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 18px;
    -moz-border-radius: 18px;
    -webkit-border-radius: 18px;
    height: 361px;
    margin: 5% auto;
    position: relative;
    width: 597px;
}