/* Extrait de panier.html */
.cart-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 28px;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
  }
  @media (max-width: 920px) { .cart-page { grid-template-columns: 1fr; } }

  .cart-page h1 {
    font-family: var(--serif);
    font-size: 36px;
    font-style: italic;
    margin-bottom: 8px;
  }
  .cart-page .sub { color: var(--tatum-ink-mute); font-size: 14px; margin-bottom: 24px; }

  /* CART ITEMS */
  .cart-item {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 18px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--tatum-line);
    border-radius: 14px;
    margin-bottom: 14px;
    align-items: start;
  }
  .cart-item .item-visual {
    width: 100px; height: 100px;
    border-radius: 10px;
    background: linear-gradient(180deg, #fdfbf6 0%, #f5ede0 100%);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  .cart-item .item-info .name { font-size: 15px; font-weight: 500; margin-bottom: 2px; }
  .cart-item .item-info .subtitle { font-family: var(--serif); font-style: italic; color: var(--tatum-ink-mute); font-size: 13px; margin-bottom: 8px; }
  .cart-item .item-info .meta { font-size: 12px; color: var(--tatum-ink-soft); }
  .cart-item .item-info .composition-strip {
    display: flex; flex-wrap: wrap; gap: 3px;
    margin-top: 10px;
    max-width: 100%;
  }
  .cart-item .item-info .composition-strip img {
    width: 22px; height: 22px; border-radius: 50%;
    object-fit: cover;
  }
  .cart-item .item-actions {
    text-align: right;
    display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
  }
  .cart-item .item-actions .price {
    font-family: var(--serif);
    font-size: 24px;
    color: var(--tatum-ink);
  }
  .cart-item .item-actions .remove-link {
    font-size: 11px;
    color: var(--tatum-ink-mute);
    cursor: pointer;
    text-decoration: underline;
  }
  .cart-item .item-actions .remove-link:hover { color: var(--tatum-accent); }
  .cart-item .item-actions .wrist-input {
    width: 80px; padding: 4px 8px;
    border: 1px solid var(--tatum-line-strong);
    border-radius: 6px; font-size: 12px;
  }

  /* CART EMPTY */
  .empty-cart {
    text-align: center;
    padding: 80px 20px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--tatum-line);
  }
  .empty-cart h2 {
    font-family: var(--serif);
    font-size: 28px; font-style: italic;
    margin-bottom: 10px;
  }
  .empty-cart p { color: var(--tatum-ink-mute); margin-bottom: 20px; }

  /* SUMMARY */
  .summary {
    background: #fff;
    border: 1px solid var(--tatum-line);
    border-radius: 14px;
    padding: 24px;
    height: fit-content;
    position: sticky;
    top: 90px;
  }
  .summary h3 {
    font-family: var(--serif);
    font-size: 22px;
    margin-bottom: 14px;
  }
  .summary .line {
    display: flex; justify-content: space-between;
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--tatum-ink-soft);
  }
  .summary .line.total {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--tatum-line);
    font-size: 18px;
    color: var(--tatum-ink);
  }
  .summary .line.total strong {
    font-family: var(--serif);
    font-size: 28px;
  }

  .checkout-form {
    margin-top: 20px;
  }
  .square-note {
    background: #f0f6ff;
    border-left: 3px solid #006aff;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12px;
    color: #4a5a7a;
    margin-top: 14px;
    line-height: 1.5;
  }
  .pay-btn {
    width: 100%;
    background: #006aff;
    color: #fff;
    border: none;
    padding: 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 14px;
    transition: background 0.2s;
  }
  .pay-btn:hover { background: #0058d9; }
  .pay-btn:disabled { background: #b6c8e0; cursor: not-allowed; }

  /* MODAL ORDER */
  .modal-overlay {
    position: fixed; inset: 0;
    background: rgba(42,34,26,0.55);
    display: none;
    align-items: center; justify-content: center;
    z-index: 100;
    padding: 20px;
  }
  .modal-overlay.open { display: flex; }
  .modal {
    background: #fff;
    border-radius: 18px;
    width: 100%; max-width: 640px;
    max-height: 90vh; overflow-y: auto;
    padding: 28px;
  }
  .modal h2 {
    font-family: var(--serif);
    margin: 0 0 8px;
    font-size: 26px;
  }
  .modal .sub { color: var(--tatum-ink-mute); font-size: 13px; margin-bottom: 18px; }
  .order-json {
    background: #2a221a; color: #d8ce99;
    padding: 14px; border-radius: 10px;
    font-family: "SF Mono", Consolas, monospace;
    font-size: 11px;
    overflow-x: auto;
    max-height: 280px; overflow-y: auto;
    margin-top: 14px;
  }