/* Aspect « Lobby » (Admin → Appearance → Look of the shop) : noir, or et orange ; titres géants en capitales condensées,
   ruban défilant, trois « portes », cartes sombres. Tout est limité à body.look-lobby : sans ce réglage, cette feuille
   n'est même pas chargée. Les couleurs (--pink = or) et les polices viennent de themeCss() dans views.js. */

body.look-lobby {
  --orange: var(--lt);
  --lt: color-mix(in srgb, var(--pink) 66%, #fff); /* version plus claire de la couleur du site, pour les textes sur fond sombre */
  --cream: #f4efe6;
  --panel: #0e0d11;
  --panel2: #18161c;
  --line: rgba(255, 255, 255, .1);
  --text: #f4efe6;
  --mute: #a49f98;
  --radius: 20px;
  overflow-x: clip;
}
html.look-lobby-html {
  background:
    radial-gradient(60% 45% at 85% 0%, color-mix(in srgb, var(--pink) 22%, transparent), transparent 70%),
    radial-gradient(45% 40% at 0% 55%, color-mix(in srgb, var(--pink) 10%, transparent), transparent 70%),
    radial-gradient(50% 40% at 70% 100%, color-mix(in srgb, var(--pink) 13%, transparent), transparent 70%),
    #07060a;
  background-attachment: fixed;
}
/* bords un peu assombris, derrière le contenu (aucun effet par-dessus les images) */
body.look-lobby::before { content: none; }
body.look-lobby::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: none; mask-image: none; background-image: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .45));
}

/* ---------- Écran de chargement (une fois par visite) ---------- */
#lb-loader {
  position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--pink) 78%, #fff), var(--pink) 55%, color-mix(in srgb, var(--pink) 78%, #000)); color: var(--on-pink);
  transition: opacity .5s, visibility .5s; animation: lbFail .5s 3s forwards;
}
#lb-loader img { border-radius: 50%; animation: lbPulse .9s ease-in-out infinite alternate; }
#lb-loader b { font: 400 14px var(--font-h); letter-spacing: .42em; text-transform: uppercase; }
#lb-loader.out { opacity: 0; visibility: hidden; }
@keyframes lbFail { to { opacity: 0; visibility: hidden; } }
@keyframes lbPulse { to { transform: scale(1.09); } }

/* ---------- Barre du haut ---------- */
body.look-lobby .top { background: rgba(7, 6, 10, .8); border-bottom: 1px solid rgba(255, 255, 255, .08); padding: 12px 28px; gap: 22px; }
body.look-lobby .brand img { box-shadow: 0 0 0 2px color-mix(in srgb, var(--pink) 44%, transparent), 0 0 24px color-mix(in srgb, var(--pink) 50%, transparent); }
body.look-lobby .brand span { font: 400 17px var(--font-h); letter-spacing: .1em; text-transform: uppercase; color: var(--cream); }
body.look-lobby .brand span b { color: var(--lt); font-weight: 400; }
body.look-lobby .top nav { margin: 0 0 0 auto; gap: 2px; }
body.look-lobby .top nav a { font: 400 14px var(--font-h); letter-spacing: .14em; text-transform: uppercase; color: var(--cream); border-radius: 0; padding: 8px 12px; border-bottom: 2px solid transparent; background: none; }
body.look-lobby .top nav a:hover { color: var(--lt); background: none; border-bottom-color: var(--lt); }
body.look-lobby .top nav .sep { background: rgba(255, 255, 255, .18); }

/* boutons : pastilles en capitales condensées */
body.look-lobby .btn { border-radius: 999px; font: 400 14px var(--font-h); letter-spacing: .14em; text-transform: uppercase; padding: 13px 26px; }
body.look-lobby .btn.sm { padding: 8px 15px; font-size: 12px; letter-spacing: .12em; }
body.look-lobby .btn.big { padding: 16px 28px; font-size: 16px; }
body.look-lobby .btn:hover { transform: none; filter: none; }
body.look-lobby .btn.primary { background: var(--pink); color: var(--on-pink); box-shadow: 0 10px 30px -12px var(--lt); }
body.look-lobby .btn.primary:hover { background: color-mix(in srgb, var(--pink) 82%, #fff); }
body.look-lobby .btn.ghost { background: transparent; border: 1px solid rgba(255, 255, 255, .24); color: var(--cream); }
body.look-lobby .btn.ghost:hover { border-color: var(--lt); color: var(--lt); }
body.look-lobby .btn.discord, body.look-lobby .btn.telegram { background: transparent; border: 1px solid color-mix(in srgb, var(--pink) 75%, transparent); color: var(--lt); }
body.look-lobby .btn.discord:hover, body.look-lobby .btn.telegram:hover { background: color-mix(in srgb, var(--pink) 15%, transparent); }
body.look-lobby .wish-count { background: var(--pink); color: var(--on-pink); }

/* bouton « Sound on / off » : petites barres qui dansent */
.snd { gap: 8px; }
.snd .bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.snd .bars i { display: block; width: 3px; background: var(--pink); border-radius: 1px; animation: lbBars .9s ease-in-out infinite alternate; }
.snd .bars i:nth-child(1) { height: 5px; animation-delay: -.2s; }
.snd .bars i:nth-child(2) { height: 12px; animation-delay: -.5s; }
.snd .bars i:nth-child(3) { height: 8px; animation-delay: -.8s; }
.snd.off .bars i { animation: none; height: 3px; opacity: .5; }
.snd.off { color: var(--mute); }
@keyframes lbBars { to { transform: scaleY(.35); } }

/* ---------- Accueil : grand titre ---------- */
.lb-hero { position: relative; min-height: calc(100svh - 76px); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 26px 0 270px; isolation: isolate; }
.lb-stage { position: relative; display: grid; place-items: center; width: 100%; }
.lb-title { grid-area: 1 / 1; margin: 0; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; text-transform: uppercase; font: 400 clamp(64px, 15vw, 250px)/.86 var(--font-h); letter-spacing: .005em; text-wrap: balance; }
.lb-title.lg { font-size: clamp(54px, 11.5vw, 190px); }
.lb-title.md { font-size: clamp(42px, 8.4vw, 140px); }
.lb-title span { display: block; max-width: 100%; }
.lb-title .l1 { color: var(--cream); text-shadow: 0 6px 0 rgba(0, 0, 0, .35); }
.lb-title .l2 { color: transparent; -webkit-text-stroke: clamp(1.5px, .2vw, 3px) var(--lt); }
.lb-mascot { grid-area: 1 / 1; z-index: 2; width: min(40vw, 430px); aspect-ratio: 1; object-fit: contain; pointer-events: none; filter: drop-shadow(0 0 44px color-mix(in srgb, var(--pink) 55%, transparent)) drop-shadow(0 22px 40px rgba(0, 0, 0, .65)); animation: lbFloat 6s ease-in-out infinite alternate; }
.lb-mascot.is-logo { border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 69%, transparent); }
@keyframes lbFloat { to { transform: translateY(-14px) rotate(1.2deg); } }
/* image d'accueil (Admin → Appearance → Header image) : un personnage en pied, à droite du titre, dont les pieds se fondent dans le ruban */
.lb-hero.has-figure .lb-stage { width: 68%; margin-right: auto; }
.lb-figure { position: absolute; right: 0; bottom: 44px; z-index: 3; height: min(96%, 880px); width: auto; max-width: 46%; object-fit: contain;
  -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent);
  filter: drop-shadow(0 0 46px color-mix(in srgb, var(--pink) 50%, transparent)) drop-shadow(0 26px 40px rgba(0, 0, 0, .55));
  /* elle se tourne à gauche / à droite (± quelques degrés, jamais un tour complet) : les angles viennent de lobby.js */
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-drag: none; transform-origin: 50% 88%; will-change: transform;
  transform: perspective(1100px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) translate3d(var(--tx, 0px), var(--ty, 0px), 0); }
.lb-figure.grab { cursor: grabbing; }
@keyframes lbFloat2 { to { transform: translateY(-12px); } }
.lb-hero.has-figure .lb-badge { margin-right: min(30%, 420px); } /* le badge rond se place à gauche du personnage */
@media (max-width: 820px) {
  .lb-hero.has-figure .lb-stage { width: 100%; }
  .lb-figure { position: static; display: block; margin: 10px auto 0; height: auto; width: min(64vw, 300px); max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .lb-figure { animation: none; } }

/* titre long : le logo passe au-dessus du titre au lieu de le recouvrir (un titre court de 12 lettres ou moins se fait recouvrir comme sur la référence) */
.lb-stage.stack { gap: 6px; }
.lb-stage.stack .lb-title { grid-area: 2 / 1; }
.lb-stage.stack .lb-mascot { grid-area: 1 / 1; width: min(24vw, 250px); }

.lb-hero-foot { position: absolute; left: 0; right: 0; bottom: 70px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; z-index: 4; }
.lb-pitch { max-width: 360px; text-align: left; }
.lb-marker { display: block; font: 400 28px var(--font-m); color: var(--lt); transform: rotate(-3deg); transform-origin: left; margin-bottom: 8px; }
.lb-pitch p { color: #cfc9bf; font-size: 15px; margin: 0 0 14px; }
.lb-pitch .hero-cta { margin: 0; }
.lb-down { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; font: 400 12px var(--font-h); letter-spacing: .34em; text-transform: uppercase; color: var(--cream); }
.lb-down b { font-size: 20px; color: var(--lt); animation: lbBob 1.4s ease-in-out infinite; }
@keyframes lbBob { 50% { transform: translateY(6px); } }
.lb-badge { position: relative; flex: none; width: 132px; height: 132px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--pink) 56%, transparent); display: grid; place-items: center; background: rgba(7, 6, 10, .6); }
.lb-badge svg { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); animation: lbSpin 22s linear infinite; }
.lb-badge text { font: 400 10.5px var(--font-h); fill: var(--lt); letter-spacing: .12em; }
.lb-badge b { font: 400 44px var(--font-h); color: var(--lt); line-height: 1; }
@keyframes lbSpin { to { transform: rotate(360deg); } }

/* ---------- Ruban qui défile (deux bandes en biais) ---------- */
.lb-tapes { position: relative; z-index: 3; width: 100vw; margin-left: calc(50% - 50vw); height: 170px; margin-top: -96px; overflow: hidden; pointer-events: none; }
.tape { position: absolute; left: -5%; width: 110%; overflow: hidden; white-space: nowrap; }
.tape.t1 { top: 24px; transform: rotate(-2.6deg); background: var(--pink); color: var(--on-pink); box-shadow: 0 14px 40px -10px rgba(0, 0, 0, .75); }
.tape.t2 { top: 86px; transform: rotate(1.6deg); background: #0a0909; color: var(--lt); border-block: 2px dashed color-mix(in srgb, var(--pink) 69%, transparent); }
.tape-track { display: inline-flex; align-items: center; width: max-content; animation: lbTape 40s linear infinite; }
.tape.t2 .tape-track { animation-direction: reverse; animation-duration: 48s; }
.tape b { font: 400 clamp(20px, 2.6vw, 34px) var(--font-h); letter-spacing: .06em; text-transform: uppercase; padding: 12px 0; }
.tape i { font-style: normal; margin: 0 clamp(18px, 3vw, 40px); opacity: .7; }
@keyframes lbTape { to { transform: translateX(-25%); } }

/* ---------- Titres de section ---------- */
.lb-head { display: grid; gap: 10px; justify-items: center; text-align: center; margin-bottom: 34px; }
.lb-head.left { justify-items: start; text-align: left; margin-bottom: 22px; }
.lb-eyebrow { font: 600 12px var(--font-b); letter-spacing: .34em; text-transform: uppercase; color: var(--lt); }
.lb-h2 { margin: 0; font: 400 clamp(44px, 8.4vw, 120px)/.92 var(--font-h); text-transform: uppercase; letter-spacing: .005em; text-wrap: balance; }
.lb-shop .lb-h2 { font-size: clamp(40px, 6.4vw, 92px); }
.lb-h2 .o { color: transparent; -webkit-text-stroke: clamp(1.5px, .18vw, 2.5px) var(--lt); }
.lb-stats { margin: 0; color: var(--mute); }
.lb-stats b { color: var(--lt); font: 400 24px var(--font-h); letter-spacing: .03em; }

/* ---------- Les trois portes ---------- */
.lb-doors { padding: 70px 0 20px; scroll-margin-top: 70px; }
.door-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; align-items: start; padding-bottom: 40px; }
.door-grid.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.door-grid.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.door-grid.n4 .door:nth-child(n) { margin-top: 0; }
.door-grid.n4 .door:nth-child(even) { margin-top: 40px; }
.door-grid.n1 { grid-template-columns: minmax(0, 520px); justify-content: center; }
.door { --dc: var(--pink); position: relative; display: flex; flex-direction: column; min-height: clamp(500px, 46vw, 660px); border-radius: 30px; overflow: hidden; isolation: isolate;
  border: 2px dashed color-mix(in srgb, var(--dc) 65%, transparent);
  background: radial-gradient(90% 55% at 50% 0%, color-mix(in srgb, var(--dc) 30%, transparent), transparent 72%), linear-gradient(180deg, color-mix(in srgb, var(--dc) 10%, #0c0b0f), #09080b 75%);
  transition: transform .35s, border-color .25s, box-shadow .35s; }
.door:nth-child(2) { margin-top: 28px; }
.door:nth-child(3) { margin-top: 56px; }
.door:hover { transform: translateY(-8px); border-style: solid; border-color: var(--dc); box-shadow: 0 34px 90px -34px var(--dc); }
.door::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 30%), color-mix(in srgb, var(--dc) 26%, transparent), transparent 62%); }
.door:hover::after { opacity: 1; }
.door-link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.door-art { position: absolute; inset: 0 0 38% 0; z-index: 0; overflow: hidden; -webkit-mask-image: linear-gradient(#000 68%, transparent); mask-image: linear-gradient(#000 68%, transparent); }
.door-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 40px 18px 0; transition: transform .5s, opacity .6s; }
.door-art.wide img { object-fit: cover; padding: 0; opacity: .9; }
.door:hover .door-art img { transform: scale(1.05); }
.door-art .door-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s; pointer-events: none; }
.door-3d.live .door-canvas { opacity: 1; }
.door-3d.live img { opacity: 0; }
.door-no { position: absolute; top: 18px; right: 24px; z-index: 2; font: 400 64px/1 var(--font-h); color: transparent; -webkit-text-stroke: 1.5px var(--dc); }
.door-body { position: relative; z-index: 2; margin-top: auto; display: grid; gap: 10px; padding: 70px 26px 26px; background: linear-gradient(180deg, transparent, rgba(8, 7, 10, .9) 34%); }
.door-eyebrow { font: 400 20px var(--font-m); color: var(--dc); transform: rotate(-3deg); transform-origin: left; }
.door h3 { margin: 0; font: 400 clamp(54px, 6vw, 92px)/.9 var(--font-h); text-transform: uppercase; letter-spacing: .005em; color: var(--cream); }
.door-body p { margin: 0; color: #c9c3b9; font-size: 14.5px; max-width: 34ch; }
.door-chips { position: relative; z-index: 4; display: flex; flex-wrap: wrap; gap: 8px; }
.dchip { border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px; padding: 6px 13px; background: rgba(8, 7, 10, .6); font: 400 12px var(--font-h); letter-spacing: .12em; text-transform: uppercase; color: var(--cream); transition: border-color .15s, color .15s; }
.dchip i { font: 600 11px var(--font-b); font-style: normal; color: var(--dc); margin-left: 4px; }
.dchip:hover { border-color: var(--dc); color: var(--dc); }
.door-enter { justify-self: start; margin-top: 6px; display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; border-radius: 999px; background: var(--dc); color: var(--on-dc, #100800); font: 400 14px var(--font-h); letter-spacing: .16em; text-transform: uppercase; }
.door-enter b { font-weight: 400; transition: transform .2s; }
.door:hover .door-enter b { transform: translateX(5px); }

/* ---------- Boutique : recherche, pastilles de catégories, sections ---------- */
.lb-shop { padding-top: 60px; }
.lb-search { position: relative; margin: 6px 0 16px; }
body.look-lobby .lb-search .search { height: 58px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--orange) 80%, transparent); background: rgba(14, 13, 17, .9); padding: 0 64px 0 26px; font-size: 16px; color: var(--cream); }
body.look-lobby .lb-search .search:focus { outline: none; border-color: var(--lt); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pink) 20%, transparent); }
.lb-search kbd { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); border: 1px solid rgba(255, 255, 255, .3); border-radius: 8px; padding: 2px 9px; font: 600 13px var(--font-b); color: var(--mute); background: #18161c; pointer-events: none; }
body.look-lobby .tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 6px; }
body.look-lobby .tabs .tab { border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; padding: 9px 16px; font: 400 14px var(--font-h); letter-spacing: .12em; text-transform: uppercase; color: var(--cream); background: rgba(14, 13, 17, .7); }
body.look-lobby .tabs .tab i { font: 600 12px var(--font-b); font-style: normal; color: var(--mute); margin-left: 6px; }
body.look-lobby .tabs .tab:hover { border-color: var(--lt); color: var(--lt); }
body.look-lobby .cat-section .cat-head h2, body.look-lobby .slider-wrap .cat-head h2 { font: 400 clamp(34px, 4vw, 52px)/1 var(--font-h); text-transform: uppercase; letter-spacing: .01em; margin: 0; }
body.look-lobby .cat-head h2::before { content: ''; display: inline-block; width: 10px; height: .8em; margin-right: 14px; background: var(--pink); transform: skewX(-14deg); vertical-align: -.02em; }
body.look-lobby .cat-section .see-all { font: 400 14px var(--font-h); letter-spacing: .14em; text-transform: uppercase; color: var(--lt); }
body.look-lobby .arrows button { background: transparent; }
body.look-lobby .arrows button:hover { border-color: var(--lt); color: var(--lt); }

/* ---------- Cartes produit ---------- */
body.look-lobby .pcard { padding: 0; gap: 0; border-radius: 20px; overflow: hidden; background: var(--panel); border: 1px solid rgba(255, 255, 255, .08); }
body.look-lobby .pcard:hover { transform: translateY(-4px); border-color: var(--lt); box-shadow: 0 18px 46px -22px var(--lt); }
body.look-lobby .pc-img { border-radius: 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .06); background: radial-gradient(circle at 50% 38%, #2b1d10, #0b0a0d 72%); }
body.look-lobby .chip-type { background: rgba(7, 6, 10, .78); border: 1px solid var(--lt); color: var(--lt); font: 400 11px var(--font-h); letter-spacing: .14em; }
body.look-lobby .chip-3d { background: var(--pink); border: 1px solid var(--lt); color: var(--on-pink); font: 400 11px var(--font-h); letter-spacing: .14em; }
body.look-lobby .pc-img .badge { background: #fff; color: #111; font: 400 11px var(--font-h); letter-spacing: .14em; text-transform: uppercase; }
body.look-lobby .pc-name { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; padding: 14px 14px 10px; }
body.look-lobby .pc-name h3 { font: 400 16px/1.15 var(--font-h); text-transform: uppercase; letter-spacing: .04em; }
body.look-lobby .pc-name .price { font: 400 20px var(--font-h); color: var(--lt); letter-spacing: .03em; white-space: nowrap; }
body.look-lobby .pc-actions { padding: 0 14px 14px; }
body.look-lobby .heart { border-radius: 999px; background: transparent; }
body.look-lobby .heart:hover, body.look-lobby .heart.on { border-color: var(--lt); color: var(--lt); }

/* ---------- Pages catégorie et produit ---------- */
body.look-lobby h1 { font: 400 clamp(40px, 6vw, 84px)/.95 var(--font-h); text-transform: uppercase; letter-spacing: .005em; }
body.look-lobby .product h1 { font-size: clamp(34px, 4vw, 56px); }
body.look-lobby h2 { font-family: var(--font-h); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; }
body.look-lobby .crumb a:hover { color: var(--lt); }
body.look-lobby .info .big-price { font: 400 46px var(--font-h); color: var(--lt); }
body.look-lobby .viewer { border: 1px solid color-mix(in srgb, var(--pink) 35%, transparent); border-radius: 22px; background: radial-gradient(circle at 50% 40%, #2a1a0b, #0b0a0d 72%); }
/* coins dorés autour de la fenêtre 3D */
body.look-lobby .viewer:not(img)::before {
  content: ''; position: absolute; inset: 12px; z-index: 2; pointer-events: none;
  background:
    linear-gradient(var(--lt), var(--lt)) top left / 26px 3px no-repeat, linear-gradient(var(--lt), var(--lt)) top left / 3px 26px no-repeat,
    linear-gradient(var(--lt), var(--lt)) top right / 26px 3px no-repeat, linear-gradient(var(--lt), var(--lt)) top right / 3px 26px no-repeat,
    linear-gradient(var(--lt), var(--lt)) bottom left / 26px 3px no-repeat, linear-gradient(var(--lt), var(--lt)) bottom left / 3px 26px no-repeat,
    linear-gradient(var(--lt), var(--lt)) bottom right / 26px 3px no-repeat, linear-gradient(var(--lt), var(--lt)) bottom right / 3px 26px no-repeat;
}
body.look-lobby .buy-box { border-radius: 20px; border: 1px dashed color-mix(in srgb, var(--pink) 48%, transparent); background: var(--panel); }
body.look-lobby .buy-box h3 { font: 400 22px var(--font-h); text-transform: uppercase; letter-spacing: .04em; }
body.look-lobby .badge.inline { background: #fff; color: #111; font: 400 12px var(--font-h); letter-spacing: .12em; text-transform: uppercase; }

/* ---------- Comment acheter, questions fréquentes ---------- */
body.look-lobby .steps li { border-radius: 20px; border: 1px dashed color-mix(in srgb, var(--pink) 38%, transparent); background: var(--panel); }
body.look-lobby .steps li span { border-radius: 10px; background: var(--pink); color: var(--on-pink); font: 400 20px var(--font-h); }
body.look-lobby .faq details { border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; background: var(--panel); }
body.look-lobby .faq summary { font: 400 18px var(--font-h); letter-spacing: .04em; text-transform: uppercase; }

/* ---------- Pied de page ---------- */
.lb-mega { width: 100%; overflow: hidden; text-align: center; line-height: .8; margin-top: 30px; }
.lb-mega span { display: block; white-space: nowrap; padding-bottom: 10px; font: 400 clamp(60px, 13vw, 220px)/.85 var(--font-h); text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--pink) 53%, transparent); }
body.look-lobby .foot { background: rgba(7, 6, 10, .92); border-top: 1px solid color-mix(in srgb, var(--pink) 28%, transparent); }
body.look-lobby .foot h4 { font: 400 15px var(--font-h); letter-spacing: .2em; color: var(--lt); }

/* ---------- Apparition au défilement ---------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .7s, transform .7s; }
.rv.in { opacity: 1; transform: none; }

/* ---------- Petits écrans ---------- */
@media (max-width: 1000px) {
  .door-grid, .door-grid.n2, .door-grid.n4 { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .door-grid .door, .door-grid.n4 .door:nth-child(n) { margin-top: 0 !important; min-height: 520px; }
}
@media (max-width: 820px) {
  .lb-hero { padding-bottom: 110px; min-height: 0; }
  .lb-hero-foot { position: static; flex-direction: column; align-items: center; text-align: center; margin-top: 22px; }
  .lb-pitch { text-align: center; }
  .lb-pitch .hero-cta { justify-content: center; }
  .lb-marker { transform-origin: center; }
  .lb-badge, .lb-down { display: none; }
  .lb-mascot { width: min(58vw, 320px); }
  .lb-tapes { height: 150px; margin-top: -60px; }
  body.look-lobby .top { padding: 10px 16px; gap: 10px 14px; position: static; } /* sur téléphone la barre prend plusieurs lignes : elle ne reste pas collée en haut */
  body.look-lobby .top nav { margin: 0; width: 100%; order: 3; }
  body.look-lobby .top nav a { font-size: 12px; padding: 6px 8px; }
  body.look-lobby .top-cta { margin-left: auto; }
  .snd .snd-t { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tape-track, .lb-badge svg, .lb-mascot, .lb-down b, .snd .bars i, #lb-loader img { animation: none !important; }
  .rv { opacity: 1; transform: none; transition: none; }
}

/* ---------- Vidéo en fond de l'accueil ---------- */
.lb-video { position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); overflow: hidden; opacity: 0; transition: opacity 1.8s; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.lb-video.on { opacity: .42; }
.lb-video iframe { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; transform: translate(-50%, -50%); border: 0; }
.lb-video::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(7, 6, 10, .5), rgba(7, 6, 10, .15)); }

/* ---------- Lumières : un halo suit la souris, des lueurs bougent avec le défilement (derrière le contenu, jamais sur les images) ---------- */
.lb-lights { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.lb-lights i { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.lb-lights .l1 { width: 46vw; height: 46vw; left: -14vw; top: 6vh; background: radial-gradient(circle, color-mix(in srgb, var(--pink) 26%, transparent), transparent 68%); transform: translate3d(0, calc(var(--sy, 0px) * -.14), 0); }
.lb-lights .l2 { width: 42vw; height: 42vw; right: -12vw; top: 48vh; background: radial-gradient(circle, color-mix(in srgb, var(--pink) 20%, transparent), transparent 68%); transform: translate3d(0, calc(var(--sy, 0px) * -.24), 0); }
.lb-lights .lc { width: 440px; height: 440px; left: 0; top: 0; margin: -220px 0 0 -220px; background: radial-gradient(circle, color-mix(in srgb, var(--pink) 30%, transparent), transparent 66%); transform: translate3d(var(--cx, 50vw), var(--cy, 25vh), 0); }

/* bordure lumineuse qui suit la souris sur les cartes produit et les avis */
body.look-lobby .pcard, body.look-lobby .rcard { position: relative; }
body.look-lobby .pcard::after, body.look-lobby .rcard::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--lt), transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
body.look-lobby .pcard:hover::after, body.look-lobby .rcard:hover::after { opacity: 1; }

/* recherche, avis et compteurs dans le style Lobby */
body.look-lobby .cat-tools .search { height: 50px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--pink) 70%, transparent); background: rgba(14, 13, 17, .9); padding: 0 22px; color: var(--cream); }
body.look-lobby .cat-tools select { height: 50px; border-radius: 999px; padding: 0 18px; font: 400 14px var(--font-h); letter-spacing: .1em; text-transform: uppercase; background: rgba(14, 13, 17, .9); border-color: rgba(255, 255, 255, .2); }
body.look-lobby .rcard { background: var(--panel); border: 1px solid rgba(255, 255, 255, .08); border-radius: 20px; overflow: hidden; }
body.look-lobby .rc-who b { font: 400 17px var(--font-h); letter-spacing: .04em; text-transform: uppercase; }
body.look-lobby .rc-av { border-radius: 12px; font-family: var(--font-h); font-weight: 400; }
body.look-lobby .stats-grid { border: 1px dashed color-mix(in srgb, var(--pink) 45%, transparent); border-radius: 24px; background: rgba(14, 13, 17, .75); }
body.look-lobby .stat { border-right-color: rgba(255, 255, 255, .08); }
body.look-lobby .stat b { font: 400 clamp(44px, 6vw, 76px)/1 var(--font-h); color: var(--lt); letter-spacing: .01em; }
body.look-lobby .stat span { font: 600 12px var(--font-b); letter-spacing: .28em; text-transform: uppercase; }
body.look-lobby .reviews h2 { font: 400 clamp(34px, 4vw, 52px)/1 var(--font-h); }
@media (prefers-reduced-motion: reduce) { .lb-lights i { transform: none !important; } .lb-video { display: none; } }

/* « Customization » : lien du menu en couleur d'accent, petite bannière et page dans le style Lobby */
body.look-lobby .top nav a.nav-cust { color: var(--lt); }
body.look-lobby .cust-banner { border-radius: 22px; }
body.look-lobby .cb-text b { font-weight: 400; font-size: clamp(22px, 2.6vw, 30px); }
body.look-lobby .cust-services .cs b, body.look-lobby .cust-how li b { font: 400 18px var(--font-h); letter-spacing: .04em; text-transform: uppercase; }
body.look-lobby .cust-box { border-radius: 22px; border: 1px dashed color-mix(in srgb, var(--pink) 45%, transparent); }

/* menu « FiveM » dans le style Lobby */
body.look-lobby .top nav .nav-dd-btn { font: 400 14px var(--font-h); letter-spacing: .14em; text-transform: uppercase; color: var(--cream); border-radius: 0; padding: 8px 12px; border-bottom: 2px solid transparent; background: none; }
body.look-lobby .top nav .nav-dd-btn:hover, body.look-lobby .nav-dd.open .nav-dd-btn { color: var(--lt); border-bottom-color: var(--lt); background: none; }
body.look-lobby .nav-dd-menu { background: #0a090e; border: 1px solid color-mix(in srgb, var(--pink) 45%, transparent); border-radius: 20px; }
body.look-lobby .top nav .nav-dd-menu a { font: 400 15px var(--font-h); letter-spacing: .08em; text-transform: uppercase; border-radius: 12px; padding: 10px 14px; border-bottom: 0; }
body.look-lobby .top nav .nav-dd-menu a b { font: 600 12px var(--font-b); letter-spacing: 0; }
body.look-lobby .top nav .nav-dd-menu a.all { color: var(--lt); }

/* La boutique (carrousel + catalogue) reste fermée tant qu'on n'a pas cliqué sur la flèche « See the shop » / « Browse the shop » (voir lobby.js) */
.lb-reveal.is-closed { display: none; }
.lb-reveal:not(.is-closed) { animation: lbOpen .5s ease both; }
@keyframes lbOpen { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lb-reveal:not(.is-closed) { animation: none; } }

/* ---------- Deux personnages : un de chaque côté du titre (image de droite = « Header image », image de gauche = « Left character ») ---------- */
.lb-hero.has-figure2 .lb-stage { width: 100%; margin-right: 0; }
.lb-hero.has-figure2 .lb-figure { max-width: 30%; height: min(90%, 800px); }
.lb-figure.lb-figure-l { right: auto; left: 0; }
.lb-hero.has-figure2 .lb-hero-foot { flex-direction: column; align-items: center; justify-content: flex-end; gap: 12px; text-align: center; bottom: 40px; }
.lb-hero.has-figure2 .lb-pitch { text-align: center; max-width: 460px; }
.lb-hero.has-figure2 .lb-pitch .hero-cta { justify-content: center; }
.lb-hero.has-figure2 .lb-marker { transform-origin: center; }
.lb-hero.has-figure2 .lb-down { position: static; transform: none; margin-top: 4px; }
.lb-hero.has-figure2 .lb-badge { position: absolute; right: 31%; bottom: 0; margin: 0; }
@media (max-width: 1000px) { .lb-hero.has-figure2 .lb-badge { display: none; } }
@media (max-width: 820px) { /* sur téléphone : le titre en haut, puis les deux personnages côte à côte (l'homme à gauche), puis le texte */
  .lb-hero.has-figure2 { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
  .lb-hero.has-figure2 .lb-stage { flex: 0 0 100%; order: 0; }
  .lb-hero.has-figure2 .lb-title { width: 100%; }
  .lb-hero.has-figure2 .lb-figure { position: static; display: block; order: 2; width: 46%; max-width: none; height: auto; margin: 10px 0 0; }
  .lb-hero.has-figure2 .lb-figure.lb-figure-l { order: 1; }
  .lb-hero.has-figure2 .lb-hero-foot { flex: 0 0 100%; order: 3; position: static; }
}
.lb-hero.has-figure2 .lb-title { width: min(46%, 720px); } /* le titre tient entre les deux personnages et passe à la ligne comme d'habitude */
.lb-hero.has-figure2 .lb-badge { width: 112px; height: 112px; }
.lb-hero.has-figure2 .lb-badge b { font-size: 36px; }
.lb-hero.has-figure2 .lb-badge { bottom: 44px; }
@media (max-width: 1280px) { .lb-hero.has-figure2 .lb-badge { display: none; } } /* trop serré : le badge rond ne s'affiche que sur grand écran */

/* Personnages fixes (la rotation à la souris est un réglage, désactivé par défaut) : ils ne captent ni clic ni glissement */
.lb-hero:not([data-spin]) .lb-figure { pointer-events: none; cursor: default; }
/* deux personnages : leurs pieds descendent derrière le ruban au lieu de s'arrêter dans le vide */
.lb-hero.has-figure2 .lb-figure { bottom: -4px; }
@media (max-width: 820px) { .lb-hero.has-figure2 .lb-figure { bottom: auto; } }