:root {
  --bg: #0d0d0f;
  --bg2: #141418;
  --bg3: #1c1c24;
  --violet: #9b59f5;
  --violet-dark: #7c3aed;
  --violet-light: #c4a0ff;
  --violet-glow: rgba(155,89,245,0.25);
  --text: #f0f0f5;
  --text-muted: #8888aa;
  --border: rgba(155,89,245,0.18);
  --card-bg: #18181f;
  --radius: 16px;
  --radius-sm: 10px;
  --warning: rgba(230,160,60,0.12);
  --warning-border: rgba(230,160,60,0.45);
}
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
body {
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  min-height:100vh; overflow-x:hidden;
}

/* SPLASH */
#splash {
  position:fixed; inset:0; background:var(--bg);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  z-index:9999; gap:18px;
  transition:opacity .7s ease,visibility .7s ease;
}
#splash.hidden { opacity:0; visibility:hidden; pointer-events:none; }
#splash .snowflake { font-size:4rem; animation:spin 3s linear infinite; }
#splash .logo-text {
  font-size:2.8rem; font-weight:900;
  background:linear-gradient(135deg,#fff,var(--violet-light));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  animation:pulse-glow 1.5s ease infinite;
}
#splash .loading-bar { width:180px; height:3px; background:var(--bg3); border-radius:99px; overflow:hidden; }
#splash .loading-bar-fill {
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--violet-dark),var(--violet-light));
  border-radius:99px; animation:load-bar 1.8s ease forwards;
}
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes pulse-glow { 0%,100%{opacity:1} 50%{opacity:.7} }
@keyframes load-bar { to{width:100%} }
@keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* HEADER */
#header {
  position:fixed; top:0; left:0; right:0; z-index:100; height:80px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,rgba(13,13,15,.98) 60%,transparent);
}
#header .brand {
  font-size:1.7rem; font-weight:900;
  background:linear-gradient(135deg,#fff,var(--violet-light));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

/* BOTTOM NAV */
#bottom-nav {
  position:fixed; bottom:0; left:0; right:0; height:68px; z-index:100;
  background:rgba(18,18,24,.97); border-top:1px solid var(--border);
  display:flex; backdrop-filter:blur(12px);
}
.nav-item {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px;
  cursor:pointer; color:var(--text-muted); font-size:.62rem; font-weight:600;
  letter-spacing:.3px; border:none; background:none; transition:color .2s;
}
.nav-item .nav-icon { font-size:1.25rem; transition:transform .2s; }
.nav-item.active { color:var(--violet); }
.nav-item.active .nav-icon { transform:scale(1.15); }

/* MAIN */
#main { padding-top:84px; padding-bottom:76px; min-height:100vh; }
.page { display:none; padding:0 13px; }
.page.active { display:block; animation:fadeUp .25s ease; }

/* WELCOME */
.welcome-banner {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius); padding:13px 15px;
  display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
}
.welcome-banner .left { display:flex; align-items:center; gap:11px; }
.welcome-banner .avatar {
  width:40px; height:40px;
  background:linear-gradient(135deg,var(--violet-dark),var(--violet-light));
  border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:1.2rem;
}
.welcome-banner .greet { font-size:.72rem; color:var(--text-muted); }
.welcome-banner .username { font-size:.95rem; font-weight:700; }
.welcome-banner .sparkle { font-size:1.2rem; }

/* PRODUITS HEADER */
.products-header {
  display:flex; align-items:center; justify-content:space-between;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius); padding:11px 15px; margin-bottom:11px;
}
.products-header .title { display:flex; align-items:center; gap:7px; font-weight:800; font-size:.95rem; }
.products-count { background:var(--violet-dark); color:#fff; padding:3px 11px; border-radius:99px; font-size:.72rem; font-weight:600; }

/* FILTRES */
.filters-row { display:flex; gap:9px; margin-bottom:13px; }
.filter-select {
  flex:1; background:var(--bg3); border:1px solid var(--border);
  color:var(--text); border-radius:var(--radius-sm);
  padding:9px 28px 9px 11px; font-size:.83rem; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239b59f5' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center;
}
.filter-select:focus { outline:none; border-color:var(--violet); }

/* GRILLE PRODUITS */
.products-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.product-card {
  position:relative; border-radius:var(--radius); overflow:hidden;
  cursor:pointer; aspect-ratio:3/4;
  transition:transform .15s; animation:fadeUp .3s ease;
  background:var(--bg3);
}
.product-card:active { transform:scale(.97); }
.product-card img {
  width:100%; height:100%; object-fit:cover; display:block;
  position:absolute; inset:0;
}
/* Overlay gradient */
.product-card::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.3) 50%, rgba(0,0,0,.1) 100%);
  pointer-events:none;
}
.product-card .card-body {
  position:absolute; bottom:0; left:0; right:0;
  padding:10px; z-index:2;
}
.product-card .card-badge {
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(0,0,0,.55); color:#fff;
  font-size:.62rem; font-weight:700;
  padding:3px 8px; border-radius:99px;
  border:1px solid rgba(255,255,255,.15);
  margin-bottom:6px; letter-spacing:.3px;
  backdrop-filter:blur(4px);
}
.product-card .card-name {
  font-weight:800; font-size:.9rem; margin-bottom:3px;
  color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:0 1px 4px rgba(0,0,0,.8);
}
.product-card .card-origin {
  font-size:.68rem; color:rgba(255,255,255,.7);
  display:flex; align-items:center; gap:4px; font-weight:600;
}
.no-img {
  width:100%; height:100%; background:var(--bg3);
  display:flex; align-items:center; justify-content:center; font-size:2.5rem;
  position:absolute; inset:0;
}

/* FICHE PRODUIT */
#product-detail { display:none; }
#product-detail.active { display:block; padding:0; animation:fadeUp .25s ease; }
.detail-back { display:flex; align-items:center; gap:7px; padding:13px 13px 0; color:var(--violet-light); cursor:pointer; font-size:.88rem; font-weight:600; }
.gallery-wrapper { position:relative; margin-bottom:15px; }
.gallery-main { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--bg3); }
.gallery-thumbs { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; gap:5px; background:rgba(0,0,0,.65); padding:5px 9px; border-radius:99px; }
.gallery-thumb { width:42px; height:42px; border-radius:7px; object-fit:cover; border:2px solid transparent; cursor:pointer; }
.gallery-thumb.active { border-color:var(--violet); }
.vid-badge { width:42px; height:42px; border-radius:7px; background:var(--bg3); border:2px solid transparent; display:flex; align-items:center; justify-content:center; font-size:.58rem; font-weight:700; color:var(--violet-light); cursor:pointer; flex-direction:column; }
.vid-badge.active { border-color:var(--violet); }
.detail-body { padding:0 13px 100px; }
.detail-name { font-size:1.45rem; font-weight:900; margin-bottom:9px; }
.detail-badges { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:15px; }
.badge-cat { background:var(--bg3); border:1px solid var(--border); padding:5px 11px; border-radius:99px; font-size:.73rem; display:flex; align-items:center; gap:4px; }
.badge-origin { background:transparent; border:1px solid var(--violet); color:var(--violet-light); padding:5px 11px; border-radius:99px; font-size:.73rem; display:flex; align-items:center; gap:4px; }
.detail-info-card { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:13px; margin-bottom:13px; }
.detail-info-card .info-row { display:flex; align-items:flex-start; gap:9px; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:.87rem; line-height:1.4; }
.detail-info-card .info-row:last-child { border-bottom:none; }
.detail-info-card .info-emoji { font-size:.95rem; flex-shrink:0; margin-top:1px; }
.prices-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:11px; margin-bottom:18px; }
.price-card { background:var(--bg); border-radius:var(--radius-sm); padding:11px; text-align:center; }
.price-card .qty { font-size:.82rem; color:var(--text-muted); margin-bottom:3px; }
.price-card .price { font-size:1.15rem; font-weight:800; color:var(--violet-light); }

/* BTN SIGNAL */
.btn-signal {
  width:100%; background:linear-gradient(135deg,var(--violet-dark),var(--violet));
  color:#fff; border:none; border-radius:var(--radius); padding:15px;
  font-size:.97rem; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:9px;
  box-shadow:0 4px 20px var(--violet-glow); transition:opacity .2s,transform .2s;
}
.btn-signal:active { opacity:.85; transform:scale(.98); }

/* PAGE BANNERS */
.page-banner, .infos-banner, .tutos-header {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius); padding:15px 16px; text-align:center; margin-bottom:13px;
}
.page-banner h2, .infos-banner h2, .tutos-header h2 { font-size:1.2rem; font-weight:800; margin-bottom:4px; }
.page-banner p, .infos-banner p, .tutos-header p { font-size:.8rem; color:var(--violet-light); }

/* SCORE AVIS */
.reviews-score-card {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius); padding:15px;
  display:flex; gap:16px; align-items:center; margin-bottom:13px;
}
.score-left { text-align:center; min-width:72px; }
.score-number { font-size:2.5rem; font-weight:900; color:var(--violet-light); line-height:1; }
.score-stars { font-size:.9rem; margin:4px 0; }
.score-count { font-size:.72rem; color:var(--text-muted); }
.score-bars { flex:1; display:flex; flex-direction:column; gap:5px; }
.score-bar-row { display:flex; align-items:center; gap:5px; font-size:.72rem; }
.star-num { color:var(--text-muted); width:8px; }
.star-icon { font-size:.7rem; }
.bar-track { flex:1; height:6px; background:var(--bg); border-radius:99px; overflow:hidden; }
.bar-fill { height:100%; background:var(--violet); border-radius:99px; transition:width .5s ease; }
.bar-count { color:var(--text-muted); width:14px; text-align:right; }

/* REVIEW CARDS */
.review-card { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:13px; margin-bottom:10px; animation:fadeUp .3s ease; }
.review-card .rev-header { display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.rev-avatar { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--violet-dark),var(--violet-light)); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.rev-info { flex:1; }
.rev-user { font-weight:700; font-size:.88rem; }
.rev-date { font-size:.7rem; color:var(--text-muted); }
.rev-stars { font-size:.85rem; color:#f5c518; }
.rev-content-box { background:var(--bg3); border-radius:var(--radius-sm); padding:10px 12px; font-size:.86rem; line-height:1.5; margin-bottom:8px; }
.rev-likes { display:flex; align-items:center; gap:5px; font-size:.78rem; color:var(--text-muted); cursor:pointer; width:fit-content; }
.rev-likes:active { color:var(--violet-light); }

/* REVIEW FORM */
.review-form-container { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:15px; margin-bottom:13px; display:none; }
.review-form-container h3 { font-size:.97rem; font-weight:700; margin-bottom:11px; }
.star-rating { display:flex; gap:7px; font-size:1.6rem; cursor:pointer; margin-bottom:11px; }
textarea { width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text); border-radius:var(--radius-sm); padding:11px; font-size:.88rem; resize:none; height:95px; margin-bottom:11px; font-family:inherit; }
textarea:focus { outline:none; border-color:var(--violet); }
.btn-submit { width:100%; background:var(--violet-dark); color:#fff; border:none; border-radius:var(--radius-sm); padding:12px; font-size:.9rem; font-weight:700; cursor:pointer; transition:opacity .2s; }
.btn-submit:active { opacity:.8; }
#review-submit-msg { margin-top:8px; color:var(--violet-light); font-size:.83rem; text-align:center; }
.reviews-cta { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:16px; text-align:center; margin-top:13px; }
.reviews-cta p { font-size:.85rem; color:var(--text-muted); margin-bottom:11px; }

/* TUTOS */
.tuto-card { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:11px; display:flex; align-items:center; gap:12px; padding:13px; cursor:pointer; transition:border-color .2s; animation:fadeUp .3s ease; }
.tuto-card:active { border-color:var(--violet); }
.tuto-thumb { width:70px; height:70px; border-radius:10px; object-fit:cover; flex-shrink:0; background:var(--bg3); display:flex; align-items:center; justify-content:center; font-size:1.8rem; overflow:hidden; }
.tuto-thumb img { width:100%; height:100%; object-fit:cover; }
.tuto-body { flex:1; min-width:0; }
.tuto-title { font-size:.92rem; font-weight:700; margin-bottom:5px; }
.tuto-preview { font-size:.78rem; color:var(--text-muted); margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tuto-footer { display:flex; align-items:center; justify-content:space-between; }
.tuto-date { font-size:.7rem; color:var(--text-muted); }
.tuto-voir { font-size:.78rem; color:var(--violet-light); font-weight:600; }

/* TUTO DETAIL */
#tuto-detail { display:none; }
#tuto-detail.active { display:block; padding:0 0 80px; animation:fadeUp .25s ease; }
.tuto-detail-img { width:100%; max-height:260px; object-fit:cover; margin-bottom:15px; }
.tuto-detail-body { padding:0 13px; }
.tuto-detail-title { font-size:1.3rem; font-weight:800; margin-bottom:5px; }
.tuto-detail-date { font-size:.73rem; color:var(--text-muted); margin-bottom:15px; }
.tuto-detail-content { font-size:.9rem; line-height:1.75; color:#ccc; white-space:pre-wrap; }
.tuto-detail-images { margin-top:15px; display:flex; flex-direction:column; gap:9px; }
.tuto-detail-images img { width:100%; border-radius:var(--radius-sm); }

/* INFOS */
.info-section { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden; }
.info-section-header { display:flex; align-items:center; gap:10px; padding:13px 14px; border-bottom:1px solid var(--border); }
.info-section-icon { width:36px; height:36px; border-radius:9px; background:rgba(155,89,245,.15); display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.info-section-title { font-weight:700; font-size:.97rem; }
.info-row-item { display:flex; align-items:flex-start; justify-content:space-between; padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.04); gap:10px; }
.info-row-item:last-child { border-bottom:none; }
.info-row-left { font-size:.83rem; color:var(--text-muted); flex-shrink:0; }
.info-row-right { font-size:.83rem; font-weight:600; text-align:right; line-height:1.5; }
.how-to-list { display:flex; flex-direction:column; gap:6px; padding:10px 14px 4px; }
.how-to-item { display:flex; align-items:center; gap:10px; background:var(--bg3); border-radius:var(--radius-sm); padding:9px 12px; font-size:.84rem; font-weight:500; }
.how-to-dot { width:10px; height:10px; border-radius:50%; background:var(--violet); flex-shrink:0; }
.warning-box { margin:10px 14px 13px; background:var(--warning); border:1px solid var(--warning-border); border-radius:var(--radius-sm); padding:10px 13px; font-size:.82rem; color:#e0a060; line-height:1.5; }
.cmd-label { padding:10px 14px 0; font-size:.83rem; color:var(--text-muted); }
.zone-card { padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.04); }
.zone-card:last-child { border-bottom:none; }
.zone-name { font-size:.83rem; color:var(--text-muted); margin-bottom:3px; display:flex; align-items:center; justify-content:space-between; }
.zone-price { font-size:.97rem; font-weight:700; color:var(--violet-light); }
.zone-price span { color:var(--text-muted); font-weight:400; font-size:.82rem; }
.badge-available { background:rgba(155,89,245,.2); color:var(--violet-light); font-size:.7rem; padding:2px 9px; border-radius:99px; border:1px solid var(--border); font-weight:600; }

/* CONTACT */
.contact-card { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:12px; cursor:pointer; transition:border-color .2s; position:relative; }
.contact-card:active { border-color:var(--violet); }
.contact-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.contact-card-icon { width:44px; height:44px; border-radius:11px; background:var(--bg3); display:flex; align-items:center; justify-content:center; font-size:1.3rem; }
.contact-card-dots { display:flex; flex-direction:column; gap:3px; }
.contact-card-dots span { width:4px; height:4px; border-radius:50%; background:var(--text-muted); display:block; }
.contact-card-ext { font-size:1.1rem; color:var(--violet-light); }
.contact-card-title { font-size:1.1rem; font-weight:800; margin-bottom:4px; }
.contact-card-desc { font-size:.82rem; color:var(--violet-light); }
.contact-card-copy { position:absolute; bottom:14px; right:14px; background:var(--bg3); border-radius:7px; padding:6px 9px; font-size:.85rem; cursor:pointer; }
.contact-card-copy:active { background:var(--violet-dark); }

/* UTILS */
.empty-state { text-align:center; padding:40px 20px; color:var(--text-muted); font-size:.88rem; }
.empty-state .empty-icon { font-size:2.5rem; margin-bottom:9px; }

/* ── GALERIE FLÈCHES & DOTS ─────────────────────────── */
.gallery-wrapper { position:relative; margin-bottom:15px; background:var(--bg3); }
.gallery-main { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
video.gallery-main { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:#000; }

.gallery-arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,0.35); color:#fff;
  border:none; border-radius:50%;
  width:40px; height:40px; font-size:1.5rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:10;
  backdrop-filter:blur(4px);
  transition:background .2s;
  padding:0; line-height:1;
}
.gallery-arrow:active { background:rgba(155,89,245,0.5); }
.gallery-arrow.left  { left:10px; }
.gallery-arrow.right { right:10px; }

.gallery-dots {
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; z-index:10;
}
.gallery-dot {
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,0.4); cursor:pointer;
  transition:background .2s, transform .2s;
}
.gallery-dot.active { background:#fff; transform:scale(1.3); }

/* ── BOUTON RETOUR FLOTTANT ─────────────────────────── */
.floating-back {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 200;
  height: 36px;
  padding: 0 14px;
  border-radius: 20px;
  background: rgba(20,20,28,0.75);
  border: 1.5px solid rgba(255,255,255,0.18);
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  transition: background .2s, transform .2s;
  letter-spacing: .2px;
}
.floating-back:active { transform: scale(.96); background: rgba(124,58,237,0.6); }

/* ── GALERIE RESPONSIVE ─────────────────────────────── */
.gallery-wrapper {
  position: relative;
  width: 100%;
  background: #000;
}
.gallery-main {
  width: 100%;
  max-height: 75vw;
  object-fit: cover;
  display: block;
}
video.gallery-main {
  width: 100%;
  max-height: 75vw;
  object-fit: contain;
  background: #000;
  display: block;
}

/* ── LIGHTBOX ───────────────────────────────────────── */
#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.95);
  z-index: 9000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#lightbox.open { display: flex; }
#lightbox img, #lightbox video {
  max-width: 100vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
}
#lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Badge haut de carte */
.card-badge-top {
  position:absolute; top:10px; left:10px; z-index:3;
  background:rgba(0,0,0,.6); color:#fff;
  font-size:.62rem; font-weight:800;
  padding:4px 10px; border-radius:99px;
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(6px);
  letter-spacing:.5px;
  max-width:calc(100% - 20px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ── PLEIN ÉCRAN & SAFE AREA ─────────────────────────── */
html {
  height: 100%;
  background: #0d0d0f;
}
body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
#main {
  padding-top: calc(84px + env(safe-area-inset-top));
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}
#bottom-nav {
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(68px + env(safe-area-inset-bottom));
}
#header {
  padding-top: env(safe-area-inset-top);
  height: calc(80px + env(safe-area-inset-top));
}

/* Cartes produits - prennent tout l'espace disponible */
.products-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-bottom: 8px;
}

/* Images non chargées - fond plus sombre */
.no-img {
  background: #111114;
}

/* Fix bouton retour - toujours visible */
#product-detail, #tuto-detail {
  position: relative;
}
.floating-back {
  position: fixed !important;
  top: calc(14px + env(safe-area-inset-top));
  left: 14px;
  z-index: 500 !important;
}