/*
 * GENERAL
 */
:root {
   --orange-color: #DD8E55;
   --light-grey-color: #EEECE8;
   --grey-color: #DCDCDD;
   --blue-color: #428DA9;
   --dark-color: #505D68;
   --blue-w-color:#5DA6C0;
   --dark-w-color: #62717F;
   --orange-w-color: #E19966;
 }
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    overflow-x: hidden;
}
/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--orange-color);
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--orange-color);
}
a {
    text-decoration: none;
    color: #000;
}
.title {
   background-color: var(--dark-color);
   width: 90%;
   color: aliceblue;
   font-size: 28px;
   padding: 32px;
   margin-top: 100px;
   margin-bottom: 80px;
   border-radius: 6px;
   box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
   display: flex;
   justify-content: center;
}
.text {
   display: flex;
   flex-wrap: wrap;
}
.text div {
   width: 480px;
   padding: 100px 60px;
   margin-top: 10px;
   margin-left: 10px;
   border-radius: 6px;
   box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
   letter-spacing: 1px;
}
.text div:nth-child(2) {
   background-image: url("img/links_pic/code.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   background-blend-mode: multiply;
   background-size: 100%;
}
.text div:nth-child(3) {
   background-image: url("img/links_pic/carte.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   background-blend-mode: multiply;
   background-size: 100%;
   margin-bottom: 10px;
}
.text div:nth-child(4) {
   background-color: var(--orange-color);
   color: #fff;
   margin-bottom: 10px;
}
/*
 * HEADER
 */
@media screen and (max-width: 1200px) {
     .topbar {
       width: 100%;
       display: none;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       margin-top: 100px;
     }
     .topbar > div {
       height: 80px;
       display: flex;
       justify-content: center;
       align-items: center;
     }
     .header-menu a {
         height: 100%;
         padding: 0 10px;
         transition: background-color 150ms ease-out;
         display: flex;
         align-items: center;
         text-align: center;
     }
     .header-menu .active {
        background-color: var(--grey-color);
     }
     .header-menu:hover {
         background-color: var(--grey-color);
     }
     .dropdown-content {
         display: none;
         flex-direction: column;
         position: fixed;
         justify-content: flex-start;
         padding: 0 40px 10px 20px;
         margin-top: 80px;
         width: 300px;
         height: 205px;
     }
}
@media screen and (min-width: 1200px) {
     .topbar {
       display: none;
     }
     .header-menu a {
         height: 100%;
         padding: 0 10px;
         transition: background-color 150ms ease-out;
         display: flex;
         align-items: center;
         text-align: center;
     }
     .header-menu a.active {
        background-color: var(--grey-color);
     }
     .header-menu a:hover {
         background-color: var(--grey-color);
     }
     .dropdown-content {
         display: none;
         flex-direction: column;
         position: fixed;
         justify-content: flex-start;
         padding: 0 40px 10px 20px;
         margin-top: 80px;
         width: 200px;
         height: 205px;
     }
     .header-menu:hover .dropdown-content {
        display: flex;
        flex-direction: column;
        background-color: #fff;
     }
     .header-menu .dropdown-content a {
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        color: #fff;
        margin-top: 10px;
        width: 100%;
        text-align: left;
     }
     .header-menu .dropdown-content a:nth-child(1){
        background-color: var(--orange-color);
     }
     .header-menu .dropdown-content a:nth-child(2){
        background-color: var(--blue-color);
     }
     .header-menu .dropdown-content a:nth-child(3){
        background-color: var(--dark-color);
     }

    .header-menu .dropdown-content a:nth-child(4){
       background-color: var(--orange-color);
    }
}
#header {
  height: 80px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  position: fixed;
  z-index: 1;
  top: 0;
  background-color: #fff;
}
.header-logo {
   height: 100%;
   display: flex;
   justify-content: space-around;
   align-items: center;
   padding: 50px;
}
.header-logo img {
   height: 90%;
   padding-right: 10px;
}
.header-logo div {
   font-size: 28px;
   font-family: 'Fredoka One', cursive;
   color: #746d68;
}
@media screen and (min-width: 1200px) {
   #header .header-menu {
       display: flex;
       height: 100%;
       justify-content: center;
       align-items: baseline;
   }
   #header .header-menu.hamburger {
       display: none !important;
   }
}
#header .header-menu.hamburger {
   display: unset;
}
.header-menu {
   display: none;
}




/*
 * BANNER
 */
#banner {
    width: calc(100% - 50px);
    height: 180px;
    background-image: url("img/banner.jpg");
    background-color: var(--orange-color);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    padding-left: 50px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    margin-top: 70px;
}
#banner div {
    font-size: 45px;
    color: #fff;
    font-weight: 900;

}
/*
 * BREADCRUMB
 */
#breadcrumb {
   width: calc(100% - 20px);
   background-color: var(--light-grey-color);
   padding: 8px 0 8px 20px;
}
#breadcrumb ul {
   display: flex;
   margin: 0;
}
#breadcrumb li {
   list-style: none;
}
#breadcrumb li::before {
    content: "\00a0 > ";
}
#breadcrumb li:first-child::before {
    content: "";
}


/*
 * FOOTER
 */
.footer {
   width: 100%;
   padding: 10px 0;
   background-color: var(--grey-color);
   font-size: 14px;
   display: flex;
   justify-content: space-around;
}

.footer-nopage{
   width: 100%;
   padding: 10px 0;
   background-color: var(--grey-color);
   font-size: 14px;
   display: flex;
   justify-content: space-around;
   position: fixed;
   bottom: 0;
}