/* V9 — bibliothèque d'exemples : de vrais sites d'autres studios, en références. Chaque fenêtre montre l'aperçu officiel du
   site ; quand on l'ouvre, le vrai site se charge dedans (si le site l'autorise). La source est toujours écrite en bas. */

:where(.win-site) section{padding:0}
:where(.win-site) footer{display:block;background:transparent;border:0}
.win-site img{display:block;max-width:100%}

.s-ref{background:#0c0d0e;color:#f1efe9;font-family:var(--sans);--menu-bg:#0c0d0e;--menu-ink:#f1efe9}
.rf-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s}
.rf-frame{position:absolute;inset:0;display:none}
.rf-frame iframe{width:100%;height:100%;border:0;display:block;background:#0c0d0e}
.s-ref.rf-live .rf-frame{display:block}
.s-ref.rf-loaded .rf-poster{opacity:0}
/* pendant le chargement du site, un petit message discret par-dessus l'aperçu */
.rf-open{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:none;padding:9px 16px;border-radius:99px;background:#0c0d0ecc;backdrop-filter:blur(8px);pointer-events:none}
.rf-open p{margin:0;font-size:12.5px;color:#e6e4de;white-space:nowrap}
.s-ref.rf-live:not(.rf-loaded) .rf-open{display:block}
/* Mistou : capture de la page entière, qu'on fait défiler dans la fenêtre (version téléphone sous 600 px) */
.s-shot{background:#fff}
.s-shot .rf-shot{display:block;width:100%;height:auto}
.s-shot .rf-shot-m{display:none}
@container site (max-width:600px){.s-shot .rf-shot-d{display:none}.s-shot .rf-shot-m{display:block}}