/* Déclaration des variables */

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

/* Déclaration des typographies */

@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");
}

/* Déclaration des styles généraux */

*{
    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:3%;
}

.intro h2{
    font-family: "Figtree-medium";
    font-size:19px;
    margin-bottom:10px;
    margin-top : 14px;
}

.intro p{
    font-family: "Figtree-Light";
    font-size:15px;
    max-width:83%;
    line-height:1.6;
    text-align:justify ;
    margin-top: .8%;
}

.mot-orange {
  color:#ff8006; /* ta couleur */
}

.mot-jaune {
  color:#f7e133; /* ta couleur */
}

.mot-vert {
  color:#56af31; /* ta couleur */
}

.mot-rose {
  color:#f3a0ba; /* ta couleur */
}

.mot-bleu {
  color:#66a2d8; /* ta couleur */
}


/* 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: auto;
  width: 260px;
  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){
    
  
/* HEADER : burger à gauche, titre au centre, recherche à droite */
  .top-bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 16px 16px 20px;
    gap: 8px;
  }

  .top-bar-left {
    /* burger + titre côte à côte, collés à gauche */
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .site-title {
    font-size: 22px;
    margin-left: 0;
  }

  .search {
    width: 110px;
    padding: 0 10px;
    justify-self: end;
  }

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

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


}