/* Page /3D : reprend site.css (banc d'essai), ajoute la scène 3D, la vue de dessus et le pavé de commande. */
.ouverture--3d { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
.ouverture--3d .chapo strong { font-weight: 650; }
@media (max-width: 1000px) { .ouverture--3d { grid-template-columns: minmax(0, 1fr); } }

.planche--3d {
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); margin: 0;
  grid-template-areas: "scene cote" "commandes commandes" "alerte alerte" "lectures lectures" "legende legende";
}
.planche--3d > .scene3d { grid-area: scene; }
.planche--3d > .planche__cote { grid-area: cote; }
.planche--3d > .commandes { grid-area: commandes; }
.planche--3d > .alerte { grid-area: alerte; }
.planche--3d > .lectures { grid-area: lectures; }
.planche--3d > figcaption { grid-area: legende; }
@media (max-width: 760px) {
  .planche--3d { grid-template-columns: minmax(0, 1fr); grid-template-areas: "scene" "commandes" "cote" "alerte" "lectures" "legende"; }
  .planche--3d > .planche__cote { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.scene3d { position: relative; }
.planche.planche--3d > .planche__scene.scene3d > .toile.toile--3d { aspect-ratio: 1 / 1; touch-action: pan-y; cursor: grab; background: var(--planche); }
@media (max-width: 760px) { .planche.planche--3d > .planche__scene.scene3d > .toile.toile--3d { aspect-ratio: 1 / 1.05; } }
.toile--3d:active { cursor: grabbing; }
.sans-webgl { position: absolute; inset: auto 1rem 1rem 1rem; margin: 0; padding: 0.6rem 0.8rem; background: var(--encre); color: var(--fond); font-family: var(--sans); font-size: 0.875rem; }

.planche__cote { display: grid; gap: 0.9rem; align-content: start; }
.cote__titre, .cote__aide { margin: 0 0 0.35rem; font-family: var(--sans); font-size: 0.75rem; font-weight: 620; letter-spacing: 0.04em; text-transform: uppercase; color: var(--encre-2); }
.cote__aide { margin: 0.35rem 0 0; text-transform: none; letter-spacing: 0; font-weight: 450; }
.toile--dessus { aspect-ratio: 1 / 1; }

.pave {
  position: relative; aspect-ratio: 1 / 1; border: 1.5px solid var(--encre); cursor: crosshair; touch-action: none;
  background:
    linear-gradient(var(--encre), var(--encre)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--encre), var(--encre)) 0 50% / 100% 1px no-repeat,
    repeating-linear-gradient(0deg, var(--papier-cm) 0 1px, transparent 1px 10%),
    repeating-linear-gradient(90deg, var(--papier-cm) 0 1px, transparent 1px 10%),
    var(--planche);
}
.pave:focus-visible { outline: 2px solid var(--c1); outline-offset: 3px; }
.pave__axe { position: absolute; font-family: var(--sans); font-size: 0.75rem; font-weight: 700; color: var(--encre); pointer-events: none; background: var(--planche); padding: 0 0.2rem; }
.pave__axe--x { right: 0.3rem; top: calc(50% - 1.35rem); }
.pave__axe--y { left: calc(50% + 0.35rem); top: 0.3rem; }
.pave__palet { position: absolute; width: 1.1rem; height: 1.1rem; margin: -0.55rem 0 0 -0.55rem; border: 2px solid var(--encre); background: var(--eau); border-radius: 50%; pointer-events: none; }
.pave__cible { position: absolute; width: 0.9rem; height: 0.9rem; margin: -0.45rem 0 0 -0.45rem; border: 1.5px dashed var(--c1); border-radius: 50%; pointer-events: none; }

.choix--boutons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choix--boutons legend { width: 100%; }

.echelle { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: end; }
.tableau-defile { overflow-x: auto; margin: 0 0 1.25rem; }
.tableau--modele td { white-space: nowrap; }
.planche--3d .lectures { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr)); }
.planche--3d .lectures > div:has([data-lecture="mouvement"]) { grid-column: 1 / -1; }
@media (min-width: 30rem) { .planche--3d .lectures > div:has([data-lecture="mouvement"]) { grid-column: span 2; } }
@media (max-width: 33.99rem) { .planche--3d .lectures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feuille { list-style: none; padding: 0; margin: 0 0 1.5rem; counter-reset: etape; }
.feuille li { counter-increment: etape; position: relative; padding: 0.8rem 0 0.8rem 2.4rem; border-top: 1px solid var(--filet); }
.feuille li:last-child { border-bottom: 1px solid var(--filet); }
.feuille li::before { content: counter(etape); position: absolute; left: 0; top: 0.75rem; font-family: var(--sans); font-weight: 750; font-size: 1.1rem; }
.feuille b { font-family: var(--sans); font-weight: 680; }

.planche--3d > .alerte { grid-column: 1 / -1; }
.planche--echelle { max-width: 62rem; }
.reglette--large { max-width: 36rem; grid-template-columns: auto 4.5rem; }