#board3d-dialog{padding:0;border:0;background:transparent;color:#fff8e9;width:min(1500px,calc(100vw - 16px));height:96dvh;max-width:none;max-height:96dvh;overflow:hidden;font:14px system-ui,sans-serif}
#board3d-dialog[open]{display:flex;flex-direction:column}#board3d-dialog::backdrop{background:#100b08bf;backdrop-filter:blur(12px)}
.board3d-header{padding:18px 55px 0 20px;flex-shrink:0}.board3d-header h2{margin:0;font-size:22px;font-weight:700}.board3d-close{position:absolute;top:8px;right:12px;padding:5px 10px;font-size:30px;background:none;border:0;color:inherit;cursor:pointer}
.board3d-stage{flex:1;min-height:0;display:grid;place-items:center;perspective:1600px;touch-action:none;cursor:grab;overflow:hidden;position:relative}.board3d-stage.is-dragging{cursor:grabbing}
.board3d-model{width:var(--board-size,300px);height:var(--board-size,300px);position:relative;transform-style:preserve-3d;pointer-events:none;user-select:none}
.board3d-row{position:absolute;left:0;width:100%;height:50%;transform-style:preserve-3d;transform-origin:50% 0}.board3d-row-top{top:0}.board3d-row-bottom{top:50%}
.board3d-hinge{position:absolute;top:0;width:50%;height:100%;transform-style:preserve-3d;transform-origin:0 50%}.board3d-hinge-left{left:0}.board3d-hinge-right{left:50%}
.board3d-panel{position:absolute;inset:0;transform-style:preserve-3d}
.board3d-surface{position:absolute;inset:0;backface-visibility:hidden;background-color:#53371b;background-size:200% 200%;background-repeat:no-repeat}
.board3d-front{transform:translateZ(calc(var(--board-thickness)/2))}.board3d-back{transform:rotateY(180deg) translateZ(calc(var(--board-thickness)/2))}
[data-board-row=top][data-board-column=left]>.board3d-front{background-position:0 0}[data-board-row=top][data-board-column=right]>.board3d-front{background-position:100% 0}
[data-board-row=bottom][data-board-column=left]>.board3d-front{background-position:0 100%}[data-board-row=bottom][data-board-column=right]>.board3d-front{background-position:100% 100%}
/* Le verso est vu depuis l'autre côté : les colonnes sont inversées. */
[data-board-row=top][data-board-column=left]>.board3d-back{background-position:100% 0}[data-board-row=top][data-board-column=right]>.board3d-back{background-position:0 0}
[data-board-row=bottom][data-board-column=left]>.board3d-back{background-position:100% 100%}[data-board-row=bottom][data-board-column=right]>.board3d-back{background-position:0 100%}
.board3d-surface::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 .45px #35250f55;background:linear-gradient(145deg,rgba(255,255,255,var(--board-light,0)),transparent 65%),rgba(0,0,0,var(--board-shadow,.08))}
.board3d-edge{position:absolute;top:50%;left:50%;background:#65492a;backface-visibility:hidden}.board3d-edge-top,.board3d-edge-bottom{width:calc(var(--board-size)/2);height:var(--board-thickness)}
.board3d-edge-left,.board3d-edge-right{width:var(--board-thickness);height:calc(var(--board-size)/2)}
.board3d-edge-top{transform:translate(-50%,-50%) translateY(calc(var(--board-size)/ -4)) rotateX(90deg)}.board3d-edge-bottom{transform:translate(-50%,-50%) translateY(calc(var(--board-size)/4)) rotateX(-90deg)}
.board3d-edge-left{transform:translate(-50%,-50%) translateX(calc(var(--board-size)/ -4)) rotateY(-90deg)}.board3d-edge-right{transform:translate(-50%,-50%) translateX(calc(var(--board-size)/4)) rotateY(90deg)}
.board3d-fold-control{flex-shrink:0;width:min(420px,calc(100% - 40px));margin:0 auto 14px}.board3d-fold-control label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:8px}.board3d-fold-control output{color:#f3cc65}.board3d-fold-control input{display:block;width:100%;accent-color:#e9b52c;cursor:pointer}
.board3d-controls{flex-shrink:0;display:flex;flex-wrap:wrap;justify-content:center;gap:7px;padding:0 12px 10px}.board3d-controls button{border:1px solid #fff5;background:#0004;color:inherit;border-radius:9px;padding:10px 12px;font:600 12px system-ui,sans-serif;cursor:pointer}.board3d-controls button:hover,.board3d-controls button[aria-pressed=true]{background:#e9b52c;border-color:#e9b52c;color:#302416}
.board3d-status{flex-shrink:0;text-align:center;color:#fff8e9b3;font-size:11px;margin:0;padding:0 12px 12px}#board3d-dialog :focus-visible{outline:3px solid #bc861e;outline-offset:3px}
@media(max-width:480px){.board3d-header h2{font-size:18px}.board3d-controls{gap:5px}.board3d-controls button{padding:8px;font-size:11px}}

/* Chaque quart porte son morceau des images originales recto et verso. */
.board3d-surface{overflow:hidden}
.board3d-texture{position:absolute;width:200%;height:200%;max-width:none;object-fit:fill;left:0;top:0;pointer-events:none}
[data-board-column=right]>.board3d-front .board3d-texture{left:-100%}
[data-board-column=left]>.board3d-back .board3d-texture{left:-100%}
[data-board-row=bottom] .board3d-texture{top:-100%}