/* ============================================================ DENTAGRAM — JEUX PLUS SAINS Un hub neutre + trois jeux qui ne se ressemblent pas : .theme-nebulark → arcade pixel / espace / néon .theme-empire → art déco, gazette d'époque, laiton & sépia .theme-crank → motorsport ensoleillé, ciel & bitume Le hub (index.html, sans classe) est volontairement sobre. Chaque skin redéfinit : polices (--display/--body), couleurs, fond (canvas + textures), et le grain des bordures. ============================================================ */ /* ================= PALETTE + VARIABLES ================= */ :root { /* neutres partagés */ --bg: #0e0e16; --bg-deep: #07070d; --panel: #17172a; --panel-hi: #23233f; --line: #33334f; --white: #f3f3f8; --grey: #9a9ab4; /* teintes des trois jeux (servent au hub) */ --neb: #27e8f5; --emp: #e6c15a; --crk: #ff3b30; /* couleurs Nebulark (compat pages arcade) */ --cyan: #27e8f5; --cyan-dim: #0e7f8f; --magenta: #ff4fd8; --violet: #9b5cff; --gold: #ffd23f; --orange: #ff8a2a; --green: #2ee86a; --red: #ff3b5c; /* variables SÉMANTIQUES (re-skinnées par jeu) */ --accent: #7bdcff; --accent-2: #ffffff; --title: #ffffff; --h2col: #cfcfe6; --cta-bg: #7bdcff; --cta-fg: #07070d; --neb1: #2b6cff; --neb2: #16324f; --neb3: #6a4bff; --star1: #f4f4ff; --star2: #8a8ab0; --star3: #7bdcff; --star4: #c8c8ff; /* polices : le hub est sobre (grotesque) */ --display: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --body: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --px: "Press Start 2P", monospace; --mono: ui-monospace, "Courier New", monospace; --radius: 14px; /* le hub arrondit ; les skins peuvent remettre à 0 */ --skin-blend: normal; } /* -------- SKIN NEBULARK : arcade pixel, néon, espace -------- */ .theme-nebulark { --bg:#0b0b1e; --bg-deep:#060614; --panel:#141432; --panel-hi:#232355; --line:#3a3a7c; --grey:#9a9ac0; --accent:#27e8f5; --accent-2:#ff4fd8; --title:#27e8f5; --h2col:#ffd23f; --cta-bg:#2ee86a; --cta-fg:#060614; --neb1:#9b5cff; --neb2:#0e7f8f; --neb3:#ff4fd8; --star1:#f4f4ff; --star2:#8a8ab0; --star3:#27e8f5; --star4:#ffd23f; --display: var(--px); --body: ui-monospace, "Courier New", monospace; --radius: 0px; } /* -------- SKIN EMPIRE : art déco, gazette, laiton & sépia -------- */ .theme-empire { --bg:#191308; --bg-deep:#0e0a04; --panel:#241a0d; --panel-hi:#33260f; --line:#5c4526; --grey:#c9b48a; --accent:#d8a441; /* laiton */ --accent-2:#b5651d; /* cuivre chaud */ --title:#f3e4bd; /* crème dorée */ --h2col:#d8a441; --cta-bg:#d8a441; --cta-fg:#1a1206; --neb1:#8a5a1e; --neb2:#3a2a14; --neb3:#6e4b22; --star1:#f3e4bd; --star2:#b89552; --star3:#d8a441; --star4:#ffedb8; --display: "Cinzel", "Playfair Display", Georgia, serif; --body: "Spectral", Georgia, "Times New Roman", serif; --radius: 3px; } /* -------- SKIN ESSAI PRESSE : motorsport, soleil, bitume -------- */ .theme-crank { --bg:#0c1420; --bg-deep:#070d16; --panel:#122032; --panel-hi:#1b2d44; --line:#2c4258; --grey:#a9bccb; --accent:#ff3b30; /* rouge Crank */ --accent-2:#ffc531; /* soleil */ --title:#ffffff; --h2col:#ffc531; --cta-bg:#ff3b30; --cta-fg:#ffffff; --neb1:#ff8a3c; --neb2:#2ea3d6; --neb3:#ff5a3c; --star1:#ffffff; --star2:#8fb6d0; --star3:#ffc531; --star4:#ff8a3c; --display: "Anton", "Arial Narrow", sans-serif; --body: "Barlow Semi Condensed", "Segoe UI", system-ui, sans-serif; --radius: 6px; } /* ================= RESET / BASE ================= */ * { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; } body { background:var(--bg); color:var(--white); font-family:var(--body); font-size:18px; line-height:1.7; overflow-x:hidden; -webkit-font-smoothing:antialiased; } img { max-width:100%; } /* fond commun : dégradé + canvas + halos */ body::before { content:""; position:fixed; inset:0; z-index:-4; pointer-events:none; background: radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%), linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%); } #stars { position:fixed; inset:0; z-index:-3; } .nebula { position:fixed; border-radius:50%; filter:blur(80px); opacity:.16; z-index:-2; pointer-events:none; animation:drift 28s ease-in-out infinite alternate; } .nebula.n1 { width:440px; height:320px; background:var(--neb1); top:4%; left:-8%; } .nebula.n2 { width:380px; height:280px; background:var(--neb2); top:44%; right:-10%; animation-duration:36s; } .nebula.n3 { width:320px; height:240px; background:var(--neb3); top:80%; left:8%; animation-duration:31s; } @keyframes drift { from{transform:translate(0,0);} to{transform:translate(64px,26px);} } /* structure */ main { position:relative; z-index:1; } section { max-width:980px; margin:0 auto; padding:92px 22px; } h1,h2,h3 { font-family:var(--display); font-weight:700; } h2 { color:var(--h2col); font-size:clamp(20px,3.4vw,34px); line-height:1.5; letter-spacing:.01em; margin-bottom:30px; } h2 .prompt { color:var(--accent); opacity:.9; } p { margin-bottom:1.1em; } a { color:var(--accent); } b { color:var(--h2col); font-weight:700; } em { font-style:italic; } /* ================= NAV ================= */ .nav { position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 22px; background:color-mix(in srgb, var(--bg-deep) 78%, transparent); backdrop-filter:blur(9px); border-bottom:1px solid var(--line); } .nav a { text-decoration:none; } .nav .brand { font-family:var(--display); font-size:16px; letter-spacing:.12em; color:var(--white); display:inline-flex; align-items:center; gap:9px; text-transform:uppercase; } .nav .brand .dot { color:var(--accent); } .nav .links { display:flex; gap:20px; flex-wrap:wrap; } .nav .links a { font-family:var(--body); font-size:14px; letter-spacing:.04em; color:var(--grey); text-transform:uppercase; transition:color .15s; } .nav .links a:hover, .nav .links a.active { color:var(--accent); } @media (max-width:560px){ .nav .links{ display:none; } } /* ================= HERO ================= */ .hero { min-height:min(100svh,880px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:70px 22px 46px; } .hero .kicker { font-family:var(--body); font-size:clamp(12px,1.6vw,15px); color:var(--accent); letter-spacing:.22em; margin-bottom:22px; text-transform:uppercase; } .hero .title { font-family:var(--display); font-size:clamp(38px,9vw,92px); line-height:1.02; color:var(--title); letter-spacing:.005em; margin-bottom:20px; user-select:none; } .hero .title .word { display:inline-block; white-space:nowrap; } .hero .title span { display:inline-block; } .hero .tagline { font-family:var(--body); font-size:clamp(15px,2vw,20px); color:var(--h2col); line-height:1.7; max-width:32ch; margin-bottom:34px; min-height:1.6em; } .hero .hero-icon { width:112px; height:112px; border-radius:26px; margin:6px 0 26px; box-shadow:0 16px 44px rgba(0,0,0,.5), 0 0 0 2px var(--line); animation:float 3.8s ease-in-out infinite; } .hero .ship-px { margin:8px 0 26px; animation:float 3.4s ease-in-out infinite; } @keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} } .cta { display:inline-block; font-family:var(--display); font-weight:700; font-size:clamp(15px,1.8vw,18px); letter-spacing:.03em; color:var(--cta-fg); background:var(--cta-bg); padding:15px 28px; text-decoration:none; border-radius:var(--radius); border:2px solid transparent; box-shadow:0 10px 30px color-mix(in srgb, var(--cta-bg) 34%, transparent); transition:transform .14s, box-shadow .14s, filter .14s; } .cta:hover { transform:translateY(-3px); filter:brightness(1.05); box-shadow:0 16px 38px color-mix(in srgb, var(--cta-bg) 44%, transparent); } .cta:active { transform:translateY(0) scale(.98); } .cta.ghost { background:transparent; color:var(--accent); border-color:var(--accent); box-shadow:none; } .cta.ghost:hover { background:var(--accent); color:var(--bg-deep); } .cta-note { margin-top:16px; color:var(--grey); font-size:15px; } .cta-row { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; align-items:center; } .scroll-hint { margin-top:48px; color:var(--accent); font-family:var(--body); font-size:20px; opacity:.6; animation:hintBounce 1.5s ease-in-out infinite; } @keyframes hintBounce { 0%,100%{transform:translateY(0);opacity:.4;} 50%{transform:translateY(8px);opacity:.9;} } /* séparateur "route" */ .route { display:flex; align-items:center; justify-content:center; max-width:640px; margin:0 auto; padding:0 22px; height:40px; } .route .dot { width:8px; height:8px; border-radius:50%; background:var(--line); animation:lightUp 6s linear infinite; flex-shrink:0; } .route .seg { height:2px; flex:1; background:var(--line); opacity:.5; } .route .dot.star { width:12px; height:12px; background:var(--h2col); animation:starPulse 1.5s ease-in-out infinite; } @keyframes lightUp { 0%,100%{background:var(--line);} 12%{background:var(--h2col);box-shadow:0 0 10px var(--h2col);} 24%{background:var(--line);} } .route .dot:nth-child(3){animation-delay:.5s;} .route .dot:nth-child(5){animation-delay:1s;} .route .dot:nth-child(7){animation-delay:1.5s;} .route .dot:nth-child(9){animation-delay:2s;} .route .dot:nth-child(11){animation-delay:2.5s;} @keyframes starPulse { 0%,100%{transform:scale(1);box-shadow:0 0 8px var(--h2col);} 50%{transform:scale(1.3);box-shadow:0 0 20px var(--h2col);} } /* révélation au scroll */ .reveal { opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s ease; } .reveal.visible { opacity:1; transform:translateY(0); } /* ================= HUB : CARTES DE JEUX ================= */ .games-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; margin-top:24px; } .game-card { display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:26px; text-decoration:none; color:var(--white); transition:transform .2s, border-color .2s, box-shadow .2s; } .game-card:hover { transform:translateY(-8px); } .game-card .gc-top { display:flex; align-items:center; gap:16px; margin-bottom:18px; } .game-card img.gc-icon { width:78px; height:78px; border-radius:18px; flex-shrink:0; box-shadow:0 6px 18px rgba(0,0,0,.5); } .game-card h3 { font-family:var(--display); font-size:22px; line-height:1.2; margin-bottom:6px; } .game-card .gc-genre { font-family:var(--body); font-size:14px; color:var(--grey); text-transform:uppercase; letter-spacing:.06em; } .game-card p { font-size:16px; color:var(--grey); margin:0 0 20px; flex:1; } .game-card .gc-cta { font-family:var(--body); font-weight:600; font-size:14px; letter-spacing:.05em; text-transform:uppercase; align-self:flex-start; padding:10px 16px; border:1.5px solid currentColor; border-radius:var(--radius); } .game-card.a-cyan { --gc:var(--neb); } .game-card.a-gold { --gc:var(--emp); } .game-card.a-red { --gc:var(--crk); } .game-card.a-cyan h3, .game-card.a-cyan .gc-cta { color:var(--neb); } .game-card.a-gold h3, .game-card.a-gold .gc-cta { color:var(--emp); } .game-card.a-red h3, .game-card.a-red .gc-cta { color:var(--crk); } .game-card:hover { border-color:var(--gc); box-shadow:0 20px 46px color-mix(in srgb, var(--gc) 22%, transparent); } .game-card .gc-cta:hover { background:var(--gc); color:var(--bg-deep); } /* ================= MANIFESTE ================= */ .manifeste .big-quote { font-family:var(--display); font-size:clamp(20px,3vw,32px); font-weight:700; line-height:1.35; color:var(--white); border-left:4px solid var(--accent-2); background:color-mix(in srgb, var(--panel) 70%, transparent); border-radius:var(--radius); padding:28px 30px; margin:36px 0; } .manifeste .big-quote em { color:var(--accent-2); font-style:normal; } .signature { color:var(--grey); text-align:right; font-style:italic; } /* ================= BANDEAU PERSONNAGE ================= */ .auri-bar { display:flex; align-items:center; gap:20px; background:var(--panel); border:1px solid var(--accent); border-radius:var(--radius); padding:20px; margin:32px 0; } .auri-face-wrap { text-align:center; flex-shrink:0; } .auri-name { font-family:var(--body); font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-top:9px; } .auri-text { font-family:var(--body); font-size:17px; color:var(--white); min-height:3.2em; flex:1; } .auri-text .cursor, .cursor { display:inline-block; width:.55em; height:1.05em; background:var(--accent); vertical-align:text-bottom; animation:blinkCursor .7s steps(1) infinite; } @keyframes blinkCursor { 50%{opacity:0;} } .auri-face { width:66px; height:56px; background:var(--bg-deep); border:3px solid var(--accent); border-radius:8px; position:relative; display:inline-block; } .auri-face .eye { position:absolute; top:15px; width:10px; height:12px; border-radius:2px; background:var(--accent); transition:height .08s; } .auri-face .eye.l { left:11px; } .auri-face .eye.r { right:11px; } .auri-face .mouth { position:absolute; bottom:11px; left:50%; transform:translateX(-50%); width:26px; height:5px; border-radius:3px; background:var(--accent); } .auri-face.blink .eye { height:3px; margin-top:6px; } .auri-face.talk .mouth { animation:talkMouth .22s steps(1) infinite; } @keyframes talkMouth { 0%,100%{height:5px;} 50%{height:12px;} } /* ================= PERSOS ================= */ .persos { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; margin-top:34px; } .perso { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px; transition:transform .18s, border-color .18s, box-shadow .18s; } .perso:hover { transform:translateY(-6px); border-color:var(--accent); box-shadow:0 16px 34px color-mix(in srgb, var(--accent) 18%, transparent); } .perso h3 { font-family:var(--display); font-size:19px; line-height:1.25; margin-bottom:12px; color:var(--accent); } .perso p { font-size:16px; color:var(--grey); margin:0; } .perso.c-cyan h3{color:var(--cyan);} .perso.c-gold h3{color:var(--gold);} .perso.c-magenta h3{color:var(--magenta);} .perso.c-violet h3{color:var(--violet);} .perso.c-red h3{color:#ff6a5a;} .perso.c-green h3{color:var(--green);} .theme-empire .perso h3, .theme-empire .perso.c-gold h3 { color:var(--accent); } .theme-crank .perso h3, .theme-crank .perso.c-red h3 { color:var(--accent-2); } /* ================= FEATURES ================= */ .features .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px; } .feat { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; transition:transform .16s, border-color .16s; } .feat:hover { transform:translateY(-5px); border-color:var(--h2col); } .feat .ico { font-size:26px; display:block; margin-bottom:12px; color:var(--accent); animation:icoBob 2.6s ease-in-out infinite; } .feat:nth-child(2n) .ico{animation-delay:.4s;} .feat:nth-child(3n) .ico{animation-delay:.8s;} @keyframes icoBob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);} } .feat h3 { font-family:var(--display); font-size:17px; line-height:1.3; color:var(--white); margin-bottom:8px; } .feat p { font-size:15px; color:var(--grey); margin:0; } /* ================= CAPTURES ================= */ .captures .phones { display:flex; gap:26px; overflow-x:auto; padding:30px 6px 40px; scroll-snap-type:x mandatory; } .phone { flex:0 0 234px; scroll-snap-align:center; background:var(--bg-deep); border:3px solid var(--line); border-radius:28px; padding:10px; box-shadow:0 18px 40px rgba(0,0,0,.5); transition:transform .2s, border-color .2s, box-shadow .2s; } .phone:hover { transform:scale(1.04); border-color:var(--accent); box-shadow:0 18px 50px color-mix(in srgb, var(--accent) 26%, transparent); } .phone img { display:block; width:100%; border-radius:18px; } .phone .label { font-family:var(--body); font-weight:600; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--grey); text-align:center; padding:12px 0 4px; } .theme-nebulark .phone img { image-rendering:pixelated; } .shots-land { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:18px; margin-top:20px; } .shots-land figure { margin:0; background:var(--bg-deep); border:1px solid var(--line); border-radius:14px; padding:8px; box-shadow:0 14px 34px rgba(0,0,0,.45); transition:transform .2s, border-color .2s, box-shadow .2s; overflow:hidden; } .shots-land figure:hover { transform:translateY(-5px); border-color:var(--accent); box-shadow:0 16px 40px color-mix(in srgb, var(--accent) 24%, transparent); } .shots-land img { display:block; width:100%; border-radius:9px; } .shots-land figcaption { font-family:var(--body); font-weight:600; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--grey); text-align:center; padding:12px 0 4px; } /* ================= LE CONTRAT ================= */ .contrat ul { list-style:none; margin:30px 0; } .contrat li { font-family:var(--body); font-size:clamp(15px,1.8vw,18px); line-height:1.6; padding:16px 0 16px 42px; position:relative; border-bottom:1px solid var(--line); } .contrat li::before { content:"✓"; position:absolute; left:6px; top:16px; font-weight:700; color:var(--accent); } .contrat li b { color:var(--h2col); } .contrat .promesse { color:var(--grey); font-size:16px; } /* ================= SUPPORT / FOOTER ================= */ .support .mail { display:inline-block; font-family:var(--display); font-size:17px; color:var(--cta-fg); background:var(--cta-bg); border-radius:var(--radius); padding:15px 24px; text-decoration:none; margin:14px 0; transition:transform .15s, filter .15s; box-shadow:0 10px 26px color-mix(in srgb, var(--cta-bg) 30%, transparent); } .support .mail:hover { transform:translateY(-3px); filter:brightness(1.06); } footer { text-align:center; padding:56px 22px 72px; color:var(--grey); font-size:15px; } footer .foot-ship { margin-bottom:18px; animation:float 3.2s ease-in-out infinite; display:inline-block; } footer a { color:var(--accent); } footer .foot-nav { margin-bottom:16px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap; } footer .foot-nav a { font-family:var(--body); font-weight:600; font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--grey); text-decoration:none; } footer .foot-nav a:hover { color:var(--accent); } .px-art { display:inline-block; image-rendering:pixelated; } /* ============================================================ SKIN NEBULARK — arcade pixel : on remet le grain rétro ============================================================ */ .theme-nebulark .hero .title { text-shadow:0 0 24px color-mix(in srgb, var(--title) 50%, transparent), 4px 4px 0 var(--bg-deep); letter-spacing:.04em; } .theme-nebulark .hero .title span { animation:waveLetter 2.6s ease-in-out infinite; } @keyframes waveLetter { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} } .theme-nebulark h2 { text-shadow:0 0 18px color-mix(in srgb, var(--h2col) 35%, transparent); } .theme-nebulark .hero .tagline { font-family:var(--px); font-size:clamp(9px,1.7vw,13px); line-height:2.1; } .theme-nebulark .nav .brand { font-size:12px; } .theme-nebulark .nav .links a { font-size:10px; } .theme-nebulark .game-card, .theme-nebulark .perso, .theme-nebulark .feat, .theme-nebulark .auri-bar, .theme-nebulark .big-quote { border-width:3px; box-shadow:6px 6px 0 var(--bg-deep); } .theme-nebulark .cta { border:3px solid var(--white); box-shadow:0 0 22px color-mix(in srgb, var(--cta-bg) 50%, transparent), 5px 5px 0 var(--bg-deep); } .theme-nebulark .feat h3, .theme-nebulark .perso h3 { font-size:11px; line-height:1.9; } .theme-nebulark .game-card h3 { font-size:13px; line-height:1.7; } .theme-nebulark .contrat li { font-family:var(--px); font-size:clamp(9px,1.6vw,12px); line-height:2.2; border-bottom-style:dashed; } .theme-nebulark .contrat li::before, .theme-nebulark .contrat li b { color:var(--green); } .theme-nebulark .contrat li::before { text-shadow:0 0 12px var(--green); } /* scanlines CRT, uniquement Nebulark */ .theme-nebulark::after { content:""; position:fixed; inset:0; z-index:50; pointer-events:none; background:repeating-linear-gradient(to bottom, transparent 0 3px, rgba(6,6,20,.16) 3px 4px); mix-blend-mode:multiply; } /* ============================================================ SKIN EMPIRE — art déco : papier, filets fins, laiton gravé ============================================================ */ .theme-empire .hero .title { text-transform:uppercase; letter-spacing:.06em; text-shadow:0 2px 0 rgba(0,0,0,.4); } .theme-empire h2 { text-transform:uppercase; letter-spacing:.05em; } /* grille de plan + grain papier */ .theme-empire::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.06; background-image: linear-gradient(color-mix(in srgb, var(--accent) 60%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, transparent) 1px, transparent 1px); background-size:44px 44px; } .theme-empire .game-card, .theme-empire .perso, .theme-empire .feat, .theme-empire .phone, .theme-empire .shots-land figure { box-shadow:0 12px 30px rgba(0,0,0,.5); } /* double filet art-déco sous les titres de section */ .theme-empire h2 { border-bottom:2px solid var(--accent); padding-bottom:12px; box-shadow:0 3px 0 -1px color-mix(in srgb, var(--accent) 45%, transparent); } .theme-empire .big-quote { font-style:italic; border-left:4px solid var(--accent); } .theme-empire .auri-face { border-radius:50%; } .theme-empire .cta, .theme-empire .support .mail { letter-spacing:.05em; } /* ============================================================ SKIN ESSAI PRESSE — motorsport : soleil, vitesse, bitume ============================================================ */ .theme-crank .hero .title { text-transform:uppercase; letter-spacing:.01em; font-size:clamp(46px,11vw,110px); text-shadow:0 4px 0 rgba(0,0,0,.35); } .theme-crank h2, .theme-crank .hero .kicker { text-transform:uppercase; } /* ciel → mer derrière tout (surcharge le dégradé de base sur body::before) */ .theme-crank::before { background: radial-gradient(60% 40% at 78% 12%, rgba(255,197,49,.35), transparent 60%), linear-gradient(180deg, #17324a 0%, #0c1420 46%, #070d16 100%); } /* bandes de vitesse animées, uniquement Essai Presse */ .theme-crank::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05; background:repeating-linear-gradient(115deg, transparent 0 60px, var(--accent) 60px 62px); animation:speedLines 6s linear infinite; } @keyframes speedLines { from{background-position:0 0;} to{background-position:240px 0;} } .theme-crank .hero .title span { animation:none; } .theme-crank .game-card:hover, .theme-crank .perso:hover, .theme-crank .feat:hover { transform:translateY(-6px) skewX(-1.5deg); } .theme-crank .big-quote { border-left:6px solid var(--accent); font-style:italic; } .theme-crank .cta { text-transform:uppercase; } /* ============================================================ HUB (sans thème) — sobre : filet léger, pas de pixel ============================================================ */ body:not([class]) .hero .title { text-shadow:0 6px 30px rgba(0,0,0,.5); } body:not([class]) h2 { text-transform:uppercase; letter-spacing:.04em; } /* ================= RESPONSIVE ================= */ @media (max-width:640px){ body { font-size:17px; } section { padding:66px 18px; } .auri-bar { flex-direction:column; text-align:center; } .captures .phones { gap:16px; } .phone { flex-basis:200px; } .hero .hero-icon { width:94px; height:94px; } } /* ================= MOUVEMENT RÉDUIT ================= */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after { animation:none !important; transition:none !important; } .reveal { opacity:1; transform:none; } }