:root{
  --brand:#0b4f9c;
  --brand2:#083f83;
  --soft:#f6f8fb;
  --card:#ffffff;
  --muted:#6b7280;
  --radius:16px;
}

body{
  background:#fff;
}

.brand-dot{
  width:12px; height:12px;
  border-radius:999px;
  background:var(--brand);
  display:inline-block;
}

.hero-wrap{
  background:#fff;
}

.hero-card{
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(90deg, var(--brand) 0%, var(--brand2) 100%);
  box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.hero-inner{
  padding:28px;
  min-height:320px;
}

@media (min-width: 992px){
  .hero-inner{ padding:46px; min-height:360px; }
}

.hero-badge{
  padding:.45rem .75rem;
  font-weight:600;
  background:rgba(255,255,255,.95) !important;
}

.hero-lead{
  max-width:520px;
}

.hero-media{
  display:flex;
  justify-content:center;
  align-items:center;
}

.hero-graphic{
  width:min(520px, 100%);
  height:240px;
  position:relative;
}

.hero-graphic-card{
  position:absolute;
  inset:auto 0 0 auto;
  width:70%;
  height:70%;
  border-radius:18px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  transform:rotate(-2deg);
  backdrop-filter: blur(2px);
}

.hero-graphic-card.small{
  width:52%;
  height:52%;
  right:8%;
  bottom:12%;
  transform:rotate(3deg);
  background:rgba(255,255,255,.10);
}

.hero-graphic-card.tiny{
  width:34%;
  height:34%;
  right:18%;
  bottom:26%;
  transform:rotate(-6deg);
  background:rgba(255,255,255,.08);
}

.hero-graphic.alt .hero-graphic-card{ transform:rotate(2deg); }
.hero-graphic.alt2 .hero-graphic-card{ transform:rotate(6deg); }

.hero-indicators{
  margin-bottom:12px;
}

.hero-indicators [data-mdb-target]{
  width:8px;
  height:8px;
  border-radius:999px;
  border:0;
  opacity:.5;
}

.hero-indicators .active{
  opacity:1;
}

.universe-card{
  background:#f1f4f9;
  border-radius:var(--radius);
  border:1px solid #e8eef7;
}

.universe-icon{
  width:44px; height:44px;
  border-radius:12px;
  background:var(--brand);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:18px;
}

.section-soft{
  background:var(--soft);
}

.product-card{
  background:var(--card);
  border-radius:14px;
  border:1px solid #eef2f7;
  overflow:hidden;
  box-shadow:0 8px 18px rgba(0,0,0,.04);
}

.product-media{
  height:160px;
  background:#f3f5f9;
  display:flex;
  align-items:center;
  justify-content:center;
}

.badge-new{
  background:#e9f7ef;
  color:#1b7a3a;
  font-weight:700;
  font-size:.7rem;
  border-radius:8px;
  padding:.35rem .5rem;
}

.price{
  font-weight:800;
  color:#0b3b7a;
}

.ph-img{
  width:86px; height:86px;
  border-radius:18px;
  background:linear-gradient(180deg, #ffffff 0%, #e7ecf6 100%);
  border:1px solid #dde6f5;
  position:relative;
}

/* petits “dessins” */
.ph-led::after{
  content:"";
  position:absolute;
  inset:18px 14px 18px 14px;
  border-radius:12px;
  border:2px solid rgba(11,79,156,.25);
}
.ph-breaker::after{
  content:"";
  position:absolute;
  inset:14px 26px;
  border-radius:10px;
  background:rgba(11,79,156,.18);
}
.ph-panel::after{
  content:"23";
  position:absolute;
  inset:auto 18px 18px auto;
  font-weight:800;
  font-size:14px;
  color:rgba(11,79,156,.65);
}
.ph-cable::after{
  content:"";
  position:absolute;
  width:56px; height:10px;
  left:14px; top:38px;
  border-radius:999px;
  background:rgba(11,79,156,.22);
}
.ph-faucet::after{
  content:"";
  position:absolute;
  width:44px; height:44px;
  left:22px; top:22px;
  border-radius:12px;
  background:rgba(11,79,156,.14);
}
.ph-shower::after{
  content:"";
  position:absolute;
  width:10px; height:52px;
  left:38px; top:14px;
  border-radius:999px;
  background:rgba(11,79,156,.22);
}
.ph-wc::after{
  content:"";
  position:absolute;
  width:40px; height:46px;
  left:24px; top:20px;
  border-radius:16px;
  border:2px solid rgba(11,79,156,.22);
}
.ph-boiler::after{
  content:"";
  position:absolute;
  width:40px; height:60px;
  left:24px; top:12px;
  border-radius:16px;
  background:rgba(11,79,156,.12);
}

.ph-condensing::after{
  content:"";
  position:absolute;
  inset:16px 24px;
  border-radius:14px;
  background:rgba(11,79,156,.14);
}
.ph-radiator::after{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:14px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(11,79,156,.22),
      rgba(11,79,156,.22) 4px,
      rgba(11,79,156,.10) 4px,
      rgba(11,79,156,.10) 10px
    );
}
.ph-heatpump::after{
  content:"";
  position:absolute;
  width:52px; height:52px;
  left:17px; top:17px;
  border-radius:16px;
  border:2px dashed rgba(11,79,156,.25);
}
.ph-thermostat::after{
  content:"73";
  position:absolute;
  width:40px; height:40px;
  left:23px; top:23px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-weight:900;
  color:rgba(11,79,156,.75);
  border:2px solid rgba(11,79,156,.22);
}

.why-item{
  padding:18px 14px;
}

.why-icon{
  width:56px; height:56px;
  border-radius:999px;
  background:#f1f4f9;
  border:1px solid #e8eef7;
  display:grid;
  place-items:center;
  margin:0 auto;
  color:var(--brand);
  font-size:18px;
}

.footer-dark{
  background:#2f343b;
  color:#fff;
}

.footer-title{
  font-weight:800;
  margin-bottom:.75rem;
}

.footer-links{
  list-style:none;
  padding:0;
  margin:0;
}

.footer-links li{
  margin-bottom:.5rem;
}

.footer-links a{
  color:rgba(255,255,255,.75);
  text-decoration:none;
  font-size:.9rem;
}

.footer-links a:hover{
  color:#fff;
  text-decoration:underline;
}

.social-btn{
  width:34px; height:34px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.10);
  color:#fff;
  text-decoration:none;
}

.social-btn:hover{
  background:rgba(255,255,255,.18);
  color:#fff;
}

.pay-pill{
  padding:.25rem .5rem;
  border-radius:8px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
}