:root{  --color-1: #dd5903;} 


  body{
    font-family: 'Jost', sans-serif;
    width: 100%;  height: 100%;
  }
  body{ background: #0e0d0a; color: white;}

  h1, h2, h3, h4 {
    font-family: 'Cormorant Garamond';    font-weight: 600;
  }


  a {           color: var(--color-1);  -webkit-transition: all 0.2s;  transition: all 0.2s;}
  a:hover {         color: var(--color-1);    }
  
  h1 {    font-size: 3.5em;  }
  h2 {    font-size: 3em;  }

  h5 {    color: var(--color-1);    line-height: 1em; margin-bottom: 0px;   }
  h5{  
    font-weight: 500;text-transform: uppercase;    
    font-family: 'Jost', sans-serif;
    font-size: 1.2em;
  }


  p, .p_style {
    font-weight: 400;    color: #fff;    font-size: 1.13em;
  }

  section{          padding: 80px 0;  }

  .masthead h5 {            color: #fff;    }
  .text-white .p_style {      color: #fff;    }
  .text-white a {             color: #fff;    }
  
  .text-primary{    color:  var(--color-1)!important;     }
  .bg-primary{      background:  var(--color-1)!important;     }
  .bg-dark{         background-color: #080808 !important;  }

  .btn-primary {      background-color: var(--color-1);         }
  .btn-primary:hover, .btn-primary:focus, .btn-primary:active {     background-color: var(--color-1) !important;        }
  .btn-primary:active, .btn-primary:focus {           box-shadow: 0 0 0 0.2rem rgba(250, 250, 250, 0.5) !important;     -webkit-box-shadow: 0 0 0 0.2rem rgba(250, 250, 250, 0.5) !important;  }
  
  .btn {
    font-weight: 600;  text-transform: uppercase;  border: none;    border-radius: 0;
    font-family: 'Jost', sans-serif;    font-size: 16px;
    padding: 11px 25px;    transition: all 0.5s;
  }

  .btn:hover{     transform: translateY(-2px);  }


  @media (min-width: 600px){
    section {      background-attachment: inherit;    }
  }
  /**/
  .appear{                     transform: translateY(50px);   opacity:0; transition: all 1s;  }
  .appear.appearshow{          transform: translateY(0px);   opacity:1;    }


/* e */

  #logo_nom {  color: #fff;  font-weight: 500;}
  
  h5.nom_restau{     font-size: 25px;    display: inline-block;    position: relative;  }

  .separateur div { height: 1px; }
  .surtitre{        position: relative; display: inline-block;    }
  .surtitre h5::before , .surtitre h5::after { 
    position: absolute; height: 1px; background: var(--color-1); top: 50%; width: 70px; content: '';
  }
  .masthead h5::before , .masthead h5::after {    background: white;   }
  .surtitre h5::before{     left: -95px;    }
  .surtitre h5::after {     right: -95px;   }
  .lien_adresse , .lien_adresse:hover {         color: #fff; text-decoration: none;}
  .lien_telephone , .lien_telephone:hover {     color: #fff; text-decoration: none; }
  .text-white .lien_telephone:hover {           color: #fff; }

/* header */

  .masthead {
    position: relative;     overflow: hidden;
    padding-bottom: 50px;
  }
  .masthead h1, .masthead .e_text {      text-shadow: none;      font-size: 70px;    }

  .bg_header{       position: absolute;    top: 0; width: 100%; left: 0; bottom: 0; content: '';       }
  .bg_header{
    background-repeat: no-repeat;     background-size: cover;
    transition: all 10s;              transition-timing-function: linear;
  }
  .bg_header::before{         opacity: 0.5;  }
  .smallhead::before{         opacity: 0.5;  }
  .bg_header.isloaded{      width: 110%;}

/* pics */
  #porfolio {                background: transparent;}
  #porfolio .img_element{    overflow: hidden;  max-height: 380px;    }

/* menu  */
  .section_menu{        background: transparent;    }
  .section_menu h2{     font-size: 2.2em;  }
  .bg_menu{             background: #000;    }
  .plat_nm{             font-family: 'Cormorant Garamond';      font-weight: 500;  font-size: 1.5em;     }
  .plat_desc{           color: #bbb;      font-size: 1em;    }
  .plat_p{              font-size: 1.1em;    }
  
  .section_menu .border-top{     border-color: rgba(100,100,100,0.5) !important;   }

/*adaptation*/
  .bg-white, .bg-light, 
  .bg-white .p_style, .bg-light .p_style
  {    color: #333;}
/* contact */

  #contact-form label{            margin-bottom: 1px; padding-top: 10px;    }
  #contact-form input , #contact-form textarea{        border-radius: 0;        background: transparent;  border-width: 0 0 1px 0;    transition: border 0.5s;   }
  #contact-form input:focus, #contact-form textarea:focus{  outline: 0;   box-shadow: none !important;    border-color: #000;  }


/**/

    #infosbase{
        position: absolute;    bottom: 0;   left: 0;    right: 0;    
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        font-size: 14px;
      }

    #infosbase a{             padding: 16px 0; display: inline-block;   }
    #infosbase a:hover{       text-decoration: none;   }
    #infosbase .lien_telephone{    margin-right: 20px ;   }

    #infosbase .col_g{  text-align: left;}
    #infosbase .col_d{  text-align: right;}

    @media (max-width: 576px) {
      #infosbase .col_g{  text-align: center;}
      #infosbase .col_d{  text-align: center;}
    }

/* footer */
    #footer::before {  opacity: 0.7;}
    #footer{  font-size: 16px; font-weight: 600;  }

    #footer{        padding: 30px 0 10px;       font-size: 15px;  }
    #footer_bas{    padding: 15px 0;            }

    #footer h5::before , #footer h5::after {       display: none;    }

    .footer a {         color: #fff;  }
    .footer a:hover{    color: var(--color-1);  }
    .footer h4{         font-size: 1.8rem;      font-weight: 500;       }

    .footer .reseaux_soc{  font-size: 18px; }

    .icone_sociaux , .list_ico_sociaux i, .ico_sociaux  i{ 
      color: #fff  !important;        font-size: 18px;      border: none;      border-radius: 0;
      height: 35px;    width: 35px;     line-height: 31px;      margin: 3px;
    }
    .ico_sociaux i:hover{      color: var(--color-1) !important;      }

    /**/
    @media (min-width: 576px) {
      

    }

/* nav */

  #mainNav{         position: absolute;   top: 0px;  }

  #mainNav {        font-family: "Jost";  }

  #mainNav .navbar-nav > li.nav-item > a.nav-link, #mainNav .navbar-nav > li.nav-item > a.nav-link:focus {
    font-size: 15px;
    color: #fff;
    text-transform: uppercase;
  }

  #mainNav .nav-item::before{
      content: ''; position: absolute; bottom: 0px;  left: 0px; 
      width: 0%; height: 2px;
      background: var(--color-1);
      transition: all linear 0.2s;
  }


  @media (min-width: 576px){
    #mainNav.navbar-shrink {                      background: rgba(0, 0, 0, 0.8); }
    #mainNav .nav-item:hover::before,   #mainNav .nav-item:focus:hover::before {      width: 100%;    }    
    #mainNav .nav-item{       position: relative;margin: 0 1rem;   }
    #mainNav a.nav-link{       padding: 0.5rem 0rem;    }
  }

  @media (max-width: 576px){
    #mainNav{                       background: transparent;    }
    #mainNav .nav-link{             padding: 0.8rem 1rem;     margin: 2px; }
    #mainNav .navbar-nav > li.nav-item {                  border-top: 1px solid #333;  background: rgba(0, 0, 0, 0.7);   }
    #mainNav .navbar-nav > li.nav-item > a.nav-link:hover,    #mainNav .navbar-nav > li.nav-item > a.nav-link:focus:hover {     color: var(--color-1);    }
  }


  .navbar-toggler , .navbar-dark .navbar-toggler {          outline-width: 0px ;   border-color: transparent; }
  .navbar-toggler:focus {           outline-width: 0px ;  }
  .navbar-toggler {                  position:  relative;  padding:0;   width: 35px;    height: 35px;   } 
  .navbar-toggler .navbar-toggler-icon {     background-image: none;      border:1px solid; }
  .navbar-toggler .top-burg , .navbar-toggler .bottom-burg{
      position: absolute;    bottom: 16px;   left: 0; width: 100%; border-bottom: 1px solid #fff;
      transition: all 250ms;
  }

  .navbar-toggler .top-burg {     transform: translatex(3.5px) rotate(-135deg);     width: 28px; }
  .navbar-toggler .bottom-burg{   transform: translatex(3.5px) rotate(135deg);      width: 28px; }
  .navbar-toggler.collapsed .top-burg{    transform: translatey(-6px); width: 31px;}
  .navbar-toggler.collapsed .bottom-burg{ transform: translatey(6px); width: 31px;}