/* Le Monde de Hamdy — habillage DOM au-dessus du canvas.
   Tout est auto-heberge, aucune ressource externe (CSP intacte). */

/* Fond unique de la scene. Doit rester identique a FOND dans monde.js :
   sinon un fond plus clair apparait entre le HTML et le demarrage du canvas. */
#univers {
  position: fixed;
  inset: 0;
  background: #08070f;
  overflow: hidden;
  font-family: var(--mono);
  color: #cfcbe0;
}

#ciel { position: absolute; inset: 0; display: block; }

/* nos display:flex explicites ne doivent jamais vaincre l'attribut hidden */
#univers [hidden] { display: none !important; }

/* --- portes (E1) --- */
#portes {
  position: absolute;
  bottom: 7vh;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 3.5rem;
  transition: opacity .6s ease;
}
#portes.cache { opacity: 0; pointer-events: none; }
.porte {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: .95rem;
  letter-spacing: .12em;
  color: #8d89a3;
  text-decoration: none;
  padding: .6rem 1rem;
  transition: color .25s ease, text-shadow .25s ease;
}
.porte:hover, .porte:focus-visible {
  color: #e6b450;
  text-shadow: 0 0 18px rgba(230, 180, 80, .55);
  outline: none;
}

/* --- bandeau vue classique (reduced motion / petite machine) --- */
#bandeau-classique {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .65rem 2.5rem .65rem 1rem;
  background: rgba(15, 15, 24, .92);
  border-bottom: 1px solid #26243a;
  font-size: .85rem;
}
#bandeau-classique p { margin: 0; }
#bandeau-classique a { color: #e6b450; }
#bandeau-fermer {
  position: absolute;
  right: .6rem;
  background: none;
  border: none;
  color: #8d89a3;
  font-size: 1.3rem;
  cursor: pointer;
}

/* --- HUD (E2, gauche) --- */
#hud {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  min-width: 210px;
  padding: 1rem 1.1rem;
  background: rgba(13, 13, 20, .78);
  border: 1px solid #26243a;
  border-radius: 10px;
  font-size: .8rem;
  backdrop-filter: blur(4px);
}
.hud-titre { color: #e6b450; letter-spacing: .18em; margin-bottom: .7rem; }
.hud-ligne {
  display: grid;
  grid-template-columns: 3.6rem 1fr 4.6rem;
  align-items: center;
  gap: .5rem;
  margin: .35rem 0;
  color: #8d89a3;
}
.hud-ligne span:last-child { text-align: right; color: #cfcbe0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hud-barre {
  height: 4px;
  border-radius: 2px;
  background: #211f33;
  overflow: hidden;
}
.hud-barre > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #e6b450, #ffdf9e);
  transition: width .8s ease;
}

/* --- banniere projets (E2, droite) --- */
#banniere {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  min-width: 200px;
  max-width: 250px;
  padding: 1rem 1.1rem;
  background: rgba(13, 13, 20, .78);
  border: 1px solid #26243a;
  border-radius: 10px;
  font-size: .8rem;
  backdrop-filter: blur(4px);
}
.ban-groupe + .ban-groupe { margin-top: .9rem; }
.ban-titre { color: #e6b450; letter-spacing: .18em; font-size: .7rem; margin-bottom: .4rem; }
#banniere ul { list-style: none; margin: 0; padding: 0; }
#banniere li { margin: 0; }
#banniere button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: #cfcbe0;
  padding: .3rem .35rem;
  border-radius: 6px;
}
#banniere button:hover, #banniere button:focus-visible {
  background: rgba(230, 180, 80, .12);
  color: #ffdf9e;
  outline: none;
}
#banniere .pulse::after {
  content: "";
  display: inline-block;
  width: .45rem;
  height: .45rem;
  margin-left: .45rem;
  border-radius: 50%;
  background: #e6b450;
  animation: ban-pulse 2.2s ease-in-out infinite;
}
@keyframes ban-pulse { 50% { opacity: .25; } }

/* --- boule-menu --- */
#boule { position: absolute; left: 1.25rem; bottom: 1.25rem; z-index: 25; }
#boule-btn {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid #3a3654;
  background: radial-gradient(circle at 35% 30%, #2a2742, #14121f);
  color: #e6b450;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 0 22px rgba(230, 180, 80, .18);
  transition: box-shadow .3s ease, transform .3s ease;
}
#boule-btn:hover { box-shadow: 0 0 30px rgba(230, 180, 80, .4); transform: scale(1.06); }
#boule-menu {
  position: absolute;
  left: 0;
  bottom: 3.6rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 10rem;
  padding: .5rem;
  background: rgba(13, 13, 20, .92);
  border: 1px solid #26243a;
  border-radius: 10px;
  font-size: .85rem;
}
#boule-menu a, #boule-menu button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: #cfcbe0;
  text-decoration: none;
  padding: .45rem .6rem;
  border-radius: 6px;
}
#boule-menu a:hover, #boule-menu button:hover { background: rgba(230, 180, 80, .12); color: #ffdf9e; }

/* --- etoiles-anecdotes ---
   Zone interactive de 44x44 px (regle tactile), point lumineux au centre.
   Survol : point fige (l'animation de scintillement s'arrete) + grossit. */
.etoile {
  position: absolute;
  z-index: 15;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
}
.etoile::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px rgba(255, 255, 255, .8);
  animation: scintille 3.4s ease-in-out infinite;
  transition: transform .25s ease;
}
.etoile:hover::before, .etoile:focus-visible::before {
  animation-play-state: paused;
  transform: scale(1.6);
  box-shadow: 0 0 14px 5px rgba(230, 180, 80, .9);
  background: #ffdf9e;
}
@keyframes scintille { 50% { opacity: .35; } }
.etoile-bulle {
  position: absolute;
  z-index: 40;
  max-width: 260px;
  padding: .7rem .85rem;
  background: rgba(13, 13, 20, .95);
  border: 1px solid #3a3654;
  border-radius: 10px;
  font-size: .8rem;
  line-height: 1.45;
  color: #cfcbe0;
  pointer-events: none;
}

/* --- libelle planete (survol) --- */
#libelle {
  position: absolute;
  z-index: 18;
  padding: .3rem .6rem;
  background: rgba(13, 13, 20, .9);
  border: 1px solid #3a3654;
  border-radius: 6px;
  font-size: .78rem;
  color: #ffdf9e;
  pointer-events: none;
  white-space: nowrap;
}

/* --- sans JS --- */
.sans-js {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: #0b0b10;
  text-align: center;
  padding: 2rem;
}
.sans-js a { color: #e6b450; }

/* --- signature : nom + metier, en haut, au-dessus de la galaxie --- */
#signature {
  position: absolute;
  top: 7vh;
  left: 0;
  right: 0;
  z-index: 20;
  text-align: center;
  pointer-events: none;
  animation: sig-arrive 1.6s ease both;
}
#signature h1 {
  margin: 0;
  font-size: clamp(1rem, 2.1vw, 1.55rem);
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #efe9ff;
  text-shadow: 0 0 34px rgba(120, 150, 225, .4);
}
#signature .sig-titre {
  margin: .75rem 0 0;
  font-size: .72rem;
  letter-spacing: .2em;
  color: #8d89a3;
}
@keyframes sig-arrive { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* --- indice : signale que la galaxie est cliquable --- */
#indice {
  position: absolute;
  left: 0;
  right: 0;
  top: 74vh;
  margin: 0;
  z-index: 20;
  text-align: center;
  pointer-events: none;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #6f6b85;
  animation: indice-arrive .9s ease both, indice-respire 3.6s ease-in-out 1s infinite;
}
@keyframes indice-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes indice-respire { 50% { color: #e6b450; } }

/* --- responsive : les panneaux ne recouvrent pas le monde sur petit ecran --- */
@media (max-width: 900px) {
  #hud { top: auto; bottom: 5.5rem; transform: none; font-size: .72rem; min-width: 170px; padding: .7rem .8rem; }
  #banniere { display: none; }
  #signature h1 { letter-spacing: .24em; }
  #indice { top: auto; bottom: 16vh; }
}

@media (prefers-reduced-motion: reduce) {
  .etoile::before, #banniere .pulse::after { animation: none; }
  #signature, #indice { animation: none; }
}