/* Déclaration des variables */

:root{
    --vert:   #56af31;
    --rose:   #f3a0ba;
    --jaune:  #f7e133;
    --bleu:   #66a2d8;
    --orange: #ff8006;
}

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:var(--vert);}
.c2{background:var(--rose);}
.c3{background:var(--jaune);}
.c4{background:var(--bleu);}
.c5{background:var(--orange);}

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

/* FILTRES */

.filters{
    margin:50px 0 2em;
    display:flex;
    flex-wrap:wrap;
    gap:24px;
    font-family: "Figtree-Medium";
    font-size:13px;
    justify-content: flex-end;
}

.filters a{
    text-decoration:none;
    color:#111;
}

.filters a.is-active {
    color: var(--orange);
    font-weight: bold;
}

/* DOMAINES */

.famille-1{
    font-family: "Gulax-Regular";
    font-size:27px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom:30px;
    color:var(--bleu);
}

.famille-2{
    font-family: "Gulax-Regular";
    font-size:27px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom:30px;
    color:var(--jaune);
}

.famille-3{
    font-family: "Gulax-Regular";
    font-size:27px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom:30px;
    color:var(--rose);
}

.famille-4{
    font-family: "Gulax-Regular";
    font-size:27px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom:30px;
    color:var(--orange);
}

.famille-5{
    font-family: "Gulax-Regular";
    font-size:27px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom:30px;
    color:var(--vert);
}

[data-category^="architecture-et-jardins"] a:hover  { color: var(--orange); }
[data-category^="ameublement-et-decoration"] a:hover { color: var(--orange); }
[data-category^="luminaire"] a:hover                 { color: var(--bleu); }
[data-category^="bijoux"] a:hover                    { color: var(--rose); }
[data-category^="metal"] a:hover                     { color: var(--bleu); }
[data-category^="ceramique"] a:hover                 { color: var(--bleu); }
[data-category^="cristal"] a:hover                   { color: var(--bleu); }
[data-category^="tabletterie"] a:hover               { color: var(--orange); }
[data-category^="mode-et-accessoires"] a:hover       { color: var(--rose); }
[data-category^="textile"] a:hover                   { color: var(--bleu); }
[data-category^="cuir"] a:hover                      { color: var(--bleu); }
[data-category^="spectacle"] a:hover                 { color: var(--orange); }
[data-category^="papier"] a:hover                    { color: var(--bleu); }
[data-category^="jeux"] a:hover                      { color: var(--jaune); }
[data-category^="instru"] a:hover                    { color: var(--jaune); }
[data-category^="restauration"] a:hover              { color: var(--vert); }


/* GRILLE */



.grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap:1em;
}

.grid-item {
    width:calc( 25% - 1em);
    margin-bottom: 40px;
    margin-right: 1em;
}

h2{
    font-family: "Gulax-Regular";
    font-size:3em;
    font-weight: normal;
    margin-bottom:20px;
}

.grid-separator {
    grid-column: 1 / -1;
    text-align: left;
    margin: 20px 0;
}

h2.grid-separator
{
    width: 100%!important;
}

.grid-separator.hidden {
    display: none;
}

/* MÉTIER */

.metier h3{
    font-family: "Gulax-Regular";
    font-size:25px;
    font-weight: normal;
    margin-bottom:8px;
    cursor:pointer;
   
}

.metier p{
    font-family: "Gulax-Regular";
    font-size:17px;
    font-weight: thin;
    line-height:1.3;
    cursor:pointer;
}
/* MESSAGE "AUCUN RÉSULTAT" */

.no-results {
    grid-column: 1 / -1;
    text-align: center;
    font-family: "Gulax-Regular";
    font-size: 20px;
    padding: 40px 20px;
    color: #999;
}
/* RESPONSIVE */

@media(max-width:1100px){
    .grid-item {
        width: 50%;
    }
}

@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 : marges réduites, texte pleine largeur */
  .container {
    padding: 30px 18px 50px;
    max-width: 100%;
  }

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

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

  /* FILTRES : centrés sur mobile */
  .filters {
    justify-content: flex-start;
    gap: 14px;
    margin: 30px 0 1.4em;
  }

  /* GRILLE : 1 colonne pleine largeur */
  .grid-item {
    width: 100%;
    margin-right: 0;
  }

  /* TITRES DE DOMAINE */
  .famille-1, .famille-2, .famille-3,
  .famille-4, .famille-5 {
    font-size: 22px;
  }

  h2 {
    font-size: 2em;
  }
}