/* ============================================================ pomme.gg — design system v1 — base partagée par toutes les pages du site et des jeux ============================================================ COMMENT L'UTILISER ------------------ Dans le de chaque page, AVANT tout autre CSS scope : Puis structure ta page comme ça :
...
...
La classe .container impose max-width: 1200px et un centrage uniforme. Plus jamais une page qui s'étale à 1900px. CACHE BUSTING ------------- Quand tu modifies ce fichier, incrémente le v= dans le . Pour forcer un hard refresh chez les visiteurs. ============================================================ */ /* =============================================== 1. TOKENS — variables de design =============================================== */ :root { /* ---- Couleurs de fond ---- */ --bg: #07070f; --surface: #0f0f1c; /* cartes, blocs, panneaux */ --surface-2: #14141f; /* éléments imbriqués */ --border: rgba(255, 255, 255, .06); --border-2: rgba(255, 255, 255, .12); /* hover, focus */ /* ---- Couleurs de texte ---- */ --text: #f0f0f8; --muted: #5a5a7a; /* labels secondaires */ --muted-2: #8989a8; /* texte tertiaire */ /* ---- Accents (signature pomme.gg) ---- */ --red: #ff3c6e; /* couleur principale, CTAs */ --pink: #ff6eb4; /* highlights */ --green: #3cffb4; /* succès, JOUABLE */ --blue: #3ca8ff; /* secondaire */ --purple: #a855f7; /* pommeboard, secondaire */ --gold: #ffd166; /* pépoints, récompenses */ --orange: #ff8c42; /* highlights chauds */ --twitch: #9147ff; /* bouton Twitch officiel */ /* ---- Échelle d'espacement (base 4px) ---- */ --space-1: .25rem; /* 4px */ --space-2: .5rem; /* 8px */ --space-3: .75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ /* ---- Typographie ---- */ --font-display: 'Syne', sans-serif; /* titres impactants */ --font-title: 'Bebas Neue', sans-serif; /* labels condensés tout en haut */ --font-body: 'DM Mono', monospace; /* corps de texte */ /* ---- Rayons de bordure ---- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; /* ---- Ombres ---- */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, .2); --shadow-md: 0 8px 24px rgba(0, 0, 0, .3); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .4); /* ---- Transitions ---- */ --transition: all .2s ease; /* ---- Z-index ---- */ --z-header: 10; --z-modal: 100; --z-toast: 1000; /* ---- Largeur max du contenu ---- */ --content-max: 1200px; } /* =============================================== 2. RESET MINIMAL =============================================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 14px; line-height: 1.6; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } img { max-width: 100%; display: block; } /* =============================================== 3. EFFETS DE FOND (glow + noise discret) =============================================== */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 60% 40% at 20% 20%, rgba(255, 60, 110, .07) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 80% 80%, rgba(60, 168, 255, .06) 0%, transparent 60%), radial-gradient(ellipse 40% 60% at 50% 50%, rgba(168, 85, 247, .04) 0%, transparent 70%); } body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .4; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E"); } /* =============================================== 4. LAYOUT — la base de toutes les pages =============================================== */ /* La structure de base : page > container > contenu */ .page { position: relative; z-index: 1; min-height: 100vh; } /* CETTE règle est LA garantie d'harmonie : aucun contenu ne dépasse 1200px */ .container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-6); } /* Variantes pour des contenus plus étroits (formulaires, articles) */ .container--narrow { max-width: 720px; } .container--medium { max-width: 900px; } /* Espacement vertical entre sections */ .section { padding: var(--space-8) 0; } .section--lg { padding: var(--space-12) 0; } /* =============================================== 5. TYPOGRAPHIE =============================================== */ .h-display { font-family: var(--font-display); font-weight: 800; line-height: 1.15; letter-spacing: -.5px; } .h-title { font-family: var(--font-title); letter-spacing: 4px; text-transform: uppercase; } .text-muted { color: var(--muted-2); } .text-dim { color: var(--muted); } .text-accent { color: var(--red); } .text-gold { color: var(--gold); } /* =============================================== 6. BOUTONS =============================================== */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); border: 1px solid var(--border); background: transparent; color: var(--muted-2); font-family: var(--font-body); font-size: .8rem; letter-spacing: 1px; text-decoration: none; transition: var(--transition); } .btn:hover { border-color: var(--red); color: var(--text); transform: translateY(-1px); } .btn--primary { background: var(--red); border-color: var(--red); color: #fff; font-weight: 500; } .btn--primary:hover { opacity: .85; color: #fff; } .btn--twitch { background: var(--twitch); border-color: var(--twitch); color: #fff; } .btn--twitch:hover { opacity: .85; color: #fff; } .btn--purple { color: var(--purple); border-color: rgba(168, 85, 247, .25); } .btn--purple:hover { background: rgba(168, 85, 247, .08); border-color: var(--purple); color: var(--text); } .btn--ghost { /* sobre, pour actions secondaires */ } .btn--sm { padding: var(--space-2) var(--space-3); font-size: .72rem; } .btn--lg { padding: var(--space-4) var(--space-8); font-size: .9rem; } /* =============================================== 7. FORMULAIRES =============================================== */ .field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); } .label { font-family: var(--font-title); font-size: .75rem; letter-spacing: 2px; color: var(--muted-2); text-transform: uppercase; } .input, .textarea, .select { width: 100%; padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); font-family: var(--font-body); font-size: .9rem; transition: var(--transition); } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--red); background: var(--surface-2); } .textarea { min-height: 120px; resize: vertical; line-height: 1.5; } .input::placeholder, .textarea::placeholder { color: var(--muted); } /* =============================================== 8. CARTES & SURFACES =============================================== */ .surface { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); } .surface--accent { background: linear-gradient(135deg, rgba(255, 60, 110, .08), rgba(168, 85, 247, .02)); border-color: rgba(255, 60, 110, .25); position: relative; overflow: hidden; } .surface--accent::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--red), transparent); } /* =============================================== 9. BADGES & PILLS =============================================== */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); border: 1px solid var(--border); font-size: .62rem; letter-spacing: 2px; font-family: var(--font-body); text-transform: uppercase; } .badge--ready { background: rgba(60, 255, 180, .1); color: var(--green); border-color: rgba(60, 255, 180, .3); } .badge--live { background: rgba(255, 60, 110, .15); color: var(--red); border-color: rgba(255, 60, 110, .3); } .badge--soon { background: rgba(255, 255, 255, .05); color: var(--muted); } .badge--admin { background: rgba(168, 85, 247, .1); color: var(--purple); border-color: rgba(168, 85, 247, .3); } /* =============================================== 10. HEADER PARTAGÉ =============================================== Le styling complet du header (.site-header, .site-header__*, .user-chip*, .pommu-counter, .pb-mini, .carousel*) est défini dans header.css. Aucune règle header ici, pour éviter les doublons et conflits flex-wrap. Charger header.css APRES design-system.css dans chaque page. */ /* =============================================== 11. SECTION HELPERS =============================================== */ .section-header { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-6); } .section-title { font-family: var(--font-title); font-size: 1.4rem; letter-spacing: 4px; color: var(--text); } .section-line { flex: 1; height: 1px; background: var(--border); } .section-meta { font-size: .7rem; color: var(--muted); letter-spacing: 1px; } /* =============================================== 12. GAME CARDS GRID (réutilisable par tous les jeux) =============================================== */ .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-4); } .game-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; text-decoration: none; display: block; aspect-ratio: 3/4; border: 1px solid var(--border); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); } .game-card:hover { transform: translateY(-6px); } .game-card--soon { opacity: .5; cursor: default; } .game-card--soon:hover { transform: none; } /* =============================================== 13. FOOTER PARTAGÉ =============================================== */ .site-footer { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-8); border-top: 1px solid var(--border); flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-12); } .site-footer__tag { font-size: .7rem; color: var(--muted); letter-spacing: 1px; } .site-footer__socials { display: flex; gap: var(--space-2); flex-wrap: wrap; } /* =============================================== 14. UTILITAIRES =============================================== */ .text-center { text-align: center; } .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .gap-2 { gap: var(--space-2); } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .hidden { display: none; } /* =============================================== 15. RESPONSIVE — point de bascule mobile à 640px =============================================== */ @media (max-width: 640px) { .container { padding: 0 var(--space-4); } .section { padding: var(--space-6) 0; } .section-title { font-size: 1.2rem; } .site-footer { flex-direction: column; align-items: flex-start; } }