/* Aspect « Noir » (Admin → Appearance → Look of the shop) : noir et blanc pur, titres très larges (Unbounded), étiquettes en monospace
   (Space Mono), panneaux « verre » aux coins marqués. Il réutilise la structure du Lobby : cette feuille est chargée APRÈS lobby.css
   et ne fait que la repeindre. Les variables (--pink = blanc cassé, polices) viennent de themeCss() dans views.js.
   Règle du site : aucun effet par-dessus les images (grain et lueurs restent DERRIÈRE le contenu). */

body.look-noir {
  --lt: #f2f2f5;
  --cream: #ededf0;
  --panel: rgba(255, 255, 255, .035);
  --panel2: rgba(255, 255, 255, .06);
  --line: rgba(255, 255, 255, .12);
  --text: #ededf0;
  --mute: #8d8d97;
  --radius: 16px;
  --glass: rgba(255, 255, 255, .04);
  --edge: rgba(255, 255, 255, .14);
  --ac-lt: color-mix(in srgb, var(--ac, #d81b60) 72%, #fff); /* accent plus clair : textes et fins traits sur fond noir */
}
html.look-noir-html { background: #000; }
/* fond : noir profond, léger voile gris au centre, grain très fin (derrière tout le contenu) */
body.look-noir::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  -webkit-mask-image: none; mask-image: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.16'/></svg>");
}
body.look-noir::after { background: radial-gradient(55% 40% at 92% 0%, color-mix(in srgb, var(--ac) 16%, transparent), transparent 70%), radial-gradient(50% 40% at 0% 60%, color-mix(in srgb, var(--ac) 8%, transparent), transparent 70%), radial-gradient(90% 70% at 50% 30%, rgba(255, 255, 255, .05), transparent 60%), radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .7)); }
.look-noir .lb-lights .l1, .look-noir .lb-lights .l2 { background: radial-gradient(circle, rgba(255, 255, 255, .06), transparent 68%); }
.look-noir .lb-lights .lc { background: radial-gradient(circle, color-mix(in srgb, var(--ac) 16%, transparent), transparent 66%); }

body.look-noir .announce { background: var(--ac); color: var(--on-ac); }

/* ---------- Écran de chargement ---------- */
body.look-noir #lb-loader { background: #000; color: #fff; }
body.look-noir #lb-loader img { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ac) 60%, transparent), 0 0 30px color-mix(in srgb, var(--ac) 45%, transparent); }
body.look-noir #lb-loader b { font: 400 11px var(--font-m); letter-spacing: .5em; }

/* ---------- Barre du haut : logo, menu en pastille, boutons fins ---------- */
body.look-noir .top { background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, .07); }
body.look-noir .brand img { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ac) 55%, transparent), 0 0 20px color-mix(in srgb, var(--ac) 38%, transparent); } /* le logo garde ses couleurs */
body.look-noir .brand span { font: 600 13px var(--font-h); letter-spacing: .12em; color: #fff; }
body.look-noir .brand span b { color: #8d8d97; font-weight: 600; }
body.look-noir .top nav { margin: 0 auto; gap: 2px; padding: 5px; border: 1px solid var(--edge); border-radius: 999px; background: var(--glass); }
body.look-noir .top nav a, body.look-noir .top nav .nav-dd-btn { font: 400 11px var(--font-m); letter-spacing: .12em; text-transform: uppercase; color: #a9a9b3; border: 0; border-radius: 999px; padding: 8px 15px; background: none; }
body.look-noir .top nav a:hover, body.look-noir .top nav .nav-dd-btn:hover, body.look-noir .nav-dd.open .nav-dd-btn { color: #fff; background: rgba(255, 255, 255, .1); border: 0; }
body.look-noir .top nav a.nav-cust { color: var(--ac-lt); }
body.look-noir .top nav .sep { background: rgba(255, 255, 255, .15); }
body.look-noir .nav-dd-menu { background: #060607; border: 1px solid var(--edge); border-radius: 18px; }
body.look-noir .top nav .nav-dd-menu a { font: 400 11px var(--font-m); letter-spacing: .1em; border-radius: 10px; padding: 10px 12px; }
body.look-noir .top nav .nav-dd-menu a b { font: 400 11px var(--font-m); color: #6f6f79; }
body.look-noir .top nav .nav-dd-menu a.all { color: #fff; }

/* boutons : pastilles fines, texte en monospace ; le bouton principal est blanc */
body.look-noir .btn { font: 400 11px var(--font-m); letter-spacing: .12em; padding: 13px 24px; box-shadow: none; }
body.look-noir .btn.sm { padding: 8px 15px; font-size: 10px; }
body.look-noir .btn.big { padding: 16px 28px; font-size: 12px; }
body.look-noir .btn.primary { background: var(--ac); color: var(--on-ac); box-shadow: 0 10px 40px -14px var(--ac); }
body.look-noir .btn.primary:hover { background: color-mix(in srgb, var(--ac) 82%, #fff); }
body.look-noir .btn.ghost { border: 1px solid rgba(255, 255, 255, .22); color: #ededf0; background: rgba(255, 255, 255, .02); }
body.look-noir .btn.ghost:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .08); }
body.look-noir .btn.discord, body.look-noir .btn.telegram { border: 1px solid rgba(255, 255, 255, .3); color: #fff; background: rgba(255, 255, 255, .03); }
body.look-noir .btn.discord:hover, body.look-noir .btn.telegram:hover { background: rgba(255, 255, 255, .12); }
body.look-noir .wish-count { background: var(--ac); color: var(--on-ac); }
.look-noir .snd .bars i { background: var(--ac-lt); }

/* ---------- Accueil : grand titre ---------- */
.look-noir .lb-title { font: 600 clamp(30px, 5.6vw, 96px)/.98 var(--font-h); letter-spacing: -.01em; }
.look-noir .lb-title.lg { font-size: clamp(28px, 5vw, 86px); }
.look-noir .lb-title.md { font-size: clamp(26px, 4.2vw, 72px); }
.look-noir .lb-title .l1 { color: #fff; text-shadow: none; }
.look-noir .lb-title .l2 { color: transparent; background: linear-gradient(180deg, #e4e4ea 0%, #62626c 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; }
.look-noir .lb-mascot { filter: drop-shadow(0 0 50px color-mix(in srgb, var(--ac) 40%, transparent)) drop-shadow(0 22px 40px rgba(0, 0, 0, .65)); }
.look-noir .lb-mascot.is-logo { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ac) 60%, transparent); }
/* le personnage garde ses couleurs (halo rose), entouré d'un grand cercle en pointillés */
.look-noir .lb-figure { filter: drop-shadow(0 0 60px color-mix(in srgb, var(--ac) 38%, transparent)) drop-shadow(0 26px 40px rgba(0, 0, 0, .6));
  /* les bords du cadre de l'image se fondent dans le noir (masque en ellipse) ET le bas se fond en douceur : plus de coupure nette « dans le vide » */
  -webkit-mask-image: radial-gradient(ellipse 66% 84% at 50% 40%, #000 62%, transparent 100%), linear-gradient(#000 66%, transparent 96%); -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse 66% 84% at 50% 40%, #000 62%, transparent 100%), linear-gradient(#000 66%, transparent 96%); mask-composite: intersect; }
.look-noir .lb-hero.has-figure::before, .look-noir .lb-hero.has-figure::after {
  content: ''; position: absolute; right: 3%; bottom: 17%; z-index: 2; border-radius: 50%; pointer-events: none; aspect-ratio: 1;
  width: min(40vw, 620px); border: 1.5px dashed color-mix(in srgb, var(--ac-lt) 62%, transparent); animation: nrSpin 80s linear infinite;
}
.look-noir .lb-hero.has-figure::after { width: min(48vw, 740px); right: calc(3% - min(4vw, 60px)); bottom: calc(17% - min(4vw, 60px)); border: 1px solid rgba(255, 255, 255, .16); animation: none; }
@keyframes nrSpin { to { transform: rotate(360deg); } }
.look-noir .lb-video iframe { filter: none; } /* la vidéo de fond garde ses couleurs */
.look-noir .lb-video::after { background: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .2)); }
.look-noir .lb-marker { font: 400 11px var(--font-m); letter-spacing: .2em; text-transform: uppercase; color: #8d8d97; transform: none; margin-bottom: 12px; }
.look-noir .lb-marker::before { content: '/ '; color: var(--ac-lt); }
.look-noir .lb-pitch p { color: #b4b4bd; }
.look-noir .lb-down { font: 400 10px var(--font-m); letter-spacing: .4em; color: #ededf0; }
.look-noir .lb-down b { color: #fff; }
.look-noir .lb-badge { border: 1px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .55); }
.look-noir .lb-badge text { font: 400 9.5px var(--font-m); fill: #d6d6dc; letter-spacing: .1em; }
.look-noir .lb-badge b { font: 600 34px var(--font-h); color: var(--ac-lt); }

/* ---------- Ruban qui défile : une bande blanche, une bande noire ---------- */
.look-noir .tape.t1 { background: var(--ac); color: var(--on-ac); box-shadow: 0 14px 40px -10px rgba(0, 0, 0, .8); }
.look-noir .tape.t2 { background: #000; color: #ededf0; border-block: 1px dashed rgba(255, 255, 255, .35); }
.look-noir .tape b { font: 600 clamp(13px, 1.5vw, 20px) var(--font-h); letter-spacing: .1em; padding: 14px 0; }

/* ---------- Titres de section ---------- */
.look-noir .lb-eyebrow { font: 400 11px var(--font-m); letter-spacing: .3em; color: #8d8d97; }
.look-noir .lb-h2 { font: 600 clamp(26px, 3.8vw, 58px)/1.02 var(--font-h); letter-spacing: -.01em; }
.look-noir .lb-shop .lb-h2 { font-size: clamp(24px, 3.4vw, 52px); }
.look-noir .lb-h2 .o { color: transparent; background: linear-gradient(180deg, #d6d6dc, #5a5a64); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; }
.look-noir .lb-stats { font: 400 12px var(--font-m); color: #8d8d97; }
.look-noir .lb-stats b { font: 700 12px var(--font-m); color: #fff; }

/* ---------- Boutique : recherche, boutons de catégories, sections ---------- */
body.look-noir .lb-search .search { height: 54px; border: 1px solid rgba(255, 255, 255, .2); background: var(--glass); font: 400 13px var(--font-m); color: #fff; }
body.look-noir .lb-search .search:focus { border-color: var(--ac-lt); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ac) 22%, transparent); }
.look-noir .lb-search kbd { font: 400 11px var(--font-m); background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .2); }
body.look-noir .tabs .tab { font: 400 11px var(--font-m); letter-spacing: .1em; border: 1px solid rgba(255, 255, 255, .16); background: var(--glass); color: #cfcfd6; }
body.look-noir .tabs .tab i { font: 400 11px var(--font-m); color: #6f6f79; }
body.look-noir .tabs .tab:hover { border-color: var(--ac-lt); color: #fff; }
body.look-noir .cat-section .cat-head h2, body.look-noir .slider-wrap .cat-head h2 { font: 600 clamp(18px, 2vw, 28px)/1.1 var(--font-h); letter-spacing: -.005em; }
body.look-noir .cat-head h2::before { width: 8px; height: 8px; border-radius: 50%; background: var(--ac); transform: none; margin-right: 14px; vertical-align: .08em; }
body.look-noir .cat-section .see-all { font: 400 11px var(--font-m); letter-spacing: .12em; color: #cfcfd6; }
body.look-noir .cat-section .see-all:hover { color: var(--ac-lt); }
body.look-noir .arrows button:hover { border-color: #fff; color: #fff; }

/* ---------- Cartes produit : panneaux « verre » aux coins marqués ---------- */
body.look-noir .pcard { border-radius: 16px; background: var(--glass); border: 1px solid rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.look-noir .pcard:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--ac-lt) 70%, transparent); box-shadow: 0 20px 50px -26px var(--ac); }
body.look-noir .pcard::before {
  content: ''; position: absolute; inset: 7px; z-index: 5; pointer-events: none; opacity: .55; transition: opacity .25s;
  background:
    linear-gradient(#fff, #fff) top left / 11px 1px no-repeat, linear-gradient(#fff, #fff) top left / 1px 11px no-repeat,
    linear-gradient(#fff, #fff) bottom right / 11px 1px no-repeat, linear-gradient(#fff, #fff) bottom right / 1px 11px no-repeat;
}
body.look-noir .pcard:hover::before { opacity: 1; }
body.look-noir .pc-img { background: radial-gradient(circle at 50% 38%, #1f1f24, #050506 74%); border-bottom: 1px solid rgba(255, 255, 255, .06); }
body.look-noir .chip-type { background: rgba(0, 0, 0, .7); border: 1px solid rgba(255, 255, 255, .3); color: #d6d6dc; font: 400 9.5px var(--font-m); letter-spacing: .12em; }
body.look-noir .chip-3d { background: var(--ac); border: 1px solid var(--ac-lt); color: var(--on-ac); font: 700 9.5px var(--font-m); letter-spacing: .12em; }
body.look-noir .pc-img .badge, body.look-noir .badge.inline { background: #fff; color: #000; font: 700 9.5px var(--font-m); letter-spacing: .1em; }
body.look-noir .pc-img .badge.female, body.look-noir .badge.inline.female { background: #ff5fa8; color: #000; } /* « Female » reste toujours bien visible */
body.look-noir .pc-name h3 { font: 600 13px/1.25 var(--font-b); letter-spacing: 0; text-transform: none; color: #fff; }
body.look-noir .pc-name .price { font: 700 14px var(--font-m); color: var(--ac-lt); letter-spacing: 0; }
body.look-noir .pc-name .price .px { font: 400 10px var(--font-m); color: #7d7d87; }
body.look-noir .heart { border-color: rgba(255, 255, 255, .2); }
body.look-noir .heart:hover, body.look-noir .heart.on { border-color: var(--ac-lt); color: var(--ac-lt); }

/* ---------- Pages catégorie et produit ---------- */
body.look-noir h1 { font: 600 clamp(26px, 4vw, 60px)/1.02 var(--font-h); letter-spacing: -.01em; }
body.look-noir .product h1 { font-size: clamp(22px, 2.8vw, 40px); }
body.look-noir h2 { font-family: var(--font-h); font-weight: 600; letter-spacing: 0; }
body.look-noir .crumb { font: 400 11px var(--font-m); letter-spacing: .08em; text-transform: uppercase; }
body.look-noir .info .big-price, body.look-noir .big-price { font: 700 34px var(--font-m); color: var(--ac-lt); }
body.look-noir .big-price .px { font-size: 12px; }
body.look-noir .viewer { border: 1px solid var(--edge); border-radius: 18px; background: radial-gradient(circle at 50% 40%, #1d1d22, #050506 74%); }
body.look-noir .viewer:not(img)::before {
  background:
    linear-gradient(#fff, #fff) top left / 22px 1px no-repeat, linear-gradient(#fff, #fff) top left / 1px 22px no-repeat,
    linear-gradient(#fff, #fff) top right / 22px 1px no-repeat, linear-gradient(#fff, #fff) top right / 1px 22px no-repeat,
    linear-gradient(#fff, #fff) bottom left / 22px 1px no-repeat, linear-gradient(#fff, #fff) bottom left / 1px 22px no-repeat,
    linear-gradient(#fff, #fff) bottom right / 22px 1px no-repeat, linear-gradient(#fff, #fff) bottom right / 1px 22px no-repeat;
}
body.look-noir .buy-box { border: 1px solid var(--edge); background: var(--glass); border-radius: 18px; }
body.look-noir .buy-box h3 { font: 600 13px var(--font-h); letter-spacing: .06em; }

/* ---------- Comment acheter, questions fréquentes, avis, chiffres ---------- */
body.look-noir .steps li { border: 1px solid var(--edge); background: var(--glass); border-radius: 16px; }
body.look-noir .steps li span { background: var(--ac); color: var(--on-ac); font: 700 14px var(--font-m); border-radius: 8px; }
body.look-noir .faq details { border: 1px solid var(--edge); background: var(--glass); border-radius: 14px; }
body.look-noir .faq summary { font: 600 13px var(--font-h); letter-spacing: .02em; text-transform: none; }
body.look-noir .rcard { background: var(--glass); border: 1px solid var(--edge); border-radius: 16px; }
body.look-noir .rc-who b { font: 600 13px var(--font-h); text-transform: none; letter-spacing: 0; }
body.look-noir .rc-av { background: #f2f2f5; color: #000; }
body.look-noir .stats-grid { border: 1px solid var(--edge); background: var(--glass); border-radius: 18px; }
body.look-noir .stat b { font: 600 clamp(28px, 4vw, 52px)/1 var(--font-h); color: #fff; }
body.look-noir .stat span { font: 400 10px var(--font-m); letter-spacing: .24em; color: #8d8d97; }
body.look-noir .reviews h2 { font: 600 clamp(20px, 2.4vw, 32px)/1.1 var(--font-h); }
body.look-noir .cat-tools .search, body.look-noir .cat-tools select { background: var(--glass); border: 1px solid rgba(255, 255, 255, .2); color: #fff; font: 400 12px var(--font-m); letter-spacing: .06em; }

/* ---------- « Customization » ---------- */
body.look-noir .cust-banner { background: var(--glass); border: 1px solid var(--edge); border-radius: 16px; }
body.look-noir .cust-box { border: 1px solid var(--edge); background: var(--glass); border-radius: 18px; }
body.look-noir .cust-services .cs b, body.look-noir .cust-how li b { font: 600 13px var(--font-h); text-transform: none; letter-spacing: 0; }

/* ---------- Pied de page ---------- */
.look-noir .lb-mega span { font: 700 clamp(36px, 9vw, 150px)/.9 var(--font-h); -webkit-text-stroke: 0; color: rgba(255, 255, 255, .05); }
body.look-noir .foot { background: rgba(0, 0, 0, .75); border-top: 1px solid rgba(255, 255, 255, .08); }
body.look-noir .foot h4 { font: 400 10px var(--font-m); letter-spacing: .3em; color: #8d8d97; }
body.look-noir .foot-grid a { font-size: 14px; }
body.look-noir .foot-grid a:hover { color: var(--ac-lt); }
.look-noir .cur-pick { font-family: var(--font-m); font-size: 11px; }

@media (max-width: 820px) {
  body.look-noir .top nav { margin: 0; width: 100%; border-radius: 18px; justify-content: center; }
  body.look-noir .top nav a, body.look-noir .top nav .nav-dd-btn { padding: 7px 11px; font-size: 10px; }
  .look-noir .lb-hero.has-figure::before, .look-noir .lb-hero.has-figure::after { display: none; }
  .look-noir .lb-title { font-size: clamp(24px, 8vw, 44px); }
}
@media (prefers-reduced-motion: reduce) { .look-noir .lb-hero.has-figure::before { animation: none; } }

/* deux personnages : le cercle en pointillés suit chacun (celui de gauche tourne en sens inverse) */
.look-noir .lb-hero.has-figure2::before { right: 2%; }
.look-noir .lb-hero.has-figure2::after {
  content: ''; position: absolute; left: 2%; right: auto; bottom: 17%; z-index: 2; border-radius: 50%; pointer-events: none; aspect-ratio: 1;
  width: min(34vw, 540px); border: 1.5px dashed color-mix(in srgb, var(--ac-lt) 62%, transparent); animation: nrSpin 90s linear infinite reverse;
}
.look-noir .lb-hero.has-figure2::before { width: min(34vw, 540px); }
@media (max-width: 820px) { .look-noir .lb-hero.has-figure2::after { display: none; } }
.look-noir .lb-hero.has-figure2 .lb-title { font-size: clamp(22px, 3.7vw, 64px); }
.look-noir .lb-hero.has-figure2 .lb-badge b { font-size: 28px; }