/* GameZone 242 – Styles minimalistes */
:root {
  --bg: #f7f8fc;
  --card: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --brand: #7c3aed; /* violet */
  --brand-2: #22d3ee; /* cyan */
  --accent: #16a34a;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
a { color: var(--brand-2); text-decoration: none; }
img { max-width: 100%; display: block; }

.container { width: 94%; max-width: 1100px; margin: 0 auto; }
.narrow { max-width: 800px; }

.site-header { position: sticky; top:0; z-index:50; backdrop-filter: blur(10px); background: rgba(255,255,255,.85); border-bottom: 1px solid #e5e7eb; }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding: 12px 0; gap: 16px; }
.logo img { height: 38px; }
.nav a { margin: 0 10px; color: var(--text); opacity:1 }
.cta-group .btn { margin-left: 8px; }

.hero { padding: 48px 0 24px; background: radial-gradient(1200px 500px at 10% -10%, rgba(124,58,237,.10), transparent), radial-gradient(1200px 500px at 90% -10%, rgba(34,211,238,.10), transparent); }
.hero-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items:center; }
.hero-text h1 { font-size: 42px; line-height:1.1; margin: 0 0 12px; }
.grad { background: linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-ctas { display:flex; gap: 12px; margin: 16px 0; }
.features { display:flex; gap: 16px; flex-wrap: wrap; padding:0; margin:12px 0; list-style: "✔ "; }
.hero-media img { border-radius: 16px; box-shadow: 0 15px 45px rgba(0,0,0,.45); }

.cards { display:grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin: 28px auto; }
.card { background: var(--card); border: 1px solid #e5e7eb; border-radius: 14px; padding: 12px; }
.card h3 { margin: 10px 0 6px; }

.pricing { padding: 12px 0 36px; }
.price-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.price { background: var(--card); border: 1px solid #e5e7eb; border-radius: 14px; padding: 16px; text-align:center; }
.price .big { font-size: 28px; margin: 8px 0 0; }
.price span { color: var(--muted); font-size: 14px; }

.site-footer { border-top: 1px solid #1e2230; padding: 24px 0; margin-top: 40px; }
.footer-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.legal { margin-top: 10px; color: var(--muted); font-size: 14px; }

/* Forms */
.form { background: var(--card); border: 1px solid #e5e7eb; border-radius: 14px; padding: 16px; margin: 16px 0; }
.form.small { padding: 12px; }
.form label { display:block; font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.form input, .form select, .form textarea { width: 100%; margin-top: 6px; padding: 10px 12px; border-radius: 10px; border: 1px solid #22283a; background: #ffffff; color:#111827; color: var(--text); }
.form .actions { display:flex; gap: 10px; margin-top: 12px; }
.form .form-msg { margin-top: 10px; font-size: 14px; }
.form-note { color: var(--muted); }

.grid.two { display:grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.grid.three { display:grid; grid-template-columns: repeat(3,1fr); gap: 12px; }

/* Shop */
.shop { display:grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.menu .items { display:grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.menu .item { background: var(--card); border: 1px solid #e5e7eb; border-radius: 14px; padding: 12px; display:flex; flex-direction:column; }
.menu .item h4 { margin: 8px 0 4px; }
.menu .item .price { color: var(--muted); font-size: 14px; }
.menu .item button { margin-top: auto; }

.cart { background: var(--card); border: 1px solid #e5e7eb; border-radius: 14px; padding: 12px; position: sticky; top: 84px; }
.cart-total { margin: 8px 0 12px; font-weight: 600; }
.hidden { display:none; }

/* Buttons */
.btn { display:inline-block; padding: 10px 14px; border-radius: 10px; border: 1px solid #d1d5db; font-weight: 600; }
.btn.primary { background: linear-gradient(90deg, var(--brand), var(--brand-2)); color: white; border: none; }
.btn.outline { background: transparent; color: var(--text); }
.btn.ghost { background: rgba(124,58,237,.1); color: white; border: 1px solid rgba(124,58,237,.3); }

/* Layout helpers */
.container .map iframe { width: 100%; height: 300px; border:0; border-radius: 14px; }
.event-list .event { background: var(--card); border: 1px solid #e5e7eb; border-radius: 14px; padding: 16px; margin: 12px 0; }

/* Responsive */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr 1fr; }
  .price-grid { grid-template-columns: 1fr 1fr; }
  .shop { grid-template-columns: 1fr; }
  .menu .items { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .cards, .price-grid, .menu .items, .footer-grid { grid-template-columns: 1fr; }
  .grid.two, .grid.three { grid-template-columns: 1fr; }
  .site-header .nav { display:none; }
}

/* ===== Colorful Plan Cards (v10.1) ===== */
.cards .card { position: relative; overflow: hidden; }
.plan-icon{ position:absolute; top:14px; right:14px; font-size:22px; opacity:.9 }
.cards .card h3{ color:#fff; margin-top:8px; }
.cards .card .big{ color:#fff; font-weight:800; }
.cards .card .big span{ opacity:.9; font-weight:600; }
.cards .card .features li{ color:#fff; opacity:.95; }
.cards .card .btn.ghost.light{ border-color: rgba(255,255,255,.7); color:#fff; }
.cards .card .btn.ghost.light:hover{ background: rgba(255,255,255,.12); }

.plan-starter{ background: linear-gradient(135deg, #22c55e, #16a34a); border: none; box-shadow: 0 10px 30px rgba(34,197,94,.35); }
.plan-grand{   background: linear-gradient(135deg, #3b82f6, #2563eb); border: none; box-shadow: 0 10px 30px rgba(37,99,235,.35); }
.plan-pro{     background: linear-gradient(135deg, #a855f7, #7c3aed); border: none; box-shadow: 0 10px 30px rgba(124,58,237,.35); }
.plan-vip{     background: linear-gradient(135deg, #f59e0b, #d97706); border: none; box-shadow: 0 10px 30px rgba(217,119,6,.35); }

.cards .card{ color:#fff; transform: translateY(0); transition: transform .22s ease, box-shadow .22s ease; }
.cards .card:hover{ transform: translateY(-4px); }
.cards{ gap: 16px; }
.cards .card .features{ margin: 6px 0 12px; }
.cards .card .features li::marker{ content: "• "; }