<!DOCTYPE html>

<head>

<title>Le Shop du Xou - LEGO Retiring Sets Lille</title>

<style>

* { margin: 0; padding: 0; box-sizing: border-box; }

body {

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

background: linear-gradient(135deg, #F5F5DC 0%, #FDF6E3 100%);

color: #333;

line-height: 1.6;

}

.header {

background: linear-gradient(90deg, #FFFFFF 0%, #FFF8E7 100%);

padding: 2rem 0;

border-bottom: 8px solid #FF4444;

position: relative;

overflow: hidden;

}

.header::before {

content: '';

position: absolute;

left: 0;

top: 0;

height: 100%;

width: 100px;

background: linear-gradient(180deg, #FFD700 0%, #FF8C00 100%);

animation: slideBand 20s infinite linear;

}

@keyframes slideBand { 0% { transform: translateX(-100px); } 100% { transform: translateX(calc(100vw + 100px)); } }

.logo {

text-align: center;

font-size: 3rem;

color: #FF4444;

font-weight: bold;

text-shadow: 2px 2px 4px rgba(0,0,0,0.1);

margin-bottom: 1rem;

}

.subtitle { text-align: center; color: #666; font-size: 1.2rem; }

.story-section {

max-width: 1200px;

margin: 4rem auto;

padding: 0 2rem;

background: rgba(255,255,255,0.9);

border-radius: 20px;

box-shadow: 0 20px 40px rgba(0,0,0,0.1);

}

.story-title {

text-align: center;

color: #FF4444;

font-size: 2.5rem;

margin-bottom: 2rem;

}

.story-content {

font-size: 1.1rem;

text-align: center;

max-width: 800px;

margin: 0 auto;

color: #555;

}

.grid-container {

max-width: 1400px;

margin: 4rem auto;

padding: 0 2rem;

display: grid;

grid-template-columns: repeat(4, 1fr);

grid-template-rows: repeat(3, 350px);

gap: 3rem;

position: relative;

}

.grid-line-h, .grid-line-v {

position: absolute;

background: rgba(255,68,68,0.3);

z-index: 1;

}

.grid-line-v { width: 4px; height: 100%; left: 33.33%; }

.grid-line-v:nth-child(2) { left: 66.66%; }

.grid-line-h { width: 100%; height: 4px; top: 33.33%; }

.grid-line-h:nth-child(3) { top: 66.66%; }

.lego-card {

position: relative;

background: linear-gradient(145deg, #FFFFFF, #F8F8F8);

border-radius: 25px;

padding: 2rem;

box-shadow: 0 15px 35px rgba(0,0,0,0.1);

transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

overflow: hidden;

cursor: pointer;

z-index: 2;

}

.lego-card:hover {

transform: translateY(-20px) scale(1.05);

box-shadow: 0 30px 60px rgba(255,68,68,0.3);

border: 3px solid #FF4444;

}

.lego-image {

width: 100%;

height: 180px;

object-fit: cover;

border-radius: 15px;

margin-bottom: 1rem;

transition: opacity 0.3s;

}

.lego-card:hover .lego-image { opacity: 0.7; }

.built-preview {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%) scale(0);

width: 120%;

height: 120%;

object-fit: contain;

border-radius: 15px;

z-index: 10;

opacity: 0;

transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

.lego-card:hover .built-preview {

transform: translate(-50%, -50%) scale(1);

opacity: 1;

}

.set-name {

font-size: 1.4rem;

font-weight: bold;

color: #FF4444;

margin-bottom: 0.5rem;

}

.price {

font-size: 2rem;

color: #FFD700;

font-weight: bold;

margin-bottom: 0.5rem;

}

.availability {

color: #28A745;

font-weight: bold;

margin-bottom: 0.5rem;

}

.description {

color: #666;

font-size: 0.95rem;

}

.buy-btn {

width: 100%;

padding: 1rem;

background: linear-gradient(45deg, #FF4444, #FF6B6B);

color: white;

border: none;

border-radius: 50px;

font-size: 1.1rem;

font-weight: bold;

cursor: pointer;

margin-top: 1rem;

transition: all 0.3s;

}

.buy-btn:hover {

background: linear-gradient(45deg, #FFD700, #FF8C00);

transform: scale(1.05);

}

.payment-section {

max-width: 1200px;

margin: 4rem auto;

padding: 3rem 2rem;

background: linear-gradient(135deg, #FFFFFF, #FFF8E7);

border-radius: 25px;

text-align: center;

box-shadow: 0 20px 40px rgba(0,0,0,0.1);

}

.payment-title {

color: #FF4444;

font-size: 2.5rem;

margin-bottom: 1rem;

}

.stripe-info {

background: #F8F9FA;

padding: 2rem;

border-radius: 15px;

margin: 2rem 0;

border-left: 6px solid #FFD700;

}

footer {

background: #FF4444;

color: white;

text-align: center;

padding: 2rem;

margin-top: 4rem;

}

@media (max-width: 768px) {

.grid-container { grid-template-columns: 1fr; grid-template-rows: repeat(12, 280px); gap: 1.5rem; }

.grid-line-v, .grid-line-h { display: none; }

.logo { font-size: 2rem; }

}

</style>

</head>

<body>

<p class="subtitle">LEGO Retiring Sets • Lille • Collectionneur Expert</p>

</header>

<h2 class="story-title">Notre Histoire</h2>

Passionnés de LEGO depuis l'enfance, nous avons découvert le potentiel d'investissement des sets retiring.

Basés à Lille, nous sourçons les meilleures affaires Fnac/Leboncoin pour vous proposer des boîtes scellées

avant rupture définitive. Notre mission : vous faire profiter de +50-200% de plus-value tout en gardant

le plaisir du collector. Micro-entrepreneur certifié, expéditions rapides Nord de France.

</p>

</section>

<div class="set-name">UCS Razor Crest 75331</div>

<div class="availability">🚀 Disponible (2 unités)</div>

<div class="description">Neuf scellé • Retiring SOON • +80-120% valeur 2026</div>

<button class="buy-btn" onclick="buyNow('Razor Crest')">Payer Sécurisé Stripe</button>

</div>

<div class="set-name">Lion Knights' Castle 10305</div>

<div class="availability">✅ En stock</div>

<div class="description">Neuf scellé • Modular iconique • +60-100% ROI</div>

<button class="buy-btn" onclick="buyNow('Lion Knights Castle')">Payer Sécurisé</button>

</div>

<div class="availability">⚡ Dernier!</div>

<div class="description">Neuf scellé • Star Wars culte • Rupture imminente</div>

<button class="buy-btn" onclick="buyNow('X-Wing')">Acheter Maintenant</button>

</div>

<div class="set-name">Orient Express 21344</div>

<div class="availability">📦 Préco</div>

<div class="description">Neuf scellé • Ideas prestige • +70% attendu</div>

<button class="buy-btn" onclick="buyNow('Orient Express')">Réserver</button>

</div>

<div style="text-align:center; color:#999; padding-top:4rem;">Bientôt disponible<br><small>Sets Star Wars</small></div>

</div>

<div style="text-align:center; color:#999; padding-top:4rem;">Vendu!<br><small>Merci!</small></div>

</div>

<div style="text-align:center; color:#999; padding-top:4rem;">Coming Soon<br><small>Modulars</small></div>

</div>

<div style="text-align:center; color:#999; padding-top:4rem;">Rupture<br><small>Recherche active</small></div>

</div>

<div style="text-align:center; color:#999; padding-top:4rem;">Nouveau<br><small>Technic</small></div>

</div>

<div style="text-align:center; color:#999; padding-top:4rem;">Promo Fnac<br><small>Flash</small></div>

</div>

<h2 class="payment-title">Paiement 100% Sécurisé</h2>

<h3>🛡️ Stripe + 3D Secure</h3>

<p><strong>Avantages :</strong> Paiement en 3x sans frais • Protection acheteur • Remboursement 14j • Expédition Colissimo suivi</p>

<p><em>Leboncoin → Cliquez Acheter → Paiement sécurisé ici</em></p>

</div>

</section>

</footer>

function buyNow(setName) {

alert(`🚀 REDIRIGE VERS STRIPE\n\nSet: ${setName}\n\nPOUR TEST: Remplacez par votre lien Stripe Checkout\nex: https://buy.stripe.com/xxx\n\nTéléchargez ce site sur Netlify GRATUIT!`);

}

// Animations scroll

window.addEventListener('scroll', () => {

document.querySelectorAll('.lego-card').forEach((card, i) => {

const rect = card.getBoundingClientRect();

if (rect.top < window.innerHeight) {

card.style.opacity = '1';

card.style.transform = `translateY(0) rotateX(0deg)`;

}

});

</script>

</body>

</html>