/* Importation des polices */ @import url(‘https://fonts.googleapis.com/css2?family=MedievalSharp&family=Cinzel:wght@400;700;900&family=IM+Fell+English:ital@0;1&family=Uncial+Antiqua&display=swap’); :root { –stone: #1a1410; –dark-stone: #0d0b08; –gold: #c9922a; –gold-light: #f0c060; –gold-dim: #7a5518; –parchment: #e8d5a3; –parchment-dark: #c4a96b; –ember: #d44a1a; –ember-glow: #ff7a3a; –moss: #3a5c2e; –ink: #1e1408; –rune: #8b6914; } .donjon-container { background-color: var(–dark-stone); color: var(–parchment); font-family: ‘IM Fell English’, Georgia, serif; position: relative; overflow: hidden; } /* Texture de fond */ .donjon-container::before { content:  »; position: absolute; inset: 0; background-image: url(« data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ width=’200′ height=’200’%3E%3Cfilter id=’noise’%3E%3CfeTurbulence type=’fractalNoise’ baseFrequency=’0.9′ numOctaves=’4′ stitchTiles=’stitch’/%3E%3CfeColorMatrix type=’saturate’ values=’0’/%3E%3C/filter%3E%3Crect width=’200′ height=’200′ filter=’url(%23noise)’ opacity=’0.04’/%3E%3C/svg%3E »); pointer-events: none; z-index: 5; opacity: 0.6; } /* — HERO — */ .hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(201,146,42,0.15) 0%, transparent 70%), radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212,74,26,0.08) 0%, transparent 60%), linear-gradient(180deg, #0a0805 0%, #1a1410 40%, #120f0a 100%); } .torch { position: absolute; width: 4px; background: linear-gradient(to top, var(–gold-dim), transparent); } .torch-left { left: 12%; top: 20%; height: 120px; } .torch-right { right: 12%; top: 20%; height: 120px; } .flame { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); width: 28px; height: 40px; border-radius: 50% 50% 30% 30%; background: radial-gradient(ellipse at 50% 80%, var(–ember-glow), var(–gold), transparent 70%); animation: flicker 1.5s ease-in-out infinite alternate; } @keyframes flicker { 0% { transform: translateX(-50%) scale(1); opacity: 0.9; } 100% { transform: translateX(-50%) scale(1.05); opacity: 1; } } .hero-content { position: relative; z-index: 2; text-align: center; padding: 2rem; } h1 { font-family: ‘Cinzel’, serif; font-weight: 900; font-size: clamp(3rem, 8vw, 7rem); line-height: 0.95; color: var(–gold-light); text-shadow: 0 0 40px rgba(201,146,42,0.5), 2px 2px 0 #3a2a08; } h1 span { display: block; color: var(–parchment); font-size: 55%; letter-spacing: 0.2em; } .btn { font-family: ‘Cinzel’, serif; padding: 0.9rem 2.2rem; border: none; cursor: pointer; text-decoration: none; display: inline-block; } .btn-primary { background: linear-gradient(135deg, #8b5e1a, var(–gold), #8b5e1a); color: var(–dark-stone); clip-path: polygon(12px 0%, 100% 0%, calc(100% – 12px) 100%, 0% 100%); } /* — SECTIONS — */ section { padding: 6rem 2rem; max-width: 1200px; margin: 0 auto; } .section-title { font-family: ‘Cinzel’, serif; font-size: 2.5rem; color: var(–gold-light); margin-bottom: 1.5rem; } .categories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; } .cat-card { padding: 2.5rem 1.5rem; border: 1px solid rgba(201,146,42,0.2); background: rgba(201,146,42,0.04); text-align: center; clip-path: polygon(0 0, calc(100% – 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% – 16px)); } .products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; } .product-card { background: linear-gradient(160deg, #1e180e, #140f08); border: 1px solid rgba(201,146,42,0.25); padding: 1rem; clip-path: polygon(0 0, 100% 0, 100% calc(100% – 20px), calc(100% – 20px) 100%, 0 100%); } .product-price { color: var(–gold); font-weight: bold; font-size: 1.2rem; } /* Navigation simplifiée pour WordPress */ .donjon-nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; background: rgba(10,8,5,0.9); }