/* Boutique Ultimate RP : design du site recopié tel quel (commun.css, style de index.html, boutique.css).
   Ne pas modifier ici : les adaptations au thème Tebex sont dans tebex.css, chargé après ce fichier. */

/* ===================================================================================================
   commun.css
   =================================================================================================== */

/* Base de la boutique (même mécanique que le site Ultimate RP) : pages, apparitions, menus, titres découpés.
   Couleurs, polices et formes sont définies dans index.html et boutique.css. */
*, *::before, *::after { box-sizing: border-box; }
/* clip sur html ET body : sur téléphone, un bloc qui entre par la droite ne doit jamais élargir la page (sinon le navigateur dézoome) */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body);
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--acc); color: var(--on-acc, #111); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
[hidden] { display: none !important; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

:root { --ease: cubic-bezier(.22, 1, .36, 1); --ease-io: cubic-bezier(.76, 0, .24, 1); }
.wrap { width: min(100% - 32px, var(--max, 1240px)); margin-inline: auto; }
@media (min-width: 700px) { .wrap { width: min(100% - 64px, var(--max, 1240px)); } }

/* Mode capture (index.html?capture#/…) : animations instantanées pour les captures d'écran de vérification */
html.capture *, html.capture *::before, html.capture *::after {
  transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important;
}

/* Pages */
[data-view] { display: none; }
[data-view].is-current { display: block; }
/* Catégorie : liste des produits (#/vip) ou fiche d'un produit (#/vip/luxe) */
[data-view][data-mode="liste"] [data-mode-poste],
[data-view][data-mode="poste"] [data-mode-liste] { display: none !important; }

/* Apparitions au défilement */
[data-reveal] {
  opacity: 0; transform: translate3d(0, 32px, 0);
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms + var(--d, 0ms));
}
[data-reveal="fade"] { transform: none; }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* Titres découpés lettre par lettre */
.sp-w { display: inline-block; overflow: hidden; vertical-align: top; white-space: nowrap; padding: .34em .04em .12em; margin: -.34em -.04em -.12em; }
.sp-c {
  display: inline-block; padding-top: .3em; margin-top: -.3em; transform: translate3d(0, 118%, 0);
  transition: transform 1.1s var(--ease); transition-delay: calc(var(--i) * 30ms + var(--d, 0ms));
}
.is-in .sp-c { transform: none; }

/* Encadré glissant du menu (Ultimate.navGlisse) : position ici, apparence dans index.html */
[data-nav-principal] { position: relative; }
[data-nav-principal] > .hd-link { position: relative; z-index: 1; }
.nav-ind {
  position: absolute; left: 0; top: 0; z-index: 0; width: var(--w, 0); height: var(--h, 0); pointer-events: none; opacity: 0;
  transform: translate3d(var(--x, 0), var(--y, 0), 0);
  transition: transform .5s var(--ease), width .5s var(--ease), height .5s var(--ease), opacity .3s;
}
.nav-ind.is-on { opacity: 1; }

/* Sommaire des CGV/CGU (même mécanique que le règlement du site) */
.rg-body { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.rg-toc { position: sticky; top: var(--toc-top, 110px); }
.rg-toc-nav { display: flex; flex-direction: column; max-height: calc(100vh - 330px); overflow: auto; scrollbar-width: thin; }
.rg-toc-nav button { text-align: left; flex: none; }
@media (max-width: 960px) {
  .rg-body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .rg-toc, .rg-list { min-width: 0; }
  .rg-toc { top: 0; z-index: 5; transition: top .7s var(--ease); }
  /* L'en-tête visible recouvrirait le sommaire : il se place juste dessous */
  body:has(.hd:not(.is-hidden)) .rg-toc { top: var(--hd); }
  .rg-toc-nav { flex-direction: row; overflow-x: auto; max-height: none; white-space: nowrap; scrollbar-width: none; }
  .rg-toc-nav::-webkit-scrollbar { display: none; }
}


/* ===================================================================================================
   index.html (style de la page)
   =================================================================================================== */


/* Boutique Ultimate RP : même design que le site du serveur (maquette 3C « Hollywood Hills »), fond bannière persistant */
:root {
  color-scheme: dark;
  --bg: #0d0c0b; --bg-2: #121110; --surface: #171513; --surface-2: #1d1a17;
  --line: rgba(236, 211, 177, .12); --line-2: rgba(236, 211, 177, .24);
  --text: #f6f1ea; --muted: #a59d92; --dim: #6e675e;
  --acc: #ecd3b1; --acc-2: #d9b68a; --on-acc: #0d0c0b;
  --beige: linear-gradient(180deg, #f3dfc2, #e2c39b);
  --verre: rgba(14, 13, 12, .55); --verre-bord: rgba(255, 255, 255, .08);
  --panneau: rgba(17, 16, 14, .66);
  --couronne: #e8c39e; /* beige exact de la couronne (couronne-beige.png) */
  --papier: #efe6d8;
  --font-body: 'Poppins', system-ui, sans-serif; --font-display: 'Poppins', system-ui, sans-serif;
  /* Signature « Ultimate RP » et « Boutique » sous le logo : écriture graffiti ; --sig-k = taille relative, --sig-b = place sous le titre */
  --font-sig: 'Sedgwick Ave Display', cursive; --sig-k: .74; --sig-b: -1.14em;
  --max: 1680px; --hd: 78px;
  /* Affiche du fond (les trois vitrines) : largeur et bord gauche (mobile : vitrine du milieu centrée) */
  --fw: max(113vw, 177.78vh);
  --fl: calc(50vw - var(--fw) * .5);
  --pile: clamp(290px, 30vw, 540px);
  --col: 560px;
}
/* Ordinateur : le personnage de la vitrine du milieu tombe dans l'espace libre entre le texte et la vitrine des produits.
   Bord gauche du personnage ≈ 40 % de l'affiche, bord droit ≈ 58,5 % : le texte s'arrête avant l'un, la vitrine commence après l'autre. */
@media (min-width: 961px) {
  :root {
    --marge: max(clamp(32px, 4vw, 72px), (100vw - var(--max)) / 2);
    --fw: max(112vw, 177.78vh);
    --fl: clamp(100vw - var(--fw), 50vw - var(--fw) * .5, 0px);
    --bras: calc(var(--fl) + var(--fw) * .40);
    --main: calc(var(--fl) + var(--fw) * .585);
    --col: max(360px, var(--bras) - 40px - var(--marge));
    --pile: clamp(290px, (100vw - var(--marge) - var(--main) - 40px) / 1.03, 500px);
  }
}
/* Le fond de toutes les pages est la couche fixe .fond (les captures de transition restent transparentes) */
html, body { background: transparent; }
body { font-size: 15px; }
@media (min-width: 700px) { .wrap { width: min(100% - 2 * clamp(32px, 4vw, 72px), var(--max)); } }
/* Petits libellés (« Boutique », « Ulti Coins », « Comparatif »…) : même police que les titres, en petites capitales espacées */
.old { font-family: var(--font-display); font-weight: 800; font-style: italic; letter-spacing: .08em; text-transform: uppercase; }
.ht { position: relative; }
.ht::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .22;
  background-image: radial-gradient(rgba(0, 0, 0, .55) 1px, transparent 1.5px); background-size: 4px 4px; }
.flux { position: relative; z-index: 1; }
main { overflow-x: clip; }

/* ---------- Fond persistant : vif sur l'accueil, sombre et flou ailleurs ---------- */
.fond { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--bg); view-transition-name: fond; }
.fond-net, .fond-flou, .fond-voile, .fond-nuit, .fond-trame { position: absolute; inset: 0; }
.fond img { position: absolute; max-width: none; width: var(--fw); height: calc(var(--fw) * .5625); left: var(--fl); top: calc((100vh - var(--fw) * .5625) * .32); }
.fond-net img { transform-origin: 50% 55%; animation: respire 28s ease-in-out infinite alternate; will-change: transform; }
@keyframes respire { from { transform: scale(1); } to { transform: scale(1.04); } }
.fond-flou { opacity: 0; transform: scale(1.14); transition: opacity 1.2s var(--ease-io), transform 1.6s var(--ease); will-change: opacity, transform; }
.fond-flou img { filter: blur(22px) saturate(.9) brightness(.62); }
.fond-voile { background:
  linear-gradient(90deg, rgba(13, 12, 11, .9) 0%, rgba(13, 12, 11, .74) 24%, rgba(13, 12, 11, .3) 40%, rgba(13, 12, 11, 0) 54%),
  linear-gradient(180deg, rgba(13, 12, 11, .66) 0%, rgba(13, 12, 11, 0) 20%),
  linear-gradient(0deg, rgba(13, 12, 11, .82) 0%, rgba(13, 12, 11, 0) 24%),
  radial-gradient(60% 50% at 78% 18%, rgba(255, 214, 160, .16), transparent 70%); }
@media (min-width: 961px) {
  .fond-voile { background:
    /* Ombre derrière le texte de l'accueil (en haut à gauche) ; « Le site officiel / ultimaterp.fr » de l'affiche, dessous, reste visible */
    radial-gradient(ellipse 30% 24% at 17% 25%, rgba(13, 12, 11, .82) 0%, rgba(13, 12, 11, .6) 50%, rgba(13, 12, 11, .2) 80%, rgba(13, 12, 11, 0) 100%),
    linear-gradient(90deg, rgba(13, 12, 11, .42) 0, rgba(13, 12, 11, .25) calc(var(--bras) - 200px), rgba(13, 12, 11, 0) calc(var(--bras) + 20px)),
    linear-gradient(270deg, rgba(13, 12, 11, .45) 0, rgba(13, 12, 11, .28) calc(100% - var(--main) - 80px), rgba(13, 12, 11, 0) calc(100% - var(--main) + 20px)),
    linear-gradient(180deg, rgba(13, 12, 11, .5) 0%, rgba(13, 12, 11, 0) 16%),
    linear-gradient(0deg, rgba(13, 12, 11, .62) 0%, rgba(13, 12, 11, 0) 20%),
    radial-gradient(60% 50% at 78% 18%, rgba(255, 214, 160, .16), transparent 70%); }
}
.fond-nuit { opacity: 0; transition: opacity 1.2s var(--ease-io);
  background: radial-gradient(90% 70% at 75% 0%, rgba(236, 211, 177, .07), transparent 60%), linear-gradient(180deg, rgba(13, 12, 11, .5), rgba(13, 12, 11, .82) 60%, rgba(13, 12, 11, .9)); }
.fond-trame { opacity: .08; mix-blend-mode: multiply; background-image: radial-gradient(rgba(0, 0, 0, .7) 1px, transparent 1.5px); background-size: 4px 4px; }
.fond.is-sombre .fond-flou { opacity: 1; transform: none; }
.fond.is-sombre .fond-nuit { opacity: 1; }
.fond.is-sombre .fond-net img { animation-play-state: paused; }
.fond.sans-anim, .fond.sans-anim * { transition: none !important; }

/* Fond derrière un mot des titres : marqué au début, il s'efface vers la fin, avec une barre beige à gauche */
.hl { position: relative; display: inline-block; padding: 0 .3em 0 .34em; color: var(--text); isolation: isolate; }
.hl::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -.06em; bottom: .02em; border-left: .085em solid var(--acc); border-radius: 2px;
  background: linear-gradient(90deg, rgba(246, 241, 234, .22), rgba(246, 241, 234, .1) 50%, rgba(246, 241, 234, 0));
  transform: skewX(-8deg) scaleX(0); transform-origin: left; transition: transform .9s var(--ease) var(--hd-delay, .3s); }
.is-in .hl::before, .hl.is-in::before { transform: skewX(-8deg) scaleX(1); }

/* Boutons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 28px;
  font-size: 14px; font-weight: 800; font-style: italic; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  transform: skewX(-8deg); transition: transform .5s var(--ease), background .3s, color .3s, box-shadow .4s, border-color .3s, opacity .3s; }
.btn > * { transform: skewX(8deg); }
.btn i { font-size: 20px; }
.btn-beige { background: var(--beige); color: var(--on-acc); box-shadow: 6px 6px 0 rgba(236, 211, 177, .18); }
.btn-beige:hover { box-shadow: 9px 9px 0 rgba(236, 211, 177, .3); transform: skewX(-8deg) translate(-2px, -2px); }
.btn-out { border: 2px solid var(--text); color: var(--text); }
.btn-out:hover { background: var(--text); color: var(--on-acc); }
.btn-dark { background: var(--on-acc); color: var(--acc); }
.btn-dark:hover { background: #000; }

/* ---------- En-tête ---------- */
.hd { position: fixed; inset: 0 0 auto; z-index: 50; transition: transform .7s var(--ease); }
html.vt-actif .hd { view-transition-name: entete; }
.hd::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(13, 12, 11, .72); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--verre-bord); opacity: 0; transition: opacity .4s; }
.hd.is-scrolled::before, body.menu-open .hd::before { opacity: 1; }
.hd.is-hidden { transform: translateY(-101%); }
.hd-in { height: var(--hd); display: flex; align-items: center; gap: 22px; }
.hd-logo { display: flex; align-items: center; gap: 10px; font-weight: 900; font-style: italic; font-size: 22px; letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; }
/* Couronne Ultimate : une seule forme (couronne.css) en masque, colorée selon le fond */
.couronne { display: inline-block; flex: none; aspect-ratio: 833 / 614; background: currentColor;
  -webkit-mask: var(--masque-couronne) center / contain no-repeat; mask: var(--masque-couronne) center / contain no-repeat; }
.hd-logo .couronne { width: 40px; color: #fff; transition: color .6s, transform .7s var(--ease); }
.hd.is-scrolled .hd-logo .couronne, body:not([data-vue="accueil"]) .hd-logo .couronne, body.menu-open .hd-logo .couronne { color: var(--couronne); }
.hd-logo:hover .couronne { color: #fff; transform: rotate(-12deg) scale(1.1); }
.hd-logo b { font-weight: 900; color: var(--on-acc); background: var(--beige); padding: 0 6px; transform: skewX(-8deg); display: inline-block; }
/* « Boutique » sous le nom, en écriture signature (--font-sig, classe .sig) */
.hd-nom { display: flex; flex-direction: column; line-height: 1; }
.sig { font-family: var(--font-sig); font-weight: 400; font-style: normal; letter-spacing: 0; text-transform: none; }
.hd-sous { align-self: flex-start; margin: 1px 0 -7px 4px; font-size: calc(19px * var(--sig-k)); line-height: 1; color: var(--acc); transform: rotate(-4deg); text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
.hd-nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.hd-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px 10px 17px; font-size: 13.5px; font-weight: 600; color: rgba(246, 241, 234, .8); white-space: nowrap;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .45); transition: color .3s; }
.hd-link:hover, .hd-link.is-current { color: #fff; }
/* Encadré verre + barre beige qui glisse d'une catégorie à l'autre (étirement élastique) */
.nav-ind { transition: transform .62s cubic-bezier(.3, 1.5, .5, 1), width .62s cubic-bezier(.3, 1.5, .5, 1), height .45s var(--ease), opacity .3s; }
.nav-ind::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--verre-bord); border-radius: 3px; background: var(--verre);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .7);
  transform: scaleX(var(--sx, 1)); transform-origin: var(--so, 50% 50%); }
.nav-ind::after { content: ""; position: absolute; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--acc);
  left: calc(3px - (var(--sx, 1) - 1) * var(--w, 0px) * var(--sg, 0)); }
.hd-actions { display: flex; align-items: center; gap: 12px; }
.btn-discord { height: 44px; padding: 0 18px; font-size: 13px; background: #5865f2; color: #fff; box-shadow: 4px 4px 0 rgba(88, 101, 242, .3); }
.btn-discord:hover { transform: skewX(-8deg) translate(-2px, -2px); box-shadow: 7px 7px 0 rgba(88, 101, 242, .4); }
/* En-tête : Discord en icône seule, même taille que le panier */
.hd-actions .btn-discord { width: 50px; padding: 0; }
.hd-actions .btn-discord i { font-size: 22px; }

.hd-burger { display: none; flex: none; position: relative; width: 46px; height: 46px; background: var(--acc); color: var(--on-acc); transform: skewX(-8deg); }
.hd-burger span { position: absolute; left: 13px; right: 13px; height: 2px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease); }
.hd-burger span:first-child { top: 18px; } .hd-burger span:last-child { top: 26px; }
body.menu-open .hd-burger span { top: 22px; }
body.menu-open .hd-burger span:first-child { transform: rotate(45deg); }
body.menu-open .hd-burger span:last-child { transform: rotate(-45deg); }
.m-menu { position: fixed; inset: 0; z-index: 45; overflow: auto; padding: calc(var(--hd) + 24px) 24px 40px; background: rgba(13, 12, 11, .9);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  transform: translateX(100%); visibility: hidden; transition: transform .7s var(--ease-io), visibility 0s .7s; }
body.menu-open .m-menu { transform: none; visibility: visible; transition: transform .7s var(--ease-io), visibility 0s; }
.m-nav > * { opacity: 0; transform: translateX(30px); transition: opacity .5s, transform .8s var(--ease); }
body.menu-open .m-nav > * { opacity: 1; transform: none; transition-delay: calc(.25s + var(--i) * 50ms); }
.m-link { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 2px solid var(--line);
  font-size: 30px; font-weight: 900; font-style: italic; text-transform: uppercase; text-align: left; }
.m-link i { font-size: 24px; color: var(--acc); }
.m-extra { margin-top: 32px; }

.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 55; opacity: 0; transition: opacity .3s; pointer-events: none; }
body[data-vue="cgv"] .read-progress { opacity: 1; }
.read-progress span { display: block; height: 100%; background: var(--acc); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* ---------- Transitions de page « Fondu zoom » (View Transitions) ---------- */
html.vt-actif .flux { view-transition-name: page; }
html.vt-actif .m-menu { view-transition-name: menu-mobile; }
html.vt-actif .read-progress { view-transition-name: progression; }
::view-transition { pointer-events: none; }
::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(fond) { z-index: 1; animation: none; }
::view-transition-old(fond) { animation: none; opacity: 0; }
::view-transition-new(fond) { animation: none; opacity: 1; }
::view-transition-group(page) { z-index: 2; animation: none; }
::view-transition-old(page) { top: calc(var(--vt-sy, 0) * -1px); mix-blend-mode: normal;
  transform-origin: var(--vt-x, 50%) calc(var(--vt-y, 50vh) + var(--vt-sy, 0) * 1px); animation: vt-sortie .38s cubic-bezier(.45, 0, .75, .35) both; }
::view-transition-new(page) { mix-blend-mode: normal; transform-origin: var(--vt-x, 50%) var(--vt-y, 50vh); animation: vt-entree .65s cubic-bezier(.16, 1, .3, 1) .15s both; }
@keyframes vt-sortie { to { opacity: 0; transform: scale(.96); filter: blur(8px); } }
@keyframes vt-entree { from { opacity: 0; transform: scale(1.04); filter: blur(8px); } }
@keyframes vt-fondu { from { opacity: 0; } }
@keyframes vt-photo-fondu { to { opacity: 0; } }
::view-transition-group(menu-mobile) { z-index: 5; }
::view-transition-group(entete) { z-index: 6; }
::view-transition-group(progression) { z-index: 7; }
::view-transition-group(entete), ::view-transition-group(menu-mobile), ::view-transition-group(progression) { animation: none; }
::view-transition-old(entete), ::view-transition-old(menu-mobile), ::view-transition-old(progression) { animation: none; opacity: 0; }
::view-transition-new(entete), ::view-transition-new(menu-mobile), ::view-transition-new(progression) { animation: none; }
/* Photo d'en-tête : la photo de devant de l'accueil vole jusqu'à la photo de la page */
::view-transition-group(photo) { z-index: 4; animation-duration: .8s; animation-timing-function: cubic-bezier(.7, 0, .16, 1); }
::view-transition-old(photo), ::view-transition-new(photo) { height: 100%; object-fit: cover; }
::view-transition-old(photo) { animation: vt-photo-fondu .45s cubic-bezier(.4, 0, .2, 1) .15s both; }
::view-transition-new(photo) { animation: vt-fondu .45s cubic-bezier(.4, 0, .2, 1) .15s both; }
::view-transition-new(photo):only-child { animation: vt-photo-in .8s cubic-bezier(.16, 1, .3, 1) .18s both; }
::view-transition-old(photo):only-child { animation: vt-photo-out .4s cubic-bezier(.55, 0, .8, .25) both; }
@keyframes vt-photo-in { from { opacity: 0; transform: translateY(70px) rotate(7deg) scale(.88); } }
@keyframes vt-photo-out { to { opacity: 0; transform: translateY(-40px) rotate(-6deg) scale(.92); filter: blur(6px); } }
/* Titre : l'ancien s'efface en glissant, le nouveau n'apparaît qu'une fois l'ancienne page presque effacée */
::view-transition-group(titre) { z-index: 3; animation-duration: .8s; animation-timing-function: cubic-bezier(.7, 0, .16, 1); }
::view-transition-old(titre), ::view-transition-new(titre) { mix-blend-mode: normal; inline-size: auto; block-size: auto; }
::view-transition-old(titre) { animation: vt-titre-out .3s cubic-bezier(.55, 0, .8, .25) both; }
::view-transition-new(titre) { animation: vt-fondu .45s ease .36s both; }
@keyframes vt-titre-out { to { opacity: 0; transform: translateY(-12%); filter: blur(5px); } }

/* ---------- Titres et blocs communs ---------- */
.kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 13px; font-weight: 800; font-style: italic; text-transform: uppercase; color: var(--acc); }
.kicker .old { font-size: inherit; line-height: inherit; }
.bloc { padding-bottom: clamp(70px, 9vw, 130px); }

/* ---------- Accueil : un seul écran ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; padding-top: var(--hd); }
.hero-main { flex: 1; display: flex; align-items: center; padding: clamp(14px, 3vh, 44px) 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--pile); gap: 32px; align-items: center; }
.hero-txt { max-width: var(--col); text-shadow: 0 2px 30px rgba(0, 0, 0, .3); }
.hero-tag { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 clamp(14px, 2.4vh, 22px); padding: 7px 14px; font-size: 12.5px; font-weight: 800; font-style: italic; text-transform: uppercase; color: var(--on-acc); background: var(--acc); transform: skewX(-8deg); text-shadow: none; }
.hero-tag > * { transform: skewX(8deg); }
.hero-pre { margin: 0 0 clamp(8px, 1.4vh, 14px); font-weight: 800; font-style: italic; font-size: clamp(22px, min(2.7vw, 4.6vh), 40px); line-height: 1.15; text-transform: uppercase; letter-spacing: -.01em; }
.hero-title { margin: 0 0 clamp(16px, 2.8vh, 26px); font-weight: 900; font-style: italic; font-size: clamp(54px, min(6.4vw, 11vh, var(--col) / 4.9), 96px); line-height: .92; letter-spacing: -.035em; text-transform: uppercase; }
.hero-title .hl { --hd-delay: .9s; text-shadow: none; }
.hero-desc { max-width: 480px; margin: 0 0 clamp(20px, 3.8vh, 34px); font-size: 16px; line-height: 1.75; color: rgba(246, 241, 234, .86); }
.hero-btns { display: flex; flex-wrap: wrap; gap: 16px; text-shadow: none; }
@media (min-width: 961px) { .hero-btns { flex-wrap: nowrap; width: max-content; } }
/* Pile de 4 photos sur toute la hauteur libre de la colonne de droite */
.stack { position: relative; justify-self: end; width: 100%; height: clamp(400px, 100svh - var(--hd) - 190px, 700px);
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); }
.photo { position: absolute; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); opacity: 0; }
.cadre { position: relative; display: block; height: 100%; padding: 8px; overflow: hidden; background: var(--papier); }
.cadre.ht::after { inset: 8px; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo .ph-img { display: block; width: 100%; height: 100%; background: var(--img) var(--pos) / var(--size) no-repeat; }
/* c : palmiers (en haut) · a : les deux gars de la bannière boutique · b : l'avant de la lowrider (photo de devant) · d : le cash et les voitures (en bas) */
.photo-c { right: 3%; top: 0; width: 64%; aspect-ratio: 1920 / 1300; rotate: 6deg; }
.photo-a { left: 0; top: 19%; width: 84%; aspect-ratio: 965 / 640; rotate: -5deg; }
.photo-a img { transform: scale(1.38); transform-origin: 50% 2%; }
.photo-b { right: 0; top: 45%; width: 74%; aspect-ratio: 1920 / 1300; rotate: 4deg; }
.photo-d { left: 4%; bottom: 1%; width: 58%; aspect-ratio: 1920 / 1300; rotate: -7deg; }
.hero.is-play .photo { animation: photo-in 1.1s var(--ease) both; }
.hero.is-play .photo-c { animation-delay: .25s; }
.hero.is-play .photo-a { animation-delay: .4s; }
.hero.is-play .photo-b { animation-delay: .6s; }
.hero.is-play .photo-d { animation-delay: .75s; }
.hero.is-morph .photo-b { opacity: 1; animation: none; }
@keyframes photo-in { from { opacity: 0; transform: translateY(80px) rotate(8deg) scale(.9); } to { opacity: 1; transform: none; } }
.tape { position: absolute; z-index: 2; width: 110px; height: 30px; background: rgba(236, 211, 177, .75); }
.tape-1 { top: -12px; left: 34%; rotate: -6deg; }
.tape-2 { bottom: -10px; right: 18%; rotate: 8deg; }
.tape-3 { top: -12px; right: 22%; width: 90px; rotate: 5deg; }
.sticker { position: absolute; z-index: 3; right: 2%; bottom: 3%; width: clamp(96px, 8.6vw, 128px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: var(--acc) url(assets/logo-fond.webp) center / cover; border: 3px solid var(--papier);
  box-shadow: 5px 5px 0 rgba(13, 12, 11, .45), 0 18px 34px -14px rgba(0, 0, 0, .8); opacity: 0; transform: scale(.4) rotate(-40deg); }
.hero.is-play .sticker { opacity: 1; transform: rotate(-12deg); transition: opacity .4s 1.2s, transform 1s cubic-bezier(.34, 1.56, .64, 1) 1.2s; }
.sticker-t { position: absolute; bottom: -9%; padding: 1px 10px 3px; white-space: nowrap; font-family: var(--font-display); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: clamp(10px, .8vw, 12px); line-height: 1.3;
  color: var(--acc); background: var(--on-acc); border-radius: 2px; transform: rotate(5deg); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .7); }

/* ---------- Pages intérieures ---------- */
.ph { position: relative; padding: calc(var(--hd) + clamp(40px, 7vh, 84px)) 0 clamp(44px, 6vw, 76px); }
.ph-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 40px; align-items: center; }
.ph-photo { position: relative; justify-self: end; width: min(100%, 400px); rotate: 3deg; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); }
.ph-photo .cadre { height: auto; aspect-ratio: 1920 / 1300; }
.ph-photo .ph-img { display: block; height: 100%; background: var(--img) var(--pos, 50% 50%) / var(--size, cover) no-repeat; }
.ph-tag { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 6px 14px; font-size: 12.5px; font-weight: 800; font-style: italic; text-transform: uppercase; background: var(--acc); color: var(--on-acc); transform: skewX(-8deg); }
.ph-tag > * { transform: skewX(8deg); }
.ph-open { display: inline-flex; align-items: center; gap: 8px; margin-left: 4px; padding-left: 12px; border-left: 2px solid rgba(13, 12, 11, .25); }
.ph-title { margin: 0 0 20px; font-weight: 900; font-style: italic; font-size: clamp(46px, 6.4vw, 100px); line-height: 1.06; letter-spacing: -.035em; word-spacing: .12em; text-transform: uppercase; }
.ph-title .hl::before { top: -.13em; }
.ph-title .hl { --hd-delay: .5s; }
.ph-desc { max-width: 600px; margin: 0; font-size: 16.5px; line-height: 1.75; color: rgba(246, 241, 234, .78); }
.ph-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 24px 0 0; padding: 0; list-style: none; }
.ph-meta li { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; font-style: italic; text-transform: uppercase; color: rgba(246, 241, 234, .7); }
.ph-meta i { font-size: 18px; color: var(--acc); }

/* Cartes « pourquoi » (usages des Ulti Coins) */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.why-card { position: relative; min-height: 260px; padding: 30px; display: flex; flex-direction: column; border: 2px solid var(--line); background: var(--panneau); overflow: hidden; isolation: isolate;
  transition: transform .6s var(--ease), color .4s, border-color .4s; }
.why-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--beige); transform: translateY(101%); transition: transform .6s var(--ease); }
.why-card:hover { transform: rotate(-1.4deg) translateY(-6px); color: var(--on-acc); border-color: var(--acc); }
.why-card:hover::before { transform: none; }
.why-n { position: absolute; right: 22px; top: 8px; font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: 64px; line-height: 1; color: rgba(236, 211, 177, .18); transition: color .4s; }
.why-card:hover .why-n { color: rgba(13, 12, 11, .25); }
.why-card > i { width: 54px; height: 54px; display: grid; place-items: center; font-size: 26px; background: var(--acc); color: var(--on-acc); transform: skewX(-8deg); transition: background .4s, color .4s; }
.why-card:hover > i { background: var(--on-acc); color: var(--acc); }
.why-card h3 { margin: auto 0 10px; font-size: 25px; font-weight: 900; font-style: italic; text-transform: uppercase; line-height: 1.05; letter-spacing: -.02em; }
.why-card p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--muted); transition: color .4s; }
.why-card:hover p { color: rgba(13, 12, 11, .78); }

/* Sommaire et sections des CGV/CGU (même style que le règlement du site) */
.rg-wrap { padding: 10px 0 150px; }
.rg-toc-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; font-weight: 900; font-style: italic; text-transform: uppercase; color: var(--acc); }
.rg-toc-nav button { position: relative; padding: 8px 12px 8px 16px; font-size: 13.5px; font-weight: 500; color: var(--muted); border: 1px solid transparent; border-radius: 3px; transition: color .3s, background .3s, border-color .3s; }
.rg-toc-nav button::before { content: ""; position: absolute; left: 3px; top: 7px; bottom: 7px; width: 3px; border-radius: 2px; background: var(--acc); transform: scaleY(0); transition: transform .4s var(--ease); }
.rg-toc-nav button:hover { color: var(--text); }
.rg-toc-nav button.is-active { color: #fff; font-weight: 700; background: var(--verre); border-color: var(--verre-bord); }
.rg-toc-nav button.is-active::before { transform: scaleY(1); }
.rg-sec-t { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; font-size: clamp(26px, 2.8vw, 38px); font-weight: 900; font-style: italic; text-transform: uppercase; line-height: 1.05; letter-spacing: -.02em; }
.rg-num { display: inline-grid; place-items: center; min-width: 58px; height: 46px; padding: 0 8px; font-size: .62em; background: var(--beige); color: var(--on-acc); transform: skewX(-8deg); }

/* Affiches (base commune aux cartes produit) */
.poster-ico { position: absolute; right: 10px; top: 10px; z-index: 2; width: 42px; height: 42px; display: grid; place-items: center; font-size: 21px; color: var(--acc); background: var(--on-acc); border-radius: 50%; }
.poster-lbl { position: absolute; left: 10px; bottom: 10px; z-index: 2; padding: 4px 10px; font-size: 12px; font-weight: 900; font-style: italic; text-transform: uppercase; background: var(--acc); color: var(--on-acc); transform: skewX(-8deg); }
.poster-t { margin: 0 8px 6px; font-size: clamp(26px, 2.3vw, 34px); font-weight: 900; font-style: italic; text-transform: uppercase; line-height: 1; letter-spacing: -.03em; }
.poster-d { margin: 0 8px 14px; font-size: 13px; line-height: 1.6; color: rgba(13, 12, 11, .72); }
.poster-b { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; font-size: 13px; font-weight: 800; font-style: italic; text-transform: uppercase; white-space: nowrap;
  background: var(--on-acc); color: var(--acc); transform: skewX(-8deg); transition: gap .4s var(--ease), background .3s; }
.poster-b > * { transform: skewX(8deg); }
.poster-b i { font-size: 18px; }

/* Pied de page (toutes les pages, accueil compris) */
.ft { position: relative; overflow: hidden; padding-top: 44px; background: linear-gradient(180deg, rgba(10, 9, 8, .8), rgba(10, 9, 8, .95) 160px); border-top: 1px solid var(--verre-bord);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.ft-filigrane { position: absolute; right: -3%; bottom: -26%; width: min(40vw, 470px); color: #fff; opacity: .035; pointer-events: none; }
.ft-grid { position: relative; display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 32px; }
.ft-logo { display: flex; align-items: center; gap: 12px; font-size: 27px; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -.02em; }
.ft-icone { width: 42px; height: 42px; border-radius: 9px; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .7); }
.ft-logo span { display: inline-block; padding: 0 7px; background: var(--beige); color: var(--on-acc); transform: skewX(-8deg); }
.ft-brand p { max-width: 330px; margin: 10px 0 0; font-size: 14px; color: var(--muted); line-height: 1.6; }
.ft-brand .old { display: block; margin-top: 12px; font-size: 12px; letter-spacing: .24em; color: var(--acc); }
.ft-col h4 { margin: 4px 0 10px; font-size: 12.5px; font-weight: 900; font-style: italic; text-transform: uppercase; color: var(--acc); }
.ft-col a { display: block; padding: 3px 0; font-size: 14px; font-weight: 500; color: rgba(246, 241, 234, .76); transition: color .3s, transform .5s var(--ease); }
.ft-col a:hover { color: var(--acc); transform: translateX(6px) skewX(-8deg); }
.ft-bottom { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 30px; padding: 14px 0 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--dim); }

/* ---------- Adaptation écrans ---------- */
@media (max-width: 1440px) {
  .hd-in { gap: 16px; }
  .hd-link { padding: 10px 10px 10px 14px; font-size: 13px; }
  .hd-logo { font-size: 20px; }
}
@media (max-width: 1280px) {
  .hd-nav { display: none; }
  .hd-burger { display: block; }
  .hd-actions { margin-left: auto; }
}
@media (max-width: 960px) {
  .fond-voile { background:
    linear-gradient(180deg, rgba(13, 12, 11, .72) 0%, rgba(13, 12, 11, .55) 38%, rgba(13, 12, 11, .3) 56%, rgba(13, 12, 11, .12) 74%, rgba(13, 12, 11, .7) 100%); }
  .hero-main { align-items: flex-start; padding-top: 28px; }
  .hero-grid, .ph-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-txt { max-width: 560px; }
  .stack { justify-self: center; width: min(100%, 440px); height: auto; aspect-ratio: 1 / 1.3; margin-top: 18px; }
  .ph-photo { display: none; }
  .why-grid { grid-template-columns: 1fr; }
  .ft-grid { grid-template-columns: 1fr 1fr; }
  .ft-brand { grid-column: 1 / -1; }
  .rg-toc { margin-inline: -16px; padding: 8px 16px; background: rgba(13, 12, 11, .95); border-bottom: 2px solid var(--line); }
  .rg-toc-h { display: none; }
}
@media (max-width: 700px) {
  .hero-title { font-size: clamp(54px, 17vw, 84px); }
  .hero-desc { font-size: 15px; }
  /* En-tête : logo, panier, Discord et menu tiennent sur la largeur d'un téléphone */
  .hd-in { gap: 10px; }
  .hd-actions { gap: 8px; }
  .hd-logo { gap: 8px; font-size: 18px; }
  .hd-logo .couronne { width: 32px; }
  .hd-sous { font-size: calc(16px * var(--sig-k)); }
  .hero-btns { padding-inline: 4px; }
  .hero-btns .btn { flex: 1 1 100%; }
  .ft-grid { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  .ft-bottom { margin-top: 22px; }
  .ph-title { font-size: clamp(40px, 12.4vw, 64px); }
  .ph-meta { gap: 10px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .fond-net img { animation: none; }
}

/* =====================================================================================================
   ACCUEIL : titre signé et phrase en haut à gauche ; derniers achats (carte blanche en bas à droite)
   ===================================================================================================== */
/* L'affiche reste visible mais assombrie dans l'ensemble, plus encore derrière le texte et en haut/bas */
body[data-vue="accueil"] .fond-voile { box-shadow: inset 0 0 0 100vmax rgba(13, 12, 11, .4); }
.hero-direct .hero-main { padding: clamp(10px, 2.4vh, 36px) 0 clamp(8px, 1.6vh, 20px); }
.dir-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.dir-txt { position: relative; isolation: isolate; max-width: max(var(--col), 480px); text-shadow: 0 2px 4px rgba(0, 0, 0, .55), 0 4px 34px rgba(0, 0, 0, .7); }
/* Flou doux derrière le texte : les mots imprimés sur l'affiche, juste dessous, ne gênent pas la lecture */
.dir-txt::before { content: ""; position: absolute; z-index: -1; inset: -12% -22% -14% -40%; pointer-events: none;
  background: rgba(13, 12, 11, .3); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 100%); mask-image: radial-gradient(closest-side, #000 58%, transparent 100%); }
/* Titre sur deux lignes, signé « Ultimate RP » juste dessous */
.dir-titre { position: relative; display: inline-block; margin: 0 0 clamp(50px, 8vh, 80px); font-weight: 900; font-style: italic;
  font-size: clamp(50px, min(6.2vw, 9.6vh, var(--col) / 4.6), 106px); line-height: .92; letter-spacing: -.035em; text-transform: uppercase; }
.dir-titre-l { display: block; color: rgba(246, 241, 234, .9); }
/* La signature s'écrit de gauche à droite à l'arrivée ; contour sombre pour se détacher du fond */
.dir-signature { position: absolute; left: .95em; bottom: var(--sig-b); font-size: calc(.8em * var(--sig-k)); line-height: 1; color: var(--acc); white-space: nowrap; pointer-events: none;
  transform: rotate(-7deg);
  text-shadow: -2px -2px 0 #0d0c0b, 2px -2px 0 #0d0c0b, -2px 2px 0 #0d0c0b, 2px 2px 0 #0d0c0b, 0 3px 0 #0d0c0b, 0 7px 0 rgba(13, 12, 11, .45), 0 12px 34px rgba(0, 0, 0, .75);
  clip-path: inset(-60% 100% -60% -10%); transition: clip-path 1.5s cubic-bezier(.65, 0, .35, 1) 1s; }
.hero.is-play .dir-signature { clip-path: inset(-60% -10% -60% -10%); }
.dir-p { max-width: 440px; margin: 0; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.65; color: rgba(246, 241, 234, .9); }
@media (min-width: 961px) {
  /* Le texte monte à hauteur du personnage de gauche : « Le site officiel / ultimaterp.fr » de l'affiche reste visible dessous */
  .hero-direct .hero-main { align-items: flex-start; padding-top: clamp(8px, 1.4vh, 24px); }
  .dir-titre { font-size: clamp(50px, min(6.2vw, 8.8vh, var(--col) / 4.6), 106px); margin-bottom: clamp(46px, 7vh, 76px); }
  .dir-txt::before { inset: -16% -22% -2% -40%; }
}

/* ---------- Derniers achats : une carte blanche en bas à droite, un achat après l'autre ---------- */
.achats { position: absolute; z-index: 2; right: max(16px, (100vw - var(--max)) / 2, clamp(16px, 4vw, 72px)); bottom: clamp(22px, 5.4vh, 58px); width: min(424px, calc(100vw - 32px)); }
.an-h { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 12px; color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .6), 0 4px 18px rgba(0, 0, 0, .85); }
.ach-titre { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 900; font-style: italic; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.ach-pt { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #62d47f; animation: ach-pulse 2s infinite; }
@keyframes ach-pulse { 0% { box-shadow: 0 0 0 0 rgba(98, 212, 127, .6); } 70% { box-shadow: 0 0 0 9px rgba(98, 212, 127, 0); } 100% { box-shadow: 0 0 0 0 rgba(98, 212, 127, 0); } }
/* Une petite barre par achat : les achats passés sont pleins, celui affiché se remplit, les suivants sont vides */
.an-rail { flex: 1; display: flex; gap: 4px; min-width: 60px; }
.an-rail > span { flex: 1; height: 3px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .16); box-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.an-rail i { display: block; height: 100%; background: linear-gradient(90deg, rgba(236, 211, 177, .8), #f6e7d0); transform: scaleX(0); transform-origin: left; }
.an-rail .is-fait i { transform: none; }
.an-rail .is-cours i { animation: an-remplit var(--tour, 4.5s) linear both; }
@keyframes an-remplit { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.achats.is-pause .an-rail .is-cours i { animation-play-state: paused; }
.an-compte { flex: none; white-space: nowrap; font-size: 12px; font-weight: 800; font-style: italic; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.an-compte b { font-size: 15px; color: #fff; }
.an-compte span { color: rgba(255, 255, 255, .55); }
.achats[hidden] { display: none; }
.an-scene { position: relative; height: 118px; }
/* La carte suivante, devinée derrière : on comprend qu'il y en a d'autres */
.an-scene::before { content: ""; position: absolute; inset: 0; border-radius: 4px; background: rgba(251, 248, 243, .2); transform: translate(10px, -10px) rotate(2.5deg);
  box-shadow: 0 20px 40px -24px #000; }
/* La carte : blanche, posée en avant, qui accroche la lumière */
.an-carte { position: absolute; inset: 0; display: flex; align-items: center; gap: 16px; padding: 12px 18px 12px 12px; overflow: hidden; border-radius: 4px;
  color: #0d0c0b; background: #fbf8f3; outline: 2px solid transparent; outline-offset: 3px;
  box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .95), 0 0 46px -6px rgba(255, 236, 205, .28);
  transition: transform .5s var(--ease), box-shadow .45s, outline-color .35s;
  animation: an-in .8s cubic-bezier(.16, 1, .3, 1) both; }
/* Reflet qui traverse la carte à son arrivée */
.an-carte::after { content: ""; position: absolute; inset: -20% auto -20% -60%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent); transform: skewX(-18deg); animation: an-reflet 1.1s .35s ease-out both; }
@keyframes an-reflet { to { left: 130%; } }
.an-carte.is-out { pointer-events: none; animation: an-out .45s cubic-bezier(.55, 0, .8, .3) both; }
@keyframes an-in { from { opacity: 0; transform: translateX(46px) rotate(2.5deg) scale(.96); } }
@keyframes an-out { to { opacity: 0; transform: translateX(-34px) rotate(-2deg) scale(.95); } }
/* Au survol : la carte se soulève et seul son cadre s'éclaire */
.an-carte:hover, .an-carte:focus-visible { transform: translateY(-5px); outline-color: var(--acc);
  box-shadow: 0 38px 70px -24px #000, 0 0 0 1px rgba(236, 211, 177, .4), 0 0 60px -4px rgba(236, 211, 177, .55); }
/* Photo du produit acheté, avec son étiquette de catégorie */
.an-vis { position: relative; flex: none; width: 94px; height: 94px; overflow: hidden; background: #12100e; transform: rotate(-3deg); box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .8); }
.an-vis .ph-img { display: block; width: 100%; height: 100%; background: var(--img) var(--pos) / var(--size, cover) no-repeat; }
.an-vis.is-coins { display: grid; place-items: center; background: radial-gradient(70% 60% at 50% 46%, rgba(236, 211, 177, .3), transparent 70%), #12100e; }
.an-vis.is-coins .pieces { width: 78%; }
.an-cat { position: absolute; left: 4px; bottom: 5px; padding: 2px 6px; font-size: 9px; font-weight: 900; font-style: italic; letter-spacing: 0; text-transform: uppercase; white-space: nowrap;
  color: #0d0c0b; background: var(--acc); transform: skewX(-8deg); }
.an-t { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; line-height: 1.15; }
.an-qui { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(13, 12, 11, .62); white-space: nowrap; }
.an-qui b { font-weight: 800; color: #0d0c0b; }
.an-qui > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.an-av { flex: none; width: 24px; height: 24px; display: grid; place-items: center; font-size: 10px; font-weight: 900; font-style: italic; color: var(--acc); background: #0d0c0b; transform: skewX(-8deg); }
.an-av span { transform: skewX(8deg); }
.an-quoi { overflow: hidden; font-size: 19.5px; font-weight: 900; font-style: italic; letter-spacing: -.02em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.an-bas { display: flex; align-items: center; gap: 10px; }
.an-prix { padding: 3px 10px; font-size: 13px; font-weight: 900; font-style: italic; color: var(--acc); background: #0d0c0b; transform: skewX(-8deg); }
.an-prix span { display: inline-block; transform: skewX(8deg); }
.an-quand { font-size: 12px; font-weight: 600; color: rgba(13, 12, 11, .55); white-space: nowrap; }
.an-fl { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; font-size: 21px; color: var(--acc); background: #0d0c0b; transition: transform .4s var(--ease); }
.an-carte:hover .an-fl { transform: translateX(4px); }
@keyframes an-barre { from { transform: scaleX(0); } }

@media (max-width: 960px) {
  .dir-grid { grid-template-columns: minmax(0, 1fr); }
  .dir-txt { max-width: 600px; }
}
@media (max-width: 960px) {
  /* Les derniers achats passent sous le texte */
  .achats { position: relative; right: auto; bottom: auto; width: min(100% - 32px, 420px); margin: 10px auto clamp(18px, 3vh, 30px); }
}
@media (max-width: 700px) {
  .dir-titre { font-size: clamp(46px, 14.4vw, 76px); }
  .dir-signature { left: .5em; }
  .an-vis { width: 78px; height: 78px; }
  .an-cat { font-size: 8px; padding: 2px 5px; }
  /* Nom du produit sur deux lignes si besoin, plutôt que coupé */
  .an-quoi { font-size: 16px; line-height: 1.05; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .an-carte { gap: 12px; padding-right: 12px; }
}
@media (max-width: 440px) {
  /* Petits téléphones : place pour le texte (la carte entière reste cliquable) */
  .an-fl, .an-av { display: none; }
  .an-vis { width: 70px; height: 70px; }
  .an-quoi { font-size: 15px; }
  .an-carte { gap: 10px; padding-left: 10px; }
}

/* ===================================================================================================
   boutique.css
   =================================================================================================== */

/* Boutique Ultimate RP : éléments propres à la boutique (cartes produit, Ulti Coins, fiche, comparatif, panier).
   Couleurs et polices : jetons définis dans index.html (:root), mêmes valeurs que le site du serveur. */

/* ---------- En-tête : bouton du panier ---------- */
.btn-panier { position: relative; width: 50px; height: 44px; display: grid; place-items: center; color: var(--text);
  transform: skewX(-8deg); transition: transform .5s var(--ease); }
.btn-panier::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--verre-bord); border-radius: 3px; background: var(--verre);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .3s, background .3s; }
.btn-panier:hover::before { border-color: rgba(236, 211, 177, .4); background: rgba(14, 13, 12, .74); }
.btn-panier-in { position: relative; transform: skewX(8deg); font-size: 22px; line-height: 1; }
.btn-panier-n { position: absolute; top: -8px; right: -8px; min-width: 21px; height: 21px; padding: 0 6px; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 800; font-style: italic; color: var(--on-acc); background: var(--beige); border-radius: 11px;
  box-shadow: 0 4px 10px -3px rgba(0, 0, 0, .6); transform: skewX(8deg) scale(0); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.btn-panier.has-items .btn-panier-n { transform: skewX(8deg) scale(1); }
.btn-panier.is-bump { animation: panier-bump .6s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes panier-bump { 35% { transform: skewX(-8deg) scale(1.22) rotate(-6deg); } 65% { transform: skewX(-8deg) scale(.94); } }
/* Pastille qui vole jusqu'au panier */
.vol { position: fixed; z-index: 95; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; pointer-events: none;
  font-size: 20px; color: var(--on-acc); background: var(--beige); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .8), 0 0 0 4px rgba(236, 211, 177, .2); }

/* ---------- Accueil : garanties à droite du bandeau ---------- */
.garanties { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; text-shadow: 0 1px 14px rgba(0, 0, 0, .6); }
.garanties li { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; font-style: italic; text-transform: uppercase; color: rgba(246, 241, 234, .78); white-space: nowrap; }
.garanties i { font-size: 18px; color: var(--acc); }

/* ---------- Titres de section ---------- */
.sec-t { margin: 0 0 clamp(26px, 3.4vw, 42px); font-weight: 900; font-style: italic; font-size: clamp(34px, 4.4vw, 64px); line-height: 1.06; letter-spacing: -.03em; word-spacing: .1em; text-transform: uppercase; }
.sec-t .hl::before { top: -.13em; }

/* ---------- Cartes produit : affiches en papier, inclinées comme sur le site ---------- */
.bloc-prods { padding-bottom: clamp(40px, 5vw, 64px); }
.prods { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 40px); padding-top: 10px; }
.prods[style*="--n:2"] { max-width: 940px; margin-inline: auto; }
.prods[style*="--n:4"] { gap: clamp(18px, 2vw, 30px); }
/* 5 produits (Starter Packs) : 3 cartes puis 2, centrées */
@media (min-width: 961px) {
  .prods[style*="--n:5"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .prods[style*="--n:5"] > * { grid-column: span 2; }
  .prods[style*="--n:5"] > :nth-child(4) { grid-column: 2 / span 2; }
  /* 6 produits (Ulti Coins) : 2 lignes de 3 */
  .prods[style*="--n:6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.prod-r { display: flex; }
.prod { position: relative; flex: 1; display: flex; flex-direction: column; background: var(--papier); color: var(--on-acc); padding: 10px 10px 16px;
  rotate: var(--rot, 0deg); box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .9); transition: transform .7s var(--ease), box-shadow .5s; }
.prods > :nth-child(even) { padding-top: 22px; }
.prod:hover { transform: translateY(-12px) scale(1.02) rotate(calc(-1 * var(--rot, 0deg))); box-shadow: 0 40px 70px -24px rgba(0, 0, 0, 1); z-index: 2; }
.prod-img { position: relative; display: block; aspect-ratio: 4 / 3.5; overflow: hidden; margin-bottom: 16px;
  background: var(--img) var(--pos) / var(--size, cover) no-repeat; filter: grayscale(.35) contrast(1.08); transition: filter .6s; }
.prod:hover .prod-img { filter: none; }
.prod-badge { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 5px 11px; font-size: 11.5px; font-weight: 800; font-style: italic; text-transform: uppercase;
  color: var(--acc); background: rgba(13, 12, 11, .86); transform: skewX(-8deg); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .7); }
.prod-k { margin: 0 8px 4px; font-size: 11.5px; line-height: 1.2; color: #9a7650; }
.prod .poster-t { font-size: clamp(30px, 2.6vw, 40px); }
.prod-bonus { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin: 2px 8px 10px; padding: 3px 10px; font-size: 12px; font-weight: 800; font-style: italic; text-transform: uppercase;
  color: var(--on-acc); background: rgba(13, 12, 11, .08); border: 1px solid rgba(13, 12, 11, .14); transform: skewX(-8deg); }
.prod-bonus > * { transform: skewX(8deg); }
.prod-bonus i { font-size: 15px; }
.prod .poster-d { margin-bottom: 12px; }
.prod-pts { display: flex; flex-direction: column; gap: 6px; margin: 0 8px 18px; padding: 0; list-style: none; }
.prod-pts li { position: relative; padding-left: 20px; font-size: 13px; font-weight: 600; line-height: 1.45; color: rgba(13, 12, 11, .82); }
.prod-pts li::before { content: "✦"; position: absolute; left: 0; top: 0; font-size: 11px; color: #9a7650; }
.prod-bas { margin: auto 8px 0; padding-top: 14px; border-top: 1px dashed rgba(13, 12, 11, .2); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.prod-prix { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.prod-prix b { font-size: 27px; font-weight: 900; font-style: italic; letter-spacing: -.03em; line-height: 1; }
.prod-prix small { font-size: 12px; font-weight: 700; font-style: italic; text-transform: uppercase; color: rgba(13, 12, 11, .55); }
.prod-act { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.prod-info { width: 42px; height: 42px; display: grid; place-items: center; font-size: 21px; border: 2px solid rgba(13, 12, 11, .8); transform: skewX(-8deg); transition: background .3s, color .3s; }
.prod-info i { transform: skewX(8deg); }
.prod-info:hover { background: var(--on-acc); color: var(--acc); }
.prod .poster-b:hover { gap: 14px; background: #000; }
.prod .poster-b:disabled { cursor: not-allowed; opacity: .55; }
/* Produit épuisé : photo en noir et blanc */
.prod.is-epuise .prod-img { filter: grayscale(1) brightness(.7); }

/* Ulti Coins : pièces dorées frappées de la couronne, sur fond sombre */
.prod-coins { display: grid; place-items: center; background: radial-gradient(70% 60% at 50% 46%, rgba(236, 211, 177, .26), transparent 70%), #12100e; filter: none; }
.prod-coins::before { content: ""; position: absolute; inset: 0; background: url(assets/logo-fond.webp) center / cover; opacity: .1; mix-blend-mode: screen; }
.pieces { position: relative; width: 62%; aspect-ratio: 1.15; }
.piece { --s: calc(68% - var(--n) * 4%); position: absolute; width: var(--s); aspect-ratio: 1; border-radius: 50%;
  left: calc(50% - var(--s) / 2 + (var(--k) - (var(--n) - 1) / 2) * 15%); top: calc(50% - var(--s) / 2 - (var(--k) - (var(--n) - 1) / 2) * 9%);
  background: radial-gradient(circle at 34% 28%, #fff6e4 0, #f1d9b6 18%, #d9b68a 46%, #a77e4f 78%, #7d5c37 100%);
  box-shadow: inset 0 0 0 4px rgba(255, 244, 222, .45), inset 0 -8px 14px rgba(70, 46, 20, .45), 0 16px 26px -10px rgba(0, 0, 0, .85);
  transition: transform .7s var(--ease); transform: rotate(calc(var(--k) * 9deg - 10deg)); }
.piece::before { content: ""; position: absolute; inset: 11%; border-radius: 50%; border: 2px dashed rgba(90, 62, 30, .35); }
.piece::after { content: ""; position: absolute; inset: 30% 24% 32%; background: rgba(78, 54, 26, .72);
  -webkit-mask: var(--masque-couronne) center / contain no-repeat; mask: var(--masque-couronne) center / contain no-repeat; }
.prod:hover .piece { transform: rotate(calc(var(--k) * 9deg - 10deg)) translateY(calc(-6% - var(--k) * 5%)); }

/* Bandeau de livraison sous les produits */
.livr { position: relative; display: flex; align-items: center; gap: 14px 26px; flex-wrap: wrap; padding: 16px 20px 16px 26px; border: 1px solid var(--verre-bord); border-radius: 3px;
  background: var(--verre); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.livr::before { content: ""; position: absolute; left: 3px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--acc); }
.livr-t { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; font-style: italic; text-transform: uppercase; white-space: nowrap; }
.livr-t i { font-size: 20px; color: var(--acc); }
.livr-t b { color: var(--acc); }
.livr p { flex: 1 1 380px; margin: 0; padding-left: 26px; border-left: 1px solid rgba(255, 255, 255, .12); font-size: 14px; line-height: 1.6; color: rgba(246, 241, 234, .74); }
.livr-b { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; font-size: 12.5px; font-weight: 800; font-style: italic; text-transform: uppercase;
  color: #fff; background: #5865f2; transform: skewX(-8deg); transition: transform .5s var(--ease), box-shadow .4s; box-shadow: 4px 4px 0 rgba(88, 101, 242, .3); }
.livr-b > * { transform: skewX(8deg); }
.livr-b i { font-size: 19px; }
.livr-b:hover { transform: skewX(-8deg) translate(-2px, -2px); box-shadow: 7px 7px 0 rgba(88, 101, 242, .4); }

/* ---------- Comparatif des VIP ---------- */
.cmp-wrap { overflow-x: auto; border: 1px solid var(--verre-bord); background: var(--panneau); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); scrollbar-width: thin; }
.cmp { width: 100%; min-width: 680px; border-collapse: collapse; }
.cmp th, .cmp td { padding: 13px 18px; border-bottom: 1px solid var(--line); text-align: center; font-size: 14px; vertical-align: middle; }
.cmp tbody th { text-align: left; font-weight: 600; color: rgba(246, 241, 234, .86); }
.cmp tbody th i { width: 30px; margin-right: 8px; font-size: 19px; color: var(--acc); vertical-align: -4px; }
.cmp thead th { padding: 26px 18px 18px; vertical-align: bottom; }
.cmp thead th:first-child { text-align: left; font-size: 12.5px; font-weight: 900; font-style: italic; text-transform: uppercase; color: var(--acc); }
.cmp-nom { display: block; font-size: clamp(22px, 2vw, 30px); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -.02em; line-height: 1; }
.cmp thead small { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.cmp-badge { display: inline-block; margin-bottom: 10px; padding: 3px 10px; font-size: 11px; font-weight: 800; font-style: italic; text-transform: uppercase; color: var(--on-acc); background: var(--acc); transform: skewX(-8deg); }
.cmp .is-mis { background: rgba(236, 211, 177, .07); }
.cmp thead .is-mis { box-shadow: inset 0 3px 0 var(--acc); }
.cmp-oui { font-size: 24px; color: var(--acc); }
.cmp-val { font-weight: 800; font-style: italic; color: var(--text); white-space: nowrap; }
.cmp-non { color: var(--dim); font-weight: 700; }
.cmp tbody tr { transition: background .3s; }
.cmp tbody tr:hover { background: rgba(255, 255, 255, .025); }
.cmp tfoot td { padding: 20px 18px 24px; border-bottom: 0; }
.cmp .cmp-b { background: var(--beige); color: var(--on-acc); }
.cmp .cmp-b:hover { gap: 14px; }

/* ---------- Fiche d'un produit ---------- */
.det-retour { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font-size: 13px; font-weight: 800; font-style: italic; text-transform: uppercase; color: rgba(246, 241, 234, .72); transition: color .3s, gap .4s var(--ease); }
.det-retour i { font-size: 20px; color: var(--acc); }
.det-retour:hover { color: #fff; gap: 12px; }
.det { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 390px); gap: clamp(28px, 4vw, 64px); align-items: start; padding-bottom: clamp(60px, 7vw, 100px); }
.det-h { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 13px; font-weight: 900; font-style: italic; text-transform: uppercase; color: var(--acc); }
.det-h i { font-size: 19px; }
.det-h2 { margin-top: 40px; color: var(--muted); }
.av-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.av { display: flex; align-items: center; gap: 14px; min-height: 70px; padding: 12px 16px; border: 2px solid var(--line); background: var(--panneau); transition: border-color .3s, transform .5s var(--ease), background .3s; }
.av:hover { border-color: var(--line-2); transform: translateX(4px); }
.av > i { flex: none; width: 44px; height: 44px; display: grid; place-items: center; font-size: 22px; background: var(--acc); color: var(--on-acc); transform: skewX(-8deg); }
.av b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.av small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 800; font-style: italic; text-transform: uppercase; color: var(--acc); }
.av.is-off { border-style: dashed; background: rgba(17, 16, 14, .4); }
.av.is-off > i { background: transparent; color: var(--dim); box-shadow: inset 0 0 0 1px var(--line-2); }
.av.is-off b { color: var(--muted); font-weight: 600; }
.av.is-off small { color: var(--dim); }
a.av.is-off:hover { border-color: var(--acc); }
a.av.is-off:hover small { color: var(--acc); }
/* Encadré d'achat (reste visible pendant la lecture) */
.achat { position: sticky; top: calc(var(--hd) + 24px); padding: 26px 26px 22px 30px; border: 1px solid var(--verre-bord); border-radius: 3px;
  background: rgba(17, 16, 14, .8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.achat::before { content: ""; position: absolute; left: 3px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--acc); }
.achat-l { margin: 0 0 10px; font-size: 12px; font-weight: 900; font-style: italic; text-transform: uppercase; color: var(--acc); }
.durees { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; margin-bottom: 22px; }
.duree { position: relative; cursor: pointer; }
.duree input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.duree span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 58px; padding: 6px 4px; border: 2px solid var(--line-2); background: rgba(13, 12, 11, .35);
  transform: skewX(-8deg); transition: background .3s, border-color .3s, color .3s, box-shadow .4s; }
.duree span > * { transform: skewX(8deg); }
.duree b { font-size: 14px; font-weight: 900; font-style: italic; text-transform: uppercase; white-space: nowrap; }
.duree small { font-size: 11.5px; font-weight: 800; color: #7fd49a; }
.duree:hover span { border-color: var(--acc); }
.duree input:checked + span { background: var(--beige); color: var(--on-acc); border-color: transparent; box-shadow: 5px 5px 0 rgba(236, 211, 177, .2); }
.duree input:checked + span small { color: #1d6b3a; }
.duree input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 3px; }
.achat-prix { font-size: clamp(46px, 4vw, 58px); font-weight: 900; font-style: italic; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.achat-prix.is-maj { animation: prix-maj .5s var(--ease); }
@keyframes prix-maj { from { opacity: .2; transform: translateY(10px); } }
.achat-sous { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }
.achat .btn { width: 100%; margin-top: 22px; }
.achat .btn:disabled { opacity: .5; cursor: not-allowed; }
.achat-g { display: flex; flex-direction: column; gap: 8px; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); list-style: none; }
.achat-g li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(246, 241, 234, .74); }
.achat-g i { font-size: 18px; color: var(--acc); }
.achat-g a { color: var(--acc); text-decoration: underline; text-underline-offset: 3px; }
/* Autres produits de la catégorie */
.autres { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.autre { position: relative; display: flex; align-items: center; gap: 16px; padding: 12px 18px 12px 12px; border: 1px solid var(--verre-bord); background: var(--panneau); transition: transform .6s var(--ease), border-color .4s, background .4s; }
.autre::before { content: ""; position: absolute; left: 3px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--acc); transform: scaleY(0); transition: transform .5s var(--ease); }
.autre:hover { transform: translateX(6px); border-color: rgba(236, 211, 177, .22); background: rgba(20, 19, 17, .78); }
.autre:hover::before { transform: scaleY(1); }
.autre-img { flex: none; width: 76px; aspect-ratio: 1.3; padding: 4px; background: var(--papier); rotate: -3deg; transition: rotate .6s var(--ease); }
.autre:hover .autre-img { rotate: 2deg; }
.autre-img .ph-img { display: block; height: 100%; background: var(--img) var(--pos) / var(--size, cover) no-repeat; }
.autre-t { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.autre-t small { margin-bottom: 3px; font-size: 10.5px; color: var(--acc); }
.autre-t b { font-size: 21px; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.autre-p { margin-top: 3px; font-size: 13px; font-weight: 700; font-style: italic; white-space: nowrap; color: var(--muted); }
.autre > .bx-right-arrow-alt { flex: none; font-size: 20px; color: var(--acc); transition: transform .45s var(--ease); }
.autre:hover > .bx-right-arrow-alt { transform: translateX(4px); }
.autre-cmp > .bx-table { flex: none; width: 76px; display: grid; place-items: center; font-size: 30px; color: var(--acc); }
.autre-cmp .bx-right-arrow-alt { margin-left: auto; }

/* ---------- CGV / CGU : onglets et recherche (comme le règlement du site), articles en pancartes ---------- */
.rg-top { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 2px solid var(--line); }
.rg-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.rg-tab { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px; border: 2px solid var(--line-2); background: rgba(13, 12, 11, .35);
  font-size: 15px; font-weight: 900; font-style: italic; text-transform: uppercase; transform: skewX(-8deg); transition: all .3s; }
.rg-tab > * { transform: skewX(8deg); }
.rg-tab-n { padding: 1px 7px; font-size: 11.5px; font-weight: 800; white-space: nowrap; color: var(--acc); background: rgba(236, 211, 177, .14); }
.rg-tab:hover { border-color: var(--acc); }
.rg-tab.is-active { color: var(--on-acc); background: var(--beige); border-color: transparent; box-shadow: 5px 5px 0 rgba(236, 211, 177, .2); }
.rg-tab.is-active .rg-tab-n { color: var(--acc); background: var(--on-acc); }
.rg-tools { display: flex; flex: 1 1 340px; gap: 10px; align-items: center; justify-content: flex-end; }
.rg-search { position: relative; display: flex; flex: 1 1 auto; align-items: center; gap: 10px; max-width: 440px; height: 50px; padding: 0 16px;
  border: 2px solid var(--line-2); background: var(--panneau); transition: border-color .3s, box-shadow .3s; }
.rg-search:focus-within { border-color: var(--acc); box-shadow: 5px 5px 0 rgba(236, 211, 177, .15); }
.rg-search i { font-size: 20px; color: var(--acc); }
.rg-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: none; font-size: 14.5px; font-weight: 500; }
.rg-search input::placeholder { color: var(--dim); }
.rg-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.rg-res { font-size: 12.5px; font-weight: 800; font-style: italic; white-space: nowrap; color: var(--acc); }
.rg-warn { display: flex; gap: 12px; padding: 16px; border: 2px solid rgba(240, 120, 100, .35); background: rgba(40, 16, 12, .35); font-size: 13px; line-height: 1.55; color: #f1b3a2; }
.rg-warn i { flex: none; font-size: 20px; color: #f08a76; }
.rg-warn p { margin: 0; }
/* Rappel en bas de la page : même encadré que l'avertissement du règlement, en beige */
.cg-rappel { max-width: 640px; margin-top: 10px; border-color: rgba(236, 211, 177, .3); background: var(--verre); color: rgba(246, 241, 234, .84); }
.cg-rappel i { color: var(--acc); }
.cg-rappel small { display: block; margin-top: 8px; font-size: 12px; font-weight: 700; font-style: italic; color: var(--muted); }
.cg-intro { max-width: 760px; margin: 0 0 34px; font-size: 16px; line-height: 1.7; color: rgba(246, 241, 234, .74); }
.rg-empty { padding: 40px; text-align: center; border: 2px dashed var(--line-2); font-weight: 700; font-style: italic; color: var(--muted); }
.rg-empty a, .cg-ailleurs a { color: var(--acc); text-decoration: underline; text-underline-offset: 3px; }
.cg-ailleurs { display: block; margin: -26px 0 30px; font-size: 14px; font-weight: 600; color: rgba(246, 241, 234, .8); }
.cg-ailleurs[hidden] { display: none; }
.cg-ailleurs i { margin-right: 6px; font-size: 17px; vertical-align: -3px; color: var(--acc); }

/* Une partie (« Vos achats »…) puis ses pancartes */
.pk-sec { padding-bottom: 60px; }
.pk-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 54px 30px; padding-top: 26px; }
@media (min-width: 1281px) { .pk-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* La pancarte : punaisée en haut, elle penche un peu et se redresse au survol (balancement depuis la punaise) */
.pk { position: relative; display: block; width: 100%; height: 100%; padding: 0; text-align: left; color: var(--on-acc);
  transform: rotate(var(--rot, 0deg)); transform-origin: 50% -10px; transition: transform .9s cubic-bezier(.3, 1.6, .45, 1); }
.pk:hover, .pk:focus-visible { transform: rotate(0deg) translateY(-6px); outline: 0; }
.pk-punaise { position: absolute; z-index: 3; left: 50%; top: -9px; width: 18px; height: 18px; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1dc 0, #ecd3b1 30%, #9a7650 75%, #5e452a 100%); box-shadow: 0 4px 6px rgba(0, 0, 0, .55), 0 0 0 2px rgba(13, 12, 11, .25); }
.pk-papier { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 240px; padding: 30px 24px 20px; background: var(--papier);
  box-shadow: 0 28px 46px -24px rgba(0, 0, 0, .95), 0 3px 0 rgba(0, 0, 0, .18); transition: box-shadow .5s; }
.pk:hover .pk-papier, .pk:focus-visible .pk-papier { box-shadow: 0 40px 60px -26px #000, 0 0 0 3px var(--acc); }
.pk-papier.ht::after { opacity: .12; }
/* Filet intérieur, comme sur une enseigne */
.pk-papier::before { content: ""; position: absolute; inset: 9px; border: 2px solid rgba(27, 23, 18, .13); pointer-events: none; }
.pk-haut { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.pk-num { display: inline-block; padding: 4px 10px; font-size: 11.5px; font-weight: 900; font-style: italic; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  color: var(--acc); background: var(--on-acc); transform: skewX(-8deg); }
.pk-ico { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; font-size: 21px; color: var(--acc); background: var(--on-acc); }
.pk-t { display: block; margin-bottom: 10px; font-size: clamp(22px, 1.8vw, 27px); font-weight: 900; font-style: italic; line-height: 1.02; letter-spacing: -.02em; text-transform: uppercase; }
.pk-r { display: block; font-size: 14px; line-height: 1.55; color: rgba(27, 23, 18, .74); }
.pk-trouve { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 12px; padding: 3px 9px; font-size: 11px; font-weight: 800; font-style: italic; text-transform: uppercase;
  background: var(--acc); transform: skewX(-8deg); }
.pk-trouve[hidden] { display: none; }
.pk-lire { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: auto; padding: 0 16px; height: 40px; translate: 0 6px;
  font-size: 12.5px; font-weight: 800; font-style: italic; text-transform: uppercase; color: var(--acc); background: var(--on-acc); transform: skewX(-8deg); transition: gap .4s var(--ease); }
.pk-lire > * { transform: skewX(8deg); }
.pk-lire i { font-size: 18px; }
.pk:hover .pk-lire { gap: 14px; }
.pk-papier > .pk-r { margin-bottom: 18px; }
.pk mark, .pk-fiche mark { padding: 0 3px; color: var(--acc); background: var(--on-acc); }

/* L'article ouvert en grand : une feuille scotchée dans la fenêtre du centre */
.fen[data-genre="cgv"] .fen-boite { width: min(800px, 100%); background: rgba(17, 16, 14, .9); }
.fen[data-genre="cgv"] .fen-in { padding: 34px clamp(16px, 4vw, 40px) 0; }
.pk-fiche { position: relative; margin: 0 0 6px; padding: 44px clamp(22px, 5vw, 54px) 30px; color: #1b1712; background: var(--papier); rotate: -.4deg;
  box-shadow: 0 30px 60px -30px #000; animation: fen-el .6s var(--ease) both; }
.pk-fiche.ht::after { opacity: .1; }
.pk-fiche .tape { z-index: 2; }
.pk-tape-1 { top: -13px; left: 10%; rotate: -5deg; }
.pk-tape-2 { top: -11px; right: 12%; rotate: 6deg; }
.pk-fiche-k { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 14px; font-size: 12px; font-weight: 800; font-style: italic; letter-spacing: .04em; text-transform: uppercase; color: rgba(27, 23, 18, .6); }
.pk-fiche-t { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; font-size: clamp(28px, 3.4vw, 42px); font-weight: 900; font-style: italic; line-height: 1.04; letter-spacing: -.025em; text-transform: uppercase; }
.pk-fiche-t i { flex: none; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; font-size: 25px; color: var(--acc); background: var(--on-acc); }
.pk-fiche-r { margin: 0 0 20px; padding: 10px 14px; border-left: 4px solid #9a7650; background: rgba(154, 118, 80, .12); font-size: 15px; font-weight: 700; font-style: italic; line-height: 1.55; }
.pk-fiche-txt p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.8; color: rgba(27, 23, 18, .86); }
.pk-fiche-txt ul { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; padding: 0; list-style: none; }
.pk-fiche-txt li { position: relative; padding-left: 26px; line-height: 1.7; color: rgba(27, 23, 18, .86); }
.pk-fiche-txt li::before { content: "✦"; position: absolute; left: 0; top: 0; font-size: 12px; color: #9a7650; }
.pk-fiche-maj { margin: 22px 0 0; padding-top: 14px; border-top: 2px dashed rgba(27, 23, 18, .2); font-size: 12px; font-weight: 700; font-style: italic; color: rgba(27, 23, 18, .55); }
.pk-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 20px 0 26px; }
.pk-nav-b { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 10px 16px; border: 1px solid var(--verre-bord); background: var(--panneau); text-align: left;
  transition: border-color .3s, background .3s, transform .5s var(--ease); }
.pk-nav-b.is-suiv { justify-content: flex-end; text-align: right; }
.pk-nav-b:hover { border-color: var(--acc); background: rgba(20, 19, 17, .9); }
.pk-nav-b:hover:not(.is-suiv) { transform: translateX(-4px); }
.pk-nav-b.is-suiv:hover { transform: translateX(4px); }
.pk-nav-b i { flex: none; font-size: 22px; color: var(--acc); }
.pk-nav-b span { display: flex; flex-direction: column; min-width: 0; font-size: 14px; font-weight: 800; font-style: italic; line-height: 1.2; text-transform: uppercase; }
.pk-nav-b small { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted); }

/* ---------- Panier (tiroir à droite) ---------- */
.panier { position: fixed; inset: 0; z-index: 80; visibility: hidden; pointer-events: none; transition: visibility 0s .75s; }
.panier.is-open { visibility: visible; pointer-events: auto; transition: visibility 0s; }
.panier-voile { position: absolute; inset: 0; background: rgba(8, 7, 6, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .6s; }
.panier.is-open .panier-voile { opacity: 1; }
.panier-in { position: absolute; top: 0; right: 0; bottom: 0; width: min(470px, 100%); display: flex; flex-direction: column;
  background: rgba(15, 14, 12, .94); border-left: 1px solid var(--verre-bord); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  box-shadow: -30px 0 60px -30px rgba(0, 0, 0, .9); transform: translateX(102%); transition: transform .75s var(--ease-io); }
.panier.is-open .panier-in { transform: none; }
.panier-hd { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px 18px; border-bottom: 1px solid var(--line); }
.panier-hd h2 { margin: 0; font-size: 30px; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -.02em; line-height: 1.1; }
.panier-x { width: 44px; height: 44px; display: grid; place-items: center; font-size: 28px; border: 1px solid var(--verre-bord); border-radius: 3px; background: var(--verre); transition: transform .5s var(--ease), border-color .3s; }
.panier-x:hover { transform: rotate(90deg); border-color: rgba(236, 211, 177, .4); }
.panier-liste { flex: 1; overflow: auto; padding: 18px 26px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; }
.pl { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; border: 1px solid var(--line); background: var(--panneau); }
.panier.is-entree .pl { animation: pl-in .7s var(--ease) both; animation-delay: calc(.3s + var(--i) * 70ms); }
@keyframes pl-in { from { opacity: 0; transform: translateX(40px); } }
.pl-img { display: block; width: 72px; aspect-ratio: 1.15; padding: 4px; background: var(--papier); rotate: -3deg; }
.pl-img .ph-img { display: block; height: 100%; background: var(--img) var(--pos) / var(--size, cover) no-repeat; }
.pl-coins { position: relative; display: grid; place-items: center; background: #12100e; padding: 0; border: 4px solid var(--papier); }
.pl-coins .pieces { width: 70%; }
.pl-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-n { font-size: 15px; font-weight: 800; font-style: italic; text-transform: uppercase; line-height: 1.15; transition: color .3s; }
.pl-n:hover { color: var(--acc); }
.pl-v { font-size: 12.5px; color: var(--muted); }
.pl-bas { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.qte { display: inline-flex; align-items: center; border: 1px solid var(--line-2); }
.qte button { width: 28px; height: 28px; display: grid; place-items: center; font-size: 16px; color: var(--acc); transition: background .3s; }
.qte button:hover { background: rgba(236, 211, 177, .12); }
.qte b { min-width: 26px; text-align: center; font-size: 13px; }
.pl-suppr { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--dim); transition: color .3s; }
.pl-suppr i { font-size: 15px; }
.pl-suppr:hover { color: #f08a76; }
.pl-prix { font-size: 16px; font-weight: 900; font-style: italic; white-space: nowrap; }
.panier-vide { margin: auto 0; padding: 30px 10px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.panier-vide-i { width: 86px; height: 86px; display: grid; place-items: center; font-size: 40px; color: var(--acc); border: 2px dashed var(--line-2); border-radius: 50%; }
.panier-vide p { max-width: 300px; margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.panier-vide b { display: block; color: var(--text); font-size: 16px; }
.panier-pied { padding: 18px 26px 22px; border-top: 1px solid var(--line); background: rgba(10, 9, 8, .6); }
.panier-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.panier-total span { font-size: 13px; font-weight: 900; font-style: italic; text-transform: uppercase; color: var(--acc); }
.panier-total b { font-size: 36px; font-weight: 900; font-style: italic; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.panier-ttc { margin: 4px 0 16px; text-align: right; font-size: 12px; color: var(--dim); }
.cgv-ok { position: relative; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 12.5px; line-height: 1.55; color: rgba(246, 241, 234, .78); }
.cgv-ok input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cgv-box { flex: none; width: 22px; height: 22px; margin-top: 1px; display: grid; place-items: center; border: 2px solid var(--line-2); transform: skewX(-8deg); transition: background .3s, border-color .3s; }
.cgv-ok:hover .cgv-box { border-color: var(--acc); }
.cgv-ok input:checked + .cgv-box { background: var(--beige); border-color: transparent; }
.cgv-ok input:checked + .cgv-box::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--on-acc); border-bottom: 2px solid var(--on-acc); transform: translate(0, -1px) rotate(-45deg) skewX(8deg); }
.cgv-ok input:focus-visible + .cgv-box { outline: 2px solid var(--acc); outline-offset: 3px; }
.cgv-ok a { color: var(--acc); text-decoration: underline; text-underline-offset: 3px; }
.cgv-ok.is-error .cgv-box { border-color: #f08a76; }
.cgv-ok.shake { animation: secoue .45s; }
@keyframes secoue { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.cgv-err { margin: 8px 0 0; font-size: 12.5px; font-weight: 600; color: #f08a76; }
.cgv-err:empty { display: none; }
.panier-pied .btn { width: 100%; margin-top: 16px; }
.panier-note { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 12px; color: var(--dim); }
.panier-note i { font-size: 16px; color: #8891f2; }

/* ---------- Message en bas de l'écran ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 90; display: flex; align-items: center; gap: 16px; max-width: calc(100vw - 32px);
  padding: 8px 8px 8px 24px; border: 1px solid var(--verre-bord); border-radius: 3px; background: rgba(14, 13, 12, .9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .9);
  transform: translate(-50%, calc(100% + 40px)); opacity: 0; pointer-events: none; transition: transform .6s var(--ease), opacity .4s; }
.toast::before { content: ""; position: absolute; left: 3px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--acc); }
.toast.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.toast-t { padding: 8px 0; font-size: 13.5px; font-weight: 500; color: rgba(246, 241, 234, .86); }
.toast-t b { font-weight: 800; font-style: italic; text-transform: uppercase; color: var(--acc); }
.toast-t b.toast-nom { text-transform: none; }
.toast-b { flex: none; height: 40px; padding: 0 16px; font-size: 12px; font-weight: 800; font-style: italic; text-transform: uppercase; white-space: nowrap;
  color: var(--on-acc); background: var(--beige); transform: skewX(-8deg); }
.toast-b span { display: inline-block; transform: skewX(8deg); }

/* ---------- Adaptation écrans ---------- */
@media (max-width: 1280px) {
  .prods[style*="--n:4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 940px; margin-inline: auto; }
}
@media (max-width: 1100px) {
  .det { grid-template-columns: minmax(0, 1fr); }
  .achat { position: relative; top: 0; order: -1; }
}
@media (max-width: 960px) {
  .prods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Nombre impair de cartes : la dernière, seule sur sa ligne, est centrée */
  .prods > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - clamp(22px, 2.6vw, 40px)) / 2); }
  .garanties { gap: 8px 18px; }
}
@media (max-width: 700px) {
  .prods, .prods[style*="--n:4"] { grid-template-columns: minmax(0, 1fr); padding-inline: 8px; }
  .prods > :nth-child(even) { padding-top: 0; }
  .prods > :last-child:nth-child(odd) { grid-column: auto; justify-self: stretch; width: auto; }
  .av-grid { grid-template-columns: minmax(0, 1fr); }
  .livr p { padding-left: 0; border-left: 0; flex-basis: 100%; }
  .garanties li:last-child { display: none; }
  .btn-panier { width: 44px; }
  .panier-hd, .panier-liste, .panier-pied { padding-inline: 18px; }
  .pl { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 12px; }
  .pl-img { width: 60px; }
  .toast { left: 16px; right: 16px; max-width: none; transform: translate(0, calc(100% + 40px)); }
  .toast.is-on { transform: none; }
  .toast-t { font-size: 12.5px; }
}

/* =====================================================================================================
   MES COMPTES (FiveM · Cfx.re et Discord, obligatoires pour acheter)
   ===================================================================================================== */
.cpt-hote { position: relative; }
.btn-compte { position: relative; width: 50px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--text); transform: skewX(-8deg); transition: transform .5s var(--ease); }
.btn-compte::before { content: ""; position: absolute; inset: 0; border: 1px dashed rgba(236, 211, 177, .45); border-radius: 3px; background: var(--verre);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .3s, background .3s; }
.btn-compte.is-lie::before { border-style: solid; border-color: var(--verre-bord); }
.btn-compte:hover::before, .cpt-hote.is-open .btn-compte::before { border-color: rgba(236, 211, 177, .6); background: rgba(14, 13, 12, .78); }
.btn-compte-in { position: relative; display: inline-flex; align-items: center; gap: 9px; transform: skewX(8deg); font-size: 13px; font-weight: 800; font-style: italic; text-transform: uppercase; white-space: nowrap; }
.btn-compte-in > i { font-size: 22px; color: var(--acc); }
.cpt-point { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #62d47f; box-shadow: 0 0 0 3px rgba(98, 212, 127, .2); }
/* Menu déroulant sous le bouton */
.cpt-menu { position: absolute; top: calc(100% + 14px); right: 0; z-index: 60; width: 390px; padding: 20px 20px 18px 24px; border: 1px solid var(--verre-bord); border-radius: 4px;
  background: rgba(17, 16, 14, .96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 34px 70px -26px #000;
  opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.98); transform-origin: top right; transition: opacity .3s, transform .5s var(--ease), visibility 0s .5s; }
.cpt-hote.is-open .cpt-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .5s var(--ease), visibility 0s; }
.cpt-menu::before { content: ""; position: absolute; left: 3px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--acc); }
.cpt-menu-h { margin: 0 0 6px; font-size: 13px; font-weight: 900; font-style: italic; text-transform: uppercase; color: var(--acc); }
.cpt-menu-d { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.cpt-lignes { display: flex; flex-direction: column; gap: 8px; }
.cpt-l { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); background: var(--panneau); transition: border-color .3s, background .3s; }
.cpt-l.is-lie { border-color: rgba(98, 212, 127, .45); background: rgba(98, 212, 127, .05); }
.cpt-ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; font-size: 21px; transform: skewX(-8deg); }
.cpt-ico i { transform: skewX(8deg); }
.cpt-ico-fivem { color: var(--on-acc); background: var(--beige); }
.cpt-ico-discord { color: #fff; background: #5865f2; }
.cpt-t { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cpt-t b { font-size: 14.5px; font-weight: 800; }
.cpt-t small { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.cpt-t small:not(.cpt-ok) { overflow: visible; white-space: normal; text-overflow: clip; line-height: 1.35; }
.cpt-t .cpt-ok { display: flex; align-items: center; gap: 7px; font-weight: 700; color: #8fe0a5; }
.cpt-pseudo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpt-b { flex: none; min-width: 78px; height: 36px; padding: 0 14px; font-size: 12.5px; font-weight: 800; font-style: italic; text-transform: uppercase;
  transform: skewX(-8deg); transition: background .3s, color .3s, border-color .3s, box-shadow .4s; }
.cpt-b > * { display: inline-block; transform: skewX(8deg); }
.cpt-b:disabled { cursor: progress; opacity: .8; }
.cpt-lier-fivem { color: var(--on-acc); background: var(--beige); box-shadow: 4px 4px 0 rgba(236, 211, 177, .18); }
.cpt-lier-discord { color: #fff; background: #5865f2; box-shadow: 4px 4px 0 rgba(88, 101, 242, .3); }
.cpt-lier-fivem:hover { box-shadow: 6px 6px 0 rgba(236, 211, 177, .28); }
.cpt-lier-discord:hover { box-shadow: 6px 6px 0 rgba(88, 101, 242, .42); }
.cpt-delier { border: 1px solid var(--line-2); color: rgba(246, 241, 234, .8); }
.cpt-delier:hover { border-color: #f08a76; color: #f08a76; }
/* Rappel des comptes en haut du pied du panier */
.pc { margin-bottom: 16px; padding: 12px; border: 1px dashed rgba(240, 138, 118, .5); background: rgba(40, 16, 12, .28); transition: border-color .3s, background .3s; }
.pc.is-ok { border: 1px solid rgba(98, 212, 127, .35); background: rgba(98, 212, 127, .04); }
.pc.is-error { border-color: #f08a76; }
.pc.shake { animation: secoue .45s; }
.pc-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12.5px; font-weight: 900; font-style: italic; text-transform: uppercase; color: #f08a76; }
.pc-h i { font-size: 18px; }
.pc.is-ok .pc-h { color: #8fe0a5; }
.pc-noms { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: 13px; font-weight: 700; }
.pc-noms > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.pc-noms i { font-size: 16px; color: var(--acc); }
.panier-liste { min-height: 120px; }
.panier-pied { max-height: 64vh; overflow-y: auto; scrollbar-width: thin; }
.cgv-err.is-info { color: var(--acc); }
.cpt-lignes.is-compact .cpt-l { padding: 8px 10px; }
.cpt-lignes.is-compact .cpt-ico { width: 34px; height: 34px; font-size: 18px; }

/* =====================================================================================================
   FENÊTRE AU CENTRE (aperçu « Ce que vous aurez » d'un produit)
   ===================================================================================================== */
.fen { position: fixed; inset: 0; z-index: 88; display: grid; place-items: center; padding: 20px; visibility: hidden; pointer-events: none; transition: visibility 0s .55s; }
.fen.is-open { visibility: visible; pointer-events: auto; transition: visibility 0s; }
.fen-voile { position: absolute; inset: 0; background: rgba(8, 7, 6, .64); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .5s; }
.fen.is-open .fen-voile { opacity: 1; }
.fen-boite { position: relative; width: min(1040px, 100%); max-height: min(90vh, 900px); display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--verre-bord); border-radius: 4px; background: rgba(17, 16, 14, .95); box-shadow: 0 40px 90px -30px #000;
  opacity: 0; transform: translateY(34px) scale(.95); filter: blur(8px); transition: opacity .4s, transform .75s var(--ease), filter .5s; }
.fen.is-open .fen-boite { opacity: 1; transform: none; filter: none; }
.fen-boite::before { content: ""; position: absolute; z-index: 2; left: 3px; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--acc); }
.fen-x { position: absolute; top: 14px; right: 14px; z-index: 4; width: 44px; height: 44px; display: grid; place-items: center; font-size: 28px;
  border: 1px solid var(--verre-bord); border-radius: 3px; background: rgba(13, 12, 11, .8); transition: transform .5s var(--ease), border-color .3s; }
.fen-x:hover { transform: rotate(90deg); border-color: rgba(236, 211, 177, .4); }
.fen-in { overflow: auto; padding: 28px 34px 0; scrollbar-width: thin; transition: opacity .18s, transform .18s; }
.fen-in.is-change { opacity: 0; transform: translateX(-14px); }
@keyframes fen-el { from { opacity: 0; transform: translateY(14px); } }
@keyframes hl-in { from { transform: skewX(-8deg) scaleX(0); } to { transform: skewX(-8deg) scaleX(1); } }
@keyframes ap-photo { from { opacity: 0; transform: translate(-30px, 20px) rotate(-8deg) scale(.92); } }
@keyframes pop { from { opacity: 0; transform: skewX(-8deg) scale(.4) rotate(-20deg); } }
/* Onglets : passer d'un VIP (ou d'un pack) à l'autre sans fermer la fenêtre */
.ap-onglets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 58px 24px 0; }
.ap-onglet { height: 44px; padding: 0 20px; border: 2px solid var(--line-2); background: rgba(13, 12, 11, .35); font-size: 14px; font-weight: 900; font-style: italic; text-transform: uppercase;
  transform: skewX(-8deg); transition: background .3s, border-color .3s, color .3s, box-shadow .4s; }
.ap-onglet span { display: inline-block; transform: skewX(8deg); }
.ap-onglet:hover { border-color: var(--acc); }
.ap-onglet.is-on { background: var(--beige); color: var(--on-acc); border-color: transparent; box-shadow: 5px 5px 0 rgba(236, 211, 177, .2); }
.ap { display: grid; grid-template-columns: minmax(200px, 290px) minmax(0, 1fr); gap: 34px; align-items: start; padding-bottom: 22px; }
.ap-visuel { position: sticky; top: 0; rotate: -2.5deg; box-shadow: 0 30px 50px -22px rgba(0, 0, 0, .9); animation: ap-photo .8s var(--ease) both; }
.ap-visuel .cadre { height: auto; aspect-ratio: 4 / 4.6; }
.ap-visuel .ph-img { display: block; height: 100%; background: var(--img) var(--pos, 50% 50%) / var(--size, cover) no-repeat; }
.ap-visuel .prod-badge { top: 18px; left: 18px; z-index: 3; }
.ap-txt > * { animation: fen-el .6s var(--ease) both; }
.ap-txt > :nth-child(2) { animation-delay: .05s; } .ap-txt > :nth-child(3) { animation-delay: .1s; } .ap-txt > :nth-child(n + 4) { animation-delay: .14s; }
.ap-k { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; font-weight: 900; font-style: italic; text-transform: uppercase; color: var(--acc); }
.ap-k i { font-size: 18px; }
.ap-titre { margin: 8px 0 12px; font-size: clamp(34px, 4vw, 56px); font-weight: 900; font-style: italic; line-height: 1.08; letter-spacing: -.03em; word-spacing: .1em; text-transform: uppercase; }
.ap-titre .hl::before { top: -.12em; animation: hl-in .8s var(--ease) .2s both; }
.ap-desc { margin: 0 0 20px; font-size: 15px; line-height: 1.7; color: rgba(246, 241, 234, .74); }
.ap-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12.5px; font-weight: 900; font-style: italic; text-transform: uppercase; color: var(--acc); }
.ap-h i { font-size: 18px; }
.ap-h2 { margin-top: 18px; color: var(--muted); }
.ap-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.ap-liste li { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 8px 12px 8px 8px; border: 1px solid var(--line); background: var(--panneau); font-size: 13.5px; font-weight: 600; line-height: 1.3;
  animation: fen-el .55s var(--ease) both; animation-delay: calc(.18s + var(--k, 0) * 35ms); }
.ap-liste li > i { flex: none; width: 36px; height: 36px; display: grid; place-items: center; font-size: 18px; color: var(--on-acc); background: var(--acc); transform: skewX(-8deg); }
.ap-liste li span { flex: 1; }
.ap-liste li b { font-size: 12px; font-weight: 800; font-style: italic; text-transform: uppercase; color: var(--acc); white-space: nowrap; }
.ap-liste.is-off li { border-style: dashed; background: transparent; color: var(--muted); }
.ap-liste.is-off li > i { background: transparent; color: var(--dim); box-shadow: inset 0 0 0 1px var(--line-2); }
.ap-liste.is-off li b { color: var(--dim); }
/* Barre d'achat collée en bas de la fenêtre */
.ap-achat { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin: 0 -34px; padding: 16px 34px 20px;
  border-top: 1px solid var(--line); background: #0f0e0c; }
.ap-durees { display: flex; margin: 0; }
.ap-durees .duree span { min-height: 50px; padding: 4px 14px; }
.ap-prix { display: flex; flex-direction: column; line-height: 1.15; }
.ap-prix b { font-size: 34px; font-weight: 900; font-style: italic; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ap-prix b.is-maj { animation: prix-maj .5s var(--ease); }
.ap-prix small { font-size: 12px; color: var(--muted); }
.ap-boutons { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.ap-boutons .btn { height: 50px; }
.ap-fiche { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12.5px; font-weight: 800; font-style: italic; text-transform: uppercase; color: rgba(246, 241, 234, .7); transition: color .3s, gap .4s var(--ease); }
.ap-fiche i { font-size: 18px; color: var(--acc); }
.ap-fiche:hover { color: #fff; gap: 10px; }
/* ---------- Adaptation écrans (comptes, fenêtre, CGV) ---------- */
@media (max-width: 960px) {
  .rg-tools { flex-basis: 100%; flex-wrap: wrap; }
  .rg-search { flex: 1 1 100%; max-width: none; }
}
@media (max-height: 760px) {
  /* Écran peu haut : le bloc des comptes du panier se fait plus petit */
  .pc { padding: 8px 10px; margin-bottom: 10px; }
  .pc-h { margin-bottom: 6px; }
  .pc .cpt-t small:not(.cpt-ok) { display: none; }
}
@media (max-width: 760px) {
  .fen { padding: 0; align-items: end; }
  .fen-boite { max-height: 94svh; border-radius: 10px 10px 0 0; transform: translateY(60px); }
  .fen-in { padding: 22px 18px 0; }
  .ap { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ap-visuel { position: relative; width: 62%; justify-self: center; }
  .ap-liste { grid-template-columns: minmax(0, 1fr); }
  .ap-achat { margin: 0 -18px; padding: 14px 18px 18px; }
  .ap-boutons { width: 100%; margin-left: 0; }
  .ap-boutons .btn { flex: 1; }
  .ap-onglet { padding: 0 14px; font-size: 13px; }
  .rg-tab { height: 44px; padding: 0 14px; font-size: 13px; }
  .pk-nav { grid-template-columns: 1fr; }
  .pk-grille { gap: 46px 20px; }
}
@media (max-width: 700px) {
  /* Téléphone : le Discord reste dans le menu, l'en-tête garde compte + panier + menu */
  .hd-actions .btn-discord { display: none; }
  .btn-compte { width: 44px; }
  /* Le menu des comptes prend la largeur de l'écran, sous l'en-tête */
  .cpt-menu { position: fixed; top: calc(var(--hd) + 4px); left: 12px; right: 12px; width: auto; }
}

/* Panier ouvert (toutes largeurs) : les messages passent dans la colonne du tiroir, sous son en-tête
   (au centre ou en bas, ils recouvriraient la croix ou le bouton « Passer au paiement ») */
body.panier-open .toast { left: auto; right: 16px; top: 94px; bottom: auto; max-width: min(438px, calc(100vw - 32px)); transform: translateY(-12px); }
body.panier-open .toast.is-on { transform: none; }
body.panier-open .toast:not(:has(.toast-b)) { pointer-events: none; }
/* Très petits téléphones : place pour le bouton du menu */
/* (plus précises que les règles de la page, qui sont chargées après ce fichier) */
@media (max-width: 380px) {
  .hd .hd-in, .hd .hd-actions { gap: 6px; }
  .hd .hd-logo { gap: 6px; font-size: 16px; }
  .hd .hd-logo .couronne { width: 28px; }
  .hd .hd-sous { font-size: calc(14px * var(--sig-k)); }
  .hd .btn-compte { width: 40px; }
  .hd .btn-panier { width: 40px; }
}
@media (max-width: 340px) {
  .hd .hd-logo .couronne { display: none; }
}
/* Article des CGV sur téléphone : le texte défile sous la croix de fermeture */
@media (max-width: 760px) {
  .fen[data-genre="cgv"] .fen-boite { padding-top: 58px; }
  .fen[data-genre="cgv"] .fen-in { padding-top: 22px; }
}
@media (max-width: 400px) {
  .pk-fiche .tape { width: 78px; }
}

/* =====================================================================================================
   PAIEMENT TEBEX : messages du panier, mention en bas de page, fenêtre « Merci »
   ===================================================================================================== */
.cgv-err.is-info.is-alerte { color: #f08a76; }
.panier-pied [data-payer]:disabled { cursor: progress; opacity: .85; }
.panier-rgpd { align-items: flex-start; margin-top: 8px; line-height: 1.45; }
.panier-rgpd i { color: var(--muted); }
.ft-tebex { flex-basis: 100%; font-size: 12px; line-height: 1.5; }
.ft-tebex a { color: inherit; text-decoration: underline; text-underline-offset: 2px; transition: color .3s; }
.ft-tebex a:hover { color: var(--acc); }
.fen[data-genre="merci"] .fen-boite { width: min(560px, 100%); }
.merci { padding: 18px 4px 32px; text-align: center; }
.merci-ico { display: inline-grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: var(--beige); color: var(--on-acc); font-size: 40px;
  box-shadow: 0 14px 34px -14px rgba(236, 211, 177, .7); animation: pop .6s var(--ease) both; }
.merci-t { margin: 18px 0 12px; font-size: clamp(28px, 5vw, 40px); font-weight: 900; font-style: italic; line-height: 1.08; letter-spacing: -.03em; word-spacing: .1em; text-transform: uppercase; }
.merci-t .hl::before { top: -.12em; animation: hl-in .8s var(--ease) .2s both; }
.merci p { max-width: 430px; margin: 0 auto 10px; font-size: 14.5px; line-height: 1.65; color: rgba(246, 241, 234, .74); }
.merci p b { color: var(--acc); }
.merci-b { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
.merci-b .btn { height: 50px; }