/* Page d'un univers : blocs pour chaque article + titre/sous-titre sur les blocs */

/* Step 1: start with resetting some defaults */

body {
  margin: 0 auto;
  padding: 0;
  max-width: 100%; 
}


.catego_filtre {
    border: 1px solid darkgrey;
    border-radius: 10px 10px 10px 10px;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 5px;
    margin-left:5px;
    margin-right:5px;
    line-height:40px; 
    height:40px;
    font-size:14px;
    display: inline-block;
}

.catego_selected {
    background-color: white;
}
.catego_unselected {
    background-color: none;
}

.ligne_vide {
    line-height: 25px;
}

.article_titre {
    display: block;
    position:absolute;
    left:1%;
    top:0;
    width:98%; 
    text-align:center;
    background:#eee;
    height:44px; 
    white-space: nowrap;
    line-height:44px; 
    font-size:18px;
    background: white;
    border-radius: 20px 20px 0px 0px;
    cursor: pointer; 
}

.article_image {
    /* max-height:200px;*/
}

.grid-item:hover > .article_titre { 
    font-size:19px;
    height:60px;
    line-height:60px;  
}
.grid-item:hover > .article_description { text-decoration:underline; }

.article_prix {
    display: block;
    position:absolute;
    right:1%;
    bottom:25px;
    font-weight: bold; 
    background: white;
    height:35px; 
    line-height:35px;
    font-size:14px;
    cursor: pointer;
    padding: .5rem;  padding-left:.75rem;
    border-radius: 20px 0px 20px 0px;
}

.article_description {
 
    margin-top:.5rem;
    height:1rem;
    text-align: center;
    font-size:14px;
    font-style: italic;
    line-height:16px;
    width:80%; margin-left:auto; margin-right:auto;
}

/* Step 2: center things inside the grid and clear some space around it by setting a device based max-width and margin*/

.grid {
  text-align: center;
  max-width: 95vw;
  margin: 0vw auto;
}


/* Step 3: how big should the gap be between grid items? remember that the total gap between two items would be double what you set here since both would have that amount set as their individual padding. Also add box-sizing:border-box to make sure the padding doesn't affect the total widh of the item */

.grid-item {
    box-sizing: border-box;
    display:inline;
    padding:1%;
    width:98%;
    margin-bottom:3rem;
    position: relative;
}


/* Step 4: Add media queries (subjective) to make the whole grid resposive. */

/* Page d'accueil : blocs pour chaque univers + titre sur les blocs */

@media (min-width: 500px) {
  .grid-item {
    width: 50%;
  }
    .article_prix {
        right:2%;
        bottom:27px;
    }
    .article_titre {
        left:2%;
        top:0;
        width:97%;
    }
}

@media (min-width: 750px) {
  .grid-item  
  {
    width: 33.3333333333%;
  }
    .article_prix {
        right:3%;
        bottom:30px;
    }
    .article_titre {
        left:3%;
        top:0;
        width:94%;
    }
}

@media (min-width: 1100px) {
  .grid-item {
    width: 25%;
  }
    .article_prix {
        right:4%;
        bottom:34px;
    }
    .article_titre {
        left:3.5%;
        top:0;
        width:93%;
    }
}

@media (min-width: 1450px) {
  .grid-item {
    width: 20%;
  }
    .article_prix {
        right:5%;
        bottom:37px;
    }
    .article_titre {
        left:5%;
        top:0;
        width:90.5%;
    }
}

@media (min-width: 2000px) {
  .grid-item {
    width: 16.66666666667%;
  }
    .article_prix {
        right:6%;
        bottom:43px;
    }
    .article_titre {
        left:5%;
        top:0;
        width:90%;
    }
}