/* ============================================================
   MARTELUX V2 — Styles spécifiques à la page d'accueil
   Hero slideshow, zones produits, why, reassure, news.
   À charger en plus de site.css (qui gère header/footer/boutons/forms).
   ============================================================ */

/* HERO SLIDESHOW */
.hero {
  position: relative;
  height: 560px;
  overflow: hidden;
  background: var(--bg-2);
}
.slides { position: relative; width: 100%; height: 100%; }
/* V2.14j — Tous les slides sont empilés en absolute. Sans pointer-events:none
   sur les inactifs, le DERNIER slide du DOM (souvent le cube) capte tous les
   clics même quand il est invisible (opacity:0). Résultat : peu importe le
   slide visible, on naviguait toujours vers la destination du cube. */
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s; pointer-events: none; }
.slide.active { opacity: 1; pointer-events: auto; }
.slide-inner {
  max-width: var(--container);
  height: 100%;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.slide-content .eyebrow {
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  font-weight: 600;
}
.slide-content h1 {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.025em;
  margin-bottom: 16px;
}
.slide-content h1 em { font-style: normal; color: var(--accent); }
.slide-content p {
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 520px;
  margin-bottom: 28px;
  line-height: 1.6;
}
.slide-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-primary {
  /* Hérite de site.css ; on précise juste la taille hero */
  padding: 14px 28px;
  font-size: 14px;
}
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--ink);
  padding: 14px 28px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  transition: all var(--transition);
}
.btn-secondary:hover { background: var(--bg-2); border-color: var(--ink); }

.slide-visual { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.slide-visual-inner {
  width: 90%; height: 80%;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.sv-sphere { background: radial-gradient(circle at 35% 30%, #f4d4a8, #c89060 50%, #5a3818 100%); box-shadow: inset -40px -60px 120px rgba(0,0,0,.5), 0 30px 80px rgba(255,105,0,.2); }
.sv-cube   { background: linear-gradient(135deg, #d8b888 0%, #8a5a30 50%, #3a2010 100%); }
.sv-cadre  { background: linear-gradient(135deg, #c8b89a 0%, #6b4a30 100%); }

.slide-pagination {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 8px;
  z-index: 5;
}
.slide-pagination button {
  width: 30px; height: 3px;
  background: rgba(255,255,255,.2);
  border: none; padding: 0; cursor: pointer;
  transition: background .3s;
}
.slide-pagination button.active { background: var(--accent); }
.slide-controls { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; }
.slide-prev { left: 24px; }
.slide-next { right: 24px; }
.slide-controls button {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  transition: all var(--transition);
}
.slide-controls button:hover { background: var(--accent); border-color: var(--accent); }

/* ZONE */
section.zone {
  max-width: var(--container);
  margin: 0 auto;
  padding: 80px 32px 40px;
}
h2.zone-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 32px;
  display: flex; align-items: center; justify-content: space-between;
}
h2.zone-title a { font-size: 14px; font-weight: 500; color: var(--accent); }

/* MAIN PRODUCTS */
.main-products { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.main-product {
  position: relative;
  background: var(--bg-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  transition: transform .3s;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: block;
}
.main-product:hover { transform: translateY(-4px); }
.main-product-visual {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.main-product-visual > div {
  aspect-ratio: 1;
  height: 70%;
  width: auto;
  max-width: 70%;
  border-radius: 12px;
}
.main-product-visual > .sv-sphere { aspect-ratio: 1; border-radius: 50%; width: 60%; height: auto; }
.mp-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.85) 100%);
}
.main-product-content {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 32px;
  z-index: 2;
  color: #fff;
}
/* V2.14v — Badge en flottant absolu au-dessus du visuel pour les cartes
   .main-product et .addon (avant : dans .main-product-content position:absolute
   bottom:0 → mon top:6px mobile pointait vers le haut du content, donc juste
   au-dessus du titre = chevauchement). Le badge est maintenant enfant direct
   du <a>, positionné relativement à la carte. */
.main-product .badge {
  display: inline-block;
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 4;
  padding: 4px 10px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  max-width: calc(100% - 28px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.main-product .badge.green { background: #1AB875; }
.main-product .badge.blue  { background: #3B82F6; }
.main-product h3 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 4px;
}
.main-product .sub { font-size: 13px; opacity: .85; margin-bottom: 16px; }
.main-product-meta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.main-product .price { font-size: 22px; font-weight: 700; color: var(--accent); }
.main-product .reviews { font-size: 12px; opacity: .7; }
.main-product .reviews .stars { color: #FFC107; }
.main-product .learn-more {
  margin-left: auto;
  padding: 8px 16px;
  background: rgba(255,255,255,.1);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  transition: all var(--transition);
}
.main-product:hover .learn-more { background: var(--accent); border-color: var(--accent); }

/* ADDONS */
.addons-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.addon {
  background: var(--bg-2);
  border-radius: 12px;
  overflow: hidden;
  transition: all .25s;
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: block;
  position: relative; /* V2.14v — pour ancrer .addon .badge en absolute */
}
.addon:hover { transform: translateY(-4px); border-color: var(--line-2); }
.addon-visual {
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.addon-visual > div { aspect-ratio: 1; height: 80%; width: auto; max-width: 80%; }
.av-1 { background: linear-gradient(135deg, #2A1A0F, #5A3818); }
.av-2 { background: radial-gradient(circle, #8a5a30, #2A1A0F); border-radius: 50%; }
.av-3 { background: linear-gradient(135deg, #5A3818, #8a5a30); }
.av-4 { background: linear-gradient(135deg, #4A2C18, #8a5a30); }
.av-5 { background: linear-gradient(135deg, #6B4A2C, #2A1A0F); }
.av-6 { background: radial-gradient(circle at 30% 30%, #c89060, #4A2C18); border-radius: 50%; }
.av-7 { background: linear-gradient(135deg, #5a4030, #2A1A0F); }
.av-8 { background: linear-gradient(135deg, #8a6a40, #4A2C18); }
.addon-info { padding: 18px 20px 20px; border-top: 1px solid var(--line); }
/* V2.14v — Badge .addon en flottant absolu au top de la carte (avant : dans
   .addon-info en bas → conflit avec mes règles mobile). */
.addon .badge {
  display: inline-block;
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  padding: 4px 9px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  max-width: calc(100% - 24px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.addon .badge.green { background: #1AB875; }
.addon .badge.blue  { background: #3B82F6; }
.addon-info h4 { font-size: 15px; font-weight: 600; line-height: 1.3; margin-bottom: 4px; }
.addon-info .desc { font-size: 12px; color: var(--ink-dim); margin-bottom: 14px; min-height: 32px; }
.addon-info .row { display: flex; justify-content: space-between; align-items: center; }
.addon-info .price-small { font-size: 16px; font-weight: 700; color: var(--accent); }
.addon-info .learn { font-size: 12px; color: var(--ink-soft); }
.addon-info .learn:hover { color: var(--accent); }

/* CATEGORIES */
.cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.cat {
  background: var(--bg-2);
  border-radius: var(--radius-lg);
  padding: 24px 18px;
  text-align: center;
  transition: all var(--transition);
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: block;
}
.cat:hover { background: var(--bg-3); border-color: var(--accent); transform: translateY(-2px); }
.cat-icon {
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  border-radius: 14px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  color: var(--accent);
  transition: all var(--transition);
}
.cat:hover .cat-icon { background: var(--accent); color: #fff; }
.cat h5 { font-size: 13px; font-weight: 600; line-height: 1.3; }
.cat .cat-sub { font-size: 11px; color: var(--ink-dim); margin-top: 2px; }

/* WHY MARTELUX */
.why {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 80px 0;
  margin-top: 40px;
}
.why-inner { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.why-head { text-align: center; margin-bottom: 48px; }
.why-head h2 { font-size: 36px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 8px; }
.why-head p { font-size: 16px; color: var(--ink-soft); }
.why-tabs {
  display: flex; justify-content: center;
  gap: 6px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.why-tabs button {
  background: transparent;
  color: var(--ink-soft);
  padding: 10px 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  transition: all var(--transition);
}
.why-tabs button:hover { color: var(--ink); border-color: var(--ink-soft); }
.why-tabs button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.why-content { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.why-text h3 { font-size: 32px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; margin-bottom: 20px; }
.why-text h3 em { font-style: normal; color: var(--accent); }
.why-text p { font-size: 16px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 20px; }
.why-text .stat-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
.why-text .stat .num { font-size: 32px; font-weight: 800; color: var(--accent); letter-spacing: -.02em; line-height: 1; }
.why-text .stat .num small { font-size: 14px; }
.why-text .stat .lbl { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-dim); margin-top: 6px; font-weight: 500; }
.why-visual {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #2A1A0F, #5A3818 50%, #1A0F08);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.why-visual .play {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 24px;
  padding-left: 4px;
  cursor: pointer;
  border: none;
  transition: all var(--transition);
  box-shadow: 0 8px 32px rgba(255,105,0,.4);
}
.why-visual .play:hover { transform: scale(1.05); }

/* REASSURE */
.reassure { border-bottom: 1px solid var(--line); padding: 36px 0; }
.reassure-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.reassure-item { display: flex; gap: 16px; align-items: start; }
.reassure-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-size: 18px;
  flex-shrink: 0;
}
.reassure-item h5 { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.reassure-item p { font-size: 12px; color: var(--ink-dim); line-height: 1.5; }

/* NEWS */
.news {
  padding: 80px 32px;
  text-align: center;
  background: linear-gradient(135deg, rgba(255,105,0,.05), transparent);
}
.news h2 {
  font-size: 36px; font-weight: 700; letter-spacing: -.01em;
  max-width: 700px; margin: 0 auto 12px;
}
.news h2 em { font-style: normal; color: var(--accent); }
.news p { color: var(--ink-soft); max-width: 540px; margin: 0 auto 28px; font-size: 15px; }
.news-form { max-width: 480px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.news-form input {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  padding: 14px 18px;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  border-radius: var(--radius);
}
.news-form input::placeholder { color: var(--ink-dim); }
.news-form input:focus { outline: none; border-color: var(--accent); }
.news-form button {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 14px 28px;
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--radius);
  transition: background var(--transition);
}
.news-form button:hover { background: var(--accent-hover); }

/* (promo-bar : déplacé dans site.css pour être identique sur toutes les pages) */

/* Responsive home */
@media (max-width: 1100px) {
  /* V2.11 — on garde le visuel à droite mais le slide passe sur 2 colonnes
     plus serrées (texte gauche, image droite plus petite) */
  .slide-inner { grid-template-columns: 1.2fr 1fr; gap: 24px; padding: 0 20px; }
  .slide-content h1 { font-size: clamp(28px, 4vw, 44px); }
  .slide-content p { font-size: 15px; }
  .slide-visual { display: flex; }
  .slide-visual-inner { width: 92%; height: 70%; }
  .main-products, .addons-grid, .why-content { grid-template-columns: 1fr 1fr; gap: 16px; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .reassure-inner { grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media (max-width: 760px) {
  /* V2.11 — sur mobile : slide en colonne, image visible en haut sous le texte */
  .promo-inner { flex-direction: column; gap: 12px; }
  .hero { height: auto; min-height: 580px; padding: 24px 0; }
  .slide-inner { grid-template-columns: 1fr; gap: 16px; padding: 0 16px; }
  .slide-content h1 { font-size: 26px; }
  .slide-content p { font-size: 14px; margin-bottom: 16px; }
  .slide-visual { display: flex; height: 220px; }
  .slide-visual-inner { width: 80%; height: 100%; max-height: 220px; }
  .slide-pagination { bottom: 16px; }
  .slide-controls { display: none; }
  .main-products, .addons-grid, .why-content, .reassure-inner { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: 1fr 1fr; }
  section.zone { padding: 48px 20px 20px; }
  .news { padding: 48px 20px; }
  .news h2, .why-head h2 { font-size: 26px; }

  /* V2.14o — Cartes "Nos créations signatures" sur mobile :
     - padding réduit (32→16px) pour que le contenu rentre
     - badge SIGNATURE déplacé en haut à gauche (au-dessus du visuel),
       hors du flux du contenu : plus de troncature.
     - h3 et price plus compacts. */
  .main-product { aspect-ratio: 4 / 3; }
  /* V2.14v — Le badge est désormais positionné en absolute au top de la carte
     (règle desktop), inutile de le repositionner ici. On ajuste juste la
     taille pour mobile. */
  .main-product-content { padding: 16px; }
  .main-product .badge {
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    font-size: 9px;
  }
  .main-product h3 { font-size: 18px; line-height: 1.25; }
  .main-product .sub { font-size: 12px; margin-bottom: 10px; }
  .main-product .price { font-size: 18px; }
  .main-product .learn-more { font-size: 12px; padding: 6px 12px; }

  /* Badge .addon : mêmes ajustements compactes */
  .addon .badge {
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    font-size: 9px;
  }

  /* V2.14q — Sliders du panneau photo sphère : 1 colonne en mobile pour que
     les curseurs (taille, rotation, fondu) ne sortent jamais de la modale. */
  .sphere-photo-panel .spp-grid { grid-template-columns: 1fr !important; gap: .55rem 0 !important; }
  .sphere-photo-panel .spp-row { padding: 2px 0; }
}


/* ============================================================
   MODAL FLOW + CART DRAWER + STEPS (importé du v1 public/index.html)
   Tous les sélecteurs utilisent var(--gold)/var(--cream)/var(--ink)/etc.,
   qui sont aliasés vers la palette Makera dans site.css.
   ============================================================ */
/* ── MODAL FLOW ── */
.modal-overlay{display:none;position:fixed;inset:0;background:var(--modal-backdrop);z-index:500;align-items:center;justify-content:center;backdrop-filter:blur(4px);overscroll-behavior:contain}
.modal-overlay.open{display:flex}
/* V2.14w — La modale ne scrolle plus en bloc : header + steps-bar + footer
   restent fixes, seul .step-content scrolle. Garantit la visibilité du
   bouton "Suivant" en permanence. */
.modal-box{background:var(--cream);width:min(900px,96vw);max-height:92vh;overflow:hidden;position:relative;display:flex;flex-direction:column;transition:transform .2s ease;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* Boutons plus grands au toucher */
.btn-next,.btn-back,.btn-add-cart,.format-option,.option-card{-webkit-tap-highlight-color:transparent}
.btn-next{min-height:44px}
.btn-back{min-height:44px}
.format-option{min-height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.modal-header{background:var(--ink);padding:1.2rem 2rem;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.modal-header-title{font-family:'Cormorant Garamond',serif;color:var(--gold-light);font-size:1.2rem;font-weight:300;letter-spacing:.1em}
/* V2.13 — croix bien visible : pastille orange sur fond sombre */
.modal-close{background:var(--accent);border:none;color:#fff;font-size:1.05rem;font-weight:700;cursor:pointer;width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:all .2s;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.modal-close:hover{background:var(--accent-hover);transform:scale(1.08)}

/* Steps indicator */
.steps-bar{background:var(--ink);padding:.8rem 2rem;display:flex;gap:0;flex-shrink:0}
.step-dot{display:flex;align-items:center;gap:.5rem;font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,253,248,.3);padding-right:1.5rem;position:relative}
.step-dot.active{color:var(--gold)}
.step-dot.done{color:rgba(255,253,248,.5)}
.step-dot::after{content:'';position:absolute;right:.5rem;top:50%;transform:translateY(-50%);width:1px;height:12px;background:rgba(255,255,255,.1)}
.step-dot:last-child::after{display:none}
.step-num{width:18px;height:18px;border-radius:50%;border:1px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:.55rem;flex-shrink:0}
.step-dot.active .step-num{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.step-dot.done .step-num{background:rgba(255,253,248,.2)}

/* Étapes contenu */
.step-content{padding:2.5rem 2rem;flex:1 1 auto;overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column}
.step-page{display:none}
.step-page.active{display:block}

/* V2.30 — Étape 5 (aperçu 3D) : layout flex pour que le viewer ABSORBE
   l'espace dispo et que le bouton "Ajouter au panier" reste TOUJOURS visible
   sans scroller, quelle que soit la hauteur d'écran. Le viewer rétrécit
   (flex-shrink) jusqu'à min-height ; titre/récap/bouton ne bougent pas. */
#step5.active{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
#step5.active > .flow-step-head,
#step5.active > div,
#step5.active > #btnAddCart{flex:0 0 auto}
#step5.active > .viewer-wrap{flex:1 1 auto;min-height:120px}

/* V2.29 — En-tête d'étape compact : titre + sous-titre (entre parenthèses) sur
   la même ligne, sans le label "Étape N" (déjà visible dans la stepline). */
.flow-step-head{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.5rem;row-gap:.15rem;margin-bottom:.7rem}
.flow-step-title{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:400;margin:0;line-height:1.2}
.flow-step-sub{font-size:.72rem;color:var(--muted);letter-spacing:.04em;line-height:1.25}
@media (max-width:600px){
  .flow-step-head{margin-bottom:.5rem}
  .flow-step-title{font-size:1.05rem}
  .flow-step-sub{font-size:.68rem}
}

/* ── ÉTAPE 1 : Format ── */
.formats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;margin-top:1.5rem}
.format-option{border:1px solid var(--border);padding:1.5rem 1rem;text-align:center;cursor:pointer;transition:all .25s;background:var(--white)}
.format-option:hover{border-color:var(--gold);background:var(--gold-pale)}
.format-option.selected{border-color:var(--gold);background:var(--gold-pale);box-shadow:inset 0 0 0 1px var(--gold)}
.format-option .fmt-size{font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--ink);display:block;margin-bottom:.3rem}
.format-option .fmt-label{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.format-option .fmt-price{font-size:.9rem;color:var(--gold);font-weight:600;margin-top:.5rem;display:block}

/* ── ÉTAPE 2 : Upload ── */
.upload-zone{border:1px dashed var(--border);padding:3.5rem 2rem;text-align:center;cursor:pointer;transition:all .25s;background:var(--white);margin-top:1.5rem}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--gold);background:var(--gold-pale)}
.upload-zone.has-file{border-color:var(--gold);border-style:solid}
.upload-icon-big{font-size:3rem;margin-bottom:1rem;display:block}
.upload-text{font-size:.78rem;color:var(--muted);letter-spacing:.06em}
.upload-text strong{color:var(--gold)}

/* V2.14 — Sphère étape 1 (aucune photo) : dropzone aussi grande que la plaquette.
   Quand des photos sont ajoutées, JS retire .is-empty et le dropzone redevient mini. */
#sphereDropZone.is-empty{
  border:1px dashed var(--border) !important;
  padding:3.5rem 2rem !important;
  font-size:.78rem !important;
  color:var(--muted) !important;
  background:var(--white) !important;
  margin-top:1rem;
  margin-bottom:1rem !important;
  letter-spacing:.06em;
  line-height:1.5;
}
#sphereDropZone.is-empty:hover{border-color:var(--gold) !important;background:var(--gold-pale) !important}
#sphereDropZone.is-empty::before{content:'📷';display:block;font-size:3rem;margin-bottom:1rem}
#sphereDropZone.is-empty > *{display:none}
#sphereDropZone.is-empty::after{content:'Cliquez ou glissez vos photos ici';display:block;color:var(--gold);font-weight:700;font-size:.95rem;margin-bottom:.4rem}
@media (max-width: 720px){
  #sphereDropZone.is-empty{padding:1.8rem .9rem !important}
  #sphereDropZone.is-empty::before{font-size:2rem;margin-bottom:.7rem}
}
.upload-preview{margin-top:1.5rem;display:none;text-align:center}
.upload-preview img{max-width:100%;max-height:220px;object-fit:contain;border:1px solid var(--border)}
.upload-filename{font-size:.72rem;color:var(--gold);margin-top:.5rem;letter-spacing:.05em}

/* ── ÉTAPE 3 : Crop ── */
.crop-wrap{margin-top:1.5rem;background:#111;border-radius:2px;overflow:hidden;max-height:420px}
.crop-wrap img{display:block;max-width:100%}
.crop-controls{margin-top:1rem;display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.ratio-btn{background:var(--warm);border:1px solid var(--border);color:var(--muted);padding:.3rem .9rem;font-family:'Josefin Sans',sans-serif;font-size:.68rem;letter-spacing:.1em;cursor:pointer;transition:all .2s}
.ratio-btn.active,.ratio-btn:hover{background:var(--ink);color:var(--gold-light);border-color:var(--ink)}
.ctrl-btn{background:var(--warm);border:1px solid var(--border);color:var(--ink);padding:.35rem .9rem;font-family:'Josefin Sans',sans-serif;font-size:.68rem;letter-spacing:.08em;cursor:pointer;transition:all .2s}
.ctrl-btn:hover{background:var(--border)}
.crop-hint{font-size:.68rem;color:var(--muted);letter-spacing:.05em;margin-top:.6rem}

/* ── ÉTAPE 4 : Aperçu 3D ── */
.viewer-wrap{margin-top:1rem;width:100%;max-height:340px;background:#0D0D0D;position:relative;border:1px solid var(--border)}
#threeCanvas{width:100%;height:100%;display:block}
.viewer-hint{position:absolute;bottom:.8rem;left:50%;transform:translateX(-50%);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.3);pointer-events:none;white-space:nowrap}
.viewer-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:rgba(255,255,255,.5);font-size:.72rem;letter-spacing:.15em}
.loader-ring{width:36px;height:36px;border:2px solid rgba(200,146,42,.2);border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Navigation boutons ── */
.modal-footer{padding:1.2rem 2rem;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:var(--white)}
.btn-back{background:none;border:1px solid var(--border);color:var(--muted);padding:.6rem 1.5rem;font-family:'Josefin Sans',sans-serif;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:all .2s}
.btn-back:hover{border-color:var(--ink);color:var(--ink)}
.btn-next{background:var(--ink);border:none;color:var(--gold-light);padding:.6rem 2rem;font-family:'Josefin Sans',sans-serif;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:all .2s}
.btn-next:hover{background:var(--gold);color:var(--ink)}
.btn-next:disabled{opacity:.4;cursor:not-allowed}

/* ── FOOTER ── */
footer{background:var(--ink);padding:3rem 2rem;text-align:center}
footer .f-logo{font-family:'Cormorant Garamond',serif;font-size:1.8rem;color:var(--gold-light);letter-spacing:.15em;font-weight:300;display:block;margin-bottom:.5rem}
footer p{font-size:.72rem;color:rgba(255,253,248,.35);letter-spacing:.1em;margin-top:.3rem}

/* ── TOAST ── */
.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(80px);background:var(--ink);color:var(--gold-light);padding:.7rem 1.8rem;font-size:.72rem;letter-spacing:.1em;z-index:999;opacity:0;transition:all .3s;border:1px solid var(--gold);pointer-events:none}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* ── OPTION PLAQUETTE / CADRE ── */
  .option-toggle{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.2rem}
  .option-card{border:1px solid var(--border);padding:1.2rem 1rem;cursor:pointer;transition:all .25s;background:var(--white);text-align:center;position:relative}
  .option-card:hover{border-color:var(--gold)}
  .option-card.selected{border-color:var(--gold);background:var(--gold-pale);box-shadow:inset 0 0 0 1px var(--gold)}
  .option-card .opt-icon{font-size:2rem;display:block;margin-bottom:.5rem}
  .option-card .opt-title{font-family:'Cormorant Garamond',serif;font-size:1.05rem;color:var(--ink);display:block;margin-bottom:.25rem}
  .option-card .opt-desc{font-size:.65rem;color:var(--muted);letter-spacing:.04em;line-height:1.5}
  .option-card .opt-price{font-size:.9rem;color:var(--gold);font-weight:600;margin-top:.5rem;display:block}
  .option-badge{position:absolute;top:.5rem;right:.5rem;background:var(--gold);color:var(--ink);font-size:.55rem;letter-spacing:.1em;padding:.2rem .5rem}
  /* ── COULEURS CADRE ── */
  .color-section{margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--border)}
  .color-section.hidden{display:none}
  .color-label{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:.8rem;display:block}
  .color-swatches{display:flex;gap:.7rem;flex-wrap:wrap;align-items:flex-start}
  .swatch{width:36px;height:36px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all .2s;position:relative;flex-shrink:0}
  .swatch:hover{transform:scale(1.15)}
  .swatch.selected{border-color:var(--gold);transform:scale(1.15)}
  .swatch.selected::after{content:'\2713';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:rgba(255,255,255,.9);text-shadow:0 1px 2px rgba(0,0,0,.5)}
  .swatch[data-color="blanc"]{background:#F5F5F0;border-color:#DDD}
  .swatch[data-color="blanc"].selected::after{color:var(--ink)}
  .swatch[data-color="noir"]{background:#1A1A1A}
  .swatch[data-color="gris"]{background:#7A7A7A}
  .swatch[data-color="bois"]{background:linear-gradient(135deg,#C8A882,#E8D0B0,#C8A882)}
  .swatch[data-color="marine"]{background:#1B3A5C}
  .swatch[data-color="bordeaux"]{background:#6B1E2A}
  .swatch-name{font-size:.6rem;color:var(--muted);margin-top:.3rem;text-align:center;letter-spacing:.06em}
  .swatch-wrap{display:flex;flex-direction:column;align-items:center}
  /* ── STYLE CARDS ── */
  .styles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;margin-top:1.5rem}
  .style-card{border:1px solid var(--border);padding:1.2rem 1rem;text-align:center;cursor:pointer;transition:all .25s;background:var(--white);position:relative;display:flex;flex-direction:column;align-items:center;gap:.3rem}
  .style-card:hover{border-color:var(--gold);background:var(--gold-pale)}
  .style-card.selected{border-color:var(--gold);background:var(--gold-pale);box-shadow:inset 0 0 0 1px var(--gold)}
  .style-icon{font-size:1.8rem}
  .style-name{font-family:'Cormorant Garamond',serif;font-size:1rem;color:var(--ink)}
  .style-desc{font-size:.62rem;color:var(--muted);letter-spacing:.04em;line-height:1.4}
  .none-card{border-style:dashed}
  /* Spinner overlay sur la carte */
  .style-processing{display:none;position:absolute;inset:0;background:rgba(250,246,238,.92);flex-direction:column;align-items:center;justify-content:center;gap:.5rem;font-size:.65rem;letter-spacing:.1em;color:var(--muted)}
  .style-processing.active{display:flex}
  /* Lightbox aperçu style */
  .style-lightbox{display:none;position:fixed;inset:0;background:var(--modal-backdrop);z-index:600;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
  .style-lightbox.open{display:flex}
  .style-lightbox img{max-width:90vw;max-height:85vh;object-fit:contain;border:1px solid var(--gold)}
  .style-lightbox-label{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);background:var(--ink);padding:.4rem 1.2rem;border:1px solid var(--gold)}
  .style-lightbox-close{position:absolute;top:1.2rem;right:1.5rem;background:none;border:none;color:var(--gold);font-size:1.5rem;cursor:pointer}
  /* ══════════════════════════════════════════
     RESPONSIVE MOBILE — max 600px
  ══════════════════════════════════════════ */
  @media(max-width:600px){

    /* V2.14t — NAV legacy v1 (scopé pour ne PAS toucher au nouveau menu
       partagé `nav.main-nav` qui devient un panneau plein-écran sur mobile).
       Le sélecteur générique `nav` cassait la hauteur du menu hamburger v2. */
    nav.nav{padding:0 .9rem;height:50px}
    .nav-logo{font-size:1.15rem;letter-spacing:.1em}
    #navAccountBtn{display:none!important}
    #navAdminBtn{padding:.3rem .55rem;font-size:.56rem;letter-spacing:.08em}

    /* ── HERO ── */
    .hero{padding:1rem .9rem .8rem;flex-direction:column;align-items:flex-start;gap:.4rem}
    .hero h1{font-size:1.35rem;line-height:1.15}
    .hero-right{align-items:flex-start;gap:.25rem}
    .hero-sub{text-align:left;font-size:.62rem}
    .hero-badge{font-size:.56rem;padding:.25rem .6rem}

    /* ── GALERIE ── */
    .gallery-section{padding:1.8rem .9rem}
    .gallery-track{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch;padding-bottom:.5rem;scroll-snap-type:x mandatory}
    .gallery-card{scroll-snap-align:start;flex-shrink:0}
    .gallery-card img{width:200px;height:155px}
    /* Désactiver les rotations sur mobile pour pas que ce soit bizarre au scroll */
    .gallery-card:nth-child(odd),.gallery-card:nth-child(even){transform:none}
    .gallery-card:nth-child(odd):hover,.gallery-card:nth-child(even):hover{transform:scale(1.02)}

    /* ── SECTION CHOIX ── */
    .section-choose{padding:2.5rem .9rem}
    .section-title{font-size:1.5rem}
    .creations-grid{grid-template-columns:1fr;gap:.9rem}
    .creation-card{padding:1.3rem 1.1rem}
    .card-icon{font-size:2rem;margin-bottom:1rem}
    .card-title{font-size:1.25rem}

    /* ── MODALE : bottom sheet plein écran ──
       On force display:flex ici pour que align-items:flex-end soit prioritaire */
    .modal-overlay{
      display:none;
      align-items:flex-end !important;
      padding:0 !important;
    }
    .modal-overlay.open{display:flex}
    .modal-box{
      width:100vw !important;
      max-width:100vw !important;
      max-height:92dvh !important;   /* dvh = dynamic viewport height, gère le clavier */
      border-radius:12px 12px 0 0;
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
      /* Handle bar visuel */
      position:relative;
    }
    /* Handle swipe */
    .modal-box::before{
      content:'';
      display:block;
      width:36px;height:4px;
      background:rgba(200,146,42,.35);
      border-radius:2px;
      margin:8px auto 0;
      position:sticky;
      top:0;
      z-index:10;
    }
    /* V2.14x — Modal header très compact : on récupère ~20px qui manquent
       pour voir le bouton "Ajouter au panier" sans scroller. */
    .modal-header{padding:.4rem .85rem;border-radius:0;min-height:auto}
    .modal-header-title{font-size:.78rem;letter-spacing:.04em}
    .modal-close{width:30px;height:30px;font-size:.95rem}
    .modal-close{font-size:1.15rem;padding:.4rem}

    /* ── STEPS BAR mobile : numéros seulement ── */
    .steps-bar{padding:.45rem .8rem}
    .step-dot > span:not(.step-num){display:none}  /* masquer le texte, garder le numéro */
    .step-dot{padding-right:.5rem;gap:.3rem}
    .step-dot .step-num{width:20px;height:20px;font-size:.55rem;flex-shrink:0}
    .step-dot::after{right:.1rem;height:10px}

    /* ── STEP CONTENT ── */
    .step-content{padding:1rem .9rem 1.5rem}
    .step-content h3{font-size:1.3rem}
    .step-content > .step-page > p{font-size:.7rem}

    /* ── FORMATS GRID : 2 colonnes ── */
    .formats-grid{grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.8rem}
    .format-option{padding:.75rem .5rem;min-height:70px}
    .format-option .fmt-size{font-size:1.1rem}
    .format-option .fmt-label{font-size:.58rem}
    .format-option .fmt-price{font-size:.8rem;margin-top:.3rem}

    /* ── UPLOAD ── */
    .upload-zone{padding:1.8rem .9rem;margin-top:1rem}
    .upload-icon-big{font-size:2rem;margin-bottom:.7rem}
    .upload-text{font-size:.72rem}

    /* ── CROP ── */
    .crop-wrap{max-height:240px;margin-top:1rem}
    .crop-controls{gap:.35rem;margin-top:.7rem}
    .ratio-btn,.ctrl-btn{padding:.3rem .55rem;font-size:.6rem}
    .crop-hint{font-size:.62rem}

    /* V2.14w — STYLES GRID : 4 colonnes serrées (Original, Manga, Cartoon,
       GPT Vision tiennent sur une seule ligne) — l'étape 3 reste compacte
       et le bouton "Suivant" est visible sans scroll. */
    .styles-grid{grid-template-columns:repeat(4,1fr);gap:.4rem;margin-top:.6rem}
    .style-card{padding:.5rem .25rem;gap:.15rem;min-height:auto}
    .style-icon{font-size:1.1rem;margin-bottom:.15rem}
    .style-name{font-size:.72rem;line-height:1.1}
    .style-desc{display:none}  /* on cache la desc pour gagner de la place */
    /* Aperçu original + résultat IA : plus compact en mobile */
    #stepPreviewsRow{margin-top:.8rem;gap:.5rem}
    #stepPreviewOriginalImg, #stylePreviewImg{max-width:130px !important;max-height:130px !important}

    /* ── OPTION TOGGLE ── */
    .option-toggle{grid-template-columns:1fr}
    .option-card{padding:1rem}

    /* V2.14x — Étape 5 sur mobile : compactée pour que le bouton "Ajouter
       au panier" soit visible immédiatement, sans scroller. */
    .viewer-wrap{
      max-height:200px; /* flex-shrink gère le reste, min-height:120px via #step5 */
      margin-top:.4rem;
      touch-action:none;
    }
    .viewer-hint{font-size:.52rem;width:88%;text-align:center;bottom:.3rem;white-space:normal}
    .viewer-loading{font-size:.65rem;gap:.7rem}
    /* Le bandeau récap sous le viewer (format + prix) plus serré */
    #step5 > div[style*="background:var(--ink)"]{padding:.5rem .8rem !important;margin-top:.45rem !important}
    #step5 #previewFormatLabel{font-size:.85rem !important}
    #step5 #previewPrice{font-size:.95rem !important}
    /* Bouton "Ajouter au panier" : un peu moins haut + marge réduite */
    #step5 #btnAddCart{padding:.75rem .8rem !important;margin-top:.35rem !important;font-size:.72rem !important}
    /* Texte aide sous le bouton + h3 + label étape : ultra-compacts */
    #step5 .section-label{margin-bottom:.15rem;font-size:.55rem}
    #step5 h3{font-size:1.1rem !important;margin-bottom:.15rem !important}
    #step5 > p{font-size:.62rem !important;margin-bottom:.25rem}
    #step5 > p:last-child{font-size:.55rem;margin-top:.2rem !important}

    /* ── MODAL FOOTER boutons ── */
    .modal-footer{padding:.8rem .9rem;gap:.4rem}
    .btn-back{padding:.6rem .9rem;font-size:.62rem;min-width:70px}
    .btn-next{padding:.6rem 1rem;font-size:.62rem;flex:1}
    /* Bouton Ajouter au panier — bien visible */
    #btnAddCart{
      padding:.75rem 1rem;
      font-size:.7rem;
      letter-spacing:.1em;
    }

    /* ── CART DRAWER : bottom sheet plein écran ── */
    .cart-drawer{
      width:100vw;
      max-width:100vw;
      top:auto;
      bottom:0;
      border-radius:12px 12px 0 0;
      max-height:92dvh;
    }
    .cart-drawer.open{transform:translateX(0)}
    .cart-drawer-header{padding:1rem;border-radius:12px 12px 0 0}
    .cart-drawer-body{padding:.9rem}
    .cart-drawer-footer{padding:.9rem}
    .cart-item{gap:.6rem;padding:.8rem 0}
    .cart-item-thumb{width:44px;height:44px;font-size:1.05rem}
    .cart-item-name{font-size:.82rem}
    .cart-item-sub{font-size:.6rem}
    .cart-item-price{font-size:.82rem}
    .cart-total-main{font-size:1rem}
    .cart-pay-btn{padding:.85rem;font-size:.72rem;letter-spacing:.15em}

    /* ── TOAST ── */
    .toast{
      width:calc(100vw - 2rem);
      left:1rem;
      transform:translateX(0) translateY(80px);
      text-align:center;
      bottom:1rem;
    }
    .toast.show{transform:translateX(0) translateY(0)}

    /* ── MODALE COMBINAISON OFFRE ── */
    #offreCombiModal{padding:.5rem 0 0}
    #offreCombiModal > div{
      width:100vw;
      max-width:100vw;
      border-radius:12px 12px 0 0;
      margin:0;
      max-height:92dvh;
      overflow-y:auto;
    }
    #offreCombiModal canvas{height:200px!important}

    /* ── BANNIÈRE OFFRE ── */
    #offreBanner{font-size:.62rem;padding:.4rem .7rem}
  }

  /* ── TABLETTE 601–900px ── */
  @media(min-width:601px) and (max-width:900px){
    .modal-box{width:94vw}
    .creations-grid{grid-template-columns:repeat(2,1fr)}
    .viewer-wrap{max-height:300px}
    .formats-grid{grid-template-columns:repeat(3,1fr)}
    .styles-grid{grid-template-columns:repeat(3,1fr)}
  }

  /* ── DESKTOP ≥ 901px : confort placement 3D ──
     Modal plaquette + sphère : largeur étendue + viewer 3D plus grand
     pour faciliter le placement précis des photos sur la sphère. */
  @media(min-width:901px){
    /* Plaquette */
    .modal-box{width:min(1200px,94vw)}
    .viewer-wrap{max-height:440px}

    /* Sphère — overrides des styles inline du modal */
    #sphereModalOverlay > div{width:min(1200px,94vw) !important;max-width:none !important}
    #sphereThreeCanvas{height:540px !important}
    /* Grille des miniatures photos : plus grand et plus lisible */
    #spherePhotosGrid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr)) !important;max-height:140px !important;gap:.4rem !important}
    /* Hint manuel plus visible */
    #sphereManualHint{font-size:.72rem !important;padding:.45rem 1rem !important}
  }


/* ============================================================
   CART DRAWER + bouton panier (importé du v1 public/index.html)
   ============================================================ */
.cart-btn{position:relative;background:none;border:none;cursor:pointer;color:var(--gold-light);padding:.3rem .5rem;font-size:1.3rem;transition:color .2s}
.cart-btn:hover{color:var(--gold)}
.cart-badge{position:absolute;top:-2px;right:-4px;background:var(--gold);color:var(--ink);font-size:.55rem;font-weight:700;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(0);transition:all .25s}
.cart-badge.show{opacity:1;transform:scale(1)}
.cart-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:800;backdrop-filter:blur(2px);transition:opacity .3s}
.cart-overlay.open{display:block}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:95vw;background:var(--bg-2);z-index:801;transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-4px 0 40px rgba(0,0,0,.35)}
.cart-drawer.open{transform:translateX(0)}
.cart-drawer-header{background:var(--bg);padding:1.2rem 1.5rem;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;border-bottom:1px solid var(--line)}
.cart-drawer-title{font-size:1.1rem;color:var(--ink);font-weight:700;letter-spacing:-.01em}
.cart-drawer-close{background:none;border:none;color:var(--ink-dim);font-size:1.3rem;cursor:pointer;transition:color .2s}
.cart-drawer-close:hover{color:var(--accent)}
.cart-drawer-body{flex:1;overflow-y:auto;padding:1.5rem}
.cart-drawer-footer{background:var(--surface);border-top:1px solid var(--line);padding:1.2rem 1.5rem;flex-shrink:0}
.cart-item{display:flex;gap:1rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--line);color:var(--ink)}
.cart-item:last-child{border-bottom:none}
.cart-item-thumb{width:64px;height:64px;background:var(--bg-3);border:1px solid var(--line);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.cart-item-info{flex:1;min-width:0}
.cart-item-name{font-size:.95rem;color:var(--ink);margin-bottom:.2rem;font-weight:600}
.cart-item-sub{font-size:.7rem;color:var(--ink-dim);letter-spacing:.02em;line-height:1.5}
.cart-item-price{font-size:.9rem;font-weight:700;color:var(--accent);white-space:nowrap}
.cart-item-remove{background:none;border:none;color:var(--ink-dim);cursor:pointer;font-size:.85rem;padding:.2rem;transition:color .2s;flex-shrink:0}
.cart-item-remove:hover{color:var(--err)}
.cart-total-row{display:flex;justify-content:space-between;font-size:.85rem;color:var(--ink-soft);margin-bottom:.4rem}
.cart-total-main{display:flex;justify-content:space-between;font-size:1.1rem;font-weight:700;color:var(--ink);margin:.6rem 0 1rem}
.cart-pay-btn{width:100%;background:var(--accent);border:none;color:#fff;padding:.9rem;font-size:.85rem;letter-spacing:.05em;cursor:pointer;font-weight:700;transition:background .2s;border-radius:var(--radius-sm)}
.cart-pay-btn:hover{background:var(--accent-hover)}
.cart-pay-btn:disabled{opacity:.5;cursor:default}
.cart-empty{text-align:center;padding:3rem 1rem;color:var(--ink-dim)}
.cart-empty-icon{font-size:3rem;display:block;margin-bottom:1rem}
.cart-empty-text{font-size:.85rem;color:var(--ink-dim);margin-bottom:1.5rem}
.cart-empty-cta{background:var(--accent);color:#fff;border:none;padding:.7rem 1.5rem;font-size:.8rem;cursor:pointer;transition:background .2s;border-radius:var(--radius-sm)}
.cart-empty-cta:hover{background:var(--accent-hover)}

/* En embed-mode (iframe), TOUT ce qui n'est pas une modale doit être caché */
body.embed-mode .cart-overlay,
body.embed-mode .cart-drawer,
body.embed-mode .toast { display: none !important; }