/*
*@colors
*/
:root{
  --bleu-color:#288bc9;
  --bleu2-color:#2275a9;
  --bleu3-color:#1d6592;
  --pale-color:#e1eaf0;
}

/*
  ####  ###### #    # ###### #####    ##   #
 #    # #      ##   # #      #    #  #  #  #
 #      #####  # #  # #####  #    # #    # #
 #  ### #      #  # # #      #####  ###### #
 #    # #      #   ## #      #   #  #    # #
  ####  ###### #    # ###### #    # #    # ######
*/

body{
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.playball {
  font-family: "Playball", cursive;
  font-weight: 400;
  font-style: normal;
}

h2 .playball,
.h2 .playball{
  color:var(--bleu-color);
}

a{
  transition:0.3s all;
}

.bg-pale{
  background-color: var(--pale-color);
  padding: 20px;
}

/*
 #    # ###### #    # #    #
 ##  ## #      ##   # #    #
 # ## # #####  # #  # #    #
 #    # #      #  # # #    #
 #    # #      #   ## #    #
 #    # ###### #    #  ####
*/

.prenav{
  color:#fff;
  background-color: #000;
  padding:15px 0;
}
.prenav a{
  color:inherit;
}
.prenav span:not(:last-child){
  margin-right:30px;
}
.navbar{
  background-color: #fff;
}

.nav-link{
  font-size:18px;
  color:var(--bleu-color);
  text-transform: uppercase;
  font-weight:bold;
  position:relative;
}
.nav-link:after{
  content:"";
  position:absolute;
  height:3px;
  background-color:transparent;
  left:10px;
  right:10px;
  bottom:0;
  transition:0.3s all;
}
.nav-link:hover{
  color:var(--bleu-color);
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show{
  color:var(--bleu-color);
}
.navbar-nav .nav-link.active:after, .navbar-nav .nav-link.show:after,
.nav-link:hover:after{
  background-color:var(--bleu-color);
}

.btn-tbcj{
  background-color: var(--bleu-color);
  color:#fff;
  border: 1px solid var(--bleu-color);
}
.btn-tbcj:hover{
  background-color: transparent;
  color:var(--bleu-color);
  border-color:var(--bleu-color);
}
.dark .btn-tbcj:hover{
  background-color: #fff;
  border-color:#fff;
}

/*
  ####   ####  #    # ##### ###### #    # #    #
 #    # #    # ##   #   #   #      ##   # #    #
 #      #    # # #  #   #   #####  # #  # #    #
 #      #    # #  # #   #   #      #  # # #    #
 #    # #    # #   ##   #   #      #   ## #    #
  ####   ####  #    #   #   ###### #    #  ####
*/

/* hero */
.hero{
  background-image : url('../images/hero-bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  padding:30px 0;
  color:#fff;
  position:relative;
}

.hero-separator{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}

/* reassurance */
.reassurance .bb{
  padding: 20px;
  color:#fff;
}
.reassurance .b1{
  background-color: var(--bleu-color);
}
.reassurance .b2{
  background-color: var(--bleu2-color);
}
.reassurance .b3{
  background-color: var(--bleu3-color);
}

/* work */
.our-work{
  margin-top:30px;
}
.our-work .mover{
  display:none;
}
.our-work .movel{
  background-color: #000;
  color:#fff;
  padding:30px 15px;
}

/* pôle */
.pole{
  background-color:var(--pale-color);
}
.pole-desc{
  font-weight:bold;
}

/* Qui sommes-nous > references */
.references{
  background-color: var(--pale-color);
}

/* Nos métiers > équipements */
.content-equipement{
  background-color: var(--pale-color);
}

/*
 ######  ####   ####  ##### ###### #####
 #      #    # #    #   #   #      #    #
 #####  #    # #    #   #   #####  #    #
 #      #    # #    #   #   #      #####
 #      #    # #    #   #   #      #   #
 #       ####   ####    #   ###### #    #
*/

footer{
  background-color: #000;
  color:#fff;
  padding:15px 0;
  text-align: center;
  font-size:14px;
}
footer a{
  color:#fff;
  text-decoration:none;
}
footer a:hover{
  text-decoration: underline;
}
/*
 #####  ######  ####  #####   ####  #    #  ####  # #    # ######
 #    # #      #      #    # #    # ##   # #      # #    # #
 #    # #####   ####  #    # #    # # #  #  ####  # #    # #####
 #####  #           # #####  #    # #  # #      # # #    # #
 #   #  #      #    # #      #    # #   ## #    # #  #  #  #
 #    # ######  ####  #       ####  #    #  ####  #   ##   ######
*/

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .hero{
    padding:50px 0;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .hero{
    padding:150px 0;
  }
  .reassurance{
    position:relative;
    margin-top:-100px;
  }
  .reassurance .bb{
    padding: 50px;
  }
  .our-work{
    margin-top:150px;
  }
  .our-work .mover{
    display:block;
    height:100%;
    margin-top:5%;
    margin-bottom:5%;
    text-align:right;
    transform: translateX(6%) translateY(0%);
    position: relative;
    z-index:2;
  }
  .our-work .movel{
    padding:50px 30px;
    padding-left:100px;
    transform: translateX(-6%) translateY(0%);
    position:relative;
    z-index:1;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}