/* Boutique Ultimate RP : adaptations du design du site (site.css) aux pages de Tebex.
   Mêmes couleurs, polices et formes que le site ; seules les classes « tx-… » sont propres au thème. */

/* Mention légale de Tebex (obligatoire) : aux couleurs de la boutique */
:root {
  --tebex-legal-footer-background-color: #0a0908;
  --tebex-legal-footer-text-color: #8f877c;
  --tebex-legal-footer-border-color: rgba(236, 211, 177, .12);
  --tebex-legal-footer-logo-color: #a59d92;
  --tebex-legal-footer-max-width: 1680px;
}
tebex-footer { position: relative; display: block; }

/* Sans JavaScript, tout reste lisible */
.no-js [data-reveal] { opacity: 1; transform: none; }
.no-js .hl::before { transform: skewX(-8deg) scaleX(1); }

/* ---------- Passage d'une page à l'autre : même fondu zoom que le site (Chrome, Edge) ---------- */
@view-transition { navigation: auto; }
.hd { view-transition-name: entete; }
.flux { view-transition-name: page; }
/* Le fond passe en douceur de l'affiche vive (accueil) à l'affiche floue (autres pages) */
::view-transition-old(fond) { animation: tx-fond-out .7s ease both; }
::view-transition-new(fond) { animation: vt-fondu .7s ease both; }
@keyframes tx-fond-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Accueil : CGV/CGU ouvertes sur /#/cgv ---------- */
.vue-cgv { min-height: 100vh; }

/* ---------- Images des produits Tebex : emblèmes détourés (couronnes, piles de coins) sur fond sombre, comme les pièces du site ---------- */
.prod-img.tx-img { display: grid; place-items: center; background: radial-gradient(70% 60% at 50% 46%, rgba(236, 211, 177, .26), transparent 70%), #12100e; filter: none; }
.prod-img.tx-img::before { content: ""; position: absolute; inset: 0; background: var(--img-logo) center / cover; opacity: .1; mix-blend-mode: screen; }
.prod-img.tx-img img { position: relative; width: 76%; height: 76%; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .7)); transition: transform .7s var(--ease); }
.prod:hover .prod-img.tx-img img { transform: translateY(-4%) scale(1.05) rotate(-2deg); }
.prod.is-epuise .prod-img.tx-img img { filter: grayscale(1) brightness(.7); }
.tx-logo { position: relative; display: block; width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--img-logo) center / cover; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .8); }
.prod-prix small s { text-decoration-thickness: 2px; }
.prod-pts[hidden], .poster-d[hidden] { display: none; }

/* Photo d'une fiche produit : l'emblème du produit dans le cadre de papier */
.ph-photo .ph-img { --img: var(--img-b); --pos: 84% 12%; --size: 260%; }
.ph-photo .cadre.tx-embleme { display: grid; place-items: center; aspect-ratio: 1.15; padding: 0; border: 8px solid var(--papier);
  background: radial-gradient(70% 60% at 50% 46%, rgba(236, 211, 177, .28), transparent 70%), #12100e; }
.ph-photo .cadre.tx-embleme.ht::after { inset: 0; }
.tx-embleme img { width: 74%; height: 84%; object-fit: contain; filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .75)); }
.tx-embleme .tx-logo { width: 40%; }

/* Petites images (panier, autres produits, derniers achats) */
.pl-img img, .autre-img.tx-mini img { width: 100%; height: 100%; object-fit: contain; background: #12100e; }
.pl-img img { padding: 4px; }
.autre-img.tx-mini { display: grid; background: var(--papier); }
.autre-img.tx-mini img { padding: 5px; }
.pl-logo { display: block; width: 100%; height: 100%; background: var(--img-logo) center / cover; }
.an-vis img { width: 100%; height: 100%; padding: 7px; object-fit: contain; background: radial-gradient(70% 60% at 50% 46%, rgba(236, 211, 177, .3), transparent 70%), #12100e; }
.an-vis .tx-logo { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }

/* Nom de la catégorie dans l'étiquette d'une fiche (« Boutique » si Tebex ne la donne pas) */
.tx-cat ~ .tx-cat-defaut { display: none; }

/* ---------- Description d'un produit ou d'une catégorie écrite dans Tebex ---------- */
.tx-prose > :first-child { margin-top: 0; }
.tx-prose > :last-child { margin-bottom: 0; }
.tx-prose p { margin: 0 0 12px; }
.tx-prose ul, .tx-prose ol { margin: 0 0 12px; padding-left: 1.3em; }
.tx-prose li { margin-bottom: 4px; }
.tx-prose a { color: var(--acc); text-decoration: underline; text-underline-offset: 3px; }
.tx-prose strong, .tx-prose b { color: var(--text); font-weight: 700; }
.tx-prose h1, .tx-prose h2, .tx-prose h3, .tx-prose h4 { margin: 22px 0 10px; font-size: 20px; font-weight: 900; font-style: italic; line-height: 1.15; text-transform: uppercase; color: var(--acc); }
.tx-prose img { max-width: 100%; height: auto; }
.det-prose { margin-top: 20px; font-size: 15px; line-height: 1.75; color: rgba(246, 241, 234, .78); }
.det-prose:empty, .det-prose.is-vide { display: none; }

/* ---------- Encadré d'achat : deux boutons possibles, cadeau, retrait ---------- */
.achat .btn + .btn { margin-top: 10px; }
.achat a.btn { width: 100%; }
.tx-promo s { color: var(--muted); }
.tx-lien { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 12.5px; font-weight: 800; font-style: italic; text-transform: uppercase;
  color: rgba(246, 241, 234, .72); transition: color .3s, gap .4s var(--ease); }
.tx-lien i { font-size: 18px; color: var(--acc); }
.tx-lien:hover { color: #fff; gap: 12px; }
.achat .tx-lien { display: flex; }
.tx-cadeau, .tx-code { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.tx-cadeau[hidden] { display: none; }
.tx-cadeau .rg-search, .tx-code .rg-search { flex: 1 1 auto; height: 46px; max-width: none; }
.tx-code { max-width: 600px; margin-top: 0; }
.tx-code .poster-b, .tx-cadeau .poster-b { flex: none; height: 46px; background: var(--beige); color: var(--on-acc); }
.tx-code .poster-b:hover, .tx-cadeau .poster-b:hover { gap: 14px; box-shadow: 5px 5px 0 rgba(236, 211, 177, .2); }
.tx-coupon { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 0; padding: 10px 14px; border: 1px solid rgba(98, 212, 127, .35); background: rgba(98, 212, 127, .05); font-size: 13.5px; }
.tx-coupon > i { font-size: 18px; color: #8fe0a5; }
.tx-coupon .pl-suppr { margin-left: auto; }

/* ---------- Panier (page) ---------- */
.tx-ph-court { padding-bottom: clamp(20px, 3vw, 40px); }
.tx-liste { display: flex; flex-direction: column; gap: 10px; }
.tx-liste .panier-vide { padding: 40px 10px; border: 2px dashed var(--line-2); }
.tx-cgv { margin-top: 20px; }
.achat [data-payer-bloque] { margin-top: 18px; }
.tx-payer tebex-checkout { display: block; }
.tx-payer .btn { width: 100%; margin-top: 18px; }
.tx-secours { color: #f08a76; }
.tx-secours i { color: #f08a76; }
a.pl-suppr { cursor: pointer; }

/* ---------- Connexion FiveM ---------- */
.tx-connexion { margin-top: 28px; }
.tx-etapes { display: flex; flex-direction: column; gap: 10px; margin: 30px 0 0; padding: 0; list-style: none; }
.tx-etapes li { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: rgba(246, 241, 234, .8); }
.tx-etapes b { flex: none; width: 30px; height: 30px; display: grid; place-items: center; font-size: 13px; font-weight: 900; font-style: italic; color: var(--on-acc); background: var(--beige); transform: skewX(-8deg); }

/* ---------- Formulaires (options d'un produit) et pages libres ---------- */
.achat.tx-options, .achat.tx-page { position: relative; top: 0; max-width: 680px; }
.achat.tx-page { max-width: 920px; font-size: 15.5px; line-height: 1.75; color: rgba(246, 241, 234, .82); }
.tx-champ { margin-bottom: 20px; }
.tx-input { width: 100%; height: 50px; padding: 0 16px; border: 2px solid var(--line-2); background: var(--panneau); font-size: 14.5px; font-weight: 500; transition: border-color .3s; }
.tx-input:focus { outline: 0; border-color: var(--acc); }
.tx-input option { background: #171513; color: var(--text); }
.tx-options .cpt-l { margin-top: 4px; }
.tx-sous { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }

/* ---------- Messages de Tebex (ajout au panier, erreurs) ---------- */
.toast.is-erreur::before { background: #f08a76; }

@media (max-width: 700px) {
  .tx-cadeau, .tx-code { flex-wrap: wrap; }
  .tx-code .poster-b, .tx-cadeau .poster-b { width: 100%; justify-content: center; }
}