/* Intro */
.indi-hero{
  background: var(--blue);
  color:#fff;
  padding:60px 0;
}
.indi-hero h1{
  font-family:"Playfair Display",serif;
  font-size:clamp(28px,5vw,42px);
  margin:0 0 14px;
}
.indi-hero h1 span{ color: var(--orange); }
.indi-hero .lead{ font-size:1.1rem; color:#eaf2ff; margin-bottom:12px; }
.example{
  margin-top:12px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2); border-radius:12px;
  padding:14px; font-style:italic; color:#eaf2ff;
}

/* Simulateur */
.indi-sim{ background:#f9f9f9; padding:60px 0; }
.indi-sim h2{ text-align:center; margin:0 0 24px; }

/* Fonctionnement */
.indi-steps{ background:#fff; padding:60px 0; }
.indi-steps h2{ text-align:center; margin:0 0 24px; color: var(--blue); }
.steps-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.step{
  background:#fff; border:1px solid #e8edf6; border-radius:14px;
  padding:20px; box-shadow:0 6px 20px rgba(0,0,0,.08);
  text-align:center;
}
.step .icon{ font-size:32px; margin-bottom:10px; }
.step h3{ font-size:1rem; margin:0 0 8px; color:var(--blue); }
.step p{ font-size:.95rem; color:#29324a; }

@media(max-width:960px){
  .steps-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:600px){
  .steps-grid{ grid-template-columns:1fr; }
}

/* ===== Fonctionnement — premium dark avec titre retravaillé ===== */
.indi-steps--dark{
  background: var(--blue);
  color:#fff;
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}
.indi-steps--dark::before{
  content:"";
  position:absolute; inset:-8% -8% auto -8%; height:48%;
  background:
    radial-gradient(900px 320px at 12% 0%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(500px 200px at 88% 10%, rgba(255,116,62,.06), transparent 70%);
  pointer-events:none;
}

/* Titre premium */
.indi-steps__head{ text-align:center; margin-bottom: 18px; }
.indi-steps__head .kicker{
  margin:0 0 4px; letter-spacing:.08em; text-transform:uppercase;
  font-weight:700; font-size:.82rem; color:#cfe1ff; opacity:.9;
}
.indi-steps__head h2{
  font-family:"Playfair Display",serif;
  font-size: clamp(28px, 4.2vw, 40px);
  margin:0 0 6px;
}
.indi-steps__head .sub{ margin:0; color:#eaf2ff; font-size:1.05rem; }

/* Flow vertical */
.steps-flow{
  list-style:none; margin: 0 auto; padding:0;
  display:grid; gap:14px; max-width: 980px;
}
.step-card{
  display:grid; grid-template-columns: 64px 1fr; gap:14px; align-items:start;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px; padding:14px;
}
.step-marker{ position:relative; display:grid; place-items:flex-start; }
.step-marker .dot{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  background: rgba(255,116,62,.16);
  color:#fff; font-weight:800;
  border:1px solid rgba(255,255,255,.25);
  box-shadow: 0 6px 16px rgba(0,0,0,.18) inset;
}
.step-marker .rail{
  position:absolute; left:17px; top:40px; bottom:-14px; width:2px;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.06));
  border-radius:2px;
}

/* Icônes SVG pro */
.ic-svg{
  width:52px; height:52px; border-radius:14px;
  display:grid; place-items:center;
  background:#fff; color:#0f172a;
  box-shadow:0 10px 24px rgba(0,0,0,.16);
}
.ic-svg svg{ width:30px; height:30px; }

/* Texte */
.step-body{
  display:grid; grid-template-columns: 52px 1fr; gap:12px; align-items:flex-start;
}
.step-body .txt h3{
  margin:2px 0 6px; font-size:1.06rem; color:#fff;
}
.step-body .txt p{
  margin:0; color:#eaf2ff; line-height:1.6;
}
.steps-flow{
  gap:18px; /* un peu plus d’espace entre chaque étape */
}

/* Note finale */
.indi-steps__note{
  margin: 14px auto 0;
  max-width: 980px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  padding:12px 14px;
  display:flex; align-items:center; gap:8px;
  color:#eaf2ff;
}
.indi-steps__note .shield{ font-size:18px; }

/* Responsive */
@media (max-width: 720px){
  .step-card{ grid-template-columns: 48px 1fr; }
  .step-marker .dot{ width:30px; height:30px; font-size:.95rem; }
  .step-marker .rail{ left:14px; }
  .ic-svg{ width:44px; height:44px; }
  .ic-svg svg{ width:26px; height:26px; }
  .step-body{ grid-template-columns: 44px 1fr; }
}





/* === Simulateur CTA en 2 colonnes === */
.sim-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
  margin-top: 32px;
}
.sim-cta-grid .grand {
  /* text-align: center; */
  font-weight: 700;
  font-size: 1.2rem;
  color: #fff;
  padding: 20px;
  background: linear-gradient(135deg, var(--blue), #021737);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.sim-cta-grid .actions {
  display: flex;
  justify-content: center;
}