/* Page Setup : récapitulatif, barre du bas (résumé, livraison, navigation), setups prêts. */
.etape[data-recap] { max-width: 680px; }
.etape .vide { color: var(--sg-gris); margin: var(--sg-2) 0 0; }
.etape .vide .btn { margin-top: var(--sg-4); }
.lignes { display: grid; margin-top: var(--sg-3); }
.lignes li { display: flex; align-items: center; gap: var(--sg-3); padding-block: var(--sg-3); border-bottom: var(--sg-filet); }
.lignes .mini { width: 48px; height: 48px; object-fit: contain; background: var(--sg-ecume); flex: none; }
.lignes .nom { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.lignes .nom > span { display: block; color: var(--sg-gris); font-size: var(--sg-t-legende); }
.lignes .modifier { display: block; min-height: 32px; margin-top: var(--sg-1); font-size: var(--sg-t-legende); color: var(--sg-lien); text-decoration: underline; }
.lignes .fin { display: flex; align-items: center; gap: var(--sg-1); font-weight: 600; white-space: nowrap; }
.lignes .retire { min-width: 44px; min-height: 44px; border: 0; background: none; font-size: 20px; line-height: 1; color: var(--sg-gris); cursor: pointer; }
.absents { display: grid; margin-top: var(--sg-2); color: var(--sg-gris); font-size: var(--sg-t-petit); }
.absents li { padding-block: 2px; }
.absents .lien-bouton { color: var(--sg-lien); text-decoration: underline; min-height: 36px; }
.ligne-total { display: flex; justify-content: space-between; margin-top: var(--sg-4); font-size: var(--sg-t-lead); }
.ligne-remise, .ligne-livraison { display: flex; justify-content: space-between; margin-top: var(--sg-3); color: var(--sg-succes); font-weight: 600; }
.ligne-remise[hidden], .ligne-livraison[hidden], .livraison[hidden], .remise-info[hidden] { display: none; }
.remise-info { margin-top: var(--sg-3); color: var(--sg-succes); font-size: var(--sg-t-petit); }
.livraison { margin: var(--sg-2) 0 0; }
.livraison.offerte { color: var(--sg-succes); font-weight: 600; }
.assurance { display: flex; flex-wrap: wrap; gap: var(--sg-2) var(--sg-5); margin-top: var(--sg-4); padding-top: var(--sg-4); border-top: var(--sg-filet); font-size: var(--sg-t-petit); }
.assurance li::before { content: "✓ "; color: var(--sg-succes); font-weight: 600; }
.effacer, .annuler { margin-top: var(--sg-5); font-size: var(--sg-t-petit); }
.annuler { padding: var(--sg-3) var(--sg-4); background: var(--sg-ecume); }

/* Barre du bas : résumé et livraison à gauche, navigation à droite */
.barre { height: 6px; margin-block: var(--sg-1); background: var(--sg-ecume); max-width: 360px; }
.barre i { display: block; height: 100%; width: 0; background: var(--sg-encre); transition: width var(--sg-duree) var(--sg-courbe); }
.pied-etapes { position: sticky; bottom: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: var(--sg-5); margin: var(--sg-6) calc(-1 * var(--sg-gouttiere)) 0; padding: var(--sg-3) var(--sg-gouttiere); background: var(--sg-blanc); border-top: var(--sg-filet); box-shadow: 0 -6px 16px rgba(27, 47, 75, .08); }
.pied-etapes .resume { flex: 1; min-width: 0; font-size: var(--sg-t-petit); }
.pied-etapes .resume b { display: block; }
.pied-etapes .resume span { display: block; color: var(--sg-gris); font-size: var(--sg-t-legende); }
.pied-etapes .resume span.offerte { color: var(--sg-succes); font-weight: 600; }
.pied-etapes .alerte { color: var(--sg-erreur); font-weight: 600; }
.nav-etapes { display: flex; gap: var(--sg-2); align-items: center; }
.nav-etapes .btn { padding: 0 var(--sg-5); }
.nav-etapes .court { display: none; }
.btn.btn-lien { background: none; border-color: transparent; color: var(--sg-encre); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
@media (hover: hover) { .btn.btn-lien:hover { background: var(--sg-ecume); } }
@media (prefers-reduced-motion: no-preference) { .nav-etapes .btn-p { transition: background-color var(--sg-duree) var(--sg-courbe); } }

.prets { grid-template-columns: minmax(0, 1fr); }
.pret img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--sg-blanc); border: 1px solid var(--sg-ecume); }
.pret h3 { margin-block: var(--sg-3); }
.pret .total { font-weight: 600; margin-block: var(--sg-3) var(--sg-4); }
@media (min-width: 768px) { .prets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Mobile : une seule ligne fine, « Précédent » devient une flèche, « Suivant » perd le nom de l'étape */
@media (max-width: 767px) {
  .pied-etapes { gap: var(--sg-3); padding-block: var(--sg-2); }
  .pied-etapes .barre { display: none; }
  .nav-etapes .btn { min-height: 44px; padding: 0 var(--sg-4); white-space: normal; line-height: 1.15; text-align: center; }
  .nav-etapes [data-prec] { min-width: 44px; padding: 0; }
  .nav-etapes .long, .nav-etapes .sv-nom { display: none; }
  .nav-etapes .court { display: inline; font-size: 22px; line-height: 1; }
  .lignes .mini { width: 40px; height: 40px; }
}