/* ZONES : coque réutilisable d'un atelier à 3 zones (croquis zone.pdf d'Ilias).
   ┌───────────── Énoncé (vert) ─────────────┬──────────── Indications (ambre) ───────────┐
   └─────────────────────────────────────────┴─────────────────────────────────────────────┘
   ┌────────────────────────────── Moteur (bleu) : tableur, éditeur Python, SQL… ─────────┐
   Générique : aucune ligne propre à Excel. Squelette HTML et API : voir MAQUETTE-LISEZMOI.md §8 et zones.js.
   Tokens à fournir par la page : --surface, --ink, --n1..--n7, --bleu (voir atelier.css). Le thème sombre est géré ici. */

:root {
  --z-enonce: #2E8B57; --z-enonce-soft: #E6F3EA; --z-enonce-ink: #17603A;
  --z-indic: #C98A00; --z-indic-soft: #FFF3D1; --z-indic-ink: #6F4A00;
  --z-moteur: #0B5FFF; --z-moteur-soft: #E6EFFF; --z-moteur-ink: #0A3FA8;
}
/* ---------- Thème sombre : suit le système, ou choix explicite (data-theme) ---------- */
:root[data-theme=dark] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { color-scheme: dark; } }
:root[data-theme=dark], :root[data-theme=dark] body { --dark: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --ink: #E8EDF7; --n7: #B7C1D3; --n5: #93A0B8; --n4: #74829E; --n3: #3B4A68; --n2: #26344F; --n1: #1C2842; --n0: #172238;
    --paper: #0B1222; --surface: #111A2E; --bleu-soft: #16264A; --bleu-ink: #9DBBFF; --bleu-line: #2A4A8A;
    --ok: #4CC79A; --ok-soft: #10352B; --ko: #FF8A80; --ko-soft: #3A1A1C; --warn: #F2C25B; --warn-soft: #362B10;
    --cible: #2B2912; --cible2: #3A3516; --sh: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.25);
    --z-enonce-soft: #0F2A1C; --z-enonce-ink: #7EE2A8; --z-indic-soft: #33270A; --z-indic-ink: #F2C25B; --z-moteur-soft: #13254A; --z-moteur-ink: #9DBBFF;
  }
}
:root[data-theme=dark] {
  --ink: #E8EDF7; --n7: #B7C1D3; --n5: #93A0B8; --n4: #74829E; --n3: #3B4A68; --n2: #26344F; --n1: #1C2842; --n0: #172238;
  --paper: #0B1222; --surface: #111A2E; --bleu-soft: #16264A; --bleu-ink: #9DBBFF; --bleu-line: #2A4A8A;
  --ok: #4CC79A; --ok-soft: #10352B; --ko: #FF8A80; --ko-soft: #3A1A1C; --warn: #F2C25B; --warn-soft: #362B10;
  --cible: #2B2912; --cible2: #3A3516; --sh: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.25);
  --z-enonce-soft: #0F2A1C; --z-enonce-ink: #7EE2A8; --z-indic-soft: #33270A; --z-indic-ink: #F2C25B; --z-moteur-soft: #13254A; --z-moteur-ink: #9DBBFF;
}

/* ---------- Grille : 2 boîtes en haut, 1 pleine largeur en bas (≈ 2/3) ---------- */
.zones { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 42fr) minmax(0, 58fr); gap: 10px; }
.zone { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--zb); border-radius: 14px; box-shadow: var(--sh); }
.zone[data-zone=moteur] { grid-column: 1 / -1; }
.zone[data-zone=enonce] { --za: var(--z-enonce); --zs: var(--z-enonce-soft); --zi: var(--z-enonce-ink); --zb: var(--z-
); }
.zone[data-zone=indication] { --za: var(--z-indic); --zs: var(--z-indic-soft); --zi: var(--z-indic-ink); --zb: var(--z-
); }
.zone[data-zone=moteur] { --za: var(--z-moteur); --zs: var(--z-moteur-soft); --zi: var(--z-moteur-ink); --zb: var(--z-
); }
.zone-titre { flex: none; display: flex; align-items: center; gap: 8px; min-height: 36px; padding-block: 2px; padding-inline: 12px 8px; background: var(--zs); border-top: 4px solid var(--za); border-bottom: 1px solid var(--zb); color: var(--zi); }
.zone-titre h2 { font-size: .8rem; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; color: var(--zi); margin: 0; white-space: nowrap; }
.zone-sous { font-size: .78rem; color: var(--zi); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.zone-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 4px; flex: none; }
.zone-corps { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.zone .btn.mini { min-height: 44px; }

/* ---------- Mode onglets : téléphone et paysage bas. L'ordre des onglets : Moteur · Énoncé · Indications ---------- */
.tabsbar { display: none; }
@media (max-width: 760px), (max-height: 560px) {
  .zones { display: block; }
  .zone, .zones .zone[data-zone=moteur] { height: 100%; display: none; }
  .zones[data-vue=enonce] .zone[data-zone=enonce], .zones[data-vue=indication] .zone[data-zone=indication], .zones[data-vue=moteur] .zone[data-zone=moteur] { display: flex; }
  .tabsbar { display: flex; gap: 4px; }
  .tabsbar button { min-height: 44px; padding: 0 12px; border: 1px solid var(--n3); border-radius: 10px; background: var(--surface); color: var(--ink); font-weight: 650; cursor: pointer; }
  .tabsbar button[aria-selected=true] { background: var(--bleu); border-color: var(--bleu); color: #fff; }
  .zone[data-zone=moteur] > .zone-titre { display: none; }
}
@media (max-width: 760px) { .tabsbar { order: 10; width: 100%; } .tabsbar button { flex: 1; } }
@media (max-height: 560px) { .zone-titre { min-height: 40px; } }

/* Repli sans color-mix() : bordure pleine de la couleur de zone ; version adoucie si le navigateur sait mélanger */
@supports (color: color-mix(in srgb, red, blue)) {
  .zone[data-zone=enonce] { --zb: color-mix(in srgb, var(--z-enonce) 40%, var(--n2)); }
  .zone[data-zone=indication] { --zb: color-mix(in srgb, var(--z-indic) 45%, var(--n2)); }
  .zone[data-zone=moteur] { --zb: color-mix(in srgb, var(--z-moteur) 40%, var(--n2)); }
}