/* Panier et commande : grille 2 colonnes, cartes d'articles, récapitulatif collant, formulaire du tunnel */
.centre { text-align: center; }
.tunnel-grille { display: grid; gap: var(--sg-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) {
  .tunnel-grille { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sg-8); }
  .tunnel-grille > .recap-carte { grid-column: 2; grid-row: 1; position: sticky; top: var(--sg-6); }
}

.express { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sg-3); margin-top: var(--sg-6); }
.express .btn { min-height: 48px; padding-inline: var(--sg-3); background: var(--sg-blanc); }
.express .btn:hover { background: var(--sg-ecume); }
.ou { display: flex; align-items: center; gap: var(--sg-4); margin-block: var(--sg-5); font-size: var(--sg-t-petit); color: var(--sg-gris); }
.ou::before, .ou::after { content: ""; flex: 1; border-top: 1px solid var(--sg-trait); }

.barre-livraison { margin-bottom: var(--sg-5); }
.barre { height: 8px; background: var(--sg-ecume); margin-top: var(--sg-2); }
.barre span { display: block; height: 100%; background: var(--sg-encre); }

.lignes { display: grid; gap: var(--sg-4); }
.ligne { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--sg-4); padding: var(--sg-4); background: var(--sg-blanc); border: 1px solid var(--sg-trait); }
.ligne img { width: 96px; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--sg-ecume); }
.ligne-corps h2 { font: 400 var(--sg-t-carte)/1.3 var(--sg-serif); }
.ligne-bas { display: flex; justify-content: space-between; align-items: center; margin-top: var(--sg-3); gap: var(--sg-3); }
.prix-ligne { font-weight: 600; }
.qte { display: inline-flex; border: 1px solid var(--sg-champ); border-radius: var(--sg-rayon); background: var(--sg-blanc); }
.qte button { width: 44px; height: 44px; border: 0; background: transparent; font-size: 20px; cursor: pointer; }
.qte button:hover { background: var(--sg-ecume); }
.qte input { width: 44px; height: 44px; border: 0; text-align: center; background: transparent; -moz-appearance: textfield; }
.qte input::-webkit-inner-spin-button, .qte input::-webkit-outer-spin-button { -webkit-appearance: none; }
.retirer { min-height: 44px; padding: 0; border: 0; background: none; color: var(--sg-lien); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 767px) { .ligne { grid-template-columns: 72px minmax(0, 1fr); gap: var(--sg-3); } .ligne img { width: 72px; } }

.recap-carte { background: var(--sg-blanc); border: 1px solid var(--sg-trait); padding: var(--sg-5); }
.recap-carte h2, .recap-carte summary { font: 400 var(--sg-t-h3)/1.3 var(--sg-serif); }
.recap-carte .btn { margin-top: var(--sg-5); }
.recap-carte .centre { margin-top: var(--sg-4); }
.totaux { margin-block: var(--sg-4); }
.totaux > div { display: flex; justify-content: space-between; padding-block: var(--sg-2); }
.totaux dd { margin: 0; font-weight: 600; }
.totaux .total { border-top: 1px solid var(--sg-trait); margin-top: var(--sg-2); padding-top: var(--sg-3); font-size: var(--sg-t-lead); }
.recap-repli summary { display: flex; justify-content: space-between; align-items: center; min-height: 44px; cursor: pointer; list-style: none; }
.recap-repli summary::-webkit-details-marker { display: none; }
.recap-repli summary span::after { content: " ▾"; font-family: var(--sg-sans); }
.mini-lignes { display: grid; gap: var(--sg-3); margin-top: var(--sg-4); }
.mini-lignes li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--sg-3); align-items: center; font-size: var(--sg-t-petit); }
.mini-lignes img { width: 56px; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--sg-ecume); }
.mini-lignes small { display: block; color: var(--sg-gris); font-size: var(--sg-t-legende); }
@media (min-width: 1024px) { .recap-repli summary { pointer-events: none; } .recap-repli summary span::after { content: ""; } }

.formulaire { max-width: 640px; }
.bloc { border: 0; padding: 0; margin: 0 0 var(--sg-6); display: grid; gap: var(--sg-3); min-width: 0; }
.bloc legend { font: 400 var(--sg-t-h3)/1.3 var(--sg-serif); margin-bottom: var(--sg-3); padding: 0; }
.bloc label:not(.case):not(.choix) { margin-bottom: 0; }
.bloc .aide { margin-top: 0; }
.deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sg-4); }
.deux label { margin-bottom: var(--sg-2); }
@media (max-width: 479px) { .deux { grid-template-columns: 1fr; } }
.case { min-height: 44px; align-items: center; }
.choix { display: flex; align-items: center; gap: var(--sg-3); min-height: 56px; padding: var(--sg-3) var(--sg-4); border: 1px solid var(--sg-champ); border-radius: var(--sg-rayon); background: var(--sg-blanc); font-weight: 500; cursor: pointer; margin: 0; }
.choix input { width: 20px; height: 20px; accent-color: var(--sg-encre); flex: none; }
.choix span { flex: 1; }
.choix small { display: block; color: var(--sg-gris); font-weight: 400; font-size: var(--sg-t-petit); }
.choix:has(input:checked) { border-color: var(--sg-encre); box-shadow: inset 0 0 0 1px var(--sg-encre); }
.choix:has(input:focus-visible) { box-shadow: var(--sg-focus); }
.formulaire > p.petit { margin-top: var(--sg-4); }
.erreur .champ { border-width: 2px; }
.eco, .totaux .eco dd, .totaux .eco dt { color: var(--sg-succes); font-weight: 600; }