/* ===== Stars Background (vanilla, d'après 21st.dev) ===== */

/* DESKTOP : champ d'étoiles fixe + animé d'origine.
   (Pas de bug ici : la barre dynamique de Safari iOS n'existe pas sur ordinateur.) */
#stars{
  position:fixed; inset:0; z-index:-10; pointer-events:none; overflow:hidden;
  background:#000;
}
#stars-inner{ position:absolute; inset:0; will-change:transform; }

/* ⚠️⚠️ NE PAS REMETTRE `left:50%; width:1px` SUR .star-layer (cause du bug Chrome PC du
   2 août, invisible sur Safari — 5 correctifs ciblés avant de la trouver).
   Les étoiles sont peintes en `box-shadow` DÉBORDANT de ±2000px (voir stars.js, genShadows).
   Avec une boîte de 1px au milieu, Chrome calcule la zone à redessiner à partir de cette
   boîte : il rafraîchit du milieu vers la DROITE et oublie tout le débordement de GAUCHE.
   Résultat, à la fin de l'intro (quand le loader plein écran disparaît et qu'il faut
   repeindre dessous) : la moitié GAUCHE de l'écran restait figée sur l'image précédente,
   coupure verticale nette pile au centre, jusqu'à ce que Chrome se corrige de lui-même.
   Safari calcule ces limites autrement → jamais touché.
   ⚠️ La largeur pleine ci-dessous NE DÉPLACE AUCUNE ÉTOILE : le `left:50%` est simplement
   reporté sur `.star-dot`, donc chaque point garde exactement la même position à l'écran.
   Le layer, lui, a enfin des limites qui correspondent à ce qu'il peint vraiment. */
.star-layer{ position:absolute; top:0; left:0; width:100%; height:2000px; }
.star-dot{ position:absolute; left:50%; top:0; border-radius:9999px; background:transparent; }
.star-dot.dup{ top:2000px; }

@keyframes star-scroll{ from{ transform:translateY(0); } to{ transform:translateY(-2000px); } }

html{ background:#000; }
/* overflow-x:clip = coupe le débordement ; touch-action:pan-y = interdit le PAN horizontal (bug de swipe latéral Safari iOS
   dû à des décos qui dépassent sur les côtés). Le scroll vertical reste normal ; les swipes JS (deck, fan prix) marchent encore. */
html, body{ overflow-x:clip; max-width:100%; touch-action:pan-y; }
body{ background-color:transparent !important; }
.bg-surface-base{ background-color:transparent !important; }
#intro{ background:#000 !important; }

@media (prefers-reduced-motion: reduce){ .star-layer{ animation:none !important; } }

/* ===== MOBILE : fond NOIR pur + vrai ciel étoilé en éléments DOM =====
   La couture noire d'iOS vient UNIQUEMENT des fonds tuilés animés et des couches
   position:fixed (Safari les repeint par tuiles quand sa barre d'URL s'anime).
   → Sur mobile : AUCUN background-image tuilé, AUCUNE couche fixe. Les étoiles sont
   des <span> en position:absolute (#veo-twinkle) qui défilent AVEC la page et
   s'animent en opacity/transform (composité GPU) → impossible de coudre.
   ⛔ NE PAS remettre de background-image tuilé ni de body::before/::after fixe ici. */
@media (max-width: 760px){
  #stars{ display:none !important; }
  html{ background:#000 !important; background-image:none !important; }
  body{ background:transparent !important; animation:none !important; }
}

/* ===== CIEL ÉTOILÉ MOBILE (éléments DOM, zéro couture iOS) =====
   Deux types : "dust" (fins points nets = densité) + "glow" (halos doux = accent).
   Tout scintille en opacity/scale ; le champ entier dérive très lentement (transform). */
#veo-twinkle { display: none; }
@media (max-width: 760px) {
  /* absolute (PAS fixed) → défile avec la page (sinon "collé" au swipe) ; hauteur posée en JS. */
  #veo-twinkle {
    display: block; position: absolute; top: 0; left: 0; width: 100%; z-index: -6; pointer-events: none;
  }
  #veo-twinkle .mv, #veo-twinkle .st-field { position: absolute; top: 0; left: 0; border-radius: 50%; }
  /* couches STATIQUES via box-shadow (comme le PC) : des milliers d'étoiles quasi gratuites (NE PAS les animer : calque géant = lag) */
  #veo-twinkle .st-field { background: #fff; }
  /* étoiles MOBILES (fraction limitée = perf) : FINES (aucun halo → pas de "boules"), descendent doucement + clignotent.
     Éparpillées sur toute la page → joli contraste avec la base statique. Anim (fall+op) posée en JS. */
  #veo-twinkle .mv { background: rgba(255,255,255,.9); will-change: transform, opacity; }
}
@keyframes twk-fall { from { transform: translateY(0); } to { transform: translateY(60px); } }
@keyframes twk-op   { 0%, 100% { opacity: .28; } 50% { opacity: .92; } }
@media (prefers-reduced-motion: reduce) {
  #veo-twinkle .mv { animation: none !important; opacity: .55; }
}

/* ⚠️ PANNEAU OUVERT = étoiles INVISIBLES (recouvertes par la feuille plein écran) : on fige
   leurs 3 animations infinies pour laisser la puce graphique à la démo FIZZ (classe posée
   par index.html, setupCreasLikePanel). Reprennent exactement où elles étaient à la fermeture. */
html.panneau-ouvert .star-layer{ animation-play-state: paused !important; }