/* DECLARATION VARIABLE */

a{text-decoration: none;
  color :inherit;
}

/* DECLARATION TYPOGRAPHIE */

@font-face {
    font-family: "Gulax-Regular";
    src: url("font/Gulax-Regular.otf");
}

@font-face {
   font-family: "Figtree-Light";
    src: url("font/Figtree-Light.otf");
}

@font-face {
   font-family: "Figtree-Medium";
    src: url("font/Figtree-Medium.otf");
}

/* DECLARATION STYLE GENERAUX */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#ffffff;
    color:#111;
}

/* HEADER */

.top-bar{
   display:flex;
   padding:25px 35px 30px 40px;
   justify-content: space-between;
   align-items: baseline;
}

.top-bar-left{ 
    display: flex;
    align-items: baseline;
}

/* BARRE RECHERCHE */

.search{
    width:160px;
    height: 1.5em;;
    padding:0 30px;
    border : none;
    font-size:14px;
    font-family: "Figtree-Light";
    justify-self: end;
}

.search::placeholder{ 
    color: rgb(61, 61, 61); 
}

/* TITRE SITE */

.site-title{
    font-size:32px;
    font-family:"Gulax-Regular";
    margin-left:0.5em ;
}

/* BARRE COULEURS */

.color-bar{
    width:100%;
    height:18px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
}

.color-bar div{
    height:100%;
}

.c1{background:#56af31;}
.c2{background:#f3a0ba;}
.c3{background:#f7e133;}
.c4{background:#66a2d8;}
.c5{background:#ff8006;}

/* CONTENU */

.container{
    max-width:1300px;
    margin:auto;
    padding:55px 72px 80px;
}

/* INTRO */

.intro h1{
    font-family: "Gulax-Regular";
    font-size:35px;
    font-weight: normal;
    margin-bottom:14px;
}

.intro p{
    font-family: "Figtree-Light";
    font-size:16px;
    max-width:1300px;
    line-height:1.4;
    text-align:justify ;
}

/* BURGER */
.burger {
  width: 34px;
  cursor: pointer;
  position: relative;
  top: .19em;
  z-index: 1002;
}

.burger span {
  display: block;
  height: 3px;
  background: #111;
  margin: 4px 0;
  transition: 0.3s;
}

/* MENU LATÉRAL */
.menu {
  position: fixed;
  top: 4em;
  left: 0;
  height: 25vh;
  width: 20vw;
  background: white;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;

  padding: 20px 2.4em;

  transform: translateX(-100%);
  transition: transform 0.4s ease;

  z-index: 1001;
}

/* MENU OUVERT */
.menu.active {
  transform: translateX(0);
}

/* LIENS */
.menu a {
  font-size: 20px;
  font-family: "Gulax-regular";
  text-decoration: none;
  color: black;
}


/* OVERLAY ACTIF */
.menu.active::before {
  opacity: 1;
}

/* RESPONSIVE */

@media(max-width:1100px){
}

@media(max-width:700px){

    .top-bar{
        padding:20px;
        gap:15px;
    }

    .container{
        padding:25px 20px 60px;
    }

    .search{
        width:100%;
    }

    .site-title{
        font-size:18px;
    }

    .intro h1{
        font-size:30px;
    }

    .intro p{
        font-size:16px;
    }

    .category h2{
        font-size:26px;
    }

    .color-bar{
        height:14px;
    }

}