/* Attributs généraux */

@font-face {
    font-family: 'Louis George Cafe Light';
    src: url('fonts/louis_george_cafe/LouisGeorgeCafeLight.woff2') format('woff2'),
		url('fonts/louis_george_cafe/LouisGeorgeCafeLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Louis George Cafe';
    src: url('fonts/louis_george_cafe/LouisGeorgeCafe.woff2') format('woff2'),
        url('fonts/louis_george_cafe/LouisGeorgeCafe.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/*Ambroise Std Bold
font-family: ambroise-std, serif;
font-weight: 700;
font-style: normal;*/

html{
	width: 100vw;
	overflow-x: hidden;
}

body{
	font-family: 'Louis George Cafe Light';
	background: #FCFAF7;
	color: #707070;
	overflow-x: hidden; /*coupe tout ce qui dépasse sur x=pour éviter les ascenceurs horizontaux*/
	width: 100vw;
}

img{
	max-width: 100%; /*pour adapter les images en fonction de la taille de l'écran*/
	height: auto; /* ->facilite le responsive*/
}

.container-fluid{
	max-width: 1500px;
}

.titre_blanc{
	font-family: ambroise-std, serif;
	font-size: 7vw;
	text-align: center;
	color: #FFFFFF
}

.titre{
	font-family: ambroise-std, serif;
	font-size: 4.5vw;
	text-align: center;
	position: relative;
	padding: 60px 0 80px 0;
}

/*------------nav------------*/

header{
	background: #FCFAF7;
	position: -webkit-sticky; /*pour avoir le "sticky menu"*/
	position: sticky;
	top: 0;
	z-index: 999;
	padding: 15px 0;
	width: 100%;
}

.bg-light {
  background-color: #FCFAF7 !important;
}

.navbar-brand{
	width: 200px;
	height: auto;
}

.navbar-expand-lg .navbar-collapse {
	justify-content: end;
}

.navbar-light .navbar-nav .nav-link{
	font-size: 28px;
	color: #707070;
	position: relative;
	padding: 0;
	margin: 0 20px;
}


/*----------------------------------------------PAGE HOME (INDEX)--------------------------------------------------*/
/*-------nav------------*/


#home a.nav-link:after{ /*pour ajouter un trait en hover*/
	content: "";
	position: absolute;
	display: block;
	height: 2px;
	width: 0%;
	background: #E9967A;
	left: 0px;
	transition:all 0.4s;
}

#home a.nav-link:hover:after{
    width: 100%;
	color: #707070!important;
}

#home .navbar-nav li:last-child a{
	background: #E9967A;
	color: #FFFFFF!important;
	padding: 5px 15px!important;
	display: inline-block; /*bénéficier des attributs d"un block mais sur un élément inline*/
}

#home .navbar-nav li:last-child a:hover{
	background: #F4C5B7;
}

#home .navbar-nav li:last-child a:after{
	display: none!important; /*pour enlever le trait en hover uniquement sur ce bouton*/
}


/*------------en-tête blob home------------*/

#home #bg_blob{
	background-color: #f4c5b7;
	height: calc(100vh - 108px);
	position: relative;
}

.blob img{
	position: absolute;
	z-index: 99;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%); /*pour centrer un élément en position "absolute"*/
}

.blob{
	width: 250px;
	margin: auto;
}

#decouvrir{
	color: #FFFFFF;
	font-size: 34px;
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
}

#decouvrir img{
	animation: shake 5s linear 0s infinite normal none;
}

/*keyframe animation flèche bas "decouvrir"*/
@keyframes shake {
  0%,
  100% {
    transform: translateY(0);
  }

  10%,
  30%,
  50%,
  70% {
    transform: translateY(-8px);
  }

  20%,
  40%,
  60% {
    transform: translateY(8px);
  }

  80% {
    transform: translateY(6.4px);
  }

  90% {
    transform: translateY(-6.4px);
  }
}

/*------------blob home------------*/

* {
	box-sizing: border-box; /*espace bordure + padding inclus dans le width (étoile cible TOUS les éléments html) */
}


:root {
	--br-blobby: 50%;
	--br-blobby-before: 50%;
	--br-blobby-after: 50%;
}


.box {
	animation: rotate 5s linear infinite;
	background-color: darksalmon;
	border-radius: var(--br-blobby);
	position: relative;
	height: 250px;
	width: 250px;
	transition: 1s linear;
}

.box::after {
	content: '';
	background-color: darksalmon;
	border-radius: var(--br-blobby-after);
	position: absolute;
	opacity: 0.5;
	top: -2%;
	left: -2%;
	height: 104%;
	width: 104%;
	transition: 1s linear;
}

.box::before {
	content: '';
	background-color: darksalmon;
	border-radius: var(--br-blobby-before);
	position: absolute;
	opacity: 0.5;
	top: -4%;
	left: -4%;
	height: 108%;
	width: 108%;
	transition: 1s linear;
}

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	
	100% {
		transform: rotate(360deg);
	}
}


/*--------------présentation home--------------*/

#presentation{
	padding-top: 60px;
	min-height: calc(100vh - 108px);
}

#home .rond{
	-webkit-border-radius: 50%;
	border-radius: 50%;
	z-index: 100;
	position: relative;
	width: 70%;
}

h1{
	font-family: ambroise-std, serif;
	font-size: 3vw;
	font-weight: 700;
	font-style: normal;
	z-index: 1;
}

.projet{
	font-size: 30px;
	margin: 50px;
}

.btn_orange{
	background: #E9967A;
	color: #FFFFFF!important;
	padding: 5px 15px!important;
	display: inline-block;
}

.btn_orange:hover{
	background: #F4C5B7;
}

.accroche{
	position: relative;
	width: 80%;
	margin: auto;
}

.accroche img{
	z-index: 1;
	margin: 30px;
	width: 25%;
}

.txt_presentation{
	background: #FFFFFF;
	width: 80%;
	margin: -100px auto 40px auto;
	font-size: 23px;
	padding: 150px 60px 50px 60px;
}

.strong{
	font-family: 'Louis George Cafe';
}

#presentation a{
	text-decoration: none;
	color: #707070; 
}

a.lien p:hover{
	text-decoration: underline;
	color: #E9967A;
}



/*--------------rubrique services home--------------*/

.services{
	margin: 0px 35px;
}

#rubrique_services{
	background: #F5EAE7;
	min-height: calc(100vh - 108px);
	position: relative;
}

#rubrique_services i{
	color: #E9967A;
	font-size: 25px;
	display: none;
}

h2{
	font-size: 50px;
	text-align: center;
	margin-top: 340px;
}

#rubrique_services img.picto{
	position: absolute;
	top: -8%;
	left: 50%;
	transform: translateX(-50%);
	
}

#rubrique_services img.logo{
	top: -13%;
}

/*-----------flip effect-----------*/

.card_service{
	padding: 25px;
	line-height: 110%;
	font-size: 28px;
	text-align: left;
}

.card {
	width: 350px;
	height: 430px;
	perspective: 500px;
	background-color: transparent;
	border: none;
	margin: auto;
}

.content {
  width: 100%;
  height: 100%;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
  transition: transform 1s;
  transform-style: preserve-3d;
}

.card:hover .content {
  transform: rotateY( -180deg ) ;
  transition: transform 0.5s;
}

.front,
.back {
  position: absolute;
  height: 100%;
  width: 100%;
  background: white;
  line-height: 300px;
  color: #707070;
  text-align: center;
  font-size: 60px;
  backface-visibility: hidden;
}

.back {
  background: #FFFFFF;
  color: #707070;
  transform: rotateY( 180deg );
}

/*--------------rubrique créations home--------------*/

#rubrique_creations{
	height: 100vh;
	position: relative;
}

/*--------------footer home--------------*/

#home footer{
	padding: 150px;
	background: #F4C5B7;
	color: #FFFFFF;
	height: 350px;
}

.footer{
	font-size: 28px;
}

#home footer a{
	margin: 6px;
	text-decoration: none;
	color: #FFFFFF;
}

/*-------------------------------------------------------PAGE A PROPOS-------------------------------------------------------*/
/*--------------nav // A PROPOS--------------*/


#apropos a.nav-link:after{ /*pour ajouter un trait en hover*/
	content: "";
	position: absolute;
	display: block;
	height: 2px;
	width: 0%;
	background: #5cbb9e;
	left: 0px;
	transition:all 0.4s;
}

#apropos a.nav-link:hover:after{
    width: 100%;
	color: #ffffff!important;
}

#apropos .navbar-nav li:last-child a{
	background: #5cbb9e;
	color: #ffffff!important;
	padding: 5px 15px!important;
	display: inline-block; /*bénéficier des attributs d"un block mais sur un élément inline*/
}

#apropos .navbar-nav li:last-child a:hover{
	background: #cde7e0;
}

#apropos .navbar-nav li:last-child a:after{
	display: none!important; /*pour enlever le trait en hover uniquement sur ce bouton*/
}


/*------------en-tête blob // A PROPOS------------*/

#apropos #bg_blob{
	background-color: #cde7e0;
	height: calc(100vh - 108px);
	position: relative;
}

.blob p.titre_blanc{
  position: absolute;
  z-index: 99;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

/*------------blob // A PROPOS------------*/

#apropos .box {
	background-color: #5cbb9e;
}

#apropos .box::after {
	background-color: #5cbb9e;
}

#apropos .box::before {
	background-color: #5cbb9e;
}

/*--------------beedesign ? // A PROPOS--------------*/

.sous_titre{
	font-family: ambroise-std, serif;
	font-size: 3.5vw;
	text-align: left;
	position: relative;
	padding: 0px 0px 50px 30px;
	display: inline-block;
}

#presentation .sous_titre{
	padding : 0px 0px 10px 0px;
}

#presentation .sous_titre:before{
	display: none;
}

#apropos .rond{
	-webkit-border-radius: 50%;
	border-radius: 50%;
	z-index: 100;
	position: relative;
	width: 70%;
}

.beedesign{
	background-color: #FFFFFF;
	border: 1px solid #707070;
	position: relative;
	padding: 40px;
	font-size: 22px;
	line-height: 170%;
	width: 80%;
	margin: auto;
}

.beedesign i{
	color: #5cbb9e;
}

#apropos .img_abeille1.rond{
	-webkit-border-radius: 50%;
	border-radius: 50%;
	width: 35%;
	position: absolute;
	z-index: 99;
	bottom: -10vw;
	right: 3vw;
}

#apropos .img_abeille2.rond{
	display: none;
}

/*--------------typewriter // A PROPOS--------------*/


#app{
	margin: 40px;
	font-size: 35px;
	color: #707070;
}




/*--------------rubrique valeurs // A PROPOS--------------*/

#rubrique_valeurs{
	margin-bottom: 10vh;
}

p.sous_titre:before {
	position: absolute;
	content: "";
	width: 100%;
	height: 2.5vw;
	top: 3.5vw;
	left: 4.5vw;
	background-color: #CDE7E0;
	z-index: -1;
}

.bg_vert{
	background: #ECF5F3;
	margin: 10px;
	padding: 20px;
	line-height: 150%;
	font-size: 21px;
}

.valeurs{
	font-size: 38px;
	text-align: center;
	margin: 10px 0 40px 0;
}

/*--------------rubrique organisation // A PROPOS--------------*/

#rubrique_organisation{
	margin-bottom: 10vh;
}

.xetapes{
	font-family: ambroise-std, serif;
	font-size: 50px;
	padding-bottom: 10px;
}

.col-2.bg_vert.d-flex.flex-column.align-items-center p{  /*attention ne pas trop faire*/
	text-align: center;
}

/*--------------on travaille ensemble ? // A PROPOS--------------*/

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.letsgo{
	font-family: ambroise-std, serif;
	font-size: 62px;
	color: #5cbb9e;
	display: block;
	text-decoration: none;
	margin: 30px;
	animation: pulse 2s linear 0s infinite normal forwards;
}

.letsgo:hover{
	color: #cde7e0;
}


/*--------------footer // A PROPOS--------------*/

#apropos footer{
	padding: 150px;
	background: #cde7e0;
	color: #FFFFFF;
	height: 350px;
}

#apropos footer a{
	margin: 6px;
	text-decoration: none;
	color: #FFFFFF;
}

/*-------------------------------------------------------PAGE SERVICES-------------------------------------------------------*/
/*--------------nav services--------------*/


#services a.nav-link:after{ /*pour ajouter un trait en hover*/
	content: "";
	position: absolute;
	display: block;
	height: 2px;
	width: 0%;
	background: #8282D8;
	left: 0px;
	transition:all 0.4s;
}

#services a.nav-link:hover:after{
    width: 100%;
	color: #ffffff!important;
}

#services .navbar-nav li:last-child a{
	background: #8282D8;
	color: #ffffff!important;
	padding: 5px 15px!important;
	display: inline-block; /*bénéficier des attributs d"un block mais sur un élément inline*/
}

#services .navbar-nav li:last-child a:hover{
	background: #C5C5EF;
}

#services .navbar-nav li:last-child a:after{
	display: none!important; /*pour enlever le trait en hover uniquement sur ce bouton*/
}


/*------------en-tête blob services------------*/

#services #bg_blob{
	background-color: #C5C5EF;
	height: calc(100vh - 108px);
	position: relative;
}

/*------------blob services------------*/

#services .box {
	background-color: #8282D8;
}

#services .box::after {
	background-color: #8282D8;
}

#services .box::before {
	background-color: #AEAED7;
}

/*--------------rubrique services--------------*/

#services #rubrique_services{
	padding: 150px 0 50px 0;
	background: transparent;
}

#services #rubrique_services img.picto{
	position: absolute;
	top: -8%;
	left: 50%;
	transform: translateX(-50%);
}

#services #rubrique_services img.logo{
	top: -13%;
}

/*--------------formulaire services--------------*/

#contact_services p.sous_titre:before {
	position: absolute;
	content: "";
	width: 100%;
	height: 2.5vw;
	top: 3.5vw;
	left: 3.5vw;
	background-color: #C5C5EF;
	z-index: -1;
}

#form-beedesign{
	max-width: 550px;
	margin: auto;
}

#form-beedesign textarea{
	height: 150px;
}

.btn_violet{
	background: #8282D8;
	border-radius: 0;
	color: #FFFFFF !important;
	display: block;
	margin: auto;
	padding: 5px 30px;
}

.btn_violet:hover{
	background: #C5C5EF;
}

/*--------------footer services--------------*/

#services footer{
	padding: 150px;
	background: #C5C5EF;
	color: #FFFFFF;
	height: 350px;
}

#services footer a{
	margin: 6px;
	text-decoration: none;
	color: #FFFFFF;
}

/*-----------------------------------------------------PAGE CREATIONS--------------------------------------------------------*/
/*--------------nav creations--------------*/


#creations a.nav-link:after{ /*pour ajouter un trait en hover*/
	content: "";
	position: absolute;
	display: block;
	height: 2px;
	width: 0%;
	background: #C69A7B;
	left: 0px;
	transition:all 0.4s;
}

#creations a.nav-link:hover:after{
    width: 100%;
	color: #ffffff!important;
}

#creations .navbar-nav li:last-child a{
	background: #C69A7B;
	color: #ffffff!important;
	padding: 5px 15px!important;
	display: inline-block; /*bénéficier des attributs d"un block mais sur un élément inline*/
}

#creations .navbar-nav li:last-child a:hover{
	background: #DDCCBB;
}

#creations .navbar-nav li:last-child a:after{
	display: none!important; /*pour enlever le trait en hover uniquement sur ce bouton*/
}


/*------------en-tête blob creations------------*/

#creations #bg_blob{
	background-color: #DDCCBB;
	height: calc(100vh - 108px);
	position: relative;
}

/*------------blob creations------------*/


#creations .box {
	background-color: #C69A7B;
}

#creations .box::after {
	background-color: #C69A7B;
}

#creations .box::before {
	background-color: #C69A7B;
}


/*--------------footer creations--------------*/

#creations footer{
	padding: 150px;
	background-color: #DDCCBB;
	color: #FFFFFF;
	height: 350px;
}

#creations footer a{
	margin: 6px;
	text-decoration: none;
	color: #FFFFFF;
}

/*----------------------------------------------PAGE ACTUALITES--------------------------------------------------*/
/*--------------nav actu--------------*/


#actu a.nav-link:after{ /*pour ajouter un trait en hover*/
	content: "";
	position: absolute;
	display: block;
	height: 2px;
	width: 0%;
	background: #e6847a;
	left: 0px;
	transition:all 0.4s;
}

#actu a.nav-link:hover:after{
    width: 100%;
	color: #ffffff!important;
}

#actu .navbar-nav li:last-child a{
	background: #e6847a;
	color: #ffffff!important;
	padding: 5px 15px!important;
	display: inline-block; /*bénéficier des attributs d"un block mais sur un élément inline*/
}

#actu .navbar-nav li:last-child a:hover{
	background: #fbd6ca;
}

#actu .navbar-nav li:last-child a:after{
	display: none!important; /*pour enlever le trait en hover uniquement sur ce bouton*/
}


/*------------en-tête blob actu------------*/

#actu #bg_blob{
	background-color: #fbd6ca;
	height: calc(100vh - 108px);
	position: relative;
}

/*------------blob actu------------*/

#actu .box {
	background-color: #e6847a;
}

#actu .box::after {
	background-color: #e6847a;
}

#actu .box::before {
	background-color: #e6847a;
}

/*--------------rubrique actu--------------*/



/*--------------footer actu--------------*/

#actu footer{
	padding: 150px;
	background: #fbd6ca;
	color: #FFFFFF;
	height: 350px;
}

#actu footer a{
	margin: 6px;
	text-decoration: none;
	color: #FFFFFF;
}

/*-------------------------------------------------------PAGE CONTACT--------------------------------------------------------*/
/*--------------nav contact--------------*/


#contact a.nav-link:after{ /*pour ajouter un trait en hover*/
	content: "";
	position: absolute;
	display: block;
	height: 2px;
	width: 0%;
	background: #929D75;
	left: 0px;
	transition:all 0.4s;
}

#contact a.nav-link:hover:after{
    width: 100%;
	color: #ffffff!important;
}

#contact .navbar-nav li:last-child a{
	background: #929D75;
	color: #ffffff!important;
	padding: 5px 15px!important;
	display: inline-block; /*bénéficier des attributs d"un block mais sur un élément inline*/
}

#contact .navbar-nav li:last-child a:hover{
	background: #BAC1A7;
}

#contact .navbar-nav li:last-child a:after{
	display: none!important; /*pour enlever le trait en hover uniquement sur ce bouton*/
}


/*------------en-tête blob contact------------*/

#contact #bg_blob{
	background-color: #BAC1A7;
	height: calc(100vh - 108px);
	position: relative;
}

/*------------blob contact------------*/

#contact .box {
	background-color: #929D75;
}

#contact .box::after {
	background-color: #929D75;
}

#contact .box::before {
	background-color: #929D75;
}

/*--------------formulaire contact--------------*/

/*#formulaire_contact p.sous_titre:before {
	top: 8.5vw;
	left: 36.5vw;
	width: 40%;
	height: 1.5vw;
	background: #BAC1A7;
}*/

#formulaire_contact p.sous_titre:before {
	display: none;
}

#formulaire_contact .sous_titre{
	text-align: center;
	display: block;
	padding: 0;
}

.btn_kaki{
	background: #929D75;
	border-radius: 0;
	color: #FFFFFF !important;
	display: block;
	margin: auto;
	padding: 5px 30px;
	font-size: 22px;
	width: 40%;
	text-align: center;
	text-decoration: none;
}

.btn_kaki:hover{
	background: #BAC1A7;
}

#ecrivezmoi, #contactezmoi{
	margin-bottom: 10vh;
}

.reseaux a{
	font-size: 50px;
	color: #929D75;
	margin: 10px;
}

.reseaux a:hover{
	color: #BAC1A7;
}

.reseaux{
	text-align: center;
}
	
/*--------------footer contact--------------*/

#contact footer{
	padding: 150px;
	background: #BAC1A7;
	color: #FFFFFF;
}

#contact footer a{
	margin: 6px;
	text-decoration: none;
	color: #FFFFFF;
}

/*-------------------------------------------------------ALVEOLES------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------*/

@keyframes alveole {
  /*0%,
  100% {
    transform: translateY(0);
  }*/

  50% {
    transform: translateY(16px);
  }

  100% {
    transform: translateY(0px);
  }

  /*80% {
    transform: translateY(6.4px);
  }

  90% {
    transform: translateY(-6.4px);
  }*/
}

/*--------------page home--------------*/

.alveole1{
	top: 0%;
	left: 5%;
	animation: alveole 4s ease-in-out 0s infinite normal none;
}

.alveole2{
	bottom: -30%;
	left: -20%;
	animation: alveole 2s ease-in-out 0s infinite normal none;
}

.alveole3{
	top: 60%;
	right: -30%;
	animation: alveole 5s ease-in-out 0s infinite normal none;
}

.alveole4{
	top: 35%;
	right: 3%;
	animation: alveole 3s ease-in-out 0s infinite normal none;
}

.alveole5{
	top: 25%;
	left: 10%;
	animation: alveole 5s ease-in-out 0s infinite normal none;
}

.alveole6{
	bottom: 10%;
	right: 10%;
	animation: alveole 5s linear 0s infinite normal none;
}

.alveole7{
	bottom: 38%;
	right: 22%;
	animation: alveole 3s ease-in-out 0s infinite normal none;
}

/*--------------page à propos--------------*/

.alveole8{
	bottom: -40%;
	left: -45%;
	animation: alveole 3s ease-in-out 0s infinite normal none;
}

.alveole9{
	top: 10%;
	right: -25%;
	animation: alveole 4s ease-in-out 0s infinite normal none;
}

.alveole10{
	bottom: -45%;
	right: -25%;
	animation: alveole 5s ease-in-out 0s infinite normal none;
}

.alveole11{
	bottom: -45%;
	left: -25%;
	animation: alveole 3s ease-in-out 0s infinite normal none;
}

.alveole12{
	bottom: -40%;
	right: 0%;
	animation: alveole 6s ease-in-out 0s infinite normal none;
}


/*--------------page services--------------*/

.alveole13{
	bottom: 0%;
	left: -40%;
	animation: alveole 4s ease-in-out 0s infinite normal none;
}

.alveole14{
	bottom: -20%;
	right: 0%;
	animation: alveole 6s ease-in-out 0s infinite normal none;
}

.alveole15{
	top: 0%;
	right: 13%;
	animation: alveole 3s ease-in-out 0s infinite normal none;
}

/*--------------page créations--------------*/

.alveole16{
	top: 0%;
	left: 0%;
	animation: alveole 3s ease-in-out 0s infinite normal none;
}

.alveole17{
	bottom: 0%;
	right: 0%;
	animation: alveole 5s ease-in-out 0s infinite normal none;
}

.alveole18{
	bottom: 30%;
	right: 13%;
	animation: alveole 4s ease-in-out 0s infinite normal none;
}

/*--------------page actus--------------*/


.alveole19{
	top: 0%;
	left: 0%;
	animation: alveole 3s ease-in-out 0s infinite normal none;
}

.alveole20{
	bottom: 0%;
	right: 0%;
	animation: alveole 5s ease-in-out 0s infinite normal none;
}

.alveole21{
	bottom: 30%;
	right: 13%;
	animation: alveole 4s ease-in-out 0s infinite normal none;
}

/*--------------page contact--------------*/

.alveole22{
	top: 0%;
	left: 0%;
	animation: alveole 4s ease-in-out 0s infinite normal none;
}

.alveole23{
	bottom: 10%;
	right: -10%;
	animation: alveole 3s ease-in-out 0s infinite normal none;
}

.alveole24{
	bottom: -50%;
	right: -40%;
	animation: alveole 5s ease-in-out 0s infinite normal none;
}

.alveole1,
.alveole2,
.alveole3,
.alveole4,
.alveole5,
.alveole6,
.alveole7,
.alveole8,
.alveole9,
.alveole10,
.alveole11,
.alveole12,
.alveole13,
.alveole14,
.alveole15,
.alveole16,
.alveole17,
.alveole18,
.alveole19,
.alveole20,
.alveole21,
.alveole22,
.alveole23,
.alveole24{
	position: absolute;
	z-index: -1;
}


/*-----------------------------------------------------MEDIA QUERIES---------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width:1399px){
	
	h1 {
  		font-size: 45px;
	}
	
	.titre{
		font-size: 55px;
	}
	
	h2 {
  		font-size: 40px;
	}
	
	.services {
  		margin: 0px 45px;
	}
	
	.card {
  		width: 330px;
	}
	
}

@media screen and (max-width:1199px){
	
	.navbar-light .navbar-nav .nav-link {
  		font-size: 25px;
		margin: 15px;
	}
	
	h1 {
  		font-size: 30px;
	}
	
	.txt_presentation {
		  padding: 120px 50px 20px 50px;
	}
	
	.card {
  		width: 260px;
		height: 340px;
	}
	
	.services {
	  margin: 0px 25px;
	}
	
	
	h2 {
  		margin-top: 260px;
	}
	
	.card_service {
  		font-size: 20px;
	}
	
	.beedesign {
		font-size: 20px;
	}
	
	.reseaux a {
		font-size: 40px;
	}
	
}

@media screen and (max-width:991px){
	
	#decouvrir {
		font-size: 24px;
	}
	
	#home #decouvrir img {
		width: 35%;
	}
	
	#decouvrir img {
		width: 80%;
	}
	
	.txt_presentation {
		padding: 110px 40px 20px 40px;
		font-size: 20px;
	}

	.projet {
		font-size: 22px;
		margin: 40px;
	}
	
	#rubrique_services i{
		display: inline-block;
	}

	.services {
  		margin-bottom: 100px;
	}
	
	.card {
		width: 320px;
		height: 390px;
	}
	
	h2 {
  		margin-top: 310px;
	}
	
	.titre_blanc{
		font-size: 60px;
	}
	
	#apropos .rond{
		width: 40%;
		margin-bottom: 50px;
	}
	
	#apropos .img_abeille1.rond{
		width: 25%;
		bottom: 0vw;
		right: 19vw;
	}
	
	.beedesign{
		width: 60%;
	}
	
	#apropos .img_abeille1.rond {
		display: none;
	}
	
	#apropos .img_abeille2.rond {
		display: block;
		width: 20%;
		position: absolute;
		bottom: 0;
		left: 20vw;
	}
	
	#app {
  		font-size: 27px;
	}
	
	.valeurs {
  		font-size: 29px;
	}
	
	.bg_vert {
		padding: 15px;
		line-height: 140%;
		font-size: 18px;
	}
	
	.letsgo {
		font-size: 40px;
	}
	
	.footer {
		font-size: 24px;
	}
	
	.reseaux a {
		font-size: 34px;
	}
	
	#formulaire_contact .sous_titre {
		font-size: 36px;
	}
}


@media screen and (max-width:767px){
	
	.titre {
		font-size: 45px;
	}
		
	.accroche {
		margin-left: 66px;
	}
	
	#home .rond {
		width: 50%;
	}
	
	.beedesign {
		width: 90%;
		margin: 0 auto 30px auto;
  		font-size: 18px;
		padding: 10px 20px;
		line-height: 150%;
	}

	.bg_vert {
		width: 70%
	}
	
	.valeurs {
		font-size: 25px;
	}

	.sous_titre {
		font-size: 28px;
	}
	
	p.sous_titre::before {
		top: 4.5vw;
		left: 8.5vw;
	}
	
	.letsgo {
		font-size: 35px;
	}
	
}
	

@media screen and (max-width:575px){
	
	.blob img{
		width: 80%;
	}
	
	h1 {
		font-size: 28px;
	}
	
	.titre_blanc{
		font-size: 48px;
	}
		
	#home #decouvrir img {
		width: 25%;
	}
	
	#decouvrir img {
		width: 70%;
	}
	
	.txt_presentation {
		padding: 110px 30px 10px 30px;
		font-size: 17px;
	}
	
	.projet {
		font-size: 16px;
	}
	
	.card {
		width: 240px;
		height: 300px;
	}
	
	h2 {
		margin-top: 240px;
		font-size: 30px;
	}
	
	#rubrique_services i {
		font-size: 20px;
	}
	
	.beedesign {
		font-size: 15px;
	}
	
	#apropos .img_abeille2.rond {
		bottom: 14vw;
		left: 20vw;
	}
	
	#app {
  		font-size: 20px;
	}
	
	.valeurs {
  		font-size: 22px;
	}
	
	.bg_vert {
		line-height: 140%;
		font-size: 15px;
	}
	
	.sous_titre {
  		padding: 0px;
	}
		
	p.sous_titre::before {
		top: 4.5vw;
		left: 4.5vw;
	}
	
	.letsgo {
		font-size: 28px;
	}
	
	.xetapes {
		font-size: 35px;
	}
	
	#ecrivezmoi,
	#contactezmoi {
		margin-bottom: 5vh;
	}
	
	#contact_services p.sous_titre::before {
		top: 4.5vw;
		left: 6.5vw;
	}
	
	#form-beedesign {
 		padding: 30px;
	}
	
	.footer {
		font-size: 16px;
	}
	
	#home footer,
	#apropos footer,
	#services footer,
	#creations footer,
	#actu footer,
	#contact footer{
		padding: 50px 0 30px 0;
		height: auto;
	}
	
	#formulaire_contact .sous_titre {
	 	font-size: 30px;
	}
	
	.btn_kaki {
		width: 50%;
		font-size: 18px;
	}
	
	.reseaux a {
		margin: 5px;
	}

	
	.alveole1,
	.alveole2,
	.alveole3,
	.alveole4,
	.alveole5,
	.alveole6,
	.alveole7,
	.alveole8,
	.alveole9,
	.alveole10,
	.alveole11,
	.alveole12,
	.alveole13,
	.alveole14,
	.alveole15,
	.alveole16,
	.alveole17,
	.alveole18,
	.alveole19,
	.alveole20,
	.alveole21,
	.alveole22,
	.alveole23,
	.alveole24{
		display: none;
	}
	
	
}