:root{ --bg:#b8c5d8; --surface:#f6f9fc; --surface-raised:#e1e9f1; --img-bg:#d4dfec; --border:#96a7bf; --border-strong:#5f7290; --bone:#12161d; --bone-dim:#3d4756; --stamp:#8a2e20; --stamp-bright:#b03d29; --on-accent:#ffffff; --gold:#63481c; --on-dark:#f2ede2; --on-dark-dim:#9aa8b8; --dp-red:#d81324; --dp-red-dark:#8f0d1a; --dp-black:#141414; --dl-gold:#c9a24a; --dl-olive:#8fa24e; --dl-flame:#d4622a; --mg-cyan:#3ec6ff; --mg-cyan-dark:#1f7d9e; --ap-silver:#e8ebee; --ap-steel:#7d8791; --m4-white:#f2f6fa; --m4-flash:#8fd3ff; } *{box-sizing:border-box;margin:0;padding:0;} body{background:var(--bg);color:var(--bone);font-family:'Inter',sans-serif;line-height:1.5;padding-bottom:60px;} h1,h2,h3{font-family:'Rajdhani',sans-serif;font-weight:700;letter-spacing:.03em;text-transform:uppercase;} .hero-title{font-family:'Bebas Neue',sans-serif;letter-spacing:.05em;} .mono{font-family:'IBM Plex Mono',monospace;} .wrap{max-width:1080px;margin:0 auto;padding:0 24px;} header{position:sticky;top:0;z-index:20;background:rgba(18,22,29,.94);border-bottom:1px solid var(--gold);backdrop-filter:blur(4px);transition:transform .3s ease;} header.header-hidden{transform:translateY(-100%);} .header-inner{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 18px;width:100%;} .brand{display:flex;align-items:center;gap:14px;cursor:pointer;min-width:0;} .brand-mark{width:128px;height:128px;flex-shrink:0;object-fit:contain;border-radius:4px;} .site-banner{display:block;width:100%;height:auto;max-height:220px;object-fit:cover;border-bottom:1px solid var(--border);} .brand-text{min-width:0;} .brand-text .l1,.brand-text .l2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} @media(max-width:640px){.brand-mark{width:76px;height:76px;} .site-banner{max-height:120px;} .header-inner{padding:6px 12px;}} .brand-text .l1{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:.08em;line-height:1;color:var(--on-dark);} .brand-text .l2{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.15em;color:var(--on-dark-dim);} #cart-pill{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);color:var(--on-dark);padding:8px 14px;border-radius:2px;font-family:'IBM Plex Mono',monospace;font-size:13px;cursor:pointer;transition:.15s;flex-shrink:0;} @media(max-width:480px){ .brand-mark{width:44px;height:44px;} .brand-text .l2{display:none;} .brand-text .l1{font-size:16px;} .header-inner{padding:6px 10px;gap:8px;} #cart-pill{padding:6px 10px;gap:6px;} .cart-label{display:none;} } #cart-pill:hover{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);} .cart-label{color:var(--on-dark-dim);} .cart-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--stamp);color:var(--on-accent);font-size:11px;font-weight:600;} .cart-total{padding-left:8px;border-left:1px solid rgba(255,255,255,.18);font-weight:600;} .hero{padding:56px 0 34px;border-bottom:1px solid var(--border);background:repeating-linear-gradient(115deg, rgba(18,22,29,.035) 0 2px, transparent 2px 40px);transition:border-color .3s ease;} .hero-title{font-size:50px;line-height:.95;max-width:680px;transition:color .3s ease;} .hero-title span{color:var(--stamp-bright);} .hero-sub{color:var(--bone-dim);max-width:520px;margin-top:14px;font-size:15px;transition:color .3s ease;} /* Fond "salle d'armes" : appliqué au sur les pages qui présentent un produit précis (fiche réplique, fiche accessoire, configurateur) — le catalogue garde le fond clair d'origine. */ body.bg-product{ background: radial-gradient(ellipse 70% 45% at 50% 0%, rgba(99,72,28,.28) 0%, transparent 60%), repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 42px), linear-gradient(180deg, #20242b 0%, #14171c 55%, #0d0f12 100%); background-attachment:fixed; } body.bg-product .hero{border-bottom-color:rgba(255,255,255,.12);} body.bg-product .hero-title{color:var(--on-dark);} body.bg-product .hero-sub{color:var(--on-dark-dim);} /* Carrousel de bandeaux "exclusivité" — un .feature-slide par bandeau, tous côte à côte dans .feature-track (largeur 100% chacun), le défilement se fait en translatant le track (voir updateFeatureCarousel dans app.js) : un seul bandeau visible à la fois, glisse vers la gauche au changement. Bascule automatique toutes les 10s (FEATURE_CAROUSEL_INTERVAL), en pause au survol. align-items:flex-start empêche les slides de s'étirer à la hauteur du plus grand voisin — chaque bandeau garde sa hauteur naturelle (fixe pour "composed", dictée par son aspect-ratio pour "image"), et .feature-carousel est réhaussé en JS à la hauteur du bandeau actif à chaque changement de slide (transition ci-dessous pour un redimensionnement fluide). */ .feature-carousel{position:relative;margin:28px 0;overflow:hidden;border-radius:26px; border:2px solid var(--dp-black);box-shadow:0 10px 30px -12px rgba(12,12,12,.55); transition:height .4s ease;} .feature-track{display:flex;align-items:flex-start;transition:transform .7s cubic-bezier(.65,.05,.36,1);} .feature-slide{flex:0 0 100%;min-width:0;} .feature-slide .feature-banner:not(.feature-banner-image){margin:0;border:0;border-radius:0;box-shadow:none;height:280px;} .feature-banner{ position:relative;display:flex;gap:0;overflow:hidden; background: repeating-linear-gradient(135deg, rgba(0,0,0,0) 0 26px, rgba(0,0,0,.85) 26px 34px, rgba(0,0,0,0) 34px 60px), linear-gradient(135deg, var(--dp-red) 0%, var(--dp-red-dark) 55%, var(--dp-black) 130%); } .feature-banner-photo{width:320px;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:22px;} .feature-banner-photo img{max-width:100%;max-height:230px;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.5));} .feature-banner-body{padding:30px 32px 30px 8px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px;} .feature-eyebrow{ position:absolute;top:18px;left:18px;z-index:1; font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600; background:var(--dp-black);color:#fff;padding:7px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.25); } .feature-name{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:26px;letter-spacing:.02em; background:var(--dp-red);color:#fff;padding:8px 18px;border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,.35);} .feature-desc{font-size:14px;max-width:440px;background:var(--dp-black);color:#fff;padding:12px 16px;border-radius:8px;} .feature-btn{margin-top:6px;align-self:flex-start;padding:12px 28px;border-radius:6px;} @media(max-width:640px){.feature-slide .feature-banner{flex-direction:column;height:auto;} .feature-banner-photo{width:100%;} .feature-banner-body{padding:8px 24px 26px;}} /* Bandeaux "image" (visuel déjà designé, texte intégré à l'image) : seul le bouton est superposé. */ .feature-banner-image{background-size:cover;background-position:center;background-color:var(--dp-black); display:flex;align-items:flex-end;justify-content:flex-start;padding:26px 30px;} .feature-dots{position:absolute;bottom:16px;right:22px;display:flex;gap:8px;z-index:2;} .feature-dot{width:9px;height:9px;border-radius:50%;border:1px solid rgba(255,255,255,.6); background:rgba(255,255,255,.25);padding:0;cursor:pointer;transition:.15s;} .feature-dot:hover{background:rgba(255,255,255,.55);} .feature-dot.active{background:#fff;} /* Flèches gauche/droite du carrousel — superposées de part et d'autre, centrées verticalement, pour naviguer entre les bandeaux sans viser les petits points en bas à droite. */ .feature-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2; width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.35); background:rgba(12,12,12,.45);color:#fff;font-size:15px;line-height:1; display:flex;align-items:center;justify-content:center;cursor:pointer; transition:background .15s,border-color .15s;} .feature-arrow:hover{background:rgba(12,12,12,.75);border-color:rgba(255,255,255,.7);} .feature-arrow-prev{left:14px;} .feature-arrow-next{right:14px;} @media(max-width:640px){.feature-arrow{width:32px;height:32px;font-size:13px;} .feature-arrow-prev{left:8px;} .feature-arrow-next{right:8px;}} /* Couleurs de bouton par bandeau, assorties à sa DA (même logique que .theme-* sur body.bg-product ci-dessous, pour la fiche produit ouverte depuis ce bandeau). */ .feature-btn.theme-deadpool{background:var(--dp-red);border-color:var(--dp-red);color:#fff;} .feature-btn.theme-deadpool:hover{background:var(--dp-red-dark);border-color:#fff;} .feature-btn.theme-dragonlore{background:#8fa24e;border-color:#8fa24e;color:#141a0e;} .feature-btn.theme-dragonlore:hover{background:#c9a24a;border-color:#c9a24a;} .feature-btn.theme-alpin{background:#e8ebee;border-color:#e8ebee;color:#15181c;} .feature-btn.theme-alpin:hover{background:#ffffff;border-color:#ffffff;} .feature-btn.theme-minigun{background:#3ec6ff;border-color:#3ec6ff;color:#0a1418;} .feature-btn.theme-minigun:hover{background:#7fd8ff;border-color:#7fd8ff;} .feature-btn.theme-m4lmb{background:#f2f6fa;border-color:#f2f6fa;color:#0b0d10;} .feature-btn.theme-m4lmb:hover{background:#ffffff;border-color:#8fd3ff;} /* Fond spécial "salle d'armes" thématisé sur la fiche produit, quand elle correspond à un bandeau exclusivité (voir applyProductTheme dans app.js) — remplace le fond neutre body.bg-product par défaut (grosses "cases" diagonales dans la palette du bandeau, plutôt qu'un simple dégradé). */ /* DA Deadpool complète : au-delà du fond de la fiche produit, les variables de couleur du site (--surface, --bone, --stamp, --gold, etc.) sont réécrites dans ce scope, ce qui bascule aussi automatiquement tous les encarts normalement clairs (aperçu, fiche technique, personnalisation, bouton retour, encart de notice) dans la palette noir/rouge du bandeau Deadpool — au lieu de rester des "cases blanches" hors thème au milieu d'un fond sombre. */ body.bg-product.theme-deadpool{ background: repeating-linear-gradient(45deg, rgba(216,19,36,.18) 0 90px, rgba(20,20,20,.22) 90px 180px, rgba(255,255,255,.06) 180px 270px, rgba(20,20,20,.22) 270px 360px), linear-gradient(180deg, #1c1010 0%, #120b0b 55%, #0d0808 100%); background-attachment:fixed; --surface:#1d1011; --surface-raised:#2c1518; --img-bg:#170d0e; --border:#4a1418; --border-strong:var(--dp-red-dark); --bone:var(--on-dark); --bone-dim:#b98d90; --gold:var(--dp-red); --stamp:var(--dp-red-dark); --stamp-bright:var(--dp-red); } /* Léger grain diagonal (même langage visuel que .feature-banner) sur les panneaux principaux, et accent rouge sur les tuiles de la fiche technique — pour que ces encarts se sentent dessinés pour ce produit plutôt que simplement recolorés. */ body.bg-product.theme-deadpool .preview-panel, body.bg-product.theme-deadpool .spec-block, body.bg-product.theme-deadpool .customize-block{ background: repeating-linear-gradient(135deg, rgba(0,0,0,0) 0 22px, rgba(0,0,0,.35) 22px 26px, rgba(0,0,0,0) 26px 48px), var(--surface); } body.bg-product.theme-deadpool .preview-panel-lg{border-color:var(--dp-red-dark);box-shadow:0 14px 34px -16px rgba(216,19,36,.4);} body.bg-product.theme-deadpool .spec-tile{border-left:3px solid var(--dp-red-dark);} body.bg-product.theme-deadpool .spec-tile-price{border-color:var(--dp-red);} body.bg-product.theme-deadpool .delay-box{background:var(--surface-raised);} /* DA Dragon Lore complète : même principe que le scope Deadpool ci-dessus — les variables de couleur sont réécrites ici pour que les encarts (aperçu, fiche technique, personnalisation, bouton retour) basculent dans la palette olive/or du bandeau, au lieu de rester clairs. */ body.bg-product.theme-dragonlore{ background: repeating-linear-gradient(45deg, rgba(143,162,78,.18) 0 90px, rgba(14,18,11,.24) 90px 180px, rgba(201,162,74,.14) 180px 270px, rgba(14,18,11,.24) 270px 360px), linear-gradient(180deg, #171a13 0%, #10130e 55%, #0b0d09 100%); background-attachment:fixed; --surface:#171a10; --surface-raised:#232916; --img-bg:#12140c; --border:#3c4326; --border-strong:var(--dl-olive); --bone:var(--on-dark); --bone-dim:#b3ad8c; --gold:var(--dl-gold); --stamp:#5c6633; --stamp-bright:var(--dl-olive); } body.bg-product.theme-dragonlore .preview-panel, body.bg-product.theme-dragonlore .spec-block, body.bg-product.theme-dragonlore .customize-block{ background: repeating-linear-gradient(135deg, rgba(0,0,0,0) 0 22px, rgba(0,0,0,.32) 22px 26px, rgba(0,0,0,0) 26px 48px), var(--surface); } body.bg-product.theme-dragonlore .preview-panel-lg{border-color:var(--dl-olive);box-shadow:0 14px 34px -16px rgba(201,162,74,.35);} body.bg-product.theme-dragonlore .spec-tile{border-left:3px solid var(--dl-flame);} body.bg-product.theme-dragonlore .spec-tile-price{border-color:var(--dl-gold);} body.bg-product.theme-dragonlore .delay-box{background:var(--surface-raised);} /* Emblème dragon décoratif (fond de la fiche produit dragon lore) — visuel détouré (pic/dragon- lore-emblem.png) dans le même camaïeu or/flamme que le motif peint sur la crosse de la réplique (voir le bandeau dragon lore) ; filigrane discret en position fixe, jamais interactif, masqué sur toutes les autres pages/thèmes. */ .dragon-watermark{position:fixed;bottom:-40px;right:-30px;width:min(30vw,340px);height:auto; opacity:0;pointer-events:none;z-index:-1;transition:opacity .4s ease; filter:drop-shadow(0 0 40px rgba(0,0,0,.4));} body.bg-product.theme-dragonlore .dragon-watermark{opacity:.28;} @media(max-width:640px){.dragon-watermark{width:min(55vw,240px);bottom:-25px;right:-20px;}} /* DA Chasseur Alpin complète : palette noir/blanc-argent en écho au camouflage neige monochrome du bandeau — même principe de variables réécrites que Deadpool/Dragon Lore ci-dessus, avec une texture de panneau différente (bandes plus étroites et plus contrastées, angle plus prononcé) pour que les trois DA ne se ressemblent pas entre elles. */ body.bg-product.theme-alpin{ background: repeating-linear-gradient(45deg, rgba(232,235,238,.12) 0 90px, rgba(18,20,23,.24) 90px 180px, rgba(138,149,163,.16) 180px 270px, rgba(18,20,23,.24) 270px 360px), linear-gradient(180deg, #1b1e22 0%, #14171a 55%, #0e1013 100%); background-attachment:fixed; --surface:#17191c; --surface-raised:#232629; --img-bg:#101214; --border:#3a3f45; --border-strong:var(--ap-steel); --bone:var(--on-dark); --bone-dim:#9aa3ab; --gold:var(--ap-silver); --stamp:#4d525a; --stamp-bright:var(--ap-silver); } body.bg-product.theme-alpin .preview-panel, body.bg-product.theme-alpin .spec-block, body.bg-product.theme-alpin .customize-block{ background: repeating-linear-gradient(64deg, rgba(255,255,255,0) 0 14px, rgba(255,255,255,.05) 14px 17px, rgba(255,255,255,0) 17px 34px), repeating-linear-gradient(64deg, rgba(0,0,0,0) 0 34px, rgba(0,0,0,.4) 34px 40px, rgba(0,0,0,0) 40px 68px), var(--surface); } body.bg-product.theme-alpin .preview-panel-lg{border-color:var(--ap-steel);box-shadow:0 14px 34px -16px rgba(232,235,238,.3);} body.bg-product.theme-alpin .spec-tile{border-left:3px solid var(--ap-silver);} body.bg-product.theme-alpin .spec-tile-price{border-color:var(--ap-silver);} body.bg-product.theme-alpin .delay-box{background:var(--surface-raised);} /* DA Minigun complète : palette noir/bleu électrique évoquant l'énergie/le HUD du bandeau — motif de grille fine (au lieu des bandes diagonales des autres DA) pour un rendu "tech" distinct. */ body.bg-product.theme-minigun{ background: repeating-linear-gradient(45deg, rgba(62,198,255,.16) 0 90px, rgba(16,18,20,.24) 90px 180px, rgba(139,143,146,.14) 180px 270px, rgba(16,18,20,.24) 270px 360px), linear-gradient(180deg, #14181b 0%, #101215 55%, #0a0c0e 100%); background-attachment:fixed; --surface:#0e1519; --surface-raised:#182228; --img-bg:#0a1013; --border:#22343d; --border-strong:var(--mg-cyan); --bone:var(--on-dark); --bone-dim:#8aa5b0; --gold:var(--mg-cyan); --stamp:var(--mg-cyan-dark); --stamp-bright:var(--mg-cyan); } body.bg-product.theme-minigun .preview-panel, body.bg-product.theme-minigun .spec-block, body.bg-product.theme-minigun .customize-block{ background: repeating-linear-gradient(90deg, rgba(62,198,255,.07) 0 1px, rgba(62,198,255,0) 1px 26px), repeating-linear-gradient(0deg, rgba(62,198,255,.07) 0 1px, rgba(62,198,255,0) 1px 26px), var(--surface); } body.bg-product.theme-minigun .preview-panel-lg{border-color:var(--mg-cyan-dark);box-shadow:0 14px 34px -16px rgba(62,198,255,.4);} body.bg-product.theme-minigun .spec-tile{border-left:3px solid var(--mg-cyan);} body.bg-product.theme-minigun .spec-tile-price{border-color:var(--mg-cyan);} body.bg-product.theme-minigun .delay-box{background:var(--surface-raised);} /* DA M4 Custom LMB complète : noir profond haute contraste, éclairs blancs en écho au camouflage "foudre" peint sur la crosse/le garde-main du bandeau — motif de losanges croisés (2 diagonales opposées) sur les panneaux, différent des 4 autres textures de DA déjà utilisées sur le site. */ body.bg-product.theme-m4lmb{ background: repeating-linear-gradient(45deg, rgba(242,246,250,.1) 0 90px, rgba(10,11,13,.26) 90px 180px, rgba(143,211,255,.08) 180px 270px, rgba(10,11,13,.26) 270px 360px), linear-gradient(180deg, #0e0f11 0%, #0a0b0c 55%, #060707 100%); background-attachment:fixed; --surface:#0c0d0f; --surface-raised:#17191c; --img-bg:#08090a; --border:#2c2f33; --border-strong:var(--m4-white); --bone:var(--on-dark); --bone-dim:#9aa0a6; --gold:var(--m4-white); --stamp:#3a3e43; --stamp-bright:var(--m4-white); } body.bg-product.theme-m4lmb .preview-panel, body.bg-product.theme-m4lmb .spec-block, body.bg-product.theme-m4lmb .customize-block{ background: repeating-linear-gradient(45deg, rgba(242,246,250,0) 0 30px, rgba(242,246,250,.06) 30px 32px, rgba(242,246,250,0) 32px 60px), repeating-linear-gradient(-45deg, rgba(242,246,250,0) 0 30px, rgba(242,246,250,.06) 30px 32px, rgba(242,246,250,0) 32px 60px), var(--surface); } body.bg-product.theme-m4lmb .preview-panel-lg{border-color:var(--m4-white);box-shadow:0 14px 34px -16px rgba(242,246,250,.3);} body.bg-product.theme-m4lmb .spec-tile{border-left:3px solid var(--m4-flash);} body.bg-product.theme-m4lmb .spec-tile-price{border-color:var(--m4-white);} body.bg-product.theme-m4lmb .delay-box{background:var(--surface-raised);} .wrap-wide{max-width:1280px;} .catalog-layout{display:flex;align-items:flex-start;gap:32px;} .catalog-main{flex:1;min-width:0;} .tab-bar{display:flex;flex-direction:column;gap:8px;width:200px;flex-shrink:0;padding:20px 0;position:sticky;top:96px;} .tab-btn{font-family:'Rajdhani',sans-serif;font-weight:700;letter-spacing:.03em;text-transform:uppercase;background:transparent;border:1.5px solid var(--border);color:var(--bone-dim);padding:12px 18px;font-size:15px;cursor:pointer;transition:.15s;text-align:left;width:100%;} .tab-btn:hover{color:var(--bone);border-color:var(--border-strong);} .tab-btn.active{background:var(--stamp);border-color:var(--stamp);color:var(--on-accent);} @media(max-width:900px){ .catalog-layout{flex-direction:column;} .tab-bar{flex-direction:row;flex-wrap:wrap;width:100%;position:static;padding:16px 0;border-bottom:1px solid var(--border);margin-bottom:8px;} .tab-btn{width:auto;flex:0 0 auto;} } .section-label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;color:var(--gold);text-transform:uppercase;margin-bottom:10px;} #catalog-view{padding:0 0 50px;} .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;} .catalog-grid{grid-template-columns:repeat(2,1fr);gap:24px;} @media(max-width:640px){.catalog-grid{grid-template-columns:1fr;}} .card{background:var(--surface);border:1px solid var(--border);display:flex;flex-direction:column;transition:.15s;position:relative;} .card:hover{border-color:var(--border-strong);} .card::before,.card::after{content:"";position:absolute;width:12px;height:12px;opacity:0;transition:opacity .2s;pointer-events:none;} .card::before{top:-1px;left:-1px;border-top:1.5px solid var(--bone);border-left:1.5px solid var(--bone);} .card::after{bottom:-1px;right:-1px;border-bottom:1.5px solid var(--bone);border-right:1.5px solid var(--bone);} .card:hover::before,.card:hover::after{opacity:1;} .card-tag{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--border);font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;color:var(--bone-dim);} .card-icon{height:110px;display:flex;align-items:center;justify-content:center;background:var(--img-bg);} .card-photo{max-width:100%;max-height:100%;object-fit:contain;} .card-photo.extra-camo-tint{filter:sepia(1) hue-rotate(150deg) saturate(2.4) brightness(.88) contrast(1.1);} .card-body{padding:14px;flex:1;display:flex;flex-direction:column;gap:6px;} .card-name{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:16.5px;letter-spacing:.02em;} .card-desc{font-size:12px;color:var(--bone-dim);flex:1;} .card-price{font-family:'IBM Plex Mono',monospace;font-size:15px;color:var(--gold);} .catalog-grid .card-icon{height:210px;} .catalog-grid .card-tag{padding:10px 16px;font-size:11px;} .catalog-grid .card-body{padding:20px;gap:8px;} .catalog-grid .card-name{font-size:19px;} .catalog-grid .card-desc{font-size:13px;} .catalog-grid .card-price{font-size:17px;} .catalog-grid .btn{padding:12px 16px;font-size:14px;} .btn{font-family:'Rajdhani',sans-serif;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:transparent;border:1px solid var(--border-strong);color:var(--bone);padding:10px 16px;cursor:pointer;font-size:13px;transition:.15s;} .btn:hover{background:var(--surface-raised);border-color:var(--bone);box-shadow:0 0 0 1px var(--bone);} .btn-primary{background:var(--stamp);border-color:var(--stamp);color:var(--on-accent);} .btn-primary:hover{background:var(--stamp-bright);border-color:var(--bone);} .btn-block{width:100%;} .btn-sm{padding:6px 10px;font-size:11.5px;} .ammo-strip{padding:6px 0 44px;} .ammo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;} .ammo-card{display:flex;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--border);padding:12px;transition:.15s;} .ammo-card:hover{border-color:var(--border-strong);box-shadow:0 0 0 1px var(--border-strong);} .ammo-icon{width:46px;height:46px;flex-shrink:0;background:var(--img-bg);display:flex;align-items:center;justify-content:center;} .ammo-info{flex:1;min-width:0;} .ammo-name{font-family:'Rajdhani',sans-serif;font-weight:600;font-size:13.5px;} .ammo-price{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--bone-dim);} #detail-view,#item-view,#cart-view{display:none;padding:36px 0 60px;} .card-btn-row{display:flex;gap:8px;} .card-btn-row .btn{flex:1;padding:10px 8px;} .back-link{background:var(--surface);border:1px solid var(--border-strong);color:var(--bone);font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:15px;padding:11px 20px;cursor:pointer;margin-bottom:28px;letter-spacing:.05em;transition:.15s;} .back-link:hover{background:var(--surface-raised);border-color:var(--bone);box-shadow:0 0 0 1px var(--bone);} .detail-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;} @media(max-width:820px){.detail-grid{grid-template-columns:1fr;}} .detail-grid-lg{gap:44px;} .preview-panel{background:var(--surface);border:1px solid var(--border);} .preview-panel-lg{border:2px solid var(--dp-black);box-shadow:0 14px 34px -16px rgba(12,12,12,.6);} .preview-canvas{height:260px;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(0deg, transparent 0 24px, rgba(0,0,0,.05) 24px 25px) var(--img-bg);border-bottom:1px solid var(--border);position:relative;overflow:hidden;transition:height .25s ease;} .preview-canvas.is-3d{ height:480px; background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(240,245,255,.22) 0%, rgba(240,245,255,.07) 35%, transparent 65%), linear-gradient(180deg, #2c2c29 0%, #1c1c1a 55%, #131311 100%); } .preview-panel-lg .preview-canvas.is-3d{height:600px;} .preview-panel-lg .preview-label{padding:14px 18px;font-size:12px;} @media(max-width:820px){.preview-panel-lg .preview-canvas.is-3d{height:420px;}} .rifle-canvas{width:auto;height:82%;aspect-ratio:700/460;max-width:92%;} .rifle-3d{width:100%;height:100%;overscroll-behavior:contain;} .rifle-3d canvas{width:100%;height:100%;display:block;touch-action:none;} .preview-label{padding:12px 16px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;color:var(--bone-dim);} .preview-label b{color:var(--bone);font-weight:500;} .spec-block{margin-top:20px;background:var(--surface);border:1px solid var(--border);padding:20px;} .spec-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;} .spec-row span:first-child{color:var(--bone-dim);} .spec-row span:last-child{font-family:'IBM Plex Mono',monospace;text-align:right;} .spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;} .spec-tile{background:var(--surface);border:1px solid var(--border);padding:13px 15px;display:flex;flex-direction:column;gap:5px;transition:.15s;} .spec-tile:hover{border-color:var(--border-strong);} .spec-label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-dim);} .spec-value{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:16px;color:var(--bone);letter-spacing:.02em;} .spec-value.mono{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:13.5px;letter-spacing:0;} .spec-tile-price{grid-column:1/-1;background:var(--surface-raised);border-color:var(--gold);} .spec-tile-price .spec-value{color:var(--gold);font-size:20px;} .customize-block{background:var(--surface);border:1px solid var(--border);padding:24px;} .customize-block h3{font-size:19px;margin-bottom:4px;} .customize-sub{font-size:13px;color:var(--bone-dim);margin-bottom:16px;} .camo-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px;} .camo-opt{border:1px solid var(--border);background:var(--surface);padding:10px;cursor:pointer;text-align:left;transition:.15s;position:relative;} .camo-opt:hover{border-color:var(--border-strong);} .camo-opt.active{border-color:var(--stamp-bright);box-shadow:0 0 0 1px var(--stamp-bright);} .camo-opt.active::after{content:"✓ SÉLECTIONNÉ";position:absolute;top:6px;right:8px;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.05em;color:var(--stamp-bright);} .swatch{width:100%;height:34px;margin-bottom:8px;border:1px solid rgba(0,0,0,.3);overflow:hidden;display:block;} .swatch svg{display:block;width:100%;height:100%;} .camo-name{font-family:'Rajdhani',sans-serif;font-weight:600;font-size:13px;color:var(--bone);} .camo-extra{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--bone-dim);margin-top:2px;} .camo-grid-lg{gap:16px;} .camo-grid-lg .camo-opt{padding:18px;} .camo-grid-lg .camo-opt.active::after{font-size:10px;top:10px;right:12px;} .camo-grid-lg .swatch{height:64px;margin-bottom:14px;} .camo-grid-lg .camo-name{font-size:15.5px;} .camo-grid-lg .camo-extra{font-size:12.5px;margin-top:4px;} .delay-box{display:flex;justify-content:space-between;align-items:center;background:var(--surface-raised);border:1px solid var(--border);padding:12px 14px;margin-bottom:16px;} .delay-box span:first-child{font-size:12.5px;color:var(--bone-dim);} .delay-box span:last-child{font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--gold);} .total-box{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;} .total-box .label{font-size:13px;color:var(--bone-dim);} .total-box .amount{font-family:'Bebas Neue',sans-serif;font-size:30px;letter-spacing:.03em;} .action-row{display:flex;gap:10px;} .action-row .btn{flex:1;} .cart-line{display:flex;align-items:center;gap:14px;padding:14px;background:var(--surface);border:1px solid var(--border);margin-bottom:10px;} .cart-line-photo{width:56px;height:56px;flex-shrink:0;object-fit:contain;background:var(--img-bg);border:1px solid var(--border);} .cart-line-icon{display:flex;align-items:center;justify-content:center;} .cart-line-info{flex:1;min-width:0;} .cart-line-name{font-family:'Rajdhani',sans-serif;font-weight:600;font-size:14.5px;} .cart-line-meta{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--bone-dim);margin-top:2px;} .cart-line-price{font-family:'IBM Plex Mono',monospace;font-size:14px;white-space:nowrap;} .remove-btn{background:none;border:1px solid var(--border);color:var(--bone-dim);width:28px;height:28px;cursor:pointer;font-size:14px;line-height:1;transition:.15s;flex-shrink:0;} .remove-btn:hover{border-color:var(--stamp-bright);color:var(--stamp-bright);} .cart-empty{color:var(--bone-dim);font-size:14px;padding:30px 0;text-align:center;} .cart-addons{margin-top:30px;padding-top:24px;border-top:1px solid var(--border);} footer{border-top:1px solid var(--border);padding:28px 0;margin-top:20px;transition:border-color .3s ease;} .notice{display:flex;gap:12px;background:var(--surface);border:1px solid var(--border);padding:16px;} .notice p{font-size:12px;color:var(--bone-dim);line-height:1.7;} .notice b{color:var(--bone);} .footer-credit{font-size:10px;color:var(--bone-dim);margin-top:10px;} body.bg-product footer{border-top-color:rgba(255,255,255,.12);} body.bg-product .footer-credit{color:var(--on-dark-dim);} #toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--stamp);color:var(--on-accent);padding:12px 20px;font-family:'Rajdhani',sans-serif;font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:13px;opacity:0;pointer-events:none;transition:.25s;z-index:50;box-shadow:0 0 0 1px var(--on-accent);} #toast.show{opacity:1;transform:translateX(-50%) translateY(0);} .checkout-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;} .checkout-form label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--bone-dim);} .checkout-form input,.checkout-form textarea{background:var(--surface);border:1px solid var(--border-strong);color:var(--bone);padding:10px;font-size:14px;font-family:inherit;} .checkout-form.was-validated input:invalid,.checkout-form.was-validated textarea:invalid{border-color:var(--stamp-bright);} .checkout-form textarea{resize:vertical;min-height:70px;} .checkout-form .full{grid-column:1/-1;} .checkout-form .total-box{margin:6px 0 0;} @media(max-width:640px){.checkout-form{grid-template-columns:1fr;}} #profile-gate{position:fixed;inset:0;z-index:100;background:rgba(10,12,16,.92);display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto;} #profile-gate[hidden]{display:none;} .profile-gate-card{background:var(--surface);border:1px solid var(--border-strong);max-width:540px;width:100%;padding:32px;margin:auto;} .profile-gate-card h2{font-size:24px;margin-bottom:10px;} body.gate-open{overflow:hidden;}