:root {

    font-size: 62.5%;

}

body{

  font-family: 'Montserrat';

  color: #333;

  font-size: 1.4rem;

  overflow-x: hidden;

}

p{

  margin-bottom: 0;

  font-size: 1.4rem;

}

a{

  color: #333;

}

a:hover{

  color: #333;

  text-decoration: none;

}

a.text-white:hover{

  color: #fff;

}

#page{

  display: flex;

  flex-direction: column;

  min-height: 100vh;

  position: relative;

  overflow: hidden;

}

footer{

  margin-top: auto;

}

.text-red{

  color: #c30b29;

}

.bg-red{

  background-color: #c30b29;

}

.bg-redOpa{

  background-color: rgba(195, 11, 41, 0.7)

}

.text-grey{

  color: #333;

}

.bg-grey{

  background-color: #333;

}

.bg-lightgrey{

  background-color: #ededed;

}

.bg-actuVideo{

  background-color: #b3b3b3;

}

.bg-actuTexte{

  background-color: #f2f2f2;

}

.font-synco{

  font-family: 'Syncopate';

}

.fw-extra{

  font-weight: 800;

}

.bg-lightgrey50{

background: -webkit-linear-gradient(left, rgba(237,237,237,1) 0%, rgba(237,237,237,1) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);

background: -o-linear-gradient(left, rgba(237,237,237,1) 0%, rgba(237,237,237,1) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);

background: linear-gradient(to right, rgba(237,237,237,1) 0%, rgba(237,237,237,1) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);

}

.blockTitle h1,

.blockTitle h2{

  padding-top: 10rem;

  padding-bottom: 7rem;

  font-family: 'Montserrat';

  font-size: 2.2rem;

  font-weight: 600;

}

.blockTitle span{

  font-size: 3rem;

}

.cst-btn{

  border-radius: 20px;

  padding: 1rem 5rem;

  transition: all .5s ease;

  display: inline-block;

  position: relative;

  transition: all 1s ease;

  overflow: hidden;

  text-align: center;

}

.cst-btn:hover{

  text-decoration: none;

}

.cst-btn span{

  position: relative;

  z-index: 10;

}

/* .cst-btn::before{

  content: "";

  position: absolute;

  top: calc( 50% - 25px );

  right: 100%;

  height: 50px;

  width: 50px;

  background-color: #9a0820;

  border-radius: 100%;

  transform: translateY( 100%) scale(1);

  transition: all .5s ease;

} */

.cst-btn:hover{

  background-color: #86061c;

}

/* .cst-btn span{

  border-radius: 20px;

  padding: 1rem 5rem;

  transition: all .5s ease;

  display: inline-block;

  position: relative;

  transition: all .5s ease;

}

.cst-btn span::before,

.cst-btn span::after{

  content: "";

  position: absolute;

  border-radius: 20px;

  height: 100%;

  width: 100%;

  top: 0;

  left: 0;

  background-color: #fff;

  transition: all .5s ease;

  z-index: -1;

}

.cst-btn span::before{

  background-color: #000;

}

.cst-btn:hover span::before{

  transform: translate(20px);

}

.cst-btn:hover span::after{

  transform: translate(10px);

} */

/* .cst-btn.bg-red:hover{

  text-decoration: none;

  transform: scale(1.1);

  background-color: rgb(136, 5, 27);

} */



.iframeContainer{

  position: relative;

  overflow: hidden;

  padding-top: 56.25%;

}

.iframeContainer iframe{

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  border: 0;

}

/* .cst-delay-1{

  animation-delay: .3s;

}

.cst-delay-2{

  animation-delay: .6s;

}

.cst-delay-3{

  animation-delay: .9s;

}

.cst-delay-4{

  animation-delay: 1.2s;

} */

/******************************************************************************************************/

/*********************************************** header ***********************************************/

/******************************************************************************************************/

.upperHeader a{

  height: 40px;

  display: flex;

  align-items: center;

}

.upperHeader a:hover{

  text-decoration: none;

  background-color: #b60925;

}

.upperHeader a img{

  padding-left: 1.5rem;

  padding-right: 1.5rem;

}

nav{

  font-size: 1.4rem;

  font-family: 'Syncopate';

  font-weight: 700;

  text-transform: uppercase;

}

.navbar-brand img{

  height: 80px;

}

#main-menu li{

  padding-left: 3rem;

}

#main-menu li:not(.homeIcon) a{

  position: relative;

}

#main-menu li:not(.homeIcon) a::after{

  position: absolute;

  content: "";

  bottom: 0;

  width: 0;

  height: 3px;

  background-color: #c30b29;

  left: calc( 50% );

  transition: all .5s ease;

}

#main-menu li.current-menu-item:not(.homeIcon) a::after,

#main-menu li:not(.homeIcon) a:hover::after{

  width: 50%;

  left: 25%;

}

.homeIcon{

  background-image: url('../img/maison.png');

  background-repeat: no-repeat;

  background-position: center right 5px;

  background-size: 20px;

}

.homeIcon a{

  opacity: 0;

  width: 30px;

}

.navbar-toggler{

  position: relative;

  width: 40px;

  height: 25px;

  border: 0;

  padding: 0;

  margin-right: 20px;

}

.navbar-toggler span{

  position: absolute;

  width: 100%;

  height: 3px;

  background-color: #333;

}

.navbar-toggler span:nth-child(1){

  top: 0;

  right: 0;

  width: 25px;

}

.navbar-toggler span:nth-child(1)::before{

  position: absolute;

  content: "";

  top: 0;

  right: 32px;

  width: 8px;

  height: 8px;

  border-bottom-right-radius: 10px;

  background-color: #c30b29;

}

.navbar-toggler span:nth-child(2){

  top: 8px;

  width: 25px;

  left: 7.5px;

}

.navbar-toggler span:nth-child(3){

  top: 16px;

  left: 0;

  width: 25px

}

.navbar-toggler span:nth-child(3)::before{

  position: absolute;

  content: "";

  bottom: 0;

  right: -15px;

  width: 8px;

  height: 8px;

  border-top-left-radius: 10px;

  background-color: #c30b29;

}

/******************************************************************************************************/

/*********************************************** Home ***********************************************/

/******************************************************************************************************/

.headerHome{

  min-height: 450px;

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

  justify-content: center;

  align-items: center;

  position: relative;

  overflow: hidden;

}

.headerHome::before{

  position: absolute;

  content: "";

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  background-color: #fff;

  opacity: 0.65;

  z-index: 20;

  /* display: none; */

}

.headerHome video{

  position: absolute;

  width: 100%;

}

.slogan{

  font-size: 3rem;

  font-weight: 700;

  z-index: 50;

  text-align: center;

  /* background-color: rgba(195, 11, 41, 0.8); */

  padding: 1rem 3rem;

  color: #c30b29;

}

.col-lg-6 .presentation{

  padding-left: 45px;

}

.presentation p{

  font-size: 1.6rem;

  text-align: justify;

}

.presentation h3{

  font-size: 1.6rem;

  font-weight: 700;

  padding-top: 2.5rem;

}

/****************************** chiffre *****************************/

.chiffres{

  display: flex;

  justify-content: center;

}

.chifffreContainer{

  padding: 0 2.5rem;

  margin-top: 4rem;

  display: flex;

  flex-direction: column;

}

.chiffre{

  font-weight: 700;

  font-size: 3.6rem;

  background-image: url('../img/cercle.png');

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  min-width: 123px;

  min-height: 123px;

  display: flex;

  justify-content: center;

  align-items: center;

  align-self: center;

}

.chiffreLabel{

  font-family: 'Syncopate';

  font-weight: 700;

  font-size: 1.2rem;

  text-align: center;

  padding-top: 2rem;

  max-width: 150px;

}

.plusDe{

  font-size: 2rem;

}



/************************* expertise ********************/

.bgExpertise{

  background-image: url('../img/toile01.png');

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  padding-top: 100px;

  padding-bottom: 60px;

}

.expertises{

  display: flex;

  justify-content: center;

}

.expertiseContainer{

  width: 250px;

  text-align: center;

  padding-bottom: 5rem;

}

.expertiseContainer img{

  object-fit: scale-down;

}

.expertiseContainer p{

  font-weight: 700;

  font-size: 2rem;

  padding-top: 1rem;

}

/************************ produits **********************/

.bgProduits{

  position: absolute;

  height: 200px;

  left: 0;

  right: 0;

  top: calc(50% - 100px);

  background-color: #c30b29;

  background-image: url('../img/pattern03.png');

  background-repeat: repeat;

}

.produitContainer{

  background-position: top;

  background-repeat: no-repeat;

  background-color: #fff;

  position: relative;

  overflow: hidden;

  min-height: 400px;

  display: flex;

  justify-content: flex-end;

  flex-direction: column;

  /* padding: 4rem 2rem 2rem; */

  transition: all .5s ease;

  -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);

-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);

-o-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);

box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);

}

.produitContainer img{

  object-fit: scale-down;

}

.produitContainer h3{

  font-family: 'Syncopate';

  font-weight: 700;

  font-size: 2.2rem;

  text-transform: uppercase;

  padding: 3rem 5rem 0;

}

.produit2 h3,

.produit4 h3{

  align-self: flex-end;

}

.produitHover{

  position: absolute;

  top: 0;

  left: 0;

  height: 100%;

  width: 101%;

  background-color: rgba(0, 0, 0, 0.9);

  color: #fff;

  display: flex;

  flex-direction: column;

  justify-content: space-around;

  transition: all .5s ease;

  padding: 2.5rem;

}

.produitHover ul{

  /* list-style: none; */

  padding-left: 1rem;

}

.produitHover h4{

  font-size: 1.8rem;

}

.produit1 .produitHover,

.produit3 .produitHover{

  transform: translateX(-100%);

}

.produit2 .produitHover,

.produit4 .produitHover{

  transform: translateX(100%);

}

.produitContainer:hover .produitHover{

  transform: translateX(-0);

}

.quartCercle{

  height: 40px;

  width: 40px;

  position: absolute;

  bottom: 0;

}

.produit1{

  padding-top: 3rem;

  padding-left: 3rem;

  padding-right: 0;

}

.produit2{

  padding-left: 3rem;

padding-bottom: 3rem;

padding-right: 0;

}

.produit3{

  padding-top: 3rem;

  padding-right: 3rem;

  padding-left: 0;

}

.produit4{

  padding-right: 3rem;

  padding-bottom: 3rem;

  padding-left: 0;

}

.produit1 .produitContainer,

.produit3 .produitContainer{

  border-left: 10px solid #000;

}

.produit2 .produitContainer,

.produit4 .produitContainer{

  border-right: 10px solid #000;

}

.produit1 .quartCercle,

.produit3 .quartCercle{

  left: 0;

  border-top-right-radius: 40px;

}

.produit2 .quartCercle,

.produit4 .quartCercle{

  right: 0;

  border-top-left-radius: 40px;

}

@keyframes produit1 {

  0%{

    transform: translate(-300px, -300px);

    opacity: 0;

  }

  100%{

    opacity: 1;

    transform: translate(0, 0);

  }

}

@keyframes produit2 {

  0%{

    transform: translate(300px, -300px);

    opacity: 0;

  }

  100%{

    opacity: 1;

    transform: translate(0, 0);

  }

}

@keyframes produit3 {

  0%{

    transform: translate(-300px, 300px);

    opacity: 0;

  }

  100%{

    opacity: 1;

    transform: translate(0, 0);

  }

}

@keyframes produit4 {

  0%{

    transform: translate(300px, 300px);

    opacity: 0;

  }

  100%{

    opacity: 1;

    transform: translate(0, 0);

  }

}



.produit1 .produitContainer.animated{

  animation: produit1 1s;

}

.produit2 .produitContainer.animated{

  animation: produit2 1s;

}

.produit3 .produitContainer.animated{

  animation: produit3 1s;

}

.produit4 .produitContainer.animated{

  animation: produit4 1s;

}

/********************** nouveauté *****************/

.nouveautes{

  overflow-x: hidden;

}

.newsLeft{

  padding-right: 25px;

  padding-left: 0;

}

.newsRight{

  padding-left: 25px;

  padding-right: 0;

}

.newsLeft .newsContainer,

.newsRight .newsContainer{

  min-height: 300px;

  width: 100%;

  background-repeat: no-repeat;

  padding-top: 7rem;

  padding-bottom: 7rem;

  height: 100%

}

.newsLeft .newsContainer{

  background-color: #f2f2f2;

  background-image: url('../img/toile_articles.png');

  background-position: right -100px center;

  /* background-size: contain; */

  padding-right: 190px;

  padding-left: 15px;

  position: relative;

}

.newsLeft .newsContainer::after{

  position: absolute;

  content: "";

  background-color: inherit;

  top: 0;

  bottom: 0;

  right: 99%;

  width: 1000px;

}

.newsRight .newsContainer{

  background-color: #b3b3b3;

  background-image: url('../img/toile_videos.png');

  background-position: left -100px center;

  /* background-size: contain; */

  padding-left: 190px;

  padding-right: 15px;

}

.newsRight .newsContainer::after{

  position: absolute;

  content: "";

  background-color: inherit;

  top: 0;

  bottom: 0;

  left: 99%;

  width: 1000px;

}

.newsContainer h3{

  font-family: 'Syncopate';

  font-size: 2.2rem;

  font-weight: 700;

  margin-bottom: 1.5rem;

}

.newsContainer .newsDate{

  font-size: 1.6rem;

  font-weight: 700;

}

.newsVideoContent video,

.newsVideoContent .iframeContainer,

.newsText{

  margin: 3.5rem 0;

  text-align: justify;

}

.newsText p{

  font-size: 1.6rem;

}

.newsVideoContent,

.newsTextContent{

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  height: 100%;

}

.linkVideoExt{

  font-size: 1.6rem;

  font-weight: 700;

  padding-top: 3rem;

  display: inline-block;

}

/* .newsVideoContent iframe{

  min-height: 250px;

} */

.btnNouveaute{

  margin-top: 5rem;

}

/********************* nous contacter ***************/

.nousContacter{

  padding-bottom: 1rem;

}

.nousContacter p{

  font-size: 3rem;

}

.nousContacter img{

  height: 150px;

  object-fit: scale-down;

}

.nousContacter a{

  margin-top: 2rem;

}

.nousContacter .btnContainer{

  padding-top: 3rem;

}



/******************************************************************************************************/

/******************************************* archive post *********************************************/

/******************************************************************************************************/

.headerNews{

  min-height: 450px;

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

  justify-content: center;

  align-items: center;

  position: relative;

}

.headerNews::before{

  position: absolute;

  content: "";

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  background-color: #f2f2f2;

  opacity: 0.65;

  z-index: 20;

  /* display: none; */

}

.newsArchiveContainer{

  padding: 0 15px;

  margin-bottom: 3rem;

  display: flex;

}

.newShadow{

  display: flex;

  flex-direction:column;

  min-width: 100%;

  -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);

-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);

-o-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);

box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);

}

.newsArchiveImg{

  min-height: 200px;

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

}

.newsArchiveContent{

  padding: 3rem 3rem;

  height: 100%;

  display: flex;

  /* justify-content: space-between; */

  flex-direction: column;

  border-left: 10px solid #000;

  position: relative;

  overflow: hidden;

  /* flex-grow: 1; */

}

.newsArchiveContent h2{

  font-family: 'Syncopate';

  font-size: 2.2rem;

  font-weight: 700;

  margin-bottom: 2.5rem;

  word-break: break-word;

}

.newsArchiveDate{

  font-size: 1.6rem;

  font-weight: 700;

  margin-bottom: 2.5rem;

}

.newsArchiveText{

  margin-bottom: 2.5rem;

  text-align: justify;

  flex-grow: 1;

  flex-basis: auto;

}

.newsArchiveContent p{

  font-size: 1.6rem;

}

.newsArchiveContent a{

  align-self: flex-end;

}

.newsArchiveContent.nb1::before{

  position: absolute;

  content: "";

  left: 0;

  bottom: 100%;

  height: 20px;

  width: 10px;

  border-bottom-right-radius: 10px;

  border-top-right-radius: 10px;

  background-color: #c30b29;

  transition: all 1.5s ease;

}

.newsArchiveContent.nb1::after{

  position: absolute;

  content: "";

  left: 100%;

  bottom: 0;

  height: 10px;

  width: 20px;

  border-top-left-radius: 10px;

  border-top-right-radius: 10px;

  background-color: #c30b29;

  transition: all 1.5s ease;

  transition-delay: 1s;

}

.newsArchiveContent.nb1.animated::before{

  bottom: -10px;

}

.newsArchiveContent.nb1.animated::after{

  left: -10px;

}

.newsArchiveContent.nb1 .quartCercle{

  left: 0;

  border-top-right-radius: 40px;

  transform-origin: bottom left;

  animation-duration: 3s;

  animation-timing-function: linear;

  animation-iteration-count: 1;

  animation-fill-mode: forwards;

  transform: scale(.33);

}

.newsArchiveContent.nb1.animated .quartCercle{

  animation-name: growCircle;



}

.newsArchiveContent.nb2 .quartCercle{

  transform: rotate(-100deg);

  animation-name: scaleCircle1;

  animation-duration: 3s;

  animation-iteration-count: 1;

  animation-timing-function: linear;

  animation-fill-mode: forwards;

  border-top-left-radius: 40px;

  border-top-right-radius: 40px;

  transform-origin: bottom center;

  height: 40px;

  width: 80px;

  position: absolute;

  bottom: 0;

  left: -40px;

}

.newsArchiveContent.nb3 .quartCercle{

  animation-name: scaleCircle;

  animation-duration: 4s;

  animation-iteration-count: infinite;

  animation-timing-function: linear;

  border-top-right-radius: 40px;

  transform-origin: bottom left;

  position: absolute;

  bottom: 0;

  left: 0;

}

.newsArchiveContent.nb4 .quartCercle{

  animation-duration: 4s;

  animation-iteration-count: infinite;

  animation-timing-function: linear;

  border-top-right-radius: 40px;

  transform-origin: bottom left;

  position: absolute;

  bottom: 0;

  left: 0;

  transform: scale(20);

  transition: all 1s ease-out;

}

.newsArchiveContent.nb4.animated .quartCercle{

  transform: scale(1);

}

.newsArchiveContent.nb5 .quartCercle{

  animation-duration: 3s;

  animation-iteration-count: 1;

  animation-timing-function: linear;

  animation-fill-mode: forwards;

  border-radius: 40px;

  transform-origin: center;

  height: 80px;

  width: 80px;

  position: absolute;

  bottom: calc(50% - 40px);

  left: calc(50% - 40px);

  transform: scale(20);

}

.newsArchiveContent.nb5 .quartCercle{

  animation-name: animCircle;

}

@keyframes growCircle {

  0%{

    transform: scale(.33);

  }50%{

    transform: scale(.33);

  }

  70%{

    transform: scale(.66);

  }

  75%{

    transform: scale(.66);

  }

  100%{

    transform: scale(1);

  }

}

@keyframes rotateCircle {

  70%{

    transform: rotate(180deg);

    opacity: 1;

  }

  80%{

    transform: rotate(180deg);

    opacity: 0;

  }

  90%{

    transform: rotate(-100deg);

    opacity: 0;

  }

}

@keyframes scaleCircle {

  50%{

    transform: rotate(0) scale(.5);

  }

}

@keyframes scaleCircle1 {

  0%{

    transform: scale(0);

  }

  100%{

    transform: scale(1);

  }

}

@keyframes animCircle {

  75%{

    transform: scale(0);

    bottom: calc(50% - 40px);

    left: calc(50% - 40px);

  }

  80%{

    transform: scale(0);

    bottom: -40px;

    left:  -40px;

  }

  100%{

    transform: scale(1);

    bottom: -40px;

    left:  -40px;

  }

}

.pagination{

  display: flex;

  justify-content: center;

  padding-top: 5rem;

}

.page-numbers{

  font-size: 1.6rem;

  font-weight: 700;

}

.page-numbers:not(.prev):not(.next){

  margin: 0 10px;

}

.page-numbers.current{

  color: #c30b29;

}

.prev{

  margin-right: 10px;

}

.next{

  margin-left: 10px;

}

/******************************************************************************************************/

/******************************************* single post *********************************************/

/******************************************************************************************************/

.actuTop{

  border-top: 2px solid #c30b29;

}

.singleArticle{

  padding-top: 10rem;

}

.singleArticle h1{

  font-family: 'Syncopate';

  font-size: 2.2rem;

  font-weight: 700;

  margin-bottom: 2.5rem;

}

.singleDate{

  font-size: 1.6rem;

  font-weight: 700;

  margin-bottom: 2.5rem;

}

.singleArticleContent{

  font-size: 1.6rem;

  text-align: justify;

}

.singleArticle .linkVideoExt{

  padding-top: 2.5rem;

  display: inline-block;

}

.singleNav{

  padding-top: 10rem;

}

.singleNav nav a{

  font-family: 'Montserrat'

}



/******************************************************************************************************/

/********************************************* entreprise *********************************************/

/******************************************************************************************************/

.entrepriseImgContainer{

  position: relative;

  /* height: 100%; */

}

.entrepriseImgContainer::after{

  position: absolute;

  content: "";

  height: 25px;

  bottom: 0;

  left: 80px;

  width: 1000px;

  background-color: #c30b29;

  background-image: url(../img/pattern03.png);

  background-repeat: repeat;

  z-index: -1;

}

.introEntreprise .entrepriseImgContainer::after{

  left: 395px;

}

.missionContentImg .entrepriseImgContainer::after{

  left: 190px;

}

.introEntreprise .introEntrepriseContent{

  display: flex;

  justify-content: center;

  flex-direction: column;

  text-align: justify;

}

.introEntreprise .introEntrepriseContent strong{

  color: #c30b29;

  font-size: 2.2rem;

}

.introEntrepriseContent p{

  font-weight: 600;

  margin-bottom: 15px;

}

.introEntreprise .introEntrepriseContent span{

  color: #c30b29;

  font-size: 2.2rem;

  font-weight: 600;

}

.entrepriseContent p{

  margin-bottom: 1.5rem;

}

.entrepriseContentText{

  display: flex;

  justify-content: center;

  flex-direction: column;

  text-align: justify;

  padding-left: 45px;

}

/* .entrepriseMission{

  padding-top: 4rem;

  padding-bottom: 4rem;

} */

.missionRight p,

.missionLeft p{

  font-size: 1.4rem;

  font-weight: 700;

}

.missionImgContainer{

  height: 110px;

}

.missionRight{

  display: flex;

  justify-content: center;

}

.missionLeft{

  display: flex;

  justify-content: center;

}

.missionContainer{

  width: 75%;

  padding: 4rem 3rem;

  text-align: center;

  display: flex;

  justify-content: center;

  flex-direction: column;

}

.missionContainer strong{

  color: #c30b29;

  font-weight: 800;

}

.entrepriseMission span{

  color: #c30b29;

  font-weight: 800;

}



.missionContent{

  padding-top: 2rem;

}

.missionContentImg{

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 10rem 4rem 4rem;

  flex-direction: column;

}

.missionContentTexte{

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 10rem 10rem 4rem 10rem;

  text-align: justify;

}

.missionContentTexte p{

  margin-bottom: 10px;

}

.missionContentTexte .text-red p{

  padding-top: 10px;

  padding-bottom: 10px;

  font-size: 1.8rem;

  font-weight: 600;

}

.missionContentTexte p{

  font-size: 1.6rem;

}

.missionContentImg a{

  align-self: center;

  margin-bottom: 3rem;

  color: #fff;

  background-color: #c30b29;

}

.troisColEntreprise{

  margin-top: 50px;

}

.troisColEntreprise p {

  font-size: 1.6rem;

  text-align: justify;

}

.colCenter{

  /* display: flex;

  justify-content: center;

  align-items: center; */

}

.colCenter p{

  text-align: center;

  color: #c30b29;

  font-size: 2rem;

  font-weight: 600;

}

.entrepriseValeur{

  justify-content: space-between;

}

.entrepriseValeur .valeur{

  display: flex;

  justify-content: flex-start;

  align-items: center;

  flex-direction: column;

  max-width: 250px;

  margin-left: 5px;

  margin-right: 5px;

  text-align: justify;

  padding: 0;

}

.entrepriseValeur .valeur h3{

  font-size: 2rem;

  font-weight: 700;

  padding-top: 1.5rem;

  padding-bottom: 1.5rem;

}

.entrepriseValeur .valeur p{

  font-size: 1.6rem;

  font-weight: 500;

}

.valeurImgContainer{

  height: 132px;

  width: 132px;

  border-radius: 50%;

  background-color: #000;

  display: flex;

  justify-content: center;

  align-items: center;

}

.enveloppe{

  padding-top: 10rem;

  display: flex;

  flex-direction: column;

}

.enveloppe a{

  align-self: center;

}

.enveloppeContainer{

  display: flex;

}

.enveloppeContainer h3{

  color: #c30b29;

  font-size: 2.5rem;

  font-weight: 600;

  padding-left: 3rem;

  align-self: center;

}

.enveloppeContainer h3 span{

  font-weight: 800;

}





.entreprise{

  padding-top: 5rem;

}

.entreprise p{

  font-size: 1.6rem;

}

/* .entreprise .row{

  padding-top: 6rem;

} */

.entreprise em{

  color: #c30b29;

  font-weight: 600;

  padding-bottom: 1rem;

  padding-top: 1rem;

  display: inline-block;

}

.entreprise ul{

  text-align: left;

  list-style: none;

  font-size: 1.6rem;

  padding-left: 0;

}

.entreprise h2{

  margin-bottom: 2rem;

  font-weight: 600;

}

.entreprise h2 span{

  color: #c30b29;

  font-size: 2.5rem;

}

.entreprise h3{

  margin-top: 3rem;

  font-size: 2rem;

  font-weight: 600;

}

.enveloppeImg{

  width: 50%;

  text-align: center;

}

.enveloppe a,

.missionContentTexte a,

.entreprise a{

  border-radius: 20px;

  padding: 1rem 4rem;

  transition: all .5s ease;

  display: inline-block;

  background-color: #c30b29;

  color: #fff;

  margin-top: 3rem;

  position: relative;

  transition: all 1s ease;

  overflow: hidden;

}

.entreprise a span{

  position: relative;

  z-index: 10;

}

.entreprise a:hover{

  text-decoration: none;

}

.entreprise a::before{

  content: "";

  position: absolute;

  top: calc( 50% - 25px );

  right: 100%;

  height: 50px;

  width: 50px;

  background-color: #9a0820;

  border-radius: 100%;

  transform: translateY( 100%) scale(1);

  transition: all .5s ease;

}

.entreprise a:hover::before{

  right: calc( 50% - 25px );

  transform: translate( 0) scale(6);

}

/******************************************************************************************************/

/********************************************* expertise **********************************************/

/******************************************************************************************************/

.expertiseContent{

  /* padding-bottom: 3rem; */

  padding-top: 10rem;

}

/* .expertiseContent img{

  height: 300px;

} */

.expertiseContent p{

  font-size: 2.5rem;

}

.expertisePhase h3{

  color: #c30b29;

  font-size: 2.2rem;

  font-weight: 600;

  text-transform: uppercase;

  margin-bottom: 10px;

}

.expertisePhase ul{

  list-style: none;

  padding: 0;

  font-size: 1.8rem;

  font-weight: 500;

}

.left h2,

.right h2{

  font-size: 3.2rem;

  font-weight: 600;

  width: 360px;

  position: relative;

  z-index: 10;

}

.left h2{

  text-align: right;

}

.left h2 span,

.right h2 span{

  background-color: #fff;

  display: inline-block;

  width: 100%;

}



.left h2::before{

  content: "";

  position: absolute;

  width: 230px;

  height: 230px;

  border-radius: 50%;

  background-color: #c30b29;

  z-index: -1;

  left: -50px;

  top: calc( 50% - 115px);

}

.left h2::after{

  content: "";

  position: absolute;

  width: 180px;

  height: 180px;

  border-radius: 50%;

  background-color: #fff;

  z-index: -1;

  left: -25px;

  top: calc( 50% - 90px);

}

.right h2::before{

  content: "";

  position: absolute;

  width: 230px;

  height: 230px;

  border-radius: 50%;

  background-color: #c30b29;

  z-index: -1;

  right: -50px;

  top: calc( 50% - 115px);

}

.right h2::after{

  content: "";

  position: absolute;

  width: 180px;

  height: 180px;

  border-radius: 50%;

  background-color: #fff;

  z-index: -1;

  right: -25px;

  top: calc( 50% - 90px);

}

.left,

.right{

  display: flex;

  align-items: center;

  justify-content: flex-end;

  padding-left: 7rem;

  padding-right: 7rem;

  min-height: 230px;

  position: relative;

}

.right{

  justify-content: flex-start;

}

.phaseContent{

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding-left: 7rem;

  padding-right: 7rem;

  text-align: justify;

}

.expertisePhase{

  position: relative;

}

.expertisePhase::before{

  content: "";

  position: absolute;

  height: 18px;

  width: 18px;

  border-radius: 50%;

  top: calc(50% - 9px);

  left: calc( 50% - 9px );

  background-color: #c30b29;

}

.expertisePhase::after{

  content: "";

  position: absolute;

  height: 10px;

  width: 10px;

  border-radius: 50%;

  top: calc(50% - 5px);

  left: calc( 50% - 5px );

  background-color: #fff;

}

.circleGrey{

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

.circleGrey::before{

  content: "";

  position: absolute;

  height: 26px;

  width: 26px;

  border-radius: 50%;

  bottom: -13px;

  left: calc( 50% - 13px );

  background-color: #f2f2f2;

}

.circleGrey::after{

  content: "";

  position: absolute;

  height: 18px;

  width: 18px;

  border-radius: 50%;

  bottom: -9px;

  left: calc( 50% - 9px );

  background-color: #fff;

}

.nbexpt{

  font-size: 12rem;

  color: #c6c6c6;

  position: absolute;

  top: 20px;

  z-index: 10;

  line-height: 0.9;

  font-family: 'arial';

  font-style: italic;

}

.nbexptOmbre{

  font-size: 12rem;

  color: #f2f2f2;

  position: absolute;

  top: 14px;

  z-index: 8;

  line-height: 0.9;

  font-family: 'arial';

  font-style: italic;

}

.left .nbexpt{

  left: 70px;

}

.left .nbexptOmbre{

  left: 76px;

}

.right .nbexpt{

  right: 70px;

}

.right .nbexptOmbre{

  right: 64px;

}

.envExp{

  padding-top: 4rem;

}

/******************************************************************************************************/

/*********************************************** contact **********************************************/

/******************************************************************************************************/



#map{

  height: 450px;

}

.contact{

  padding-top: 10rem;

  padding-bottom: 10rem;

}

.contact p{

  font-size: 1.6rem;

  margin-bottom: .5rem;

}

.contact h2{

  font-weight: 600;

  margin-bottom: 2rem;

}

.contact .tel{

  margin-bottom: 5rem;

}

.wpcf7 {

    max-width: 100%;

}

.wpcf7 label{

  font-weight: 600;

}

.wpcf7 label span{

  color: #c30b29;

}

.wpcf7 textarea.wpcf7-form-control,

.wpcf7 input.wpcf7-form-control{

  border-color: #b3b3b3;

  padding: 1.5rem;

  background-color: #f2f2f2;

}

.wpcf7 textarea.wpcf7-form-control:focus,

.wpcf7 input.wpcf7-form-control:focus{

  outline: none;

  box-shadow: none;

  border-color: #b3b3b3;

}

.wpcf7 input[type=submit]{

  width: auto;

  height: auto;

  margin: 0 auto;

  display: block;

  background-color: #c30b29;

  border: 0;

  border-radius: 20px;

  padding: 1rem 5rem;

  color: #fff;

  font-size: 1.6rem;

  transition: all .5s ease;

}

.wpcf7 input[type=submit]:hover{

  text-decoration: none;

  transform: scale(1.1);

  background-color: rgb(136, 5, 27);

}

button.wpcf7-submit{

  border: 0;

  display: block;

}

.carteContainer{

  margin-bottom: -10rem;

}

/******************************************************************************************************/

/************************************************* 404 ************************************************/

/******************************************************************************************************/

.mentionsLegales p{

  margin-bottom: 20px;

}

.mentionsLegales strong{

  margin-bottom: 10px;

  display: inline-block;

}

.header404{

  background-image: url('../img/404.jpg');

  min-height: 300px;

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

  position: relative;

}

.header404::before{

  position: absolute;

  content: "";

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  background-color: #f2f2f2;

  opacity: 0.65;

  z-index: 20;

  /* display: none; */

}

.page404 .blockTitle h2{

  padding-bottom: 2rem;

}

.page404 a.text-red:hover{

  color: #c30b29;

}

/******************************************************************************************************/

/*********************************************** footer ***********************************************/

/******************************************************************************************************/

footer{

  border-top: 2px solid #c30b29;

  margin-top: 10rem;

}

.footerContent{

  padding-top: 4.5rem;

  padding-bottom: 1rem;

}

.footerContent img{

  height: 130px;

  object-fit: scale-down;

}

footer ul{

  list-style: none;

  padding: 0;

}

.footerAddress{

  font-family: 'Montserrat';

  font-size: 1.3rem;

  font-weight: 600;

  padding-left: 3.5rem;

  padding-right: 0;

}

.footerAddress li{

  margin-bottom: .6rem;

}

.footerAddress:nth-child(3){

  border-left: 2px solid #c30b29;

  border-right: 2px solid #c30b29;

}

footer .bg-grey{

  border-top: 20px solid #c30b29;

}

.copyright a,

.copyright p{

  color: #fff;

  font-size: 1.2rem;

}

.copyright{

    padding: 1rem 0;

    display: flex;

    justify-content: center;

}

.dash{

  padding-left: 1rem;

  padding-right: 1rem;

}



/********************************************************************* menu mobile* **********************************************/

.menuMobile{

  position: fixed;

  height: 100%;

  width: 100%;

  top: 0;

  left: 0;

  transition: all .5s ease;

  transform: translate(100%);

  background-color: #fff;

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 99999;

  border-left: 20px solid #c30b29;

}

.menuMobile li{

  font-family: 'Montserrat';

  font-size: 2rem;

  font-weight: bold;

  color: #333;

  padding-top: 1rem;

  padding-bottom: 1rem;

}

.menuDeco{

  position: absolute;

  left: 0;

  top: 0;

  height: 100%;

  width: 40px;

  background-color: #c30b29;

  background-image: url('../img/pattern03.png');

  background-repeat: repeat;

}

.menuMobile.show{

  transform: translate(0);

}

.menuMobile .homeIcon{

  background-image: none;

  /* background-size: 20px; */

}

.menuMobile .homeIcon a{

  opacity: 1;

  width: auto;

}

.menuClose{

  position: absolute;

  top: 40px;

  right: 40px;

  width: 28px;

  height: 28px;

  border: 0;

  background-color: transparent;

  animation-duration: 8s;

  animation-iteration-count: infinite;

}

.menuMobile.show .menuClose{

    animation-name: close;

}

.menuClose span:nth-child(1){

  position: absolute;

  width: 28px;

  height: 4px;

  left: 0;

  top: calc(50% - 2px);

  background-color: #333;

  transform: rotate(45deg);

  transform-origin: center;

  /* animation-fill-mode: forwards; */

}

.menuClose span:nth-child(2){

  position: absolute;

  width: 4px;

  height: 28px;

  top: 0;

  left: calc(50% - 2px);

  background-color: #333;

  transform: rotate(45deg);

}

@keyframes close {

  0%{

    transform: scale(0.8) rotate(0);

  }

  10%{

    transform: scale(0.6) rotate(0);

  }

  20%{

    transform: scale(0.6) rotate(90deg);

  }

  30%,100%{

    transform: scale(0.8) rotate(90deg);

  }

}



/********************************************************** animation text slogan ************************************************/



/*** animation 1 ****/

.ml1 .letter {

  display: inline-block;

  line-height: 1em;

}

.anim5 .text-wrapper p,

.anim4 .text-wrapper p,

.anim2 .text-wrapper p,

.anim3 .text-wrapper p,

.ml1 .text-wrapper p{

  font-size: inherit

}

.ml1 .text-wrapper {

  position: relative;

  display: inline-block;

  padding-top: 0.1em;

  padding-right: 0.05em;

  padding-bottom: 0.15em;

}

.anim5 .letter ,

.anim4 .letter ,

.anim3 .letter {

  display: inline-block;

  line-height: 1em;

}

.word{

  display: block;

  margin-right: 1rem;

}

.textSlogan p{

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

}

/*********** animation 2 ************/

.anim5,

.anim4,

.anim3,

.anim2{

  position: relative;

}

.blockSlogan{

  position: absolute;

  background-color: #c30b29;

  top: 0;

  bottom: 0;

  left: 0;

  right: 100%;

}

.anim2 .blockSlogan{

  animation-name: anim;

  animation-delay: 1s;

  animation-duration: 2s;

  animation-iteration-count: 1;

  animation-timing-function: linear;

}

@keyframes anim2 {

  0%{

    left: 0;

    right: 100%;

  }

  15%{

    left: 0;

  }

  85%{

    right: 0;

  }

  100%{

    left: 100%;

    right: 0;

  }

}















/************************************************************************************************************************************************************************/

/********************************************************************************* Media queries ************************************************************************/

/************************************************************************************************************************************************************************/





@media (max-width: 1600px){

  .missionContentImg .entrepriseImgContainer {

    height: 75%;

  }

  .missionContentImg .entrepriseImgContainer::after {

    left: 150px;

  }

}

@media (max-width: 1200px){

  .missionContentImg .entrepriseImgContainer {

    height: 45%;

  }

  .missionContentImg .entrepriseImgContainer::after {

    left: 140px;

  }

}



@media (min-width: 1400px){

  .container {

      max-width: 1300px;

  }

}

@media (max-width: 1400px){

  .right .nbexptOmbre{

    right: 0;

  }

  .right .nbexpt{

    right: 6px;

  }

  .left .nbexpt {

    left: 6px;

  }

  .left .nbexptOmbre {

      left: 0px;

  }

}



@media (max-width: 991.9px){

  .blockTitle h1, .blockTitle h2{

    text-align: center;

  }

  .headerHome {

    min-height: 300px;

  }

  .presentation{

    padding-top: 4rem;

    padding-left: 15px;

  }

  .expertises{

    flex-wrap: wrap;

  }

  .presentation p:first-of-type{

    text-align: center;

  }

  .chiffres{

    flex-wrap: wrap;

    justify-content: center;

  }

  .nousContacter p {

    font-size: 2.5rem;

  }

  .footerAddress{

    text-align: center;

    display: flex;

    justify-content: center;

    padding-left: 15px;

    padding-right: 15px;

  }

  .footerAddress:nth-child(3){

    border: 0;

  }

  .footerAddress ul{

    padding-bottom: 2rem;

    padding-top: 2rem;

    margin-bottom: 0;

  }

  .footerAddress:nth-child(3) ul{

    border-top: 2px solid #c30b29;

    border-bottom: 2px solid #c30b29;

  }

  .headerNews{

    min-height: 300px;

  }

  .produitContainer h3{

    font-size: 1.8rem;

  }

  /*expertise*/

  .expertiseContentImg{

    text-align: center;

    padding-bottom: 2rem;

  }

  .expertiseContentImg img{

    height: 250px;

  }

  .expertiseContent {

    padding-bottom: 0rem;

    padding-top: 10rem;

  }

  .expertiseContent p {

    font-size: 2rem;

  }

  .expertisePhase{

    padding-top: 4rem;

    padding-bottom: 4rem;

  }

  .left h2,

  .right h2{

    width: 320px;

  }

  .left h2::before{

    width: 200px;

    height: 200px;

    z-index: -1;

    left: -45px;

    top: calc( 50% - 100px);

  }

  .left h2::after{

    width: 160px;

    height: 160px;

    left: -25px;

    top: calc( 50% - 80px);

  }

  .right h2::before{

    width: 200px;

    height: 200px;

    right: -45px;

    top: calc( 50% - 100px);

  }

  .right h2::after{

    width: 160px;

    height: 160px;

    right: -25px;

    top: calc( 50% - 80px);

  }

  .left .nbexpt{

    left: 100px;

  }

  .left .nbexptOmbre{

    left: 106px;

  }

  .right .nbexpt{

    right: 100px;

  }

  .right .nbexptOmbre{

    right: 94px;

  }

  .expertisePhase::before,

  .expertisePhase::after{

    display: none;

  }

  /**** entreprise *****/

  .introEntreprise .entrepriseImgContainer {

    padding-top: 3rem;

    text-align: center;

  }

  .introEntreprise .entrepriseImgContainer img{

    height: 200px;

  }

  .entrepriseImgContainer::after{

    display: none;

  }

  .entreprise p{

    font-size: 1.5rem;

  }

  .introEntreprise .introEntrepriseContent span {

    font-size: 1.8rem;

  }

  .entrepriseContentImg{

    text-align: center;

  }

  .entrepriseContentImg img{

    width: 350px;

  }

  .entrepriseContentText{

    padding-top: 3rem;

    padding-left: 15px;

  }

  .bg-lightgrey50{

    background-color: transparent;

    background: transparent;

  }

  .entrepriseValeur .valeur{

    padding-left: 15px;

    padding-right: 15px;

  }

  .missionLeft{

    background-color: #ededed;

    position: relative;

  }

  .missionLeft::after{

    content: "";

    position: absolute;

    height: 100%;

    top: 0;

    width: 120%;

    left: -10%;

    background-color: #ededed;

    z-index: -1;

  }

  .missionContentTexte {

    padding: 4rem;

  }

  .missionContainer {

    width: 100%;

  }

  .missionContentImg {

    display: flex;

    justify-content: center;

    align-items: center;

    padding-left: 1.5rem;

    padding-top: 4rem;

  }

  .missionContentImg .entrepriseImgContainer {

    height: 100%;

  }

  .missionContentImg .entrepriseImgContainer img {

    height: auto;

    max-width: 100%;

    width: auto;

  }

  .valeurImgContainer {

    height: 110px;

    width: 110px;

    padding: 2.5rem;

  }

  .enveloppeContainer img{

    height: 120px;

  }

  .enveloppe h3{

    padding-left: 0;

  }

  /**** actu *****/

  .newsArchiveContent h2 {

    text-align: center;

  }

  .singleArticle {

    padding-top: 7rem;

  }

  .singleArticleImg{

    padding-bottom: 7rem

  }

}

@media (max-width: 767.9px){

  .blockTitle h1,

  .blockTitle h2{

    padding-top: 7rem;

    padding-bottom: 4rem;

  }

  .newsContainer h3{

    text-align: center;

  }

  .headerHome {

    min-height: 250px;

    padding-left: 2rem;

    padding-right: 2rem;

  }

  .headerNews{

    min-height: 250px;

    padding-left: 2rem;

    padding-right: 2rem;

  }

  .slogan {

    font-size: 2rem;

  }

  .presImgContainer{

    padding: 0;

  }

  .presentation{

    padding: 2.5rem;

  }

  .chiffres{

    flex-direction: column;

    align-items: center;

  }

  .expertises{

    flex-direction: column;

    align-items: center;

  }

  .produitContainer h3{

    font-size: 1.5rem;

  }

  .produit1,

  .produit2,

  .produit3,

  .produit4{

    padding: 15px;

  }

  .newsLeft,

  .newsRight{

    padding: 0;

  }

  .newsLeft .newsContainer {

    background-position: right -240px center;

  }

  .newsRight .newsContainer {

      background-position: left -240px center;

  }

  .newsLeft .newsContainer, .newsRight .newsContainer {

    padding-top: 4rem;

    padding-bottom: 4rem;

    padding-right: 20px;

    padding-left: 20px;

  }

  .btnNouveaute {

    margin-top: 4rem;

  }

  .rejoindreContainer{

    margin-bottom: 5rem;

  }

  .nousContacter p {

    font-size: 2.5rem;

  }

    .nousContacter img {

      height: auto;

  }

  .newsArchiveImg{

    min-height: 150px;

  }

  .copyright{

    flex-direction: column;

  }

  .copyright{

    text-align: center;

  }

  .dash{

    display: none;

  }

  /***** expertise *****/

  .expertiseContent {

    padding-bottom: 0rem;

    padding-top: 8rem;

    padding-left: 1.5rem;

    padding-right: 1.5rem;

  }

  .expertiseContentImg img{

    height: 200px;

  }

  .left h2, .right h2 {

    font-size: 2rem;

  }

  .left h2::before{

    width: 180px;

    height: 180px;

    z-index: -1;

    left: -30px;

    top: calc( 50% - 90px);

  }

  .left h2::after{

    width: 140px;

    height: 140px;

    left: -10px;

    top: calc( 50% - 70px);

  }

  .right h2::before{

    width: 180px;

    height: 180px;

    right: -30px;

    top: calc( 50% - 90px);

  }

  .right h2::after{

    width: 140px;

    height: 140px;

    right: -10px;

    top: calc( 50% - 70px);

  }

  .left .nbexpt{

    left: unset;

    right: 40px;

    top: 10px;

  }

  .left .nbexptOmbre{

    left: unset;

    right: 34px;

    top: 4px;

  }

  .right .nbexpt{

    right: unset;

    left: 40px;

    top: 10px;

  }

  .right .nbexptOmbre{

    right: unset;

    left: 34px;

    top: 4px;

  }

  .nbexptOmbre,

  .nbexpt{

    font-size: 8rem;

  }



/************* entreprise *************/

.mlm{

  padding-left: 3rem;

}

.introEntreprise .introEntrepriseContent{

  padding-left: 3rem;

  padding-right: 3rem;

}

.introEntreprise .entrepriseImgContainer {

    padding-top: 3rem;

    padding-left: 1.5rem;

    padding-right: 1.5rem;

    text-align: center;

}

.introEntreprise .entrepriseImgContainer img {

    height: 150px;

}

.entrepriseContent{

  padding-left: 1.5rem;

  padding-right: 1.5rem;

}

.missionContentImg .entrepriseImgContainer img {

    height: 150px;

}

.missionContentImg {

    padding-top: 0rem;

}

.missionContainer {

    padding: 4rem 2rem;

}

.missionRight,

.missionLeft{

  justify-content: center;

}

.entrepriseValeur .valeur {

    margin-bottom: 4rem;

    margin-left: 1rem;

    margin-right: 1rem;

  }

  .entrepriseValeur .valeur p{

    font-size: 1.4rem;

  }

  .enveloppe{

    padding-left: 0;

    padding-right: 0;

  }

  .enveloppe h3{

    width: 50%;

  }

  .singleArticle {

    padding-top: 4rem;

  }

  .singleArticleImg{

    padding-bottom: 4rem

  }

}