traitement-eau.css
.water-page{
  --water-blue-900:#0d3e77;
  --water-blue-700:#155aa7;
  --water-blue-600:#1a66c7;
  --water-text:#16324f;
}

.water-page__back{
  padding:12px 0 0;
}

.water-page__back .container{
  display:flex;
  justify-content:flex-start;
}

.water-page__back a{
  display:inline-block;
  font-weight:600;
  color:#1a66c7;
  text-decoration:none;
  font-size:.95rem;
}

.water-page__back a:hover{
  text-decoration:underline;
}

.water-page__title{
  padding:18px 0 10px;
  text-align:center;
}

.water-page__title h1{
  margin:0;
  font-size:clamp(2.6rem, 6vw, 4.8rem);
  line-height:1.02;
  font-weight:900;
  letter-spacing:-0.03em;
  background:
    linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.08)),
    url("images/eau-bandeau.jpg") center center / cover no-repeat;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  text-shadow:0 2px 18px rgba(13,62,119,.10);
}

.water-page__subtitle{
  margin:6px 0 0;
  font-size:1.12rem;
  font-weight:700;
  color:var(--water-blue-600);
}

.water-page__banner{
  padding:4px 0 0;
}

.water-page__banner-image{
  min-height:340px;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 16px 35px rgba(0,0,0,.14);
  background:
    linear-gradient(
      90deg,
      rgba(9,43,88,.14) 0%,
      rgba(17,86,167,.10) 45%,
      rgba(14,66,132,.14) 100%
    ),
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 28%),
    radial-gradient(circle at 78% 30%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 24%),
    url("images/eau-bandeau.jpg") center center / cover no-repeat;
  filter:brightness(1.15) saturate(1.08) contrast(1.02);
}

.water-page__intro{
  padding:16px 0 10px;
}

.water-page__intro .container{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

.water-page__intro p{
  margin:0;
  max-width:900px;
  font-size:1.08rem;
  line-height:1.75;
  color:var(--water-text);
  text-align:center;
}

.water-page__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:15px 30px;
  border-radius:18px;
  font-weight:800;
  color:#fff;
  text-align:center;
  background:
    radial-gradient(circle at 16% 22%, rgba(255,255,255,.30) 0 3%, transparent 4%),
    radial-gradient(circle at 26% 32%, rgba(255,255,255,.18) 0 2.2%, transparent 3.2%),
    radial-gradient(circle at 72% 26%, rgba(255,255,255,.22) 0 2.6%, transparent 3.6%),
    radial-gradient(circle at 84% 36%, rgba(255,255,255,.14) 0 2%, transparent 3%),
    radial-gradient(circle at 58% 18%, rgba(255,255,255,.12) 0 1.8%, transparent 2.8%),
    linear-gradient(135deg, #0f4f98 0%, #1a66c7 52%, #0d3e77 100%);
  box-shadow:0 12px 28px rgba(13,62,119,.28);
  border:1px solid rgba(255,255,255,.20);
  transition:.2s ease;
}

.water-page__btn:hover{
  transform:translateY(-2px);
}

.water-page__section{
  padding:30px 0;
}

.water-page__section--alt{
  background:#f4f8fd;
}

.water-page__section h2{
  margin:0 0 14px;
  font-size:2rem;
  line-height:1.15;
  color:var(--water-blue-900);
  text-align:center;
}

.water-page__section-text{
  max-width:920px;
  margin:0 auto;
  text-align:center;
  font-size:1.05rem;
  color:var(--water-text);
}

.water-page__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  margin-top:22px;
}

.water-page__card{
  background:#fff;
  padding:22px;
  border-radius:18px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  border:1px solid rgba(24,74,145,.10);
}

.water-page__card h3{
  margin:0 0 10px;
  font-size:1.2rem;
  color:var(--water-blue-900);
}

.water-page__card p{
  margin:0;
  color:var(--water-text);
}

.water-page__cta{
  background:
    linear-gradient(135deg,#0d3e77 0%,#155aa7 50%,#0d3e77 100%);
  color:#fff;
  text-align:center;
  padding:44px 0;
  border-radius:24px;
  margin:28px auto 34px;
  box-shadow:0 14px 30px rgba(13,62,119,.25);
  position:relative;
  overflow:hidden;
}

.water-page__cta::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.08), transparent 30%),
    radial-gradient(circle at 80% 60%, rgba(255,255,255,.06), transparent 30%);
  pointer-events:none;
}

.water-page__cta .container{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.water-page__cta h2{
  margin:0 0 12px;
  font-size:1.8rem;
  font-weight:800;
  position:relative;
  z-index:1;
}

.water-page__cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:15px 30px;
  border-radius:18px;
  font-weight:800;
  color:#fff;
  position:relative;
  z-index:1;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 20%),
    radial-gradient(circle at 78% 30%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 18%),
    linear-gradient(135deg, #0f4f98 0%, #1a66c7 52%, #0d3e77 100%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 12px 28px rgba(13,62,119,.28);
  transition:.2s ease;
}

.water-page__cta-btn:hover{
  transform:translateY(-2px);
}

@media (max-width:900px){
  .water-page__grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:700px){
  .water-page__title h1{
    font-size:clamp(2.2rem, 10vw, 3.2rem);
  }

  .water-page__subtitle{
    font-size:1.02rem;
  }

  .water-page__banner-image{
    min-height:230px;
    border-radius:22px;
  }

  .water-page__intro p,
  .water-page__section-text{
    font-size:1rem;
  }

  .water-page__btn,
  .water-page__cta-btn{
    width:100%;
    max-width:320px;
  }

  .water-page__section{
    padding:24px 0;
  }

  .water-page__cta{
    padding:34px 0;
    border-radius:20px;
  }

  .water-page__cta h2{
    font-size:1.5rem;
  }
}