.cart-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
@media (max-width: 900px){ .cart-layout{ grid-template-columns: 1fr; } }

.cart-list { display: flex; flex-direction: column; gap: 12px; }

.cart-item {
  display: grid; grid-template-columns: 200px 1fr; gap: 14px;
  background: var(--form-bg); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); padding: 12px;
}
@media (max-width: 650px){ .cart-item { grid-template-columns: 1fr; } }

.cart-gallery {
  display:flex; flex-direction: column; gap:8px;
}
.gallery-stage {
  width:100%; aspect-ratio: 1 / 1; border: 1px solid var(--border);
  border-radius: 10px; overflow:hidden; background:#fff;
  display:flex; align-items:center; justify-content:center;
}
.gallery-stage img { width: 100%; height: 100%; object-fit: cover; display:block; }

.gallery-tabs { display:flex; gap:8px; justify-content:center; }
.gallery-tab {
  padding:6px 10px; border:1px solid var(--border-light); border-radius:999px; background:#fff; cursor:pointer;
  font-size:.9rem;
}
.gallery-tab.active { border-color: var(--primary-dark); color: var(--primary-dark); font-weight:600; }

.no-thumb {
  font-size:.9rem; color:#777; padding:10px; text-align:center;
}

.cart-info { display:flex; flex-direction:column; gap:6px; }

.cart-line { display:flex; flex-wrap:wrap; gap: 8px; align-items: center; }
.cart-badge {
  background: var(--primary-dark); color: #fff; padding: 4px 8px; border-radius: 999px; font-weight: 600;
  font-size: .9rem;
}
.cart-color { color: #444; }

.cart-qty { display:flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.qty-chip {
  background:#f0f4ff; border:1px solid var(--primary-light); border-radius: 999px; padding: 2px 8px; font-size:.9rem;
}

.cart-positions { display:flex; flex-wrap: wrap; gap: 6px; align-items:center; }
.pos-chip { background:#fff; border:1px solid var(--border); border-radius:999px; padding:2px 8px; font-size:.9rem; }

.cart-actions-line { margin-top: 8px; }
.btn-outline {
  padding: 10px 14px; border:1px solid var(--border-light); background:#fff; border-radius:8px; cursor:pointer;
}
.btn-outline.btn-danger { border-color:#e6b3b3; color:#b00; }
.btn-link { text-decoration:none; color: var(--primary-dark); }

.cart-aside { display: flex; flex-direction: column; gap: 12px; }
.cart-card {
  background: var(--form-bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px; box-shadow: var(--shadow);
}
.cart-card h2 { margin: 0 0 8px 0; }
.cart-actions { display:flex; align-items:center; gap:10px; }
.cart-empty {
  background: var(--form-bg); border: 1px dashed var(--border); border-radius: 12px; padding: 24px; text-align: center; color: #666;
}



:root { --nav-height: 72px; }          /* ajuste à ta hauteur réelle */

#site-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: transform .24s ease, box-shadow .2s ease, background .2s ease;
  will-change: transform;
  /* fond translucide propre */
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.2) blur(8px);
}
#site-nav.nav--hidden { transform: translateY(-100%); }
#site-nav.nav--scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.08); }

@media (prefers-color-scheme: dark){
  #site-nav { background: rgba(22,25,31,.85); }
}

#nav-spacer { height: var(--nav-height); }


/* Conteneur du panier */
.cart-container { max-width: 1080px; margin: 18px auto; padding: 0 16px; }

/* (Optionnel) bouton vider harmonisé */
#clear-cart { margin-top: 8px; }

/* ===== HERO PANIER ===== */
.page-hero {
  position: relative;
  margin: 0;
  padding: clamp(32px, 6vw, 72px) 0;
  border-bottom: 1px solid var(--border, #e9eef5);
  background: var(--hero-bg, #fff);
}
.page-hero .container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px;
}
/* Variante centrée (ne change pas le contenu) */
.hero--center .container { text-align: center; }

/* Titre + sous-titre */
.page-hero h1 {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-size: clamp(28px, 4.2vw, 42px);
  color: var(--heading, #101828);
}
.page-hero p {
  margin: 10px auto 0;
  max-width: 56ch;
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 1.6;
  color: var(--muted-foreground, #475467);
}

/* Option douce : fond léger + texture subtile */
.hero--soft {
  --hero-bg: linear-gradient(180deg, rgba(99,102,241,0.06) 0%, rgba(99,102,241,0.03) 60%, transparent 100%), #fff;
  border-bottom-color: rgba(16,24,40,0.06);
}
.hero--soft::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(16,24,40,0.045) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: .35;
}

/* Trait décoratif sous le titre */
.hero--center .container h1::after {
  content: "";
  display: block;
  width: 64px; height: 3px;
  margin: clamp(10px, 1.2vw, 12px) auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary-dark, #4f46e5), #22c55e);
  opacity: .85;
}

/* Icône avant le sous-titre (pas de HTML ajouté) */
.page-hero p::before {
  content: "✓";
  display: inline-block;
  transform: translateY(-1px);
  margin-right: 8px;
  font-weight: 700;
  opacity: .9;
  color: var(--primary-dark, #4f46e5);
}

/* Responsive */
@media (max-width: 520px) {
  .page-hero { padding: 28px 0; }
  .hero--center .container h1::after { width: 48px; height: 3px; }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .page-hero {
    --hero-bg: rgba(22,25,31,.72);
    border-bottom-color: rgba(255,255,255,0.06);
  }
  .hero--soft {
    --hero-bg: linear-gradient(180deg, rgba(99,102,241,0.16) 0%, rgba(99,102,241,0.08) 60%, transparent 100%), rgba(22,25,31,.72);
  }
  .hero--soft::after {
    background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
    opacity: .28;
  }
  .page-hero h1 { color: #EEF2FF; }
  .page-hero p  { color: #C7D2FE; }
}