#pageheaderhome {
  /*background-image: url('imgfront/header_home.png');*/
  background-repeat: no-repeat;
  background-image: url('../../css/imgfront/header_home.webp');
  /*background-size: cover;  /* Assure que l'image couvre tout le div */
  position:relative;      
}

#p-homeaccroche {
  text-align:center;
  font-size:4em;
  color:#ffffff;
  margin:0px;
  padding-top:0px;
}

h3 {
  padding-top:48px;
  font-size:2.67em;
}

#crevette {
  bottom:-150px;
  right:10px;
}

#st-jacques {
  top:-128px;
  left:-128px;
}

#s-forcategories {
  margin-top: 120px;
/*  height: 240px;*/
  max-width: 1000px;
  width:100%;
  margin-right: auto;
  margin-left: auto;
  position:relative;
  text-align: center;
}

#s-forcategories article {
  vertical-align:top;
  width:220px;
  height:297px;
  display:inline-block;
  margin-right:15px;
  margin-left:15px;
  z-index:2;
  position: relative;
}
#s-forcategories article div {
  width: 213px;
  height: 213px;
  cursor:pointer;
}
#s-forcategories article p.p-forlib {
  font-size:1.33em;
  font-weight:700;
  text-align:center;
  margin-top:12px;
  margin-bottom:12px;
}
#s-forcategories article p.p-forlink {
  text-align:center;
}
#s-forcategories article p.p-forlink a {
  cursor:pointer;
  width:50px;
  height:30px;
  display:inline-block;
  background-image:url("../../css/imgfront/purchase-arrow.png");
}

@media only screen and (max-width: 1024px) {
  h1 {
    font-size:4.128em;
  }
  #p-homeaccroche {
    font-size:3.2em;
  }
  #s-forcategories {
    margin-top: 96px;
  }
  #s-forcategories article {
    width: 176px;
    height: 238px;
    margin-right: 15px;
    margin-left: 15px;
    margin-top:14px;
  } 
  #s-forcategories article div {
    width: 170px;
    height: 170px;
  }
  #s-forcategories article p.p-forlib {
    font-size: 1.0640em;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  #st-jacques {
    top: -68px;
    left: 22px;
  }
  #crevette {
    right: 8px;
    bottom: -120px;
  }  
}

@media only screen and (max-width: 768px) {
  #p-homeaccroche {
    font-size: 3.5em;
  }
  #s-forcategories {
    margin-top: 60px;
  }  
  #crevette {
    bottom: -120px;
    right: 10px;
    width: 80px;
  }
  #st-jacques {
    width: 170px;
    top: -110px;
    left: -100px;
  }  
}
@media only screen and (max-width: 600px) {
}

@media only screen and (max-width: 480px) {
}
@media only screen and (max-width: 320px) {
}