/* Scène d'un visuel de section : un fond mosaïque en canvas, un cadre posé dessus. Réglages via variables et attributs (fonds.js). */
/* Le cadre est toujours large de 720 px (--contenu), la largeur pour laquelle schémas et visuels animés sont dessinés, et c'est le cadre entier
   qui est mis à l'échelle par transform (--z, calculé par fonds.js : largeur voulue du cadre / 720). Pas de zoom CSS : Safari le calcule de travers
   dans les grilles (colonnes qui se chevauchent sur iPhone, 11/09). --cadre est la largeur voulue en % de la scène : --echelle du labo, 92 % sur écran étroit. */
.scene { --z: 1; --contenu: 720px; --cadre: var(--echelle, 72%); position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 16 / 10; background: #8A8770; --rayon: 6px; --echelle: 78%; }
.scene canvas.fond { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene .cadre { position: absolute; left: 50%; width: var(--contenu); transform: translateX(-50%) scale(var(--z)); transform-origin: 50% 50%; border-radius: var(--rayon); overflow: hidden; background: #fbfbf8; color: #161510; }
.scene[data-pos="centre"] .cadre { top: 50%; transform: translate(-50%, -50%) scale(var(--z)); }
.scene[data-pos="bas"] .cadre { bottom: -1px; transform-origin: 50% 100%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.scene[data-pos="haut"] .cadre { top: -1px; transform-origin: 50% 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.scene[data-pos="decale"] .cadre { left: auto; right: -6%; bottom: -1px; transform: scale(var(--z)); transform-origin: 100% 100%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.scene[data-ombre="douce"] .cadre { box-shadow: 0 24px 60px rgba(20,19,14,0.28), 0 2px 6px rgba(20,19,14,0.12); }
.scene[data-ombre="franche"] .cadre { box-shadow: 0 12px 0 rgba(20,19,14,0.22); }
.scene[data-bord="oui"] .cadre { outline: 1px solid rgba(20,19,14,0.18); outline-offset: -1px; }
.scene[data-cadre="sombre"] .cadre { background: #1a1913; }
.scene .cadre .barre-fenetre { display: none; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-bottom: 1px solid rgba(20,19,14,0.1); background: #f5f4ef; font: 11px/1 'Inter', system-ui, sans-serif; color: rgba(22,21,16,0.55); letter-spacing: 0.02em; }
.scene[data-cadre="sombre"] .cadre .barre-fenetre { background: #12110c; border-color: rgba(245,244,238,0.12); color: rgba(245,244,238,0.6); }
.scene[data-barre="points"] .cadre .barre-fenetre, .scene[data-barre="titre"] .cadre .barre-fenetre { display: flex; }
.scene .cadre .barre-fenetre i { width: 8px; height: 8px; border-radius: 50%; background: rgba(20,19,14,0.18); }
.scene[data-cadre="sombre"] .cadre .barre-fenetre i { background: rgba(245,244,238,0.25); }
.scene[data-barre="titre"] .cadre .barre-fenetre i { display: none; }
.scene[data-barre="points"] .cadre .barre-fenetre span { display: none; }
.scene[data-cadre="aucun"] .cadre { background: transparent; }
.scene[data-cadre="aucun"] .cadre .barre-fenetre { display: none; }
.scene .cadre img.capture { display: block; width: 100%; height: auto; }
.scene .cadre > .schema { aspect-ratio: auto; border: 0; border-radius: 0; }
/* Tablette et mobile : le cadre prend presque toute la scène (le fond reste visible autour), et son contenu est réduit d'autant. */
@media (max-width: 1100px) { .scene { --cadre: 92%; } .scene[data-pos="decale"] .cadre { right: -4%; } }