/* ============ SCENES A OBJET (2026-10-05) ============================
   Reseau de reparateurs et Developpeur : un objet du service (carnet de
   sante, site d un transporteur) se remplit dans le panneau epingle, puis
   recule pour laisser venir l en-tete. Le pilotage est dans
   js/scene-objet.js ; ce que font --v, --pro et --feu sur chaque objet est
   decide par sa propre feuille (reseau.css, developpeur.css).
   Le filigrane, l en-tete, la ligne manuscrite et le fond sont ceux de
   .bureau (classes reprises dans home.html), les bandes et le bloc final
   ceux de .force : toute retouche se fait la-bas, une fois. */

.scene-objet { position: relative; }
.scene-objet__wrap { position: relative; height: 260vh; background: var(--off-white); }

/* La scene occupe la bande entre le filigrane et le bas du panneau ; ses
   bornes sont posees par le JS (--sceneTop, --sceneBas) sur le filigrane
   reel, dont la taille depend de la fenetre. */
.scene-objet__scene {
  position: absolute;
  left: var(--edge);
  right: var(--edge);
  top: var(--sceneTop, 30%);
  bottom: var(--sceneBas, 12%);
  z-index: 1;
  display: grid;
  place-items: center;
  opacity: calc(var(--scene, 0) * (1 - var(--recul, 0)));
  transform: translateY(calc(var(--recul, 0) * -28px)) scale(calc(1 - var(--recul, 0) * 0.05));
  pointer-events: none;
}
/* L objet se reduit si le panneau ne peut pas le contenir (--kc). */
/* L objet se reduit si le panneau ne peut pas le contenir (--kc). */
.scene-objet__scene > [data-objet] { transform: scale(var(--kc, 1)); transform-origin: center; }

/* Le feutre de chaque objet : meme police que toutes les lignes manuscrites
   du site, gold sur navy en theme sombre comme elles. Il se POSE (leger
   tassement d echelle), il ne vole pas. */
.scene-objet__feutre {
  margin: 0;
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
  line-height: 1;
  color: var(--ink);
  opacity: var(--feu, 0);
  transform: rotate(-4deg) scale(calc(1.12 - var(--feu, 0) * 0.12));
  transform-origin: right bottom;
}
html[data-theme="dark"] .scene-objet__feutre,
html[data-theme="dark"] .scene-objet .bureau__script { color: var(--gold-2); }

@media (max-width: 48rem) {
  .scene-objet__wrap { height: 190vh; }
}
@media (max-height: 30rem) and (orientation: landscape) and (max-width: 62rem) {
  .scene-objet__scene { opacity: 0 !important; }
}
/* Mouvement reduit : l objet REMPLI, seul etat qui se suffise. */
@media (prefers-reduced-motion: reduce) {
  .scene-objet__wrap { height: auto; }
  .scene-objet__scene { position: static; margin-top: 2rem; opacity: 1; transform: none; }
  .scene-objet__scene > [data-objet] { --pro: 1; --feu: 1; transform: none; }
  [data-encre] { --v: 1; }
}