/* Simulateur de format (pages Tapis) : bureau de 1000 × 500 mm vu de dessus, tapis à l'échelle, formats en dessous. Valeurs via tokens.css. */
.sim-bureau { position: relative; aspect-ratio: 2 / 1; width: 100%; max-height: 300px; border: 2px solid var(--sg-lave); background: #16263D; overflow: hidden; }
.sim-bureau .ecran { position: absolute; left: 30%; right: 30%; top: 0; height: 7%; background: var(--sg-lave); }
.sim-bureau i { position: absolute; display: block; transform: translate(-50%, -50%); top: 54%; }
.sim-bureau .sim-tapis { background: var(--sg-ecume); left: 50%; }
.sim-bureau .sim-clavier, .sim-bureau .sim-souris { background: var(--sg-lave); }
.sim-bureau .sim-souris { border-radius: 40%; width: 3.4%; height: 13%; }
@media (prefers-reduced-motion: no-preference) { .sim-bureau i { transition: all 450ms var(--sg-ease, cubic-bezier(.22, .61, .36, 1)); } }
.sim-legende { margin: var(--sg-3) 0 var(--sg-5); font-size: var(--sg-t-petit); color: var(--sg-ecume); }
.sim-legende b { color: var(--sg-papier); font-weight: 600; }
.sim-formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sg-3); }
@media (max-width: 767px) { .sim-formats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sim-formats button { all: unset; box-sizing: border-box; cursor: pointer; display: block; padding: var(--sg-3) var(--sg-4); border: 1px solid var(--sg-lave); color: var(--sg-papier); }
.sim-formats button:hover { border-color: var(--sg-ecume); }
.sim-formats button:focus-visible { box-shadow: 0 0 0 2px var(--sg-encre), 0 0 0 4px var(--sg-papier); }
.sim-formats button[aria-pressed="true"] { background: var(--sg-papier); border-color: var(--sg-papier); color: var(--sg-encre); }
.sim-formats b { display: block; font: 400 var(--sg-t-h3)/1.15 var(--sg-serif); }
.sim-formats span { display: block; margin-top: 4px; font-size: var(--sg-t-petit); line-height: 1.35; }
.sim-note { margin-top: var(--sg-4); font-size: var(--sg-t-petit); color: var(--sg-ecume); }