.section-title{
	 text-align:left!important;
	 text-transform: uppercase;
  font-size: 3.3em;
  letter-spacing: 1.5px;
 }
 
 .homecat .button2{
	 padding: 1em 5%;
	 font-size: 0.8em;
 }
 
 .wp-block-columns.is-not-stacked-on-mobile{
	 flex-wrap: wrap !important;
 }
 
@media (max-width: 780px) {
   .homecat > .homecatcolone  {
    flex-basis: 45% !important;
  }
}



.h2home{
	text-transform:uppercase;
 
  font-size: 3.3em;
  margin-top: 1em;
  letter-spacing:1.5px
}

		/********* 
HOME PAGE 
 HOME PAGE 
   
 *******/ 
 
.TitleSlideShow{
font-size: 3vmax;
	text-align: left;
    z-index: 100;
    position: absolute;
    left: 10%;
    right: 44%;
    color: white;
    top: 51%;
	text-transform: uppercase;
	/*text-shadow: black 0.1em 0.1em 0.2em;*/
	letter-spacing: 4px;
	line-height: 1.1;
	margin:0;
	font-weight: 500;
}

.buttonHome{
		position:absolute; top: 70%;LEFT:40%;right:40%;text-align:center;
}
.buttonHomeRight{
	position:absolute; top: 85%;width: 15%;left: 10.2%;
}

.buttonHomeLeft{
	position:absolute; top: 85%;left: 29%;width: 15%;
}

.subSlideShow{
	 text-align: center;
    z-index: 100;
    position: absolute;
    left: 50%;
    right: 0%;
    color: white;
    top: 41%;
	font-style:italic;
	text-shadow: black 0.1em 0.1em 0.2em;
}


 
.img1{display:block;position:relative;}

/**Home*/


.arrowimg{
margin: auto;
    height: 40px;
    position: absolute;
    opacity: 0.7;
	top: 94%;
right: 5%;
left: 5%;
}
.arrowimg img{display:unset}

.arrowimg:hover{
    opacity: 1;
    transition: 1s;
}
/*plus petit que 768*/
 @media screen and (max-width: 768px) {
	 
	 .product-category{width:49%;float: left;
  margin-right: 0.5%;margin-left: 0.5%!important;height:350px;
}
	 
	 
	 .TitleSlideShow{ left: 5%;
		right: 5%;
	top: 4%;
font-size: 1.8em;
}
	
	
 
	
	 .buttonHomeRight{
		display:none;
	
}
.buttonHome{
top: 65%;
LEFT: 20%;
right: 20%;
text-align: center;
}
.buttonHomeLeft{
	 top: 70%;
	 left: 25%; 
	 width:50%;
	 font-size:1.5vmax;
	
	
}
.arrowimg{top:85%}
	 
 }
		
		
@media screen and (min-width: 768px) {
  /**
	 * Full width content area product layout
	 */
	 

	
	    .page-template-template-fullwidth-php .site-main .columns-3 ul.product-reviews li.product-review.style-2,
    .page-template-template-homepage-php .site-main .columns-3 ul.product-reviews li.product-review.style-2,
    .storefront-full-width-content .site-main .columns-3 ul.product-reviews li.product-review.style-2 {
      font-size: .857em; }
}


/* < Storefront 2.3 */
.storefront-reviews-compatibility ul.product-reviews li.product-review.style-2 .sr-review-meta date:before {
  font-family: "FontAwesome";
  font-weight: 400;
  content: "\f017"; }

.storefront-reviews-compatibility .sr-carousel .owl-prev:before,
.storefront-reviews-compatibility .sr-carousel .owl-next:before {
  font-family: "FontAwesome";
  font-weight: 400;
  content: "\f053"; }

.storefront-reviews-compatibility .sr-carousel .owl-next:before {
  content: "\f054"; }
  
  
  /* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


/* ======================================================================
   REFONTE VISUELLE HOMEPAGE
   Tout est scopé sous .home car les
   classes ci-dessous (.button2, .button3, .h2home, .section-title...)
   sont réutilisées ailleurs sur le site : on ne veut modifier que le
   rendu de la page d'accueil.
   ====================================================================== */

.home {
  --bh-ink: #221f1a;
  --bh-body: #4a4238;
  --bh-paper: #ffffff;
  --bh-accent: #c19a69;
  --bh-accent-dark: #9c7a4c;
  --bh-line: #e7dcc7;
  --bh-radius: 14px;
  --bh-shadow: 0 14px 34px -16px rgba(34, 31, 26, 0.35);
  --bh-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
}

/* Typographie de base : le site force "Roboto" (jamais chargée) sur les
   titres, et justifie tous les paragraphes ce qui rend le texte irrégulier
   sur des colonnes étroites. On corrige ça pour le contenu de la home. */
.home .entry-content {
  color: var(--bh-body);
}
.home .entry-content p {
  text-align: left;
}

/* --- Hero --- */
.home .img1::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(20,17,12,.6) 0%, rgba(20,17,12,.32) 30%, rgba(20,17,12,0) 58%);
  pointer-events: none;
}
.home .TitleSlideShow {
  font-family: var(--bh-serif) !important;
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.18;
  letter-spacing: 1px;
  z-index: 10;
}
.home .TitleSlideShow span {
  font-style: italic;
}
.home .buttonHomeLeft.button2,
.home .buttonHomeRight.button2 {
  z-index: 10;
  color: #fff !important;
  border-width: 1.5px !important;
  border-color: rgba(255,255,255,.85) !important;
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  font-size: 0.78rem;
  letter-spacing: 1.6px;
  transition: background .35s ease, border-color .35s ease, color .35s ease, transform .25s ease;
}
.home .buttonHomeLeft.button2:hover,
.home .buttonHomeRight.button2:hover {
  background: var(--bh-accent) !important;
  border-color: var(--bh-accent) !important;
  color: var(--bh-ink) !important;
  transform: translateY(-2px);
}
.home .arrowimg {
  z-index: 10;
  transition: transform .3s ease, opacity .3s ease;
}
.home .arrowimg:hover {
  transform: translateY(4px);
}

/* --- Tuiles catégories --- */
.home .homecatcolone figure.wp-block-image {
  margin: 0;
  overflow: hidden;
  border-radius: var(--bh-radius);
  box-shadow: var(--bh-shadow);
}
.home .homecatcolone img {
  display: block;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.home .homecatcolone:hover img {
  transform: scale(1.06);
}

/* --- Boutons sur fond clair : corrige le bouton blanc-sur-blanc
       (donc invisible) des tuiles catégories et de la grille matières --- */
.home .button2 {
  color: var(--bh-ink) !important;
  border-color: var(--bh-ink) !important;
  background: var(--bh-paper);
  border-radius: 2px;
  box-shadow: var(--bh-shadow);
  transition: background .3s ease, border-color .3s ease, color .3s ease, transform .25s ease;
}
.home .button2:hover {
  background: var(--bh-accent) !important;
  border-color: var(--bh-accent) !important;
  color: var(--bh-ink) !important;
  transform: translateY(-2px);
}
.home .button3 {
  border-radius: 2px;
  color: var(--bh-ink);
  transition: background .35s ease, color .35s ease;
}
.home .button3:hover {
  background: var(--bh-ink);
  color: #fff;
}

/* --- Titres de section (Nos matières / Notre fabrication) --- */
.home .h2home {
  font-family: var(--bh-serif) !important;
  text-transform: none;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.2vw, 2.7rem) !important;
  letter-spacing: 0.2px;
  color: var(--bh-ink);
  text-align: center;
  margin: 1.6em 0 1em !important;
}
.home .h2home span {
  font-style: italic;
  color: var(--bh-accent-dark);
}
.home .h2home::after {
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  background: var(--bh-accent);
  margin: 0.55em auto 0;
}

/* --- Blocs média/texte (matières, fabrication) --- */
.home .wp-block-media-text__media img,
.home .wp-block-media-text__media video,
.home .wp-block-media-text__media picture {
  border-radius: var(--bh-radius);
}
.home .wp-block-media-text__content h3 {
  font-family: var(--bh-serif) !important;
  font-weight: 400;
  font-size: 1.55rem;
  color: var(--bh-ink);
}

/* --- Avis clients --- */
.home .storefront-reviews .section-title {
  font-family: var(--bh-serif) !important;
  text-align: center;
  font-weight: 400;
}
.home .storefront-reviews .star-rating,
.home .storefront-reviews .star-rating span:before {
  color: var(--bh-accent) !important;
}
.home .storefront-reviews .sr-review-content {
  background: var(--bh-paper);
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius);
  box-shadow: var(--bh-shadow);
}
.home .storefront-reviews .sr-carousel .owl-prev:before,
.home .storefront-reviews .sr-carousel .owl-next:before {
  color: var(--bh-accent-dark);
}

@media screen and (max-width: 768px) {
  .home .homecat {
    row-gap: 28px;
  }
}