/* ═══ 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{
  /* 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;
  --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;
  /* De 0 en haut de la page à 1 quand on est arrivé au sol. Le script le
     pose ; tout le décor s'y accroche. */
  --descente:0;
}
.couche{
  position:absolute;inset:0;
  transform:translate3d(calc(var(--mx) * var(--force)),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 - .56 * 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:7px;
  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%);
  background-size:560px 560px;
}
.c2{
  --force:16px;
  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,#FFFFFFBE 0 58%,#FFFFFF00 100%),
    radial-gradient(1.4px 1.4px at 588px 591px,#FFFFFFB3 0 58%,#FFFFFF00 100%),
    radial-gradient(1.8px 1.8px at 452px 248px,#FFFFFF9C 0 58%,#FFFFFF00 100%),
    radial-gradient(1.5px 1.5px at 313px 649px,#FFFFFFC5 0 58%,#FFFFFF00 100%),
    radial-gradient(1.6px 1.6px at 475px 700px,#FFFFFFC4 0 58%,#FFFFFF00 100%),
    radial-gradient(2.0px 2.0px at 110px 465px,#FFFFFFCE 0 58%,#FFFFFF00 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%);
  background-size:760px 760px;
}
.c3{
  --force:30px;
  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,#FFFFFFF5 0 58%,#FFFFFF00 100%),
    radial-gradient(2.7px 2.7px at 401px 32px,#FFFFFFF2 0 58%,#FFFFFF00 100%),
    radial-gradient(2.6px 2.6px at 145px 885px,#FFFFFFDC 0 58%,#FFFFFF00 100%),
    radial-gradient(2.9px 2.9px at 690px 818px,#FFFFFFE7 0 58%,#FFFFFF00 100%),
    radial-gradient(3.1px 3.1px at 220px 628px,#FFFFFFCF 0 58%,#FFFFFF00 100%),
    radial-gradient(2.4px 2.4px at 88px 946px,#FFFFFFC5 0 58%,#FFFFFF00 100%),
    radial-gradient(3.0px 3.0px at 918px 348px,#FFFFFFD0 0 58%,#FFFFFF00 100%),
    radial-gradient(2.1px 2.1px at 248px 134px,#FFFFFFF9 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. */
.bataille{--force:4px;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{left:6%;top:15%}
.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:34px;--cycle:23s;
  right:8%;top:26%;opacity:.55;
  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)}
}

/* ── 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:var(--descente);
  /* 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:-8%;right:-8%;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 64 L36 28 L62 54 L94 16 L132 58 L166 32 L204 68 L236 38 L270 62 L304 22 L340 56 L370 36 L400 58 L400 90 Z' fill='%23131A2E'/%3E%3Cpath d='M0 90 L0 76 L44 56 L78 72 L118 48 L156 74 L196 54 L232 76 L272 52 L310 72 L348 54 L400 74 L400 90 Z' fill='%230E1424'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;
  transform:translateY(calc((1 - var(--descente)) * -74%));
}
.avant{
  position:absolute;left:-5%;right:-5%;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/100% 100% no-repeat;
  transform:translateY(calc((1 - var(--descente)) * 135%));
}

/* 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 - var(--descente));
  transform:translate3d(calc(var(--mx) * 3px),calc(var(--my) * 3px),0);
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}

/* ── 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:-6%;right:-6%;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/100% 100% no-repeat;
  transform:translateY(calc((1 - var(--descente)) * -54%));
}
/* 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. */
.ville{
  position:absolute;left:0;right:0;bottom:30%;
  height:100%;
  background:url("ville.svg") bottom center/contain no-repeat;
  transform:translateY(calc((1 - var(--descente)) * 34%));
}

/* 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. */
  .ciel{--descente:1}
  .sol,.collines,.ville,.montagnes,.avant,.lune{transform:none}
}

.bande{max-width:1080px;margin:0 auto;padding:0 24px}
.etroit{max-width:820px}

/* ── En-tête de navigation ──────────────────────────────────────────── */
.barre{
  display:flex;align-items:center;gap:14px;
  padding:20px 0;
}
.barre .marque{
  display:flex;align-items:center;gap:11px;
  font-weight:700;font-size:1.05rem;letter-spacing:-.02em;
  color:var(--texte);text-decoration:none;
}
.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)}

/* ── 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)}
.etiquette{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:.74rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}
.etiquette::before{
  content:"";width:22px;height:3px;border-radius:2px;background:var(--accent);
}
h2{
  margin:0 0 12px;
  font-size:clamp(1.6rem,3.6vw,2.4rem);
  letter-spacing:-.028em;font-weight:750;line-height:1.15;
}
.sous{margin:0 0 34px;color:var(--gris);font-size:1.02rem;max-width:640px}

/* ── 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:40px;left:3%;top:11%}
  /* 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. */
  .ville{bottom:40%;height:40%;background-size:auto 100%}
  .montagnes{bottom:52%;height:26%}
  .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}
}