h1 {
    position: absolute;
     top: -1000px; 
     left: -1000px;
 }


.wrapper {
    margin-top: 0px;

}

/* fil d'ariane */
.breadcrumb{
    margin-top: 0px;
    margin:10px 50px;
    position: relative;
    
}
.breadcrumb ul {
    width :100%;
    display: flex;
    justify-content: space-between;
}
.breadcrumb ul a{
    margin: 5px 20px;
    text-decoration: none;
    color:#3C6931;
}

.breadcrumb ul a:hover{
   color: black;
}
.bouton {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background-color: #000;
}

li {
    font-size: 1.2vw;
}
  
.categorie {
    font-weight: bold;
}

/* fin fil d'ariane */


.content {
  
  
}

.bgImageCat {
    height : 350px;
    width: 100%;
    object-fit: cover;
    animation-name: fadein;
    animation-duration: 5s;

}


@keyframes fadein {
    from  {
      opacity:0;
    }
  
    to  {
      opacity:1;
    }
  }


.imageCat {
    margin-top: 20px;
    margin-bottom: 50px;
}


.text-catalogue{
    position: relative;
    top: -150px;
    left:10%;
    padding: 30px;
    background-color: white;
    font-size: 16px;
    height:auto;
    line-height: 1.2;
    color: #3C6931;
    animation-name: slidein;
    animation-duration: 5s;
  }


  @keyframes slidein {
    from  {
      top:-150px;
      left:100%;
      color: rgba(255,255, 255, 0);
      background-color: rgba(255,255, 255, 0);
    }
  
    to  {
      top:-150px;
      left:10%;
      color: #3C6931;
      background-color: rgba(255,255, 255, 1);
    }
}


.catalogue {
    animation-name: news;
    animation-duration: 3s;
    position: relative;
}

@keyframes news {
    from  {
      position: absolute;
      top:0px;
     
    }
  
    to  {
      position: absolute;
      top:1200px;
     
    }
  
  }
  

.nomProduit {
    font-weight: bold;
    color: #3C6931;
    
}
.description {
    padding: 0 20px;
    font-size: 16px;
    line-height: 1.2 ;
    font-weight: normal;
    color: #3C6931;
}


.photoProduit{

    transition: all .3s ease-in-out;

}
.photoProduit:hover  {
    transform: scale(1.1); 
   
}

.photoProduit:hover + .nomProduit {
    display: block; 
}

.btn {
    color: #3C6931;
    padding: 0;

    margin-top: 20px;
    background-color: rgba(60,105,49, .3 );
    border: solid 1px #3C6931;
    border-color:  #3C6931;
    font-size: 16px;
    transition: all .3s ease-in-out;
}
.btn:hover{
    transform: scale(1.1); 
}


/* iphone */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait)  {
    .catalogue{
        margin-top: 350px;
    }
    .nomProduit {
        display: block;
        left:10%;
    }
   



  }


/* ipad */
  @media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

    .nomProduit {
        display: block;
        left:10%;
    }
 
 

}

/* Galaxy from S6 */

@media screen 
  and (min-device-width: 360px) 
  and (max-device-width: 740px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: portrait) {
    .catalogue{
        margin-top: 350px;
    }
    .nomProduit {
        display: block;
        left:10%;
    }

}