/* =====================================================================================
   DOVION — BOUTIQUE « PASTEL » (2026-07-25, demande Simon : plus simple, plus pastel, épuré)
   -------------------------------------------------------------------------------------
   Habillage de la SEULE boutique : #premium-panel (panneau plein écran), #dovion-shop-ov
   (modale packs + « Mes achats ») et #dovion-buy-celebrate (merci d'achat).

   POURQUOI UN FICHIER DÉDIÉ, CHARGÉ EN DERNIER
   La boutique est peinte par TROIS couches successives : css/shop-ghibli.css (mise en page
   + parchemin clair), css/sunset-arcade.css (identité prune/orange du hors-jeu, chargé
   après) et les styles INJECTÉS au runtime par js/shop-stripe.js. Reprendre l'une de ces
   couches casserait le reste du hors-jeu (l'accueil et l'écran de mort partagent
   sunset-arcade) ou entrerait en conflit avec les autres sessions. On ajoute donc une
   dernière couche, cantonnée à la boutique : réversible en retirant UNE ligne d'index.html.

   PARTI PRIS
   - PASTEL CLAIR : papier sable, cartes blanches, encre gris-chaud. Les couleurs ne servent
     plus à décorer mais à SIGNIFIER, et une seule par sens :
        abricot doux  = argent réel (€)      sauge douce = payé en XP      gris = indisponible
   - ÉPURÉ : aplats au lieu de dégradés, un trait fin + une ombre basse au lieu du relief
     doré, pas de halo ni de translation au survol, titres en 700 (plus de 900 criards).
   - La MISE EN PAGE n'est pas touchée (grilles, tailles, scroll) : uniquement couleur,
     trait, ombre, graisse. Aucun id/classe modifié → rendus JS et flux Stripe intacts.

   ÉCHELLE DE SURFACES (passe du 2026-07-26, Simon : « en thème clair c'est trop clair »)
   La 1re version posait feuille ivoire (#f7f5f1) + blocs blancs + cartes blanches : trois
   surfaces à moins de 3 % de luminance d'écart, avec un trait à 11 % d'opacité et aucune
   ombre — à l'écran, un seul aplat blanc où plus rien ne se détachait. On garde le pastel
   mais on rétablit TROIS NIVEAUX franchement distincts, du plus bas au plus haut :
        feuille = sable (--shg-paper) > bloc = ivoire (--shg-block) > carte = blanc + ombre
   Le trait (18 %) et une ombre basse portent la séparation ; les icônes ne sont plus
   désaturées jusqu'à disparaître, et les aplats de CTA sont assez soutenus pour se lire
   comme des boutons.

   Contraste vérifié sur sable/ivoire/blanc : encre 10,5:1, encre douce 7,4:1, discret 5,3:1,
   prix € 5,6:1, prix XP 5,9:1 → AA partout, y compris sur les pastilles pleines.

   Sommaire : 0. jetons · 1. feuille · 2. en-tête/onglets · 3. blocs · 4. carte VIP
              5. articles XP · 6. trésor (€) · 7. barre d'action · 8. modales · 9. détails
   ===================================================================================== */

/* ============================ 0. JETONS PASTEL ============================
   On REDÉFINIT les jetons --shg-* (mêmes sélecteurs que shop-ghibli/sunset-arcade → même
   spécificité, mais chargé plus tard = gagne). Tout ce qui consomme un jeton suit sans
   surcharge supplémentaire ; les sections suivantes ne traitent que les couleurs EN DUR. */
#premium-panel,
#dovion-shop-ov,
#dovion-buy-celebrate {
  /* surfaces — TROIS niveaux qui se distinguent à l'œil (cf. « échelle de surfaces » en tête) */
  --shg-paper: #e9e2d6;                          /* NIVEAU 0 — feuille : papier sable */
  --shg-paper-2: #e0d8c9;                        /* sable soutenu (en-tête / barre d'action) */
  --shg-block: #fbf8f2;                          /* NIVEAU 1 — bloc de section : ivoire */
  --shg-card: #ffffff;                           /* NIVEAU 2 — carte blanche (posée sur le bloc) */
  --shg-card-warm: #fffdf9;                      /* carte blanche tiédie (offres €) */
  --shg-border: rgba(74, 60, 45, 0.18);          /* trait neutre — VISIBLE sans être un cadre */
  --shg-border-strong: rgba(74, 60, 45, 0.32);
  /* encres */
  --shg-ink: #3c3733;                            /* texte principal (10,5:1) */
  --shg-ink-soft: #57504a;                       /* secondaire (7,4:1) */
  --shg-muted: #6b645d;                          /* discret (5,3:1) */
  --shg-gold-deep: #93582f;                      /* ARGENT RÉEL : prix, titres (5,6:1) */
  --shg-gold: #f0c9a2;                           /* abricot doux (remplissages) */
  --shg-sage-deep: #3f6b52;                      /* PAYÉ EN XP : prix, chips (5,9:1) */
  --shg-sage: #bcd7c2;                           /* sauge douce (remplissages) */
  --shg-danger: #a0554d;                         /* rose fané (manque / verrouillé) */
  --shg-radius: 14px;
  --shg-radius-sm: 10px;
  /* ombre BASSE et large : elle décolle la carte de son bloc sans ramener le relief doré */
  --shg-shadow-card: 0 1px 2px rgba(64, 50, 36, 0.07), 0 6px 16px rgba(64, 50, 36, 0.06);
  /* CTA — aplats pastel, encre foncée. Assez soutenus pour se lire comme des boutons sur blanc. */
  --shg-cta-gold: #e8b482;                       /* € (offre mise en avant) */
  --shg-cta-gold-ink: #4d2b10;
  --shg-cta-brown: #f0cba6;                      /* € (packs courants) — même famille, plus clair */
  --shg-cta-brown-ink: #55310f;
  --shg-cta-sage: #aed0b7;                       /* XP */
  --shg-cta-sage-ink: #244736;
  /* fond des états INDISPONIBLES (bouton grisé, prix hors budget) : assez marqué pour qu'on
     voie qu'il y a un bouton — l'ancien 5 % disparaissait purement et simplement. */
  --shg-off: rgba(60, 55, 51, 0.10);
}

/* ============================ 1. FEUILLE ============================ */
/* Voile : gris-chaud translucide uni (plus de halo orangé ni de dégradé). */
#premium-panel {
  background: rgba(46, 42, 38, 0.46) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* La feuille plein écran : un seul aplat ivoire. */
#premium-panel #premium-box {
  background: var(--shg-paper) !important;
  box-shadow: none !important;
  color: var(--shg-ink);
}
/* Croix de fermeture : pastille blanche, trait fin. */
#premium-panel .panel-x,
#dovion-shop-ov .panel-x {
  background: #ffffff !important;
  color: var(--shg-ink-soft) !important;
  border: 1px solid var(--shg-border-strong) !important;
  box-shadow: none !important;
}
#premium-panel .panel-x:hover,
#dovion-shop-ov .panel-x:hover {
  background: #ffffff !important;
  border-color: var(--shg-danger) !important;
  color: var(--shg-danger) !important;
}

/* ============================ 2. EN-TÊTE + ONGLETS ============================ */
/* Bandeau du haut : sable soutenu — c'est ce qui fait exister les pilules blanches des onglets
   (sur l'ancien fond ivoire, l'onglet inactif était blanc sur blanc, donc invisible). */
#premium-panel #premium-head {
  background: var(--shg-paper-2) !important;
  border-bottom: 1px solid var(--shg-border-strong) !important;
  box-shadow: none !important;
}
#premium-panel #premium-head h2 {
  font-weight: 700;
  letter-spacing: 0;
  color: var(--shg-ink) !important;
  text-shadow: none !important;
}
/* Solde de réserve : pastille sauge en aplat (c'est de l'XP → sauge). */
#premium-panel #shop-reserve {
  background: var(--shg-sage) !important;
  border: 1px solid rgba(63, 107, 82, 0.22) !important;
  color: var(--shg-sage-deep) !important;
  box-shadow: none !important;
  font-weight: 600;
}
#premium-panel .shop-reserve-ic,
#premium-panel #shop-reserve b { color: var(--shg-sage-deep) !important; }
/* Rang : pastille neutre (l'info est secondaire — plus de plaque dorée). */
#premium-panel #shop-reserve-rank,
#premium-panel .shop-reserve-rank {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(63, 107, 82, 0.18) !important;
  color: var(--shg-sage-deep) !important;
  font-weight: 600;
  text-shadow: none !important;
}

/* Onglets : deux pilules blanches ; l'actif se remplit de sa couleur de sens. */
#premium-panel .shop-tab {
  background: #ffffff !important;
  border: 1px solid var(--shg-border) !important;
  color: var(--shg-muted) !important;
  font: 600 14px/1 system-ui, 'Segoe UI', sans-serif !important;
  box-shadow: none !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#premium-panel .shop-tab:hover {
  transform: none;
  border-color: var(--shg-border-strong) !important;
  color: var(--shg-ink) !important;
}
/* actif — « Payé en XP » : sauge */
#premium-panel .shop-tab.is-active,
#premium-panel .shop-tab.selected {
  background: var(--shg-cta-sage) !important;
  border-color: rgba(63, 107, 82, 0.28) !important;
  color: var(--shg-cta-sage-ink) !important;
  box-shadow: none !important;
}
/* actif — « ★ Premium » (argent réel) : abricot */
#premium-panel .shop-tabbar .shop-tab:first-child.is-active,
#premium-panel .shop-tabbar .shop-tab:first-child.selected {
  background: var(--shg-cta-gold) !important;
  border-color: rgba(147, 88, 47, 0.28) !important;
  color: var(--shg-cta-gold-ink) !important;
  box-shadow: none !important;
}
#premium-panel .shop-hist-link { color: var(--shg-muted) !important; font-weight: 600; }
#premium-panel .shop-hist-link:hover { color: var(--shg-ink) !important; }

/* ============================ 3. BLOCS DE SECTION ============================ */
/* NIVEAU 1 : ivoire sur la feuille sable. Les cartes blanches posées dedans (§5, §6) se
   détachent alors d'elles-mêmes — c'est tout le principe de l'échelle de surfaces. */
#premium-panel .premium-block {
  background: var(--shg-block) !important;
  border: 1px solid var(--shg-border) !important;
  border-radius: var(--shg-radius) !important;
  box-shadow: var(--shg-shadow-card) !important;
}
/* Titres de section : plus de 900 + interlettrage large. Un simple libellé discret. */
#premium-panel .premium-block-head h4 {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--shg-ink) !important;
}
#premium-panel .shop-tag { color: var(--shg-muted) !important; font-weight: 400; }
/* Sous-titres « Cosmétiques » : trait de séparation neutre. */
#premium-panel .cosmo-sub {
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--shg-muted) !important;
  border-top: 1px solid var(--shg-border) !important;
}
#premium-panel .cosmo-sub .shop-emoji-hint { color: var(--shg-sage-deep) !important; font-weight: 400; }

/* ============================ 4. CARTE VIP (grade) ============================ */
/* Une carte comme les autres : blanche, trait abricot pour dire « argent réel possible ». */
#premium-panel .shop-grade {
  background: var(--shg-card-warm) !important;
  border: 1px solid rgba(147, 88, 47, 0.30) !important;
  border-radius: var(--shg-radius) !important;
  box-shadow: var(--shg-shadow-card) !important;
  color: var(--shg-ink);
}
#premium-panel .shop-grade::before { background: none !important; } /* liseré doré retiré */
#premium-panel .shop-grade .sg-eyebrow {
  color: var(--shg-gold-deep) !important;
  background: rgba(240, 201, 162, 0.38) !important;
  border: 1px solid rgba(147, 88, 47, 0.20) !important;
  font-weight: 600;
}
#premium-panel .shop-grade .sg-ic {
  color: var(--shg-gold-deep) !important;
  background: rgba(240, 201, 162, 0.45) !important;
  border: 1px solid rgba(147, 88, 47, 0.18) !important;
  text-shadow: none !important;
}
#premium-panel .shop-grade .sg-title { color: var(--shg-ink) !important; }
#premium-panel .shop-grade .sg-perks li { color: var(--shg-ink-soft) !important; }
/* Puce ⚓ des avantages : c'est un EMOJI (content: '⚓' dans style.css) → il s'affiche en ancre bleue
   quelle que soit la `color`. On le désature pour qu'il redevienne une simple puce. */
#premium-panel .shop-grade .sg-perks li::before {
  color: var(--shg-muted) !important;
  filter: grayscale(1) opacity(0.5);
}
#premium-panel .shop-grade .sg-badge,
#premium-panel .shop-grade .sg-st-ok {
  background: var(--shg-sage) !important;
  color: var(--shg-sage-deep) !important;
  border: 1px solid rgba(63, 107, 82, 0.22) !important;
}
#premium-panel .shop-grade .sg-badge.sg-off {
  background: var(--shg-off) !important;
  color: var(--shg-muted) !important;
  border-color: var(--shg-border-strong) !important;
}
#premium-panel .shop-grade .sg-status {
  background: var(--shg-card) !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; }
/* CTA du grade : XP = sauge, € = abricot. Aplats, sans ombre. */
#premium-panel .shop-grade .sg-xp {
  background: var(--shg-cta-sage) !important;
  color: var(--shg-cta-sage-ink) !important;
  border: 1px solid rgba(63, 107, 82, 0.22) !important;
  box-shadow: none !important;
}
/* Prix hors budget : reste gris (indisponible) mais garde un fond et un trait — sinon le bouton
   « 1 SEMAINE / 35 000 perles » n'existait tout simplement plus à l'écran. */
#premium-panel .shop-grade .sg-xp.sg-need {
  background: var(--shg-off) !important;
  color: var(--shg-muted) !important;
  border: 1px solid var(--shg-border-strong) !important;
  box-shadow: none !important;
}
#premium-panel .shop-grade .sg-eur {
  background: var(--shg-cta-gold) !important;
  color: var(--shg-cta-gold-ink) !important;
  border: 1px solid rgba(147, 88, 47, 0.22) !important;
  box-shadow: none !important;
}
#premium-panel .shop-grade .sg-hint { color: var(--shg-danger) !important; font-weight: 400; }

/* ============================ 5. ARTICLES PAYÉS EN XP ============================ */
/* Mini-boosts : lignes blanches, prix en sauge quand c'est abordable. */
#premium-panel .shop-item {
  background: var(--shg-card) !important;
  border: 1px solid var(--shg-border) !important;
  border-radius: var(--shg-radius-sm) !important;
  box-shadow: var(--shg-shadow-card) !important;
  transition: border-color .15s ease, background .15s ease;
}
#premium-panel .shop-item:hover {
  transform: none;
  background: #fdfdfc !important;
  border-color: rgba(63, 107, 82, 0.42) !important;
  box-shadow: var(--shg-shadow-card) !important;
}
/* Icônes d'articles : emojis colorés RAMENÉS AU CALME (le sepia sombre de la version parchemin
   noircissait tout). Désaturation ALLÉGÉE le 2026-07-26 : à 0.55/0.75 sur fond blanc, les
   pastilles des mini-boosts n'étaient plus que des taches grises indistinctes. */
#premium-panel .shop-item-ic {
  filter: grayscale(0.2) opacity(0.95);
}
#premium-panel .shop-item-body b { color: var(--shg-ink) !important; font-weight: 600; }
#premium-panel .shop-item-body small { color: var(--shg-muted) !important; }
#premium-panel .shop-item-price { color: var(--shg-muted) !important; font-weight: 600; }
#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-qty {
  background: var(--shg-sage) !important;
  color: var(--shg-sage-deep) !important;
  font-weight: 700;
}
#premium-panel .shop-item.owned {
  background: var(--shg-card) !important;
  border-color: rgba(63, 107, 82, 0.42) !important;
  box-shadow: var(--shg-shadow-card) !important;
}
/* Sélection : un anneau fin, pas un fond doré. */
#premium-panel .shop-item.is-selected {
  background: var(--shg-card) !important;
  border-color: rgba(147, 88, 47, 0.62) !important;
  box-shadow: 0 0 0 2px rgba(147, 88, 47, 0.28) !important;
}

/* Cartes cosmétiques (skins / traînées / pavillons). */
#premium-panel .premium-card {
  background: var(--shg-card) !important;
  border: 1px solid var(--shg-border) !important;
  box-shadow: var(--shg-shadow-card) !important;
  transition: border-color .15s ease;
}
#premium-panel .premium-card:hover {
  transform: none;
  border-color: rgba(63, 107, 82, 0.42) !important;
  box-shadow: var(--shg-shadow-card) !important;
}
#premium-panel .premium-card-name { color: var(--shg-ink) !important; font-weight: 600; }
/* Badge prix / état : aplat pastel. Et surtout il NE TRONQUE PLUS (« OFFERT AU… », « DÉBLO… ») :
   la base .premium-lock impose nowrap + ellipsis sur une tuile de ~100 px → libellé illisible.
   On autorise deux lignes. */
#premium-panel .premium-card .premium-lock {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.25;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--shg-gold-deep) !important;
  background: rgba(240, 201, 162, 0.34) !important;
}
/* possédé / porté / bientôt : sauge, sauge pleine, gris */
#premium-panel .premium-card.is-owned .premium-lock,
#premium-panel .premium-card.is-worn .premium-lock {
  color: var(--shg-sage-deep) !important;
  background: var(--shg-sage) !important;
}
#premium-panel .premium-card .premium-lock.lock-soon {
  color: var(--shg-muted) !important;
  background: var(--shg-off) !important;
}
#premium-panel .premium-card.is-owned,
#premium-panel .premium-card.is-worn {
  border-color: rgba(63, 107, 82, 0.42) !important;
  box-shadow: var(--shg-shadow-card) !important;
}
#premium-panel .premium-card.is-selected {
  border-color: rgba(147, 88, 47, 0.62) !important;
  box-shadow: 0 0 0 2px rgba(147, 88, 47, 0.28) !important;
}
#premium-panel .premium-card.is-selected .premium-lock {
  color: var(--shg-cta-gold-ink) !important;
  background: var(--shg-cta-gold) !important;
}

/* Emojis premium. */
#premium-panel .shop-emoji {
  background: var(--shg-card) !important;
  border: 1px solid var(--shg-border) !important;
  box-shadow: var(--shg-shadow-card) !important;
}
#premium-panel .shop-emoji-req { color: var(--shg-muted) !important; }
/* Pastille « NOUVEAU » : rouge vif + halo (style.css) → sauge discrète, sans halo. */
#premium-panel .shop-emoji.is-new {
  border-color: rgba(63, 107, 82, 0.35) !important;
  box-shadow: none !important;
}
#premium-panel .shop-emoji.is-new::after {
  background: var(--shg-sage) !important;
  color: var(--shg-sage-deep) !important;
  font-weight: 600;
  box-shadow: none !important;
  animation: none !important;
}
/* Réserve d'XP : le ✦ de l'en-tête reste un glyphe, pas un emoji coloré — rien à désaturer,
   mais les icônes d'articles (emojis des mini-boosts) le sont plus haut (§5). */

/* Bouton « Regarder une pub » (XP gratuite) : neutre — c'est une option, pas une offre. */
#premium-panel .premium-ad {
  background: var(--shg-card) !important;
  border: 1px solid var(--shg-border-strong) !important;
  color: var(--shg-ink-soft) !important;
  font-weight: 600;
  box-shadow: var(--shg-shadow-card) !important;
}

/* ============================ 6. TRÉSOR (ARGENT RÉEL) ============================ */
/* La grille des packs était réglée pour TROIS cartes (`auto-fit, minmax(150px, 1fr)`) : depuis le
   passage à DEUX packs (2026-07-25) chaque carte prenait la moitié des 1 100 px de la colonne et
   l'ensemble paraissait étiré. On borne la largeur d'une carte et on centre la rangée → deux packs
   ont l'air VOULUS. Reste correct si un 3e pack revient (la rangée se remplit simplement). */
#premium-panel .dovion-xp-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
/* Packs d'XP : cartes blanches ; seule la valeur (XP) et le prix portent la couleur. */
#premium-panel .ds-pack-card {
  background: var(--shg-card-warm) !important;
  border: 1px solid var(--shg-border) !important;
  border-radius: var(--shg-radius) !important;
  box-shadow: var(--shg-shadow-card) !important;
  transition: border-color .15s ease;
}
#premium-panel .ds-pack-card:hover {
  transform: none;
  border-color: rgba(147, 88, 47, 0.45) !important;
  box-shadow: var(--shg-shadow-card) !important;
}
/* Le losange décoratif ✦ des packs : retiré (bruit visuel pur). */
#premium-panel .ds-pack-coin { display: none !important; }
#premium-panel .ds-pack-xp { color: var(--shg-ink) !important; font-weight: 700; }
#premium-panel .ds-pack-xp small { color: var(--shg-muted) !important; }
#premium-panel .ds-pack-name { color: var(--shg-muted) !important; }
/* Bonus (« +25 % offert », « + N tickets ») : deux pastilles sauge identiques, à plat. */
#premium-panel .ds-pack-bonus,
#premium-panel .ds-pack-tickets {
  font: 600 10.5px/1 system-ui !important;
  color: var(--shg-sage-deep) !important;
  background: var(--shg-sage) !important;
  border-radius: 999px;
  box-shadow: none !important;
}
/* Bouton € : abricot clair sur les packs courants, abricot plein sur l'offre mise en avant. */
#premium-panel .ds-pack-buy,
#dovion-shop-ov .ds-pack-buy {
  background: var(--shg-cta-brown) !important;
  color: var(--shg-cta-brown-ink) !important;
  border: 1px solid rgba(147, 88, 47, 0.20) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
#premium-panel .ds-pack-buy:hover { filter: none; background: #f4d2b3 !important; }
/* Rubans « POPULAIRE » / « MEILLEURE OFFRE » : petites pastilles plates. */
#premium-panel .ds-pack-ribbon {
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  box-shadow: none !important;
}
#premium-panel .ds-pack-card.is-popular {
  border-color: rgba(63, 107, 82, 0.42) !important;
  box-shadow: var(--shg-shadow-card) !important;
}
#premium-panel .ds-pack-card.is-popular .ds-pack-ribbon {
  color: var(--shg-sage-deep) !important;
  background: var(--shg-sage) !important;
}
#premium-panel .ds-pack-card.is-best {
  background: var(--shg-card-warm) !important;
  border-color: rgba(147, 88, 47, 0.52) !important;
  box-shadow: 0 0 0 2px rgba(147, 88, 47, 0.16), 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;
}
#premium-panel .ds-pack-card.is-best .ds-pack-buy {
  background: var(--shg-cta-gold) !important;
  color: var(--shg-cta-gold-ink) !important;
  border-color: rgba(147, 88, 47, 0.30) !important;
  box-shadow: none !important;
}

/* Coffre de départ (encart héros) : carte blanche tiédie, sans halo doré. */
#premium-panel .premium-hero {
  background: var(--shg-card-warm) !important;
  border: 1px solid rgba(147, 88, 47, 0.30) !important;
  border-radius: var(--shg-radius) !important;
  box-shadow: var(--shg-shadow-card) !important;
}
#premium-panel .premium-hero-body h3 { color: var(--shg-ink) !important; font-weight: 700; }
#premium-panel .premium-hero-desc { color: var(--shg-ink-soft) !important; }
#premium-panel .premium-perks li { color: var(--shg-ink-soft) !important; }
/* Pastilles d'avantage : rondelles dorées vives (style.css) → aplat sauge très clair, et l'emoji
   qu'elles contiennent est désaturé comme les autres icônes de la boutique. */
#premium-panel .premium-perks .perk-ic {
  background: var(--shg-off) !important;
  color: var(--shg-muted) !important;
  filter: grayscale(0.25) opacity(0.95);
}
#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;
  border: 1px solid rgba(147, 88, 47, 0.28) !important;
  font-weight: 700;
  box-shadow: none !important;
}
#premium-panel .premium-buy:hover { filter: none; background: #ecc096 !important; }
/* Rayons / étincelles du coffre : décor animé retiré (épuré + moins de peinture). Le coffre
   lui-même (SVG en dur, bois saturé) est adouci pour ne pas être la tache la plus forte de l'écran. */
#premium-panel .premium-hero .chest-rays,
#premium-panel .premium-hero .chest-spark { display: none !important; }
#premium-panel .premium-hero .chest-big { filter: saturate(0.85) opacity(1); }

/* Bandeau « 1er achat DOUBLÉ » : sauge douce (c'est un cadeau, pas une alarme). */
#premium-panel .dovion-fpb {
  background: var(--shg-sage) !important;
  color: var(--shg-sage-deep) !important;
  border: 1px solid rgba(63, 107, 82, 0.22) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
#premium-panel .dovion-fpb b { color: var(--shg-sage-deep) !important; font-weight: 700; }

/* Bundles « Trésors » (section vide aujourd'hui, gardée cohérente si un bundle revient). */
#premium-panel .bundle-card {
  background: var(--shg-card-warm) !important;
  border: 1px solid var(--shg-border) !important;
  box-shadow: var(--shg-shadow-card) !important;
}
#premium-panel .bundle-name { color: var(--shg-ink) !important; font-weight: 700; }
#premium-panel .bundle-tag { color: var(--shg-muted) !important; }
#premium-panel .bundle-perks { color: var(--shg-ink-soft) !important; }
#premium-panel .bundle-buy {
  background: var(--shg-cta-gold) !important;
  color: var(--shg-cta-gold-ink) !important;
  border: 1px solid rgba(147, 88, 47, 0.28) !important;
  box-shadow: none !important;
}

/* ============================ 7. BARRE D'ACTION ============================ */
/* Pied fixe : même sable soutenu que l'en-tête, pour qu'il se lise comme une BARRE et non comme
   la suite de la feuille (le bouton d'achat désactivé y flottait sans support visible). */
#premium-panel #shop-action {
  background: var(--shg-paper-2) !important;
  border-top: 1px solid var(--shg-border-strong) !important;
  box-shadow: 0 -6px 16px rgba(64, 50, 36, 0.06) !important;
}
#premium-panel .shop-action-info b { color: var(--shg-ink) !important; font-weight: 600; }
#premium-panel .shop-action-info small { color: var(--shg-muted) !important; }
#premium-panel .shop-action-btn {
  background: var(--shg-cta-sage) !important;         /* l'action par défaut est un achat en XP */
  color: var(--shg-cta-sage-ink) !important;
  border: 1px solid rgba(63, 107, 82, 0.24) !important;
  font-weight: 700;
  box-shadow: none !important;
}
#premium-panel .shop-action-btn:disabled {
  background: var(--shg-off) !important;
  color: var(--shg-muted) !important;
  border-color: var(--shg-border-strong) !important;
  box-shadow: none !important;
}
#premium-panel .shop-action-btn.is-login {
  background: var(--shg-cta-gold) !important;
  color: var(--shg-cta-gold-ink) !important;
  border-color: rgba(147, 88, 47, 0.24) !important;
}

/* ============================ 8. MODALES AUTONOMES ============================ */
/* #dovion-shop-ov : liste des packs (DovionShop.open) + « Mes achats ». */
#dovion-shop-ov {
  background: rgba(46, 42, 38, 0.46) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#dovion-shop-ov .ds-card {
  background: var(--shg-paper) !important;
  color: var(--shg-ink) !important;
  border: 1px solid var(--shg-border-strong) !important;
  border-radius: var(--shg-radius) !important;
  box-shadow: 0 10px 30px rgba(40, 34, 28, 0.18) !important;
}
#dovion-shop-ov .ds-card h2 { color: var(--shg-ink) !important; font-weight: 700; text-shadow: none !important; }
#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: var(--shg-card) !important;
  border: 1px solid var(--shg-border) !important;
  border-radius: var(--shg-radius-sm) !important;
  box-shadow: var(--shg-shadow-card) !important;
}
#dovion-shop-ov .ds-pack b { color: var(--shg-ink) !important; font-weight: 600; }
#dovion-shop-ov .ds-pack small { color: var(--shg-muted) !important; }
#dovion-shop-ov .ds-pack > span { color: var(--shg-gold-deep) !important; font-weight: 700; }
#dovion-shop-ov .ds-buy {
  background: var(--shg-cta-gold) !important;
  color: var(--shg-cta-gold-ink) !important;
  border: 1px solid rgba(147, 88, 47, 0.24) !important;
  font-weight: 700;
  box-shadow: none !important;
}
#dovion-shop-ov .ds-close {
  background: #ffffff !important;
  border: 1px solid var(--shg-border-strong) !important;
  color: var(--shg-ink-soft) !important;
  font-weight: 600;
}
#dovion-shop-ov .ds-close:hover { border-color: var(--shg-ink-soft) !important; color: var(--shg-ink) !important; }

/* Toast : il flotte AUSSI au-dessus de la mer en jeu → il reste sombre (lisible partout),
   mais en gris-chaud neutre plutôt qu'en brun doré. */
#dovion-shop-toast {
  background: rgba(52, 47, 42, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #f6f3ef !important;
}

/* Confirmation d'achat : carte claire, coche sauge, pluie de pièces retirée. */
#dovion-buy-celebrate { background: rgba(46, 42, 38, 0.42) !important; }
#dovion-buy-celebrate .dbc-card {
  background: var(--shg-paper) !important;
  border: 1px solid var(--shg-border-strong) !important;
  box-shadow: 0 10px 30px rgba(40, 34, 28, 0.2) !important;
}
#dovion-buy-celebrate .dbc-check {
  background: var(--shg-sage) !important;
  color: var(--shg-sage-deep) !important;
}
#dovion-buy-celebrate .dbc-title { color: var(--shg-ink) !important; font-weight: 700; }
#dovion-buy-celebrate .dbc-sub { color: var(--shg-ink-soft) !important; }
#dovion-buy-celebrate .dbc-coin { display: none !important; }

/* ============================ 9. DÉTAILS ============================ */
/* Barre de défilement discrète, accordée à l'ivoire. */
#premium-panel #premium-scroll { scrollbar-color: rgba(60, 55, 51, 0.28) transparent; }
#premium-panel #premium-scroll::-webkit-scrollbar-thumb { background: rgba(60, 55, 51, 0.22) !important; }
#premium-panel #premium-scroll::-webkit-scrollbar-thumb:hover { background: rgba(60, 55, 51, 0.34) !important; }

/* Aperçus de cosmétiques verrouillés : simple voile, plus de désaturation appuyée. */
#premium-panel .premium-card.is-locked .premium-card-prev { filter: opacity(0.62); }
#premium-panel .premium-card.is-soon .premium-card-prev { filter: grayscale(0.5) opacity(0.55); }