/*

*@colors

*/

:root{

  --primary-color:#fff;

  --secondary-color:#000;

  --clr-dark: #181818;

  --clr-orange: #ddae65;

  --fs-kristal : kristal, sans-serif;

  --fs-roc: roc-grotesk, sans-serif;

}



/*

  ####  ###### #    # ###### #####    ##   #

 #    # #      ##   # #      #    #  #  #  #

 #      #####  # #  # #####  #    # #    # #

 #  ### #      #  # # #      #####  ###### #

 #    # #      #   ## #      #   #  #    # #

  ####  ###### #    # ###### #    # #    # ######

*/


body{

  color:var(--clr-dark);

  font-family: var(--fs-roc);

}


.bg-small{
  background-image: url('../images/bg-accueil-small-c.png');
  background-repeat: no-repeat;
  background-size: cover;

}
a{

  color: var(--clr-dark);

}

a:hover{

  color: var(--primary-color);

}

.accueil{

  margin-top: 0;

}

.local-up{

  margin-top: 0px;

}

.margin-s{

  margin-top: -150px;

  margin-left: -25px;

}

.margin-l{

  margin-top: calc(-100%/3.5)

}

/*

 #    # ###### #    # #    #

 ##  ## #      ##   # #    #

 # ## # #####  # #  # #    #

 #    # #      #  # # #    #

 #    # #      #   ## #    #

 #    # ###### #    #  ####

*/

.nav-link{

  color: var(--clr-dark);

}

.nav-link:hover{

  color: var(--clr-orange);

}


.nav-item{
  margin-left:10px;
  margin-right:10px;
}

.wrapper-menu{
  width:100%;
}

/*

  ####   ####  #    # ##### ###### #    # #    #

 #    # #    # ##   #   #   #      ##   # #    #

 #      #    # # #  #   #   #####  # #  # #    #

 #      #    # #  # #   #   #      #  # # #    #

 #    # #    # #   ##   #   #      #   ## #    #

  ####   ####  #    #   #   ###### #    #  ####

*/
.titreprincipal{
  line-height:50px;
  font-size:60px;
}
.fs-kristal{

  font-family: var(--fs-kristal);

}

.text-orange{

  color: var(--clr-orange);

}

.bg-dark-m{

  background-color: var(--clr-dark);

}

.bg-orange{

  background-color: var(--clr-orange);

}

.border-orange{

  border: 1px solid var(--clr-orange);

}

.border-dark{

  border-bottom: 1px solid var(--clr-dark);

}

/*

 ######  ####   ####  ##### ###### #####

 #      #    # #    #   #   #      #    #

 #####  #    # #    #   #   #####  #    #

 #      #    # #    #   #   #      #####

 #      #    # #    #   #   #      #   #

 #       ####   ####    #   ###### #    #

*/



/*

 #####  ######  ####  #####   ####  #    #  ####  # #    # ######

 #    # #      #      #    # #    # ##   # #      # #    # #

 #    # #####   ####  #    # #    # # #  #  ####  # #    # #####

 #####  #           # #####  #    # #  # #      # # #    # #

 #   #  #      #    # #      #    # #   ## #    # #  #  #  #

 #    # ######  ####  #       ####  #    #  ####  #   ##   ######

*/



/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) {
 


}



/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) {
 .bg-small{
    background-image: none;
    
  }
}


/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) {

  .accueil{

    margin-top: -130px;

  }

  .local-up{

    margin-top: -20px;

  }

  .wrapper-menu{
    width:auto;
  }
  

}




/* Extra large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {



}