/**
 * Lab local LE-RADAR — formats d’écran (iframe)
 *
 * Barre flottante : localhost / 127.0.0.1 seulement (ou ?lab=).
 *   Format 390/430/768/900/1280 → iframe (media queries réelles)
 *
 * Les variants « Fil mid » A/C/D ont été retirés (verdict C = prod).
 */

/* ── Shell iframe format ─────────────────────────────────────────── */
html.local-lab-framed,
html.local-lab-framed body {
  /* La page hôte n’affiche que le cadre + la barre lab */
  overflow: hidden !important;
  height: 100% !important;
  background: #0c0e12 !important;
}
/*
 * Cache le contenu hôte (doublon de l’iframe) sans le détruire.
 * La barre lab reste toujours visible / cliquable.
 */
html.local-lab-framed body > *:not(#local-lab-shell):not(#local-lab-format-bar):not(#midwidth-preview-bar):not(#wide-desktop-bar) {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Sécurité : barre lab toujours interactive au-dessus du shell */
html.local-lab-framed #local-lab-format-bar,
html.local-lab-framed #midwidth-preview-bar {
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 10000 !important;
}
/*
 * Shell iframe : largeur logique = format (2560, 3840…) pour les media queries.
 * transform: scale(…) (posé en JS) fait tenir la preview dans l’écran hôte.
 */
#local-lab-shell {
  position: fixed;
  z-index: 9990;
  top: 0;
  left: 50%;
  /* transform final = translateX(-50%) scale(s) via JS */
  transform: translateX(-50%);
  transform-origin: top center;
  max-width: none;
  height: 100%;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 80px rgba(0, 0, 0, 0.55);
  background: #000;
  overflow: hidden;
  will-change: transform;
}
#local-lab-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--bg, #111);
}

/* Barre formats (id principal + alias legacy) */
#local-lab-format-bar,
#midwidth-preview-bar {
  /* styles inline dans midwidth-preview.js ; id pour sélecteurs shell */
}