/* ============================================================
   CART.CSS — Panier, Checkout, Confirmation, Auth, Mon compte
   DA : "galerie éditoriale × carnet d'atelier"
   Refonte v3 — angles vifs, filets or, numérotation Playfair,
   esprit "bordereau d'atelier" + "registre de commandes"
   ============================================================ */

/* ============================================================
   PANIER — SHELL & LAYOUT
   ============================================================ */
.cart-shell { padding-block: var(--space-xl) var(--space-3xl); }

/* Panier vide */
.cart-empty {
  text-align: center;
  padding: var(--space-3xl) var(--space-md);
}
.cart-empty-icon {
  width: 64px; height: 64px;
  margin: 0 auto var(--space-md);
  color: var(--color-text-muted);
  opacity: 0.5;
}

.cart-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 1024px) { .cart-layout { grid-template-columns: 1.5fr 1fr; gap: var(--space-xl); } }

/* ============================================================
   LISTE D'ARTICLES — esprit "registre d'atelier"
   ============================================================ */
.cart-list { display: flex; flex-direction: column; gap: var(--space-sm); }

/* Article — "ligne de bordereau" avec filet en tête */
.cart-item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: var(--space-md);
  background: var(--color-bg-pure);
  padding: var(--space-md);
  border: 1px solid var(--color-border-soft);
  border-top: 2px solid var(--color-border);
  border-radius: 0;    /* angles vifs DA */
  align-items: center;
  transition: border-top-color var(--t-fast) var(--easing);
}
.cart-item:hover { border-top-color: var(--color-accent); }
@media (min-width: 768px) { .cart-item { grid-template-columns: 120px 1fr auto auto; } }

.cart-item-img {
  width: 100%;
  aspect-ratio: 1;
  background: var(--color-bg-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
}
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }

.cart-item-info h3 {
  font-family: var(--font-premium);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--color-primary);
  letter-spacing: var(--ls-tight);
  margin-bottom: 4px;
}
.cart-item-meta {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Contrôle quantité — filet simple, pas pill */
.cart-item-qty {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  padding: 4px;
}
.cart-item-qty button {
  width: 28px; height: 28px;
  border-radius: var(--radius-xs);
  background: var(--color-bg-soft);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--fw-medium);
  color: var(--color-text);
  border: 0;
  cursor: pointer;
  transition: background var(--t-fast) var(--easing);
}
.cart-item-qty button:hover { background: var(--color-bg-deep); }
.cart-item-qty span {
  min-width: 20px;
  text-align: center;
  font-weight: var(--fw-medium);
  font-family: var(--font-premium);
  font-size: var(--fs-sm);
}

/* Prix article */
.cart-item-price {
  text-align: right;
  font-weight: var(--fw-regular);
  font-family: var(--font-premium);
  font-size: var(--fs-md);
  color: var(--color-primary);
  letter-spacing: var(--ls-tight);
}
.cart-item-remove {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font-style: italic;
  display: block;
}
.cart-item-remove:hover { color: var(--color-error); }

/* ============================================================
   RÉCAPITULATIF COMMANDE — "bordereau de prix"
   ============================================================ */
.cart-summary {
  background: var(--color-bg-pure);
  padding: var(--space-md);
  border: 1px solid var(--color-border-ink);
  border-top: 2px solid var(--color-accent);
  border-radius: 0;
  position: sticky;
  top: 100px;
}
.cart-summary h2 {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-2xs);
  border-bottom: var(--rule-hair);
}
.cart-summary-line {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2xs) 0;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--color-border-soft);
}
.cart-summary-line:last-of-type { border-bottom: 0; }
.cart-summary-line span:first-child { color: var(--color-text-muted); font-style: italic; }
.cart-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--space-sm);
  margin-top: var(--space-sm);
  border-top: 1px solid var(--color-border-ink);
}
.cart-summary-total .price-current {
  font-size: var(--fs-2xl);
  font-family: var(--font-premium);
  font-weight: var(--fw-regular);
  color: var(--color-primary);
  letter-spacing: var(--ls-tight);
}

/* ============================================================
   CHECKOUT — titres d'étapes avec numéro Playfair filigrane
   ============================================================ */

/* Bloc formulaire checkout — esprit "section de bordereau" */
.checkout-section-block {
  background: var(--color-bg-pure);
  padding: var(--space-md);
  border: 1px solid var(--color-border-soft);
  border-top: 2px solid var(--color-border);
  border-radius: 0;
  margin-bottom: var(--space-md);
  position: relative;
}
.checkout-section-block:focus-within { border-top-color: var(--color-accent); }

/* Titre d'étape checkout — chiffre Playfair + trait gold */
.checkout-step-title {
  font-family: var(--font-premium);
  font-size: var(--fs-xl);
  color: var(--color-primary);
  margin-bottom: var(--space-md);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-tightest);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
/* Numéro d'étape — chiffre Playfair italic, pas de pastille */
.checkout-step-title .step-num-small {
  font-family: var(--font-premium);
  font-style: italic;
  font-size: var(--fs-3xl);
  font-weight: var(--fw-regular);
  color: var(--color-accent);
  opacity: 0.55;
  line-height: 0.85;
  width: auto; height: auto;
  background: none;
  border-radius: 0;
  display: inline-block;
  letter-spacing: var(--ls-tightest);
  min-width: 2ch;
}

/* ============================================================
   CONFIRMATION DE COMMANDE
   Esprit "lettre de confirmation" plutôt que success card SaaS
   ============================================================ */
.confirmation-box {
  background: var(--color-bg-pure);
  padding: var(--space-2xl) var(--space-xl);
  border-radius: 0;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  border: 1px solid var(--color-border-ink);
  border-top: 3px solid var(--color-accent);
  box-shadow: var(--shadow-paper);
  position: relative;
}
/* Cadre intérieur raffiné, esprit papier à lettres */
.confirmation-box::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid var(--color-border-soft);
  pointer-events: none;
}
/* Icône de confirmation — sobre, pas de pastille verte criarde */
.confirmation-icon {
  width: 56px; height: 56px;
  color: var(--color-success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
  /* Plus de background coloré — juste l'icône */
  background: transparent;
  border-radius: 0;
}
.confirmation-icon svg { width: 100%; height: 100%; }

/* Numéro de commande — esprit "tampon de commande" */
.order-number {
  display: inline-block;
  background: transparent;
  font-family: var(--font-premium);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--color-accent-dark);
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-xs);
  margin: var(--space-sm) 0;
  letter-spacing: var(--ls-wide);
}

/* ============================================================
   AUTHENTIFICATION — Login / Signup
   Esprit "registre de visiteur" plutôt que SaaS auth card
   ============================================================ */
.auth-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-2xl) var(--space-3xl);
  min-height: calc(100vh - var(--header-height));
}
.auth-card {
  background: var(--color-bg-pure);
  padding: var(--space-xl);
  border-radius: 0;
  border: 1px solid var(--color-border-ink);
  border-top: 2px solid var(--color-accent);
  width: 100%;
  max-width: 460px;
  box-shadow: var(--shadow-paper);
}
.auth-card h1 {
  font-family: var(--font-premium);
  font-size: var(--fs-2xl);
  text-align: center;
  margin-bottom: var(--space-md);
  font-weight: var(--fw-regular);
  color: var(--color-primary);
  letter-spacing: var(--ls-tightest);
}

/* Tabs auth — onglets éditoriaux (pas pills) */
.auth-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border-ink);
  margin-bottom: var(--space-md);
}
.auth-tab {
  flex: 1;
  padding: 0.625rem var(--space-sm);
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  cursor: pointer;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  transition: color var(--t-fast) var(--easing),
              border-color var(--t-fast) var(--easing);
  margin-bottom: -1px;  /* recouvre le border-bottom du container */
  border-radius: 0;
}
.auth-tab:hover { color: var(--color-text); }
.auth-tab.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-accent);
}
.auth-form { display: none; }
.auth-form.is-active { display: block; }

/* ============================================================
   MON COMPTE — esprit "dossier client"
   ============================================================ */
.account-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding-block: var(--space-xl) var(--space-3xl);
}
@media (min-width: 1024px) { .account-grid { grid-template-columns: 260px 1fr; } }

/* Sidebar compte */
.account-side {
  background: var(--color-bg-pure);
  padding: var(--space-md);
  border: 1px solid var(--color-border-soft);
  border-top: 2px solid var(--color-accent);
  border-radius: 0;
  height: fit-content;
}
.account-side-name {
  font-family: var(--font-premium);
  font-size: var(--fs-lg);
  color: var(--color-primary);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-tight);
}
.account-side-email {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
  font-style: italic;
  padding-bottom: var(--space-sm);
  border-bottom: var(--rule-hair);
}
.account-menu { display: flex; flex-direction: column; gap: 2px; }
.account-menu a {
  padding: 0.5rem 0.625rem;
  border-radius: 0;
  color: var(--color-text-soft);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  border-left: 2px solid transparent;
  transition: color var(--t-fast) var(--easing),
              border-color var(--t-fast) var(--easing),
              background var(--t-fast) var(--easing);
}
.account-menu a.is-active {
  border-left-color: var(--color-accent);
  color: var(--color-primary);
  font-weight: var(--fw-medium);
  background: rgba(200, 148, 31, 0.04);
}
.account-menu a:hover {
  background: var(--color-bg-soft);
  color: var(--color-text);
}

/* Carte commande — "fiche de commande" */
.order-card {
  background: var(--color-bg-pure);
  padding: var(--space-md);
  border: 1px solid var(--color-border-soft);
  border-top: 2px solid var(--color-border);
  border-radius: 0;
  margin-bottom: var(--space-sm);
  transition: border-top-color var(--t-fast) var(--easing);
}
.order-card:hover { border-top-color: var(--color-accent); }
.order-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: var(--rule-hair);
}

/* Badges de statut — angles vifs, pas pills */
.order-status {
  font-size: 10px;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-family: var(--font-body);
  border: 1px solid;
  background: transparent;
}
.order-status-shipped {
  border-color: var(--color-success);
  color: var(--color-success);
}
.order-status-printing {
  border-color: var(--color-accent-dark);
  color: var(--color-accent-dark);
}
.order-status-validation {
  border-color: var(--color-primary-light);
  color: var(--color-primary);
}
.order-status-delivered {
  border-color: var(--color-border);
  color: var(--color-text-muted);
}