/* =====================================================================================
   DOVION — BOUTIQUE GHIBLI (refonte de zéro, 2026-07-11, demande #28)
   -------------------------------------------------------------------------------------
   Habillage COMPLET et AUTONOME de la boutique : #premium-panel (panneau principal)
   et #dovion-shop-ov (modale autonome : liste open() + « Mes achats »).

   Parti pris : PLEIN ÉCRAN (la boîte remplit le viewport) + palette Ghibli CHAUDE et
   CLAIRE — parchemin, aube dorée, or miel, sauge — en rupture avec le verre marine
   sombre de glass-ui.css. Texte encre sur parchemin : contraste AA garanti partout.

   Chargé APRÈS css/glass-ui.css → à spécificité égale, la déclaration la plus tardive
   gagne ; `!important` repris là où glass-ui.css (ou le style injecté par
   js/shop-stripe.js) en pose déjà. AUCUN id/classe modifié : le flux Stripe
   (/api/shop/*, grantPurchase, data-sku) et les rendus JS restent intacts.

   Hiérarchie des CTA (prix/valeur nets, demande « offres optimisées ») :
     - achat en ARGENT RÉEL (€)  : bouton brun encre (défaut) / OR (offre mise en avant)
     - achat / prix en XP        : sauge
     - action indisponible      : parchemin éteint, texte taupe

   Sommaire :
     0. Jetons (scope boutique)
     1. Voile d'arrière-plan + boîte plein écran
     2. En-tête fixe (titre, réserve, onglets, « Mes achats »)
     3. Corps défilant (seul scroller) + blocs de section
     4. Carte VIP (#shop-grade-card)
     5. Mini-boosts / skins / traînées / pavillons / emojis (payé en XP)
     6. Trésor : packs d'XP, coffre de départ, bundles, offre du jour, bandeaux
     7. Barre d'action fixe (#shop-action)
     8. Modale autonome #dovion-shop-ov + toast + confirmation d'achat
     9. Responsive (portrait / paysage / safe-area) + reduced-motion
   ===================================================================================== */

/* ============================ 0. JETONS ============================ */
#premium-panel,
#dovion-shop-ov,
#dovion-buy-celebrate {
  /* surfaces */
  --shg-paper: #f6ecd6;                          /* parchemin (fond de boîte) */
  --shg-paper-2: #efe2c6;                        /* parchemin plus soutenu (en-tête / pied) */
  --shg-card: #fffaf0;                           /* carte crème */
  --shg-card-warm: #fdf3da;                      /* carte crème dorée (offres) */
  --shg-border: rgba(146, 114, 66, 0.42);        /* trait brun doux */
  --shg-border-strong: rgba(122, 92, 48, 0.62);
  /* encres (contrastes AA sur parchemin/crème) */
  --shg-ink: #392e1c;                            /* texte principal (≈10:1) */
  --shg-ink-soft: #55462e;                       /* secondaire (≈7:1) */
  --shg-muted: #6d5c40;                          /* discret (≈5:1) */
  --shg-gold-deep: #8a5c10;                      /* or profond lisible (prix, titres) */
  --shg-gold: #e9b949;                           /* or miel (bordures, remplissages) */
  --shg-sage-deep: #3f5c30;                      /* sauge profonde lisible */
  --shg-sage: #7ea75f;                           /* sauge (remplissages) */
  --shg-danger: #a3402c;                         /* terracotta (verrouillé / manque) */
  --shg-radius: 16px;
  --shg-radius-sm: 12px;
  --shg-shadow-card: 0 6px 18px rgba(96, 72, 34, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  /* CTA */
  --shg-cta-gold: linear-gradient(180deg, #ffd764, #e8a92b);
  --shg-cta-gold-ink: #3a2504;
  --shg-cta-brown: linear-gradient(180deg, #6a5232, #4a3820);
  --shg-cta-brown-ink: #fdf6e5;
  --shg-cta-sage: linear-gradient(180deg, #a9c98b, #7ea75f);
  --shg-cta-sage-ink: #1d3312;
}

/* ============================ 1. VOILE + BOÎTE PLEIN ÉCRAN ============================ */
/* Voile d'aube : le jeu derrière se teinte chaud, très doux (fini le givre marine). */
#premium-panel {
  padding: 0 !important;
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(255, 214, 150, 0.30), rgba(255, 214, 150, 0) 60%),
    linear-gradient(180deg, rgba(64, 48, 26, 0.55), rgba(40, 30, 17, 0.66)) !important;
  backdrop-filter: blur(10px) saturate(1.05) brightness(1.02);
  -webkit-backdrop-filter: blur(10px) saturate(1.05) brightness(1.02);
}

/* La boîte REMPLIT le viewport (plein écran, toutes tailles) : feuille de parchemin. */
#premium-panel #premium-box {
  position: relative;
  width: 100vw; width: 100dvw;
  height: 100vh; height: 100dvh;
  max-height: none;
  display: flex; flex-direction: column; overflow: hidden;
  border: none !important;
  border-radius: 0 !important;
  background:
    radial-gradient(120% 46% at 50% -6%, rgba(255, 226, 168, 0.55), rgba(255, 226, 168, 0) 60%),
    linear-gradient(180deg, #f9f1de 0%, var(--shg-paper) 38%, #f0e3c4 100%) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none !important;
  color: var(--shg-ink);
}

/* Croix de fermeture : encre sur pastille parchemin, grande cible, TOUJOURS visible. */
#premium-panel .panel-x {
  display: flex;
  position: absolute; top: max(10px, env(safe-area-inset-top)); right: 12px; z-index: 30;
  width: 42px; height: 42px; align-items: center; justify-content: center;
  font-size: 21px; line-height: 1; font-weight: 700;
  color: var(--shg-ink) !important;
  background: linear-gradient(180deg, #fffaf0, #f1e5c8) !important;
  border: 1px solid var(--shg-border-strong) !important;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(96, 72, 34, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}
#premium-panel .panel-x:hover {
  background: rgba(214, 71, 63, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  color: #fff !important;
}

/* L'ancien bouton « Fermer » sous la boîte : hors viewport en plein écran → retiré partout
   (la croix ci-dessus le remplace, y compris au clavier : bouton réel, focusable). */
#premium-panel #btn-close-premium { display: none !important; }

/* ============================ 2. EN-TÊTE FIXE ============================ */
#premium-panel #premium-head {
  flex: 0 0 auto;
  padding: 14px clamp(14px, 4vw, 30px) 10px;
  padding-top: max(14px, env(safe-area-inset-top));
  background: linear-gradient(180deg, rgba(255, 250, 238, 0.92), rgba(244, 232, 204, 0.88)) !important;
  border-bottom: 1px solid var(--shg-border) !important;
  box-shadow: 0 6px 18px rgba(96, 72, 34, 0.10);
}
/* contenu de l'en-tête centré et borné (le plein écran ne doit pas étirer les lignes) */
#premium-panel #premium-head > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
#premium-panel .premium-head-row { padding-right: 46px; } /* place pour la croix */
#premium-panel #premium-head h2 {
  font-size: clamp(19px, 3.2vw, 24px); font-weight: 900; letter-spacing: 0.4px;
  color: var(--shg-ink) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}
#premium-panel #shop-reserve {
  background: linear-gradient(180deg, #eef3dd, #dfeacc) !important;
  border: 1px solid rgba(110, 140, 84, 0.55) !important;
  color: var(--shg-sage-deep) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  font-weight: 700;
}
#premium-panel .shop-reserve-ic,
#premium-panel #shop-reserve b { color: var(--shg-sage-deep) !important; }
#premium-panel .shop-reserve-rank {
  color: var(--shg-gold-deep) !important;
  background: linear-gradient(180deg, #fdeeba, #f7df92) !important;
  border: 1px solid rgba(170, 128, 48, 0.5);
  font-weight: 800;
}

/* Onglets (injectés par shop-stripe.js) : pilules parchemin, actif = or / sauge. */
#premium-panel .shop-tabbar { gap: 8px; margin: 12px auto 2px; }
#premium-panel .shop-tab {
  flex: 1; border-radius: 12px; padding: 11px 12px;
  font: 800 14px/1 'Trebuchet MS', system-ui, sans-serif !important;
  background: linear-gradient(180deg, #fffaf0, #f0e3c6) !important;
  border: 1px solid var(--shg-border) !important;
  color: var(--shg-ink-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 6px rgba(96, 72, 34, 0.08);
  transition: border-color .15s ease, transform .1s ease, background .18s ease, color .15s ease;
}
#premium-panel .shop-tab:hover {
  transform: translateY(-1px);
  border-color: var(--shg-border-strong) !important;
  color: var(--shg-ink) !important;
}
/* actif — onglet « Payé en XP » : sauge */
#premium-panel .shop-tab.is-active {
  background: linear-gradient(180deg, #dcebc8, #bcd6a0) !important;
  border-color: rgba(94, 128, 66, 0.7) !important;
  color: #24391a !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 12px rgba(110, 150, 80, 0.25) !important;
}
/* actif — onglet « ★ Premium » (argent réel) : or */
#premium-panel .shop-tabbar .shop-tab:first-child.is-active {
  background: var(--shg-cta-gold) !important;
  border-color: rgba(168, 120, 34, 0.75) !important;
  color: var(--shg-cta-gold-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 4px 14px rgba(200, 148, 44, 0.35) !important;
}
#premium-panel .shop-hist-wrap { margin: 4px auto 0; }
#premium-panel .shop-hist-link { color: var(--shg-muted) !important; font-weight: 700; }
#premium-panel .shop-hist-link:hover { color: var(--shg-ink) !important; }

/* ============================ 3. CORPS DÉFILANT + BLOCS ============================ */
#premium-panel #premium-scroll {
  flex: 1 1 auto; min-height: 0;                /* clé du scroll en colonne flex */
  overflow-y: auto; overflow-x: hidden;         /* AUCUN scroll horizontal */
  display: flex; flex-direction: column; gap: 16px;
  padding: 16px clamp(14px, 4vw, 30px) 20px;
  scrollbar-width: thin; scrollbar-color: rgba(122, 92, 48, 0.5) transparent;
  background: transparent;
}
#premium-panel #premium-scroll > * {
  flex-shrink: 0;
  width: 100%; max-width: 1100px;               /* colonne de lecture centrée en plein écran */
  margin-left: auto; margin-right: auto;
  min-width: 0;
}
#premium-panel #premium-scroll::-webkit-scrollbar { width: 10px; }
#premium-panel #premium-scroll::-webkit-scrollbar-track { background: transparent; }
#premium-panel #premium-scroll::-webkit-scrollbar-thumb {
  background: rgba(122, 92, 48, 0.42) !important; border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;
}
#premium-panel #premium-scroll::-webkit-scrollbar-thumb:hover { background: rgba(122, 92, 48, 0.62) !important; }

/* Blocs de section : cartes crème, en-tête net. */
#premium-panel .premium-block {
  padding: 14px 16px; border-radius: var(--shg-radius) !important;
  background: linear-gradient(180deg, var(--shg-card), #f7edd7) !important;
  border: 1px solid var(--shg-border) !important;
  box-shadow: var(--shg-shadow-card) !important;
}
#premium-panel .premium-block-head { margin-bottom: 11px; }
#premium-panel .premium-block-head h4 {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.9px;
  color: var(--shg-ink) !important; font-weight: 900;
}
#premium-panel .shop-tag { color: var(--shg-muted) !important; font-weight: 700; }
#premium-panel .shop-zone-head h3 { color: var(--shg-ink) !important; }
#premium-panel .shop-zone-ic { color: var(--shg-gold-deep) !important; }
#premium-panel .shop-zone-head::after {
  background: linear-gradient(90deg, var(--shg-border-strong), transparent) !important;
}

/* ============================ 4. CARTE VIP (#shop-grade-card) ============================ */
#premium-panel .shop-grade {
  background:
    radial-gradient(130% 100% at 12% -10%, rgba(255, 216, 130, 0.4), rgba(255, 216, 130, 0) 55%),
    linear-gradient(180deg, #fdf4dc, #f6e6bf) !important;
  border: 1px solid rgba(170, 128, 48, 0.55) !important;
  border-radius: var(--shg-radius) !important;
  box-shadow: var(--shg-shadow-card) !important;
  color: var(--shg-ink);
}
#premium-panel .shop-grade::before { background: linear-gradient(90deg, transparent, #d9a733, transparent) !important; }
#premium-panel .shop-grade .sg-eyebrow {
  color: var(--shg-gold-deep) !important;
  background: rgba(233, 185, 73, 0.28) !important;
  border: 1px solid rgba(170, 128, 48, 0.45) !important;
}
#premium-panel .shop-grade .sg-ic {
  color: var(--shg-gold-deep) !important;
  background: linear-gradient(180deg, #fdeeba, #f3da8c) !important;
  border: 1px solid rgba(170, 128, 48, 0.5) !important;
  text-shadow: none !important;
}
#premium-panel .shop-grade .sg-title { color: var(--shg-ink) !important; }
#premium-panel .shop-grade .sg-badge {
  background: #dfeacc !important; color: var(--shg-sage-deep) !important;
  border: 1px solid rgba(110, 140, 84, 0.55) !important;
}
#premium-panel .shop-grade .sg-badge.sg-off {
  background: rgba(122, 92, 48, 0.10) !important; color: var(--shg-muted) !important;
  border-color: var(--shg-border) !important;
}
#premium-panel .shop-grade .sg-perks li { color: var(--shg-ink-soft) !important; }
#premium-panel .shop-grade .sg-perks li::before { color: var(--shg-gold-deep) !important; }
#premium-panel .shop-grade .sg-status {
  background: rgba(255, 252, 244, 0.75) !important;
  border: 1px solid var(--shg-border) !important;
}
#premium-panel .shop-grade .sg-st-row { color: var(--shg-ink-soft) !important; }
#premium-panel .shop-grade .sg-st-on { color: var(--shg-gold-deep) !important; }
#premium-panel .shop-grade .sg-st-wait { color: var(--shg-muted) !important; }
#premium-panel .shop-grade .sg-st-ok { color: var(--shg-sage-deep) !important; background: #dfeacc !important; border-color: rgba(110, 140, 84, 0.5) !important; }
/* CTA du grade : XP = sauge, € (à vie) = or. */
#premium-panel .shop-grade .sg-xp {
  background: var(--shg-cta-sage) !important; color: var(--shg-cta-sage-ink) !important;
  border: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 5px 14px rgba(110, 150, 80, 0.35) !important;
}
#premium-panel .shop-grade .sg-xp.sg-need {
  background: rgba(255, 252, 244, 0.8) !important; color: var(--shg-gold-deep) !important;
  border: 1px solid rgba(170, 128, 48, 0.55) !important; box-shadow: none !important;
}
#premium-panel .shop-grade .sg-eur {
  background: var(--shg-cta-gold) !important; color: var(--shg-cta-gold-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 5px 14px rgba(200, 148, 44, 0.4) !important;
}
#premium-panel .shop-grade .sg-hint { color: var(--shg-danger) !important; font-weight: 700; }

/* ============================ 5. ARTICLES PAYÉS EN XP ============================ */
/* Mini-boosts : lignes crème, prix XP net. */
#premium-panel .shop-grid { grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 10px; }
#premium-panel .shop-item {
  padding: 11px 13px; border-radius: var(--shg-radius-sm);
  background: linear-gradient(180deg, #fffcf4, #f6ecd4) !important;
  border: 1px solid var(--shg-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  min-width: 0;
  transition: border-color .16s ease, background .16s ease, transform .12s ease, box-shadow .16s ease;
}
#premium-panel .shop-item:hover {
  border-color: rgba(94, 128, 66, 0.65) !important;
  background: linear-gradient(180deg, #f4f4e2, #e9eed3) !important;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 6px 14px rgba(96, 72, 34, 0.16);
}
/* icônes d'articles : rendues MONOCHROMES encre chaude (demande #28 « aucun emoji,
   icônes noir/blanc ») — les emojis colorés des défs JS passent en teinte unique. */
#premium-panel .shop-item-ic {
  filter: grayscale(1) sepia(0.4) saturate(1.5) brightness(0.72) contrast(1.05);
}
#premium-panel .shop-item-qty {
  color: var(--shg-cta-gold-ink); background: var(--shg-cta-gold);
  border-radius: 999px; font-weight: 800;
}
#premium-panel .shop-item-body b { color: var(--shg-ink) !important; font-size: 13.5px; }
#premium-panel .shop-item-body small { color: var(--shg-muted) !important; }
#premium-panel .shop-item-price { color: var(--shg-ink-soft) !important; font-weight: 800; }
#premium-panel .shop-item-price.ok { color: var(--shg-sage-deep) !important; }
#premium-panel .shop-item-price.owned { color: var(--shg-gold-deep) !important; }
#premium-panel .shop-item.locked .shop-item-price { color: var(--shg-danger) !important; }
#premium-panel .shop-item.owned {
  border-color: rgba(170, 128, 48, 0.6) !important;
  background: linear-gradient(180deg, #fdf3da, #f6e6bf) !important;
}
#premium-panel .shop-item.is-selected {
  border-color: #c9942c !important;
  background: linear-gradient(180deg, #fdf0c8, #f7e3a6) !important;
  box-shadow: 0 0 0 2px rgba(201, 148, 44, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

/* Cartes cosmétiques (skins / traînées / pavillons) : tuiles crème. */
#premium-panel .premium-card {
  background: linear-gradient(180deg, #fffcf4, #f4e9cf) !important;
  border: 1px solid var(--shg-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  min-width: 0;
  transition: border-color .16s ease, transform .12s ease, box-shadow .16s ease;
}
#premium-panel .premium-card:hover {
  transform: translateY(-2px);
  border-color: rgba(94, 128, 66, 0.65) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 18px rgba(96, 72, 34, 0.18);
}
#premium-panel .premium-card-name { color: var(--shg-ink) !important; }
#premium-panel .premium-card .premium-lock { color: var(--shg-ink-soft); }
#premium-panel .premium-card.is-owned,
#premium-panel .premium-card.is-worn {
  border-color: rgba(94, 128, 66, 0.7) !important;
  box-shadow: inset 0 0 0 1px rgba(110, 150, 80, 0.4);
}
#premium-panel .premium-card.is-worn .premium-lock {
  color: #1d3312 !important;
  background: linear-gradient(90deg, #cfe4b4, #a9c98b) !important;
}
#premium-panel .premium-card.is-selected {
  border-color: #c9942c !important;
  box-shadow: 0 0 0 2px rgba(201, 148, 44, 0.45), 0 0 14px rgba(233, 185, 73, 0.3) !important;
}
#premium-panel .premium-card.is-selected .premium-lock {
  color: var(--shg-cta-gold-ink) !important;
  background: var(--shg-cta-gold) !important;
}

/* Emojis premium : tuiles crème. */
#premium-panel .shop-emoji {
  background: linear-gradient(180deg, #fffcf4, #f4e9cf) !important;
  border: 1px solid var(--shg-border) !important;
}
#premium-panel .shop-emoji-req { color: var(--shg-muted) !important; }

/* Pub XP gratuite : bouton parchemin sobre. */
#premium-panel .premium-ad {
  background: linear-gradient(180deg, #fffaf0, #efe3c6) !important;
  border: 1px solid var(--shg-border-strong) !important;
  color: var(--shg-ink) !important;
  font-weight: 800;
}
#premium-panel .premium-ad:disabled { opacity: 0.55; }

/* ============================ 6. TRÉSOR (ARGENT RÉEL) ============================ */
/* Packs d'XP : cartes crème dorée, la valeur (XP) en encre, le prix en CTA brun/or. */
#premium-panel .dovion-xp-grid { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; }
#premium-panel .ds-pack-card {
  padding: 18px 12px 14px; border-radius: var(--shg-radius) !important;
  background: linear-gradient(180deg, var(--shg-card-warm), #f6e8c6) !important;
  border: 1px solid var(--shg-border) !important;
  box-shadow: var(--shg-shadow-card) !important;
  min-width: 0;
  transition: transform .14s ease, box-shadow .2s ease, border-color .16s ease;
}
#premium-panel .ds-pack-card:hover {
  transform: translateY(-3px);
  border-color: rgba(170, 128, 48, 0.6) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 12px 26px rgba(96, 72, 34, 0.22) !important;
}
#premium-panel .ds-pack-coin { color: var(--shg-gold-deep) !important; filter: drop-shadow(0 2px 4px rgba(170, 128, 48, 0.35)); }
#premium-panel .ds-pack-xp { color: var(--shg-ink) !important; }
#premium-panel .ds-pack-xp small { color: var(--shg-gold-deep) !important; }
#premium-panel .ds-pack-name { color: var(--shg-muted) !important; }
#premium-panel .ds-pack-bonus {
  color: #1d3312 !important;
  background: linear-gradient(90deg, #cfe4b4, #a9c98b) !important;
  box-shadow: 0 2px 8px rgba(110, 150, 80, 0.3) !important;
}
/* prix € : CTA brun encre par défaut… */
#premium-panel .ds-pack-buy {
  background: var(--shg-cta-brown) !important;
  color: var(--shg-cta-brown-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 5px 14px rgba(74, 56, 32, 0.35) !important;
}
/* …et OR sur l'offre mise en avant. */
#premium-panel .ds-pack-card.is-popular {
  border-color: rgba(94, 128, 66, 0.65) !important;
  box-shadow: 0 0 0 1px rgba(110, 150, 80, 0.45), var(--shg-shadow-card) !important;
}
#premium-panel .ds-pack-card.is-popular .ds-pack-ribbon {
  color: #1d3312 !important;
  background: linear-gradient(90deg, #cfe4b4, #a9c98b) !important;
}
#premium-panel .ds-pack-card.is-best {
  border-color: rgba(170, 128, 48, 0.7) !important;
  background:
    radial-gradient(120% 70% at 50% -12%, rgba(255, 216, 130, 0.5), rgba(255, 216, 130, 0) 60%),
    linear-gradient(180deg, #fdf0c8, #f6e2ac) !important;
  box-shadow: 0 0 0 1px rgba(201, 148, 44, 0.5), var(--shg-shadow-card) !important;
}
#premium-panel .ds-pack-card.is-best .ds-pack-ribbon {
  color: var(--shg-cta-gold-ink) !important;
  background: var(--shg-cta-gold) !important;
  box-shadow: 0 2px 8px rgba(200, 148, 44, 0.4) !important;
}
#premium-panel .ds-pack-card.is-best .ds-pack-buy {
  background: var(--shg-cta-gold) !important;
  color: var(--shg-cta-gold-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 5px 14px rgba(200, 148, 44, 0.42) !important;
}

/* Coffre de départ (héros) : parchemin doré, CTA or. */
#premium-panel .premium-hero {
  background:
    radial-gradient(120% 90% at 14% 14%, rgba(255, 216, 130, 0.4), rgba(255, 216, 130, 0) 58%),
    linear-gradient(180deg, #fdf4dc, #f4e4ba) !important;
  border: 1px solid rgba(170, 128, 48, 0.55) !important;
  border-radius: var(--shg-radius) !important;
  box-shadow: var(--shg-shadow-card) !important;
}
#premium-panel .premium-hero-body h3 { color: var(--shg-gold-deep) !important; }
#premium-panel .premium-hero-desc { color: var(--shg-ink-soft) !important; }
#premium-panel .premium-perks li { color: var(--shg-ink) !important; }
#premium-panel .premium-perks .perk-ic { color: var(--shg-gold-deep); }
#premium-panel .premium-soon-note { color: var(--shg-muted) !important; }
#premium-panel .premium-buy {
  background: var(--shg-cta-gold) !important;
  color: var(--shg-cta-gold-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 6px 18px rgba(200, 148, 44, 0.42) !important;
}
#premium-panel .premium-buy:hover { filter: brightness(1.04) saturate(1.04); }

/* Bandeau « 1er achat DOUBLÉ » : dorure claire, encre brune. */
#premium-panel .dovion-fpb {
  color: var(--shg-cta-gold-ink) !important;
  background: linear-gradient(90deg, #fbe6ae, #f0c76a) !important;
  border: 1px solid rgba(170, 128, 48, 0.5);
  box-shadow: 0 4px 14px rgba(200, 148, 44, 0.28) !important;
}

/* Offre du jour : bande d'aube, compte à rebours terracotta. */
#premium-panel .dovion-odj {
  background:
    linear-gradient(90deg, rgba(233, 185, 73, 0.30), rgba(233, 185, 73, 0.06)),
    #fdf6e2 !important;
  border: 1px solid rgba(170, 128, 48, 0.5) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
#premium-panel .odj-star { color: var(--shg-gold-deep); }
#premium-panel .odj-title { color: var(--shg-ink) !important; }
#premium-panel .odj-title b { color: var(--shg-gold-deep); }
#premium-panel .odj-cd { color: var(--shg-danger) !important; font-weight: 800; }
#premium-panel .odj-buy {
  background: var(--shg-cta-gold) !important;
  color: var(--shg-cta-gold-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 12px rgba(200, 148, 44, 0.38) !important;
}

/* Bundles « Trésors du capitaine » : cartes crème dorée, CTA brun. */
#premium-panel .bundle-card {
  background: linear-gradient(180deg, var(--shg-card-warm), #f3e3bd) !important;
  border: 1px solid rgba(170, 128, 48, 0.5) !important;
  box-shadow: var(--shg-shadow-card) !important;
  min-width: 0;
}
#premium-panel .bundle-name { color: var(--shg-ink) !important; }
#premium-panel .bundle-tag { color: var(--shg-gold-deep) !important; }
#premium-panel .bundle-perks { color: var(--shg-ink-soft) !important; }
#premium-panel .bundle-buy {
  background: var(--shg-cta-brown) !important;
  color: var(--shg-cta-brown-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 5px 14px rgba(74, 56, 32, 0.35) !important;
}
#premium-panel .dovion-bundle-grid { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }

/* ============================ 7. BARRE D'ACTION FIXE ============================ */
#premium-panel #shop-action {
  flex: 0 0 auto;
  background: linear-gradient(180deg, rgba(250, 243, 226, 0.97), rgba(240, 227, 196, 0.97)) !important;
  border-top: 1px solid var(--shg-border-strong) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 -6px 18px rgba(96, 72, 34, 0.12);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
#premium-panel .shop-action-info b { color: var(--shg-ink) !important; }
#premium-panel .shop-action-info small { color: var(--shg-muted) !important; }
#premium-panel .shop-action-btn {
  background: var(--shg-cta-gold) !important;
  color: var(--shg-cta-gold-ink) !important; border: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 5px 14px rgba(200, 148, 44, 0.38) !important;
  font-weight: 900;
}
#premium-panel .shop-action-btn:disabled {
  background: rgba(122, 92, 48, 0.12) !important;
  color: var(--shg-muted) !important;
  box-shadow: none !important;
}
#premium-panel .shop-action-btn.is-login {
  background: var(--shg-cta-sage) !important;
  color: var(--shg-cta-sage-ink) !important;
}

/* ============================ 8. MODALE AUTONOME + TOAST + MERCI ============================ */
/* #dovion-shop-ov (liste DovionShop.open() + « Mes achats ») : carte parchemin centrée. */
#dovion-shop-ov {
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(255, 214, 150, 0.28), rgba(255, 214, 150, 0) 60%),
    linear-gradient(180deg, rgba(64, 48, 26, 0.55), rgba(40, 30, 17, 0.66)) !important;
  backdrop-filter: blur(9px) saturate(1.05);
  -webkit-backdrop-filter: blur(9px) saturate(1.05);
  padding: 14px;
}
#dovion-shop-ov .ds-card {
  background:
    radial-gradient(120% 40% at 50% -6%, rgba(255, 226, 168, 0.5), rgba(255, 226, 168, 0) 60%),
    linear-gradient(180deg, #f9f1de, var(--shg-paper)) !important;
  color: var(--shg-ink) !important;
  border: 1px solid var(--shg-border-strong) !important;
  border-radius: var(--shg-radius) !important;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 24px 60px rgba(30, 20, 8, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  max-height: calc(100dvh - 28px);
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: rgba(122, 92, 48, 0.5) transparent;
}
#dovion-shop-ov .ds-card h2 { color: var(--shg-ink) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); }
#dovion-shop-ov .ds-sub { color: var(--shg-ink-soft) !important; }
#dovion-shop-ov .ds-note { color: var(--shg-muted) !important; }
#dovion-shop-ov .ds-pack {
  background: linear-gradient(180deg, #fffcf4, #f6ecd4) !important;
  border: 1px solid var(--shg-border) !important;
  border-radius: var(--shg-radius-sm) !important;
}
#dovion-shop-ov .ds-pack b { color: var(--shg-ink) !important; }
#dovion-shop-ov .ds-pack small { color: var(--shg-muted) !important; }
#dovion-shop-ov .ds-pack > span { color: var(--shg-gold-deep); font-weight: 800; } /* montant (« Mes achats ») */
#dovion-shop-ov .ds-buy {
  background: var(--shg-cta-gold) !important;
  color: var(--shg-cta-gold-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 4px 12px rgba(200, 148, 44, 0.38) !important;
  font-weight: 800;
}
#dovion-shop-ov .ds-close {
  background: linear-gradient(180deg, #fffaf0, #efe3c6) !important;
  border: 1px solid var(--shg-border-strong) !important;
  color: var(--shg-ink) !important;
  font-weight: 800;
}
#dovion-shop-ov .ds-close:hover { border-color: rgba(122, 92, 48, 0.8) !important; }
#dovion-shop-ov .panel-x {
  color: var(--shg-ink) !important;
  background: linear-gradient(180deg, #fffaf0, #f1e5c8) !important;
  border: 1px solid var(--shg-border-strong) !important;
  box-shadow: 0 3px 10px rgba(96, 72, 34, 0.2) !important;
}
#dovion-shop-ov .panel-x:hover { background: rgba(214, 71, 63, 0.95) !important; color: #fff !important; }

/* Toast : reste sombre chaud (il flotte aussi sur la mer en jeu) — texte crème lisible. */
#dovion-shop-toast {
  background: linear-gradient(180deg, rgba(64, 50, 30, 0.96), rgba(46, 36, 22, 0.97)) !important;
  border: 1px solid rgba(228, 178, 96, 0.45) !important;
  color: #f9f0dc !important;
}

/* Confirmation d'achat (merci) : carte parchemin, coche sauge. */
#dovion-buy-celebrate {
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(255, 214, 150, 0.25), rgba(255, 214, 150, 0) 60%),
    rgba(40, 30, 17, 0.55) !important;
}
#dovion-buy-celebrate .dbc-card {
  background:
    radial-gradient(120% 50% at 50% -8%, rgba(255, 226, 168, 0.55), rgba(255, 226, 168, 0) 60%),
    linear-gradient(180deg, #f9f1de, var(--shg-paper)) !important;
  border: 1px solid rgba(170, 128, 48, 0.6) !important;
  box-shadow: 0 22px 60px rgba(30, 20, 8, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
#dovion-buy-celebrate .dbc-check { background: linear-gradient(180deg, #a9c98b, #7ea75f) !important; color: #1d3312 !important; }
#dovion-buy-celebrate .dbc-title { color: var(--shg-ink) !important; }
#dovion-buy-celebrate .dbc-sub { color: var(--shg-gold-deep) !important; }
#dovion-buy-celebrate .dbc-coin { color: var(--shg-gold-deep) !important; }

/* ============================ 9. RESPONSIVE ============================ */
/* Tablette / mobile large : en-tête et corps plus denses. */
@media (max-width: 768px) {
  #premium-panel #premium-head { padding: 10px 12px 8px; padding-top: max(10px, env(safe-area-inset-top)); }
  #premium-panel #premium-scroll { padding: 12px 12px 16px; gap: 12px; }
  #premium-panel .premium-block { padding: 12px 12px; }
  #premium-panel .shop-grid { grid-template-columns: 1fr; }
  #premium-panel .dovion-xp-grid { grid-template-columns: repeat(auto-fit, minmax(min(136px, 100%), 1fr)); gap: 10px; }
  #premium-panel .panel-x { width: 40px; height: 40px; top: max(8px, env(safe-area-inset-top)); right: 10px; }
  #premium-panel .premium-head-row { padding-right: 42px; }
  /* Coffre de départ : l'image au-dessus du texte (la rangée forcée par le style injecté
     déborde sous ~560px). */
  #premium-panel .premium-hero { flex-direction: column !important; gap: 10px !important; padding: 14px 14px !important; }
  #premium-panel .premium-hero .chest-anim { width: 104px !important; height: 84px !important; }
}

/* Téléphone étroit : réserve compacte, onglets pleine largeur. */
@media (max-width: 560px) {
  #premium-panel .premium-head-row { gap: 8px; flex-wrap: wrap; }
  #premium-panel #shop-reserve { font-size: 12px; padding: 5px 10px; }
  #premium-panel #premium-head h2 { font-size: 18px; }
  #premium-panel .shop-tab { padding: 10px 8px; font-size: 13px !important; }
}

/* Paysage court (téléphone à l'horizontale) : en-tête minimal, tout le reste au corps. */
@media (orientation: landscape) and (max-height: 560px) {
  #premium-panel #premium-head { padding: 6px 12px 6px; }
  #premium-panel .premium-head-row { padding-right: 40px; }
  #premium-panel #premium-head h2 { font-size: 16px; }
  #premium-panel #shop-reserve { font-size: 11.5px; padding: 4px 9px; }
  #premium-panel .shop-tabbar { margin: 6px auto 0; }
  #premium-panel .shop-tab { padding: 7px 8px; font-size: 12.5px !important; }
  #premium-panel .shop-hist-wrap { margin: 2px auto 0; }
  #premium-panel #premium-scroll { padding: 10px 12px 12px; gap: 10px; }
  #premium-panel .panel-x { width: 36px; height: 36px; top: 6px; right: 8px; }
  #premium-panel #shop-action { padding-top: 6px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
}

/* Cibles tactiles ≥ 44px sur les actions d'achat. */
body.vtouch #premium-panel .shop-action-btn,
body.vtouch #premium-panel .premium-buy,
body.vtouch #premium-panel .ds-pack-buy,
body.vtouch #premium-panel .sg-btn,
body.vtouch #dovion-shop-ov .ds-buy,
body.vtouch #dovion-shop-ov .ds-close { min-height: 44px; }

/* Mouvement réduit : plus de transitions décoratives. */
@media (prefers-reduced-motion: reduce) {
  #premium-panel .shop-item,
  #premium-panel .premium-card,
  #premium-panel .ds-pack-card,
  #premium-panel .shop-tab,
  #premium-panel .panel-x { transition: none !important; }
}