/* ==================================================================
 * Paroi éclatée au défilement (particuliers.html, section #materiaux)
 * Le dessin est généré par js/hoummi-paroi.js ; sans script, la photo
 * d'origine reste affichée.
 * ================================================================== */

.hm-scind__media--paroi {
  background: var(--hm-vert-doux);
}

/* Le script a construit le dessin : la photo de repli s'efface. */
.hm-scind__media--paroi.hm-paroi-prete > img { display: none; }

.hm-paroi {
  position: absolute;
  inset: 0;
}

.hm-paroi svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Une seule légende, sans cadre : numéro, nom de la couche, une ligne. */
.hm-paroi__legende {
  position: absolute;
  pointer-events: none;
  transition: opacity .17s ease, transform .17s ease;
}
.hm-paroi__legende.est-en-change { opacity: 0; transform: translateY(6px); }
.hm-paroi__fleche { transition: opacity .17s ease; }
.hm-paroi__fleche.est-en-change { opacity: 0; }
.hm-paroi__legende p { margin: 0; }
.hm-paroi__compteur {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hm-vert-profond, #358860);
}
.hm-paroi__nom {
  margin-top: 6px !important;
  font-family: Ranua, sans-serif;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 500;
  line-height: 1.15;
  color: var(--hm-noir);
}
.hm-paroi__texte {
  margin-top: 6px !important;
  max-width: 36ch;
  font-size: 15px;
  line-height: 1.5;
  color: var(--hm-encre-douce, #4a4a4a);
}

/* Épinglage (posé par le script) : la piste est plus haute que la scène de la course du défilement,
   la scène y reste collée sous la barre de navigation le temps de l'animation. */
.hm-paroi-rail { display: grid; min-width: 0; }
.hm-paroi-piste[data-epingle="section"] {
  height: calc(100vh - var(--nav) + var(--hm-paroi-course));
  height: calc(100svh - var(--nav) + var(--hm-paroi-course));
}
.hm-paroi-piste[data-epingle="section"] > .hm-paroi-scene {
  position: sticky;
  top: var(--nav);
  height: calc(100vh - var(--nav));
  height: calc(100svh - var(--nav));
  min-height: 0;
}
.hm-paroi-piste[data-epingle="dessin"] .hm-paroi-rail { display: block; }
.hm-paroi-piste[data-epingle="dessin"] .hm-scind__media--paroi {
  position: sticky;
  top: var(--nav);
  aspect-ratio: auto;
  height: calc(100vh - var(--nav));
  height: calc(100svh - var(--nav));
}

@media (max-width: 860px) {
  /* En colonne, le bloc devient presque carré : la paroi et sa légende y tiennent. */
  .hm-scind__media--paroi {
    min-height: 0;
    aspect-ratio: 1 / 1.08;
  }
}

@media (max-width: 560px) {
  .hm-scind__media--paroi { aspect-ratio: 1 / 1.15; }
  .hm-paroi__texte { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-paroi__legende, .hm-paroi__fleche { transition: none; }
}