/* ZS Tools 1.9.1 — Fond chantier UNIQUEMENT dans le HERO */

body.home{
  background:#fff;
  background-image:none;
}

/* Le chantier devient un décor éditorial du hero, pas du reste de la page. */
body.home .zs-hero-v188{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#f3f5f6;
  color:var(--zs-navy);
}

/* Photo chantier très claire, volontairement discrète. */
body.home .zs-hero-v188::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:
    linear-gradient(
      90deg,
      rgba(249,250,251,.98) 0%,
      rgba(249,250,251,.96) 34%,
      rgba(247,249,250,.88) 56%,
      rgba(244,247,248,.76) 78%,
      rgba(242,245,246,.78) 100%
    ),
    url("https://zstools-dz.com/wp-content/uploads/2026/10/Fond-chantier-ZS-Tools.jpg");
  background-size:cover;
  background-position:center 42%;
  background-repeat:no-repeat;
  filter:grayscale(1) saturate(0);
}

/* Petit voile blanc pour garder une lecture premium sur tous les écrans. */
body.home .zs-hero-v188::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 75% 42%,rgba(255,255,255,.08),rgba(255,255,255,.30) 42%,rgba(255,255,255,.52) 78%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.14));
}

/* Les 3 slides conservent leur contenu mais deviennent transparents. */
body.home .zs-hero-v188__slide,
body.home .zs-hero-v188__slide--delivery,
body.home .zs-hero-v188__slide--professional{
  background:transparent!important;
}

/* Typographie adaptée au nouveau fond clair. */
body.home .zs-hero-v188 h1{
  color:var(--zs-navy);
  text-shadow:0 1px 0 rgba(255,255,255,.75);
}

body.home .zs-hero-v188 p{
  color:#425466;
}

body.home .zs-hero-v188__eyebrow{
  color:var(--zs-navy);
  border-color:rgba(8,47,79,.16);
  background:rgba(255,255,255,.72);
  box-shadow:0 5px 16px rgba(8,47,79,.05);
  backdrop-filter:blur(5px);
}

body.home .zs-hero-v188__trust span{
  color:var(--zs-navy);
}

body.home .zs-hero-v188__trust b{
  color:var(--zs-orange);
  border-color:rgba(245,158,11,.65);
  background:rgba(255,255,255,.78);
}

body.home .zs-hero-v188__actions .zs-btn--outline{
  color:var(--zs-navy);
  border-color:rgba(8,47,79,.35);
  background:rgba(255,255,255,.68);
}

body.home .zs-hero-v188__actions .zs-btn--outline:hover{
  color:#fff;
  background:var(--zs-navy);
  border-color:var(--zs-navy);
}

/* Produits: légère assise claire pour les détacher du chantier. */
body.home .zs-hero-v188__visual::before{
  content:"";
  position:absolute;
  inset:8% 0 4% 5%;
  border-radius:46% 54% 48% 52% / 54% 45% 55% 46%;
  background:radial-gradient(circle,rgba(255,255,255,.84) 0%,rgba(255,255,255,.52) 48%,rgba(255,255,255,0) 74%);
  filter:blur(2px);
}

body.home .zs-hero-v188__glow{
  background:radial-gradient(circle,rgba(245,158,11,.15),rgba(255,255,255,.18) 46%,transparent 72%);
}

body.home .zs-hero-v188__stage{
  opacity:.28;
}

body.home .zs-hero-v188__quality{
  box-shadow:0 10px 25px rgba(8,47,79,.13);
}

body.home .zs-hero-v188__arrow{
  border-color:rgba(8,47,79,.14);
  background:rgba(255,255,255,.94);
  color:var(--zs-navy);
}

body.home .zs-hero-v188__dots button{
  background:rgba(8,47,79,.25);
}

body.home .zs-hero-v188__dots button.is-active{
  background:var(--zs-orange);
}

/* Tout le reste de l'accueil reprend son fond normal du thème. */
body.home .zs-trust{
  background:#fff;
  backdrop-filter:none;
}

@media(max-width:850px){
  body.home .zs-hero-v188::before{
    background-image:
      linear-gradient(
        180deg,
        rgba(249,250,251,.97) 0%,
        rgba(249,250,251,.94) 52%,
        rgba(246,248,249,.82) 100%
      ),
      url("https://zstools-dz.com/wp-content/uploads/2026/10/Fond-chantier-ZS-Tools.jpg");
    background-position:68% center;
  }

  body.home .zs-hero-v188__visual::before{
    inset:5% 2% 2%;
  }
}

@media(max-width:520px){
  body.home .zs-hero-v188::before{
    background-position:73% center;
  }

  body.home .zs-hero-v188::after{
    background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.24));
  }

  body.home .zs-hero-v188__eyebrow{
    background:rgba(255,255,255,.80);
  }
}

@media(prefers-reduced-transparency:reduce){
  body.home .zs-hero-v188__eyebrow,
  body.home .zs-hero-v188__actions .zs-btn--outline{
    background:#fff;
    backdrop-filter:none;
  }
}