/*
 * Styles communs des fiches métier Serv'Eau (gabarit templates/prestations/_fiche_layout.html.twig).
 * Repris des fiches récentes (ex. Fraisage robotisé) pour une présentation homogène.
 * L'image de fond du bandeau est fournie par la variable CSS --se-hero-bg (définie dans le gabarit).
 */
:root{
  --se-primary:#0B3A53;
  --se-accent:#1EA7A1;
  --se-dark:#082635;
  --se-muted:#6b7b85;
  --se-bg:#F5F7FA;
}

.se-hero{
  background:
    linear-gradient(120deg, rgba(11,58,83,.92), rgba(8,38,53,.92)),
    var(--se-hero-bg, none) center/cover no-repeat;
  color:#fff;
  border-radius:18px;
  padding:54px 22px;
}
.se-hero h1{ font-weight:950; letter-spacing:.2px; }
.se-hero p{ color:rgba(255,255,255,.88); }

.se-pill{
  display:inline-block;
  background:rgba(30,167,161,.18);
  color:#E9FFFE;
  border:1px solid rgba(30,167,161,.35);
  padding:6px 10px;
  border-radius:999px;
  font-size:.92rem;
}

.btn-se-primary{
  background:var(--se-accent);
  border-color:var(--se-accent);
  color:#fff;
  font-weight:900;
  border-radius:999px;
  padding:.75rem 1.05rem;
  box-shadow:0 14px 30px rgba(30,167,161,.18);
}
.btn-se-primary:hover{ filter:brightness(.95); color:#fff; }

.btn-se-outline{
  border:1px solid rgba(255,255,255,.35);
  color:#fff; font-weight:900;
  border-radius:999px;
  padding:.75rem 1.05rem;
  background:rgba(255,255,255,.06);
}
.btn-se-outline:hover{ background:rgba(255,255,255,.12); color:#fff; }

.se-section{ padding:38px 0; }

.se-feature{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  overflow:hidden;
}
.se-feature .left{ padding:26px; }
.se-feature .right{ background:var(--se-bg); padding:0; }
.se-feature .right img{
  width:100%; height:100%;
  min-height:300px;
  object-fit:cover;
}
.se-feature h2{
  color:var(--se-primary);
  font-weight:950;
}

.se-card{
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  height:100%;
  transition:transform .12s ease, box-shadow .12s ease;
}
.se-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.10);
}

.se-mini-title{
  color:var(--se-primary);
  font-weight:950;
  margin-bottom:10px;
}
.se-list{ padding-left:18px; color:var(--se-muted); }
.se-list li{ margin-bottom:6px; }

.se-card.se-card-aqua{
  background:linear-gradient(135deg, rgba(11,58,83,.95), rgba(30,167,161,.85)) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 16px 40px rgba(11,58,83,.16) !important;
  color:#fff !important;
}
.se-card.se-card-aqua *{ color:#fff !important; }
.se-card.se-card-aqua li{ opacity:.92; }
.se-card.se-card-aqua li::marker{ color:rgba(255,255,255,.85) !important; }

.se-fig{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  margin:0;
  background:#000;
}
.se-fig .se-card-img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
  transition:transform .25s ease;
}
.se-fig:hover .se-card-img{ transform:scale(1.03); }
.se-fig::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:65%;
  pointer-events:none;
  background:linear-gradient(
    to top,
    rgba(8,38,53,0.95) 0%,
    rgba(8,38,53,0.85) 25%,
    rgba(8,38,53,0.55) 45%,
    rgba(8,38,53,0.20) 65%,
    rgba(8,38,53,0.00) 100%
  );
  z-index:1;
}
.se-cap{
  position:absolute;
  left:16px; right:16px; bottom:14px;
  z-index:2;
  color:#fff;
  font-weight:900;
  font-size:.95rem;
  line-height:1.3;
  margin:0;
  text-shadow:0 6px 20px rgba(0,0,0,.6);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.faq-wrap{ border-radius:18px; }
.faq-item{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  overflow:hidden;
  margin-bottom:10px;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
}
.faq-btn{
  width:100%;
  border:0;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 16px;
  font-weight:950;
  color:var(--se-primary);
  text-align:left;
  cursor:pointer;
}
.faq-btn:hover{ background:rgba(11,58,83,.04); }
.faq-icon{
  width:38px; height:38px;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(30,167,161,.12);
  color:var(--se-primary);
  flex:0 0 auto;
  transition:transform .18s ease;
}
.faq-body{
  padding:0 16px 16px 16px;
  color:var(--se-muted);
  line-height:1.55;
}
.faq-btn[aria-expanded="true"] .faq-icon{ transform:rotate(180deg); }

@media (max-width: 767.98px){
  .se-hero{ padding:36px 18px; }
  .se-fig .se-card-img{ height:210px; }
  .se-feature .right img{ min-height:220px; }
  .se-section{ padding:28px 0; }
}

/* Compléments du gabarit commun */
.se-h2{ color:var(--se-primary); font-weight:950; }
.se-prose p{ color:var(--se-muted); line-height:1.65; }
.se-prose h3{ color:var(--se-primary); font-weight:900; font-size:1.1rem; margin-top:18px; }
.se-steps{ counter-reset:step; list-style:none; padding-left:0; margin:0; }
.se-steps li{ position:relative; padding:0 0 12px 46px; color:var(--se-muted); }
.se-steps li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:-2px; width:32px; height:32px; border-radius:999px;
  background:rgba(30,167,161,.14); color:var(--se-primary); font-weight:900;
  display:flex; align-items:center; justify-content:center;
}
.se-cta-band{
  background:linear-gradient(135deg, rgba(11,58,83,.96), rgba(30,167,161,.88));
  border-radius:18px; padding:28px 24px; color:#fff;
}
.se-cta-band h2, .se-cta-band p{ color:#fff !important; }
@media (max-width: 575.98px){
  .se-hero h1{ font-size:1.7rem; }
  .se-feature .left{ padding:18px; }
  .se-cta-band{ padding:22px 16px; }
}