/* Aspect « Pro » (Admin → Appearance → Look of the shop) : sobre et professionnel. Même structure que Noir (accueil fermé, boutique à pastilles,
   aperçu rapide), repeinte ici : une seule police (Inter), surfaces sombres calmes, aucun effet de lumière, ruban, bouton de son ni chargement.
   L'accent (--ac) ne sert que pour les boutons, les prix et le filtre actif. Chargée APRÈS lobby.css, noir.css et shop.css. */

body.look-pro {
  --radius: 12px; --glass: #111114; --edge: rgba(255, 255, 255, .09); --line: rgba(255, 255, 255, .09);
  --panel: #111114; --panel2: #16161a; --mute: #9a9aa6; --text: #f1f1f4; --cream: #f1f1f4;
  background: #09090b;
}
html.look-noir-html { background: #09090b; }
/* fond : uniforme, une très légère lueur d'accent en haut seulement (derrière tout le contenu) */
body.look-pro::before { display: none; }
body.look-pro::after { background: radial-gradient(60% 26% at 50% -4%, color-mix(in srgb, var(--ac) 13%, transparent), transparent 72%); }

/* ce qui n'existe pas dans l'aspect Pro */
body.look-pro #lb-loader, body.look-pro .lb-lights, body.look-pro .lb-tapes, body.look-pro .lb-mega, body.look-pro .top .snd, body.look-pro .top .btn.telegram { display: none !important; }

/* ---------- Annonce : bandeau fin et discret ---------- */
body.look-pro .announce { background: #111114; color: #c9c9d2; border-bottom: 1px solid var(--edge); font: 500 12.5px var(--font-b); }
body.look-pro .tk { padding: 8px 30px; }
body.look-pro .tk a { color: var(--ac-lt); }

/* ---------- Barre du haut ---------- */
body.look-pro .top { background: rgba(9, 9, 11, .82); border-bottom: 1px solid var(--edge); }
body.look-pro .brand img { box-shadow: none; }
body.look-pro .brand span { font: 700 15px var(--font-h); letter-spacing: .06em; }
body.look-pro .top nav { margin: 0 auto 0 28px; padding: 0; border: 0; background: none; gap: 2px; }
body.look-pro .top nav a, body.look-pro .top nav .nav-dd-btn { font: 500 14px var(--font-b); letter-spacing: 0; text-transform: none; color: #b4b4bf; border-radius: 8px; padding: 9px 13px; }
body.look-pro .top nav a:hover, body.look-pro .top nav .nav-dd-btn:hover, body.look-pro .nav-dd.open .nav-dd-btn { color: #fff; background: rgba(255, 255, 255, .06); }
body.look-pro .top nav a.nav-cust { color: var(--ac-lt); }
body.look-pro .nav-dd-menu { background: #0e0e11; border: 1px solid var(--edge); border-radius: 12px; box-shadow: 0 24px 60px -20px #000; }
body.look-pro .top nav .nav-dd-menu a { font: 500 13.5px var(--font-b); letter-spacing: 0; text-transform: none; border-radius: 8px; padding: 9px 12px; }
body.look-pro .top nav .nav-dd-menu a b { font: 500 12px var(--font-b); color: #7d7d88; }

/* boutons : rectangles arrondis, texte normal */
body.look-pro .btn { font: 600 13.5px var(--font-b); letter-spacing: 0; text-transform: none; border-radius: 10px; padding: 12px 22px; box-shadow: none; }
body.look-pro .btn.sm { padding: 8px 14px; font-size: 13px; }
body.look-pro .btn.big { padding: 15px 28px; font-size: 15px; }
body.look-pro .btn.primary { background: var(--ac); color: var(--on-ac); box-shadow: none; }
body.look-pro .btn.primary:hover { filter: brightness(1.1); background: var(--ac); }
body.look-pro .btn.ghost, body.look-pro .btn.discord, body.look-pro .btn.telegram { border: 1px solid rgba(255, 255, 255, .16); color: #f1f1f4; background: rgba(255, 255, 255, .03); }
body.look-pro .btn.ghost:hover, body.look-pro .btn.discord:hover, body.look-pro .btn.telegram:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .08); }

/* ---------- Accueil : deux colonnes, texte à gauche, visuel à droite ---------- */
.pr-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(36px, 6vw, 88px) 0 clamp(28px, 4vw, 56px); }
.pr-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 12.5px var(--font-b); letter-spacing: .14em; text-transform: uppercase; color: var(--ac-lt); }
.pr-eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ac); }
.pr-title { margin: 18px 0 0; font: 800 clamp(36px, 4.8vw, 68px)/1.04 var(--font-h); letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.pr-title span { display: block; color: transparent; background: linear-gradient(90deg, #fff 0%, var(--ac-lt) 100%); -webkit-background-clip: text; background-clip: text; }
.pr-sub { margin: 22px 0 0; max-width: 540px; font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.6; color: #a9a9b4; }
.pr-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.pr-cta .btn { padding: 15px 26px; font-size: 15px; }
.pr-cta .btn.telegram { display: none; }
.pr-trust { list-style: none; display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 12px clamp(20px, 3.4vw, 46px); margin: 40px 0 0; padding: 22px 0 0; border-top: 1px solid var(--edge); }
.pr-trust li { display: grid; gap: 2px; }
.pr-trust b { font: 700 clamp(20px, 2vw, 26px)/1.1 var(--font-h); color: #fff; letter-spacing: -.01em; }
.pr-trust span { font-size: 13px; color: #8d8d98; }
.pr-art { position: relative; aspect-ratio: 6 / 5; border-radius: 26px; overflow: hidden; border: 1px solid var(--edge);
  background: radial-gradient(70% 70% at 50% 30%, color-mix(in srgb, var(--ac) 26%, #0d0d10), #0b0b0e 75%); }
.pr-fig { position: absolute; bottom: -22%; height: 124%; width: auto; max-width: none; pointer-events: none; user-select: none; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55)); }
.pr-fig-l { left: -4%; }
.pr-fig-r { right: -4%; }
.pr-fig.only { right: 50%; transform: translateX(50%); }
.pr-logo { position: absolute; left: 50%; top: 50%; width: 44%; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ac) 60%, transparent); }
@media (max-width: 900px) {
  .pr-hero { grid-template-columns: 1fr; padding-top: 28px; }
  .pr-art { aspect-ratio: 4 / 3; order: -1; border-radius: 20px; }
  .pr-trust { grid-template-columns: repeat(2, auto); }
}

/* ---------- Titres de section ---------- */
body.look-pro .lb-eyebrow { font: 600 12px var(--font-b); letter-spacing: .12em; color: var(--ac-lt); }
body.look-pro .lb-h2 { font: 700 clamp(26px, 3vw, 40px)/1.1 var(--font-h); letter-spacing: -.02em; text-wrap: balance; }
body.look-pro .lb-shop .lb-h2 { font-size: clamp(26px, 3vw, 40px); }
body.look-pro .lb-h2 .o { color: #7d7d88; background: none; -webkit-background-clip: border-box; background-clip: border-box; }
body.look-pro .lb-stats { font: 500 14px var(--font-b); color: #8d8d98; }
body.look-pro .lb-stats b { font: 700 14px var(--font-b); color: #fff; }

/* ---------- Boutique : recherche et pastilles ---------- */
body.look-pro .lb-search .search { height: 50px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: #111114; font: 400 15px var(--font-b); color: #fff; padding-left: 20px; }
body.look-pro .lb-search .search:focus { border-color: var(--ac-lt); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac) 22%, transparent); }
body.look-pro .lb-search kbd { font: 500 12px var(--font-b); background: rgba(255, 255, 255, .06); }
body.look-pro .tabs .tab { font: 500 13.5px var(--font-b); letter-spacing: 0; text-transform: none; padding: 9px 15px; border: 1px solid rgba(255, 255, 255, .12); background: #111114; color: #c4c4cd; }
body.look-pro .tabs .tab i { font: 500 12px var(--font-b); color: #7d7d88; }
body.look-pro .tabs .tab:hover { border-color: rgba(255, 255, 255, .35); color: #fff; }
body.look-pro .cat-section .cat-head h2, body.look-pro .slider-wrap .cat-head h2 { font: 700 clamp(19px, 2vw, 26px)/1.1 var(--font-h); letter-spacing: -.015em; }
body.look-pro .cat-section .see-all { font: 500 13.5px var(--font-b); letter-spacing: 0; text-transform: none; color: #b4b4bf; }

/* ---------- Cartes produit ---------- */
body.look-pro .pcard { border-radius: 14px; background: #111114; border: 1px solid var(--edge); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.look-pro .pcard::before, body.look-pro .pcard::after { display: none; }
body.look-pro .pcard:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .26); box-shadow: 0 16px 34px -20px #000; }
body.look-pro .pc-img { background: radial-gradient(circle at 50% 38%, #1a1a1f, #0a0a0c 76%); border-bottom: 1px solid var(--edge); }
body.look-pro .chip-type { background: rgba(9, 9, 11, .72); border: 1px solid rgba(255, 255, 255, .16); color: #e2e2e8; font: 600 10.5px var(--font-b); letter-spacing: .06em; }
body.look-pro .chip-3d { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2); color: #fff; font: 600 10.5px var(--font-b); letter-spacing: .06em; }
body.look-pro .pc-img .badge, body.look-pro .badge.inline { font: 700 10.5px var(--font-b); letter-spacing: .05em; }
body.look-pro .pc-name { padding: 14px 16px; background: transparent; border-top: 0; }
body.look-pro .pc-name h3 { font: 600 14px/1.3 var(--font-b); text-transform: none; letter-spacing: 0; color: #fff; }
body.look-pro .pc-name .price { font: 700 15px var(--font-b); color: var(--ac-lt); }
body.look-pro .pc-name .price .px { font: 400 11px var(--font-b); color: #7d7d88; }

/* ---------- Aperçu rapide ---------- */
body.look-pro .qv-box { background: #0d0d10; border-radius: 20px; border-color: rgba(255, 255, 255, .14); }
body.look-pro .qv-media { background: radial-gradient(circle at 50% 40%, #1b1b20, #08080a 76%); }
body.look-pro .qv-eyebrow { font: 600 12px var(--font-b); letter-spacing: .1em; }
body.look-pro .qv-title { font: 700 clamp(24px, 2.8vw, 38px)/1.1 var(--font-h); text-transform: none; letter-spacing: -.02em; }
body.look-pro .qv-price { font: 700 clamp(22px, 2.4vw, 30px) var(--font-b); }
body.look-pro .qv-pill { font: 600 13px var(--font-b); letter-spacing: 0; text-transform: none; border-radius: 10px; }
body.look-pro .qv-btn { font: 600 15px var(--font-b); letter-spacing: 0; text-transform: none; border-radius: 12px; min-height: 54px; }
body.look-pro .qv-prev, body.look-pro .qv-next { font: 600 13.5px var(--font-b); letter-spacing: 0; text-transform: none; }
body.look-pro .qv-heart { border-radius: 10px; }

/* ---------- Pages catégorie et produit ---------- */
body.look-pro h1 { font: 700 clamp(28px, 3.6vw, 48px)/1.08 var(--font-h); letter-spacing: -.025em; }
body.look-pro .product h1 { font-size: clamp(24px, 2.6vw, 36px); }
body.look-pro h2 { font-family: var(--font-h); font-weight: 700; letter-spacing: -.015em; }
body.look-pro .crumb { font: 500 12.5px var(--font-b); letter-spacing: 0; text-transform: none; }
body.look-pro .big-price, body.look-pro .info .big-price { font: 800 clamp(28px, 3vw, 36px) var(--font-b); color: var(--ac-lt); }
body.look-pro .viewer { border-radius: 16px; background: radial-gradient(circle at 50% 40%, #1a1a1f, #08080a 76%); }
body.look-pro .viewer:not(img)::before { display: none; }
body.look-pro .buy-box { background: #111114; border-radius: 16px; }
body.look-pro .buy-box h3 { font: 700 15px var(--font-h); letter-spacing: 0; }
body.look-pro .cat-tools .search, body.look-pro .cat-tools select { background: #111114; border-radius: 10px; font: 400 14px var(--font-b); letter-spacing: 0; }

/* ---------- Comment acheter, questions, avis, chiffres ---------- */
body.look-pro .steps li, body.look-pro .faq details, body.look-pro .rcard, body.look-pro .stats-grid, body.look-pro .cust-banner, body.look-pro .cust-box { background: #111114; border-radius: 14px; }
body.look-pro .faq summary { font: 600 15px var(--font-h); }
body.look-pro .rc-who b { font: 600 14px var(--font-h); }
body.look-pro .stat b { font: 700 clamp(26px, 3.4vw, 42px)/1 var(--font-h); }
body.look-pro .stat span { font: 500 12px var(--font-b); letter-spacing: .08em; text-transform: uppercase; }
body.look-pro .reviews h2 { font: 700 clamp(22px, 2.4vw, 32px)/1.1 var(--font-h); }
body.look-pro .steps li span { font: 700 14px var(--font-b); border-radius: 8px; }

/* ---------- Pied de page ---------- */
body.look-pro .foot { background: #09090b; border-top: 1px solid var(--edge); }
body.look-pro .foot h4 { font: 600 12px var(--font-b); letter-spacing: .12em; color: #8d8d98; }
body.look-pro .cur-pick { font-family: var(--font-b); }

/* titre de l'accueil : phrases normales (pas de capitales) ; les deux personnages se partagent mieux le cadre */
.pr-title { text-transform: none; }
.pr-fig { height: 118%; bottom: -17%; }
.pr-fig-l { left: -1%; }
.pr-fig-r { right: -9%; }

/* grille homogène : une carte « large » (photo 16:9, voitures, scripts) occupe deux colonnes ; sa hauteur est alors proche de celle d'une carte verticale,
   et les rangées restent régulières même quand les deux types se mélangent (« Everything ») */
body.look-pro .grid { grid-auto-flow: dense; }
body.look-pro .grid .pcard.wide, body.look-pro .grid .pcard.car { grid-column: span 2; }
body.look-pro .lb-shop #grid { align-items: stretch; }
@media (max-width: 380px) { body.look-pro .grid .pcard.wide, body.look-pro .grid .pcard.car { grid-column: auto; } }
body.look-pro h1, body.look-pro .lb-h2 { text-transform: none; }

/* téléphone : en-tête plus compact (le bouton Discord reste dans l'accueil et le pied de page) */
@media (max-width: 640px) {
  body.look-pro .top .top-cta .btn.discord:not(.acct) { display: none; }
  body.look-pro .top .top-cta .btn.sm { padding: 7px 11px; font-size: 12.5px; }
  body.look-pro .top nav { margin: 0; }
}

/* cadre « Need a fix for your map? » : au-dessus du titre de l'accueil, petit et aligné à gauche */
.pr-copy .map-banner { margin: 0 0 24px; max-width: 540px; }