/* ========= INFORMATION ============================
	- document:  WP Coder!
	- author:    Dmytro Lobov 
	- url:       https://wow-estore.com/
==================================================== */
/* ======================================================
   CAZA3D HERO — WP CODER
   Desktop : design conservé / Mobile : gros plans
   Styles isolés dans .c3d-hero-clean
   ====================================================== */
.c3d-hero-clean{
  position:relative;
  overflow:hidden;
  padding:28px 0 42px;
  background:linear-gradient(135deg,#f4fbf8 0%,#eef8f4 45%,#eafaf3 100%);
  font-family:Arial,Helvetica,sans-serif;
  color:#20262b;
}
.c3d-hero-clean,.c3d-hero-clean *{box-sizing:border-box}
.c3d-hero-clean__inner{width:min(1320px,calc(100% - 28px));margin:0 auto}
.c3d-hero-clean__visual{
  width:100%;margin:0 auto 28px;border-radius:18px;overflow:hidden;
  animation:c3dHeroFade .8s ease both;
}
.c3d-hero-clean__image{
  display:block;width:100%;max-width:100%;height:auto;border-radius:18px;
  filter:drop-shadow(0 16px 36px rgba(20,50,40,.08));
}
.c3d-hero-clean__content{
  max-width:860px;margin:0 auto;text-align:center;
  animation:c3dHeroUp .8s ease both;
}
.c3d-hero-clean__title{
  margin:0 0 16px;font-size:clamp(34px,4vw,62px);font-weight:500;
  line-height:1.07;letter-spacing:-1.8px;color:#20262b;
}
.c3d-hero-clean__text{
  margin:0 auto 24px;max-width:760px;font-size:clamp(17px,1.3vw,22px);
  line-height:1.6;color:#5b6b73;
}
.c3d-hero-clean__actions{
  display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-bottom:28px;
}
.c3d-hero-clean .c3d-clean-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:54px;
  padding:0 24px;border-radius:10px;text-decoration:none!important;
  font-size:16px;font-weight:700;transition:background .2s ease,transform .2s ease;
}
.c3d-hero-clean .c3d-clean-btn--primary{
  background:#00b65f;color:#fff!important;
  box-shadow:0 12px 28px rgba(0,182,95,.16);
}
.c3d-hero-clean .c3d-clean-btn--primary:hover{background:#009b57;transform:translateY(-2px)}
.c3d-hero-clean .c3d-clean-btn--secondary{
  background:#fff;color:#175f45!important;border:1px solid #d9e2e0;
}
.c3d-hero-clean .c3d-clean-btn--secondary:hover{background:#f5fffa;transform:translateY(-2px)}
.c3d-hero-clean__features{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:8px;
}
.c3d-feature-card{
  min-width:0;background:rgba(255,255,255,.9);border:1px solid #dce8e2;
  border-radius:16px;padding:22px 18px 20px;
  box-shadow:0 10px 28px rgba(17,49,36,.05);
}
.c3d-feature-card__media{display:none} /* aucun visuel supplémentaire sur desktop */
.c3d-feature-card__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;margin-bottom:14px;border-radius:50%;
  background:#e7fff1;color:#009757;font-size:14px;font-weight:800;
}
.c3d-feature-card h3{margin:0 0 10px;font-size:20px;line-height:1.25;color:#1f3056}
.c3d-feature-card p{margin:0;font-size:15px;line-height:1.55;color:#607079}
.c3d-feature-card__points{display:none}
@keyframes c3dHeroFade{from{opacity:0}to{opacity:1}}
@keyframes c3dHeroUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media (min-width:1500px){.c3d-hero-clean__inner{width:min(1400px,calc(100% - 34px))}}
@media (max-width:1024px){
  .c3d-hero-clean{padding:24px 0 34px}
  .c3d-hero-clean__features{grid-template-columns:1fr;gap:14px;max-width:760px;margin-left:auto;margin-right:auto}
  .c3d-feature-card{text-align:center}
}

/* MOBILE — la seule zone dont le design change */
@media (max-width:767px){
  .c3d-hero-clean{padding:23px 0 26px}
  .c3d-hero-clean__inner{width:calc(100% - 18px)}

  /* Masque les trois petits téléphones en une seule image */
  .c3d-hero-clean__visual{display:none!important}

  .c3d-hero-clean__content{padding:0 7px;text-align:center}
  .c3d-hero-clean__title{
    max-width:550px;margin:0 auto 12px;font-size:clamp(27px,7.8vw,37px);
    line-height:1.11;letter-spacing:-.9px;font-weight:700;color:#11254a;
  }
  .c3d-hero-clean__text{
    max-width:340px;margin:0 auto 19px;font-size:15px;line-height:1.5;color:#596e78;
  }
  .c3d-hero-clean__actions{
    flex-direction:row;flex-wrap:wrap;gap:9px;margin-bottom:24px;
  }
  .c3d-hero-clean .c3d-clean-btn{
    min-height:45px;min-width:0;flex:1 1 120px;max-width:184px;
    padding:0 10px;border-radius:9px;font-size:13px;
  }
  .c3d-hero-clean__features{
    display:grid;grid-template-columns:1fr;gap:16px;max-width:500px;
    margin:0 auto;
  }
  .c3d-feature-card{
    display:flex;flex-direction:column;padding:0;overflow:hidden;
    border:1px solid #e3eee8;border-radius:20px;text-align:left;
    background:#fff;box-shadow:0 12px 32px rgba(12,69,47,.055);
  }

  /* Même image WordPress, recadrée sur UN téléphone à la fois. */
  .c3d-feature-card__media{
    --c3d-stage-image-width:385vw;
    --c3d-stage-x:-50%;
    --c3d-stage-top:-40px;
    display:block;position:relative;isolation:isolate;overflow:hidden;
    width:100%;height:clamp(375px,122vw,515px);
    background:linear-gradient(155deg,#fbfffd 0%,#edfff7 100%);
  }
  .c3d-feature-card__media::after{
    content:"";position:absolute;bottom:0;left:0;right:0;height:28px;
    background:linear-gradient(to bottom,transparent,rgba(246,255,250,.65));
    z-index:1;pointer-events:none;
  }
  .c3d-feature-card__image{
    display:block!important;position:absolute!important;left:50%!important;
    top:var(--c3d-stage-top)!important;width:var(--c3d-stage-image-width)!important;
    max-width:none!important;height:auto!important;
    transform:translateX(var(--c3d-stage-x))!important;
    object-fit:initial!important;filter:none!important;border-radius:0!important;
  }
  /* Coordonnées relatives au montage 3D original */
  .c3d-feature-card--planning .c3d-feature-card__media{
    --c3d-stage-x:-26%;--c3d-stage-top:-84px;
  }
  .c3d-feature-card--media .c3d-feature-card__media{
    --c3d-stage-x:-50%;--c3d-stage-top:-30px;
  }
  .c3d-feature-card--paq .c3d-feature-card__media{
    --c3d-stage-x:-74.5%;--c3d-stage-top:-87px;
  }

  .c3d-feature-card__body{padding:17px 20px 22px}
  .c3d-feature-card__icon{
    width:38px;height:38px;margin:0 0 10px;font-size:14px;
  }
  .c3d-feature-card h3{
    margin:0 0 8px;font-size:clamp(22px,6.2vw,27px);
    line-height:1.15;letter-spacing:-.45px;color:#10264a;
  }
  .c3d-feature-card p{margin:0;color:#60717e;font-size:15px;line-height:1.48}
  .c3d-feature-card__points{
    display:grid;gap:9px;padding:0;margin:16px 0 0;list-style:none;
  }
  .c3d-feature-card__points li{
    display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.35;
    color:#2d4457;
  }
  .c3d-feature-card__points li::before{
    content:"✓";display:inline-grid;place-items:center;flex:0 0 20px;
    width:20px;height:20px;border-radius:50%;color:#fff;
    background:#04b86a;font-weight:800;font-size:12px;
  }

  /* Widgets flottants : HTML/CSS, non figés dans une image */
  .c3d-mini-widget{
    position:absolute;z-index:2;bottom:14px;padding:12px;
    background:rgba(255,255,255,.97);color:#16364e;
    border:1px solid #edf2f0;border-radius:13px;
    box-shadow:0 12px 30px rgba(18,48,37,.16);
    font-family:Arial,Helvetica,sans-serif;
  }
  .c3d-mini-widget--lots{left:12px;width:153px}
  .c3d-mini-widget--lots>strong{display:block;font-size:12px;margin-bottom:7px}
  .c3d-mini-widget__row{display:flex;gap:8px;align-items:center}
  .c3d-mini-widget__donut{
    display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;
    background:conic-gradient(#26af75 0 66.66%,#268bd5 66.66% 80%,#d9e3ec 80% 100%);
    border-radius:50%;
  }
  .c3d-mini-widget__donut span{
    display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
    background:white;font-weight:800;font-size:15px;
  }
  .c3d-mini-widget__legend{display:grid;gap:4px;font-size:9px;line-height:1.2}
  .c3d-mini-widget__legend>span{display:flex;align-items:center;gap:4px;white-space:nowrap}
  .c3d-dot{display:inline-block;width:7px;height:7px;border-radius:50%;flex:0 0 7px}
  .c3d-dot--done{background:#26af75}.c3d-dot--live{background:#268bd5}.c3d-dot--todo{background:#d9e3ec}
  .c3d-mini-widget--360{
    right:12px;bottom:16px;width:114px;min-height:90px;text-align:center;
    display:grid;align-content:center;gap:2px;
    background:linear-gradient(135deg,#e1fff4,#fff);
  }
  .c3d-mini-widget__360-symbol{font-size:29px;font-weight:800;color:#057c58;line-height:1.1}
  .c3d-mini-widget--360>span:last-child{font-size:11px;font-weight:700}
  .c3d-mini-widget--quality{
    left:10px;bottom:16px;display:flex;gap:9px;align-items:center;max-width:175px;
  }
  .c3d-mini-widget__check{
    width:32px;height:32px;display:grid;place-items:center;border-radius:9px;
    background:#e0fff0;color:#038c53;font-weight:800;font-size:21px;
  }
  .c3d-mini-widget--quality strong{display:block;font-size:11px}
  .c3d-mini-widget--quality small{display:block;margin-top:3px;color:#677b84;font-size:10px}
}

@media (max-width:350px){
  .c3d-hero-clean__inner{width:calc(100% - 12px)}
  .c3d-feature-card__media{--c3d-stage-image-width:400vw;height:385px}
  .c3d-feature-card--planning .c3d-feature-card__media{--c3d-stage-top:-72px}
  .c3d-feature-card--paq .c3d-feature-card__media{--c3d-stage-top:-72px}
  .c3d-feature-card__body{padding:17px}
  .c3d-feature-card h3{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  .c3d-hero-clean__visual,.c3d-hero-clean__content{animation:none}
  .c3d-hero-clean .c3d-clean-btn{transition:none}
}