/* ========================================================================== ROM 90 — site "galaxy edition" Bleu nuit, ciel étoilé, fenêtre du logiciel inclinée en 3D derrière le texte du hero avec un halo électrique animé, et un fond dont la teinte évolue au fur et à mesure qu'on descend dans la page. NOTE PERFORMANCE : aucun filter:blur() ni backdrop-filter n'est utilisé ici. Les halos sont des dégradés radiaux (rasterisés une fois) et les animations ne touchent que transform et opacity, qui sont composées par le GPU. ========================================================================== */ :root{ --bg: #03070f; /* bleu nuit, tres sombre */ --line: rgba(150,190,255,.13); --line-strong: rgba(150,190,255,.26); --ink: #ffffff; --grey-100: #e6eeff; --grey-300: #a9b8d4; --grey-500: #6f7d9c; --blue-bright: #4da3ff; --blue-deep: #1f5fd0; --blue-soft: #7cc2ff; --shell: 1240px; --radius: 14px; --ease: cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{ box-sizing:border-box; } /* Le degrade est porte par , pas par : quand a un fond uni et que est en overflow-x:hidden, le fond du body s'arrete avant la barre de defilement et laisse une bande sombre sur la droite. */ html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h, 106px) + 18px); background-color:var(--bg); background-image:linear-gradient(180deg, #03070f 0%, #050e1f 8%, #07142b 18%, #09132e 28%, #0e1131 38%, #151036 47%, #1d113d 56%, #261145 65%, #2d104c 73%, #240c3a 82%, #150722 91%, #08030e 100%); background-repeat:no-repeat; } /* Barre de defilement discrete : la piste reste transparente pour laisser passer le degrade de la page, sinon on voit une bande sombre a droite. */ html{ scrollbar-width:thin; scrollbar-color:rgba(150,190,255,.38) transparent; } ::-webkit-scrollbar{ width:12px; height:12px; } ::-webkit-scrollbar-track{ background:transparent; } ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg, rgba(160,200,255,.5), rgba(110,150,220,.34)); background-clip:content-box; border:3px solid transparent; border-radius:99px; } ::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg, rgba(190,220,255,.7), rgba(140,180,240,.5)); background-clip:content-box; } ::-webkit-scrollbar-corner{ background:transparent; } body{ margin:0; color:var(--ink); font-family:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; background:transparent; } img,video{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } h1,h2,h3{ margin:0; line-height:1.1; } p{ margin:0; } ul{ margin:0; padding:0; list-style:none; } .kicker{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11.5px; letter-spacing:.28em; font-weight:700; color:var(--accent, var(--blue-soft)); margin-bottom:16px; } /* ========================================================================== Ciel étoilé (trois textures répétées, seule l'opacité est animée) ========================================================================== */ .sky{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; } /* Trois textures d'etoiles superposees, et c'est tout : aucune animation. Il y avait auparavant un scintillement, une derive lente, cinq trainees lumineuses et un fondu au fil du defilement. Sur un calque fixe qui couvre tout l'ecran, chacun de ces effets oblige le navigateur a retravailler la totalite de la surface visible en continu — c'est ce qui rendait le site poussif sous Firefox. Un ciel peint une fois pour toutes ne coute rien. */ .stars{ position:absolute; inset:0; background-repeat:repeat; } .stars-far{ background-image:url('assets/stars/stars-far.png'); background-size:1400px 1400px; opacity:.8; } .stars-mid{ background-image:url('assets/stars/stars-mid.png'); background-size:1000px 1000px; opacity:.85; } .stars-near{ background-image:url('assets/stars/stars-near.png'); background-size:900px 900px; opacity:.9; } main, .nav, .foot{ position:relative; z-index:1; } /* ========================================================================== En-tête à deux barres ========================================================================== */ .nav{ position:fixed; top:0; left:0; right:0; z-index:60; } .nav-top{ position:relative; background: /* la lueur violette, plus dense au centre et qui s'eteint sur les bords */ radial-gradient(ellipse 62% 220% at 50% 108%, rgba(146,72,255,.13) 0%, rgba(120,58,225,.09) 42%, rgba(96,48,190,.04) 70%, rgba(96,48,190,0) 100%), linear-gradient(180deg, rgba(24,10,44,.94) 0%, rgba(3,8,20,.92) 100%); border-bottom:1px solid rgba(178,132,255,.20); } /* les fines lignes facon ecran cathodique, posees par-dessus la lueur */ .nav-top::after{ content:''; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(180deg, rgba(198,158,255,.048) 0px, rgba(198,158,255,.048) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px); } /* le contenu passe au-dessus des deux calques */ .nav-top .nav-row{ position:relative; z-index:1; } .nav-sub{ background:rgba(8,20,46,.90); border-bottom:1px solid rgba(150,190,255,.12); box-shadow:0 1px 0 rgba(77,163,255,.16); } .nav.is-stuck .nav-top{ background: radial-gradient(ellipse 62% 220% at 50% 108%, rgba(146,72,255,.15) 0%, rgba(120,58,225,.10) 42%, rgba(96,48,190,.045) 70%, rgba(96,48,190,0) 100%), linear-gradient(180deg, rgba(24,10,44,.98) 0%, rgba(3,8,20,.98) 100%); } .nav.is-stuck .nav-sub{ background:rgba(8,20,46,.97); } .nav-row{ max-width:var(--shell); margin:0 auto; padding:0 28px; display:flex; align-items:center; gap:24px; } .nav-top .nav-row{ min-height:58px; } .nav-sub .nav-row{ min-height:42px; } .nav-brand{ display:flex; align-items:center; gap:11px; } .nav-brand img{ width:30px; } .nav-brand span{ font-weight:900; letter-spacing:.16em; font-size:14px; white-space:nowrap; } .nav-actions{ display:flex; align-items:center; gap:12px; margin-left:auto; } .nav-ghost{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--grey-300); border:1px solid var(--line); border-radius:999px; padding:7px 15px; transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease); } .nav-ghost img{ width:16px; } /* le don, aux couleurs de PayPal */ .nav-donate{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:800; color:#ffffff; background:linear-gradient(135deg, #003087 0%, #0070ba 55%, #009cde 100%); border:1px solid rgba(160,210,255,.35); border-radius:999px; padding:7px 16px; white-space:nowrap; box-shadow:0 6px 18px rgba(0,112,186,.38), inset 0 1px 0 rgba(255,255,255,.28); transition:transform .22s var(--ease), box-shadow .22s var(--ease), filter .22s var(--ease); } .nav-donate img{ width:15px; height:auto; } .nav-donate:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,140,222,.5), inset 0 1px 0 rgba(255,255,255,.36); filter:brightness(1.06); } .nav-ghost:hover{ color:var(--ink); border-color:var(--line-strong); background:rgba(120,180,255,.10); } .nav-links{ display:flex; gap:26px; } .nav-links a{ font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--grey-300); padding:11px 0; position:relative; transition:color .2s var(--ease); } .nav-links a::after{ content:''; position:absolute; left:0; right:100%; bottom:0; height:2px; background:linear-gradient(90deg,var(--blue-bright),var(--blue-soft)); transition:right .28s var(--ease); } .nav-links a:hover{ color:var(--ink); } .nav-links a:hover::after{ right:0; } .nav-note{ margin-left:auto; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10.5px; letter-spacing:.14em; color:var(--grey-500); white-space:nowrap; } /* ========================================================================== Boutons ========================================================================== */ .btn{ display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(135deg, #e8a51f 0%, #f5c542 48%, #ffd97a 100%); color:#2a1a02; font-weight:900; letter-spacing:.07em; text-transform:uppercase; border-radius:999px; border:0; box-shadow:0 10px 30px rgba(240,180,50,.40), inset 0 1px 0 rgba(255,255,255,.55); transition:transform .22s var(--ease), box-shadow .22s var(--ease), filter .22s var(--ease); } .btn:hover{ transform:translateY(-2px); box-shadow:0 14px 40px rgba(255,205,90,.55), inset 0 1px 0 rgba(255,255,255,.65); filter:brightness(1.08); } .btn:active{ transform:translateY(0); } .btn-sm{ font-size:11.5px; padding:9px 18px; } .btn-lg{ font-size:17px; padding:19px 46px; } /* ========================================================================== HERO ========================================================================== */ .hero{ /* --tilt : l'inclinaison de la fenetre. Plus la valeur est grande, plus l'image est couchee, donc plus elle parait large et basse (facon GOG). --win-w : sa largeur. Les deux servent a la fenetre, au lisere et aux deux faisceaux, qui doivent rester parfaitement superposes. */ --tilt:34deg; --win-w:min(900px, 51vw); position:relative; min-height:100vh; padding:calc(var(--nav-h, 100px) + 28px) 28px clamp(70px,11vh,130px); overflow:hidden; text-align:center; isolation:isolate; } .hero-scene{ position:absolute; inset:0; z-index:0; perspective:1600px; perspective-origin:50% 0%; } /* grand halo diffus — dégradé radial, pas de filtre */ .hero-halo{ position:absolute; top:calc(var(--win-top, 240px) - 150px); left:50%; width:min(1150px, 82vw); height:min(880px, 82vh); transform:translateX(-50%); background:radial-gradient(ellipse 42% 40% at 50% 44%, rgba(46,103,248,.52) 0%, rgba(40,90,228,.32) 26%, rgba(34,78,208,.15) 46%, rgba(30,72,196,.04) 64%, rgba(30,72,196,0) 78%); will-change:transform, opacity; animation:pulse 4.5s ease-in-out infinite alternate; } @keyframes pulse{ from{ opacity:.7; transform:translateX(-50%) scale(.97); } to { opacity:1; transform:translateX(-50%) scale(1.05); } } /* liseré collé aux bords, qui bat */ .hero-rim{ position:absolute; top:var(--win-top, clamp(240px, 34vh, 330px)); left:50%; width:var(--win-w); aspect-ratio:16 / 9; border-radius:9px; transform:translateX(-50%) rotateX(var(--tilt)); transform-origin:50% 0%; box-shadow: 0 0 18px 2px rgba(214,228,255,.9), 0 0 48px 8px rgba(72,126,255,.82), 0 0 130px 28px rgba(34,86,222,.5); will-change:opacity; animation:rimflicker 3.6s linear infinite; } /* un grésillement irrégulier : c'est ce qui fait "électrique" plutôt que "respiration". Les paliers courts sont les sautes de courant. */ @keyframes rimflicker{ 0% { opacity:.45 } 5% { opacity:1 } 8% { opacity:.55 } 11% { opacity:.95 } 16% { opacity:.5 } 30% { opacity:.85 } 38% { opacity:.5 } 44% { opacity:1 } 47% { opacity:.62 } 51% { opacity:1 } 60% { opacity:.48 } 72% { opacity:.92 } 76% { opacity:.55 } 88% { opacity:.8 } 100% { opacity:.45 } } /* Le bas de l'image s'efface grace a ce calque, cale exactement sur la fenetre. C'etait au depart un mask-image applique a la fenetre elle-meme, mais masquer un element qui contient une video la prive de l'acceleration materielle : le site devenait impraticable sous Firefox. Un degrade opaque donne le meme rendu pour un cout negligeable. */ .hero-fade{ position:absolute; z-index:1; pointer-events:none; top:var(--win-top, clamp(240px, 34vh, 330px)); left:50%; width:var(--win-w); aspect-ratio:16 / 9; transform:translateX(-50%) rotateX(var(--tilt)); transform-origin:50% 0%; border-radius:9px; background:linear-gradient(180deg, rgba(5,10,24,0) 68%, rgba(5,10,24,.55) 84%, rgba(5,10,24,.92) 95%, #050a18 100%); } .hero-window{ position:absolute; top:var(--win-top, clamp(240px, 34vh, 330px)); left:50%; width:var(--win-w); aspect-ratio:16 / 9; /* la fenetre est en 16/9, comme la video */ border-radius:9px; overflow:hidden; transform:translateX(-50%) rotateX(var(--tilt)); transform-origin:50% 0%; border:1px solid rgba(188,210,255,.9); box-shadow: 0 0 0 1px rgba(112,154,255,.9), 0 0 14px 0 rgba(46,103,248,.95), 0 0 44px 5px rgba(32,80,214,.8); } .hero-window img{ width:100%; height:100%; display:block; object-fit:cover; } .hero-window video{ width:100%; height:100%; display:block; object-fit:cover; } /* l'éclair qui balaie la fenêtre — animé en transform (composé par le GPU) */ .hero-window::after{ content:''; position:absolute; top:-30%; bottom:-30%; left:0; width:22%; background:linear-gradient(100deg, rgba(182,208,255,0) 0%, rgba(182,208,255,.10) 38%, rgba(226,236,255,.34) 50%, rgba(182,208,255,.10) 62%, rgba(182,208,255,0) 100%); transform:translateX(-200%); animation:sweep 6s ease-in-out infinite; pointer-events:none; } @keyframes sweep{ 0%,55% { transform:translateX(-200%); opacity:0; } 60% { opacity:1; } 95%,100%{ transform:translateX(520%); opacity:0; } } /* fines lignes façon écran cathodique */ .hero-scan{ position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(180deg, rgba(164,196,255,.05) 0px, rgba(164,196,255,.05) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px); } /* voile : lisibilité du texte + fondu du bas de la fenêtre dans la page */ .hero-veil{ position:absolute; inset:0; background: radial-gradient(ellipse 52% 30% at 50% 25%, rgba(3,8,20,.50), rgba(3,8,20,0) 72%), radial-gradient(ellipse 46% 25% at 50% 76%, rgba(2,6,15,.84), rgba(2,6,15,0) 70%), linear-gradient(180deg, rgba(5,12,28,.50) 0%, rgba(5,12,28,.02) 24%, rgba(5,12,28,.10) 46%, rgba(5,12,28,.52) 68%, rgba(5,12,28,.88) 85%, #06102a 100%); } .hero-content{ position:relative; z-index:2; max-width:900px; margin:0 auto; } /* le logo est desormais le seul titre visible du hero : il est plus grand, et c'est lui qui sert de repere pour placer la fenetre inclinee. */ .hero-welcome{ max-width:none; margin:0 auto; font-size:clamp(21px,2.6vw,34px); text-wrap:balance; font-weight:900; letter-spacing:-.01em; line-height:1.12; background:linear-gradient(180deg,#ffffff 28%, #b9c6e4 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; text-shadow:0 4px 40px rgba(0,0,0,.6); } /* le titre reste dans le code pour les lecteurs d'ecran et les moteurs */ .sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } .tagline{ margin-top:16px; font-size:clamp(18px,2.4vw,29px); font-weight:300; color:var(--grey-100); text-shadow:0 3px 26px rgba(0,0,0,.85); } .hero-note{ margin:var(--note-gap, clamp(215px,33vh,340px)) auto 0; max-width:660px; font-size:clamp(15px,1.55vw,18px); font-weight:400; color:#f2f7ff; text-shadow:0 2px 16px rgba(0,0,0,1), 0 0 34px rgba(0,0,0,.95); } .hero-content .btn-lg{ margin-top:34px; } .req{ margin-top:20px; font-size:12.5px; color:var(--grey-500); line-height:1.7; text-shadow:0 2px 14px rgba(0,0,0,.9); } .req span{ opacity:.85; } /* ========================================================================== Une couleur d'accent par section — comme sur GOG, chaque page a la sienne. Elle habille le sur-titre, les icones et les intitules des listes. ========================================================================== */ #jeux { --accent:#45d9ff; } /* cyan */ #parties { --accent:#3ee6a5; } /* vert menthe */ #controles{ --accent:#d9485c; } /* rouge bordeaux */ #profil { --accent:#ffd24a; } /* jaune dore */ #faq { --accent:#ffc46b; } /* ambre */ /* ========================================================================== Chapitres — base commune ========================================================================== */ .chapter{ max-width:var(--shell); margin:0 auto; padding:130px 28px 0; } .chapter-head{ text-align:center; max-width:720px; margin:0 auto; } .chapter-head h2{ font-size:clamp(34px,4.9vw,58px); font-weight:900; letter-spacing:-.02em; background:linear-gradient(180deg,#ffffff 25%, #a8bde0 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } .chapter-head p{ margin-top:14px; font-size:clamp(15px,1.5vw,18px); color:var(--grey-300); font-weight:300; } /* le sur-titre garde la couleur de la section, meme dans un chapter-head */ .chapter-head p.kicker{ margin-top:0; font-weight:700; font-size:11.5px; color:var(--accent, var(--blue-soft)); } .shot{ position:relative; z-index:2; margin:0; border-radius:12px; overflow:hidden; background:#050d1e; transform:rotateX(15deg); transform-origin:50% 100%; box-shadow: 0 0 0 1.5px rgba(170,215,255,.5), 0 0 24px 2px rgba(90,175,255,.5), 0 40px 90px -30px rgba(0,0,0,.9); } .shot img,.shot video{ width:100%; height:auto; } .shot::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 20%); } .shot-glow{ position:absolute; z-index:1; left:2%; right:2%; top:2%; bottom:-14%; background:radial-gradient(ellipse 46% 46% at 50% 50%, rgba(70,150,255,.42) 0%, rgba(70,150,255,.22) 34%, rgba(70,150,255,.07) 58%, rgba(70,150,255,0) 76%); } .shot-glow-cool{ background:radial-gradient(ellipse 46% 46% at 50% 50%, rgba(125,195,255,.38) 0%, rgba(125,195,255,.20) 34%, rgba(125,195,255,.06) 58%, rgba(125,195,255,0) 76%); } /* --- rangée de titres ----------------------------------------------------- */ .titles{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:70px; } .titles-4{ grid-template-columns:repeat(4,1fr); } .tile{ display:flex; flex-direction:column; align-items:center; gap:15px; text-align:center; padding:26px 16px; border:1px solid rgba(120,175,255,.26); border-radius:var(--radius); background:linear-gradient(180deg, rgba(28,66,132,.58), rgba(16,38,80,.30)); box-shadow:inset 0 1px 0 rgba(182,208,255,.10); transition:border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease); } .tile:hover{ border-color:rgba(120,194,255,.7); transform:translateY(-3px); background:linear-gradient(180deg, rgba(44,96,180,.72), rgba(24,56,112,.42)); } .tile h3{ font-size:17px; font-weight:900; letter-spacing:.01em; color:#eef5ff; } .ico{ display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:44px; height:44px; border-radius:12px; border:1px solid rgba(120,180,255,.30); background:linear-gradient(180deg, rgba(77,163,255,.28), rgba(77,163,255,.05)); color:var(--accent, var(--blue-soft)); } .ico svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } /* ========================================================================== 1. VOS JEUX — l'étagère de grandes boîtes ========================================================================== */ /* ========================================================================== 2 & 3. SECTIONS EN DEUX COLONNES — visuels plus grands ========================================================================== */ .chapter-split{ padding-top:150px; } .split{ --bleed:clamp(0px, calc((100vw - 1240px) / 2 + 20px), 110px); display:grid; grid-template-columns:minmax(0,.76fr) minmax(0,1.6fr); gap:50px; align-items:center; } .split-reverse{ grid-template-columns:minmax(0,1.6fr) minmax(0,.76fr); } .split-reverse .split-copy{ order:2; } .split-reverse .split-media{ order:1; } .split-copy h2{ font-size:clamp(31px,4.3vw,52px); font-weight:900; letter-spacing:-.02em; background:linear-gradient(180deg,#ffffff 25%, #a8bde0 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } .split-lead{ margin-top:16px; font-size:17px; color:var(--grey-300); font-weight:300; } /* Les listes des sections : pas de cadre, une icone au trait a gauche, un intitule colore et une ligne d'explication dessous. */ .feat-list{ margin-top:34px; display:grid; gap:22px; } .feat-list-tight{ margin-top:26px; gap:18px; } .feat-list li{ display:flex; align-items:center; gap:18px; padding:0; border:0; background:none; } .feat-list li .ico{ width:38px; height:38px; margin-top:0; border:0; border-radius:0; background:none; color:var(--accent, var(--blue-bright)); transition:color .25s var(--ease), transform .25s var(--ease); } .feat-list li .ico svg{ width:38px; height:38px; stroke-width:1.3; } .feat-list li:hover .ico{ color:#ffffff; transform:translateY(-2px); } .feat-list h3{ font-size:23px; font-weight:700; color:var(--accent, var(--blue-soft)); transition:color .25s var(--ease); } .feat-list li:hover h3{ color:#ffffff; } .split-media{ position:relative; perspective:1600px; margin-right:calc(-1 * var(--bleed)); } .split-reverse .split-media{ margin-right:0; margin-left:calc(-1 * var(--bleed)); } .shot-right{ transform:rotateY(-7deg) rotateX(3deg); transform-origin:100% 50%; } .shot-left { transform:rotateY(7deg) rotateX(3deg); transform-origin:0% 50%; } /* ========================================================================== 4. VOTRE PROFIL ========================================================================== */ /* le mot d'introduction, centre sous la video */ /* ========================================================================== Moteurs ========================================================================== */ .engines{ margin-top:64px; } .engine-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } .engine{ position:relative; display:flex; gap:20px; align-items:center; padding:22px 26px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg, rgba(140,190,255,.07), rgba(140,190,255,.02)); transition:border-color .3s var(--ease), transform .3s var(--ease); } .engine:hover{ border-color:rgba(77,163,255,.5); transform:translateY(-3px); } .engine img{ width:54px; height:54px; object-fit:contain; border-radius:10px; flex:0 0 auto; } .engine h3{ font-size:19px; font-weight:900; } .engine-kicker{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10.5px; letter-spacing:.2em; color:var(--blue-soft); margin-bottom:5px; } .engine-arrow{ position:absolute; top:20px; right:22px; color:var(--grey-500); font-size:15px; transition:color .25s var(--ease), transform .25s var(--ease); } .engine:hover .engine-arrow{ color:var(--blue-soft); transform:translate(2px,-2px); } /* ========================================================================== Bandeau de jaquettes ========================================================================== */ .marquee-wrap{ margin-top:16px; } .marquee{ position:relative; overflow:hidden; padding:26px 0 8px; } /* Le fondu des deux bords etait un mask-image pose sur le bandeau. Comme la piste defile sans arret dessous, le navigateur devait recalculer ce masque en continu sur toute la largeur de l'ecran. Deux degrades poses aux extremites font la meme chose pour rien. */ .marquee::before, .marquee::after{ content:''; position:absolute; top:0; bottom:0; width:12%; z-index:2; pointer-events:none; } .marquee::before{ left:0; background:linear-gradient(90deg, #050c1c 10%, rgba(5,12,28,0) 100%); } .marquee::after{ right:0; background:linear-gradient(270deg, #050c1c 10%, rgba(5,12,28,0) 100%); } .marquee-track{ display:flex; gap:34px; width:max-content; will-change:transform; animation:slide 70s linear infinite; } @keyframes slide{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} } /* -------------------------------------------------------------------------- Les jaquettes en grandes boites, comme dans le logiciel. Meme construction que ROM 90 : une scene qui porte la perspective ET l'ombre portee (un filter sur la coque ferait retomber son transform-style en flat et ecraserait la boite), une coque en preserve-3d, la tranche et la face du dessus en pseudo-elements. -------------------------------------------------------------------------- */ .bb{ margin:0; flex:0 0 auto; width:152px; padding-left:20px; } .bb-stage{ display:block; perspective:1100px; perspective-origin:32% 6%; /* PAS de filter:drop-shadow ici. C'est un flou, et il y a 24 jaquettes qui defilent en permanence : le navigateur refloutait 24 ombres a chaque image. L'ombre est passee en box-shadow sur la coque, qui est un rectangle plein — rendu tres proche, cout negligeable. */ } .bb-shell{ --bb-depth:29%; --spine-base:#3a3f52; --spine-fold:#5c6274; --spine-back:#1a1c24; --spine-top:#474c5e; --spine-ink:#f4f1ea; position:relative; display:block; aspect-ratio:4 / 5.35; transform-style:preserve-3d; transform-origin:0% 50%; transform:rotateX(-9deg) rotateY(21deg); box-shadow:9px 13px 18px rgba(0,0,0,.5); transition:transform .3s var(--ease), box-shadow .3s var(--ease); } /* la tranche : la face de gauche, avec le titre a la verticale */ .bb-shell::before{ content:attr(data-spine); position:absolute; left:0; top:0; width:var(--bb-depth); height:100%; box-sizing:border-box; padding:12% 0; display:flex; align-items:center; justify-content:center; transform-origin:left center; transform:rotateY(-90deg) translateX(-100%); background: radial-gradient(ellipse 60% 8% at 50% 4%, rgba(255,255,255,.34), transparent 72%), radial-gradient(ellipse 60% 9% at 50% 97%, rgba(255,255,255,.28), transparent 72%), linear-gradient(90deg, rgba(255,255,255,.22), transparent 16%, transparent 84%, rgba(255,255,255,.3)), linear-gradient(90deg, rgba(0,0,0,.34), rgba(255,255,255,0) 46%, rgba(255,255,255,.16)), linear-gradient(90deg, var(--spine-back), var(--spine-base) 58%, var(--spine-fold)); color:var(--spine-ink); writing-mode:vertical-rl; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font:800 7px/1 'JetBrains Mono','Courier New',monospace; letter-spacing:.05em; text-transform:uppercase; text-shadow:0 1px 1px rgba(0,0,0,.5); } /* la face du dessus : c'est elle qui donne l'epaisseur */ .bb-shell::after{ content:''; position:absolute; left:0; top:0; width:100%; height:0; padding-bottom:var(--bb-depth); transform-origin:center top; transform:rotateX(90deg) translateY(-100%); background: radial-gradient(ellipse 10% 70% at 3% 50%, rgba(255,255,255,.3), transparent 72%), radial-gradient(ellipse 10% 70% at 97% 50%, rgba(255,255,255,.24), transparent 72%), linear-gradient(180deg, var(--spine-top), var(--spine-back)); box-shadow:inset 0 0 0 1px rgba(0,0,0,.45); } .bb-cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0; } .bb:hover .bb-shell{ transform:rotateX(-9deg) rotateY(21deg) translateY(-8px) scale(1.04); } .bb:hover .bb-shell{ box-shadow:14px 20px 26px rgba(0,0,0,.6); } .bb figcaption{ margin-top:16px; display:flex; flex-direction:column; gap:2px; } .bb figcaption strong{ font-size:12.5px; font-weight:900; color:#eef5ff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bb figcaption span{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:9.5px; letter-spacing:.08em; color:var(--grey-500); } @media (max-width:620px){ .bb{ width:118px; padding-left:15px; } .marquee-track{ gap:24px; } } /* ========================================================================== CTA final + pied de page ========================================================================== */ .final{ position:relative; overflow:hidden; margin-top:84px; padding:66px 28px 74px; text-align:center; border-top:1px solid var(--line); background: radial-gradient(ellipse 60% 78% at 50% 118%, rgba(186,96,255,.24), rgba(186,96,255,0) 68%), linear-gradient(180deg, rgba(10,4,16,0) 0%, rgba(38,14,64,.55) 55%, rgba(50,18,82,.85) 100%); } .final::after{ content:''; position:absolute; left:10%; right:10%; bottom:0; height:1px; background:linear-gradient(90deg, transparent, rgba(214,166,255,.9), transparent); } /* le veilleur a la lanterne, pose au bord bas-gauche du bloc final */ .final-figure{ position:absolute; z-index:0; left:clamp(-10px, 3vw, 90px); bottom:28px; width:clamp(130px, 14vw, 215px); height:auto; pointer-events:none; /* pas de grosse ombre portee : c'est elle qui dessinait un halo sombre autour du personnage et donnait l'impression d'un fond mal decoupe. */ filter:drop-shadow(0 10px 16px rgba(0,0,0,.45)); -webkit-mask-image:linear-gradient(180deg, #000 94%, rgba(0,0,0,.55) 99%, transparent 100%); mask-image:linear-gradient(180deg, #000 94%, rgba(0,0,0,.55) 99%, transparent 100%); } /* le dur a cuire, en vis-a-vis du veilleur : meme traitement, mais colle au bord droit et retourne horizontalement pour qu'il regarde vers le centre. */ .final-duke{ left:auto; right:clamp(-10px, 3vw, 80px); bottom:22px; width:clamp(165px, 18vw, 275px); transform:scaleX(-1); /* le fondu par defaut ne fait que 6 % de la hauteur : sur lui, cadre plus haut, ca coupait les jambes net. Ici il s'efface sur tout le bas. */ -webkit-mask-image:linear-gradient(180deg, #000 46%, rgba(0,0,0,.88) 62%, rgba(0,0,0,.55) 76%, rgba(0,0,0,.22) 88%, transparent 100%); mask-image:linear-gradient(180deg, #000 46%, rgba(0,0,0,.88) 62%, rgba(0,0,0,.55) 76%, rgba(0,0,0,.22) 88%, transparent 100%); } /* la lueur de sa lanterne, posee derriere lui */ .final::before{ content:''; position:absolute; z-index:0; pointer-events:none; left:clamp(-30px, 7vw, 240px); bottom:56px; width:clamp(240px, 24vw, 420px); height:clamp(240px, 24vw, 420px); transform:translate(-28%, 22%); background:radial-gradient(circle at 50% 50%, rgba(255,196,120,.24) 0%, rgba(255,172,84,.11) 34%, rgba(255,160,70,0) 68%); } .final-inner{ position:relative; z-index:1; max-width:640px; margin:0 auto; } .final-logo{ width:60px; margin:0 auto 16px; } .final h2{ font-size:clamp(28px,3.8vw,45px); font-weight:900; margin-bottom:24px; } .final .req{ margin-top:15px; text-shadow:none; color:#d7c6ee; } .foot{ border-top:1px solid var(--line); background:linear-gradient(180deg, rgba(50,18,82,.9) 0%, rgba(6,3,11,.97) 100%); } .foot-inner{ max-width:var(--shell); margin:0 auto; padding:32px 28px 40px; display:grid; gap:18px; } .foot-brand{ display:flex; align-items:center; gap:13px; } .foot-brand img{ width:36px; } .foot-brand strong{ display:block; font-weight:900; letter-spacing:.12em; font-size:13.5px; } .foot-brand small{ color:var(--grey-500); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; } .foot-links{ display:flex; flex-wrap:wrap; gap:24px; } .foot-links a{ font-size:13px; color:var(--grey-300); transition:color .2s var(--ease); } .foot-links a:hover{ color:#cba6ff; } .foot-legal{ font-size:12px; color:var(--grey-500); max-width:820px; line-height:1.7; } /* ========================================================================== Apparitions ========================================================================== */ .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .reveal.is-in{ opacity:1; transform:none; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width:1080px){ .titles{ grid-template-columns:repeat(3,1fr); } .titles-4{ grid-template-columns:repeat(2,1fr); } .nav-links{ gap:18px; } .nav-links a{ font-size:11.5px; } .nav-note{ display:none; } .split, .split-reverse{ grid-template-columns:1fr; gap:44px; } .split-reverse .split-copy, .split-reverse .split-media{ order:0; } .split-media, .split-reverse .split-media{ margin:0; } .shot-right, .shot-left{ transform:rotateX(10deg); transform-origin:50% 100%; } } @media (max-width:860px){ .engine-grid{ grid-template-columns:1fr; } .chapter{ padding-top:100px; } .chapter-split{ padding-top:110px; } .hero{ --tilt:28deg; --win-w:min(770px, 78vw); } } @media (max-width:620px){ .feat-list{ gap:22px; } .feat-list li{ gap:14px; } .feat-list li .ico, .feat-list li .ico svg{ width:30px; height:30px; } .feat-list h3{ font-size:19px; } .titles, .titles-4{ grid-template-columns:repeat(2,1fr); } .nav-ghost, .nav-donate{ display:none; } .nav-row{ padding:0 18px; } .nav-links{ overflow-x:auto; scrollbar-width:none; gap:18px; -webkit-overflow-scrolling:touch; } .nav-links::-webkit-scrollbar{ display:none; } .nav-links a{ white-space:nowrap; flex:0 0 auto; } .hero{ padding:calc(var(--nav-h, 150px) + 24px) 20px 60px; } .hero{ --tilt:24deg; --win-w:96vw; } /* le halo dore prend trop de place sur un telephone */ .hero-halo{ width:min(700px, 96vw); height:min(560px, 52vh); } .hero-note{ margin-top:var(--note-gap, clamp(180px,28vh,240px)); } .chapter, .engines{ padding-left:20px; padding-right:20px; } .btn-lg{ font-size:14px; padding:16px 26px; width:100%; } .final-figure{ display:none; } .marquee-track img{ height:120px; } .tile{ padding:20px 12px; } .tile h3{ font-size:15px; } } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .marquee-track, .hero-halo, .hero-rim, .hero-window::after{ animation:none; } .reveal{ opacity:1; transform:none; } } /* ========================================================================== Mise en veille : dès que le hero ou le bandeau sortent de l'écran, on coupe leurs animations. Rien ne tourne dans le vide pendant qu'on lit la page. ========================================================================== */ .hero.is-off .hero-halo, .hero.is-off .hero-rim, .hero.is-off .hero-window::after{ animation-play-state:paused; } .marquee-wrap.is-off .marquee-track{ animation-play-state:paused; } /* ========================================================================== "Vos jeux" — le fond de section et le bloc "Ajout de ROM" ========================================================================== */ /* le visuel de fond, fondu dans la page par un masque doux */ .chapter{ position:relative; isolation:isolate; } .chapter-bg{ position:absolute; z-index:-1; pointer-events:none; top:0; left:50%; width:100vw; height:clamp(820px, 62%, 1500px); transform:translateX(-50%); /* deux couches : un voile sombre par-dessus la photo, pour que les visuels clairs (la disquette DOOM) ne delavent pas le texte. */ background-image: radial-gradient(ellipse 66% 58% at 50% 42%, rgba(4,8,17,var(--veil-1,.62)) 0%, rgba(4,8,17,var(--veil-2,.86)) 62%, rgba(4,8,17,.96) 100%), var(--bg-img); background-position:center center, var(--bg-pos, center 34%); background-size:cover, cover; background-repeat:no-repeat, no-repeat; opacity:var(--bg-op, .20); -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 42%, #000 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.22) 64%, transparent 84%); mask-image:radial-gradient(ellipse 78% 62% at 50% 42%, #000 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.22) 64%, transparent 84%); } /* une image de fond par section */ #jeux .chapter-bg{ --bg-img:url('assets/backgrounds/chambre-90.webp'); --bg-pos:center 34%; --bg-op:.34; } #parties .chapter-bg{ --bg-img:url('assets/backgrounds/doom-disk.jpg'); --bg-pos:74% 44%; --bg-op:.42; } /* la photo du PC retro est deja sombre : voile leger, sinon on ne voit rien */ #controles .chapter-bg{ --bg-img:url('assets/backgrounds/pc-retro.jpg'); --bg-pos:30% 46%; --bg-op:.55; --veil-1:.36; --veil-2:.78; } @media (max-width:860px){ .chapter-bg{ --bg-op:.22; } } /* le bloc "Ajout de ROM" */ .addrom{ margin-top:58px; } .addrom-title{ font-size:clamp(20px,2.2vw,27px); font-weight:900; margin-bottom:14px; } /* ========================================================================== Adaptation aux tailles d'ecran ========================================================================== */ /* grands ecrans : on laisse le site respirer au lieu de rester coince a 1240 */ @media (min-width:1600px){ :root{ --shell:1400px; } .hero{ --win-w:min(1010px, 51vw); } .tagline{ font-size:clamp(26px,2vw,32px); } } /* tres grands ecrans / 4K : on borne pour ne pas etirer les visuels */ @media (min-width:2100px){ :root{ --shell:1520px; } .hero{ --win-w:1055px; } } /* ecrans peu hauts (portables 768 px, fenetres reduites) : le hero se compacte pour que le bouton reste visible sans defiler */ @media (max-height:840px) and (min-width:861px){ .hero{ padding-top:112px; padding-bottom:56px; --win-w:min(770px, 48vw); } .hero-welcome{ font-size:clamp(20px,2.4vw,30px); } .hero-note{ margin-top:var(--note-gap, clamp(150px,25vh,250px)); font-size:15px; } .hero-content .btn-lg{ margin-top:24px; } .btn-lg{ font-size:15px; padding:16px 38px; } .req{ margin-top:14px; } } @media (max-height:700px) and (min-width:861px){ .hero{ padding-top:100px; --win-w:min(680px, 44vw); } .hero-welcome{ font-size:clamp(19px,2.2vw,27px); } .hero-note{ margin-top:var(--note-gap, clamp(130px,21vh,210px)); } } /* tablettes en largeur intermediaire */ @media (max-width:1280px) and (min-width:1081px){ .chapter{ padding-left:24px; padding-right:24px; } .titles{ gap:14px; } .tile{ padding:22px 12px; } } /* ========================================================================== FAQ — deux colonnes de questions, tres legeres : pas de cadre, juste une pastille devant chaque intitule. Seule la question ouverte prend un fond translucide. Ce sont des

natifs : ca fonctionne sans JavaScript, au clavier, et le Ctrl+F du navigateur trouve les reponses meme fermees. ========================================================================== */ .faq{ max-width:1100px; margin:46px auto 0; display:grid; grid-template-columns:1fr 1fr; gap:6px 54px; align-items:start; } .faq-col{ display:grid; gap:4px; align-content:start; } .faq-item{ border-radius:12px; background:transparent; transition:background .3s var(--ease), box-shadow .3s var(--ease); } .faq-item summary{ position:relative; display:block; padding:13px 16px 13px 34px; cursor:pointer; list-style:none; font-size:15.5px; font-weight:400; line-height:1.45; color:var(--grey-100); transition:color .25s var(--ease); } .faq-item summary::-webkit-details-marker{ display:none; } /* la pastille */ .faq-item summary::before{ content:''; position:absolute; left:14px; top:1.25em; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:var(--accent, var(--blue-bright)); box-shadow:0 0 9px currentColor; transition:background .25s var(--ease), box-shadow .25s var(--ease); } .faq-item summary:hover{ color:#ffffff; } .faq-item summary:hover::before{ background:#ffffff; box-shadow:0 0 12px rgba(190,225,255,.95); } .faq-item summary:focus-visible{ outline:2px solid var(--blue-soft); outline-offset:-3px; border-radius:12px; } /* la question ouverte : un simple voile colore */ .faq-item[open]{ background:linear-gradient(180deg, rgba(120,180,255,.10), rgba(90,150,235,.05)); box-shadow:inset 0 0 0 1px rgba(140,195,255,.14); } .faq-item[open] summary{ color:#ffffff; font-weight:700; } .faq-item p{ padding:0 20px 16px 34px; font-size:14px; font-weight:300; line-height:1.7; color:var(--grey-300); animation:faq-in .28s var(--ease); } .faq-item p code{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12.5px; color:var(--blue-soft); background:rgba(120,180,255,.12); border:1px solid rgba(120,180,255,.2); border-radius:5px; padding:1px 6px; } @keyframes faq-in{ from{ opacity:0 } to{ opacity:1 } } .faq-more{ margin:30px auto 0; text-align:center; font-size:14.5px; color:var(--grey-300); font-weight:300; } .faq-more a{ color:var(--blue-soft); font-weight:700; border-bottom:1px solid rgba(124,194,255,.4); transition:color .2s var(--ease), border-color .2s var(--ease); } .faq-more a:hover{ color:#ffffff; border-color:#ffffff; } @media (max-width:860px){ .faq{ grid-template-columns:1fr; gap:4px; margin-top:34px; } } @media (max-width:620px){ .faq-item summary{ font-size:14.5px; padding:12px 12px 12px 30px; } .faq-item summary::before{ left:12px; } .faq-item p{ padding:0 14px 14px 30px; font-size:13.5px; } } /* ========================================================================== Selecteur de langue et liens du pied de page ========================================================================== */ .lang{ display:flex; align-items:center; gap:6px; margin-left:16px; } .lang-btn{ width:27px; height:19px; padding:0; border:1px solid var(--line); border-radius:4px; background:none; overflow:hidden; cursor:pointer; opacity:.5; line-height:0; transition:opacity .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease); } .lang-btn img{ width:100%; height:100%; object-fit:cover; display:block; } .lang-btn:hover{ opacity:1; border-color:var(--line-strong); transform:translateY(-1px); } .lang-btn:focus-visible{ outline:2px solid var(--blue-soft); outline-offset:2px; } .lang-btn.is-on{ opacity:1; border-color:rgba(124,194,255,.85); box-shadow:0 0 0 1px rgba(124,194,255,.45), 0 0 10px rgba(77,163,255,.45); } .foot-links{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .foot-link{ display:flex; align-items:center; gap:13px; padding:12px 15px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(180deg, rgba(150,190,255,.07), rgba(150,190,255,.02)); transition:border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease); } .foot-link:hover{ border-color:rgba(124,194,255,.55); transform:translateY(-2px); background:linear-gradient(180deg, rgba(124,194,255,.14), rgba(150,190,255,.03)); } .foot-link img{ width:30px; height:30px; object-fit:contain; flex:0 0 auto; border-radius:6px; } .foot-link strong{ display:block; font-size:13.5px; font-weight:900; color:#eef5ff; } .foot-link small{ display:block; font-size:11.5px; color:var(--grey-500); line-height:1.4; } @media (max-width:1080px){ .lang{ margin-left:auto; } } @media (max-width:860px){ .foot-links{ grid-template-columns:repeat(2,1fr); } } @media (max-width:620px){ .foot-links{ grid-template-columns:1fr; } .lang{ gap:5px; margin-left:10px; } .lang-btn{ width:24px; height:17px; } } /* sur telephone, les drapeaux passent sur leur propre ligne : sinon ils grignotent la place des liens de section */ @media (max-width:620px){ .nav-sub .nav-row{ flex-direction:column; align-items:stretch; gap:0; padding-bottom:7px; } /* les liens s'enroulent sur deux lignes centrees : avant, les derniers ("Votre profil", "FAQ") sortaient de l'ecran dans une bande qui defilait horizontalement, ce qui ne se devine pas. */ .nav-links{ width:100%; padding-top:3px; flex-wrap:wrap; justify-content:center; overflow:visible; gap:4px 15px; } .nav-links a{ font-size:11.5px; letter-spacing:.06em; } .nav-note{ display:none; } .lang{ margin:0; justify-content:center; gap:7px; } .lang-btn{ width:26px; height:18px; } } /* ========================================================================== MODE DIAGNOSTIC Ajoute ?test=... a l'adresse pour eteindre un groupe d'effets et voir lequel coute cher. A retirer une fois le reglage trouve. ?test=ciel le ciel etoile ?test=bandeau le bandeau de jaquettes qui defile ?test=fonds les photos de fond des sections ?test=videos toutes les videos ?test=hero tous les effets lumineux du haut ?test=tout tout ce qui precede ========================================================================== */ .test-ciel .sky, .test-tout .sky{ display:none !important; } .test-bandeau .marquee-wrap, .test-tout .marquee-wrap{ display:none !important; } .test-fonds .chapter-bg, .test-tout .chapter-bg{ display:none !important; } .test-videos video, .test-tout video{ display:none !important; } .test-hero .hero-halo, .test-hero .hero-rim, .test-hero .hero-window::after, .test-tout .hero-halo, .test-tout .hero-rim, .test-tout .hero-window::after{ display:none !important; animation:none !important; }