.hero-image-metier {
  position: relative;
  background: url('../images/main_image_metier.jpg') no-repeat center center;
  background-size: cover; 
  height: 500px;
  width: 100%;
  color: white;
}
.hero-image-metier::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1;
}
.hero-image-metier::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.5) 70%,
        rgba(0, 0, 0, 0) 100%  
    );
    z-index: 2;
}
.hero-image-metier .container {
    position: relative;
    z-index: 3;
}

:root{
  --seviblue:#00479d;
  --soft-bg:#f5f7fb;
  --radius:1rem;
}
.section{padding:4rem 0;}
.category-card{
  border:0; border-radius:var(--radius);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  overflow:hidden; transition:transform .25s ease, box-shadow .25s ease;
  height:100%;
}
.category-card:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); }
.category-cover{ width:100%; height:160px; object-fit:cover; }
.chip{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#eef4ff; color:#0b5ed7; border:1px solid #d9e6ff;
  padding:.25rem .6rem; border-radius:999px; font-size:.8rem;
}
.icon-bubble{
  width:48px; height:48px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#e9f1ff; color:var(--seviblue);
}
.feature-card{
  border:0; border-radius:var(--radius);
  box-shadow:0 8px 22px rgba(0,0,0,.06); height:100%;
}
.steps .dot{
  width:20px; height:20px; border-radius:50%;
  background:#fff; border:4px solid var(--seviblue); margin:0 auto .5rem;
}
.faq .accordion-button{ font-weight:600; }

/* Style générale à tous les packs métiers */
.hero-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1;
}
.hero-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.5) 70%,
        rgba(0, 0, 0, 0) 100%  
    );
    z-index: 2;
}
.hero-image .container {
    position: relative;
    z-index: 3;
}