/* ═══════════════════════════════════════════════
   panier.css — Styles page panier
   ═══════════════════════════════════════════════ */

/* ── Hauteur minimale pour pousser le footer en bas ── */
.page {
  min-height: calc(100vh - var(--nav-h) - 8rem);
}

/* ── Lien retour ── */
.panier-back {
  display: inline-block;
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--grey);
  text-decoration: none;
  margin-bottom: 1.5rem;
  transition: color .2s;
  position: relative;
  padding-bottom: .2rem;
}
.panier-back::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 100%; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.panier-back:hover { color: var(--accent); text-decoration: none; }
.panier-back:hover::after { transform: scaleX(1); }

/* ── Titre de section ── */
.panier-section-titre {
  font-size: .58rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 2rem;
  margin-bottom: 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgba(212,185,122,.2);
}

/* ── Liste articles ── */
.panier-liste {
  display: flex;
  flex-direction: column;
}

.panier-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid rgba(240,237,232,.06);
}

.panier-row-info {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  flex: 1;
  min-width: 0;
}

.panier-row-titre {
  font-size: .88rem;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panier-row-unitaire {
  font-size: .72rem;
  color: var(--grey);
  letter-spacing: .04em;
}

.panier-row-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

.panier-qte-btn {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid rgba(240,237,232,.2);
  border-radius: 4px;
  color: var(--white);
  font-size: .85rem;
  cursor: pointer;
  transition: border-color .2s, color .2s;
  flex-shrink: 0;
}
.panier-qte-btn:hover { border-color: var(--accent); color: var(--accent); }

.panier-qte {
  font-size: .82rem;
  color: var(--white);
  min-width: 16px;
  text-align: center;
}

.panier-row-prix {
  font-size: .85rem;
  color: var(--accent);
  min-width: 70px;
  text-align: right;
  font-family: 'DM Sans', sans-serif;
}

.panier-del-btn {
  background: transparent;
  border: none;
  color: rgba(240,237,232,.25);
  font-size: 1rem;
  cursor: pointer;
  padding: .3rem .4rem;
  transition: color .2s;
  flex-shrink: 0;
}
.panier-del-btn svg { width: 17px; height: 17px; vertical-align: -1px; }
.panier-del-btn:hover { color: #e57373; }

/* ── Destination ── */
.panier-destination {
  margin-top: 1rem;
  margin-bottom: .8rem;
  padding: .8rem 1rem;
  border: 1px solid rgba(240,237,232,.08);
  border-radius: 6px;
}

.panier-dest-label {
  display: block;
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: .6rem;
}

.panier-dest-options {
  display: flex;
  gap: 1.5rem;
}

.panier-dest-option {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--white);
  cursor: pointer;
}

.panier-dest-option input[type="radio"] {
  accent-color: var(--accent);
  cursor: pointer;
}

/* ── Total ── */
.panier-total-row--final {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .82rem;
  color: var(--grey);
  padding: .8rem 0 .6rem;
  border-top: 1px solid rgba(240,237,232,.08);
  margin-top: .4rem;
}

.panier-total-row--final span:last-child {
  color: var(--accent);
  font-size: .95rem;
  font-family: 'DM Sans', sans-serif;
}

/* ── Bouton paiement ── */
#form-physique,
#form-dl {
  display: flex;
  flex-direction: column;
}

.panier-pay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin-left: auto;
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 300;
  color: var(--accent);
  background: transparent;
  border: 1px solid rgba(212,185,122,.4);
  border-radius: 6px;
  padding: .65rem 1.8rem;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  margin-bottom: .5rem;
}
.panier-pay-btn:hover {
  border-color: var(--accent);
  background: rgba(212,185,122,.08);
}

/* ── Bouton vider ── */
.panier-vider-btn {
  display: block;
  margin-top: 1.5rem;
  background: transparent;
  border: none;
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(240,237,232,.2);
  cursor: pointer;
  transition: color .2s;
  padding: 0;
}
.panier-vider-btn:hover { color: #e57373; }

/* ── Responsive ── */
@media (max-width: 480px) {
  .panier-row { flex-wrap: wrap; }
  .panier-row-actions { width: 100%; justify-content: flex-end; }
}