:root {
  --bg: #0a0a0b;
  --card: #16171a;
  --glass: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.10);
  --text: #ffffff;
  --muted: #bfbfc7;
  --accent: #ffffff;
  --gold1: #f1c40f;
  --gold2: #b8860b;
  --shadow: rgba(0, 0, 0, 0.40);
  --radius: 18px;
}

/* Base */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial;
}
.bg {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  /* espace pour la nav-bot sur mobile + encoche */
  padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
}

/* Auras */
.bg-auras { position: fixed; inset: 0; pointer-events: none; z-index: -1; }
.bg-auras::before {
  content: "";
  position: absolute; left: 50%; transform: translateX(-50%);
  top: -120px; width: 90vw; max-width: 960px; height: 280px;
  border-radius: 999px; filter: blur(80px);
  background: linear-gradient(
    90deg,
    rgba(255, 215, 0, 0.22),
    rgba(16, 185, 129, 0.12),
    rgba(217, 70, 239, 0.22)
  );
}
.bg-auras::after {
  content: "";
  position: absolute; right: 0; bottom: 0; width: 280px; height: 280px;
  border-radius: 999px; filter: blur(80px); background: rgba(217, 70, 239, 0.16);
}

/* Utils manquants */
.muted { color: var(--muted); }
.flex-1 { flex: 1; }


/* Header */
.header {
  position: sticky; top: 0; z-index: 30;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
}

.brand { display: flex; align-items: center; gap: 10px; background: none; border: 0; color: inherit; cursor: pointer; }
.brand-logo {
  width: 36px; height: 36px; border-radius: 14px;
  background: linear-gradient(135deg, #ffd54b, #b8860b);
  display: grid; place-items: center; color: #000; font-weight: 800; font-size: 12px;
}
.brand-title { font-weight: 700; line-height: 1; }
.brand-sub { font-size: 11px; color: var(--muted); }

/* Buttons */
.btn { background: var(--accent); color: #000; border-radius: 14px; border: 0; padding: 8px 12px; font-weight: 600; cursor: pointer; }
/* boutons désactivés */
.btn:disabled{ opacity:.5; cursor:not-allowed; }

a.btn { text-decoration: none; }
.btn { display: inline-flex; align-items: center; gap: 8px; }
.btn.ghost { background: transparent; color: #fff; border: 1px solid var(--border); }

.icon-btn {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 12px; border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer;
}

/* Search */
.search-wrap {
  position: relative;
  padding: 0 16px 12px;
  margin-top: 8px;        /* ← ajoute de l’air sous le header */
}


/* on a supprimé le span : on masque au cas où */
.search-ico { display: none !important; }

.input {
  width: 100%;
  height: 44px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  padding: 0 12px;              /* ← plus d’icône à gauche */
}
.input::placeholder { color: #a6a6b3; }


/* ====== VARIABLES MINIMALES (fallback) ====== */
:root{
  --color-text:#e5e7eb; --color-text-secondary:#a3aab8;
  --color-charcoal-700:#1f2121; --color-charcoal-800:#262828;
  --showroom-gold:#ffd54b; --showroom-highlight:#1FB8CD; --showroom-dark:#0a0a0b;
}

/* ====== SHOWROOM SECTION ====== */
.showroom-section{
  position:relative;
  background:linear-gradient(135deg,var(--color-charcoal-700) 0%,var(--color-charcoal-800) 50%,var(--showroom-dark) 100%);
  overflow:visible; margin-bottom:24px; display:flex; align-items:center; justify-content:center;
}
@media (max-width:768px){
  .showroom-section{height:65vh;min-height:350px;max-height:500px;padding:16px;}
  .showroom-container{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;}
  .showroom-stage{position:relative;width:100%;height:48%;display:flex;justify-content:center;align-items:center;z-index:3;margin-bottom:12px;}
  .product-showcase{position:relative;width:100%;height:100%;perspective:1000px;display:flex;justify-content:center;align-items:center;}
  .showroom-info{position:relative;text-align:center;z-index:4;max-width:100%;padding:0 8px;}
  .showroom-info .product-title{font-size:22px;margin-bottom:8px;}
  .showroom-info .current-price{font-size:20px;}
  .showroom-controls{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;z-index:4;}
}
@media (min-width:769px) and (max-width:1024px){
  .showroom-section{height:55vh;min-height:380px;max-height:550px;padding:20px;}
  .showroom-container{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;}
  .showroom-stage{position:relative;width:100%;height:54%;display:flex;justify-content:center;align-items:center;z-index:3;margin-bottom:16px;}
  .product-showcase{position:relative;width:100%;height:100%;perspective:1000px;display:flex;justify-content:center;align-items:center;}
  .showroom-info{position:relative;text-align:center;z-index:4;max-width:90%;}
  .showroom-controls{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:16px;z-index:4;}
}
@media (min-width:1025px){
  .showroom-section{height:50vh;min-height:400px;max-height:600px;padding:24px;}
  .showroom-container{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:1200px;margin:0 auto;}
  .showroom-stage{position:relative;width:100%;height:62%;display:flex;justify-content:center;align-items:center;z-index:3;margin-bottom:20px;}
  .product-showcase{position:relative;width:100%;height:100%;perspective:1000px;display:flex;justify-content:center;align-items:center;}
  .showroom-info{position:relative;text-align:center;z-index:4;max-width:600px;}
  .showroom-controls{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:16px;z-index:4;}
}

/* Particules */
.particles-container{position:absolute;inset:0;pointer-events:none;z-index:1;}
.particle{position:absolute;width:3px;height:3px;background:var(--showroom-gold);border-radius:50%;opacity:.8;animation:particleFloat 3s infinite ease-in-out;}
@keyframes particleFloat{0%,100%{transform:translateY(0) scale(1);opacity:.8}50%{transform:translateY(-20px) scale(1.2);opacity:1}}

/* Lumières */
.lighting-container{position:absolute;inset:0;pointer-events:none;z-index:2;}
.spotlight{position:absolute;width:300px;height:300px;background:radial-gradient(circle, rgba(255,213,75,.3) 0%, rgba(255,213,75,.1) 40%, transparent 70%);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);transition:all .5s cubic-bezier(.16,1,.3,1);animation:spotlightPulse 4s infinite ease-in-out;}
@keyframes spotlightPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.8}50%{transform:translate(-50%,-50%) scale(1.1);opacity:1}}
.ambient-light{position:absolute;inset:0;background:radial-gradient(ellipse at center, rgba(31,184,205,.1) 0%, transparent 50%);}

/* States & anims produits */
.product-item{
  position:absolute; inset:0; display:flex; justify-content:center; align-items:flex-start;
  opacity:0; transform:scale(.8) rotateY(90deg);
  transition:all .5s cubic-bezier(.68,-.55,.265,1.55);
}
.product-item.active{opacity:1;transform:scale(1) rotateY(0deg);}
.product-item.entering{animation:productEnter 1s cubic-bezier(.68,-.55,.265,1.55) forwards;}
.product-item.leaving{animation:productLeave .8s cubic-bezier(.16,1,.3,1) forwards;}
@keyframes productEnter{0%{opacity:0;transform:scale(.5) rotateY(180deg) translateY(50px)}50%{opacity:.7;transform:scale(1.1) rotateY(45deg) translateY(-10px)}100%{opacity:1;transform:scale(1) rotateY(0) translateY(0)}}
@keyframes productLeave{0%{opacity:1;transform:scale(1) rotateY(0)}100%{opacity:0;transform:scale(.8) rotateY(-90deg) translateY(-30px)}}
@keyframes productHover{
  0%,100%{ transform: translateZ(60px) translateY(0) rotateZ(0); }
  50%    { transform: translateZ(60px) translateY(-10px) rotateZ(2deg); }
}
/* Infos */
.product-category{font-size:12px;color:var(--showroom-gold);font-weight:500;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;opacity:0;transform:translateY(20px);animation:fadeInUp .6s cubic-bezier(.16,1,.3,1) forwards;}
.product-title{font-size:28px;font-weight:700;color:var(--color-text);margin-bottom:12px;opacity:0;transform:translateY(20px);animation:fadeInUp .8s cubic-bezier(.16,1,.3,1) .2s forwards;}
.product-highlights{font-size:14px;color:var(--color-text-secondary);margin-bottom:16px;opacity:0;transform:translateY(20px);animation:fadeInUp 1s cubic-bezier(.16,1,.3,1) .4s forwards;}
.product-pricing{margin-bottom:20px;opacity:0;transform:translateY(20px);animation:fadeInUp 1.2s cubic-bezier(.16,1,.3,1) .6s forwards;}
@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}
.current-price{font-size:24px;font-weight:800;color:var(--showroom-gold);margin-right:8px;}
.original-price{font-size:16px;color:var(--color-text-secondary);text-decoration:line-through;margin-right:8px;}
.discount-badge{background:#ff5459;color:#fff;font-size:12px;padding:4px 8px;border-radius:999px;font-weight:700}

/* CTA */
.spectacle-btn{position:relative;background:linear-gradient(135deg,var(--showroom-highlight),#32b8c6);padding:16px 32px;border-radius:999px;font-size:16px;font-weight:700;color:#fff;border:0;cursor:pointer;overflow:hidden;transition:.25s cubic-bezier(.16,1,.3,1);opacity:0;animation:fadeInUp 1.4s cubic-bezier(.16,1,.3,1) .8s forwards;}
.spectacle-btn::before{content:'';position:absolute;inset:0;left:-100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transition:left .5s}
.spectacle-btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 15px 40px rgba(31,184,205,.4)}
.spectacle-btn:hover::before{left:100%}
.spectacle-btn span{margin-right:8px}

/* Progress & indicateurs */
.progress-bar{width:200px;height:4px;background:rgba(255,255,255,.2);border-radius:999px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--showroom-gold),var(--showroom-highlight));border-radius:999px;width:0%;transition:width linear}
.product-indicators{display:flex;gap:8px}
.indicator{width:8px;height:8px;background:rgba(255,255,255,.3);border-radius:50%;cursor:pointer;transition:.25s cubic-bezier(.16,1,.3,1)}
.indicator.active{background:var(--showroom-gold);transform:scale(1.3)}

/* --- SHOWROOM overrides --- */
.showroom-info{
  position: relative;
  z-index: 5;                         /* > .showroom-stage (3) */
  text-shadow: 0 2px 10px rgba(0,0,0,.55); /* meilleure lisibilité */
}
.showroom-stage{ z-index: 3; overflow: visible; }
/* ancre l’image en haut du stage (remplace les align-items:center des MQ) */
.product-showcase{ align-items: flex-start; }


/* place la barre de temps et les points SOUS le bouton */
.showroom-info .showroom-controls{
  position: static;                   /* annule les positions absolues des MQ */
  transform: none;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.product-showcase{ transform-style: preserve-3d; }
/* optionnel : évite que l'image capte les clics au-dessus du texte/bouton */
.product-image{ pointer-events: none; }

/* ——— NORMALISATION IMAGE SHOWROOM ———
   Taille uniforme: l'image occupe 100% de la hauteur du stage (sans dépasser) */
.product-showcase{ height: 100%; }
.product-image{
  height: 100%;
  width: auto;
  max-width: 88%;
  object-fit: contain;
  border-radius: 12px;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.5));
  animation: productHover 3s infinite ease-in-out;
}

/* ——— CONTENANT SHOWROOM ———
   On bloque tout dépassement (image, bouton, barre) à l'intérieur de la section */
.showroom-section{
  overflow: visible;            /* ← autorise le débordement en haut */
  padding-bottom: 64px;         /* réserve pour bouton + barre */
}
@media (max-width:768px){
  .showroom-section{ padding-bottom: 56px; }
}

/* ——— CONTROLES EN BAS ——— */
.showroom-controls{ bottom: 16px; }
@media (min-width:1025px){
  .showroom-controls{ bottom: 20px; }
}

/* La barre ne dépasse jamais en largeur */
.progress-bar{ width: min(260px, 80vw); }

/* Image plus grande et qui mord légèrement en haut */
.product-showcase{ height: 100%; overflow: visible; }

.product-image{
  width: auto;
  object-fit: contain;
    object-position: top center;    /* +++ AJOUTE */
  transform-origin: top center;   /* +++ AJOUTE */
  border-radius: 12px;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.5));
  animation: productHover 3s infinite ease-in-out;
  pointer-events: none;
}

/* MOBILE */
@media (max-width:768px){
  .product-image{
    height: 190%;       /* ÉTAIT ~112% → plus grand */
    max-width: 96%;
    margin-top: -6px;   /* +++ AJOUTE : léger dépassement haut */
    max-height: clamp(280px, 48vh, 520px);
  }
}

/* TABLETTE */
@media (min-width:769px) and (max-width:1024px){
  .product-image{
    height: 155%;       /* ÉTAIT ~122% */
    max-width: 94%;
    margin-top: -10px;  /* +++ AJOUTE */
    max-height: clamp(360px, 54vh, 600px);
  }
}

/* DESKTOP */
@media (min-width:1025px){
  .product-image{
    height: 590%;       /* ÉTAIT 236% → plus raisonnable mais grand */
    max-width: 92%;
    margin-top: -12px;  /* +++ AJOUTE */
    max-height: clamp(180px, 60vh, 260px);
  }
}










/* Petites améliorations d’UI du store */
.card{
  transform: translateY(0); transition: transform .25s ease, box-shadow .25s ease;
}
@media (hover:hover){
  .card:hover{ transform: translateY(-4px); box-shadow: 0 14px 40px var(--shadow); }
}






/* Feature bar */
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 12px 16px; }
.feature {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 14px; padding: 8px 12px; color: #eee; font-size: 12px;
}

/* taille/alignement des SVG dans les features */
.feature svg{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  opacity: .95;
}




/* Chips */
.chips {
  display: flex;
  gap: 8px;
  /* on garde le scroll horizontal, mais on libère la hauteur
     pour que la liste déroulante puisse dépasser */
  overflow-x: auto;
  overflow-y: visible;
  padding: 8px 16px 4px;
  align-items: center;
}
.chip {
  flex: 0 0 auto; border: 1px solid var(--border); border-radius: 18px;
  padding: 8px 12px; background: rgba(255, 255, 255, 0.06); color: #fff; font-size: 14px; cursor: pointer;
}
.chip.active { background: #fff; color: #000; border-color: #fff; }

/* Grid produits */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 16px 100px; }
@media (min-width: 720px){
  .grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px){
  .grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1440px){
  .grid{ grid-template-columns: repeat(5, 1fr); }
}
.showroom-section{ margin: 6px 0 10px; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: 0 6px 24px var(--shadow); }
.card-img { position: relative; aspect-ratio: 4 / 3; }
.card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.badge-chip {
  position: absolute; left: 8px; top: 8px; font-size: 11px; padding: 4px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.10); color: #fff;
}
.fav-btn { position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); border: 0; color: #fff; cursor: pointer; }
.fav-btn.active { background: rgba(236, 72, 153, 0.20); color: #f472b6; }
.card-body { padding: 10px; }
.card-title { font-weight: 600; font-size: 14px; margin: 0 0 4px; }
.card-meta { display: flex; gap: 8px; align-items: center; color: #d1a21d; font-size: 12px; margin-bottom: 6px; }
.price-add { display: flex; justify-content: space-between; align-items: center; }
.price { font-weight: 700; }
.add-btn { background: #fff; color: #000; border-radius: 12px; border: 0; height: 32px; padding: 0 10px; cursor: pointer; }

/* Bottom nav */
.nav-bottom {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  max-width: 520px;

  display: grid;
  grid-template-columns: repeat(4, 1fr);

  background: rgba(0, 0, 0, 0.40);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 18px;
  box-shadow: 0 10px 30px var(--shadow);
  z-index: 40;
  padding: 10px 12px;
  min-height: 66px;
  overflow: visible;
  /* remonte au-dessus de l’encoche */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
}


.nav-item {
  position: relative;
  background: transparent;
  border: 0;
  color: #fff;
  padding: 14px 0 12px;
  font-size: 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* Icônes de la nav (SVG inline) */
.nav-item .nav-ico{
  width: 24px;
  height: 24px;
  display: block;
  opacity: .95;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));
}
.nav-item .nav-ico:hover{ opacity:1; }


.badge {
  position: absolute; top: 4px; right: 18px;
  min-width: 18px; height: 18px;
  background: #fff; color: #000;
  border-radius: 999px; font-size: 11px;
  display: grid; place-items: center; padding: 0 4px;
}

/* Drawers */
.backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.40);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 45;
}

.drawer {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 0; width: 96%; max-width: 520px;
  background: rgba(22, 23, 26, 0.96);
  border: 1px solid var(--border);
  border-radius: 18px; box-shadow: 0 10px 30px var(--shadow); z-index: 50;
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
.drawer-title { font-weight: 600; }
.drawer-body { padding: 0 16px 16px; max-height: 48vh; overflow: auto; }
#drawerCheckout .drawer-body .row { margin-bottom: 10px; }
#drawerCheckout .drawer-body .input { margin-bottom: 10px; }
.drawer-foot { border-top: 1px solid var(--border); padding: 12px 16px; }
.drawer-actions { display: flex; gap: 8px; margin-top: 10px; }
.total { color: #ddd; }

/* Cart rows */
.cart-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.cart-row img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.cart-row .name { font-size: 14px; }
.cart-row .meta { font-size: 12px; color: #a8a8b3; }
.qty-box { display: flex; align-items: center; gap: 6px; }
.qty-box .icon-btn { width: 28px; height: 28px; }

/* Toast & Auth */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 96px;
  background: #fff; color: #000; border-radius: 12px; padding: 10px 14px;
  font-weight: 600; box-shadow: 0 10px 30px var(--shadow); z-index: 60;
  /* garde visible au-dessus de la nav + encoche */
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
.auth-wrap { max-width: 520px; margin: 0 auto; padding: 20px; }
.card-auth { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border); border-radius: 18px; padding: 16px; }
.card-auth h2 { margin: 0 0 10px; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; }




/* ===== Styles pour la nouvelle page Auth ===== */
.auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.auth-tab {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--muted);
  padding: 10px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-weight: 600;
}
.auth-tab.active {
  color: var(--text);
  border-bottom-color: var(--gold1);
}

/* ------ Fix admin: inputs blancs/texte blanc ------ */
html, body { color-scheme: dark; } /* aide le navigateur pour les champs par défaut */

input.form-input,
select.form-input,
textarea.form-input,
.form-input {                 /* utile car tu as aussi .form-input sur un <div> (tags) */
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* placeholders lisibles */
input.form-input::placeholder,
textarea.form-input::placeholder { color: #a6a6b3; }

/* focus propre sur fond sombre */
input.form-input:focus,
select.form-input:focus,
textarea.form-input:focus {
  outline: none;
  border-color: #8a8a95;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.07);
}

/* champs numériques gardent le même look */
input[type="number"].form-input {
  -moz-appearance: textfield;
}
input[type="number"].form-input::-webkit-outer-spin-button,
input[type="number"].form-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}


.variant-thumb{
  width: 44px; height: 44px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  display: grid; place-items: center;
  overflow: hidden;
}
.variant-thumb img{ width: 100%; height: 100%; object-fit: cover; display:block; }


/* ===== Product Modal ===== */
.pm-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:60;
}
.pm-modal{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:61;
  padding:16px;
}
.pm-modal .pm-grid{
  width:min(1100px,100%); max-height:90vh; overflow:auto;
  background:rgba(31,41,55,.6); backdrop-filter:blur(14px);
  border:1px solid rgba(75,85,99,.5); border-radius:16px; padding:20px;
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
@media (max-width: 820px){
    .pm-modal .pm-grid{ grid-template-columns:1fr; }
    .pc-final{ grid-template-columns: repeat(3,1fr); inset:8% 6% 16% 6%; }
    :root{ --pc-tilt-x: 12deg; }          /* (pas de base-depth négatif) */
    .pc-base{ bottom: calc(var(--base-h) * -0.48); }

}
.pm-hero{ aspect-ratio:1/1; background:#0f172a; border-radius:12px; overflow:hidden; }
.pm-slider{ height:100%; width:100%; display:flex; transition:transform .3s ease; }
.pm-slider img{ width:100%; height:100%; object-fit:contain; flex:0 0 100%; user-select:none; -webkit-user-drag:none; }
.pm-thumbs{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:10px; }
.pm-thumbs img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; opacity:.7; cursor:pointer; border:2px solid transparent; }
.pm-thumbs img.active{ opacity:1; border-color:#4f46e5; }

.pm-cat{ display:inline-block; font-size:12px; background:#4f46e5; color:#fff; padding:4px 8px; border-radius:6px; }
.pm-name{ font-size:28px; font-weight:700; margin:8px 0 4px; }
.pm-line{ display:flex; align-items:center; gap:12px; color:#d1d5db; }
.pm-stars{ letter-spacing:2px; }
.pm-stock{ font-size:14px; }
.pm-price{ font-size:28px; font-weight:800; display:flex; gap:10px; align-items:baseline; }
.pm-price s{ color:#9ca3af; font-weight:500; font-size:16px; }
.pm-desc{ color:#cbd5e1; font-size:14px; line-height:1.6; margin-top:8px; }

.pm-actions{ display:flex; gap:12px; align-items:center; margin-top:16px; }
.pm-qty{ display:flex; align-items:center; gap:12px; border:1px solid rgba(148,163,184,.5); border-radius:10px; padding:6px 10px; }
/* scoped modale */
.pm-modal .icon-btn{ background:transparent; border:1px solid rgba(148,163,184,.4);
  border-radius:10px; padding:4px 10px; color:#e5e7eb; cursor:pointer; }
.pm-modal .icon-btn:hover{ border-color:#fff; }


/* Forcer le respect de l’attribut hidden */
[hidden] { display: none !important; }
.pm-modal[hidden], .pm-backdrop[hidden] { display: none !important; }



/* 2) Bouton de fermeture compatible mobile + encoche */
.pm-close{
  position: fixed; /* au lieu de absolute */
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(17,24,39,.65);
  color: #fff; font-size: 20px;
  z-index: 100; /* au-dessus du contenu de la modale */
}

/* 3) Un peu de marge intérieure pour éviter que le contenu passe sous le bouton */
@supports (padding: env(safe-area-inset-top)) {
  .pm-modal{
    padding-top: calc(16px + env(safe-area-inset-top));
    padding-right: calc(16px + env(safe-area-inset-right));
    padding-left: calc(16px + env(safe-area-inset-left));
  }
}


.pm-variants{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.variant-btn{
  border:1px solid var(--border); background:rgba(255,255,255,.06);
  color:#fff; border-radius:10px; padding:6px 10px; cursor:pointer; font-weight:600;
}
.variant-btn.active{ outline:2px solid #ffd54b; }

@media (max-width: 640px){
  .pc-item{ width:100px; height:128px; }
  .btn.cta-inside{ bottom: 10px; font-size: 14px; padding: 8px 14px; }
  .pc-base{ bottom: calc(var(--base-h) * -0.56); }
  .pc-final{ grid-template-columns: repeat(2,1fr); inset:8% 8% 16% 8%; }
  :root{ --amp: .52; }
  .pc-laptop{ aspect-ratio: 16 / 10; }
  .pc-card{ width:100px; height:128px; }
    .chips{ flex-wrap: wrap; overflow-x: visible; }          /* autorise une 2e ligne */
  .sort-select{
    order: 999;                                            /* en dernier */
    flex: 0 0 100%;                                        /* prend la ligne */
    margin-left: 0;
    margin-top: 8px;
    position: static;                                      /* pas de sticky en mobile */
    right: auto;
    z-index: auto;
  }
}
@media (max-width: 420px){
  :root{ --amp: .44; }                 /* reprend la main sur l’amplitude */
  .pc-laptop{ aspect-ratio: 3 / 2; }   /* reprend la main sur le ratio */
  .pc-item{ width:96px; height:120px; }
  .btn.cta-inside{ bottom: 8px; font-size: 13px; padding: 7px 12px; }
  .pc-base{ bottom: calc(var(--base-h) * -0.54); }
  .pc-card{ width:96px;  height:120px; }
}

/* ===== User avatar + menu ===== */
.user-area { position: relative; display: flex; align-items: center; gap: 8px; }
.avatar-btn{
  width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.08) center/cover no-repeat;
  color:#fff; font-weight:700; cursor:pointer;
}
.user-menu{
  position: absolute; top: 46px; right: 0; min-width: 180px;
  background: rgba(22,23,26,.98);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 10px 30px var(--shadow);
}
.user-menu a, .user-menu button{
  display:block; width:100%; text-align:left;
  background:transparent; border:0; color:#fff;
  padding:10px 12px; cursor:pointer; text-decoration:none;
}
.user-menu a:hover, .user-menu button:hover{ background: rgba(255,255,255,.06); }

/* ===== Select de tri (à côté des chips) ===== */
.sort-select{
  appearance:none; -webkit-appearance:none;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 18px;
  color: #fff; padding: 8px 28px 8px 12px; font-size: 14px;
  /* toujours à droite, visible au-dessus des chips */
  margin-left: auto;
  position: sticky;
  right: 16px;
  z-index: 20;
}
.sort-select:focus{ outline:none; border-color:#fff; }

/* Fix global : options invisibles (texte blanc) dans les <select> */
select option,
select optgroup{
  color: #000 !important;
  background: #fff !important;
}

/* (facultatif mais utile) garder le contraste quand un item est surligné */
select option:checked{
  color: HighlightText;
  background: Highlight;
}

.hidden { display: none !important; }

/* PayPal: garantit une hauteur minimale visible */
#ppBtnsPaypal iframe { min-height: 45px; display: block; }


/* Cartes 3D + reflet */
.tilt-3d{
  transform-style: preserve-3d;
  transition: transform .15s ease, box-shadow .2s ease;
  will-change: transform;
}
.tilt-3d:hover{ box-shadow: 0 14px 40px rgba(0,0,0,.35); }
.tilt-shine{
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(600px 120px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.08), transparent 60%);
  opacity:0; transition:opacity .15s ease; border-radius: inherit;
}
.tilt-3d:hover .tilt-shine{ opacity:1; }