/* ============================================================
   PRESENT — couche design premium (Telegram Mini App)
   Chargée APRÈS app.min.css → gagne sur la cascade.
   Animations 100% GPU (opacity/transform). Respecte reduced-motion.
   ============================================================ */

:root{
  --pr-bg:        #0a0713;
  --pr-bg-2:      #100a1e;
  --pr-surface:   #17102a;
  --pr-surface-2: #1e1636;
  --pr-line:      rgba(255,255,255,.08);
  --pr-line-2:    rgba(255,255,255,.05);
  --pr-text:      #eef3fb;
  --pr-muted:     #93a3bd;
  --pr-accent:    #a855f7;
  --pr-accent-2:  #7c3aed;
  --pr-accent-3:  #22d3ee;
  --pr-accent-rgb:  168,85,247;   /* piloté par le thème (cp_theme_css) */
  --pr-neon-rgb:    192,132,252;  /* piloté par le thème (cp_theme_css) */
  --pr-accent2-rgb: 124,58,237;   /* piloté par le thème (cp_theme_css) */
  --pr-grad:      linear-gradient(135deg, #a855f7 0%, #9333ea 55%, #c084fc 100%);
  --pr-grad-soft: linear-gradient(135deg, rgba(var(--pr-accent-rgb),.16), rgba(var(--pr-neon-rgb),.14));
  --pr-glow:      0 10px 40px rgba(var(--pr-accent-rgb),.35);
  --pr-radius:    20px;
  --pr-ease:      cubic-bezier(.22,.61,.36,1);
  --pr-spring:    cubic-bezier(.2,.9,.25,1.12);
}

/* ---------- Fond aurora subtil (GPU, lent, pausable) ---------- */
body{
  background:
    radial-gradient(1100px 640px at 50% -160px, rgba(var(--pr-accent-rgb),.20), transparent 60%),
    radial-gradient(760px 620px at 100% 12%, rgba(var(--pr-neon-rgb),.14), transparent 55%),
    linear-gradient(180deg, var(--pr-bg) 0%, var(--pr-bg-2) 55%, var(--pr-bg) 100%) !important;
  color: var(--pr-text);
}
.pr-aurora{
  position: fixed; inset: -25%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(var(--pr-accent-rgb),.22), transparent 70%) 18% 22%/48vw 48vw no-repeat,
    radial-gradient(closest-side, rgba(var(--pr-neon-rgb),.18), transparent 70%) 84% 12%/44vw 44vw no-repeat,
    radial-gradient(closest-side, rgba(var(--pr-neon-rgb),.12), transparent 70%) 60% 96%/50vw 50vw no-repeat;
  filter: blur(28px);
  opacity: .9;
  animation: prAurora 22s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes prAurora{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2.5%,-2%,0) scale(1.06); }
  100% { transform: translate3d(-2%,2.5%,0) scale(1.02); }
}
/* Le contenu passe au-dessus de l'aurora */
.appbar, .page, .tabs, .sheet, .modal, .toast-stack{ position: relative; z-index: 1; }

/* ---------- App bar ---------- */
.appbar{
  background: linear-gradient(180deg, rgba(9,14,24,.92), rgba(9,14,24,.72)) !important;
  border-bottom: 1px solid var(--pr-line);
}
.appbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(var(--pr-accent-rgb),.6), rgba(var(--pr-neon-rgb),.5), transparent);
  opacity:.8;
}
.brand-logo{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.4), 0 0 0 3px rgba(var(--pr-accent-rgb),.08) !important;
}
.brand-title{
  color:#ffffff; -webkit-text-fill-color:#ffffff;
  letter-spacing:.3px;
}
.icon-btn{
  background: var(--pr-surface-2) !important;
  border: 1px solid var(--pr-line) !important;
  border-radius: 14px !important;
  transition: transform .18s var(--pr-ease), background .18s var(--pr-ease);
}
.icon-btn:active{ transform: scale(.9); }

/* ---------- Logo héro (catalogue) : halo + flottaison douce ---------- */
.catalog-top-logo{ padding: 22px 0 8px; }
.catalog-top-logo-img{
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow:
    0 22px 60px rgba(0,0,0,.55),
    0 0 0 6px rgba(var(--pr-accent-rgb),.06),
    0 0 60px rgba(var(--pr-accent-rgb),.22) !important;
  animation: prFloat 6s ease-in-out infinite;
  will-change: transform;
}
@keyframes prFloat{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(-7px); }
}

/* ---------- Filtres / recherche ---------- */
.chip-btn, .search{
  background: rgba(18,27,44,.82) !important;
  border: 1px solid var(--pr-line) !important;
  border-radius: 999px !important;
  transition: border-color .2s var(--pr-ease), box-shadow .2s var(--pr-ease), transform .15s var(--pr-ease);
}
.chip-btn:active{ transform: scale(.97); }
.search:focus-within{
  border-color: rgba(var(--pr-accent-rgb),.55) !important;
  box-shadow: 0 0 0 4px rgba(var(--pr-accent-rgb),.14) !important;
}
.catalog-note{
  border: 1px solid rgba(var(--pr-accent-rgb),.24) !important;
  background: var(--pr-grad-soft) !important;
  border-radius: 14px !important;
}

/* ---------- Bandeau catégories ---------- */
.cat-pill{
  background: rgba(18,27,44,.82) !important;
  border: 1px solid var(--pr-line) !important;
  transition: transform .16s var(--pr-ease), background .25s var(--pr-ease), border-color .25s var(--pr-ease), color .25s var(--pr-ease);
}
.cat-pill:active{ transform: scale(.94); }
.cat-pill.active{
  background: var(--pr-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(var(--pr-accent-rgb),.34) !important;
}

/* ---------- Grille produits ---------- */
.grid{ gap: 13px !important; padding-top: 12px !important; }

.card{
  position: relative;
  border-radius: var(--pr-radius) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 42%), var(--pr-surface) !important;
  border: 1px solid var(--pr-line) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.34) !important;
  overflow: hidden;
  transition: transform .2s var(--pr-ease), box-shadow .25s var(--pr-ease), border-color .25s var(--pr-ease);
}
.card:active{ transform: scale(.975); box-shadow: 0 4px 14px rgba(0,0,0,.4) !important; }
@media (hover:hover){
  .card:hover{
    transform: translateY(-4px);
    border-color: rgba(var(--pr-accent-rgb),.28) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(var(--pr-accent-rgb),.2) !important;
  }
  .card:hover .card-media{ transform: scale(1.06); }
}

/* Média : scrim dégradé + zoom doux */
.card-media{
  border-radius: 0 !important;
  transition: transform .5s var(--pr-ease) !important;
}
.card::after{
  content:"";
  position:absolute; left:0; right:0;
  top: 44%; bottom: 0;
  background: linear-gradient(180deg, transparent, rgba(6,10,20,.28) 45%, rgba(6,10,20,.72));
  pointer-events:none;
  z-index:1;
}
.card-body{
  position: relative;
  z-index: 2;
  padding: 11px 12px 13px !important;
}
.card-title{
  font-weight: 800 !important;
  letter-spacing: .2px;
  color: #f6f9ff !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}

/* Badge prix "dès X €" — pastille verre en haut à gauche */
.pr-price-badge{
  position:absolute; top:9px; left:9px; z-index:2;
  padding:5px 10px;
  font-size:11.5px; font-weight:900; letter-spacing:.2px;
  color:#eafff4;
  background: linear-gradient(135deg, rgba(29,158,117,.92), rgba(15,110,86,.92));
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}
/* Tag vidéo en haut à droite */
.pr-media-tag{
  position:absolute; top:9px; right:9px; z-index:2;
  padding:4px 9px;
  font-size:11px; font-weight:800;
  color:#fff;
  background: rgba(6,10,20,.62);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
}

/* Fade-in élégant des IMAGES uniquement (les vidéos restent visibles).
   Failsafe JS (present.js) force .pr-loaded si is-loaded n'arrive pas. */
img.card-media{ opacity:0; transition: opacity .45s var(--pr-ease), transform .5s var(--pr-ease) !important; }
img.card-media.is-loaded, img.card-media.pr-loaded{ opacity:1; }
video.card-media{ opacity:1 !important; }

/* Titre de la marque : blanc plein (pas de dégradé → emojis en couleur) */
.brand-title{
  color:#ffffff; -webkit-text-fill-color:#ffffff;
}

/* Vignette douce pour la profondeur (fixe, GPU, 0 repaint) */
.pr-vignette{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(3,6,12,.5) 100%);
}

/* ---------- Scroll-reveal 3D : les cartes se redressent (sûr : visible par défaut) ---------- */
.grid .card{ opacity: 1; transform: none; }
html.pr-reveal .grid{ perspective: 1000px; }
html.pr-reveal .grid .card{
  opacity: 0;
  transform: translateY(22px) rotateX(9deg) scale(.985);
  transform-origin: 50% 100%;
  transition: opacity .5s var(--pr-ease), transform .6s var(--pr-spring);
}
html.pr-reveal .grid .card.pr-in{
  opacity: 1;
  transform: none;
}

/* ============================================================
   SIGNATURE — orbs lumineuses + nav pill + ambiance
   ============================================================ */

/* Orbs flottantes (parallax géré par present.js sur le parent .pr-orbs) */
.pr-orbs{ position: fixed; inset: 0; z-index: 0; pointer-events: none; will-change: transform; }
.pr-orb{
  position: absolute;
  border-radius: 50%;
  filter: blur(34px);
  opacity: .55;
  will-change: transform;
}
.pr-orb.o1{
  width: 46vw; height: 46vw; left: 8%; top: 14%;
  background: radial-gradient(closest-side, rgba(var(--pr-accent-rgb),.55), transparent 72%);
  animation: prOrb1 19s ease-in-out infinite;
}
.pr-orb.o2{
  width: 42vw; height: 42vw; right: 6%; top: 30%;
  background: radial-gradient(closest-side, rgba(var(--pr-neon-rgb),.5), transparent 72%);
  animation: prOrb2 23s ease-in-out infinite;
}
.pr-orb.o3{
  width: 40vw; height: 40vw; left: 30%; bottom: 6%;
  background: radial-gradient(closest-side, rgba(var(--pr-neon-rgb),.4), transparent 72%);
  animation: prOrb3 27s ease-in-out infinite;
}
@keyframes prOrb1{ 0%,100%{ transform: translate3d(0,0,0) scale(1); } 50%{ transform: translate3d(6%,-4%,0) scale(1.12); } }
@keyframes prOrb2{ 0%,100%{ transform: translate3d(0,0,0) scale(1); } 50%{ transform: translate3d(-5%,5%,0) scale(1.1); } }
@keyframes prOrb3{ 0%,100%{ transform: translate3d(0,0,0) scale(1); } 50%{ transform: translate3d(4%,-6%,0) scale(1.14); } }

/* Nav : pastille lumineuse qui pop derrière l'onglet actif + halo d'ambiance */
.tabs{ position: relative; }
.tab.active::before{
  content:"";
  position: absolute;
  inset: 4px 6px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(var(--pr-accent-rgb),.22), rgba(var(--pr-neon-rgb),.14));
  box-shadow: 0 8px 24px rgba(var(--pr-accent-rgb),.28), 0 0 0 1px rgba(var(--pr-accent-rgb),.3) inset;
  z-index: 0;
  animation: prPillPop .45s var(--pr-spring) both;
}
.tab.active .icon, .tab.active span{ position: relative; z-index: 1; }
@keyframes prPillPop{
  0%{ opacity:0; transform: translateY(6px) scale(.8); }
  60%{ opacity:1; }
  100%{ opacity:1; transform: translateY(0) scale(1); }
}
/* Halo d'ambiance sous la barre, aligné à l'onglet actif */
.tabs::after{
  content:"";
  position: absolute; top: -18px; height: 18px;
  left: 8px; right: 8px;
  background: radial-gradient(60% 100% at var(--pr-glow-x, 16%) 100%, rgba(var(--pr-accent-rgb),.28), transparent 70%);
  pointer-events: none;
  transition: background .4s var(--pr-ease);
}

/* ---------- Bottom nav (5 onglets : Menu · Panier · Infos · Canal · Contact) ---------- */
.tabs{
  grid-template-columns: repeat(5, 1fr) !important;
  background: linear-gradient(180deg, rgba(9,13,22,.86), rgba(7,11,20,.97)) !important;
  border-top: 1px solid var(--pr-line);
}
.tabs::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(var(--pr-accent-rgb),.55), rgba(var(--pr-neon-rgb),.4), transparent);
}
.tab{
  border-radius: 14px !important;
  transition: color .2s var(--pr-ease), background .2s var(--pr-ease), transform .15s var(--pr-ease);
}
.tab .icon{ transition: transform .25s var(--pr-spring); }
.tab:active{ transform: scale(.92); }
.tab:active .icon{ transform: scale(.86); }
.tab.active{
  color:#fff !important;
  background: var(--pr-grad-soft) !important;
  border: 1px solid rgba(var(--pr-accent-rgb),.28) !important;
}
.tab.active .icon{ transform: translateY(-2px) scale(1.08); }
.tab.active::after{
  content:""; position:absolute; top:5px; left:32%; right:32%; height:3px; border-radius:3px;
  background: var(--pr-grad);
  box-shadow: 0 0 12px rgba(var(--pr-accent-rgb),.6);
  transform-origin:center;
  animation: prTabIn .4s var(--pr-spring) both;
}
@keyframes prTabIn{ from{ transform: scaleX(0); opacity:0; } to{ transform: scaleX(1); opacity:1; } }
.badge{
  background: var(--pr-grad) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  box-shadow: 0 4px 12px rgba(var(--pr-accent-rgb),.4) !important;
}

/* ---------- Sheets / panneaux ---------- */
.scrim{ background: rgba(4,7,14,.68) !important; }
.panel{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%), #150e28 !important;
  border-top: 1px solid var(--pr-line) !important;
  border-top-left-radius: 24px !important;
  border-top-right-radius: 24px !important;
  box-shadow: 0 -20px 60px rgba(0,0,0,.6) !important;
}
.panel::before{ background: rgba(255,255,255,.22) !important; }
.sheet-links a{
  background: var(--pr-surface-2) !important;
  border: 1px solid var(--pr-line) !important;
  border-radius: 14px !important;
  transition: transform .16s var(--pr-ease), background .2s var(--pr-ease), border-color .2s var(--pr-ease);
}
.sheet-links a:active{ transform: scale(.98); }
.sheet-links a.active{
  border-color: rgba(var(--pr-accent-rgb),.5) !important;
  background: var(--pr-grad-soft) !important;
}

/* ---------- Boutons / CTA ---------- */
.cta{
  position: relative;
  overflow: hidden;
  background: var(--pr-grad) !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: var(--pr-glow) !important;
  letter-spacing: .3px;
  transition: transform .15s var(--pr-ease), box-shadow .2s var(--pr-ease), filter .2s var(--pr-ease);
}
.cta:active{ transform: translateY(1px) scale(.985); box-shadow: 0 6px 18px rgba(var(--pr-accent-rgb),.28) !important; }
/* Balayage lumineux one-shot à l'apparition (pas de boucle) */
.cta::after{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg);
  animation: prShine 2.6s var(--pr-ease) 1 .6s;
}
@keyframes prShine{ 0%{ left:-60%; } 60%,100%{ left:130%; } }

.btn{
  border-radius: 14px !important;
  transition: transform .15s var(--pr-ease), filter .2s var(--pr-ease), background .2s var(--pr-ease);
}
.btn:active{ transform: scale(.97); }
.btn.primary{ background: var(--pr-grad) !important; border:0 !important; box-shadow: var(--pr-glow) !important; }

/* ---------- Prix / chips grammage ---------- */
.chip{
  background: var(--pr-surface-2) !important;
  border: 1px solid var(--pr-line) !important;
  border-radius: 999px !important;
  transition: transform .15s var(--pr-ease), border-color .2s var(--pr-ease), background .2s var(--pr-ease), box-shadow .2s var(--pr-ease);
}
.chip:active{ transform: scale(.95); }
.chip.active{
  border-color: rgba(var(--pr-accent-rgb),.65) !important;
  background: var(--pr-grad-soft) !important;
  box-shadow: 0 0 0 2px rgba(var(--pr-accent-rgb),.18) inset, 0 8px 18px rgba(var(--pr-accent-rgb),.18) !important;
}

/* ---------- Détail : slider ---------- */
.slider{
  border-radius: var(--pr-radius) !important;
  border: 1px solid var(--pr-line) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.5) !important;
}
.slider-btn{
  background: rgba(6,10,20,.55) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  transition: transform .15s var(--pr-ease), background .2s var(--pr-ease);
}
.slider-btn:active{ transform: translateY(-50%) scale(.9); }
.dot{ transition: width .25s var(--pr-spring), background .25s var(--pr-ease); }
.dot.active{ background: var(--pr-accent) !important; width: 22px !important; box-shadow: 0 0 10px rgba(var(--pr-accent-rgb),.6); }

.detail h1{
  color:#ffffff; -webkit-text-fill-color:#ffffff;
}

/* ---------- Info cards ---------- */
.info-card{
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,0) 55%), var(--pr-surface) !important;
  border: 1px solid var(--pr-line) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.4) !important;
}
.info-icon{
  background: var(--pr-grad-soft) !important;
  border: 1px solid rgba(var(--pr-accent-rgb),.28) !important;
}
.info-btn.primary{ background: var(--pr-grad) !important; border:0 !important; }

/* ---------- Ripple tactile (present.js) ---------- */
.pr-ripple{
  position:absolute; border-radius:50%;
  background: rgba(255,255,255,.28);
  transform: scale(0);
  opacity:.55;
  pointer-events:none;
  animation: prRipple .6s ease-out forwards;
  z-index: 3;
}
@keyframes prRipple{ to{ transform: scale(2.6); opacity:0; } }

/* ---------- Entrée douce de la page ---------- */
.page{ animation: prPageIn .4s var(--pr-ease) both; }
@keyframes prPageIn{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } }

/* ============================================================
   SHELL TELEGRAM — footer TOUJOURS visible, adapté au téléphone
   Le layout suit la hauteur réelle du WebView Telegram :
   [ appbar fixe ] → [ contenu qui défile ] → [ footer épinglé ]
   Plus besoin de scroller pour voir la barre du bas.
   ============================================================ */
html{ height: 100%; overflow: hidden; }
body{
  display: flex !important;
  flex-direction: column !important;
  /* Hauteur = viewport stable Telegram (fallback dvh puis vh) */
  height: 100vh;
  height: 100dvh;
  height: var(--tg-viewport-stable-height, 100dvh);
  max-height: var(--tg-viewport-stable-height, 100dvh);
  overflow: hidden !important;
}

/* Barre du haut : reste en tête, ne défile pas */
.appbar{
  position: static !important;
  flex: 0 0 auto !important;
  transform: none !important;   /* neutralise l'auto-hide au scroll (inutile ici) */
}

/* Zone centrale : SEULE partie qui défile */
main.page{
  flex: 1 1 auto !important;
  min-height: 0 !important;              /* indispensable pour que le flex défile */
  overflow-y: auto !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;          /* évite le pull-to-close pendant le scroll */
}

/* Footer (onglets) : dans le flux, épinglé en bas du viewport téléphone */
.tabs{
  position: static !important;
  flex: 0 0 auto !important;
  bottom: auto !important;
}

/* Plus de tabs fixes = plus besoin des gros paddings bas fantômes */
.grid{ padding-bottom: 16px !important; }
.detail, .info-wrap, .cart, .admin-wrap{ padding-bottom: 18px !important; }

/* Le bouton remonter s'ancre au bas du viewport téléphone */
.pr-fab{ position: fixed; }

/* ============================================================
   MOBILE UX — moins d'espace vide, actions accessibles
   ============================================================ */

/* 1. On supprime le DOUBLE logo : l'appbar affiche déjà logo + nom.
      Le gros logo héro gaspillait un écran entier sur mobile. */
.catalog-top-logo{ padding: 10px 0 2px !important; }
.catalog-top-logo-img{
  width: min(84px, 22vw) !important;
  animation: prFloat 6s ease-in-out infinite;
}
@media (max-width: 480px){
  /* Sur petit écran on masque carrément le gros logo → produits visibles direct */
  .catalog-top-logo{ display: none !important; }
}

/* 2. On resserre les espacements pour que le contenu commence tôt */
.filters{ padding: 8px 0 2px !important; gap: 8px !important; }
.catalog-note{ margin: 6px 0 2px !important; padding: 9px 12px !important; }
.cat-strip{ padding: 2px 4px 6px !important; }
.grid{ padding-top: 8px !important; padding-bottom: calc(92px + var(--safe-bottom)) !important; }

/* 3. Détail / panier : moins d'air en haut, CTA centrés pleine largeur */
.detail, .info-wrap, .cart{ padding-top: 8px !important; }
.back{ margin: 8px 0 2px !important; }
.cta, .btn.large{
  width: 100% !important;
  max-width: 460px;
  margin-left: auto !important; margin-right: auto !important;
}
.chips, .chips-grams{ justify-content: center !important; }
.detail-block{ text-align: center; }
.detail-order-note{ text-align:center; }

/* ============================================================
   GRAMMAGE PERSONNALISÉ — parfaitement centré, mobile-first
   ============================================================ */
.gram-custom-panel,
.detail-block{
  max-width: 480px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Entête centrée */
.gram-custom-head{ text-align: center !important; padding: 16px 16px 2px !important; }
.gram-custom-head > div{ display: inline-block; }
.gram-custom-head span{ text-align: center; }

/* Formulaire : tout centré verticalement */
.gram-custom-form{
  justify-items: center !important;
  text-align: center;
  padding: 14px !important;
  gap: 14px !important;
}
.gram-inline-input{
  width: 100%;
  justify-items: center !important;
  text-align: center;
}
.gram-inline-input > span{ display: block; text-align: center; }

/* Le sélecteur −  [nb]  +  g : compact et centré (plus edge-to-edge) */
.gram-input-row{
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  width: 100%;
}
.gram-input-row .qty-btn{
  flex: 0 0 auto !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  font-size: 24px !important;
  display: grid !important;
  place-items: center !important;
  background: var(--pr-surface-2) !important;
  border: 1px solid var(--pr-line) !important;
}
.gram-input-row .qty-btn:active{ transform: scale(.9); }
.gram-input-row input[data-gram-display]{
  flex: 0 1 auto !important;
  width: 96px !important;
  max-width: 120px !important;
  text-align: center !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  padding: 12px 10px !important;
}
.gram-input-row em{ flex: 0 0 auto; font-size: 18px; }

/* Carte live (grammage / prix / total) : pleine largeur, centrée */
.gram-live-card{ width: 100% !important; }
.gram-live-card div{ align-content: center; }

/* Résumé du choix + économies : centrés */
.gram-summary-inline{ justify-content: center !important; text-align: center; }
.gram-summary-inline strong{ margin-left: 6px; }
[data-gram-savings], [data-savings-copy], .price-picked, [data-picked]{ text-align: center !important; }

/* Formulaire preset (chips) : bouton + résumé centrés */
.gram-action-form{
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* ============================================================
   BOUTON REMONTER (pr-fab) — visible, contrasté, au-dessus des onglets
   On masque l'ancien .fab-top (peu visible) au profit du nôtre.
   ============================================================ */
.fab-top{ display: none !important; }

.pr-fab{
  position: fixed;
  right: calc(16px + var(--safe-right, 0px));
  bottom: calc(84px + var(--safe-bottom, 0px));
  z-index: 46;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  font-size: 24px; font-weight: 900; line-height: 1;
  background: var(--pr-grad);
  border: 1.5px solid rgba(255,255,255,.35);
  box-shadow: 0 10px 26px rgba(var(--pr-accent-rgb),.5), 0 2px 8px rgba(0,0,0,.4);
  opacity: 0;
  transform: translateY(16px) scale(.7);
  pointer-events: none;
  transition: opacity .25s var(--pr-ease), transform .3s var(--pr-spring);
  -webkit-tap-highlight-color: transparent;
}
.pr-fab.show{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.pr-fab:active{ transform: scale(.9); }
/* petit rebond d'appel une fois visible */
.pr-fab.show::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border: 2px solid rgba(var(--pr-accent-rgb),.5);
  animation: prFabPulse 1.8s var(--pr-ease) infinite;
}
@keyframes prFabPulse{
  0%   { transform: scale(1);   opacity:.7; }
  70%,100% { transform: scale(1.35); opacity:0; }
}

/* ============================================================
   POPUP "AJOUTÉ AU PANIER" — centré dans le viewport Telegram + animé
   (l'ancien top:50% translate s'ancrait au layout viewport = décalé
    dans le WebView Telegram). On épingle à la hauteur visible réelle.
   ============================================================ */
/* Fermé (pas de .open) → caché. Plus spécifique + !important pour battre le
   display:flex ci-dessous quand app.js retire la classe .open au clic Fermer. */
.modal[data-add-popup]:not(.open){ display: none !important; }

.modal[data-add-popup]{
  position: fixed !important;
  left: 0 !important; right: 0 !important; top: 0 !important; bottom: auto !important;
  height: 100dvh;
  height: var(--tg-viewport-stable-height, 100dvh) !important;
  z-index: 200 !important;
}
.modal.open[data-add-popup]{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 22px !important;
}
.modal[data-add-popup] .modal-backdrop{
  position: absolute !important; inset: 0 !important;
  background: rgba(3,6,12,.74) !important;
  animation: prFadeBg .28s var(--pr-ease) both;
}
.modal[data-add-popup] .modal-card{
  position: relative !important;
  left: auto !important; top: auto !important;
  transform: none !important;
  margin: 14px 0 0 !important;
  width: min(92vw, 380px) !important;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 55%), #160f2c !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 24px !important;
  box-shadow: 0 26px 70px rgba(0,0,0,.62), 0 0 0 1px rgba(var(--pr-accent-rgb),.16) !important;
  animation: prPopIn .44s var(--pr-spring) both !important;
}
@keyframes prFadeBg{ from{ opacity:0; } to{ opacity:1; } }
@keyframes prPopIn{
  0%   { opacity:0; transform: translateY(20px) scale(.9); }
  55%  { opacity:1; }
  100% { opacity:1; transform: translateY(0) scale(1); }
}
/* Pastille de validation ✓ (verte, pop animé) */
.modal[data-add-popup] .modal-card::before{
  content: "✓" !important;
  position: absolute !important;
  top: -30px !important; left: 50% !important;
  width: 60px !important; height: 60px !important;
  display: grid !important; place-items: center !important;
  font-size: 30px !important; font-weight: 900 !important; color: #fff !important;
  background: linear-gradient(135deg, #2ee089, #17b46a) !important;
  border-radius: 50% !important;
  border: 3px solid #160f2c !important;
  box-shadow: 0 12px 30px rgba(46,224,137,.45) !important;
  animation: prCheckPop .55s var(--pr-spring) .08s both !important;
}
@keyframes prCheckPop{
  0%   { opacity:0; transform: translateX(-50%) scale(.2) rotate(-30deg); }
  60%  { opacity:1; transform: translateX(-50%) scale(1.15) rotate(0); }
  100% { opacity:1; transform: translateX(-50%) scale(1) rotate(0); }
}
.modal[data-add-popup] .modal-card{ padding-top: 40px !important; }
.modal[data-add-popup] h3{ font-size: var(--fs-lg); margin: 0 0 8px; }
.modal[data-add-popup] p{ color: var(--pr-muted); margin: 0 0 16px; }
.modal[data-add-popup] .modal-actions{ display: grid !important; gap: 9px !important; }
.modal[data-add-popup] .btn{ width: 100% !important; }
.modal[data-add-popup] .btn.primary{ background: var(--pr-grad) !important; border: 0 !important; box-shadow: var(--pr-glow) !important; }
.modal[data-add-popup] .modal-close{ width: 100% !important; margin-top: 4px; }

/* Toasts : centrés horizontalement, au-dessus du footer, dans la zone visible */
.toast-stack{
  bottom: calc(96px + var(--safe-bottom, 0px)) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  align-items: center !important;
}
.toast{
  border-radius: 14px !important;
  background: rgba(16,26,48,.96) !important;
  border: 1px solid var(--pr-line) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.5) !important;
}

/* ============================================================
   DÉTAIL PRODUIT — design premium poussé
   ============================================================ */
.detail h1{
  font-size: clamp(22px, 6vw, 28px) !important;
  font-weight: 900 !important;
  letter-spacing: .2px;
  text-align: center;
  margin: 14px 0 8px !important;
}
.detail-order-note{
  display: inline-block;
  margin: 0 auto 16px !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  background: var(--pr-grad-soft) !important;
  border: 1px solid rgba(var(--pr-accent-rgb),.24) !important;
  color: #dbe8ff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}
.detail .detail-order-note b{ color:#fff; }
/* centre le bloc order-note (inline-block dans un conteneur centré) */
.detail{ text-align: center; }
.detail > *{ text-align: initial; }
.detail h1, .detail-order-note, .detail-block, .gram-custom-panel{ text-align: center; }

/* Chips de grammage rapide = cartes sélectionnables premium (2 / ligne) */
.chips-grams{ gap: 10px !important; margin: 6px auto 16px !important; max-width: 480px; }
.chips-grams .chip{
  flex: 1 1 calc(50% - 5px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px;
  padding: 14px 16px !important;
  min-height: 58px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid var(--pr-line) !important;
  position: relative;
  overflow: hidden;
  transition: transform .15s var(--pr-ease), border-color .2s var(--pr-ease), background .2s var(--pr-ease), box-shadow .2s var(--pr-ease) !important;
}
.chips-grams .chip span{ font-weight: 900 !important; font-size: 15px; color: #f2f6ff; }
.chips-grams .chip b{ font-weight: 900; font-size: 15px; color: #bcd4ff; }
.chips-grams .chip:active{ transform: scale(.96); }
.chips-grams .chip.active{
  border-color: rgba(var(--pr-accent-rgb),.65) !important;
  background: linear-gradient(135deg, rgba(var(--pr-accent-rgb),.20), rgba(var(--pr-neon-rgb),.16)) !important;
  box-shadow: 0 0 0 2px rgba(var(--pr-accent-rgb),.2) inset, 0 10px 24px rgba(var(--pr-accent-rgb),.24) !important;
}
.chips-grams .chip.active b{ color:#fff; }
/* petit point de sélection sur la carte active */
.chips-grams .chip.active::after{
  content: "✓";
  position: absolute; top: 6px; right: 8px;
  width: 18px; height: 18px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 900; color: #fff;
  background: var(--pr-grad);
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(var(--pr-accent-rgb),.5);
}

/* Résumé du choix (data-picked) : carte discrète centrée */
.gram-summary-inline{
  display: inline-flex !important;
  align-items: center; gap: 8px;
  margin: 4px auto 12px !important;
  padding: 10px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--pr-line);
  font-weight: 800; font-size: 14px;
}
.gram-summary-inline strong{ font-size: 17px; color:#fff; }

/* Panneau grammage perso : entête avec petite barre dégradée */
.gram-custom-panel{
  border: 1px solid var(--pr-line) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 60%), rgba(16,26,48,.6) !important;
  overflow: hidden;
}
.gram-custom-head span{ font-size: 15px !important; color:#f2f6ff !important; }
.gram-custom-head small{ color: var(--pr-muted) !important; }

/* Carte live grammage/prix/total : plus lisible */
.gram-live-card div{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--pr-line) !important;
  border-radius: 14px !important;
}
.gram-live-card strong{ font-size: 17px !important; color:#fff !important; }

/* Description produit centrée et lisible */
.detail .desc{
  text-align: center;
  max-width: 520px;
  margin: 16px auto 8px !important;
  color: var(--pr-muted) !important;
}

/* Bouton retour discret, joli */
.back{
  display: inline-flex !important;
  align-items: center; gap: 6px;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--pr-line);
  color: #cfe0ff !important;
  font-weight: 800 !important;
}

/* ============================================================
   PANIER — design premium
   ============================================================ */
.cart-item{
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;
  border: 1px solid var(--pr-line) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.3) !important;
}
.cart-item .name{ color: #f4f8ff !important; }
.qty-btn{
  border-radius: 14px !important;
  background: var(--pr-surface-2) !important;
  border: 1px solid var(--pr-line) !important;
  transition: transform .15s var(--pr-ease), background .2s;
}
.qty-btn:active{ transform: scale(.9); }
.cart-remove{
  border-radius: 12px !important;
  background: rgba(255,77,94,.12) !important;
  border: 1px solid rgba(255,77,94,.3) !important;
  color: #ff8a95 !important;
}

/* Carte minimum de commande + barre de progression premium */
.minimum-order-card{
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;
  border: 1px solid var(--pr-line) !important;
}
.minimum-order-card.is-ready{
  border-color: rgba(46,224,137,.4) !important;
  background: linear-gradient(180deg, rgba(46,224,137,.14), rgba(255,255,255,.02)) !important;
}
.minimum-order-progress{
  height: 10px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.06) !important;
}
.minimum-order-progress span{
  border-radius: 999px !important;
  background: var(--pr-grad) !important;
  box-shadow: 0 4px 14px rgba(var(--pr-accent-rgb),.4) !important;
}
.minimum-order-card.is-ready .minimum-order-progress span{
  background: linear-gradient(90deg,#36d375,#2bb86b) !important;
}

/* ---------- Code promo ---------- */
.promo-box{ margin: 12px 0 6px; }
.promo-form{ display: flex; gap: 8px; }
.promo-input{
  flex: 1 1 auto;
  padding: 13px 16px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px dashed rgba(var(--pr-accent-rgb),.4) !important;
  color: #fff !important;
  font-weight: 800 !important; letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 15px !important;
}
.promo-input::placeholder{ color: rgba(180,195,215,.5); letter-spacing: normal; text-transform: none; font-weight: 600; }
.promo-input:focus{
  outline: none;
  border-color: rgba(var(--pr-accent-rgb),.7) !important;
  box-shadow: 0 0 0 4px rgba(var(--pr-accent-rgb),.14) !important;
}
.promo-apply{
  flex: 0 0 auto;
  padding: 13px 20px;
  border: 0; border-radius: 14px;
  font-weight: 900; color: #fff; font-size: 14px;
  background: var(--pr-grad);
  box-shadow: var(--pr-glow);
  cursor: pointer;
  transition: transform .15s var(--pr-ease), filter .2s;
}
.promo-apply:active{ transform: scale(.96); }
.promo-applied{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(46,204,113,.14), rgba(var(--pr-accent-rgb),.1));
  border: 1px solid rgba(46,224,137,.4);
}
.promo-applied-info{ display: flex; align-items: center; gap: 10px; }
.promo-tag{ font-weight: 900; color: #fff; letter-spacing: .5px; }
.promo-off{
  font-weight: 900; font-size: 13px; color: #fff;
  background: var(--pr-grad); padding: 3px 10px; border-radius: 999px;
}
.promo-remove{
  color: #ff9aa3; font-weight: 800; font-size: 13px; text-decoration: none;
  padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(255,90,106,.3);
}
.promo-msg{ margin-top: 8px; font-size: 13px; font-weight: 800; text-align: center; padding: 8px 12px; border-radius: 12px; }
.promo-msg.ok{ color: #b9f5d0; background: rgba(46,204,113,.14); border: 1px solid rgba(46,204,113,.4); }
.promo-msg.err{ color: #ffc2c8; background: rgba(255,90,106,.14); border: 1px solid rgba(255,90,106,.4); }

.total-line.total-sub, .total-line.total-discount{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--pr-line) !important;
  box-shadow: none !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
}
.total-line.total-discount span:last-child{ color: #7ee2a8 !important; }

/* Total : pastille premium avec liseré */
.total-line{
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(var(--pr-accent-rgb),.14), rgba(var(--pr-neon-rgb),.06)) !important;
  border: 1px solid rgba(var(--pr-accent-rgb),.28) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.3) !important;
}
.total-line span:last-child{ color:#fff !important; }

/* Formulaire de commande : champs premium */
.form-grid input, .form-grid textarea, .form-grid select{
  border-radius: 14px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--pr-line) !important;
  transition: border-color .2s var(--pr-ease), box-shadow .2s var(--pr-ease), background .2s;
}
.form-grid input:focus, .form-grid textarea:focus, .form-grid select:focus{
  border-color: rgba(var(--pr-accent-rgb),.6) !important;
  box-shadow: 0 0 0 4px rgba(var(--pr-accent-rgb),.14) !important;
  background: rgba(255,255,255,.06) !important;
}
.order-help{
  border-radius: 16px !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--pr-line) !important;
}
.order-step .dot{
  background: var(--pr-grad-soft) !important;
  border: 1px solid rgba(var(--pr-accent-rgb),.35) !important;
}

/* Boutons d'action panier */
.cart-actions .btn, .continue-shopping{ border-radius: 14px !important; }

/* ============================================================
   RECHERCHE — champ élégant
   ============================================================ */
.search input::placeholder{ color: rgba(180,195,215,.5); }
.search .k{ color: var(--pr-accent) !important; }

/* ============================================================
   MESSAGE CENTRÉ (liens non configurés, infos) — pr-msg
   ============================================================ */
.pr-msg-overlay{
  position: fixed;
  left: 0; right: 0; top: 0; bottom: auto;
  height: 100dvh;
  height: var(--tg-viewport-stable-height, 100dvh);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  z-index: 220;
}
.pr-msg-backdrop{
  position: absolute; inset: 0;
  background: rgba(3,6,12,.74);
  opacity: 0;
  transition: opacity .25s var(--pr-ease);
}
.pr-msg-overlay.show .pr-msg-backdrop{ opacity: 1; }
.pr-msg-overlay.closing .pr-msg-backdrop{ opacity: 0; }

.pr-msg-card{
  position: relative;
  width: min(90vw, 340px);
  text-align: center;
  padding: 24px 22px 20px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 55%), #160f2c;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 26px 70px rgba(0,0,0,.62), 0 0 0 1px rgba(var(--pr-accent-rgb),.16);
  opacity: 0;
  transform: translateY(18px) scale(.92);
  transition: opacity .3s var(--pr-ease), transform .4s var(--pr-spring);
}
.pr-msg-overlay.show .pr-msg-card{ opacity: 1; transform: none; }
.pr-msg-overlay.closing .pr-msg-card{ opacity: 0; transform: translateY(10px) scale(.96); }

.pr-msg-icon{
  width: 60px; height: 60px; margin: 0 auto 12px;
  display: grid; place-items: center;
  font-size: 30px;
  border-radius: 50%;
  background: var(--pr-grad-soft);
  border: 1px solid rgba(var(--pr-accent-rgb),.28);
}
.pr-msg-title{ font-size: 17px; font-weight: 900; color: #eef3fb; margin-bottom: 6px; }
.pr-msg-text{ font-size: 14px; color: var(--pr-muted); line-height: 1.5; margin-bottom: 18px; font-weight: 600; }
.pr-msg-ok{
  width: 100%;
  padding: 13px;
  border: 0;
  border-radius: 14px;
  font-weight: 900; color: #fff; font-size: 15px;
  background: var(--pr-grad);
  box-shadow: var(--pr-glow);
  cursor: pointer;
  transition: transform .15s var(--pr-ease);
}
.pr-msg-ok:active{ transform: scale(.97); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .pr-aurora, .catalog-top-logo-img, .cta::after, .page, .tab.active::after, .pr-fab.show::after,
  .modal[data-add-popup] .modal-card, .modal[data-add-popup] .modal-card::before, .modal[data-add-popup] .modal-backdrop,
  .pr-msg-card, .pr-msg-backdrop{ transition: none !important; animation: none !important; }
  html.pr-reveal .grid .card{ opacity:1 !important; transform:none !important; transition:none !important; }
}