/* Moteur SQL des ateliers : éditeur, tableau de résultats, vue des tables. Utilise les variables de atelier.css / zones.css (thème clair et sombre). */
.sql-moteur { min-height: 0; }
.sql-barre { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--n2); background: var(--n0); flex: none; overflow-x: auto; scrollbar-width: thin; }
.sql-barre .btn { flex: none; }
.sql-barre .btn.arme { background: var(--warn-soft); border-color: var(--or); color: var(--warn); }
.sql-corps { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.sql-editeur { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-inline-end: 1px solid var(--n2); }
.sql-editeur .touches { flex: none; }
#sqlEditeur { flex: 1 1 auto; min-height: 0; width: 100%; resize: none; border: 0; outline: 0; margin: 0; padding: 10px 12px; font: 500 14px/1.55 var(--f-mono); color: var(--ink); background: var(--surface); white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; tab-size: 2; direction: ltr; text-align: left; caret-color: var(--bleu); -webkit-appearance: none; appearance: none; border-radius: 0; }
#sqlEditeur:focus-visible { box-shadow: inset 0 0 0 2px var(--bleu); }
#sqlEditeur::placeholder { color: var(--n4); }
.sql-sortie { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--surface); }
.sql-onglets { display: flex; align-items: center; gap: 4px; padding: 4px 6px 0; border-bottom: 1px solid var(--n2); background: var(--n0); flex: none; min-width: 0; }
.sql-onglets button { flex: none; min-height: 44px; padding: 0 14px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; background: transparent; font-weight: 650; cursor: pointer; color: var(--n7); }
.sql-onglets button[aria-selected=true] { background: var(--surface); border-color: var(--n2); color: var(--bleu-ink); box-shadow: 0 2px 0 var(--surface); }
.sql-statut { margin-inline-start: auto; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 6px; }
.sql-vue { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 8px 10px; direction: ltr; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sql-vide { color: var(--n5); margin: 6px 2px; }
.sql-msg { border-radius: 10px; padding: 10px 12px; border: 1px solid var(--n2); background: var(--n0); }
.sql-msg.ko { border-color: var(--ko); background: var(--ko-soft); color: var(--ink); }
.sql-msg.ok { border-color: var(--ok); background: var(--ok-soft); color: var(--ink); }
.sql-msg p { margin: .3em 0 0; }
.sql-msg details { margin-top: 6px; } .sql-msg summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: .82rem; color: var(--n7); }
.sql-msg pre { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 500 .8rem var(--f-mono); }
.sql-rt { margin: 6px 0 4px; font-size: .8rem; color: var(--n5); text-transform: uppercase; letter-spacing: .05em; }
.sql-vue .tableau-cadre.res { flex: none; max-height: none; overflow-x: auto; overflow-y: visible; margin-bottom: 4px; }
table.tab.res td { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.tab.res { width: auto; min-width: 100%; }
table.tab.res td.num, table.tab.res th.num { text-align: right; }
table.tab.res td.nul { color: var(--n4); font-style: italic; }
table.tab.res thead th { position: static; text-transform: none; font: 650 .8rem var(--f-mono); letter-spacing: 0; }
.sql-table { margin-bottom: 14px; }
.sql-table h3 { font-size: .95rem; margin-bottom: 4px; }
.sql-cols { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; }
.col-chip { font: 500 .76rem var(--f-mono); background: var(--bleu-soft); color: var(--bleu-ink); border-radius: 999px; padding: 2px 9px; }
.col-chip b { font-weight: 700; }
.chip-check { white-space: nowrap; font-size: .76rem; padding: 3px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--n3); color: var(--n7); flex: none; }
.chip-check.ok { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); font-weight: 650; }
.chip-check.ko { border-color: var(--ko); color: var(--ko); background: var(--ko-soft); font-weight: 650; }
.cibles { display: flex; align-items: center; gap: 8px; }
.cibles-liste { overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.retours .brut { color: var(--n5); overflow-wrap: anywhere; }
.enonce-corps table.tab { margin: 4px 0 6px; } .enonce-corps table.tab th { position: static; }
.fn-carte code { overflow-wrap: anywhere; }
/* écrans étroits en hauteur : éditeur au-dessus, résultat dessous */
@media (max-width: 899px) and (min-height: 561px) {
  .sql-corps { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 42fr) minmax(0, 58fr); }
  .sql-editeur { border-inline-end: 0; border-bottom: 1px solid var(--n2); }
}
@media (max-width: 760px) {
  .sql-barre .lib.sec { display: none; }
  .sql-barre { gap: 6px; padding: 4px 6px; }
  .sql-barre .btn { padding: 0 12px; }
}
@media (max-height: 560px) {
  .sql-barre { padding: 2px 6px; } .sql-onglets { padding-top: 2px; }
  #sqlEditeur { padding: 6px 10px; }
}
@media (pointer: coarse), (max-width: 760px) { #sqlEditeur { font-size: 16px; } }
@supports (-webkit-touch-callout: none) { #sqlEditeur { font-size: 16px; } }
@media (min-width: 1700px) and (min-height: 900px) { #sqlEditeur { font-size: 15px; } }
@media (forced-colors: active) { .sql-msg, .col-chip, .chip-check { border: 1px solid CanvasText; } }
@media print { .sql-moteur { display: none; } }
/* accueil : 5 exercices, la liste défile dans son cadre quand l'écran est bas (jamais la page) */
.liste-ex { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.accueil { min-height: 0; }
/* en-tête : cinq pastilles d'exercice (au lieu de quatre) + bouton d'avis du site : on libère de la place en paysage bas, et le clavier de symboles cède la place à l'éditeur sur les petits écrans */
@media (max-height: 560px) { .fs-btn .fs-lib { display: none; } .lang .nl { display: none; } .fs-btn { min-width: 44px; padding: 0 10px; } }
@media (max-width: 760px) and (max-height: 620px) { .sql-editeur .touches { display: none; } }
/* en-tête sans débordement : le bouton « Avis » du site s'ajoute à la rangée des pastilles ; avec cinq exercices la rangée doit pouvoir passer à la ligne */
@media (max-width: 760px) { #entete nav.chips { flex-wrap: wrap; max-width: 100%; min-width: 0; } }
@media (min-width: 761px) and (max-width: 1000px) {
  .top { height: auto; min-height: var(--top); flex-wrap: wrap; padding-block: 4px; }
  .top .marque small, .top .marque span.nom { display: none; }
  .top .zg-lib, .top .fs-btn .fs-lib { display: none; }
  .top .zones-global, .top .fs-btn { min-width: 44px; padding: 0 10px; }
}
@media (max-height: 560px) { .top { gap: 4px; } .top .chips { gap: 4px; } }
@media (max-width: 380px) { #btnExec .lib { display: none; } #btnExec { padding: 0 12px; } }