/* Theme Matrix — toutes les couleurs sont des variables : change-les ici. */ :root { --bg: #0a0a0a; --fg: #e8ffe8; --accent: #00ff41; --danger: #ff0033; --card: #101510; --border: #1f3a1f; --font-title: 'Orbitron', sans-serif; --font-body: 'Share Tech Mono', monospace; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .container { max-width: 1100px; margin: 0 auto; padding: 0 1rem; } header.site { border-bottom: 1px solid var(--border); padding: 1rem 0; } header.site .brand { font-family: var(--font-title); font-size: 1.4rem; color: var(--accent); letter-spacing: 2px; } header.site nav a { margin-left: 1.2rem; } h1, h2, h3 { font-family: var(--font-title); color: var(--accent); } .hero { padding: 4rem 0; text-align: center; } .hero p { max-width: 600px; margin: 1rem auto; opacity: .85; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.2rem; padding: 2rem 0; } .card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 1.2rem; } .card .price { color: var(--accent); font-size: 1.2rem; margin-top: .5rem; } .btn { display: inline-block; background: var(--accent); color: var(--bg); padding: .6rem 1.4rem; border-radius: 4px; font-weight: bold; } .btn:hover { text-decoration: none; filter: brightness(1.15); } footer.site { border-top: 1px solid var(--border); margin-top: 3rem; padding: 2rem 0; opacity: .7; font-size: .85rem; } .prose { line-height: 1.7; } .prose img { max-width: 100%; } /* fix nav : wrap propre avec beaucoup de pages */ header.site .container { flex-wrap: wrap; gap: .5rem 1rem; } header.site nav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .3rem 1.1rem; } header.site nav a { margin-left: 0; white-space: nowrap; } /* matrixanim v1.0.0 — pluie PLEINE INTENSITE (meme rendu que la porte ENTER) */ #matrix-rain { position: fixed; inset: 0; z-index: -1; opacity: 1; pointer-events: none; } header.site, main, footer.site { position: relative; z-index: 1; } /* contenu en panneaux terminal par-dessus la pluie (comme la boite de la porte) */ header.site, footer.site { background: rgba(10, 10, 10, .92); } main > .container { background: rgba(16, 21, 16, .92); border: 1px solid var(--border); box-shadow: 0 0 24px rgba(0, 255, 65, .12); padding: 1.5rem; margin-top: 1.5rem; margin-bottom: 1.5rem; } .rain-toggle { margin-left: 1rem; font-size: .8rem; opacity: .8; } /* ===== Porte d'entrée — Matrixanim v1.1.0 (même style que la porte ENTER) ===== */ /* Tant que .gate-locked est sur : seuls la pluie et la porte sont visibles. */ html.gate-locked body { overflow: hidden; } html.gate-locked header.site, html.gate-locked main, html.gate-locked footer.site { visibility: hidden; } html.gate-locked #matrix-rain { z-index: 0; } #rebel-gate { position: fixed; inset: 0; z-index: 10; display: none; align-items: center; justify-content: center; } html.gate-locked #rebel-gate { display: flex; } #rebel-gate .gate-box { background: rgba(16, 21, 16, .94); border: 1px solid var(--accent); box-shadow: 0 0 30px rgba(0, 255, 65, .25), inset 0 0 12px rgba(0, 255, 65, .06); padding: 1.6rem 1.8rem; max-width: 560px; width: calc(100% - 2rem); text-align: center; max-height: 92vh; overflow: auto; } #rebel-gate h1 { font-family: var(--font-title); color: var(--accent); font-size: 1.2rem; letter-spacing: .18em; margin: 0 0 1rem; text-shadow: 0 0 8px rgba(0, 255, 65, .6); } #rebel-gate .gate-checks { font-size: .85rem; text-align: left; margin-bottom: 1.2rem; } #rebel-gate .gate-checks label { display: flex; gap: .55rem; align-items: flex-start; cursor: pointer; } #rebel-gate .gate-checks input { accent-color: var(--accent); margin-top: .15rem; cursor: pointer; } #gate-enter { font-family: var(--font-body); font-size: 1.05rem; letter-spacing: .2em; background: transparent; color: var(--accent); border: 1px solid var(--accent); padding: .7rem 2.2rem; cursor: pointer; transition: background .15s, color .15s, opacity .15s; } #gate-enter:hover:not(:disabled) { background: var(--accent); color: var(--bg); } #gate-enter:disabled { opacity: .35; cursor: not-allowed; } #rebel-gate .gate-hint { margin-top: .8rem; font-size: .7rem; opacity: .55; } #rebel-gate.gate-out { animation: gateOut .45s ease forwards; } @keyframes gateOut { to { opacity: 0; transform: scale(1.03); } } /* Overlay termes (fallback si aucune page CMS "termes") */ #gate-terms-overlay { position: fixed; inset: 0; z-index: 11; display: none; background: rgba(10, 10, 10, .9); align-items: center; justify-content: center; } #gate-terms-overlay.open { display: flex; } #gate-terms-overlay .box { background: var(--card); border: 1px solid var(--border); max-width: 560px; width: calc(100% - 2rem); max-height: 75vh; overflow: auto; padding: 1.6rem; font-size: .82rem; text-align: left; line-height: 1.55; } #gate-terms-overlay h2 { font-family: var(--font-title); color: var(--accent); font-size: 1rem; margin: 0 0 .8rem; letter-spacing: .12em; } #gate-terms-overlay .close { margin-top: 1.2rem; text-align: center; } .btn-line { font-family: var(--font-body); background: transparent; color: var(--accent); border: 1px solid var(--accent); padding: .4rem 1.4rem; cursor: pointer; } @media (prefers-reduced-motion: reduce) { #rebel-gate.gate-out { animation: none; opacity: 0; } } /* v1.1.1 — le footer ne bloque plus les clics des éléments par-dessus (toast panier) */ footer.site { pointer-events: none; } footer.site a, footer.site button { pointer-events: auto; }