/* =====================================================================
   TUNNEL « CHOISIR MON PARCOURS »
   ===================================================================== */

.ile-parcours { max-width: 760px; margin-inline: auto; }

/* Barre : précédent · progression · recommencer */
.ile-parcours__bar { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.ile-parcours__back, .ile-parcours__restart {
  background: none; border: 1px solid var(--ligne); border-radius: 999px;
  padding: .5rem .9rem; cursor: pointer; font: inherit; font-size: .9rem;
}
.ile-parcours__back:hover, .ile-parcours__restart:hover { border-color: var(--encre); }
.ile-parcours__restart { margin-left: auto; }
.ile-parcours__progress { flex: 1; height: 6px; background: var(--papier-alt); border-radius: 999px; overflow: hidden; }
.ile-parcours__progress span { display: block; height: 100%; width: 0; background: var(--or); transition: width var(--transition); }

/* Étape / question */
.ile-step { border: 0; padding: 0; margin: 0; }
.ile-step__q { font-family: var(--font-display); font-size: var(--pas-h2); line-height: 1.1; padding: 0; margin: 0 0 .4rem; }
.ile-step__intro { color: var(--encre-douce); margin: 0 0 1.4rem; }
.ile-step__opts { display: grid; gap: .8rem; }

.ile-step__opt {
  text-align: left; font: inherit; font-size: 1.05rem; font-weight: 500;
  background: var(--papier); color: var(--encre);
  border: 1px solid var(--ligne); border-left: 4px solid var(--uni);
  border-radius: var(--rayon-sm); padding: 1rem 1.2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.ile-step__opt::after { content: "→"; color: var(--uni); font-weight: 700; opacity: 0; transform: translateX(-6px); transition: var(--transition); }
.ile-step__opt:hover { transform: translateX(4px); box-shadow: var(--ombre-douce); }
.ile-step__opt:hover::after { opacity: 1; transform: translateX(0); }

/* Carte formule (résultat) */
.ile-formule {
  background: #ffffff; border: 1px solid var(--ligne);
  border-top: 5px solid var(--uni); border-radius: var(--rayon);
  padding: clamp(1.4rem, 4vw, 2.4rem); box-shadow: var(--ombre);
  animation: ile-fade var(--transition);
}
.ile-formule__eyebrow { font-family: var(--font-data); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--uni); margin: 0 0 .3rem; }
.ile-formule__head h3 { font-size: var(--pas-h2); margin: 0 0 .3rem; }
.ile-formule__sous { color: var(--encre-douce); margin: 0 0 .8rem; }
.ile-formule__prix { display: inline-block; font-family: var(--font-data); font-weight: 600; background: var(--uni-clair); color: var(--uni); padding: .55rem .9rem; border-radius: var(--rayon); line-height: 1.5; margin-bottom: 1.2rem; }
.ile-formule__temoin { border-left: 3px solid var(--uni); background: var(--uni-clair); margin: 0 0 1.2rem; padding: .8rem 1rem; border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0; font-style: italic; }
.ile-formule__desc { margin-bottom: 1rem; }
.ile-formule__inclus { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .5rem; }
.ile-formule__inclus li { position: relative; padding-left: 1.6rem; }
.ile-formule__inclus li::before { content: "✓"; position: absolute; left: 0; color: var(--uni); font-weight: 700; }
.ile-formule__video { margin: 0 0 1.2rem; }
.ile-formule__video a { color: var(--uni); font-weight: 600; text-decoration: none; }
.ile-formule__video a:hover { text-decoration: underline; }
.ile-formule__actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.ile-formule__note { font-family: var(--font-data); font-size: .82rem; color: var(--encre-douce); margin-top: 1rem; }

@media (max-width: 520px) {
  .ile-parcours__restart { margin-left: 0; }
  .ile-parcours__bar { flex-wrap: wrap; }
  .ile-parcours__progress { order: 3; flex-basis: 100%; }
}