/* Zone Moteur des ateliers de code : éditeur, console, aperçu. S'appuie sur atelier.css et zones.css (jetons de couleur, thèmes clair et sombre). */
:root { --f-code: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, 'Liberation Mono', monospace; }
#moteurSlot { min-height: 0; }
.mo-barre { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 8px; flex-wrap: wrap; border-bottom: 1px solid var(--n2); background: var(--surface); }
.mo-barre .btn { padding: 0 14px; }
#statut { font-size: .82rem; color: var(--n5); min-width: 0; flex: 1 1 140px; line-height: 1.3; }
#statut:empty { display: none; }
#statut.ok { color: var(--ok); } #statut.ko { color: var(--ko); font-weight: 600; }
.mo-grille { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 8px; }
.mo-panneau { min-width: 0; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--n2); border-radius: 10px; overflow: hidden; background: var(--surface); }
.mo-tabs { flex: none; display: flex; align-items: center; gap: 2px; background: var(--n0); border-bottom: 1px solid var(--n2); padding: 0 4px; min-height: 36px; overflow-x: auto; }
.mo-tabs button { flex: none; min-height: 44px; padding: 0 12px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--n7); font-weight: 650; font-size: .84rem; cursor: pointer; white-space: nowrap; }
.mo-tabs button[aria-selected=true] { color: var(--bleu-ink); border-bottom-color: var(--bleu); }
.mo-tabs button small { font-weight: 500; color: var(--n5); }
.mo-titre { font: 650 .8rem var(--f-code); color: var(--n7); padding: 0 8px; }

.editeur { flex: 1 1 auto; min-height: 0; display: flex; background: var(--surface); }
.editeur[hidden], .html-lecture[hidden], .sortie[hidden], .apercu-cadre[hidden] { display: none; }
.gutter, #code { font: 500 14px/1.55 var(--f-code); padding-block: 8px; margin: 0; }
.gutter { flex: none; width: 3.2ch; box-sizing: content-box; padding-inline: 6px 6px; text-align: right; color: var(--n4); background: var(--n0); border-inline-end: 1px solid var(--n2); overflow: hidden; white-space: pre; user-select: none; -webkit-user-select: none; }
#code { flex: 1 1 auto; min-width: 0; border: 0; resize: none; background: transparent; color: var(--ink); padding-inline: 10px; white-space: pre; overflow: auto; tab-size: 2; -moz-tab-size: 2; overscroll-behavior: contain; border-radius: 0; }
#code:focus-visible { outline: 3px solid var(--bleu); outline-offset: -3px; }
.html-lecture { flex: 1 1 auto; min-height: 0; margin: 0; padding: 8px 10px; overflow: auto; font: 500 14px/1.55 var(--f-code); color: var(--n7); background: var(--n0); white-space: pre; tab-size: 2; overscroll-behavior: contain; }

.sortie-zone { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.apercu-cadre { flex: 1 1 auto; min-height: 0; background: #fff; position: relative; }
.apercu-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; color-scheme: light; }
.sortie { flex: 1 1 auto; min-height: 0; margin: 0; padding: 8px 10px; overflow: auto; font: 500 14px/1.55 var(--f-code); white-space: pre-wrap; word-break: break-word; background: var(--surface); color: var(--ink); overscroll-behavior: contain; user-select: text; -webkit-user-select: text; }
.sortie .l.error { color: var(--ko); } .sortie .l.warn { color: var(--warn); } .sortie .l.vide { color: var(--n5); font-style: italic; font-family: var(--f-ui); }
.apercu-cadre + .sortie { border-top: 1px solid var(--n2); }

/* écran étroit ou bas : éditeur au-dessus, résultat dessous */
@media (max-width: 900px), (max-height: 560px) and (max-width: 900px) {
  .mo-grille { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .mo-barre { gap: 6px; padding: 5px 6px; }
  .mo-barre .btn { padding: 0 12px; }
  .mo-barre .btn:not(.prim) .lib { display: none; }
  .mo-barre .btn:not(.prim) { min-width: 44px; padding: 0 10px; }
  .mo-grille { padding: 6px; gap: 6px; }
}
@media (max-height: 560px) and (min-width: 901px) { .mo-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-height: 560px) { .mo-barre { padding: 3px 6px; flex-wrap: nowrap; } #statut { flex: 1 1 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mo-grille { padding: 4px 6px 6px; } }
@media (pointer: coarse), (max-width: 760px) { #code, .gutter, .sortie, .html-lecture { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* cible tactile du logo même quand le nom est masqué (petits écrans) */
.marque { min-width: 44px; justify-content: center; flex: none; white-space: nowrap; }
.marque > div { min-width: 0; }
.ex-carte .t, .ex-carte .t > * { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 320px) { .ex-carte { flex-wrap: wrap; } .liste-ex { overflow: auto; } }