/* Direction artistique reprise de hamdy-tabsissi.com/monde : fond spatial,
   monospace, ambre, panneaux type HUD.

   Zone volontairement HORS-THEME (meme exception que .tuile-multivers du
   portfolio) : c'est une scene spatiale, elle reste sombre y compris en
   `prefers-color-scheme: light`. Les couleurs sont donc litterales ici --
   y appliquer des jetons de theme clair produirait du presque-noir sur du
   presque-noir. Palette stricte (six couleurs) : elle doit rester identique
   a COULEURS dans scene.js, sinon le fond HTML et le fond WebGL divergent. */

:root {
  --fond: #0f1115;
  --ambre: #e6b450;
  --texte: #ece9e2;
  --attenue: #9c9ba6;
  --panneau: #15161a;
  --bordure: #2a2a2e;
  /* Etiquettes 3D en typo systeme (lisibilite a toute taille de police OS) ;
     HUD et panneaux en mono (identite visuelle du portfolio). */
  --systeme: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Reglages des etiquettes (titres 3D) : pendant CSS de public/apparence.js.
     Taille par role ; opacite au dos du globe (une fille reste une cible de
     premier rang : .6, ~6:1) et quand une etiquette en recouvre une plus importante. */
  --etiquette-ouverte: 1.1rem;
  --etiquette-enfant: .85rem;
  --etiquette-petit: .72rem;
  --etiquette-dos: .32;
  --etiquette-dos-fille: .6;
  --etiquette-genee-fille: .3;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--fond);
  color: var(--texte);
  font: 14px/1.5 var(--mono);
}

/* Regle unique : aucun element cache ne doit reapparaitre via une autre
   regle (les panneaux passent tous par [hidden], jamais par une classe). */
[hidden] { display: none !important; }

/* Le h1 porte le referencement et les lecteurs d'ecran : on le sort du champ
   visuel sans le retirer de l'arbre. En classe et non en attribut `style` :
   la CSP (`style-src 'self'`) interdit le style inline. */
.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Scene et etiquettes --------------------------------------------- */

#scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  cursor: grab;
}
#scene.sur-note { cursor: pointer; }
#scene canvas { display: block; }

/* Calque CSS2D : le renderer y ecrit display/transform/zIndex a chaque
   frame (jamais y toucher depuis une regle qui poserait `hidden`). Le
   contexte d'empilement local garde ces zIndex confines au calque. */
#etiquettes {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.etiquette {
  pointer-events: auto;
  cursor: pointer;
  white-space: nowrap;
  color: var(--texte);
  font: 500 var(--etiquette-enfant)/1.2 var(--systeme);
  padding: .15rem .4rem .35rem;
  /* Ombre portee : lisibilite garantie sur un fond de globe clair comme sombre. */
  text-shadow: 0 1px 2px var(--fond), 0 0 8px rgba(15, 17, 21, .95);
  transition: opacity .25s ease, font-size .25s ease, color .2s ease;
}
.etiquette--ouverte { font-size: var(--etiquette-ouverte); font-weight: 600; color: var(--ambre); }
.etiquette--enfant { font-size: var(--etiquette-enfant); font-weight: 500; }
/* Petite-fille : la hierarchie passe par la taille et la couleur attenuee, pas
   par l'opacite (a .8, ~4.7:1 seulement sur le fond pour un texte de 10 px). */
.etiquette--petit { font-size: var(--etiquette-petit); font-weight: 400; color: var(--attenue); }
.etiquette--survol { color: var(--ambre); opacity: 1; }
/* Dos du globe : attenuee mais lisible et cliquable. Le CSS2DRenderer empile les
   etiquettes par distance : une etiquette de face reste au-dessus et prime ;
   celle qui en recouvrirait une autre est masquee par `etiquette--genee`.
   Une fille reste une cible de navigation de premier rang : .6 (~6:1) la garde
   lisible quand ses soeurs l'encadrent tout autour du globe ; une petite-fille
   du dos reste en retrait. */
.etiquette.etiquette--derriere { opacity: var(--etiquette-dos); }
.etiquette.etiquette--enfant.etiquette--derriere { opacity: var(--etiquette-dos-fille); }
.etiquette.etiquette--derriere.etiquette--survol { opacity: 1; }
/* Collision (scene.js#majEtiquettesGenees) : l'etiquette qui en recouvre une plus
   prioritaire s'efface. Une fille reste devinable ; une petite-fille ou une
   etiquette du dos du globe disparait. Le survol de la bille la revele toujours. */
.etiquette--enfant.etiquette--genee { opacity: var(--etiquette-genee-fille); }
.etiquette--petit.etiquette--genee,
.etiquette--derriere.etiquette--genee { opacity: 0; pointer-events: none; }
.etiquette.etiquette--genee.etiquette--survol { opacity: 1; }
/* Freres/ancetres : masquee par defaut, revelee au survol de leur bille. */
.etiquette.etiquette--cachee { opacity: 0; pointer-events: none; }
.etiquette.etiquette--cachee.etiquette--survol { opacity: 1; pointer-events: auto; }

/* --- Panneaux communs -------------------------------------------------- */

.panneau {
  position: fixed;
  z-index: 10;
  background: var(--panneau);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  padding: .75rem .85rem;
  /* Long titre/contenu sans espace : casse plutot qu'un debordement horizontal. */
  overflow-wrap: anywhere;
}

.hud-titre, #fil-ariane, .resultat-chemin {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .68rem;
  color: var(--attenue);
}

.panneau-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

#titre-note {
  margin: .2rem 0 .5rem;
  font-size: 1rem;
  font-weight: 600;
}
#contenu-note {
  margin: 0 0 .7rem;
  color: var(--attenue);
  font-size: .8rem;
  line-height: 1.6;
}
/* Page d'origine d'une note issue du site : texte ambre sur le panneau (~9:1). */
#ligne-lien-note { margin: -.3rem 0 .7rem; font-size: .78rem; }
.lien-note { color: var(--ambre); text-underline-offset: .2em; }
.lien-note:hover { text-decoration-thickness: 2px; }
#edition-site { margin: 0; line-height: 1.5; }

.hud-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  border-top: 1px solid var(--bordure);
  padding-top: .55rem;
}
.hud-compte { color: var(--attenue); font-size: .72rem; letter-spacing: .06em; }

/* --- Boutons ------------------------------------------------------------ */

button {
  min-height: 40px;
  padding: 0 .85rem;
  background: transparent;
  border: 1px solid var(--ambre);
  border-radius: 6px;
  color: var(--ambre);
  font: inherit;
  font-size: .78rem;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
button:hover { background: rgba(230, 180, 80, .1); }
button.principal { background: var(--ambre); color: var(--fond); font-weight: 600; }
button.principal:hover { background: var(--ambre); opacity: .9; }
/* Palette stricte (amendement G) : pas de rouge, le confirm() natif porte
   deja le cote destructeur de la suppression. */
button.danger { color: var(--attenue); border-color: var(--bordure); }
button.danger:hover { border-color: var(--ambre); color: var(--ambre); }

/* Un seul point de focus visible pour toute la page, quel que soit l'element. */
:is(button, input, textarea, [tabindex], a, .etiquette):focus-visible {
  outline: 2px solid var(--ambre);
  outline-offset: 2px;
}

/* --- HUD haut : fil d'Ariane + recherche -------------------------------- */

#hud-haut {
  position: fixed;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  /* Le conteneur ne capte rien lui-meme : seuls ses enfants sont cliquables,
     le reste de la bande laisse passer les gestes vers la scene. */
  pointer-events: none;
}
#hud-haut > * { pointer-events: auto; }

#fil-ariane { max-width: min(60ch, 60vw); }
#fil-ariane ol {
  display: flex;
  gap: .4rem;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
#fil-ariane li + li::before { content: "›"; margin-right: .4rem; opacity: .5; }
#fil-ariane button {
  min-height: 32px;
  border: 0;
  padding: 0 .2rem;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  border-bottom: 1px solid transparent;
}
#fil-ariane button:hover { background: none; }
#fil-ariane [aria-current="page"] { color: var(--texte); border-bottom-color: var(--ambre); }

#recherche { position: relative; width: min(300px, 40vw); }
#champ-recherche {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  appearance: none;
  background: var(--panneau);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  color: var(--texte);
  font: inherit;
  padding: .4rem .7rem;
}

#resultats {
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: .3rem;
  list-style: none;
  max-height: 50vh;
  overflow-y: auto;
  background: var(--panneau);
  border: 1px solid var(--bordure);
  border-radius: 8px;
}
#resultats li {
  padding: .4rem .5rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
#resultats [aria-selected="true"], #resultats li:hover {
  outline: 1px solid var(--ambre);
  outline-offset: -1px;
  background: rgba(230, 180, 80, .08);
}
/* Message "Indexation…"/"Aucun résultat" : non selectionnable, pas de survol. */
#resultats li[aria-disabled="true"] { cursor: default; opacity: .6; }
#resultats li[aria-disabled="true"]:hover { outline: none; background: none; }

/* --- Panneau note -------------------------------------------------------- */

#panneau-note {
  top: 4.5rem;
  left: 1rem;
  width: min(360px, calc(100vw - 2rem));
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
}
.panneau-actions { display: flex; gap: .35rem; }
#bouton-fermer-note, #bouton-replier, #bouton-fermer-aide { min-height: 32px; min-width: 32px; padding: 0; font-size: 1rem; line-height: 1; }
/* Utile seulement quand le panneau est empile en bas (voir le bloc mobile). */
#bouton-replier { display: none; }

.liste-enfants {
  list-style: none;
  margin: .5rem 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.liste-enfants button { min-height: 32px; font-size: .72rem; }

#astuce { left: 1rem; bottom: 1rem; font-size: .68rem; color: var(--attenue); line-height: 1.7; }

/* Aide de premiere visite : meme coin que #astuce (reserve a /edit), loin du globe. */
#aide { left: 1rem; bottom: 1rem; width: min(320px, calc(100vw - 2rem)); }
.aide-texte { margin: .35rem 0 0; font-size: .75rem; line-height: 1.6; color: var(--texte); }
.aide-tactile { display: none; }
@media (pointer: coarse) {
  .aide-souris { display: none; }
  .aide-tactile { display: block; }
}

/* --- Panneau edition ------------------------------------------------------ */

#panneau-edition {
  right: 1rem;
  bottom: 1rem;
  z-index: 20;
  width: min(360px, calc(100vw - 2rem));
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
#panneau-edition input, #panneau-edition textarea {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: .5rem;
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 6px;
  color: var(--texte);
  font: inherit;
  font-size: .82rem;
}
#panneau-edition textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.rangee-boutons { display: flex; gap: .5rem; justify-content: space-between; }

.avis { top: 1rem; left: 1rem; right: 1rem; }

/* --- Mobile (amendement D) ------------------------------------------------ */

@media (max-width: 560px) {
  /* HUD empile en bas plutot que masque : fil d'Ariane et recherche restent
     utilisables sans clavier physique ni geste d'agrandissement. */
  #hud-haut {
    z-index: 15; /* au-dessus de #panneau-note : les resultats de recherche qui le chevauchent restent cliquables */
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: .5rem;
    padding: .5rem;
    background: var(--panneau);
    border-top: 1px solid var(--bordure);
    border-radius: 12px 12px 0 0;
  }
  #fil-ariane, #recherche { max-width: 100%; width: 100%; }
  #resultats { top: auto; bottom: calc(100% + .35rem); }
  /* panneau-note au-dessus du HUD bas (7.25rem ~= sa hauteur : 32+40px de
     boutons/champ + gaps/paddings) ; 38vh (amendement D) plutot que 40vh
     pour laisser un peu plus de globe visible au-dessus. */
  #panneau-note { top: auto; bottom: 7.25rem; left: .5rem; right: .5rem; width: auto; max-height: 38vh; }
  /* Replie : titre seul (~90 px au lieu de 220 a 275) ; la scene reprend la
     place, app.js recentre le globe. Navigation intacte : billes, fil d'Ariane,
     recherche, Echap. */
  #bouton-replier { display: inline-block; }
  #panneau-note.panneau--replie #corps-note { display: none; }
  #panneau-note.panneau--replie #titre-note { margin-bottom: 0; }
  /* En haut : le HUD occupe deja le bas, et le globe est centre entre les deux. */
  #aide { top: .5rem; bottom: auto; left: .5rem; right: .5rem; width: auto; }
  #astuce { display: none; }
  #panneau-edition { left: .5rem; right: .5rem; bottom: .5rem; width: auto; z-index: 40; }
}

@media (prefers-reduced-motion: reduce) {
  .etiquette, button, #resultats, #scene { transition: none; }
}