/* Parcours « Composez votre pack ». Reprend les variables du theme sapins9 :
   la couleur d'accent est celle de la charte, pas une valeur figee ici. */

.sapinspack { max-width: 1200px; margin: 0 auto; padding: 0 1rem 3rem; }

/* Fil des etapes */
.sapinspack__fil {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  list-style: none; margin: 0 0 2rem; padding: 1rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.sapinspack__fil-etape { display: flex; align-items: center; gap: .6rem; opacity: .55; }
.sapinspack__fil-etape.is-faite { opacity: 1; }
.sapinspack__fil-numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: rgba(0, 0, 0, .08); font-weight: 600; font-size: .95rem;
}
.is-faite .sapinspack__fil-numero { background: var(--sapins-red, #AE0011); color: #fff; }
.sapinspack__fil-titre { font-weight: 600; }

/* Etapes */
.sapinspack__etape { margin-bottom: 3rem; }
.sapinspack__titre { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.sapinspack__numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--sapins-red, #AE0011); color: #fff; font-size: 1.1rem;
}
.sapinspack__badge {
  font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  padding: .2rem .6rem; border-radius: 1rem;
  background: rgba(25, 135, 84, .12); color: #198754;
}

/* Produits */
.sapinspack__grille {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.sapinspack__produit {
  display: flex; flex-direction: column;
  border: 1px solid rgba(0, 0, 0, .1); border-radius: .5rem; padding: 1rem;
  background: #fff;
}
.sapinspack__vignette img { width: 100%; height: auto; border-radius: .35rem; }
.sapinspack__nom { font-size: 1rem; margin: .75rem 0 .5rem; }
.sapinspack__nom a { color: inherit; text-decoration: none; }
.sapinspack__nom a:hover { text-decoration: underline; }
.sapinspack__form { margin-top: auto; }
.sapinspack__label { display: block; font-size: .85rem; margin-bottom: .25rem; }
.sapinspack__select { margin-bottom: .75rem; }
.sapinspack__prix { font-weight: 700; margin: 0 0 .75rem; }
.sapinspack__ligne { display: flex; align-items: flex-end; gap: .5rem; }
.sapinspack__qte { width: 4.5rem; }
.sapinspack__ajouter { flex: 1; }

@media (max-width: 480px) {
  .sapinspack__grille { grid-template-columns: 1fr; }
}