/* =====================================================================
   PAGE « CURIOSITIES » (19.10.2026) — style de TWOMUCH.STUDIO, référence de Joachim (docs/curiosities-style-reference.md) :
   un grand fond gris plat, les objets posés directement dessus, tout en pilules, une seule police (Sora du site, choix de
   Joachim) en poids 500, lettres resserrées. La pilule centrale de la référence a été RETIRÉE (Joachim, 19.10.2026 :
   « un peu trop copié… faut vraiment l'enlever ») : on garde la barre du haut du site (bouton Menu en haut à gauche).
   Cachés ici : les réglages, le fond animé, les poussières et le grain du site.
   ===================================================================== */
html body.page-curiosites {
  --cu-plaque: #e5e7eb;
  --cu-carbone: #000000;
  --cu-craie: #f4f4f4;
  --cu-beton: #dedede;
  --cu-citron: #e2ff70;
  background: var(--cu-plaque);
  overflow: hidden;
}
body.page-curiosites #fond,
body.page-curiosites #poussieres,
body.page-curiosites > .reglages,
body.page-curiosites::after { display: none; } /* (::after : le grain du site ; ici, gris parfaitement plat) */
body.page-curiosites .contenu { max-width: none; padding: 0; }

.curiosites {
  position: fixed;
  inset: 0;
  z-index: 5;
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 500;
  color: var(--cu-carbone);
  letter-spacing: -0.03em;
}
.cu-toile { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.cu-chargement { position: absolute; left: 50%; top: 58%; translate: -50% 0; margin: 0; font-size: 14px; opacity: 0.6; }

/* Le mode d'emploi, en petites étiquettes ; il s'efface après la 1re prise */
.cu-aide {
  position: fixed;
  left: 50%;
  bottom: 18px;
  translate: -50% 0;
  z-index: 6;
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
  transition: opacity 1.2s ease;
}
.cu-aide li { padding: 5px 10px; border-radius: 9999px; background: var(--cu-craie); font-size: 12px; letter-spacing: -0.04em; line-height: 1; }
.cu-aide.vue { opacity: 0; }

/* Le nom de l'objet sous la souris : une petite pilule noire qui suit le curseur */
.cu-curseur {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 8;
  padding: 5px 9px;
  border-radius: 9999px;
  background: var(--cu-carbone);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.04em;
  pointer-events: none;
  white-space: nowrap;
}

/* La fiche d'un objet (au clic) */
.cu-fiche {
  position: fixed;
  z-index: 9;
  width: min(300px, calc(100vw - 24px));
  padding: 16px 16px 18px;
  border-radius: 4px;
  background: var(--cu-craie);
  border: 1px solid var(--cu-plaque);
  text-align: left;
}
.cu-fiche-haut { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.cu-numero, .cu-etiquette { font-size: 12px; line-height: 1; letter-spacing: -0.04em; padding: 5px 9px; border-radius: 9999px; }
.cu-numero { border: 1px solid var(--cu-beton); }
.cu-etiquette { background: var(--cu-beton); }
.cu-nom { margin: 0 0 6px; font: 500 18px/1.2 "Sora", system-ui, sans-serif; letter-spacing: -0.027em; }
.cu-texte { margin: 0; font-size: 14px; line-height: 1.43; letter-spacing: -0.02em; }
.cu-fermer {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border: 1px solid var(--cu-beton);
  border-radius: 9999px;
  background: transparent;
  color: var(--cu-carbone);
  font: 500 15px/1 "Sora", system-ui, sans-serif;
  cursor: pointer;
}
.cu-fermer:hover { background: var(--cu-beton); }

.cu-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 560px) {
  .cu-aide { flex-wrap: wrap; justify-content: center; width: calc(100% - 32px); }
}