/* 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: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: 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;
}


/* ─── GRILLE PAVE ─── */
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 12px;
      padding: 24px 0;
    }

    .card {
      width: 180px;
      aspect-ratio: 3 / 4;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 14px;
      cursor: pointer;
      text-decoration: none;
    }

    .card__label {
      font-family: "Gulax-regular";
      font-size: 25px;
      font-weight: 700;
      text-align: center;
      color: rgb(53, 37, 20);
      line-height: 1.4;
    }

    /* ─── Couleurs ─── */
    .card--blue   { background-color:#66a2d8; }
    .card--orange { background-color:#ff8006; }
    .card--yellow { background-color:#f7e133; }
    .card--pink   { background-color:#f3a0ba }
    .card--green  { background-color:#56af31; }

/* RESPONSIVE */

@media(max-width:1100px){
     .container {
        padding: 55px 40px 80px;
    }
    .cards-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

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

  /* CONTENU */
    .container {
     padding: 35px 20px 60px;
   }
  
    .card {
      width: 100px;
    }

    .cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .card__label {
        font-size: 15px;
    }
}