@charset "UTF-8";
/* Flandres Propreté Distribution - Correctif responsive & titres V1.1 */

/* 1. Base anti-debordement */
html,body{max-width:100%;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
img,svg,video,canvas{max-width:100%;height:auto}

/* 2. Titres : evite les caracteres/ligatures qui disparaissent (ex: fi de Microfibres)
   et supprime les troncatures trop agressives. */
h1,h2,h3,h4,h5,h6,
.title,.section-title,.card-title,.product-title,
.fpd-category-card h2,.fpd-category-card h3,
.product-card h2,.product-card h3,
.category-card h2,.category-card h3{
  font-variant-ligatures:none!important;
  font-feature-settings:"liga" 0,"clig" 0!important;
  text-rendering:optimizeLegibility;
  overflow:visible!important;
  text-overflow:clip!important;
  -webkit-line-clamp:unset!important;
  line-clamp:unset!important;
  max-height:none!important;
  white-space:normal!important;
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:auto;
}

/* 3. Hierarchie plus elegante : les titres etaient trop imposants. */
.hero h1,.home-hero h1,.fpd-hero h1,.hero-title,
main>section:first-of-type h1{
  font-size:clamp(2.15rem,5vw,4.2rem)!important;
  line-height:1.02!important;
  letter-spacing:-.035em;
}
.section h2,.section-title,main section h2{
  font-size:clamp(1.65rem,3.2vw,2.65rem)!important;
  line-height:1.12!important;
  letter-spacing:-.02em;
}
.fpd-category-card h2,.fpd-category-card h3,
.category-card h2,.category-card h3{
  font-size:clamp(1.12rem,1.8vw,1.45rem)!important;
  line-height:1.18!important;
  letter-spacing:-.01em;
}
.product-card h2,.product-card h3,.product-title{
  font-size:clamp(1.02rem,1.5vw,1.25rem)!important;
  line-height:1.25!important;
}

/* 4. Conteneurs fluides */
.wrap,.container,.site-container,.page-wrap{
  width:min(100%,1280px)!important;
  max-width:1280px!important;
  margin-inline:auto!important;
  padding-inline:clamp(14px,3vw,30px)!important;
}

/* 5. Cartes categories : hauteur libre, texte jamais coupe */
.fpd-category-card,.category-card{
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
}
.fpd-category-card>div,.category-card>div{
  min-width:0!important;
}
.fpd-category-card p,.category-card p{
  overflow:visible!important;
  display:block!important;
  -webkit-line-clamp:unset!important;
  line-clamp:unset!important;
  max-height:none!important;
}
.fpd-cat-image{aspect-ratio:16/9;height:auto!important;min-height:140px}
.fpd-cat-image img{width:100%!important;height:100%!important;object-fit:cover!important}

/* 6. Grilles responsives courantes */
.fpd-category-grid,.categories-grid,.category-grid,
.products-grid,.product-grid,.cards-grid,.grid-4{
  min-width:0;
}

/* 7. Promotions ajoutees par l'upgrade */
.fpd-live-promo{grid-template-columns:minmax(0,1fr) minmax(260px,.82fr)!important}
.fpd-live-promo-copy h2{font-size:clamp(1.7rem,3.3vw,2.65rem)!important;line-height:1.08!important}
.fpd-live-promo-copy p{font-size:clamp(.98rem,1.3vw,1.08rem)!important}

/* 8. Tablette */
@media (max-width:980px){
  .fpd-category-grid,.categories-grid,.category-grid,.products-grid,.product-grid,.cards-grid,.grid-4{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .fpd-live-promo{grid-template-columns:1fr!important;gap:18px!important;padding:22px!important}
  .fpd-live-promo-images{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .fpd-live-promo-images img:first-child{height:190px!important}

  header .wrap,.site-header .wrap,.main-header .wrap{
    gap:12px!important;
    flex-wrap:wrap!important;
  }
  nav,.nav,.main-nav,.site-nav{
    max-width:100%!important;
  }
  nav a,.nav a,.main-nav a,.site-nav a{
    white-space:normal!important;
  }
}

/* 9. Mobile */
@media (max-width:640px){
  .wrap,.container,.site-container,.page-wrap{padding-inline:14px!important}

  .hero,.home-hero,.fpd-hero{padding-top:28px!important;padding-bottom:28px!important}
  .hero h1,.home-hero h1,.fpd-hero h1,.hero-title,main>section:first-of-type h1{
    font-size:clamp(2rem,11vw,2.65rem)!important;
    line-height:1.03!important;
  }
  .section h2,.section-title,main section h2{
    font-size:clamp(1.5rem,7vw,2rem)!important;
  }

  .fpd-category-grid,.categories-grid,.category-grid,
  .products-grid,.product-grid,.cards-grid,.grid-4{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }

  .fpd-category-card,.category-card,.product-card{
    width:100%!important;
    max-width:none!important;
  }
  .fpd-category-card h2,.fpd-category-card h3,.category-card h2,.category-card h3{
    font-size:1.18rem!important;
  }
  .fpd-category-card:has(.fpd-cat-image)>div{padding:17px 18px 20px!important}
  .fpd-cat-image{min-height:155px!important}

  .fpd-live-promotions{padding-top:18px!important}
  .fpd-live-promo{padding:16px!important;border-radius:18px!important}
  .fpd-live-promo-images{grid-template-columns:1fr!important}
  .fpd-live-promo-images img,.fpd-live-promo-images img:first-child{height:auto!important;aspect-ratio:16/9!important}

  /* boutons faciles a toucher sans depasser */
  .btn,button,input[type="submit"],input[type="button"]{
    max-width:100%!important;
    white-space:normal!important;
  }

  /* tableaux et blocs larges : defilement local plutot que page deformee */
  .table-wrap,.table-responsive{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
}

/* 10. Tres petits ecrans */
@media (max-width:390px){
  .hero h1,.home-hero h1,.fpd-hero h1,.hero-title,main>section:first-of-type h1{font-size:2rem!important}
  .section h2,.section-title,main section h2{font-size:1.45rem!important}
  .fpd-category-card h2,.fpd-category-card h3,.category-card h2,.category-card h3{font-size:1.08rem!important}
  .fpd-live-promo{padding:14px!important}
}