/* ==========================================================================
   Kamai Event — Section « Comment ça marche » (#etapes).
   4 étapes : choix de la prestation → réservation (acompte 30 %) →
   création du cadre sur mesure + validation → installation le jour de votre événement.
   Dépend de css/tokens.css.
   ========================================================================== */
.etapes{
  background:var(--ivory); padding:7rem 1.8rem;
  border-top:1px solid rgba(197,165,114,.18);
}
.etapes__inner{ max-width:1100px; margin:0 auto; }

/* ---- En-tête ---- */
.etapes__head{ max-width:640px; margin:0 auto 4rem; text-align:center; }
.etapes .eyebrow{
  font-family:var(--sans); font-size:.72rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:1.1rem;
}
.etapes h2{
  font-family:var(--serif); font-weight:500; line-height:1.06;
  font-size:clamp(2rem,4vw,3rem); color:var(--ink); margin:0 0 1rem;
}
.etapes .lead{ color:var(--ink-soft); font-size:1.02rem; line-height:1.7; }

/* ---- Grille d'étapes ---- */
.etapes__grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:2.6rem;
}
.etape__num{
  display:block; font-family:var(--serif); font-weight:500;
  font-size:2.6rem; line-height:1; color:var(--gold);
}
.etape__num::after{
  content:""; display:block; width:34px; height:1px;
  background:rgba(184,148,106,.5); margin:1.1rem 0 1.3rem;
}
.etape__title{
  font-family:var(--serif); font-weight:600; font-size:1.3rem;
  line-height:1.2; color:var(--ink); margin:0 0 .6rem;
}
.etape__text{
  font-family:var(--sans); font-weight:300; font-size:.96rem;
  line-height:1.65; color:var(--ink-soft);
}

@media (max-width:860px){
  .etapes{ padding:4.5rem 1.4rem; }
  .etapes__head{ margin-bottom:2.8rem; }
  .etapes__grid{ grid-template-columns:1fr 1fr; gap:2.6rem 2rem; }
}
@media (max-width:480px){
  .etapes__grid{ grid-template-columns:1fr; }
}