/* Page launcher.bee-life.fr (chantier 1954). En haut, l'écran titre du launcher : ciel, nuages, herbe (scene.js).
   En dessous, le sous-sol : la même terre, assombrie pour que les panneaux en bois se lisent dessus.
   Logo, boutons en relief, boîtes et champ viennent de style.css du launcher, chargé avant ce fichier. */
*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-color: var(--pierre) var(--panneau-sombre); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--panneau-sombre); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, p, ol, ul, figure { margin: 0; padding: 0; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: var(--miel); color: #2a1806; }
:target { scroll-margin-top: 24px; }
b { font-weight: 600; color: var(--texte); }
/* Commandes : la ligne de discussion du jeu, texte blanc sur noir, d'un seul bloc. */
code { display: inline-block; max-width: 100%; padding: 2px 8px; font: 16px/1.4 var(--pixel); color: #fff; background: #000; overflow-wrap: anywhere; }
.boite a:not(.bouton) { color: var(--miel-clair); text-underline-offset: 3px; }
.boite a:not(.bouton):hover { color: #fff; }

/* Écran titre : une colonne centrée, comme le menu principal du jeu. */
.titre { position: relative; overflow: hidden; padding: 72px 20px 156px; background: var(--ciel); }
.titre-contenu { position: relative; max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.titre :focus-visible { outline-color: var(--bord); }
.titre .logo { margin-bottom: 10px; }
.accroche { max-width: 30em; font-size: 19px; line-height: 1.4; color: var(--panneau); }
.telecharger { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.bouton.principal { width: 100%; height: auto; min-height: 60px; padding: 8px 16px; font-size: 23px; white-space: normal; }
.choix { display: flex; flex-direction: column; gap: 10px; }
.choix .bouton.principal { font-size: 19px; }
.indice, .detail { font-size: 16px; line-height: 1.35; color: var(--panneau); }
.mobile { padding: 14px 16px; font-size: 17px; line-height: 1.4; color: var(--texte); background: var(--panneau); border: 3px solid var(--bord);
  box-shadow: inset 3px 3px 0 var(--panneau-clair), inset -3px -3px 0 var(--panneau-sombre); }
.bouton.large, .secondaires { width: 100%; }
.secondaires .bouton { padding: 0 10px; }

/* Sous-sol : tuile de terre de 16 pixels de 6 px (page.js), voile sombre uni pour calmer le motif sous le texte. */
.sous-sol { display: grid; justify-items: center; gap: 40px; padding: 56px 20px 80px; image-rendering: pixelated;
  background: linear-gradient(rgb(26 17 8 / .5), rgb(26 17 8 / .5)), var(--terre, #6e4e33) 0 0 / 96px 96px; }
.sous-sol > * { width: 100%; max-width: 1040px; }
.sous-sol .boite { width: 100%; gap: 16px; padding: 22px 26px 26px; }
.boite h2 { font-size: 28px; }
.boite p, .boite li { font-size: 17px; line-height: 1.45; color: var(--texte-2); }

/* Toutes les versions : des entrées comme la liste des serveurs du jeu ; celle du visiteur cerclée de miel. */
.liste { list-style: none; display: grid; gap: 8px; }
.liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 20px; padding: 12px 12px 12px 18px;
  background: var(--panneau-sombre); border: 2px solid var(--panneau-sombre); }
.liste li.ton-systeme { border-color: var(--miel); }
.v-nom strong { display: block; font-size: 20px; font-weight: 600; color: var(--texte); }
.v-nom span { font-size: 15px; }
.marque { margin-left: 10px; font-size: 15px; font-weight: 400; color: var(--miel); white-space: nowrap; }
.v-info { font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.liste .bouton { min-width: 150px; }

/* Les trois étapes côte à côte, puis l'accueil du launcher en grand, à la largeur des panneaux. */
.etapes { display: grid; gap: 28px; }
.pas { list-style: none; counter-reset: pas; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 28px; }
.pas li { counter-increment: pas; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-content: start; gap: 4px 14px; }
.pas li::before { content: counter(pas); grid-row: span 2; font-size: 40px; font-weight: 700; line-height: 1; color: #f6c445;
  text-shadow: 2px 0 var(--bord), -2px 0 var(--bord), 0 2px var(--bord), 0 -2px var(--bord), 0 4px var(--miel-fonce), 0 6px var(--bord); }
.pas h3 { font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--texte); }
.capture { border: 3px solid var(--bord); background: var(--bord); }
.capture img { display: block; width: 100%; height: auto; image-rendering: auto; }

/* Premier lancement (onglets par système) et jeu sans le launcher, côte à côte. */
.duo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: start; }
.onglets { display: flex; gap: 8px; }
.onglets .bouton { flex: 1; height: 40px; font-size: 17px; }
.onglets .bouton[aria-selected="true"] { background: var(--miel); color: #2a1806; text-shadow: 1px 1px 0 rgba(255, 236, 180, .55);
  box-shadow: inset 2px 2px 0 var(--miel-clair), inset -2px -3px 0 var(--miel-fonce); }
.panneau h3 { font-size: 19px; font-weight: 600; color: var(--texte); margin-bottom: 8px; }
.js .panneau h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.panneau ol { padding-left: 1.3em; display: grid; gap: 10px; }
.panneau li::marker { color: var(--miel); }
.adresse { display: flex; gap: 8px; }
.adresse input { flex: 1; min-width: 0; height: 44px; font-size: 19px; }
.adresse .bouton { flex: none; min-width: 108px; }
.commandes { display: grid; justify-items: start; gap: 6px; }
.commandes code + p { margin-top: 8px; }

.pied { display: grid; gap: 6px; padding: 22px 20px 30px; text-align: center; font-size: 15px; line-height: 1.4; color: var(--texte-2);
  background: var(--panneau-sombre); border-top: 3px solid var(--bord); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@media (max-width: 900px) {
  .duo, .pas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .titre { padding: 44px 16px 132px; }
  .titre .logo-texte { font-size: 56px; text-shadow: 3px 0 var(--bord), -3px 0 var(--bord), 0 3px var(--bord), 0 -3px var(--bord), 0 6px var(--miel-fonce), 0 9px var(--bord), 3px 9px var(--bord), -3px 9px var(--bord); }
  .titre .abeille { width: 52px; height: 32px; }
  .titre .logo { margin-bottom: 26px; }
  .splash { right: -6px; bottom: -20px; font-size: 16px; }
  .accroche { font-size: 17px; }
  .secondaires, .choix .rangee { flex-direction: column; }
  .sous-sol { gap: 28px; padding: 36px 12px 56px; }
  .sous-sol .boite { padding: 18px 16px 20px; }
  .boite h2 { font-size: 24px; }
  .liste li { grid-template-columns: minmax(0, 1fr) auto; padding: 12px; }
  .v-nom { grid-column: 1 / -1; }
  .liste .bouton { min-width: 0; }
}