/* ═══ Le site de PokeNeuil ═══════════════════════════════════════════ Une vitrine de logiciel : on y télécharge PokeNeuil et on s'y renseigne. On n'y entre pas — l'application, c'est le programme qu'on installe. L'identité emprunte à remix.run sa mécanique : un fond presque noir, une typographie énorme et serrée, et une PALETTE de couleurs vives employée comme un jeu plutôt qu'une seule couleur de marque. Ce jeu-là existe déjà dans l'univers Pokémon — ce sont les types. Feu, Eau, Plante, Électrik, Psy : cinq accents, un par section, et le site se lit comme un carnet de dresseur sans jamais imiter une carte. Une seule feuille pour les deux pages, et pour celles qui viendront : deux copies du même style finissent toujours par diverger, et c'est celle qu'on a oublié de modifier que verront les visiteurs. Aucune ressource extérieure : ni police, ni image, ni script tiers. Le site est servi par la machine qui héberge l'application, et doit s'afficher entier quand tout le reste est injoignable — c'est justement pour ça qu'on vient y chercher un lien de téléchargement. */ :root{ /* De 0 en haut de la page à 1 quand on est arrivé au sol, et le rang du lieu courant : -2 le labo, -1 la plaine, 0 la ville, 1 l'arène. Ils sont posés sur la racine, et non sur le ciel, parce que la page s'en sert aussi — l'invite « descendre » s'efface avec la descente. */ --descente:0; --lieu:0; /* Le rang du panneau montré dans le menu du bas, et combien il y en a. Le rang ne suit plus le lieu : plusieurs bulles mènent au même endroit du monde sans partager la même explication. Au repos, c'est la ville — le neuvième panneau, après les cinq explications de gauche, le téléchargement, les questions et le Discord. */ --panneau:8; --nb:14; /* Le fond ne descend jamais au noir pur : sur un écran OLED, le vrai noir avale les bords des cartes et la page perd toute profondeur. */ --fond:#0C0C10; --fond-2:#121218; --surface:#16161E; --surface-2:#1C1C26; --trait:#26263292; --trait-vif:#3A3A4A; --texte:#F4F2EE; --lecture:#DEE2E6; --gris:#A6A3B8; --faible:#6E6B80; /* Les cinq types. Saturés pour tenir sur un fond sombre, et distincts les uns des autres même pour un œil qui confond le rouge et le vert : ils ne se distinguent jamais par la seule teinte, mais par la place et le mot. */ --feu:#FF5A4E; --eau:#3D8BFF; --plante:#5FD97A; --electrik:#FFCB2E; --psy:#E15BD8; --accent:var(--feu); --r:14px; --r-grand:22px; --pilule:99px; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; --sys:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; background:var(--fond); color:var(--texte); font:16px/1.65 var(--sys); -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* ── Trame de fond ────────────────────────────────────────────────── Deux halos très larges, un rouge et un bleu, comme les deux moitiés d'une balle. Ils ne bougent pas : une page vitrine n'a pas à s'agiter. */ body::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background: radial-gradient(760px 520px at 18% -8%, #FF5A4E24, transparent 70%), radial-gradient(680px 520px at 88% 4%, #3D8BFF20, transparent 70%); } body > *{position:relative;z-index:1} /* ── Le ciel ───────────────────────────────────────────────────────── Trois couches d'étoiles qui suivent le curseur, chacune à sa vitesse. C'est l'écart entre les couches qui donne la profondeur, pas la distance parcourue : 7, 16 et 30 pixels suffisent, et au-delà le fond se met à glisser sous le texte au lieu de rester derrière lui. Le champ est tiré une fois pour toutes et écrit ici. Tiré au chargement, il ne serait pas vérifiable et deux visiteurs ne verraient pas la même page. La transition fait tout l'amortissement : le script ne pose que deux nombres, le navigateur interpole la transformation sur le fil du compositeur, et rien n'est recalculé à chaque mouvement de souris. */ .ciel{ position:fixed;inset:-60px;z-index:1; /* Sans ceci, cette nappe fixe recouvre la page entière et avale tous les clics : plus un seul lien ne répond, et rien ne le laisse deviner. */ pointer-events:none; overflow:hidden; --mx:0;--my:0; } .couche{ position:absolute;inset:0; --derive:0vw; transform:translate3d(calc(var(--mx) * var(--force) + var(--lieu) * var(--derive)), calc(var(--my) * var(--force)),0); transition:transform .55s cubic-bezier(.22,.61,.36,1); will-change:transform; /* Le voile est porté par les étoiles, et non par le ciel entier : le sol, lui, doit arriver franc. À pleine densité les étoiles piquent le texte des paragraphes, alors elles s'éteignent vers le bas de la fenêtre — et elles s'éteignent encore en descendant, puisqu'on les quitte. */ opacity:calc(.78 - .34 * var(--descente)); -webkit-mask-image:linear-gradient(180deg,#000 0 26%,#000000c4 58%,#0000003d 100%); mask-image:linear-gradient(180deg,#000 0 26%,#000000c4 58%,#0000003d 100%); } .c1{ --force:10px;--derive:-2vw; background-image: radial-gradient(1.1px 1.1px at 334px 168px,#FFFFFF97 0 58%,#FFFFFF00 100%), radial-gradient(1.5px 1.5px at 556px 58px,#FFFFFFAD 0 58%,#FFFFFF00 100%), radial-gradient(1.1px 1.1px at 136px 187px,#FFFFFF9D 0 58%,#FFFFFF00 100%), radial-gradient(0.9px 0.9px at 506px 442px,#FFFFFF60 0 58%,#FFFFFF00 100%), radial-gradient(1.3px 1.3px at 242px 404px,#FFFFFF72 0 58%,#FFFFFF00 100%), radial-gradient(1.0px 1.0px at 4px 316px,#FFFFFFA8 0 58%,#FFFFFF00 100%), radial-gradient(1.5px 1.5px at 309px 250px,#FFFFFF8C 0 58%,#FFFFFF00 100%), radial-gradient(1.2px 1.2px at 452px 258px,#FFFFFF7F 0 58%,#FFFFFF00 100%), radial-gradient(1.4px 1.4px at 458px 77px,#FFFFFF9A 0 58%,#FFFFFF00 100%), radial-gradient(1.1px 1.1px at 355px 59px,#FFFFFFA9 0 58%,#FFFFFF00 100%), radial-gradient(0.9px 0.9px at 343px 232px,#FFFFFFA6 0 58%,#FFFFFF00 100%), radial-gradient(1.1px 1.1px at 83px 269px,#FFFFFF71 0 58%,#FFFFFF00 100%), radial-gradient(1.1px 1.1px at 93px 59px,#FFFFFFA1 0 58%,#FFFFFF00 100%), radial-gradient(1.3px 1.3px at 133px 329px,#FFFFFFA6 0 58%,#FFFFFF00 100%), radial-gradient(0.9px 0.9px at 362px 185px,#FFFFFF89 0 58%,#FFFFFF00 100%), radial-gradient(1.2px 1.2px at 152px 544px,#FFFFFF94 0 58%,#FFFFFF00 100%), radial-gradient(1.2px 1.2px at 335px 263px,#FFFFFF7F 0 58%,#FFFFFF00 100%), radial-gradient(1.1px 1.1px at 414px 68px,#FFFFFF9A 0 58%,#FFFFFF00 100%), radial-gradient(1.2px 1.2px at 432px 1px,#FFFFFF89 0 58%,#FFFFFF00 100%), radial-gradient(1.5px 1.5px at 148px 420px,#FFFFFFA3 0 58%,#FFFFFF00 100%), radial-gradient(0.9px 0.9px at 179px 124px,#FFFFFF91 0 58%,#FFFFFF00 100%), radial-gradient(1.4px 1.4px at 553px 527px,#FFFFFF78 0 58%,#FFFFFF00 100%), radial-gradient(1.4px 1.4px at 210px 464px,#FFFFFF65 0 58%,#FFFFFF00 100%), radial-gradient(0.9px 0.9px at 184px 103px,#FFFFFFA1 0 58%,#FFFFFF00 100%), radial-gradient(1.2px 1.2px at 558px 217px,#FFFFFF96 0 58%,#FFFFFF00 100%), radial-gradient(1.5px 1.5px at 73px 153px,#FFFFFF75 0 58%,#FFFFFF00 100%), radial-gradient(1.3px 1.3px at 276px 379px,#FFFFFF7D 0 58%,#FFFFFF00 100%), radial-gradient(1.3px 1.3px at 89px 47px,#FFFFFF79 0 58%,#FFFFFF00 100%), radial-gradient(1.0px 1.0px at 70px 501px,#FFFFFF9A 0 58%,#FFFFFF00 100%), radial-gradient(1.4px 1.4px at 560px 126px,#FFFFFFA9 0 58%,#FFFFFF00 100%), radial-gradient(1.2px 1.2px at 100px 423px,#FFFFFF87 0 58%,#FFFFFF00 100%), radial-gradient(1.2px 1.2px at 175px 318px,#FFFFFF96 0 58%,#FFFFFF00 100%), radial-gradient(0.9px 0.9px at 232px 253px,#FFFFFF9D 0 58%,#FFFFFF00 100%), radial-gradient(1.5px 1.5px at 265px 363px,#FFFFFF69 0 58%,#FFFFFF00 100%), radial-gradient(1.0px 1.0px at 497px 276px,#FFFFFF77 0 58%,#FFFFFF00 100%), radial-gradient(1.1px 1.1px at 328px 526px,#FFFFFF9C 0 58%,#FFFFFF00 100%), radial-gradient(1.3px 1.3px at 87px 235px,#FFFFFF85 0 58%,#FFFFFF00 100%), radial-gradient(1.0px 1.0px at 483px 8px,#FFFFFF6B 0 58%,#FFFFFF00 100%), radial-gradient(1.3px 1.3px at 473px 225px,#FFFFFF76 0 58%,#FFFFFF00 100%), radial-gradient(1.4px 1.4px at 219px 315px,#FFFFFF9A 0 58%,#FFFFFF00 100%), radial-gradient(1.1px 1.1px at 336px 387px,#FFFFFF68 0 58%,#FFFFFF00 100%), radial-gradient(1.3px 1.3px at 154px 168px,#FFFFFF8E 0 58%,#FFFFFF00 100%), radial-gradient(1.0px 1.0px at 234px 543px,#FFFFFF82 0 58%,#FFFFFF00 100%), radial-gradient(1.0px 1.0px at 76px 414px,#FFFFFF61 0 58%,#FFFFFF00 100%), radial-gradient(1.0px 1.0px at 186px 315px,#FFFFFF7E 0 58%,#FFFFFF00 100%), radial-gradient(1.3px 1.3px at 2px 475px,#FFFFFF6B 0 58%,#FFFFFF00 100%), radial-gradient(1.3px 1.3px at 280px 292px,#FFFFFF6B 0 58%,#FFFFFF00 100%), radial-gradient(1.2px 1.2px at 328px 323px,#FFFFFF6D 0 58%,#FFFFFF00 100%), radial-gradient(1.4px 1.4px at 361px 339px,#FFFFFF7A 0 58%,#FFFFFF00 100%), radial-gradient(1.5px 1.5px at 498px 143px,#FFFFFF94 0 58%,#FFFFFF00 100%), radial-gradient(1.2px 1.2px at 494px 56px,#FFFFFF66 0 58%,#FFFFFF00 100%), radial-gradient(1.1px 1.1px at 139px 489px,#FFFFFF96 0 58%,#FFFFFF00 100%), radial-gradient(1.4px 1.4px at 513px 308px,#FFFFFF6F 0 58%,#FFFFFF00 100%), radial-gradient(0.9px 0.9px at 393px 133px,#FFFFFF9F 0 58%,#FFFFFF00 100%), radial-gradient(1.1px 1.1px at 348px 190px,#FFFFFF62 0 58%,#FFFFFF00 100%), radial-gradient(1.5px 1.5px at 421px 552px,#FFFFFFAA 0 58%,#FFFFFF00 100%), radial-gradient(1.5px 1.5px at 550px 88px,#FFFFFF78 0 58%,#FFFFFF00 100%), radial-gradient(1.0px 1.0px at 286px 285px,#FFFFFF66 0 58%,#FFFFFF00 100%), radial-gradient(1.2px 1.2px at 238px 191px,#FFFFFF9F 0 58%,#FFFFFF00 100%), radial-gradient(1.4px 1.4px at 116px 396px,#FFFFFF61 0 58%,#FFFFFF00 100%), radial-gradient(1.1px 1.1px at 288px 50px,#FFFFFFA8 0 58%,#FFFFFF00 100%), radial-gradient(1.3px 1.3px at 39px 368px,#FFFFFF96 0 58%,#FFFFFF00 100%), radial-gradient(1.4px 1.4px at 13px 307px,#FFFFFF66 0 58%,#FFFFFF00 100%), radial-gradient(1.4px 1.4px at 333px 77px,#FFFFFF94 0 58%,#FFFFFF00 100%), radial-gradient(1.1px 1.1px at 218px 440px,#FFFFFF68 0 58%,#FFFFFF00 100%), radial-gradient(1.2px 1.2px at 101px 12px,#FFFFFF79 0 58%,#FFFFFF00 100%), radial-gradient(1.0px 1.0px at 301px 347px,#FFFFFF7A 0 58%,#FFFFFF00 100%), radial-gradient(1.0px 1.0px at 76px 317px,#FFFFFF63 0 58%,#FFFFFF00 100%), radial-gradient(1.1px 1.1px at 42px 193px,#FFFFFF97 0 58%,#FFFFFF00 100%), radial-gradient(1.1px 1.1px at 41px 313px,#FFFFFF6A 0 58%,#FFFFFF00 100%), radial-gradient(1.2px 1.2px at 485px 173px,#FFFFFF95 0 58%,#FFFFFF00 100%), radial-gradient(1.2px 1.2px at 372px 192px,#FFFFFF99 0 58%,#FFFFFF00 100%), radial-gradient(1.3px 1.3px at 554px 220px,#FFFFFF63 0 58%,#FFFFFF00 100%), radial-gradient(1.1px 1.1px at 437px 406px,#FFFFFF8A 0 58%,#FFFFFF00 100%), radial-gradient(1.4px 1.4px at 29px 187px,#FFFFFF96 0 58%,#FFFFFF00 100%), radial-gradient(1.4px 1.4px at 3px 421px,#FFFFFF86 0 58%,#FFFFFF00 100%), radial-gradient(1.2px 1.2px at 500px 536px,#FFFFFFAE 0 58%,#FFFFFF00 100%), radial-gradient(1.2px 1.2px at 288px 198px,#FFFFFF6C 0 58%,#FFFFFF00 100%), radial-gradient(1.4px 1.4px at 368px 143px,#FFFFFF7E 0 58%,#FFFFFF00 100%), radial-gradient(0.9px 0.9px at 195px 496px,#FFFFFF70 0 58%,#FFFFFF00 100%), radial-gradient(1.2px 1.2px at 139px 196px,#FFFFFF93 0 58%,#FFFFFF00 100%), radial-gradient(1.1px 1.1px at 22px 292px,#FFFFFF91 0 58%,#FFFFFF00 100%), radial-gradient(1.0px 1.0px at 81px 195px,#FFFFFF62 0 58%,#FFFFFF00 100%), radial-gradient(0.9px 0.9px at 351px 296px,#FFFFFF9E 0 58%,#FFFFFF00 100%), radial-gradient(1.2px 1.2px at 339px 20px,#FFFFFF7E 0 58%,#FFFFFF00 100%), radial-gradient(1.0px 1.0px at 25px 241px,#FFFFFF88 0 58%,#FFFFFF00 100%), radial-gradient(1.4px 1.4px at 137px 270px,#FFFFFF62 0 58%,#FFFFFF00 100%), radial-gradient(1.4px 1.4px at 495px 11px,#FFFFFFAA 0 58%,#FFFFFF00 100%), radial-gradient(0.9px 0.9px at 545px 282px,#FFFFFF91 0 58%,#FFFFFF00 100%), radial-gradient(1.5px 1.5px at 295px 156px,#FFFFFF6E 0 58%,#FFFFFF00 100%), radial-gradient(1.1px 1.1px at 188px 557px,#FFFFFF9F 0 58%,#FFFFFF00 100%), radial-gradient(1.4px 1.4px at 369px 76px,#FFFFFF68 0 58%,#FFFFFF00 100%), radial-gradient(1.1px 1.1px at 109px 85px,#FFFFFF9B 0 58%,#FFFFFF00 100%), radial-gradient(1.5px 1.5px at 88px 78px,#FFFFFF95 0 58%,#FFFFFF00 100%), radial-gradient(1.3px 1.3px at 458px 314px,#FFFFFF92 0 58%,#FFFFFF00 100%), radial-gradient(1.0px 1.0px at 197px 540px,#FFFFFF7F 0 58%,#FFFFFF00 100%), radial-gradient(1.4px 1.4px at 179px 89px,#FFFFFFAB 0 58%,#FFFFFF00 100%), radial-gradient(1.4px 1.4px at 369px 466px,#FFFFFF8C 0 58%,#FFFFFF00 100%), radial-gradient(1.0px 1.0px at 274px 43px,#FFFFFF91 0 58%,#FFFFFF00 100%), radial-gradient(1.2px 1.2px at 337px 435px,#FFFFFF7A 0 58%,#FFFFFF00 100%), radial-gradient(1.0px 1.0px at 552px 198px,#FFFFFF6B 0 58%,#FFFFFF00 100%), radial-gradient(1.0px 1.0px at 105px 450px,#FFFFFFA1 0 58%,#FFFFFF00 100%); background-size:560px 560px; } .c2{ --force:22px;--derive:-4vw; background-image: radial-gradient(1.9px 1.9px at 579px 22px,#FF5A4ED0 0 58%,#FF5A4E00 100%), radial-gradient(2.0px 2.0px at 475px 104px,#3D8BFFAB 0 58%,#3D8BFF00 100%), radial-gradient(2.1px 2.1px at 554px 190px,#FFCB2E9B 0 58%,#FFCB2E00 100%), radial-gradient(1.8px 1.8px at 519px 525px,#E15BD8BE 0 58%,#E15BD800 100%), radial-gradient(1.4px 1.4px at 588px 591px,#5FD97AB3 0 58%,#5FD97A00 100%), radial-gradient(1.8px 1.8px at 452px 248px,#FF5A4E9C 0 58%,#FF5A4E00 100%), radial-gradient(1.5px 1.5px at 313px 649px,#3D8BFFC5 0 58%,#3D8BFF00 100%), radial-gradient(1.6px 1.6px at 475px 700px,#FFCB2EC4 0 58%,#FFCB2E00 100%), radial-gradient(2.0px 2.0px at 110px 465px,#E15BD8CE 0 58%,#E15BD800 100%), radial-gradient(1.9px 1.9px at 39px 450px,#FFFFFF98 0 58%,#FFFFFF00 100%), radial-gradient(1.9px 1.9px at 272px 559px,#FFFFFFAC 0 58%,#FFFFFF00 100%), radial-gradient(2.0px 2.0px at 184px 593px,#FFFFFFB5 0 58%,#FFFFFF00 100%), radial-gradient(1.9px 1.9px at 436px 744px,#FFFFFFCC 0 58%,#FFFFFF00 100%), radial-gradient(1.9px 1.9px at 73px 167px,#FFFFFFD0 0 58%,#FFFFFF00 100%), radial-gradient(1.9px 1.9px at 69px 437px,#FFFFFFD1 0 58%,#FFFFFF00 100%), radial-gradient(1.7px 1.7px at 667px 587px,#FFFFFF96 0 58%,#FFFFFF00 100%), radial-gradient(1.5px 1.5px at 758px 388px,#FFFFFFC1 0 58%,#FFFFFF00 100%), radial-gradient(1.9px 1.9px at 311px 112px,#FFFFFFD1 0 58%,#FFFFFF00 100%), radial-gradient(1.9px 1.9px at 424px 514px,#FFFFFFB5 0 58%,#FFFFFF00 100%), radial-gradient(1.7px 1.7px at 492px 373px,#FFFFFF98 0 58%,#FFFFFF00 100%), radial-gradient(1.7px 1.7px at 738px 683px,#FFFFFF93 0 58%,#FFFFFF00 100%), radial-gradient(1.4px 1.4px at 480px 643px,#FFFFFF99 0 58%,#FFFFFF00 100%), radial-gradient(1.4px 1.4px at 388px 637px,#FFFFFFC7 0 58%,#FFFFFF00 100%), radial-gradient(1.9px 1.9px at 617px 380px,#FFFFFFC9 0 58%,#FFFFFF00 100%), radial-gradient(1.9px 1.9px at 29px 586px,#FFFFFFC9 0 58%,#FFFFFF00 100%), radial-gradient(2.1px 2.1px at 563px 145px,#FFFFFFD4 0 58%,#FFFFFF00 100%), radial-gradient(1.5px 1.5px at 670px 180px,#FFFFFFA7 0 58%,#FFFFFF00 100%), radial-gradient(2.1px 2.1px at 117px 154px,#FFFFFFC6 0 58%,#FFFFFF00 100%), radial-gradient(1.9px 1.9px at 82px 431px,#FFFFFFD3 0 58%,#FFFFFF00 100%), radial-gradient(1.5px 1.5px at 318px 252px,#FFFFFF98 0 58%,#FFFFFF00 100%), radial-gradient(1.5px 1.5px at 115px 222px,#FFFFFFD4 0 58%,#FFFFFF00 100%), radial-gradient(1.9px 1.9px at 268px 548px,#FFFFFFCB 0 58%,#FFFFFF00 100%), radial-gradient(1.9px 1.9px at 630px 313px,#FFFFFFAE 0 58%,#FFFFFF00 100%), radial-gradient(1.6px 1.6px at 329px 439px,#FFFFFFBA 0 58%,#FFFFFF00 100%), radial-gradient(2.0px 2.0px at 554px 419px,#FFFFFFA4 0 58%,#FFFFFF00 100%), radial-gradient(1.6px 1.6px at 274px 582px,#FFFFFF90 0 58%,#FFFFFF00 100%), radial-gradient(1.5px 1.5px at 736px 752px,#FFFFFF96 0 58%,#FFFFFF00 100%), radial-gradient(2.0px 2.0px at 10px 202px,#FFFFFFAA 0 58%,#FFFFFF00 100%), radial-gradient(1.8px 1.8px at 251px 423px,#FFFFFFCA 0 58%,#FFFFFF00 100%), radial-gradient(1.8px 1.8px at 587px 394px,#FFFFFFA7 0 58%,#FFFFFF00 100%), radial-gradient(2.0px 2.0px at 592px 318px,#FFFFFFB2 0 58%,#FFFFFF00 100%), radial-gradient(1.5px 1.5px at 166px 484px,#FFFFFFAF 0 58%,#FFFFFF00 100%), radial-gradient(1.5px 1.5px at 262px 551px,#FFFFFFBE 0 58%,#FFFFFF00 100%), radial-gradient(2.1px 2.1px at 158px 379px,#FFFFFFBF 0 58%,#FFFFFF00 100%), radial-gradient(1.7px 1.7px at 291px 101px,#FFFFFFC6 0 58%,#FFFFFF00 100%), radial-gradient(1.7px 1.7px at 244px 540px,#FFFFFFB9 0 58%,#FFFFFF00 100%), radial-gradient(1.8px 1.8px at 163px 166px,#FFFFFFB0 0 58%,#FFFFFF00 100%), radial-gradient(1.7px 1.7px at 520px 339px,#FFFFFFC0 0 58%,#FFFFFF00 100%), radial-gradient(1.4px 1.4px at 105px 568px,#FFFFFFB9 0 58%,#FFFFFF00 100%), radial-gradient(1.7px 1.7px at 131px 122px,#FFFFFFA6 0 58%,#FFFFFF00 100%), radial-gradient(1.5px 1.5px at 618px 629px,#FFFFFFA6 0 58%,#FFFFFF00 100%), radial-gradient(1.5px 1.5px at 748px 143px,#FFFFFFC1 0 58%,#FFFFFF00 100%), radial-gradient(1.5px 1.5px at 17px 713px,#FFFFFFD3 0 58%,#FFFFFF00 100%), radial-gradient(1.4px 1.4px at 446px 147px,#FFFFFFC1 0 58%,#FFFFFF00 100%), radial-gradient(2.1px 2.1px at 618px 634px,#FFFFFFBD 0 58%,#FFFFFF00 100%), radial-gradient(1.4px 1.4px at 34px 397px,#FFFFFFB3 0 58%,#FFFFFF00 100%), radial-gradient(1.6px 1.6px at 1px 243px,#FFFFFF96 0 58%,#FFFFFF00 100%), radial-gradient(2.0px 2.0px at 541px 315px,#FFFFFFA0 0 58%,#FFFFFF00 100%), radial-gradient(1.6px 1.6px at 50px 684px,#FFFFFFD5 0 58%,#FFFFFF00 100%), radial-gradient(1.8px 1.8px at 241px 67px,#FFFFFFA6 0 58%,#FFFFFF00 100%), radial-gradient(1.7px 1.7px at 308px 238px,#FFFFFFA9 0 58%,#FFFFFF00 100%), radial-gradient(1.7px 1.7px at 307px 541px,#FFFFFFCA 0 58%,#FFFFFF00 100%), radial-gradient(2.1px 2.1px at 742px 707px,#FFFFFFD1 0 58%,#FFFFFF00 100%), radial-gradient(1.9px 1.9px at 118px 183px,#FFFFFFBB 0 58%,#FFFFFF00 100%), radial-gradient(2.1px 2.1px at 232px 22px,#FFFFFF94 0 58%,#FFFFFF00 100%), radial-gradient(1.7px 1.7px at 457px 98px,#FFFFFFB1 0 58%,#FFFFFF00 100%), radial-gradient(1.9px 1.9px at 666px 725px,#FFFFFFD6 0 58%,#FFFFFF00 100%), radial-gradient(1.7px 1.7px at 138px 703px,#FFFFFFD6 0 58%,#FFFFFF00 100%), radial-gradient(2.0px 2.0px at 676px 103px,#FFFFFFAD 0 58%,#FFFFFF00 100%), radial-gradient(1.7px 1.7px at 535px 558px,#FFFFFFA8 0 58%,#FFFFFF00 100%), radial-gradient(1.9px 1.9px at 305px 759px,#FFFFFFB3 0 58%,#FFFFFF00 100%), radial-gradient(1.6px 1.6px at 504px 423px,#FFFFFF93 0 58%,#FFFFFF00 100%); background-size:760px 760px; } .c3{ --force:42px;--derive:-7vw; background-image: radial-gradient(2.6px 2.6px at 571px 509px,#FF5A4EF0 0 58%,#FF5A4E00 100%), radial-gradient(2.5px 2.5px at 414px 33px,#3D8BFFF2 0 58%,#3D8BFF00 100%), radial-gradient(2.2px 2.2px at 600px 701px,#FFCB2EE0 0 58%,#FFCB2E00 100%), radial-gradient(3.1px 3.1px at 551px 244px,#E15BD8C6 0 58%,#E15BD800 100%), radial-gradient(2.2px 2.2px at 645px 322px,#5FD97AEA 0 58%,#5FD97A00 100%), radial-gradient(2.5px 2.5px at 900px 129px,#FF5A4EF5 0 58%,#FF5A4E00 100%), radial-gradient(2.7px 2.7px at 401px 32px,#3D8BFFF2 0 58%,#3D8BFF00 100%), radial-gradient(2.6px 2.6px at 145px 885px,#FFCB2EDC 0 58%,#FFCB2E00 100%), radial-gradient(2.9px 2.9px at 690px 818px,#E15BD8E7 0 58%,#E15BD800 100%), radial-gradient(3.1px 3.1px at 220px 628px,#5FD97ACF 0 58%,#5FD97A00 100%), radial-gradient(2.4px 2.4px at 88px 946px,#FF5A4EC5 0 58%,#FF5A4E00 100%), radial-gradient(3.0px 3.0px at 918px 348px,#3D8BFFD0 0 58%,#3D8BFF00 100%), radial-gradient(2.1px 2.1px at 248px 134px,#FFCB2EF9 0 58%,#FFCB2E00 100%), radial-gradient(2.7px 2.7px at 256px 425px,#E15BD8D8 0 58%,#E15BD800 100%), radial-gradient(2.3px 2.3px at 325px 179px,#5FD97AD5 0 58%,#5FD97A00 100%), radial-gradient(2.6px 2.6px at 595px 463px,#FFFFFFF9 0 58%,#FFFFFF00 100%), radial-gradient(2.9px 2.9px at 96px 68px,#FFFFFFE0 0 58%,#FFFFFF00 100%), radial-gradient(2.0px 2.0px at 916px 457px,#FFFFFFDD 0 58%,#FFFFFF00 100%), radial-gradient(2.4px 2.4px at 15px 277px,#FFFFFFFB 0 58%,#FFFFFF00 100%), radial-gradient(2.8px 2.8px at 742px 384px,#FFFFFFD2 0 58%,#FFFFFF00 100%), radial-gradient(3.0px 3.0px at 171px 575px,#FFFFFFE2 0 58%,#FFFFFF00 100%), radial-gradient(2.1px 2.1px at 6px 148px,#FFFFFFF8 0 58%,#FFFFFF00 100%), radial-gradient(2.8px 2.8px at 97px 162px,#FFFFFFC1 0 58%,#FFFFFF00 100%), radial-gradient(2.0px 2.0px at 765px 881px,#FFFFFFC9 0 58%,#FFFFFF00 100%), radial-gradient(3.1px 3.1px at 421px 128px,#FFFFFFE3 0 58%,#FFFFFF00 100%), radial-gradient(2.6px 2.6px at 949px 724px,#FFFFFFE8 0 58%,#FFFFFF00 100%), radial-gradient(3.1px 3.1px at 478px 402px,#FFFFFFFA 0 58%,#FFFFFF00 100%), radial-gradient(2.5px 2.5px at 726px 785px,#FFFFFFDF 0 58%,#FFFFFF00 100%), radial-gradient(3.1px 3.1px at 687px 8px,#FFFFFFFE 0 58%,#FFFFFF00 100%), radial-gradient(2.8px 2.8px at 905px 673px,#FFFFFFE5 0 58%,#FFFFFF00 100%), radial-gradient(3.0px 3.0px at 899px 633px,#FFFFFFE0 0 58%,#FFFFFF00 100%), radial-gradient(3.2px 3.2px at 241px 293px,#FFFFFFFE 0 58%,#FFFFFF00 100%), radial-gradient(2.9px 2.9px at 576px 753px,#FFFFFFDD 0 58%,#FFFFFF00 100%), radial-gradient(2.9px 2.9px at 448px 35px,#FFFFFFFD 0 58%,#FFFFFF00 100%), radial-gradient(2.8px 2.8px at 806px 915px,#FFFFFFE2 0 58%,#FFFFFF00 100%), radial-gradient(2.2px 2.2px at 318px 360px,#FFFFFFD1 0 58%,#FFFFFF00 100%), radial-gradient(2.8px 2.8px at 321px 563px,#FFFFFFCE 0 58%,#FFFFFF00 100%), radial-gradient(2.4px 2.4px at 498px 770px,#FFFFFFEE 0 58%,#FFFFFF00 100%), radial-gradient(3.2px 3.2px at 209px 131px,#FFFFFFC5 0 58%,#FFFFFF00 100%); background-size:980px 980px; } /* ── L'escarmouche au loin ─────────────────────────────────────────── Deux silhouettes s'affrontent dans le fond, hors de portée : on ne voit d'elles que la forme et les coups qu'elles échangent. Elles sont dessinées ici, en SVG, et volontairement génériques — quatre pattes et deux oreilles, une aile et une corne. Reproduire une créature reconnaissable serait copier un dessin qui appartient à quelqu'un, et à cette taille ça ne ressemblerait de toute façon qu'à une vignette collée sur un fond soigné. Tout tient dans un cycle long : deux échanges, puis le calme. Une bagarre qui crépite sans arrêt derrière un texte devient un clignotant. */ /* Le ciel déborde de 60 pixels de chaque côté pour que le décalage du curseur ne découvre jamais un bord. Cette couche-ci revient sur la fenêtre exacte : sinon « left:6% » se compte sur la largeur débordée, et sur un téléphone la silhouette de gauche sortait de l'écran par la gauche. */ /* ── Les bolides ───────────────────────────────────────────────────── Deux créatures traversent le ciel à la vitesse d'un éclair, de loin en loin. Elles ne sont là qu'une seconde et demie sur dix-sept : un passage qu'on attrape du coin de l'œil vaut mieux qu'un manège permanent, qui finirait par empêcher de lire. Chaque passage tient en quatre gestes : la traversée, le piqué qui casse la trajectoire en plein vol, l'onde de choc au moment où elle casse, et l'éclat qui blanchit tout le ciel une fraction de seconde. */ /* Le vol n'est pas décrit ici. Des images figées font toujours le même passage, et au troisième on l'attend : le script tire chaque trajet au sort — le bord d'entrée, celui de sortie, le nombre de virages, la hauteur, la durée — et le pose en animation sur l'élément. La feuille garde ce qui ne change jamais : l'allure des bêtes, le battement d'ailes, et le choc. */ .bolides{--force:10px;--derive:-6vw;inset:0;overflow:hidden} .bolide{ position:absolute;left:0;top:var(--haut);width:0;height:0;opacity:0; } /* Les deux volent haut, entre l'en-tête et les premières bulles. À 38 % de hauteur, le second traversait derrière les cartes : il volait bel et bien, on ne le voyait jamais. La bande dégagée est étroite, et c'est là qu'ils passent. */ /* La hauteur de départ ; le script en tire une nouvelle à chaque passage, toujours dans cette bande-là. */ .b1{--haut:12%;--teinte:#FFE9A8;--halo:#FFCB2E} .b2{--haut:19%;--teinte:#CFE0FF;--halo:#6EA8FF} /* Le second remonte le ciel dans l'autre sens : ses propres images, et un miroir sur le vol pour que la traînée passe derrière lui et non devant. Le miroir est écrit en « scale » et non en « transform » — la propriété est distincte, elle se compose avec la transformation animée au lieu de l'effacer, et c'est le piège dans lequel ce fichier est déjà tombé trois fois. Sur le bolide lui-même il aurait aussi retourné la traversée, et la créature serait apparue en plein milieu de l'écran au lieu d'entrer par le bord. */ /* Le miroir se pose sur « scale » et non sur « transform » : c'est une propriété à part, elle s'anime en parallèle du piqué au lieu de l'effacer. Le script la retourne à chaque demi-tour, pour que la bête regarde toujours où elle va et que sa traînée reste derrière elle. */ .vol{position:absolute;inset:0} .creature{ position:absolute;left:-25px;top:-17px;width:50px;height:34px; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'%3E%3Cpath d='M47 16 L31 12 L21 2 L23 13 L3 7 L14 16 L3 25 L23 19 L21 30 L31 20 Z' fill='%23FFFFFF'/%3E%3C/svg%3E"); filter:drop-shadow(0 0 6px #FFFFFF) drop-shadow(0 0 14px var(--halo)) drop-shadow(0 0 34px var(--halo)); animation:battement .16s steps(2,end) infinite; } /* La traînée, en deux épaisseurs : une nappe large qui donne le volume, et par-dessus une déchirure en dents irrégulières qui donne l'éclair. Une traînée lisse et seule ferait comète. */ /* Raccourcie depuis que le vol zigzague : à 520 px, la traînée balayait un tiers de l'écran à chaque virage et l'éclair devenait un essuie-glace. */ .sillage{ position:absolute;right:14px;top:-16px; width:min(26vw,340px);height:32px; background: no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M0 12 L38 7 L64 16 L104 5 L128 18 L168 6 L196 15 L240 11' stroke='%23FFFFFF' stroke-width='2.6'/%3E%3Cpath d='M128 18 L146 22 L162 19' stroke='%23FFFFFF' stroke-width='1.6' opacity='.7'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(90deg,#0000 6%,var(--teinte) 82%,#FFFFFF 100%); -webkit-mask-image:linear-gradient(90deg,#0000 0%,#0007 34%,#000 72%); mask-image:linear-gradient(90deg,#0000 0%,#0007 34%,#000 72%); filter:blur(.4px) drop-shadow(0 0 16px var(--halo)); opacity:.95; } /* Le cœur de la traînée : un trait blanc plus fin, juste derrière la tête. C'est lui qui fait paraître le reste brûlant. */ .sillage::after{ content:"";position:absolute;right:0;top:50%; width:46%;height:3px;translate:0 -50%;border-radius:3px; background:linear-gradient(90deg,#0000,#FFFFFF); filter:drop-shadow(0 0 8px #FFFFFF); } /* L'onde de choc, au moment où la trajectoire casse. Deux anneaux décalés : un seul se lit comme une bulle, deux comme un claquement. */ .detonation{ position:absolute;left:-38px;top:-38px;width:76px;height:76px; border-radius:50%;border:2.5px solid var(--teinte); filter:drop-shadow(0 0 12px var(--halo)); opacity:0; } .detonation::before{ content:"";position:absolute;inset:22%;border-radius:50%; border:1.5px solid #FFFFFFB0; } /* L'éclat du ciel. Dix pour cent d'opacité, un dixième de seconde : de quoi sentir le passage sans jamais éclairer le texte qu'on est en train de lire. */ .eclat-ciel{ position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 80% at 50% 14%,var(--teinte),#0000 62%); opacity:0; } /* La traversée : 1,5 s de vol, puis quinze secondes hors champ. Les deux dernières images gardent la position d'arrivée — sans elles, le bolide revient en arrière au ralenti pendant tout le reste du cycle. */ /* La traversée ne va plus d'un bord à l'autre : elle fait des allers-retours. Neuf tronçons, chacun plus loin que le précédent, et le dernier sort de l'écran. Une avancée régulière, même avec un zigzag vertical par-dessus, donnait une onde bien sage — pas une bête qui chasse. */ /* Le nez suit la pente : la silhouette pique vers le bas quand elle descend, se cabre quand elle remonte. Sans cette rotation, elle glissait à plat le long du zigzag — on voyait un objet secoué, pas une bête qui vire. */ /* Le demi-tour. Les paires de pourcentages collées font un basculement net : la bête ne pivote pas, elle vire — et sa traînée passe de l'autre côté dans la même image. */ @keyframes battement{ 0% {transform:scaleY(1)} 100% {transform:scaleY(.72)} } /* Deux claquements : un au virage le plus sec, l'autre à l'instant où elle quitte l'écran. Sans le second, elle s'éteignait sans qu'on sache si elle était sortie ou simplement effacée. */ /* ── Le choc ───────────────────────────────────────────────────────── De loin en loin, les deux se rentrent dedans. Le script pose la classe et tire l'instant au sort ; la feuille se charge du reste. Les deux cycles ordinaires sont éteints le temps de la séquence, sinon les traversées continuaient par-dessous et les bêtes se dédoublaient. Impact à 1,05 s : ils convergent vers le même point, disparaissent, et le ciel prend une décharge glacée. */ .choc{position:absolute;left:50%;top:16%;width:0;height:0;pointer-events:none} .choc > i{position:absolute;left:0;top:0;translate:-50% -50%;opacity:0} .noyau{ width:140px;height:140px;border-radius:50%; background:radial-gradient(circle,#FFFFFF 0 16%,#EAF6FF 30%,#9FD8FF 52%,#6EA8FF00 74%); } .anneau{border-radius:50%;border:2.5px solid #DCF1FF;width:60px;height:60px} .a2{border-color:#7FC4FF;border-width:2px} .rais{ width:560px;height:560px; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23DCF1FF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M100 100 L112 62 L104 54 L118 14'/%3E%3Cpath d='M100 100 L138 88 L146 96 L186 82'/%3E%3Cpath d='M100 100 L112 138 L104 146 L118 186'/%3E%3Cpath d='M100 100 L62 112 L54 104 L14 118'/%3E%3Cpath d='M100 100 L128 72 L138 76 L166 44' opacity='.8'/%3E%3Cpath d='M100 100 L128 128 L124 138 L156 166' opacity='.8'/%3E%3Cpath d='M100 100 L72 128 L62 124 L34 156' opacity='.8'/%3E%3Cpath d='M100 100 L72 72 L76 62 L44 34' opacity='.8'/%3E%3C/g%3E%3C/svg%3E"); filter:drop-shadow(0 0 14px #7FC4FF); } .givre{ width:1100px;height:1100px;border-radius:50%; background:radial-gradient(circle,#BFE4FF3D 0 26%,#6EA8FF1F 50%,#6EA8FF00 70%); } .flash-choc{ position:absolute;inset:0;opacity:0;pointer-events:none; background:radial-gradient(120% 90% at 50% 16%,#EAF6FF,#6EA8FF 42%,#0000 72%); } .bolides.choc-en-cours .b1.bolide{ animation:vient-de-gauche 1.5s cubic-bezier(.34,0,.86,.36) forwards; } .bolides.choc-en-cours .b2.bolide{ animation:vient-de-droite 1.5s cubic-bezier(.34,0,.86,.36) forwards; } /* Pendant la charge, plus de zigzag ni de demi-tour : ils foncent droit l'un sur l'autre. Un piqué par-dessus les aurait fait se manquer. */ .bolides.choc-en-cours .vol{animation:none;transform:none} .bolides.choc-en-cours .b1 .vol{scale:1 1} .bolides.choc-en-cours .b2 .vol{scale:-1 1} .bolides.choc-en-cours .detonation, .bolides.choc-en-cours .eclat-ciel{animation:none;opacity:0} .bolides.choc-en-cours .noyau{animation:noyau-choc 1.5s 1.05s ease-out both} .bolides.choc-en-cours .a1{animation:anneau-choc 1.5s 1.05s cubic-bezier(.1,.7,.3,1) both} .bolides.choc-en-cours .a2{animation:anneau-choc 1.7s 1.2s cubic-bezier(.1,.7,.3,1) both} .bolides.choc-en-cours .rais{animation:rais-choc 1.4s 1.05s cubic-bezier(.15,.8,.3,1) both} .bolides.choc-en-cours .givre{animation:givre-choc 2.3s 1.05s ease-out both} .bolides.choc-en-cours .flash-choc{animation:flash-glace 1.5s 1.03s ease-out both} /* Les deux se rejoignent au même point, en x comme en y : ils arrivent d'en dessous et d'au-dessus, et se touchent à hauteur du choc. Sans le retour à zéro en vertical, ils se croisaient à la bonne abscisse et à deux hauteurs différentes — l'un passait même hors de l'écran par le haut. */ @keyframes vient-de-gauche{ 0% {transform:translateX(-30vw) translateY(-6vh);opacity:0} 8% {opacity:1} 68% {transform:translateX(46vw) translateY(0);opacity:1} 70% {transform:translateX(50vw) translateY(0);opacity:0} 100% {transform:translateX(50vw) translateY(0);opacity:0} } @keyframes vient-de-droite{ 0% {transform:translateX(128vw) translateY(6vh);opacity:0} 8% {opacity:1} 68% {transform:translateX(54vw) translateY(0);opacity:1} 70% {transform:translateX(50vw) translateY(0);opacity:0} 100% {transform:translateX(50vw) translateY(0);opacity:0} } @keyframes noyau-choc{ 0% {opacity:0;scale:.15} 6% {opacity:1;scale:1.35} 30% {opacity:.9;scale:.85} 100% {opacity:0;scale:2.4} } @keyframes anneau-choc{ 0% {opacity:0;width:60px;height:60px} 8% {opacity:1} 100% {opacity:0;width:1000px;height:1000px} } @keyframes rais-choc{ 0% {opacity:0;scale:.1;rotate:-14deg} 10% {opacity:1;scale:.7} 100% {opacity:0;scale:1.9;rotate:16deg} } @keyframes givre-choc{ 0% {opacity:0;scale:.2} 14% {opacity:1;scale:.8} 100% {opacity:0;scale:1.5} } @keyframes flash-glace{ 0% {opacity:0} 4% {opacity:.3} 16% {opacity:.1} 100% {opacity:0} } @media (prefers-reduced-motion:reduce){ .bolides{display:none} } .bataille{--force:6px;--derive:-5vw;inset:60px} .scene{ position:absolute; --l:60px; /* la taille d'une silhouette */ --cycle:15s; width:calc(var(--l) * 4.4);height:calc(var(--l) * 1.5); } .scene.proche{--l:44px;left:5%;top:46%} .scene.loin{ /* Plus petite, plus pâle, plus lente : c'est ce qui la met loin derrière l'autre. Le retard négatif la prend en cours de route, sinon les deux bagarres partiraient au même instant. */ --l:26px;--cycle:23s; right:7%;top:53%;opacity:.5; animation-delay:-9s; } /* « !important » parce que chaque pièce redéclare la propriété raccourcie « animation », qui remet le retard à zéro. Et la lueur est un pseudo-élément : oubliée ici, elle éclairerait le décor pendant que cette bagarre-là ne fait rien. */ .scene.loin *{animation-delay:-9s !important} .scene.loin::before{animation-delay:-9s} /* Deux étages, et non un seul : le corps respire en continu, la silhouette entière charge et encaisse. Sur un même élément, la seconde animation déclarée écraserait la transformation de la première — l'un des deux mouvements disparaîtrait sans rien signaler. */ .lutteur{ position:absolute;bottom:0; width:calc(var(--l) * 1.25);height:var(--l); transform-origin:bottom center; animation:charge-a var(--cycle) linear infinite; } .corps{ position:absolute;inset:0; background-repeat:no-repeat;background-position:bottom center; background-size:contain; transform-origin:bottom center; animation:souffle 2.9s ease-in-out infinite; } /* Le quadrupède à oreilles, queue en zigzag, tourné vers la droite. */ .lutteur.a{left:0} .lutteur.a .corps{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cg fill='%232C2833'%3E%3Cellipse cx='58' cy='60' rx='29' ry='21'/%3E%3Ccircle cx='87' cy='41' r='15'/%3E%3Cpolygon points='77,29 74,8 90,23'/%3E%3Cpolygon points='95,25 104,6 107,29'/%3E%3Cpolygon points='31,57 9,39 19,57 5,66 28,73'/%3E%3Crect x='40' y='74' width='10' height='18' rx='5'/%3E%3Crect x='62' y='74' width='10' height='18' rx='5'/%3E%3C/g%3E%3C/svg%3E"); } /* L'ailé à corne, tourné vers la gauche. */ .lutteur.b{right:0;animation-name:charge-b} .lutteur.b .corps{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cg fill='%2331272F'%3E%3Cellipse cx='64' cy='58' rx='26' ry='20'/%3E%3Ccircle cx='35' cy='43' r='14'/%3E%3Cpolygon points='31,31 26,12 43,29'/%3E%3Cpolygon points='72,40 106,9 98,43 119,38 88,62'/%3E%3Cpolygon points='88,66 117,79 86,76'/%3E%3Crect x='54' y='72' width='10' height='17' rx='5'/%3E%3Crect x='72' y='72' width='10' height='17' rx='5'/%3E%3C/g%3E%3C/svg%3E"); /* Celui-là vole : il plane au lieu de respirer. */ animation:vol 3.4s ease-in-out infinite; } /* L'eclair. Un seul trace qui clignote ressemble a une image qu'on allume ; un vrai eclair change de chemin a chaque battement. Trois traces distincts se relaient donc pendant toute la salve, dont un retourne — et chacun se decale un peu en hauteur pour que le trait ne revienne jamais exactement au meme endroit. La salve dure : de 3 a 12 % du cycle, soit une seconde et demie et dix coups, la ou il n'y avait qu'un battement. */ .jet{position:absolute;opacity:0} .eclair{ left:calc(var(--l) * 1.05);right:calc(var(--l) * 1.05); top:34%;height:calc(var(--l) * .42); background-position:center;background-size:100% 100%; background-repeat:no-repeat; filter:drop-shadow(0 0 7px #FFCB2Eb0); } /* Segments irreguliers et une fourche : un zigzag regulier ne ressemble pas a un eclair, il ressemble a une dent de scie. */ .e1{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23FFCB2E' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M0 34 L31 21 L44 37 L88 13 L101 30 L145 11 L161 33 L200 24'/%3E%3Cpath d='M101 30 L117 52 L133 45' stroke-width='2.6' opacity='.75'/%3E%3C/g%3E%3C/svg%3E"); animation:eclat1 var(--cycle) linear infinite; } .e2{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23FFD75E' stroke-width='3.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M0 30 L26 41 L52 18 L79 37 L96 14 L138 34 L158 12 L200 28'/%3E%3Cpath d='M52 18 L61 2 L77 9' stroke-width='2.4' opacity='.7'/%3E%3C/g%3E%3C/svg%3E"); animation:eclat2 var(--cycle) linear infinite; } .e3{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23FFC01A' stroke-width='4.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M0 32 L35 12 L49 31 L72 15 L110 41 L131 16 L170 36 L200 22'/%3E%3Cpath d='M131 16 L147 45 L159 37' stroke-width='2.6' opacity='.72'/%3E%3C/g%3E%3C/svg%3E"); animation:eclat3 var(--cycle) linear infinite; } /* La riposte : un jet de braise tenu, qui pousse depuis l'aile et bat comme une flamme au lieu de traverser d'un trait. */ .flamme-jet{ right:calc(var(--l) * 1.05); top:41%;width:calc(var(--l) * 2.1);height:calc(var(--l) * .1); border-radius:99px;transform-origin:right center; background:linear-gradient(270deg,#FFCB2E,#FF7A3A 38%,#FF5A4Ecc 72%,#FF5A4E00); filter:drop-shadow(0 0 8px #FF5A4Ec0); animation:riposte var(--cycle) linear infinite; } /* Un peu de brume au sol : trois taches tres pales qui derivent lentement. C'est ce qui pose les silhouettes dans un endroit plutot que sur un fond. */ .brume{ position:absolute;left:-12%;right:-12%;bottom:-8%;height:62%; background: radial-gradient(closest-side,#A8A4C014,transparent 72%) 6% 62%/48% 74% no-repeat, radial-gradient(closest-side,#A8A4C010,transparent 74%) 64% 74%/56% 64% no-repeat, radial-gradient(closest-side,#A8A4C00C,transparent 76%) 36% 42%/62% 82% no-repeat; animation:brume 27s ease-in-out infinite alternate; } /* L'onde de l'impact, sur celui qui vient d'être touché. */ .onde{ position:absolute;border-radius:50%;opacity:0; width:calc(var(--l) * .9);height:calc(var(--l) * .9); border:1.5px solid currentColor; } .onde.o1{right:calc(var(--l) * .35);top:26%;color:#FFCB2E; animation:onde var(--cycle) linear infinite} .onde.o2{left:calc(var(--l) * .45);top:34%;color:#FF5A4E; animation:onde-b var(--cycle) linear infinite} /* La lueur que les coups jettent sur le décor : sans elle, les silhouettes restent éclairées pareil pendant qu'un éclair leur passe dessus. */ .scene::before{ content:"";position:absolute;inset:-40% -12%; background:radial-gradient(closest-side,#FFCB2E20,transparent 75%); opacity:0;animation:lueur var(--cycle) linear infinite; } /* Chaque trace prend la main a son tour, jamais au meme instant : c'est ce relais qui fait le gresillement. Les paliers a zero entre deux coups sont necessaires — sans eux l'opacite redescendrait en pente douce, et l'eclair ressemblerait a une lampe qu'on baisse. */ @keyframes eclat1{ 0%,2.9%{opacity:0;transform:translateY(0)} 3.05%{opacity:1} 3.35%{opacity:.1} 3.5%{opacity:.9;transform:translateY(0)} 3.8%{opacity:0} 5.15%{opacity:0;transform:translateY(-7%)} 5.3%{opacity:1} 5.6%{opacity:0} 7.95%{opacity:0;transform:translateY(5%)} 8.1%{opacity:.92} 8.45%{opacity:0} 10.6%{opacity:0;transform:translateY(-3%)} 10.75%{opacity:1} 11.1%{opacity:.25} 11.4%{opacity:0} 100%{opacity:0;transform:translateY(0)} } @keyframes eclat2{ 0%,3.85%{opacity:0;transform:scaleY(-1) translateY(0)} 4%{opacity:.95} 4.3%{opacity:0} 6.35%{opacity:0;transform:scaleY(-1) translateY(6%)} 6.5%{opacity:1} 6.75%{opacity:.15} 6.9%{opacity:.8} 7.2%{opacity:0} 9.35%{opacity:0;transform:scaleY(-1) translateY(-5%)} 9.5%{opacity:.9} 9.85%{opacity:0} 100%{opacity:0;transform:scaleY(-1) translateY(0)} } @keyframes eclat3{ 0%,4.5%{opacity:0;transform:translateY(4%)} 4.65%{opacity:.9} 4.95%{opacity:0} 7.25%{opacity:0;transform:translateY(-6%)} 7.4%{opacity:1} 7.7%{opacity:.12} 7.85%{opacity:.85} 8.2%{opacity:0} 11%{opacity:0;transform:translateY(2%)} 11.15%{opacity:.95} 11.55%{opacity:0} 100%{opacity:0;transform:translateY(4%)} } /* L'onde repart a chaque coup encaisse, pas une seule fois pour la salve. */ @keyframes onde{ 0%,3.2%{opacity:0;transform:scale(.25)} 3.8%{opacity:.8} 6.5%{opacity:0;transform:scale(1.7)} 8%{opacity:0;transform:scale(.3)} 8.5%{opacity:.7} 11.5%{opacity:0;transform:scale(1.8)} 100%{opacity:0;transform:scale(1.8)} } /* Le jet pousse, bat, faiblit, repart : une flamme n'a pas de debit constant. */ @keyframes riposte{ 0%,25.4%{opacity:0;transform:scaleX(.05)} 25.9%{opacity:1;transform:scaleX(.38)} 26.6%{opacity:.95;transform:scaleX(1)} 27.6%{opacity:.78;transform:scaleX(.9)} 28.4%{opacity:1;transform:scaleX(1.05)} 29.8%{opacity:.82;transform:scaleX(.94)} 31.2%{opacity:1;transform:scaleX(1.03)} 32.6%{opacity:.7;transform:scaleX(.88)} 33.8%{opacity:0;transform:scaleX(.28)} 100%{opacity:0;transform:scaleX(.05)} } @keyframes onde-b{ 0%,26.4%{opacity:0;transform:scale(.25)} 27%{opacity:.8} 30%{opacity:0;transform:scale(1.7)} 31%{opacity:0;transform:scale(.3)} 31.6%{opacity:.65} 34.4%{opacity:0;transform:scale(1.8)} 100%{opacity:0;transform:scale(1.8)} } /* La lueur tient pendant toute la salve, en battant avec elle. */ @keyframes lueur{ 0%,2.9%{opacity:0} 3.2%{opacity:1} 5%{opacity:.45} 5.4%{opacity:.95} 8.2%{opacity:.4} 8.6%{opacity:.9} 11.6%{opacity:0} 25.4%{opacity:0} 26.2%{opacity:.85} 29%{opacity:.55} 31.2%{opacity:.8} 34%{opacity:0} 100%{opacity:0} } /* La brume ne fait rien d'autre que deriver : des qu'elle se met a pulser, on ne regarde plus qu'elle. */ @keyframes brume{ 0%{transform:translateX(-3%) scale(1)} 100%{transform:translateX(4%) scale(1.09)} } /* Au repos : l'un souffle, l'autre plane. Sans ça, deux formes parfaitement immobiles entre deux échanges ressemblent à des rochers. */ @keyframes souffle{ 0%,100%{transform:translateY(0) scale(1,1)} 50%{transform:translateY(-2%) scale(.985,1.025)} } @keyframes vol{ 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-8%) rotate(-2.5deg)} } /* Le combat. Chacun se ramasse avant de porter son coup — sans cet appel la charge n'a pas de poids —, tient sa position pendant que la salve dure, et encaisse celle de l'autre en reculant. La couleur passe par « filter » : la silhouette reste sombre et c'est son contour qui s'allume quand elle attaque. Une creature franchement coloree sur ce fond ressemblerait a un autocollant. */ @keyframes charge-a{ 0%,2.2%{transform:translate(0,0) rotate(0deg);filter:drop-shadow(0 0 5px #FFCB2E1C)} 2.9%{transform:translate(-7%,0) rotate(-3deg)} 3.4%{transform:translate(12%,0) rotate(4deg);filter:drop-shadow(0 0 10px #FFCB2E70)} 5.3%{transform:translate(9%,0) rotate(2deg)} 8.1%{transform:translate(12%,0) rotate(4deg)} 10.8%{transform:translate(9%,0) rotate(3deg);filter:drop-shadow(0 0 10px #FFCB2E70)} 12.2%{transform:translate(0,0) rotate(0deg);filter:drop-shadow(0 0 5px #FFCB2E1C)} 26.2%{transform:translate(0,0) rotate(0deg)} 27%{transform:translate(-12%,0) rotate(-8deg)} 29%{transform:translate(-8%,0) rotate(-4deg)} 31.4%{transform:translate(-11%,0) rotate(-7deg)} 33.8%{transform:translate(-7%,0) rotate(-3deg)} 36.4%{transform:translate(0,0) rotate(0deg)} 100%{transform:translate(0,0) rotate(0deg);filter:drop-shadow(0 0 5px #FFCB2E1C)} } @keyframes charge-b{ 0%,3%{transform:translate(0,0) rotate(0deg);filter:drop-shadow(0 0 5px #FF5A4E1C)} 3.7%{transform:translate(12%,0) rotate(8deg)} 5%{transform:translate(6%,0) rotate(-2deg)} 5.9%{transform:translate(11%,0) rotate(6deg)} 8.6%{transform:translate(7%,0) rotate(2deg)} 11.2%{transform:translate(10%,0) rotate(5deg)} 12.8%{transform:translate(0,0) rotate(0deg)} 24.8%{transform:translate(0,0) rotate(0deg);filter:drop-shadow(0 0 5px #FF5A4E1C)} 25.6%{transform:translate(8%,0) rotate(4deg)} 26.4%{transform:translate(-13%,0) rotate(-5deg);filter:drop-shadow(0 0 10px #FF5A4E70)} 29%{transform:translate(-10%,0) rotate(-4deg)} 31.4%{transform:translate(-13%,0) rotate(-5deg)} 33.6%{transform:translate(-9%,0) rotate(-3deg);filter:drop-shadow(0 0 10px #FF5A4E70)} 35.6%{transform:translate(0,0) rotate(0deg);filter:drop-shadow(0 0 5px #FF5A4E1C)} 100%{transform:translate(0,0) rotate(0deg);filter:drop-shadow(0 0 5px #FF5A4E1C)} } /* ── L'ouverture ───────────────────────────────────────────────────── Une Super Ball traverse l'écran en rebondissant, grossit à chaque bond, tourne de plus en plus vite, puis s'ouvre sur le menu. Trois éléments imbriqués, et non un seul : la trajectoire est portée par « .jet-balle », la taille et la rotation par « .super-balle ». Sur un même élément, la seconde animation déclarée écraserait la transformation de la première et l'un des deux mouvements disparaîtrait sans rien signaler. Le dessin est d'ici, comme le reste du site : un dôme bleu à deux ailes rouges, une ceinture noire, une coque blanche. */ .ouverture{ position:fixed;inset:0;z-index:40; display:grid;place-items:center; /* Une simple vignette, et non une nappe. À moitié opaque, elle laissait passer les nuages en deux traînées pâles de part et d'autre du centre : ni un ciel, ni un fond. Levée, c'est franchement le ciel — lune, étoiles et nuages — et le menu se pose dessus. */ background:radial-gradient(120% 92% at 50% 46%,#0A0A1433,#05050C99); } .ouverture[hidden]{display:none} .jet-balle{ position:absolute; animation:rebond 2.2s both; } /* Chaque segment a sa courbe : une chute accélère, un rebond ralentit. Une trajectoire à vitesse constante ne ressemble pas à une balle lancée. */ @keyframes rebond{ 0%{transform:translate(-40vw,-32vh);animation-timing-function:cubic-bezier(.4,0,.9,.5)} 13%{transform:translate(-22vw,24vh);animation-timing-function:cubic-bezier(.1,.6,.35,1)} 26%{transform:translate(0vw,-27vh);animation-timing-function:cubic-bezier(.4,0,.9,.5)} 39%{transform:translate(24vw,22vh);animation-timing-function:cubic-bezier(.1,.6,.35,1)} 52%{transform:translate(34vw,-19vh);animation-timing-function:cubic-bezier(.4,0,.9,.5)} 65%{transform:translate(12vw,17vh);animation-timing-function:cubic-bezier(.1,.6,.35,1)} 78%{transform:translate(-12vw,-11vh);animation-timing-function:cubic-bezier(.5,0,.2,1)} 92%,100%{transform:translate(0,0)} } .super-balle{ --taille:min(44vmin,330px); position:relative; width:var(--taille);height:var(--taille); filter:drop-shadow(0 18px 34px #00000088); animation:grossit 2.2s both; } @keyframes grossit{ 0%{transform:scale(.16) rotate(0)} 52%{transform:scale(.46) rotate(760deg)} 78%{transform:scale(.78) rotate(1240deg)} 90%{transform:scale(1.1) rotate(1430deg)} 100%{transform:scale(1) rotate(1440deg)} } /* Les deux moitiés. La ceinture noire est l'écart entre elles. */ .moitie{ position:absolute;left:0;right:0;overflow:hidden; transition:transform .42s cubic-bezier(.3,.8,.3,1), opacity .42s ease; } .haut{ top:0;height:50%; border-radius:50% 50% 0 0 / 100% 100% 0 0; background:linear-gradient(158deg,#5C9AEC,#2A5DA8 74%); border-bottom:calc(var(--taille) * .045) solid #14141A; } /* Les deux ailes rouges, posées sur les épaules du dôme. */ .haut::before,.haut::after{ content:"";position:absolute;top:-8%;bottom:-4%;width:56%; background:linear-gradient(158deg,#F4705A,#BE352C); } .haut::before{left:-8%;clip-path:polygon(0 44%,60% 0,100% 14%,50% 100%,0 100%)} .haut::after{right:-8%;clip-path:polygon(100% 44%,40% 0,0 14%,50% 100%,100% 100%)} .bas{ bottom:0;height:50%; border-radius:0 0 50% 50% / 0 0 100% 100%; background:linear-gradient(158deg,#FFFFFF,#D9D4C8 78%); border-top:calc(var(--taille) * .045) solid #14141A; } /* Le point de lumière et le bord assombri, comme sur les autres balles. */ .super-balle::after{ content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none; background: radial-gradient(circle at 33% 20%,#FFFFFFC4 0 5%,#FFFFFF44 11%,transparent 22%), radial-gradient(circle at 72% 84%,#FFFFFF26 0 7%,transparent 28%), radial-gradient(circle at 50% 50%,transparent 0 54%,#00000047 80%,#0000009E 100%); box-shadow:inset -8px -10px 22px #00000055,inset 6px 6px 14px #FFFFFF1A; } .fermoir{ position:absolute;left:50%;top:50%; width:26%;height:26%;margin:-13% 0 0 -13%; border-radius:50%;background:radial-gradient(circle at 38% 34%,#FFF 0 40%,#DCD7CB 100%); border:calc(var(--taille) * .042) solid #14141A; box-shadow:0 0 0 calc(var(--taille) * .022) #FFFFFFCC; transition:transform .38s ease,opacity .3s ease; } /* L'éclat qui grandit derrière la balle, et l'onde du déclic. */ .eclat{ position:absolute;inset:-40%;border-radius:50%;opacity:0; background:radial-gradient(closest-side,#EAF2FFDD,#7FB4FF66 40%,transparent 72%); } .onde-balle{ position:absolute;inset:0;border-radius:50%;opacity:0; border:3px solid #BFD9FF; } /* ── L'ouverture proprement dite ─────────────────────────────────────── */ .ouverture.ouvre .jet-balle,.ouverture.ouvre .super-balle{animation-play-state:paused} .ouverture.ouvre .haut{transform:translateY(-170%) rotate(-11deg);opacity:0} .ouverture.ouvre .bas{transform:translateY(170%) rotate(11deg);opacity:0} .ouverture.ouvre .super-balle::after{opacity:0;transition:opacity .4s} .ouverture.ouvre .fermoir{transform:scale(2.8);opacity:0} .ouverture.ouvre .eclat{animation:eclate .6s ease-out both} .ouverture.ouvre .onde-balle{animation:onde-balle .6s ease-out both} @keyframes eclate{ 0%{opacity:0;transform:scale(.4)} 22%{opacity:1;transform:scale(1.1)} 100%{opacity:0;transform:scale(2.1)} } @keyframes onde-balle{ 0%{opacity:.9;transform:scale(.6)} 100%{opacity:0;transform:scale(2.6)} } /* ── Les repères du premier écran ──────────────────────────────────── Le haut de la page ne porte pas de texte : quatre petites cartes posées de part et d'autre, avec juste assez de fond pour se détacher du ciel sans le masquer. Elles ne racontent rien — elles montrent qu'il y a quelque chose plus bas, et c'est tout ce qu'on leur demande. */ .reperes{ width:min(1100px,86vw);margin:9vh auto 0; display:grid;grid-template-columns:1fr 1fr;align-items:start; transition:opacity .6s ease .25s,transform .6s cubic-bezier(.2,.7,.3,1) .25s; } html.ouverture-en-cours .reperes{opacity:0;transform:translateY(14px)} .repere{ width:min(490px,94%);overflow:hidden; border-radius:var(--r-grand); background:#0E0E16C4;border:1px solid var(--trait); box-shadow:0 16px 44px #05050C7A; --decal:0px;--zoom:1;text-decoration:none;display:block; transform:translateX(var(--decal)) scale(var(--zoom)); transition:transform .28s cubic-bezier(.2,.7,.3,1),border-color .28s ease, box-shadow .28s ease; } /* Au survol : un souffle de zoom, et le film part s'il y en a un. */ .repere:hover{--zoom:1.035;border-color:var(--trait-vif); box-shadow:0 22px 56px #05050C99} /* L'image de remplissage : un morceau du décor lui-même, cadré serré. Le site en a quatre sous la main, déjà publiées et déjà servies — aller chercher une photo dehors aurait cassé la règle qui veut que ce site s'affiche entier quand tout le reste est injoignable. */ .vignette{ display:block;position:relative;height:199px;overflow:hidden; background-size:cover;background-position:center 74%; background-repeat:no-repeat; border-bottom:1px solid var(--trait); } /* Les aperçus dessinés : une maquette par écran, cadrée par le haut. Réduites en entier elles deviennent illisibles ; par le haut, on lit le titre et les premières lignes. */ .v-alertes,.v-recherche,.v-collection,.v-prix,.v-annonces, .v-catalogue,.v-invitations,.v-theme,.v-centralisation{ background-position:top center;background-color:#0B0B12; } .v-alertes{background-image:url("capture-alertes.svg")} .v-recherche{background-image:url("capture-recherche.svg")} .v-collection{background-image:url("capture-collection.svg")} .v-prix{background-image:url("capture-prix.svg")} .v-annonces{background-image:url("capture-annonces.svg")} .v-catalogue{background-image:url("capture-catalogue.svg")} .v-invitations{background-image:url("capture-invitations.svg")} .v-theme{background-image:url("capture-theme.svg")} .v-centralisation{background-image:url("capture-centralisation.svg")} .v-ville{background-image:url("ville.svg")} .v-labo{background-image:url("labo.svg")} .v-arene{background-image:url("arene.svg")} .v-plaine{background-image:url("plaine.svg")} .repere .dedans{padding:22px 26px 24px} /* Le film, quand la bulle en a un. Il se pose sur l'image fixe et prend sa place au survol ; l'image reste dessous, ce qui évite le trou blanc pendant que la vidéo se charge. */ .film{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;opacity:0;transition:opacity .32s ease; } /* Deux fois de suite, un porteur de film s'est ajouté sans que la règle le suive : la vidéo se chargeait, se lançait, et restait invisible sous l'aperçu — rien ne le disait, il fallait survoler pour voir qu'il ne se passait rien. La règle ne nomme donc plus personne : ce qui joue se voit. */ .joue .film{opacity:1} .repere .etiquette{margin-bottom:10px;font-size:.78rem} .repere b{display:block;color:var(--lecture);font-size:1.46rem; letter-spacing:-.02em;line-height:1.12;margin-bottom:10px} .repere p{margin:0;color:var(--lecture);font-size:1.27rem; line-height:1.45;letter-spacing:-.005em} /* Un rang à gauche, l'autre à droite, et des hauteurs qui ne s'alignent jamais : quatre cartes au cordeau feraient un tableau, pas un ciel. */ .repere:nth-child(even){justify-self:end} .repere:nth-child(2){margin-top:5vh} .repere:nth-child(3){margin-top:3vh} .repere:nth-child(4){margin-top:7vh} @media (max-width:860px){ .reperes{grid-template-columns:1fr;gap:16px;margin-top:5vh} .repere{width:min(430px,94%)} .repere:nth-child(even){justify-self:end} .repere:nth-child(2),.repere:nth-child(3),.repere:nth-child(4){margin-top:0} } /* Les deux colonnes s'écartent de 15 % de leur propre largeur, l'une vers la gauche et l'autre vers la droite. Seulement à partir de 1100 pixels : plus étroit, ce même écart pousse le texte hors de l'écran, et un bloc à moitié coupé n'est pas une mise en page. */ @media (min-width:1100px){ /* Par la variable, comme les repères : le survol y ajoute son zoom sans écraser l'écart. Écrit en « transform », il l'écrasait. */ .jalon.gauche{--decal:-15%} .jalon.droite{--decal:15%} .repere:nth-child(odd){--decal:-15%} .repere:nth-child(even){--decal:15%} } /* ── La disposition du texte ───────────────────────────────────────── Mesures relevées sur remix.run, page d'accueil, le 14/08/2026 : étiquette 12 px, capitales, approche NORMALE, interligne 1.5, blanc franc titre 53.8 px, graisse 700, interligne 1.0, approche -0.02em texte 16 px, interligne 1.4 colonne 368 à 589 px, alignée à gauche Deux choses s'y jouent qui ne vont pas de soi. L'interligne du titre vaut exactement 1 : les lignes se touchent, et c'est ce qui fait le bloc. Et le titre est plus SOURD que son étiquette — le petit mot en capitales est l'élément le plus clair de la section, l'inverse de ce qu'on fait d'ordinaire. */ .etiquette{ display:inline-flex;align-items:center;gap:9px; font-family:var(--mono);font-size:.75rem;font-weight:400; letter-spacing:normal;line-height:1.5;text-transform:uppercase; color:var(--texte);margin-bottom:16px; } /* ── La boutique ───────────────────────────────────────────────────── Cinq formules, une bascule mois / année, et les recharges. La bascule ne recharge rien : elle pose « data-periode » sur la section, et la feuille montre l'un ou l'autre. Deux prix écrits côte à côte dans le HTML, un seul affiché — c'est ce qui évite d'avoir à recalculer quoi que ce soit en JavaScript, donc d'avoir deux vérités possibles. */ .bascule{ display:inline-flex;gap:4px;padding:4px;margin:0 0 30px; border-radius:var(--pilule);background:#0C0C13;border:1px solid var(--trait); } .bascule button{ display:inline-flex;align-items:center;gap:9px; padding:10px 20px;border-radius:var(--pilule); border:1px solid transparent;background:none;cursor:pointer; font:inherit;font-size:.92rem;color:var(--gris); transition:color .2s,background-color .2s,border-color .2s; } .bascule button:hover{color:var(--texte)} .bascule button[aria-pressed="true"]{ color:var(--texte);background:#FFFFFF12;border-color:var(--trait-vif); } .remise{ font-family:var(--mono);font-size:.66rem;letter-spacing:.1em; text-transform:uppercase;color:var(--plante); } /* ── Le neuil ──────────────────────────────────────────────────────── Une pièce, dessinée une fois et posée partout où le mot apparaît. Un mot de monnaie sans figure se lit comme du jargon ; avec sa pièce, on comprend d'un coup qu'il s'agit d'un jeton et pas d'un abonnement de plus. */ .jeton{ --taille:1.05em; display:inline-block;vertical-align:-.16em;flex:none; width:var(--taille);height:var(--taille);margin-right:.34em; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3ClinearGradient id='o' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFEEB8'/%3E%3Cstop offset='.52' stop-color='%23E7B44A'/%3E%3Cstop offset='1' stop-color='%23A9791F'/%3E%3C/linearGradient%3E%3Ccircle cx='16' cy='16' r='15' fill='url(%23o)'/%3E%3Ccircle cx='16' cy='16' r='14.2' fill='none' stroke='%236B4A14' stroke-width='1.5'/%3E%3Ccircle cx='16' cy='16' r='11.4' fill='none' stroke='%236B4A1455' stroke-width='1'/%3E%3Cpath d='M11.4 21.8 V10.2 L20.6 21.8 V10.2' fill='none' stroke='%235C3F10' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.4 10.6 A10.6 10.6 0 0 1 17.6 4.6' fill='none' stroke='%23FFFFFFB0' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E"); } /* ── Les cinq emblèmes ─────────────────────────────────────────────── La même pièce à chaque palier, et autour d'elle une parure qui s'enrichit : rien, un chevron, trois rais, une étoile, une couronne. On voit le rang sans lire le prix. */ .embleme{ --taille:44px; display:block;width:var(--taille);height:var(--taille);margin-bottom:14px; background:no-repeat center/contain; filter:drop-shadow(0 3px 8px #00000080); transition:transform .5s cubic-bezier(.2,.7,.3,1),filter .35s ease; } .e1{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3ClinearGradient id='o' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFEEB8'/%3E%3Cstop offset='.52' stop-color='%23E7B44A'/%3E%3Cstop offset='1' stop-color='%23A9791F'/%3E%3C/linearGradient%3E%3Ccircle cx='22' cy='24' r='14' fill='url(%23o)' stroke='%236B4A14' stroke-width='1.6'/%3E%3Cpath d='M17.6 30 V18 L26.4 30 V18' fill='none' stroke='%235C3F10' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.4 18.6 A10 10 0 0 1 23 13' fill='none' stroke='%23FFFFFFB0' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E")} .e2{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3ClinearGradient id='o' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFEEB8'/%3E%3Cstop offset='.52' stop-color='%23E7B44A'/%3E%3Cstop offset='1' stop-color='%23A9791F'/%3E%3C/linearGradient%3E%3Cpath d='M13 11 L22 4 L31 11' fill='none' stroke='%236EA8FF' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='22' cy='26' r='13' fill='url(%23o)' stroke='%236B4A14' stroke-width='1.6'/%3E%3Cpath d='M18 31.6 V20.4 L26 31.6 V20.4' fill='none' stroke='%235C3F10' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 21 A9.4 9.4 0 0 1 23 15.6' fill='none' stroke='%23FFFFFFB0' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")} .e3{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3ClinearGradient id='o' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFEEB8'/%3E%3Cstop offset='.52' stop-color='%23E7B44A'/%3E%3Cstop offset='1' stop-color='%23A9791F'/%3E%3C/linearGradient%3E%3Cg stroke='%23A98CFF' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M22 3 V9'/%3E%3Cpath d='M10.5 7 L14 12'/%3E%3Cpath d='M33.5 7 L30 12'/%3E%3C/g%3E%3Ccircle cx='22' cy='26' r='13' fill='url(%23o)' stroke='%236B4A14' stroke-width='1.6'/%3E%3Cpath d='M18 31.6 V20.4 L26 31.6 V20.4' fill='none' stroke='%235C3F10' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 21 A9.4 9.4 0 0 1 23 15.6' fill='none' stroke='%23FFFFFFB0' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")} .e4{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3ClinearGradient id='o' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFEEB8'/%3E%3Cstop offset='.52' stop-color='%23E7B44A'/%3E%3Cstop offset='1' stop-color='%23A9791F'/%3E%3C/linearGradient%3E%3Cpath d='M22 1 L25.4 12.4 L36 8.2 L30.6 18.6 L43 22 L30.6 25.4 L36 35.8 L25.4 31.6 L22 43 L18.6 31.6 L8 35.8 L13.4 25.4 L1 22 L13.4 18.6 L8 8.2 L18.6 12.4 Z' fill='%23FF9B5426' stroke='%23FF9B54' stroke-width='1.3' stroke-linejoin='round'/%3E%3Ccircle cx='22' cy='22' r='12' fill='url(%23o)' stroke='%236B4A14' stroke-width='1.6'/%3E%3Cpath d='M18.4 27.2 V16.8 L25.6 27.2 V16.8' fill='none' stroke='%235C3F10' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.8 17.4 A8.6 8.6 0 0 1 23 12.4' fill='none' stroke='%23FFFFFFB0' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E")} .e5{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3ClinearGradient id='o' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFEEB8'/%3E%3Cstop offset='.52' stop-color='%23E7B44A'/%3E%3Cstop offset='1' stop-color='%23A9791F'/%3E%3C/linearGradient%3E%3Ccircle cx='22' cy='26' r='16.5' fill='none' stroke='%23FFCB2E4D' stroke-width='1.2'/%3E%3Cpath d='M8 13 L13.5 6.5 L17.5 11 L22 2.5 L26.5 11 L30.5 6.5 L36 13 Z' fill='%23FFCB2E33' stroke='%23FFCB2E' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='13.5' cy='6.5' r='1.9' fill='%23FFE9A8'/%3E%3Ccircle cx='30.5' cy='6.5' r='1.9' fill='%23FFE9A8'/%3E%3Ccircle cx='22' cy='2.5' r='2.2' fill='%23FFE9A8'/%3E%3Ccircle cx='22' cy='26' r='13' fill='url(%23o)' stroke='%236B4A14' stroke-width='1.6'/%3E%3Cpath d='M18 31.6 V20.4 L26 31.6 V20.4' fill='none' stroke='%235C3F10' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 21 A9.4 9.4 0 0 1 23 15.6' fill='none' stroke='%23FFFFFFB0' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")} /* Cinq colonnes tant qu'elles tiennent. En « auto-fit » sur 212 px, la cinquième carte se retrouvait seule sur une deuxième ligne dès que la fenêtre passait sous 1140 px : quatre en haut, une orpheline en bas. Elles se replient donc par paliers choisis, jamais sur un compte impair. */ .formules{ display:grid;gap:14px;margin-bottom:44px; grid-template-columns:repeat(5,1fr); } @media (max-width:1180px){.formules{grid-template-columns:repeat(3,1fr)}} @media (max-width:820px){.formules{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.formules{grid-template-columns:1fr}} .formule{ position:relative;isolation:isolate;overflow:hidden; display:flex;flex-direction:column; padding:24px 22px 22px;border-radius:var(--r-grand); background:linear-gradient(180deg,#15151FE8,#0C0C13E8); border:1px solid var(--trait); --teinte:#9AA4B8;--leve:-3px;--gonfle:1.03; transition:transform .28s cubic-bezier(.2,.7,.3,1),border-color .28s ease, box-shadow .28s ease; } /* Un filet de la couleur du palier en haut de chaque carte. Au repos, les cinq cartes étaient rigoureusement identiques : il fallait survoler pour sentir le rang, ou lire le prix. */ .formule::before{ content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2; background:linear-gradient(90deg,#0000,var(--teinte) 26%,var(--teinte) 74%,#0000); opacity:.5;transition:opacity .28s ease; } .formule:hover::before{opacity:1} .formule[data-palier="2"]{--teinte:#6EA8FF;--gonfle:1.035} .formule[data-palier="3"]{--teinte:#A98CFF;--gonfle:1.04} .formule[data-palier="4"]{--teinte:#FF9B54;--leve:-6px;--gonfle:1.05} .formule[data-palier="5"]{--teinte:#FFCB2E;--leve:-9px;--gonfle:1.07} /* Elle se lève ET grossit : le retournement seul ne se remarquait pas dans une rangée de cinq, la carte survolée doit sortir du rang. */ .formule:hover{ transform:translateY(var(--leve)) scale(var(--gonfle)); border-color:var(--teinte);box-shadow:0 22px 52px #05050CA6; z-index:2; } .formule:hover .embleme{filter:drop-shadow(0 6px 16px var(--teinte))} .formule b{color:var(--lecture);font-size:1.16rem;letter-spacing:-.02em; line-height:1.1;margin-bottom:14px} /* ── Ce qui se passe au survol ─────────────────────────────────────── Le palier se sent avant de se lire : plus la formule est chère, plus la carte en fait. Cinq crans, et chacun ajoute au précédent sans le remplacer — une carte à 9,99 € qui brillerait autant qu'une à 99,99 € ne dirait plus rien du rang. 1 la carte se lève, le bord prend la teinte du palier 2 + la pièce se retourne, une lueur monte du haut de la carte 3 + un lustre balaie la carte une fois 4 + le lustre repasse en boucle, des étincelles tournent, la lueur bat 5 + une aurore tourne dans le fond et le prix miroite Les deux nappes sont posées derrière le texte : « z-index » sur les enfants plutôt que « -1 » sur les nappes, sinon elles passaient derrière le fond de la carte et ne se voyaient plus du tout. */ /* ── Le retournement ───────────────────────────────────────────────── La carte se retourne pour montrer ce que le recto ne pouvait pas tenir. Trois choses tiennent ce mouvement : * la perspective est sur la carte, la profondeur sur le bloc qui tourne. Écrite au même endroit, la rotation s'aplatit et les deux faces se superposent au lieu de se croiser ; * les nappes — halo, lustre, étincelles, aurore — restent EN DEHORS du bloc qui tourne. Posées dessus, elles partaient avec la face au premier quart de tour, et c'est justement pendant le tour qu'on les regarde ; * « overflow:hidden » sur la carte aplatirait la scène s'il portait sur le bloc en profondeur. Il reste sur la carte, qui n'est pas en 3D. */ .formule{perspective:1400px} .formule > *{position:relative;z-index:1} .tourne{ display:grid;transform-style:preserve-3d; transition:transform .72s cubic-bezier(.22,.68,.28,1); } .formule:hover .tourne,.formule:focus-within .tourne{transform:rotateY(180deg)} .face{grid-area:1 / 1;backface-visibility:hidden; -webkit-backface-visibility:hidden;display:flex;flex-direction:column} /* Les deux faces occupent la même case : la carte prend la hauteur de la plus haute. Le verso posé en absolu débordait de la carte sans que rien ne le dise — le texte passait sous le bord et disparaissait. */ .verso{transform:rotateY(180deg)} .verso b{margin-bottom:12px} .verso .atouts{margin-top:0;gap:11px} .verso .atouts li{font-size:.86rem} .embleme.petit{--taille:30px;margin-bottom:12px} .aura,.lustre{ position:absolute;inset:0;z-index:0;pointer-events:none; opacity:0;transition:opacity .38s ease;border-radius:inherit; } .aura{background:radial-gradient(96% 74% at 50% 0%,var(--teinte),#0000 68%)} .lustre{ background:linear-gradient(102deg,#0000 36%,#FFFFFF2E 47%,#FFFFFF12 55%,#0000 66%); transform:translateX(-125%); } .formule:hover .aura{opacity:.17} .formule:hover .embleme{transform:rotate(-8deg)} /* 2 — la pièce se retourne */ .formule[data-palier="2"]:hover .embleme{transform:rotateY(180deg)} .formule[data-palier="2"]:hover .aura{opacity:.2} /* 3 — le lustre passe une fois */ .formule[data-palier="3"]:hover .embleme{transform:rotateY(360deg) scale(1.06)} .formule[data-palier="3"]:hover .aura{opacity:.22} .formule[data-palier="3"]:hover .lustre{opacity:1;animation:balaye 1.1s ease-out} /* 4 — le lustre repasse, les étincelles tournent, la lueur bat */ .formule[data-palier="4"]:hover .embleme{transform:rotateY(720deg) scale(1.1)} .formule[data-palier="4"]:hover .lustre{opacity:1;animation:balaye 1.9s ease-out .2s infinite} .formule[data-palier="4"]:hover .aura{opacity:.24;animation:respire 2.6s ease-in-out infinite} .formule[data-palier="4"]:hover .aura::after, .formule[data-palier="5"]:hover .aura::after{ content:"";position:absolute;left:26px;top:46px;width:3px;height:3px; border-radius:50%;background:var(--teinte); box-shadow:30px -8px 0 -.4px var(--teinte), -26px 12px 0 -1px #FFFFFFD0, 10px 30px 0 -1px var(--teinte), -12px -26px 0 -1.2px #FFFFFF90; animation:orbite 3.6s linear infinite; } /* 5 — l'aurore tourne dans le fond, le prix miroite */ .formule[data-palier="5"]:hover .embleme{animation:tourne-jeton 2.6s linear infinite} .formule[data-palier="5"]:hover .lustre{opacity:1;animation:balaye 1.5s ease-out infinite} .formule[data-palier="5"]:hover .aura{opacity:.3;animation:respire 2s ease-in-out infinite} .formule[data-palier="5"]:hover .aura::after{animation-duration:2.4s} .formule[data-palier="5"] .aura::before{ content:"";position:absolute;inset:-55%;opacity:0; background:conic-gradient(from 0deg,#FFCB2E00,#FFCB2E,#FF9B54,#FFE9A8,#FFCB2E00 72%); filter:blur(26px);transition:opacity .4s ease; } .formule[data-palier="5"]:hover .aura::before{ opacity:.38;animation:aurore 5.5s linear infinite; } .formule[data-palier="5"]:hover .prix{ background:linear-gradient(100deg,#FFFFFF 18%,#FFCB2E 34%,#FFFFFF 52%,#FFCB2E 70%,#FFFFFF 88%) 0 0/320% auto; -webkit-background-clip:text;background-clip:text;color:transparent; animation:miroite 2.4s linear infinite; } .formule[data-palier="5"]:hover .prix small{color:var(--faible)} @keyframes balaye{ 0% {transform:translateX(-125%)} 100% {transform:translateX(125%)} } @keyframes respire{ 0%,100% {opacity:.16} 50% {opacity:.32} } @keyframes orbite{ 0% {transform:rotate(0)} 100% {transform:rotate(360deg)} } @keyframes aurore{ 0% {transform:rotate(0)} 100% {transform:rotate(360deg)} } @keyframes tourne-jeton{ 0% {transform:rotateY(0) scale(1.12)} 100% {transform:rotateY(360deg) scale(1.12)} } @keyframes miroite{ 0% {background-position:0 0} 100% {background-position:320% 0} } /* Moins de mouvement : la carte se lève, le bord prend sa teinte, et c'est tout. Le rang se lit encore, il ne s'agite plus. */ @media (prefers-reduced-motion:reduce){ .formule:hover .tourne,.formule:focus-within .tourne{transform:none} .formule:hover{transform:translateY(var(--leve))} .formule:hover .embleme, .formule[data-palier="2"]:hover .embleme, .formule[data-palier="3"]:hover .embleme, .formule[data-palier="4"]:hover .embleme, .formule[data-palier="5"]:hover .embleme{transform:none;animation:none} .formule .lustre,.formule .aura::before,.formule .aura::after{display:none} .formule:hover .aura{animation:none} .formule[data-palier="5"]:hover .prix{ background:none;color:var(--texte);animation:none; } } .prix{display:block;color:var(--texte);font-size:1.6rem;font-weight:700; letter-spacing:-.03em;line-height:1} .prix small{display:block;margin-top:6px;font-size:.74rem;font-weight:400; letter-spacing:normal;color:var(--faible);font-family:var(--mono); text-transform:uppercase} .equiv{display:block;margin-top:9px;color:var(--plante);font-size:.82rem} .atouts{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px} .atouts li{color:var(--lecture);font-size:.9rem;line-height:1.4; padding-left:15px;position:relative} .atouts li::before{content:"";position:absolute;left:0;top:.6em;width:6px; height:2px;border-radius:2px;background:var(--trait-vif)} /* La ligne des neuils porte déjà sa pièce : le tiret en plus faisait deux puces l'une derrière l'autre, et volait la place qui manquait au texte. */ .atouts li:has(.jeton){padding-left:0} .atouts li:has(.jeton)::before{display:none} .atouts b{color:var(--texte);font-size:inherit;margin:0;display:inline} /* Ce qui n'est pas encore décidé le dit, plutôt que de faire semblant. */ .a-definir{color:var(--faible);font-style:italic} /* La bascule : un seul des deux prix se montre. */ .panneau[data-periode="mois"] .a-l-an, .panneau[data-periode="an"] .au-mois{display:none} /* ── Le guichet du compte ──────────────────────────────────────────── Deux volets sur le même rail — s'inscrire, se connecter — et un troisième qui n'apparaît qu'une fois dedans. Ils se remplacent au lieu de se suivre : deux formulaires empilés, on ne sait plus lequel on remplit. */ /* Une plaque sous le guichet. Sans elle, les champs et surtout leurs explications flottaient au-dessus des toits de la ville : le gris des petites lignes sur des tuiles éclairées ne se lisait plus du tout. */ .guichet{ max-width:1100px;margin:6px 0 0;padding:26px 28px; border-radius:var(--r-grand); background:linear-gradient(180deg,#12121BF2,#0A0A11F2); border:1px solid var(--trait);box-shadow:0 20px 52px #05050C8C; } /* « hidden » ne cache un élément que parce que le navigateur lui pose « display:none » par défaut — la moindre règle « display » écrite ensuite passe devant. Trois choses restaient donc à l'écran alors que le script les croyait cachées : les deux boutons de la double authentification, la bascule une fois connecté, et le champ du code de vérification. Ça ne se voit qu'à l'écran : le script, lui, disait la vérité. */ .bouton-plein[hidden],.bouton-creux[hidden], .bascule[hidden],.champ[hidden]{display:none} .feuillet{display:block} .feuillet[hidden]{display:none} .champs{ display:grid;gap:16px;margin:0 0 22px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); } .champs.serres{grid-template-columns:minmax(220px,300px);margin-bottom:14px} .champ{display:flex;flex-direction:column;gap:7px} .champ > span{ color:var(--lecture);font-size:.9rem;font-weight:600;letter-spacing:-.01em; } /* Ce qui est facultatif le dit à côté du nom, pas dans une note en bas : on remplit un champ au moment où on le lit. */ .champ > span i{ font-style:normal;font-weight:400;color:var(--faible); font-family:var(--mono);font-size:.7rem;text-transform:uppercase; letter-spacing:.08em;margin-left:6px; } .champ input{ padding:12px 14px;border-radius:12px; background:#0A0A11;border:1px solid var(--trait); color:var(--texte);font:inherit;font-size:.98rem; transition:border-color .2s ease,background-color .2s ease; } .champ input:focus{outline:none;border-color:var(--feu);background:#0C0C15} .champ input:-webkit-autofill{-webkit-text-fill-color:var(--texte)} .champ small{color:var(--gris);font-size:.82rem;line-height:1.45} /* La jauge du mot de passe. Elle ne note pas la personne : elle dit ce qui manque encore pour que le serveur accepte, et rien de plus. Un mot de passe déclaré « moyen » sans dire pourquoi n'aide personne. */ .jauge{ display:block;height:4px;border-radius:4px;background:#1B1B26;overflow:hidden; } .jauge i{ display:block;height:100%;width:0;border-radius:4px; background:var(--feu);transition:width .3s ease,background-color .3s ease; } .champ[data-force="2"] .jauge i{background:#FFCB2E} .champ[data-force="3"] .jauge i{background:var(--plante)} .champ[data-force="3"] .verdict{color:var(--plante)} .coche{ display:flex;align-items:center;gap:10px;margin:0 0 22px; width:fit-content; color:var(--lecture);font-size:.92rem;cursor:pointer; } .coche input{width:17px;height:17px;accent-color:var(--feu)} .bouton-plein{ display:inline-flex;align-items:center;gap:9px; padding:13px 26px;border-radius:var(--pilule);border:0;cursor:pointer; background:var(--feu);color:#1A0B0A;font:inherit;font-weight:650; font-size:.97rem;transition:transform .2s ease,filter .2s ease; /* Il sert aussi de lien depuis le laboratoire : sans ceci, le libellé arrivait souligné au milieu du bouton. */ text-decoration:none; } .bouton-plein:hover{transform:translateY(-2px);filter:brightness(1.08)} .bouton-plein[disabled]{opacity:.5;cursor:default;transform:none} .bouton-creux{ display:inline-flex;align-items:center;gap:8px; padding:11px 20px;border-radius:var(--pilule);cursor:pointer; background:none;border:1px solid var(--trait-vif);color:var(--lecture); font:inherit;font-size:.92rem;transition:border-color .2s ease,color .2s ease; } .bouton-creux:hover{border-color:var(--feu);color:var(--texte)} .boutons{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px} /* Le seul bouton d'un panneau qui n'existe que pour lui. */ .vers-paquets{margin:4px 0 38px;padding:15px 30px;font-size:1.02rem} /* Ce que le serveur répond, mot pour mot. Ses refus sont écrits pour être lus — les retourner tels quels vaut mieux qu'un « une erreur est survenue ». */ .dit{ margin:18px 0 0;padding:13px 16px;border-radius:12px; font-size:.92rem;line-height:1.5; background:#FF5A4E14;border:1px solid #FF5A4E4D;color:#FFB4AC; } .dit.bien{background:#5FD97A14;border-color:#5FD97A4D;color:#A8E7B8} .dit[hidden]{display:none} .carte-compte{ padding:22px 24px;border-radius:var(--r-grand);margin:0 0 16px; background:linear-gradient(180deg,#15151FE8,#0C0C13E8); border:1px solid var(--trait); } .carte-compte b{display:block;color:var(--texte);font-size:1.06rem; letter-spacing:-.02em;margin-bottom:8px} .qui{ display:block;color:var(--texte);font-size:1.4rem;font-weight:700; letter-spacing:-.03em;margin-bottom:14px; } .explique-compte{margin:0;color:var(--lecture);font-size:.94rem;line-height:1.5; max-width:62ch} .fiche-compte{ display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px;margin:0; } .fiche-compte div{display:flex;flex-direction:column;gap:3px} .fiche-compte dt{ color:var(--faible);font-family:var(--mono);font-size:.68rem; letter-spacing:.09em;text-transform:uppercase; } .fiche-compte dd{margin:0;color:var(--lecture);font-size:.95rem} /* Le secret, et le code de secours : deux choses qui ne s'affichent qu'une fois. Elles se recopient, donc elles s'espacent. */ .secret{ display:block;margin:14px 0 0;padding:14px 16px;border-radius:12px; background:#0A0A11;border:1px dashed var(--trait-vif); color:var(--plante);font-family:var(--mono);font-size:1rem; letter-spacing:.14em;word-break:break-all; } .secret[hidden]{display:none} /* Le captcha : l'image dessinée par le serveur, et le lien qui en redemande une autre. Il est rangé dans un champ comme les autres — c'est une case à remplir, pas une épreuve à part. */ .captcha{ display:block;border-radius:12px;overflow:hidden; border:1px solid var(--trait);width:fit-content;line-height:0; } .captcha svg{display:block;max-width:100%;height:auto} .lien-nu{ background:none;border:0;padding:0;font:inherit;color:var(--feu); text-decoration:underline;cursor:pointer; } .lien-nu:hover{color:var(--texte)} /* Le titre d'un volet, quand il en porte plusieurs bout à bout. */ .titre-volet{display:block;color:var(--texte);font-size:1.12rem; letter-spacing:-.02em;margin:0 0 10px} /* La bascule du canal, en plus petit : elle vit dans un champ. */ .bascule.menue{margin:0;padding:3px} .bascule.menue button{padding:7px 14px;font-size:.86rem} .bascule.menue button[hidden]{display:none} /* La note du bas dit ce que le serveur garde. Posée à nu, elle tombait sur les toits de l'arène et devenait illisible — or c'est justement la phrase qu'il ne faut pas rater. */ #compte > .note{ max-width:1100px;margin-top:18px;padding:14px 18px; border-radius:var(--r-grand); background:#0A0A11D9;border:1px solid var(--trait); } .explique{margin:0;color:var(--lecture);font-size:1rem;line-height:1.45; max-width:44ch} /* La pièce du paragraphe est plus grosse et flotte à gauche du texte : c'est la première fois qu'on voit la monnaie en grand, autant qu'elle se pose. */ .jeton.grosse{ --taille:44px;float:left;margin:2px 14px 4px 0;vertical-align:baseline; filter:drop-shadow(0 3px 9px #00000080); } .recharges{width:100%;border-collapse:collapse;font-size:.92rem} .recharges th{ text-align:left;padding:0 0 10px;font-family:var(--mono);font-size:.68rem; letter-spacing:.12em;text-transform:uppercase;color:var(--faible); font-weight:400;border-bottom:1px solid var(--trait); } .recharges td{padding:11px 0;color:var(--lecture); border-bottom:1px solid var(--trait)} .recharges td:nth-child(2){color:var(--texte)} .recharges td:nth-child(3){text-align:right;color:var(--plante)} .recharges b{color:var(--plante)} .note{margin:14px 0 0;color:var(--faible);font-size:.84rem;line-height:1.45} /* La condition qui commande la colonne du bonus. Écrite en gris de note sous le tableau, elle se lisait après coup — c'est-à-dire trop tard. Elle passe au-dessus, dans la couleur des chiffres qu'elle conditionne. */ .note.reserve{margin:0 0 12px;color:var(--plante)} /* Au mois, la colonne perd sa promesse : elle perd aussi sa couleur, sinon une rangée de tirets verts continue de ressembler à un gain. */ .panneau[data-periode="mois"] .recharges td:nth-child(3){color:var(--faible)} @media (prefers-reduced-motion:reduce){ .formule:hover{transform:none} } /* ── Le menu du bas, en bande ──────────────────────────────────────── Les panneaux sont posés côte à côte et le rail glisse devant eux. Ils ne sont plus quatre : chaque bulle de la descente a le sien, et le rang ne se déduit donc plus du lieu. Deux nombres, deux rôles — « --lieu » déplace le monde, « --panneau » déplace le menu, et une bulle pose les deux. Les cinq bulles de gauche sont rangées avant les lieux, les quatre de droite après : cliquer à gauche fait glisser le menu vers la plaine, cliquer à droite vers l'arène, dans le même sens que le décor. « --nb » doit valoir le nombre de .panneau écrits dans la page ; un test le vérifie, faute de quoi le rail montrerait un demi-panneau. */ /* Les deux flèches, au-dessus du rail. Posées à l'intérieur de la bande, elles auraient été rognées par son « overflow:hidden » et emportées par le glissement ; elles vivent donc dans un cadre qui contient les deux. C'est aussi ce cadre que le défilement vise, sinon elles restaient au-dessus de l'écran pendant qu'on regardait le panneau. */ .menu-cadre{width:100%} .gouvernail{ display:flex;justify-content:space-between;align-items:center;gap:16px; padding:0 max(24px,calc((100vw - 1100px) / 2));margin:0 0 18px; } .gouverne{ display:inline-flex;align-items:center;gap:10px; padding:9px 16px;border-radius:999px; background:linear-gradient(180deg,#16161ECC,#0F0F17CC); border:1px solid var(--trait);color:var(--lecture); font:inherit;font-size:.9rem;cursor:pointer; transition:border-color .22s ease,color .22s ease,transform .22s ease; } .gouverne:hover{border-color:var(--feu);color:var(--texte);transform:translateY(-2px)} .gouverne .chevron{color:var(--feu);font-size:1.05rem;line-height:1} .gouverne .ou{ max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } /* Au bout du rail, la flèche n'a plus de destination. Elle reste en place — la voir disparaître ferait sauter l'autre d'un bord à l'autre. */ .gouverne[disabled]{ opacity:.32;cursor:default;border-color:transparent; } .gouverne[disabled]:hover{transform:none;border-color:transparent;color:var(--lecture)} @media (max-width:640px){ .gouverne .ou{display:none} } @media (prefers-reduced-motion:reduce){ .gouverne:hover{transform:none} } /* La hauteur suit le panneau affiché, posée par le script : à défaut, c'est le plus haut de tous qui l'imposerait aux autres. */ /* La course de la hauteur est réglable : passer d'un panneau à l'autre prend presque une seconde, ce qui va pour un glissement — mais déplier une question devait attendre la même seconde avant que la réponse tienne dans le cadre. Le script raccourcit « --glisse » le temps de l'ouverture. */ .panneaux{overflow:hidden;width:100%;margin:0 0 96px; transition:height var(--glisse,.95s) cubic-bezier(.3,.72,.24,1)} .rail{ display:flex;align-items:flex-start;width:calc(var(--nb) * 100%); transform:translateX(calc(var(--panneau) * -100% / var(--nb))); transition:transform .95s cubic-bezier(.3,.72,.24,1); } .panneau{ width:calc(100% / var(--nb));flex:none; padding:0 max(24px,calc((100vw - 1100px) / 2)); } .panneau h2{margin-bottom:16px} .panneau > .sous{margin-bottom:28px} /* L'écran dont parle le panneau, en grand. Un menu explicatif qui n'a que du texte fait mentir la règle du site : une bulle de texte montre ce dont elle parle. C'est le même aperçu qu'en haut, et le même film au survol. */ .demo{display:block;margin:0 0 30px;max-width:760px} .demo .vignette{ height:min(340px,42vw);border-radius:var(--r-grand); border:1px solid var(--trait);box-shadow:0 18px 46px #05050C7A; transition:border-color .28s ease,box-shadow .28s ease; } .demo:hover .vignette{border-color:var(--trait-vif);box-shadow:0 22px 56px #05050C99} .demo .legende{ display:block;margin-top:12px;color:var(--faible); font-size:.84rem;line-height:1.45; } /* Les nouveautés et les remarques, en deux colonnes. */ .deux-colonnes{ display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); padding:28px 30px;border-radius:var(--r-grand); background:#0B0B12D9;border:1px solid var(--trait); } .notes{list-style:none;margin:0;padding:0;display:grid;gap:12px} .notes li{color:var(--lecture);font-size:.95rem;line-height:1.45; padding-left:16px;position:relative} .notes li::before{content:"";position:absolute;left:0;top:.62em; width:6px;height:2px;border-radius:2px;background:var(--accent)} .notes b{color:var(--texte)} /* Les trois raisons du Discord. */ .trois{display:grid;gap:16px;margin-bottom:26px; grid-template-columns:repeat(auto-fit,minmax(268px,1fr))} .carte-plate{ padding:24px 24px 22px;border-radius:var(--r-grand); background:#101019D9;border:1px solid var(--trait); } .carte-plate b{display:block;color:var(--lecture);font-size:1.14rem; letter-spacing:-.02em;line-height:1.15;margin-bottom:10px} .carte-plate p{margin:0;color:var(--lecture);font-size:.95rem;line-height:1.45} .lien-plus{ display:inline-block;margin-top:26px; font-family:var(--mono);font-size:.76rem;letter-spacing:.1em; text-transform:uppercase;color:var(--gris);text-decoration:none; border-bottom:1px solid var(--trait-vif);padding-bottom:4px; } .lien-plus:hover{color:var(--texte);border-color:var(--feu)} /* Le salon n'existe pas encore : la mention le dit et ne mène nulle part. */ .lien-plus.muet{color:var(--faible);border-color:transparent;cursor:default} /* ── Les questions ──────────────────────────────────────────────────── Bâties sur « details » et non sur un accordéon en JavaScript : la réponse est dans la page, elle s'ouvre sans script, et la recherche du navigateur la trouve même repliée. Le panneau se remesure tout seul en s'ouvrant — « ajusterPanneaux » observe la taille de chaque panneau. */ .questions{display:grid;gap:10px;margin:0 0 8px} .questions details{ border-radius:var(--r-grand);border:1px solid var(--trait); background:#101019D9;overflow:hidden; } .questions summary{ list-style:none;cursor:pointer; padding:19px 52px 19px 24px;position:relative; color:var(--lecture);font-size:1.06rem;font-weight:600; letter-spacing:-.015em;line-height:1.25; } .questions summary::-webkit-details-marker{display:none} /* Le signe est dessiné en deux traits plutôt qu'écrit en caractère : un « + » de police n'a pas la même taille d'un système à l'autre, et se retrouvait décalé du texte sur macOS. */ .questions summary::before, .questions summary::after{ content:"";position:absolute;right:24px;top:50%; width:13px;height:2px;border-radius:2px;background:var(--gris); transition:transform .22s ease,background .22s ease; } .questions summary::before{transform:translateY(-50%)} .questions summary::after{transform:translateY(-50%) rotate(90deg)} .questions details[open] summary::after{transform:translateY(-50%) rotate(0)} .questions details[open] summary::before, .questions details[open] summary::after{background:var(--feu)} .questions summary:hover{color:var(--texte)} .questions .reponse{ margin:0;padding:0 24px 21px;max-width:70ch; color:var(--lecture);font-size:.97rem;line-height:1.5; } .questions .reponse + .reponse{padding-top:12px} .questions .reponse b{color:var(--texte)} @media (prefers-reduced-motion:reduce){ .questions summary::before,.questions summary::after{transition:none} } /* ── Les marchands suivis ───────────────────────────────────────────── La liste est écrite en toutes lettres à l'endroit où l'on touche terre. Rangée dans une carte du dernier panneau, c'était pourtant la première chose qu'on vient vérifier : « est-ce que ma boutique en fait partie ». */ .marchands{ display:flex;flex-wrap:wrap;align-items:center;gap:10px; margin:0 0 30px; } .marchands .intitule{ margin:0 6px 0 0;color:var(--gris);font-size:.82rem; font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase; } .marchands span:not(.intitule){ padding:7px 14px;border-radius:var(--pilule); background:#12121Ccc;border:1px solid var(--trait); color:var(--lecture);font-size:.9rem; } /* Ce qui n'est pas une boutique où l'on achète mais une source de cotes se marque : mélangés, les deux laisseraient croire qu'on achète sur l'un comme sur l'autre. */ .marchands span.cote{color:var(--gris);border-style:dashed} .a-qui{ margin:0 0 22px;color:var(--lecture);font-size:1.06rem;line-height:1.5; max-width:64ch; } .a-qui b{color:var(--texte)} /* La garantie de la boutique. Elle est encadrée en vert et non en rouge : c'est une promesse tenue, pas un avertissement. Posée en petit sous le tableau, elle se lisait comme une clause — or c'est l'argument. */ .garantie{ margin:0 0 18px;padding:16px 20px;border-radius:var(--r-grand); background:#5FD97A0F;border:1px solid #5FD97A38; color:var(--lecture);font-size:.97rem;line-height:1.5;max-width:72ch; } .garantie b{color:#A8E7B8} /* Les notes vertes du panneau passent sur le décor de la ville : un trait de texte fin sur des toits et des fenêtres allumées se lit mal. Celle-ci dit qu'aucun paiement n'est prélevé — c'est la dernière qu'on peut se permettre de rendre illisible. */ .caisse{ display:inline-block;padding:9px 15px;border-radius:12px; background:#0A0A11D9;border:1px solid var(--trait);max-width:72ch; } /* Neuf pastilles sur un écran de 375 px tenaient sur cinq rangs : le bandeau faisait la moitié d'un écran pour une liste de noms. */ @media (max-width:520px){ .marchands{gap:7px;margin-bottom:24px} .marchands span:not(.intitule){padding:5px 11px;font-size:.82rem} .marchands .intitule{font-size:.72rem;width:100%;margin:0 0 2px} .questions summary{padding:16px 44px 16px 18px;font-size:1rem} .questions .reponse{padding:0 18px 18px} } .bandes{ display:grid;gap:16px;width:100%; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); } .bande-menu{ position:relative;overflow:hidden; display:flex;flex-direction:column;align-items:flex-start; padding:34px 32px 30px;border-radius:var(--r-grand); background:linear-gradient(165deg,#15151FF7,#0B0B12F7); border:1px solid var(--trait-vif);text-decoration:none; box-shadow:0 22px 60px #04040AA0; } /* La lueur de coin, qui donne sa couleur à la bande sans la peindre. */ .bande-menu::before{ content:"";position:absolute;inset:-40% -20% auto -20%;height:150%; background:radial-gradient(closest-side,var(--accent),transparent 72%); opacity:.17;pointer-events:none; } .bande-menu.logiciel{--accent:var(--feu)} .bande-menu.offre{--accent:var(--eau)} .bande-menu .etiquette{margin-bottom:12px} .bande-menu b{ font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.02em;line-height:1; color:var(--lecture);margin-bottom:20px;max-width:13ch; } .bande-menu p{ margin:0 0 26px;color:var(--lecture);font-size:1rem;line-height:1.4; letter-spacing:-.005em;max-width:37ch; } @media (prefers-reduced-motion:reduce){ .rail{transition:none} .bouton-plein:hover{transform:none} } @media (max-width:860px){ .panneau{padding:0 20px} .bande-menu{padding:24px 22px 22px} } /* La page ne défile pas tant que la balle est en l'air : on la regarde. */ html.ouverture-en-cours,html.ouverture-en-cours body{overflow:hidden} html.ouverture-en-cours .invite{opacity:0} .ouverture.part{opacity:0;transition:opacity .45s ease;pointer-events:none} @media (prefers-reduced-motion:reduce){ /* Pas de vol, pas de rotation : le menu est là, tout de suite. */ .jet-balle,.super-balle{animation:none;transform:none} .super-balle{--taille:min(30vmin,200px)} .moitie,.fermoir,.menu-ouverture{transition:none} .ouverture.ouvre .eclat,.ouverture.ouvre .onde-balle{animation:none;opacity:0} } @media (max-width:640px){ .super-balle{--taille:min(52vmin,260px)} /* Sur un téléphone les deux bandes se rangent l'une sous l'autre, et le texte se resserre : deux colonnes de 300 pixels n'y tiennent pas. */ .bande-menu{padding:24px 22px 22px} .bande-menu p{font-size:.88rem;margin-bottom:18px} } /* ── La traversee du ciel, le fil, et les quatre portes ────────────── On descend d'abord : cette hauteur-la n'est pas un vide oublie, c'est le chemin du ciel vers le sol, et c'est elle qui mesure la descente. Le fil n'apparait qu'apres, quand on a touche terre. */ /* Plus de hauteur imposée : ce sont les jalons qui donnent sa longueur à la traversée. Une hauteur fixe aurait soit tronqué le texte, soit laissé du vide au-dessous. Le minimum garantit qu'il reste du ciel à descendre même si les jalons venaient à disparaître. */ .traversee{ min-height:190vh;position:relative;padding-top:7vh; } /* L'invite se pose sur le PREMIER écran, pas au bout de la traversée : rangée en bas d'une boîte de deux écrans, elle attendait sous la ligne de flottaison celui qui ne savait pas encore qu'il fallait défiler. */ .invite{ font-family:var(--mono);font-size:.76rem;letter-spacing:.18em; text-transform:uppercase;color:var(--faible); display:flex;align-items:center;justify-content:center;gap:10px; white-space:nowrap;margin:7vh 0 0; opacity:calc(1 - var(--descente)); } .fleche{animation:invite 2.4s ease-in-out infinite;font-size:1rem} @keyframes invite{0%,100%{transform:translateY(-3px);opacity:.5} 50%{transform:translateY(4px);opacity:1}} /* Les jalons de la descente, en quinconce. Un bloc à gauche, le suivant à droite, et ainsi de suite jusqu'au fil : c'est la respiration de remix.run, et c'est aussi ce qui remplit la traversée du ciel au lieu de la laisser vide. La colonne reste étroite — le texte se lit en une portée d'œil, et c'est l'espace autour qui fait le rythme, pas la longueur des lignes. */ .jalons{ width:min(1100px,86vw);margin:22vh auto 30vh; display:grid;gap:min(24vh,230px); } /* Trois déplacements se superposent ici : le quinconce, le soulèvement au survol et le souffle de zoom. Écrits en « transform » séparés, le dernier déclaré efface les autres — c'est comme ça que le quinconce sautait au survol. Ils passent donc par trois variables, et le survol ne touche qu'aux variables, jamais à la propriété. */ .jalon{ width:min(520px,48%);position:relative;isolation:isolate; display:block;text-decoration:none;color:inherit; --decal:0px;--lever:0px;--zoom:1; transform:translateX(var(--decal)) translateY(var(--lever)) scale(var(--zoom)); transition:transform .24s cubic-bezier(.2,.7,.3,1); } /* La vignette du jalon : la même mécanique que celle des bulles, en plus large. Elle porte aussi les films. */ .jalon .vignette{ height:236px;margin-bottom:24px;border-radius:var(--r-grand); border:1px solid var(--trait);box-shadow:0 18px 46px #05050C7A; } /* Le même souffle que sur les repères du haut : la bulle grossit d'un rien, et le film part. Les jalons ne l'avaient pas — ils se contentaient de monter de quatre pixels, et la vidéo démarrait sans que rien ne l'annonce. */ .jalon:hover{--lever:-4px;--zoom:1.02} @media (min-width:1100px){ .jalon.gauche{--decal:-15%} .jalon.droite{--decal:15%} } @media (prefers-reduced-motion:reduce){ .jalon:hover{--lever:0px;--zoom:1} } /* Un voile derrière chaque bloc, sans bord. Les derniers jalons se lisent par-dessus les toits de la ville, qui arrive pendant qu'on descend : sans lui, le titre passait dans les tuiles. Sur le ciel de nuit il est de la même couleur que le fond et ne se voit pas. */ .jalon::before{ content:"";position:absolute;inset:-16% -8%;z-index:-1;pointer-events:none; background:radial-gradient(closest-side,#08080FE8,#08080F00 78%); } .jalon.droite{margin-left:auto} .jalon h2{max-width:none} .jalon p{margin:0;color:var(--lecture)} @media (max-width:860px){ /* Sous cette largeur, deux colonnes décalées ne décalent plus rien : les blocs prennent toute la place et se suivent simplement. */ .jalon,.jalon.droite{width:100%;margin-left:0} .jalons{gap:min(18vh,150px);margin:16vh auto 12vh} } .fil{ max-width:1080px;margin:0 auto;padding:0 24px 96px; border-top:none; } .fil h2{margin:0 0 12px} /* Les quatre portes. Chacune emmene le decor a sa place — elles ne chargent aucune page, et c'est pour ca qu'elles ne ressemblent pas a des liens ordinaires. */ .portes{ display:grid;gap:14px;margin:28px 0 46px; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); } .porte-lieu{ display:block;padding:20px 22px;border-radius:var(--r-grand); background:linear-gradient(180deg,#16161Ecc,#0F0F17cc); border:1px solid var(--trait);text-decoration:none; transition:transform .2s ease,border-color .2s ease,background-color .2s; } .porte-lieu b{display:block;color:var(--lecture);font-size:1.14rem; letter-spacing:-.02em;line-height:1.05;margin-bottom:8px} .porte-lieu small{display:block;color:var(--lecture);font-size:.94rem; line-height:1.4;letter-spacing:-.005em} .porte-lieu:hover{transform:translateY(-3px);border-color:var(--trait-vif)} .porte-lieu[aria-current]{ border-color:var(--feu);background:linear-gradient(180deg,#1C1620cc,#12101Acc); } .porte-lieu[aria-current] b::after{ content:" — ici";color:var(--feu);font-weight:500;font-size:.86rem; } @media (prefers-reduced-motion:reduce){ .repere:hover{--zoom:1} .porte-lieu:hover{transform:none} .fleche{animation:none} } /* Le fil proprement dit. */ .nouvelles{list-style:none;margin:0;padding:0;display:grid;gap:14px} .nouvelles li{ padding:20px 22px;border-radius:var(--r-grand); background:linear-gradient(180deg,#14141Ccc,#0E0E15cc); border:1px solid var(--trait);border-left:3px solid var(--accent); } .nouvelles time{ display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em; text-transform:uppercase;color:var(--faible);margin-bottom:7px; } .nouvelles b{display:block;font-size:1.28rem;letter-spacing:-.02em; line-height:1.05;color:var(--lecture);margin-bottom:9px} .nouvelles p{margin:0;color:var(--lecture);font-size:1rem; line-height:1.4;letter-spacing:-.005em;max-width:62ch} .nouvelles li:nth-child(1){--accent:var(--feu)} .nouvelles li:nth-child(2){--accent:var(--eau)} .nouvelles li:nth-child(3){--accent:var(--electrik)} /* La page du monde : le pied se pose en bas, et rien ne s'ecrit avant d'avoir touche terre — c'est le decor qu'on regarde d'abord. Elle ne s'appelle PAS « scene » : ce mot est deja celui des escarmouches du ciel, et le donner au lui collait leur « position:absolute » et leur largeur de 264 pixels. La page entiere se repliait en colonne etroite. */ .paysage{min-height:100vh;display:flex;flex-direction:column} .paysage > header,.paysage > main,.paysage > footer{width:100%} .paysage footer.bande{margin-top:auto;padding-top:56px} /* ── Le jour qui se leve ───────────────────────────────────────────── La lumiere monte depuis l'horizon, et seulement depuis l'horizon : le haut de l'ecran reste presque noir. C'est une contrainte de lisibilite avant d'etre un choix de dessin — le texte du site est clair, et un ciel de plein midi derriere lui ne se lit plus. Une aube laisse la page lisible et raconte la meme chose : on est arrive. */ .jour{ position:absolute;inset:0; opacity:calc(var(--descente) * .74); /* La bande chaude est calee juste au-dessus de la ligne de sol : plus bas, la terre la recouvre et il ne reste qu'un ciel bleu sans lever. */ background:linear-gradient(180deg, #0E1426 0%, #141C36 30%, #25355E 52%, #48486F 66%, #8A5F6E 76%, #C9834F 84%, #E8A96A 89%, #7A4A3C 96%, #3A2A2E 100%); } /* Les plans du decor, du plus loin au plus proche. Chacun parcourt une distance differente pendant la descente, et c'est la seule chose qui donne de la profondeur a des images plates : les montagnes se levent a peine, les collines un peu, la ville franchement, les buissons du premier plan traversent tout l'ecran. */ .montagnes{ position:absolute;left:-45%;right:-45%;bottom:46%;height:40%; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 90' preserveAspectRatio='none'%3E%3Cpath d='M0 90 L0 66 Q14 60 24 46 Q33 33 41 22 Q48 13 55 24 Q63 36 72 50 Q80 62 90 54 Q99 47 106 33 Q114 18 124 9 Q131 3 138 16 Q147 33 156 48 Q163 60 172 55 Q182 49 190 36 Q198 24 208 14 Q215 7 222 20 Q231 37 240 52 Q248 64 258 57 Q267 51 274 38 Q282 24 292 15 Q299 9 306 22 Q315 39 324 53 Q332 65 342 58 Q351 52 358 40 Q366 27 376 20 Q384 15 390 28 Q395 39 400 46 L400 90 Z' fill='%23131A2E'/%3E%3Cpath d='M0 90 L0 78 Q18 74 30 64 Q42 55 52 60 Q63 66 74 72 Q86 78 98 70 Q110 62 122 56 Q134 50 146 60 Q158 70 170 74 Q182 78 194 68 Q206 58 218 54 Q230 50 242 62 Q254 74 266 76 Q278 78 290 68 Q302 58 314 55 Q326 52 338 63 Q350 74 362 76 Q376 78 388 70 Q394 66 400 68 L400 90 Z' fill='%230E1424'/%3E%3C/svg%3E") bottom/56% 100% repeat-x; transform:translateX(calc(var(--lieu) * -6vw)) translateY(calc((1 - var(--descente)) * -74%)); transition:transform .95s cubic-bezier(.3,.72,.24,1); } .avant{ position:absolute;left:-140%;right:-140%;bottom:0;height:26%; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cg fill='%23090910'%3E%3Crect y='30' width='400' height='30'/%3E%3Cellipse cx='24' cy='32' rx='32' ry='13'/%3E%3Cellipse cx='78' cy='30' rx='26' ry='11'/%3E%3Cellipse cx='142' cy='33' rx='34' ry='14'/%3E%3Cellipse cx='206' cy='29' rx='24' ry='10'/%3E%3Cellipse cx='262' cy='33' rx='30' ry='13'/%3E%3Cellipse cx='322' cy='30' rx='26' ry='11'/%3E%3Cellipse cx='382' cy='32' rx='32' ry='13'/%3E%3C/g%3E%3C/svg%3E") bottom/29% 100% repeat-x; transform:translateX(calc(var(--lieu) * -118vw)) translateY(calc((1 - var(--descente)) * 135%)); transition:transform .95s cubic-bezier(.3,.72,.24,1); } /* La lune. Elle se couche a mesure que le jour se leve — c'est le meme nombre qui fait les deux, et ils ne peuvent donc pas se contredire. */ .lune{ /* Les 60 pixels sont ceux dont le ciel déborde de la fenêtre : sans eux, « right:13% » se compte depuis un bord qui n'existe pas à l'écran, et sur un téléphone la lune était coupée en deux par le coin. */ position:absolute;right:calc(13% + 60px);top:calc(9% + 60px); width:clamp(44px,5.2vw,80px);height:clamp(44px,5.2vw,80px); border-radius:50%; background: radial-gradient(circle at 62% 66%,#00000018 0 9%,transparent 10%), radial-gradient(circle at 38% 46%,#0000001E 0 7%,transparent 8%), radial-gradient(circle at 56% 27%,#00000014 0 5%,transparent 6%), radial-gradient(circle at 34% 30%,#FFFBEE,#F1E6C8 44%,#CFC09B 76%,#A8996F); box-shadow:0 0 22px #FFF3D030,0 0 68px #FFEEC020,inset -7px -6px 16px #00000030; opacity:calc(1 - .56 * var(--descente)); transform:translate3d(calc(var(--mx) * 4px + var(--lieu) * -1vw), calc(var(--my) * 4px),0); transition:transform .55s cubic-bezier(.22,.61,.36,1); } /* Quelques nuages, qui traversent lentement. La tuile est large et la translation vaut exactement sa largeur : c'est ce qui evite le saut a chaque tour. Ils se voient surtout au lever du jour — de nuit, un nuage n'est qu'une absence d'etoiles. */ .nuages{ --tuile:1200px; position:absolute;left:0;right:0;top:5%;height:32%; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 220'%3E%3Cg fill='%23FFFFFF'%3E%3Cg opacity='.5'%3E%3Cellipse cx='140' cy='110' rx='46' ry='22'/%3E%3Cellipse cx='192' cy='96' rx='58' ry='29'/%3E%3Cellipse cx='248' cy='112' rx='40' ry='20'/%3E%3Cellipse cx='198' cy='122' rx='92' ry='17'/%3E%3C/g%3E%3Cg opacity='.34'%3E%3Cellipse cx='578' cy='74' rx='38' ry='18'/%3E%3Cellipse cx='624' cy='60' rx='50' ry='25'/%3E%3Cellipse cx='672' cy='76' rx='34' ry='16'/%3E%3Cellipse cx='626' cy='84' rx='78' ry='14'/%3E%3C/g%3E%3Cg opacity='.42'%3E%3Cellipse cx='918' cy='144' rx='42' ry='20'/%3E%3Cellipse cx='966' cy='130' rx='54' ry='27'/%3E%3Cellipse cx='1016' cy='146' rx='36' ry='18'/%3E%3Cellipse cx='968' cy='154' rx='86' ry='16'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat-x 0 bottom/var(--tuile) auto; opacity:calc(.12 + .34 * var(--descente)); animation:passe 215s linear infinite; /* Les nuages suivent eux aussi, un peu plus que la lune. */ translate:calc(var(--lieu) * -3vw) 0; transition:translate .95s cubic-bezier(.3,.72,.24,1); } @keyframes passe{ from{background-position-x:0} to{background-position-x:calc(-1 * var(--tuile))} } /* ── L'arrivée au sol ──────────────────────────────────────────────── Plus on descend dans la page, plus on se rapproche du sol : les étoiles s'éteignent, l'horizon se courbe — on tombe vers une planète, pas vers un plancher — et la ville finit par se tenir devant nous, éclairée. Rien de tout cela n'est déclenché par un minuteur : c'est « --descente », posé par le script à chaque défilement, qui mène tout le décor. Les éléments ne parcourent pas la même distance, et c'est ce qui donne la profondeur : les collines montent lentement, le sol plus vite, la ville plus vite encore puisqu'elle est la plus proche. La ville est une illustration faite pour ce site, livrée comme fichier image. Reprendre une vraie image de bourgade Pokémon reviendrait à publier le dessin de quelqu'un d'autre sur un site public. */ .sol{ position:absolute;left:60px;right:60px;bottom:60px; height:min(54vh,430px); --bw:min(230px,34vw); transform:translateY(calc((1 - var(--descente)) * 106%)); } .horizon{ position:absolute;left:-10%;right:-10%;bottom:26%;height:44%; background: radial-gradient(58% 100% at 46% 100%,#FF5A4E22,transparent 74%), radial-gradient(80% 100% at 66% 100%,#3D8BFF1C,transparent 78%); opacity:var(--descente); } .collines{ position:absolute;left:-60%;right:-60%;bottom:27%;height:17%; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 L0 36 Q34 12 62 30 Q92 48 120 22 Q150 -2 186 26 Q214 46 244 20 Q276 -6 310 24 Q340 48 372 28 L400 18 L400 60 Z' fill='%230D0D18'/%3E%3C/svg%3E") bottom/46% 100% repeat-x; transform:translateX(calc(var(--lieu) * -15vw)) translateY(calc((1 - var(--descente)) * -54%)); transition:transform .95s cubic-bezier(.3,.72,.24,1); } /* Le bord courbe : c'est lui qui dit qu'on arrive sur une planète. Un trait droit ne serait qu'un plancher. */ .terre{ position:absolute;left:-14%;right:-14%;bottom:0;height:32%; background:linear-gradient(180deg,#2E2D39,#1A1A24 42%,#0E0E16); border-top:1px solid #24243866; border-radius:50% 50% 0 0 / 22% 22% 0 0; } /* La ville est une illustration, pas un empilement de rectangles : un fichier image a part, dessine pour ce site. Elle est posee au fond de la scene et garde ses proportions — sur un ecran tres large, le decor la laisse au milieu de la plaine plutot que de l'etirer. */ /* Le monde tient sur une bande de trois lieux poses cote a cote : la plaine a gauche, la ville au milieu, l'arene a droite. Changer d'onglet ne remplace pas le decor, il le fait glisser d'une largeur d'ecran — c'est pour ca que les trois dessins partagent la meme ligne de sol et les memes teintes sur leurs bords. */ .monde{ position:absolute;left:0;right:0;bottom:36%; aspect-ratio:1600/520; max-height:min(64vh,520px); transform:translateX(calc(var(--lieu) * -100%)) translateY(calc((1 - var(--descente)) * 34%)); transition:transform .95s cubic-bezier(.3,.72,.24,1); } .lieu{ /* Une largeur, pas un « inset:0 » : avec « right:0 » qui traîne, le voisin posé à « left:100 % » se retrouvait large de zéro pixel. Il glissait donc bien, mais il n'y avait rien à voir. */ position:absolute;top:0;bottom:0;left:0;width:100%; background-position:bottom center;background-size:cover; background-repeat:no-repeat; } .labo{left:-200%;background-image:url("labo.svg")} .plaine{left:-100%;background-image:url("plaine.svg")} .ville{background-image:url("ville.svg")} .arene{left:100%;background-image:url("arene.svg")} /* Un écran tactile n'a pas de curseur : sans dérive, son ciel serait mort. */ @media (hover:none){ .couche{animation:derive var(--duree) linear infinite alternate} .c1{--duree:130s} .c2{--duree:96s} .c3{--duree:74s} } @keyframes derive{ from{transform:translate3d(-16px,-9px,0)} to{transform:translate3d(16px,9px,0)} } @media (prefers-reduced-motion:reduce){ .couche{transition:none;animation:none;transform:none} /* Une bagarre immobile n'est plus qu'une tache : elle se retire. */ .bataille{display:none} /* Le décor du sol ne se retire pas, il est simplement déjà arrivé : rien ne bouge au défilement, et la ville est là dès le premier écran. */ :root{--descente:1} .sol,.collines,.monde,.montagnes,.avant,.lune{transform:none} /* Le glissement d'un onglet se fait alors d'un coup, sans course. */ .monde,.montagnes,.collines,.avant{transition:none} .nuages{animation:none} } .bande{max-width:1080px;margin:0 auto;padding:0 24px} .etroit{max-width:820px} /* ── En-tête de navigation ──────────────────────────────────────────── L'en-tête reste en haut de l'écran pendant toute la descente. Poussé hors de vue avec le reste, il fallait remonter cinq écrans pour savoir ce que le site contient — et le bouton qui mène au téléchargement n'existait qu'à deux endroits, tous les deux en bas. La bande colorée traverse la fenêtre, la barre reste au gabarit des 1080 pixels : la largeur du contenu se pose donc sur « .barre » et non sur « header.bande », sinon le fond flouté s'arrêtait au bord du texte et laissait passer le ciel de chaque côté. */ header.bande{ position:sticky;top:0;z-index:40; max-width:none;padding:0; background:#0C0C10C4; backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--trait); } .barre{ display:flex;align-items:center;justify-content:center;gap:14px; max-width:1080px;margin:0 auto;padding:14px 24px; } .barre .marque{ display:flex;align-items:center;gap:13px; font-weight:700;font-size:1.3rem;letter-spacing:-.025em; color:var(--texte);text-decoration:none; } /* Un peu plus grosse que la balle du pied, qui reste à 26 px. */ .barre .marque .balle{--taille:34px} .barre nav{margin-left:auto;display:flex;gap:22px;align-items:center} .barre nav a{ color:var(--gris);text-decoration:none;font-size:.9rem;font-weight:500; transition:color .18s; } .barre nav a:hover{color:var(--texte)} /* Un seul bouton plein dans toute la barre, et c'est celui-là. Deux appels à l'action de même poids, c'est aucun : on ne sait plus lequel est le chemin normal. */ .barre nav a.appel{ padding:9px 17px;border-radius:var(--pilule); background:var(--feu);color:#14060A;font-weight:700; transition:filter .18s,transform .18s; } .barre nav a.appel:hover{filter:brightness(1.08);transform:translateY(-1px)} /* Sur un téléphone, les quatre rubriques ne tiennent pas à côté de la marque. Deux restent : le bouton, et les questions. Les questions parce qu'aucune porte du fil n'y mène — retirée de la barre, la FAQ devenait introuvable sur un écran étroit, alors que c'est justement là qu'on lit les réponses avant de télécharger quoi que ce soit. */ @media (max-width:760px){ .barre{padding:11px 18px;gap:10px} .barre nav{gap:14px} .barre nav a:not(.appel):not(.garde){display:none} .barre nav a.appel{padding:8px 14px} } @media (max-width:420px){ .barre .marque{font-size:1.08rem;gap:9px} .barre .marque .balle{--taille:26px} } @media (prefers-reduced-motion:reduce){ .barre nav a.appel:hover{transform:none} } /* ── La balle ─────────────────────────────────────────────────────── Le même dessin que dans l'application : point spéculaire franc en haut à gauche, bord assombri, rebond du sol en bas à droite, et les deux arêtes de la ceinture. Sans ces quatre couches, c'est un disque à deux couleurs. */ .balle{ --taille:76px; width:var(--taille);height:var(--taille);flex:none; border-radius:50%;position:relative; background: radial-gradient(circle at 33% 20%, #ffffffe0 0 5%, #ffffff4a 11%, transparent 21%), radial-gradient(circle at 72% 84%, #ffffff33 0 7%, transparent 28%), radial-gradient(circle at 50% 50%, transparent 0 53%, #00000055 80%, #000000aa 100%), linear-gradient(180deg, transparent 0 46%, #ffffff4d 46% 47.5%, transparent 47.5% 52.5%, #00000059 52.5% 54%, transparent 54% 100%), linear-gradient(180deg,var(--feu) 0 46%,#15151B 46% 54%,#F2EFE8 54% 100%); box-shadow: inset -6px -8px 16px #00000066, inset 5px 5px 12px #ffffff1f, 0 14px 40px #00000080; } .balle::after{ content:"";position:absolute;left:50%;top:50%; width:calc(var(--taille) * .29);height:calc(var(--taille) * .29); transform:translate(-50%,-50%);border-radius:50%; background:radial-gradient(circle at 38% 34%,#fff 0 40%,#E4E0D8 100%); border:calc(var(--taille) * .04) solid #15151B; } .balle.mini{--taille:26px} .balle.geante{--taille:132px} /* Le halo derrière la grande balle, et l'ombre qu'elle porte au sol. */ .balle-scene{ position:relative;display:grid;place-items:center; padding:26px 0 34px; } .balle-scene::before{ content:"";position:absolute;width:340px;height:340px;border-radius:50%; background:radial-gradient(circle,#FF5A4E30,transparent 62%); filter:blur(12px); } .balle-scene::after{ content:"";position:absolute;bottom:16px;width:120px;height:16px; border-radius:50%; background:radial-gradient(ellipse at 50% 50%,#000000b0 0 38%,transparent 72%); filter:blur(4px); } .balle-scene .balle{animation:flotte 4.4s ease-in-out infinite} @keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}} @media (prefers-reduced-motion:reduce){ .balle-scene .balle{animation:none} } /* ── Hero ───────────────────────────────────────────────────────────── */ .hero{padding:26px 0 78px;text-align:center} .hero h1{ margin:0 0 20px; font-size:clamp(2.4rem,7.2vw,4.6rem); line-height:1.03; letter-spacing:-.035em; font-weight:800; } /* Le dégradé traverse les cinq types, dans l'ordre où on les rencontre en jouant. Il ne porte aucune information : il donne le ton, et le texte reste lisible sans lui — c'est pourquoi la première ligne n'en a pas. */ .flamme{ background:linear-gradient(100deg,var(--feu),var(--electrik) 32%,var(--plante) 58%,var(--eau) 82%,var(--psy)); -webkit-background-clip:text;background-clip:text;color:transparent; } .hero .chapeau{ margin:0 auto;max-width:620px; color:var(--gris);font-size:clamp(1rem,2.2vw,1.16rem); } .actions{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:34px} .dessous{margin-top:18px;color:var(--faible);font-size:.83rem;font-family:var(--mono)} /* ── Boutons ────────────────────────────────────────────────────────── */ .bouton{ display:inline-flex;align-items:center;gap:9px; padding:13px 26px;border-radius:var(--pilule); font-weight:650;font-size:.98rem;text-decoration:none; border:1px solid transparent; transition:transform .18s ease,box-shadow .18s ease,border-color .18s; } .bouton.principal{ background:var(--feu);color:#1A0B0A; box-shadow:0 10px 30px #FF5A4E38; position:relative;overflow:hidden; } /* Le reflet holographique d'une carte brillante, incliné, qui traverse le bouton au survol. Un seul endroit du site le porte : partout, ce serait une vitrine de casino. */ .bouton.principal::after{ content:"";position:absolute;inset:-60% -20%; background:linear-gradient(74deg,transparent 42%,#ffffff85 50%,transparent 58%); transform:translateX(-130%); } .bouton.principal:hover::after{transition:transform .75s ease;transform:translateX(130%)} .bouton.principal:hover{transform:translateY(-2px);box-shadow:0 14px 38px #FF5A4E55} .bouton.second{ background:var(--surface);color:var(--texte);border-color:var(--trait-vif); } .bouton.second:hover{transform:translateY(-2px);border-color:var(--gris)} @media (prefers-reduced-motion:reduce){ .bouton:hover{transform:none} .bouton.principal:hover::after{transition:none;transform:translateX(-130%)} } /* ── Sections ───────────────────────────────────────────────────────── */ section{padding:74px 0;border-top:1px solid var(--trait)} /* La barre de couleur reste ici ; les mesures du texte, elles, sont plus haut avec le reste de la disposition. Deux règles « .etiquette » complètes cohabitaient, et c'est celle du bas qui l'emportait — les tailles relevées sur remix.run n'avaient donc jamais pris. */ .etiquette::before{ content:"";width:22px;height:3px;border-radius:2px;background:var(--accent); } h2{ margin:0 0 20px; font-size:clamp(2rem,4.4vw,3.36rem); letter-spacing:-.02em;font-weight:700;line-height:1; color:var(--lecture);max-width:14ch; } .sous{margin:0 0 34px;color:var(--lecture);font-size:1rem; line-height:1.4;letter-spacing:-.005em;max-width:37ch} /* ── Cartes ─────────────────────────────────────────────────────────── */ .grille{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(268px,1fr))} .carte{ position:relative;padding:26px 24px;border-radius:var(--r-grand); background:linear-gradient(180deg,var(--surface),var(--fond-2)); border:1px solid var(--trait); transition:transform .2s ease,border-color .2s ease; } /* La barre de type en haut de la carte : c'est elle qui donne la couleur, et elle est toujours doublée d'un mot — une couleur seule ne dit rien à qui ne la distingue pas. */ .carte::before{ content:"";position:absolute;top:0;left:24px;right:24px;height:2px; border-radius:0 0 2px 2px;background:var(--accent);opacity:.85; } .carte:hover{transform:translateY(-3px);border-color:var(--trait-vif)} .carte h3{margin:0 0 9px;font-size:1.06rem;letter-spacing:-.01em} .carte p{margin:0;color:var(--gris);font-size:.93rem} .carte .type{ display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em; text-transform:uppercase;color:var(--accent);margin-bottom:10px; } @media (prefers-reduced-motion:reduce){.carte:hover{transform:none}} /* Chaque section pose son type ; les cartes en héritent. */ .feu{--accent:var(--feu)} .eau{--accent:var(--eau)} .plante{--accent:var(--plante)} .electrik{--accent:var(--electrik)} .psy{--accent:var(--psy)} /* ── Chiffres ───────────────────────────────────────────────────────── */ .chiffres{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))} .chiffre{ padding:24px;border-radius:var(--r); background:var(--surface);border:1px solid var(--trait); } .chiffre b{ display:block;font-size:clamp(1.9rem,4vw,2.5rem);line-height:1; letter-spacing:-.04em;font-weight:800;font-variant-numeric:tabular-nums; color:var(--accent); } .chiffre small{display:block;margin-top:9px;color:var(--faible);font-size:.82rem} /* ── Citation ───────────────────────────────────────────────────────── */ blockquote{ margin:0;padding:30px 32px;border-radius:var(--r-grand); background:linear-gradient(180deg,var(--surface),var(--fond-2)); border:1px solid var(--trait);border-left:3px solid var(--accent); } blockquote p{margin:0 0 14px;font-size:1.06rem;line-height:1.6} blockquote p:last-child{margin:0;color:var(--gris);font-size:.92rem} /* ── Code et empreintes ─────────────────────────────────────────────── */ code,.mono{font-family:var(--mono)} code.bloc{ display:block;margin-top:10px;padding:12px 14px;border-radius:10px; background:#0A0A0Ecc;border:1px solid var(--trait); color:var(--gris);font-size:.76rem;line-height:1.55;word-break:break-all; } /* ── Pied ───────────────────────────────────────────────────────────── */ /* Le sélecteur porte « .bande » parce que le pied la porte aussi, et que « .bande{padding:0 24px} » l'emporte sur un simple « footer » : l'écart vertical écrit ici n'a jamais existé à l'écran avant cette correction. Il compte maintenant : le dernier écran est celui de l'arrivée, et sans lui la ville reste entièrement derrière les cartes et le pied de page — on descend vers un décor qu'on ne voit jamais. */ footer.bande{ padding:min(50vh,390px) 24px 72px;border-top:1px solid var(--trait); color:var(--gris);font-size:.86rem; /* Le pied se lit maintenant par-dessus une rue éclairée par l'aube : le gris le plus sombre du site y descendait à moins de 2 pour 1. */ text-shadow:0 1px 4px #0A0A12,0 0 12px #0A0A1299; } footer a{color:var(--eau);text-decoration:none} footer a:hover{text-decoration:underline} .pied-haut{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:20px} /* ── Écrans étroits ─────────────────────────────────────────────────── */ @media (max-width:640px){ section{padding:56px 0} /* Sur un téléphone, « Premier lancement » se coupait en deux lignes et poussait l'en-tête à deux étages. Les entrées ne se coupent plus ; c'est la barre entière qui passe à la ligne si la place manque. */ .barre{flex-wrap:wrap;row-gap:4px} .barre nav{gap:15px;font-size:.85rem} .barre nav a{white-space:nowrap} /* Deux bagarres sur 375 pixels se marchent dessus : la lointaine se retire et l'autre remonte au-dessus du titre. */ .scene.loin{display:none} .scene.proche{--l:30px;left:3%;top:44%} /* Sur un téléphone, le pied occupe les deux cents derniers pixels de l'écran : une ville posée en bas se retrouve derrière son texte, et c'est le texte qu'on ne lit plus. Elle recule donc jusqu'à l'horizon — plus petite, plus haut, et le sol monte d'autant pour qu'elle reste plantée dessus au lieu de flotter. */ .sol{height:min(72vh,560px)} .terre{height:46%} .collines{bottom:44%;height:12%} .horizon{bottom:40%;height:34%} /* La ville deborde volontairement de l'ecran : cadrer la bourgade entiere sur 375 pixels la reduirait a une frise illisible. */ /* Sur 375 pixels, la bourgade entière tiendrait dans une frise de cent vingt pixels de haut. On garde donc la hauteur, et c'est la largeur qui déborde : d'un bord à l'autre de l'écran, et le cœur au milieu. */ .monde{bottom:40%;aspect-ratio:auto;height:27vh;max-height:none} .lieu{background-size:auto 100%} .traversee{min-height:170vh;padding-top:4vh} .invite{margin-top:5vh} .portes{gap:11px} .porte-lieu{padding:16px 18px} .nuages{--tuile:700px;top:4%;height:26%} .montagnes{bottom:49%;height:19%} .avant{height:11%} .lune{right:calc(7% + 60px);top:calc(6% + 60px)} footer.bande{padding-top:min(38vh,250px)} .balle-scene::before{width:240px;height:240px} }