/* ─── Page Interface (thèmes de l'écran tactile) ─────────────────────────────── */

.editor-toolbar {
  position: sticky;
  top: var(--topbar-height);
  z-index: 20;
  background: #f0f2f5;
  padding: .5rem 0;
}

.editor-tabs .nav-link { font-size: .875rem; padding: .35rem .75rem; }

.editor-section-title {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6c757d;
  margin: 1.25rem 0 .5rem;
}
.editor-section-title:first-child { margin-top: 0; }

.color-field .form-control-color { width: 2.25rem; padding: .2rem; flex: 0 0 auto; }
/* Champ vide (valeur par défaut) : pastille estompée */
.color-field .form-control-color.swatch-empty { opacity: .3; }
/* Palette : libellés de hauteur variable (retour à la ligne) → les champs s'alignent en bas de chaque ligne */
.palette-field { display: flex; flex-direction: column; }
.palette-field > .form-label { flex-grow: 1; }

.element-row { border: 1px solid #dee2e6; border-radius: .375rem; padding: .5rem .75rem; margin-bottom: .5rem; background: #fff; }
.element-row, .scene-section { scroll-margin-top: calc(var(--topbar-height) + 70px); }
/* Section atteinte par un clic dans l'aperçu (fond, logo) */
.section-flash { animation: section-flash 1.6s ease-out; border-radius: .375rem; }
@keyframes section-flash { from { background-color: rgba(13,110,253,.18); } to { background-color: transparent; } }
.element-row.selected { border-color: #0d6efd; box-shadow: 0 0 0 .2rem rgba(13,110,253,.15); }
.element-row .style-panel { border-top: 1px dashed #dee2e6; margin-top: .5rem; padding-top: .5rem; }

.asset-thumb {
  width: 56px; height: 40px; object-fit: contain;
  background: repeating-conic-gradient(#e9ecef 0% 25%, #fff 0% 50%) 50% / 12px 12px;
  border-radius: .25rem; border: 1px solid #dee2e6;
}
.asset-font-sample { width: 56px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; border: 1px solid #dee2e6; border-radius: .25rem; background: #fff; }

.font-picker { border: 1px solid #dee2e6; border-radius: .375rem; padding: .6rem .75rem; background: #fff; }
/* Liste déroulante + import : même ligne tant que la place le permet, l'aperçu de la police dessous */
.font-picker-select { flex: 1 1 220px; max-width: 360px; width: auto; }
.font-picker-select .form-select { min-width: 0; }
.font-sample { font-size: 1.25rem; line-height: 1.2; }

.preview-col { position: sticky; top: calc(var(--topbar-height) + 64px); }
/* En-tête de l'aperçu : les listes se partagent la largeur disponible au lieu de déborder */
.preview-head select { flex: 1 1 0; min-width: 0; max-width: 220px; }
.preview-head select:first-of-type { margin-left: auto; }
.preview-head .btn { flex: 0 0 auto; }

.layout-toolbar { background: #fff; border: 1px solid #dee2e6; border-radius: .375rem; padding: .4rem .5rem; margin-bottom: .75rem; }

/* Aperçu agrandi : plein écran, l'écran de la cabine tient dans la place restante */
.preview-col.preview-large {
  position: fixed; inset: 0; z-index: 1040;
  display: flex; flex-direction: column;
  padding: 1rem 1.5rem; background: #f0f2f5;
}
.preview-large #preview-stage {
  flex: 1; min-height: 0; container-type: size;
  display: flex; align-items: center; justify-content: center; padding: 8px;
}
.preview-large #preview { width: min(100cqw - 16px, (100cqh - 16px) * var(--kp-ratio, 1.6)); }
body.preview-large-open { overflow: hidden; }

.json-editor { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; min-height: 420px; }

.form-control.is-invalid, .form-select.is-invalid { background-image: none; padding-right: .75rem; }

/* ─── Aperçu de l'écran (KioskPreview) ───────────────────────────────────────── */

/* Écran de la cabine rendu dans une iframe à sa résolution réelle, réduite (transform) ;
   le calque .kp-layer, au-dessus, reçoit les clics de l'éditeur */
.kp-screen {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: .5rem;
  box-shadow: 0 0 0 6px #1a1d21, 0 6px 24px rgba(0,0,0,.25);
  background: #111318;
  user-select: none;
}
.kp-viewport { position: absolute; inset: 0; overflow: hidden; }
.kp-frame { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none; }
.kp-layer { position: absolute; inset: 0; }
.kp-hit { position: absolute; }

/* Clic sur un élément : accès à ses réglages (toutes mises en page) */
.kp-selectable .kp-hit { cursor: pointer; }
.kp-selectable .kp-hit:hover { outline: 1px dashed rgba(13,110,253,.9); outline-offset: -1px; }

/* Mise en page libre : éléments déplaçables et redimensionnables à la souris */
.kp-screen.kp-editable { touch-action: none; }
.kp-editable .kp-hit[data-element] { cursor: move; outline: 1px dashed rgba(13,110,253,.7); outline-offset: -1px; }
.kp-selectable .kp-hit.kp-selected { outline: 2px solid #0d6efd; outline-offset: -2px; z-index: 5; }
.kp-handle {
  position: absolute; width: 10px; height: 10px; z-index: 6;
  background: #fff; border: 2px solid #0d6efd; border-radius: 2px;
}
.kp-handle-nw { left: 0; top: 0; cursor: nwse-resize; }
.kp-handle-ne { right: 0; top: 0; cursor: nesw-resize; }
.kp-handle-sw { left: 0; bottom: 0; cursor: nesw-resize; }
.kp-handle-se { right: 0; bottom: 0; cursor: nwse-resize; }
/* Repères des aimants pendant le déplacement */
.kp-guide { position: absolute; z-index: 7; pointer-events: none; }
.kp-guide-v { top: 0; bottom: 0; width: 0; border-left: 1px solid #ff2fb3; }
.kp-guide-h { left: 0; right: 0; height: 0; border-top: 1px solid #ff2fb3; }