/* ==========================================================================
   PAGE : PANIER (pages/panier.html)
   Mise en page : liste à gauche | trait vertical | récapitulatif à droite
   ========================================================================== */

.display-title--page { margin-bottom: var(--space-7); }

.cart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: 0 clamp(2rem, 5vw, 5rem);
  align-items: start;
  padding-bottom: var(--space-8);
}
.cart[hidden] { display: none; }

/* ---- Lignes ---- */
.cart__list { border-top: 1px solid var(--color-line); }

.cart-line {
  display: grid;
  grid-template-columns: 32px 96px minmax(0, 1fr) auto 110px;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-line);
  transition: opacity 280ms ease, transform 280ms var(--ease-out);
}
.cart-line.is-removing { opacity: 0; transform: translateX(-16px); }

.cart-line__remove {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--color-text-muted);
  transition: background-color var(--transition), color var(--transition);
}
.cart-line__remove:hover { background: rgba(var(--color-accent-rgb), 0.12); color: var(--color-accent); }

.cart-line__thumb {
  width: 96px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
}
.cart-line__name {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 400;
  line-height: 1.2;
}
.cart-line__name:hover { color: var(--color-accent); }
.cart-line__meta { margin: 0.2em 0 0; font-size: var(--fs-sm); color: var(--color-text-muted); }

.cart-line__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--font-price);
  font-weight: 300;
  line-height: 1.15;
}
.cart-line__total { font-size: var(--fs-lg); }
.cart-line__unit { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* ---- Code promo ---- */
.cart__coupon { margin-top: var(--space-7); max-width: 520px; }
.cart__coupon-label { display: block; font-size: var(--fs-base); font-weight: 400; margin-bottom: var(--space-3); }
.cart__coupon-row { display: flex; align-items: flex-end; gap: var(--space-5); }
.cart__coupon-msg { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--color-text-muted); min-height: 1.5em; }

/* ---- Récapitulatif ---- */
.cart__summary {
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
  padding-left: clamp(2rem, 4vw, 4rem);
  border-left: 1px solid var(--color-line);   /* trait vertical de la maquette */
}
.cart__summary-title {
  font-size: var(--fs-xl);
  font-weight: 400;
  text-transform: uppercase;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line);
  margin-bottom: var(--space-4);
}
.cart__rows { margin: 0; }
.cart__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  font-size: var(--fs-sm);
}
.cart__row dt { color: var(--color-text-muted); }
.cart__row dd { margin: 0; text-align: right; }
.cart__row .price { font-family: var(--font-price); font-weight: 300; font-size: var(--fs-md); }

.cart__row--total {
  align-items: baseline;
  margin-top: var(--space-4);
  padding-block: var(--space-5) var(--space-6);
  border-top: 1px solid var(--color-text);
  font-size: var(--fs-md);
  font-weight: 400;
}
.cart__row--total .price { font-size: var(--fs-xl); }

.cart__legal { margin: 0 0 var(--space-4); font-size: var(--fs-xs); color: var(--color-text-muted); text-align: center; }
.cart__legal--consent { margin: var(--space-3) 0 0; }
.cart__legal a { text-decoration: underline; text-underline-offset: 2px; }
.cart__legal a:hover { color: var(--color-accent); }

.cart__message { margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--color-accent); min-height: 1.5em; text-align: center; }

/* ---- Panier vide ---- */
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  padding-bottom: var(--space-9);
  font-size: var(--fs-lg);
}
.cart-empty[hidden] { display: none; }

/* ---- Tablette / mobile ---- */
@media (max-width: 960px) {
  .cart { grid-template-columns: 1fr; }
  .cart__summary {
    position: static;
    margin: var(--space-7) 0 0;
    padding: var(--space-6) 0 0;
    border-left: 0;
    border-top: 1px solid var(--color-line);
  }
}
@media (max-width: 600px) {
  /* × | image | nom           */
  /*            | qté    prix  */
  .cart-line {
    grid-template-columns: 28px 72px minmax(0, 1fr) auto;
    grid-template-areas:
      "remove thumb info  info"
      "remove thumb qty   price";
    gap: var(--space-2) var(--space-3);
  }
  .cart-line__remove { grid-area: remove; width: 28px; height: 28px; }
  .cart-line__thumb { grid-area: thumb; width: 72px; }
  .cart-line__info { grid-area: info; }
  .cart-line__qty { grid-area: qty; }
  .cart-line__price { grid-area: price; }
  .cart-line .qty { --qty-h: 38px; --qty-btn: 30px; }
  .cart__coupon-row { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}