/* BoutiqueOuf - Shop App Styles */
:root {
  --primary: #6B21A8;
  --primary-light: #EDE9FE;
  --primary-dark: #581C87;
  --bg: #F9FAFB;
  --surface: #FFFFFF;
  --text: #1F2937;
  --text-sec: #6B7280;
  --text-light: #9CA3AF;
  --border: #E5E7EB;
  --success: #16A34A;
  --danger: #DC2626;
  --warning: #2E8B3C;
  --radius: 12px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  max-width: 390px;
  margin: 0;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Placeholders des champs (edits) : +20% de transparence. */
input::placeholder, textarea::placeholder { opacity: 0.8; }

/* Badges adresse (panier) : l'adresse usuelle (par defaut) en vert, la selection mise en avant. */
.addr-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.addr-badge {
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
/* Seule l'adresse habituelle a un fond colore (vert). Les autres : fond neutre,
   selection = simple bordure (pas de fond colore). */
.addr-badge.usuelle { background: var(--success); border-color: var(--success); color: #fff; }
.addr-badge.selected { border-color: var(--primary); border-width: 2px; }
.addr-badge.usuelle.selected { background: var(--success); border-color: var(--success); color: #fff; }
button { cursor: pointer; border: none; font-family: inherit; }

/* Welcome popup */
.welcome-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn 0.3s;
}

.welcome-popup {
  background: var(--surface);
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
  max-width: 340px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: popIn 0.3s;
}

.welcome-icon { font-size: 48px; margin-bottom: 16px; }
.welcome-text {
  font-size: 15px;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 24px;
}

.welcome-close {
  background: var(--primary);
  color: #fff;
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  width: 100%;
}

.welcome-close:active { opacity: 0.85; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

/* Banner carousel */
.banner-carousel {
  position: relative;
  padding: 10px 40px 10px 16px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
  min-height: 38px;
  overflow: hidden;
}

.banner-carousel.banner-bottom {
  position: fixed;
  bottom: 0; left: 0; right: auto;
  max-width: 390px;
  margin: 0;
  z-index: 90;
}

.banner-track {
  display: flex;
  width: 100%;
  min-height: 18px;
  transition: transform 0.5s ease;
}

.banner-slide {
  min-width: 100%;
  flex-shrink: 0;
  text-align: center;
}

.banner-close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  color: rgba(255,255,255,0.7);
  font-size: 16px;
  padding: 4px;
}

.banner-close:hover { color: #fff; }

/* Header */
.header {
  visibility: hidden; /* revele par JS une fois couleur + logo + position appliques (anti-FOUC) */
  background: var(--primary);
  color: #fff;
  height: 160px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* Logo position variants */
.header-content.pos-top {
  flex-direction: column;
  align-items: center;
}

.header-content.pos-left {
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.header-content.pos-right {
  flex-direction: row-reverse;
  align-items: center;
  gap: 14px;
}

.header-content.pos-bottom {
  flex-direction: column-reverse;
  align-items: center;
}

.header-content.pos-left .header-text,
.header-content.pos-right .header-text {
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.header .logo {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 32px;
  flex-shrink: 0;
  overflow: hidden;
  margin-bottom: 6px;
  border: 3px solid rgba(255,255,255,0.4);
}

.header .logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header-text {
  text-align: center;
}

.header .shop-name { font-size: 20px; font-weight: 800; text-align: center; }
.header .shop-location { font-size: 12px; opacity: 0.7; margin-top: 2px; }
.header .shop-desc {
  font-size: 14px;
  opacity: 0.8;
  margin-top: 4px;
  line-height: 1.4;
  text-align: center;
}

/* Cart button in header */
.cart-header {
  position: absolute;
  right: 8px;
  z-index: 10;
  text-decoration: none;
  /* center the icon vertically: icon is 40px, so top = 50% - 20px */
  top: 50%;
  margin-top: -20px;
}

.cart-header .badge {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 2px;
  background: #FF0000;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.cart-header .badge:empty { display: none; }

.cart-header .cart-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
}

/* Category accordion */
.category-accordion {
  padding: 8px 0;
}

.accordion-section {
  margin-bottom: 4px;
}

.accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--surface);
  border: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}

.accordion-header:active { background: #F3F4F6; }

.accordion-header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.accordion-count {
  font-weight: 500;
  color: var(--text-sec);
  font-size: 13px;
  margin-left: 4px;
}

.accordion-promo-text {
  font-size: 12px;
  font-weight: 600;
  color: #1A1A2E;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.accordion-promo {
  margin-left: auto;
  margin-right: 10px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: #D97706;
  background: #FEF3C7;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.3px;
}

.accordion-chevron {
  font-size: 11px;
  color: var(--text-sec);
  transition: transform 0.25s ease;
}

.accordion-section.open .accordion-chevron {
  transform: rotate(180deg);
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-section.open .accordion-body {
  max-height: 5000px;
}

/* Product grid */
.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px;
}

.product-card {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: transform 0.15s;
}

.product-card:active { transform: scale(0.97); }

.product-card .img-wrap {
  position: relative;
  aspect-ratio: 1;
  background: #F3F4F6;
  overflow: hidden;
}

.cart-overlay-btn {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  transition: background 0.2s, transform 0.15s;
}

.cart-overlay-btn:active { transform: scale(0.9); }

.cart-overlay-btn .cart-icon {
  font-size: 16px;
}

.cart-overlay-btn .cart-x {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #E53E3E;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.cart-overlay-btn.in-cart {
  background: #fff;
}

.product-card .img-wrap img,
.product-card .img-wrap video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ─── Affordance zoom sur toutes les thumbnails : curseur + badge "+" ─── */
.zoom-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  z-index: 3;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
  cursor: zoom-in;
}
.zoomable { cursor: zoom-in; }
.cart-item .thumb .zoom-badge {
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  bottom: 3px;
  right: 3px;
}

/* ─── Lightbox zoom plein ecran (format telephone) ─── */
.zoom-overlay {
  position: fixed;
  /* Confiné à la colonne "view téléphone" (390px centrée) : ne cache pas le parent/desktop autour. */
  top: 0;
  bottom: 0;
  left: 0;
  transform: none;
  width: min(390px, 100vw);
  z-index: 100000;
  background: transparent; /* rien masque autour de la photo zoomee : la page reste visible */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.zoom-overlay-img {
  /* Tient TOUJOURS dans la vue : largeur = viewport - 10px de marge de chaque cote,
     hauteur bornee a la hauteur visible. Ratio preserve, jamais de debordement. */
  max-width: calc(100vw - 20px);
  max-height: calc(100vh - 20px);
  max-height: calc(100dvh - 20px); /* mobile : hauteur visible reelle (barre navigateur incluse) */
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ─── Zoom galerie (photos + videos, swipe / pinch / tap-close) ─── */
.zoom-overlay.zoom-gallery {
  cursor: default;
  overflow: hidden;
  touch-action: none; /* on gere pinch/pan/swipe nous-memes */
}
.zoom-gallery .zoom-stage {
  position: relative;
  /* Cadre limité à la largeur "format téléphone" (390px), dimensionné au média :
     les contrôles (enfants du stage) restent ainsi DANS la photo. */
  width: auto;
  max-width: min(390px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.zoom-gallery .zoom-media {
  /* La photo remplit TOUJOURS la largeur "format téléphone", hauteur proportionnelle :
     pas de letterbox / fond noir autour de la photo. */
  width: min(390px, calc(100vw - 16px));
  height: auto;
  display: block;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.zoom-gallery .zoom-img {
  transform-origin: center center;
  will-change: transform;
  cursor: zoom-out;
}

/* ─── Zoom ANCRÉ : confiné à la zone de l'image principale (détail produit).
   Position/taille posées en inline (left/top/width/height = rect de l'ancre).
   Le reste de la vue téléphone (nom, prix, vignettes) reste visible autour. ─── */
.zoom-overlay.zoom-anchored {
  left: auto;            /* neutralise le centrage par défaut (left:50% + translateX) */
  right: auto;
  top: auto;
  bottom: auto;
  transform: none;
  width: auto;           /* surchargé en inline par le rect de l'ancre */
}
.zoom-anchored .zoom-stage {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}
.zoom-anchored .zoom-media {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.zoom-gallery .zoom-video { background: #000; }

/* Compteur + controles superposes SUR le media (par-dessus, jamais dans le noir). */
.zoom-gallery .zoom-counter {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  background: rgba(0,0,0,0.5);
  padding: 3px 10px;
  border-radius: 12px;
  pointer-events: none;
}
.zoom-gallery .zoom-nav,
.zoom-gallery .zoom-close {
  position: absolute;
  z-index: 5;
  border: none;
  color: #fff;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.zoom-gallery .zoom-nav {
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border-radius: 22px;
  font-size: 30px;
  line-height: 1;
}
.zoom-gallery .zoom-nav-l { left: 8px; }
.zoom-gallery .zoom-nav-r { right: 8px; }
.zoom-gallery .zoom-close {
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  font-size: 20px;
  line-height: 1;
}

.product-card .img-wrap .video-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 32px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  pointer-events: none;
  background: rgba(0,0,0,0.15);
}

.product-card .info {
  padding: 10px;
}

.product-card .name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card .price {
  font-size: 15px;
  font-weight: 800;
  color: #1565C0;
  margin-top: 4px;
}

.product-card .stock-badge {
  font-size: 10px;
  color: var(--success);
  margin-top: 2px;
}

.product-card .stock-badge.out { color: var(--danger); }
.product-card .stock-badge.urgent {
  font-size: 11px;
  font-weight: 800;
  color: #E00000;
  background: #FFFF00;
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 4px;
}

/* Product detail page */
.product-detail { padding-bottom: 100px; }

.product-detail .gallery {
  background: #F3F4F6;
  overflow: hidden;
}

.product-detail .gallery .gallery-main {
  width: 100%;
  aspect-ratio: 5 / 6; /* photo +20% en hauteur (largeur bornee a la view telephone) */
  object-fit: contain;
  display: block;
  transform-origin: center center;
  will-change: transform;
}
/* overflow hidden : la photo zoomee (pinch) ne deborde pas ; touch-action pan-y : on gere
   nous-memes pinch + swipe horizontal, le scroll vertical de la page reste possible. */
.product-detail .gallery .gallery-main-wrap { width: 100%; position: relative; overflow: hidden; touch-action: pan-y; }
.product-detail .gallery .gallery-main-media { width: 100%; }
.product-detail .gallery .gallery-main-video { cursor: default; background: #000; }

/* Fleches de navigation superposees sur la vue principale (prev/next). */
.product-detail .gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: none;
  background: rgba(0,0,0,0.4);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  cursor: pointer;
}
.product-detail .gallery-nav-l { left: 8px; }
.product-detail .gallery-nav-r { right: 8px; }

.product-detail .gallery-thumbs {
  display: flex;
  gap: 6px;
  padding: 8px;
  overflow-x: auto;
  background: #fff;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
}

.product-detail .gallery-thumb {
  min-width: 60px;
  width: 60px;
  height: 60px;
  border-radius: 6px;
  flex-shrink: 0;
  object-fit: contain;
  background: #F3F4F6;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s;
}

.product-detail .gallery-thumb:hover {
  border-color: var(--primary, #7c3aed);
}
/* Vignette vidéo : 1ère frame + badge play */
.product-detail .gallery-thumb-video {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.product-detail .gallery-thumb-video video {
  width: 100%;
  height: 100%;
  object-fit: contain; background: #000;
  border-radius: 4px;
}
.product-detail .gallery-thumb-video .thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  pointer-events: none;
}

.product-detail .content { padding: 20px; }
.product-detail .name { font-size: 20px; font-weight: 800; }
.product-detail .price {
  font-size: 24px;
  font-weight: 900;
  color: #1565C0;
  margin-top: 8px;
}

.product-detail .desc {
  font-size: 14px;
  color: var(--text-sec);
  line-height: 1.6;
  margin-top: 12px;
}

.product-detail .stock {
  font-size: 13px;
  color: var(--success);
  font-weight: 600;
  margin-top: 8px;
}

.product-detail .stock.out { color: var(--danger); }
.product-detail .stock.urgent {
  font-weight: 800;
  color: #E00000;
  background: #FFFF00;
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
}

/* Options (size/color) */
.option-group {
  margin-top: 16px;
}

.option-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-sec);
  margin-bottom: 8px;
}

.option-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.option-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 2px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  transition: all 0.15s;
}

.option-btn.selected {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
}

/* Add to cart bar — above footer */
.add-bar {
  position: fixed;
  bottom: 56px;
  left: 0;
  transform: none;
  width: 100%;
  max-width: 390px;
  background: var(--surface);
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  z-index: 101;
}

.add-bar-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.add-bar-row .btn-primary {
  flex: 1;
}

.btn-back-cat {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 2px solid var(--primary);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
}

.btn-back-cat:active {
  background: var(--primary-light);
}

.btn-primary {
  width: 100%;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary:active:not(:disabled) { background: var(--primary-dark); }

/* Cart page */
.cart-page { padding: 20px; padding-bottom: 200px; }

.cart-page h1 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 16px;
}

.cart-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--surface);
  border-radius: var(--radius);
  margin-bottom: 8px;
}

.cart-item .thumb {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: #F3F4F6;
  overflow: hidden;
  flex-shrink: 0;
}

.cart-item .thumb img,
.cart-item .thumb video {
  width: 100%;
  height: 100%;
  object-fit: contain; background: #000;
}

.cart-item .details { flex: 1; }
.cart-item .item-name { font-size: 14px; font-weight: 600; }
.cart-item .item-meta { font-size: 12px; color: var(--text-sec); margin-top: 2px; }
.cart-item .item-price { font-size: 14px; font-weight: 700; color: var(--primary); margin-top: 4px; }

/* Badge stock dans le panier — meme UI que l'accueil */
.cart-item .stock-badge { font-size: 10px; color: var(--success); margin-top: 4px; }
.cart-item .stock-badge.out { color: var(--danger); }
.cart-item .stock-badge.urgent {
  font-size: 11px;
  font-weight: 800;
  color: #E00000;
  background: #FFFF00;
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 4px;
}

/* +/- et bouton supprimer sur la meme ligne, a droite */
.cart-item .cart-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: center;
}
.cart-item .cart-actions .qty-row { margin-top: 0; }

.cart-item .qty-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #F3F4F6;
  border-radius: 999px;
  padding: 3px;
  margin-top: 6px;
}

.qty-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  color: var(--primary);
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
  transition: transform 0.1s;
}
.qty-btn:active { transform: scale(0.9); }

.qty-val { font-size: 14px; font-weight: 700; min-width: 26px; text-align: center; }

.cart-item .remove-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #FEE2E2;
  color: #DC2626;
  border: none;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.1s;
}
.cart-item .remove-btn:active { transform: scale(0.9); }

/* Cart total */
.cart-total {
  margin-top: 16px;
  padding: 16px;
  background: var(--surface);
  border-radius: var(--radius);
}

.cart-total .row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.cart-total .row.total {
  font-size: 18px;
  font-weight: 800;
  color: var(--primary);
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-bottom: 0;
}

/* Order form */
.order-form {
  margin-top: 20px;
  padding: 16px;
  background: var(--surface);
  border-radius: var(--radius);
}

.order-form h2 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
}

.form-group {
  margin-bottom: 12px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sec);
  margin-bottom: 4px;
}

.form-group input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  background: var(--bg);
}

.form-group input:focus {
  outline: none;
  border-color: var(--primary);
}

/* Magic prefill button */
.magic-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  background: var(--primary-bg, #F5F3FA);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
  flex-shrink: 0;
}

.magic-btn:hover {
  background: var(--primary);
  transform: scale(1.1);
}

.magic-btn:active {
  transform: scale(0.95);
}

/* Payment options */
.payment-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.payment-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 2px solid #eee;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.payment-option.selected {
  border-color: var(--success, #27AE60);
  background: #E8F8F0;
}

.payment-option input[type="radio"] {
  display: none;
}

.payment-icon {
  font-size: 24px;
  width: 36px;
  text-align: center;
}

.payment-info {
  display: flex;
  flex-direction: column;
}

.payment-info strong {
  font-size: 13px;
  color: #333;
}

.payment-info small {
  font-size: 11px;
  color: #888;
}

.confirmation-recap {
  background: #F5F3FA;
  border-radius: 12px;
  padding: 16px;
  margin-top: 16px;
  text-align: left;
}

.confirmation-recap p {
  margin: 4px 0;
  font-size: 13px;
  color: #555;
}

/* Confirmation */
.confirmation {
  text-align: center;
  padding: 40px 20px;
}

.confirmation .icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #DCFCE7;
  color: var(--success);
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.confirmation h2 { font-size: 20px; font-weight: 800; }
.confirmation p { font-size: 14px; color: var(--text-sec); margin-top: 8px; }

/* Empty state */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-light);
}

.empty-state .icon { font-size: 48px; margin-bottom: 12px; }
.empty-state p { font-size: 14px; }

/* Back link */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
}

/* Loading */
.loading {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-light);
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 12px;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Error banner */
.error-banner {
  position: fixed;
  top: 0;
  left: 0;
  transform: none;
  width: 100%;
  max-width: 390px;
  background: var(--danger);
  color: #fff;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 9999;
  animation: slideDown 0.3s ease;
}
@keyframes slideDown { from { transform: translateX(-50%) translateY(-100%); } to { transform: translateX(-50%) translateY(0); } }
.error-msg { flex: 1; }
.error-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.error-detail-btn {
  background: rgba(255,255,255,0.2);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
}
.error-close {
  background: none;
  color: #fff;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
}
.error-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.error-modal {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  max-width: 400px;
  width: 100%;
  max-height: 80vh;
  overflow: auto;
}
.error-modal h3 {
  margin: 0 0 12px;
  font-size: 16px;
  color: var(--danger);
}
.error-modal-detail {
  background: #FEE2E2;
  color: #7F1D1D;
  padding: 12px;
  border-radius: 8px;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 300px;
  overflow: auto;
  margin-bottom: 12px;
}
.error-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.error-modal-actions button {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn-copy { background: var(--primary); color: #fff; border: none; }
.btn-close { background: #E5E7EB; color: var(--text); border: none; }

/* Index page */
.landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 32px;
  text-align: center;
}

.landing .logo {
  width: 240px;
  height: 240px;
  border-radius: 32px;
  object-fit: contain;
  margin-bottom: 16px;
}

.landing .brand {
  font-size: 36px;
  font-weight: 900;
}

.landing .brand span { color: var(--primary); }

.landing .subtitle {
  font-size: 17px;
  color: var(--text-sec);
  margin-top: 8px;
}

.gold-icon {
  color: #2E8B3C;
  font-weight: 900;
  font-size: 1em;
  vertical-align: baseline;
  margin: 0 2px;
}

.landing .search-box {
  margin-top: 32px;
  width: 100%;
}

.landing .search-box input,
.landing .search-box select {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 16px;
  font-family: inherit;
  text-align: center;
  background: var(--surface);
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
}

.landing .search-box select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.landing .search-box input:focus,
.landing .search-box select:focus {
  outline: none;
  border-color: var(--primary);
}

.landing .search-box button {
  width: 100%;
  margin-top: 12px;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 80px;
  left: 0;
  transform: none;
  background: var(--text);
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  z-index: 300;
  animation: fadeInUp 0.3s;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Build info badge */
.build-info {
  position: absolute;
  bottom: 4px;
  right: 8px;
  z-index: 5;
  text-align: right;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.3;
  color: #000; /* n° de build en NOIR */
  background: rgba(255,255,255,0.9); /* chip clair -> noir net et lisible sur header sombre */
  padding: 1px 5px;
  border-radius: 4px;
  opacity: 1;
}

.build-info .dev-badge {
  color: #90EE90;
  font-weight: 800;
}

/* Footer navigation */
.footer-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  transform: none;
  width: 100%;
  max-width: 390px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-around;
  padding: 8px 0 env(safe-area-inset-bottom, 8px);
  z-index: 100;
}

.footer-nav a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  color: #4b5563;
  padding: 4px 12px;
  text-decoration: none;
  position: relative;
}

.footer-nav a.active {
  color: var(--primary);
  font-weight: 700;
}

.footer-nav .nav-icon {
  font-size: 22px;
}

.footer-nav .cart-count {
  position: absolute;
  top: 0;
  right: 4px;
  background: var(--danger);
  color: white;
  font-size: 9px;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* Push content up so footer + add-bar don't cover it */
body { padding-bottom: 120px; }

/* ── AUCUNE BARRE DE DÉFILEMENT, NULLE PART ──────────────────────────────────────────────
   Un téléphone n'en montre jamais : le contenu glisse sous le doigt, point. Le navigateur,
   lui, colle sa barre grise sur tout ce qui déborde — elle mange une dizaine de pixels sur un
   cadre de 390 et, sur les carrousels, elle barre le bas des vignettes.
   Les trois déclarations couvrent les trois moteurs. Le défilement lui-même n'est PAS touché. */
::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
* { scrollbar-width: none !important; -ms-overflow-style: none !important; }