/* La page d'accueil : une seule scène. Le logo, la session de lecture dans un téléphone, un curseur pour
   changer de saison, et « Bientôt sur Google Play ». Thème Nuit étoilée (bleu nuit + or). */

/* Le logo seul, sans barre d'en-tête (aussi sur les autres pages) */
.logo { position: absolute; top: 26px; left: 30px; z-index: 5; display: block; }
.logo img { height: 24px; width: auto; display: block; }
@media (max-width: 600px) { .logo { top: 20px; left: 16px; } .logo img { height: 22px; } }

.solo { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 64px 16px 32px; }

/* Le téléphone */
.device { position: relative; height: min(calc(100svh - 290px), 640px); min-height: 380px; aspect-ratio: 9 / 20; border-radius: 42px; padding: 10px;
  background: linear-gradient(155deg, #1f2746, #05060d 60%); border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: 0 50px 120px rgba(0, 0, 0, .7), 0 0 110px rgba(246, 207, 122, .10); }
.device .screen { position: relative; width: 100%; height: 100%; border-radius: 33px; overflow: hidden; background: #05060d; }
.season { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.season[data-i="0"] { opacity: 1; }
.season { z-index: 0; }
.snapping .season { transition: opacity .45s ease; }

/* Le curseur des saisons : une barre et un pouce qu'on fait glisser (sans les noms) */
.seasons { width: min(420px, 100%); }
.track { position: relative; height: 34px; }
.track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: rgba(255, 255, 255, .12); }
.fill { position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; width: 0;
  background: linear-gradient(90deg, rgba(246, 207, 122, .35), #f6cf7a); box-shadow: 0 0 14px rgba(246, 207, 122, .5); }
.snapping .fill { transition: width .45s ease; }
.track input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: grab; }
.track input:active { cursor: grabbing; }
.track input::-webkit-slider-runnable-track { height: 34px; background: transparent; }
.track input::-moz-range-track { height: 34px; background: transparent; }
.track input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: 4px; border-radius: 50%; background: #f6cf7a;
  border: 3px solid #070914; box-shadow: 0 0 0 1px rgba(246, 207, 122, .6), 0 0 22px rgba(246, 207, 122, .7); }
.track input::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #f6cf7a; border: 3px solid #070914;
  box-shadow: 0 0 0 1px rgba(246, 207, 122, .6), 0 0 22px rgba(246, 207, 122, .7); }
.track input:focus-visible { outline: none; }
.track input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(246, 207, 122, .9), 0 0 26px rgba(246, 207, 122, .8); }

/* Le badge « Bientôt disponible sur Google Play » (fourni tel quel, non modifié) */
.play-badge { height: 56px; width: auto; display: block; }


/* Les lucioles de l'app (ui/biblio/RoomWeather.kt, nuit d'été) en fond de page */
#fireflies { position: fixed; inset: 0; z-index: -1; pointer-events: none; }