/* 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)); }
}

/* ---------- Plein écran / mode focus ---------- */
.fs-btn { gap: 8px; }
@media (max-width: 760px) { .fs-btn .fs-lib { display: none; } .fs-btn { min-width: 44px; padding: 0 10px; } }
/* La page occupe 100 % de l'écran : aucune marge, aucun chrome de site, toujours zéro défilement de page */
html.maximise, html.maximise body { width: 100%; height: 100%; margin: 0; }
html.maximise .page { height: 100vh; height: 100dvh; height: var(--vvh, 100dvh); }
html.maximise .corps { padding: 6px; }
html.maximise .etiq-maq, html.maximise .marque small { display: none; }
html.maximise .top { padding-block: 0; }
html.maximise .zones { gap: 8px; }
@media (min-width: 1900px) { html.maximise .corps { max-width: none; } }
html:fullscreen, html:-webkit-full-screen { background: var(--paper); }
.fs-toast, .fs-banniere { position: fixed; z-index: 120; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); margin-inline: auto; max-width: 560px; background: #0F1B3C; color: #fff; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.35); padding: 8px 12px; display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.fs-toast { display: none; } .fs-toast.on { display: block; }
.fs-banniere span { flex: 1; }
.fs-banniere .btn.mini { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }


/* ---------- Zones repliables : Énoncé et Indications (écrans larges seulement ; en mode onglets, inchangé) ---------- */
.zone-toggle { flex: none; width: 44px; height: 44px; margin-inline-start: -8px; display: grid; place-items: center; border: 0; background: transparent; color: var(--zi); cursor: pointer; border-radius: 10px; }
.zone-toggle:hover { background: rgba(0,0,0,.06); }
.zone-toggle .ico { transition: transform .2s; }
.zone-toggle[aria-expanded=false] .ico { transform: rotate(-90deg); }
.zones { transition: grid-template-columns .22s ease, grid-template-rows .22s ease; }
@media (prefers-reduced-motion: reduce) { .zones, .zone-toggle .ico { transition: none; } }
@media (max-width: 760px), (max-height: 560px) { .zone-toggle, .zones-global { display: none; } }
@media (min-width: 761px) and (min-height: 561px) {
  .zones[data-enonce=off][data-indication=on] { grid-template-columns: 48px minmax(0, 1fr); }
  .zones[data-enonce=on][data-indication=off] { grid-template-columns: minmax(0, 1fr) 48px; }
  .zones[data-enonce=off][data-indication=off] { grid-template-rows: 52px minmax(0, 1fr); }
  .zone.replie > .zone-corps { display: none; }
  .zone.replie .zone-titre > :not(h2):not(.zone-toggle) { display: none; }
  .zone.replie .zone-titre { border-bottom: 0; }
  .zones[data-enonce=off][data-indication=on] .zone[data-zone=enonce] .zone-titre,
  .zones[data-enonce=on][data-indication=off] .zone[data-zone=indication] .zone-titre { flex-direction: column; justify-content: flex-start; align-items: center; height: 100%; padding: 4px 0 8px; gap: 6px; }
  .zones[data-enonce=off][data-indication=on] .zone[data-zone=enonce] h2,
  .zones[data-enonce=on][data-indication=off] .zone[data-zone=indication] h2 { writing-mode: vertical-rl; }
  .zones[data-enonce=off][data-indication=on] .zone[data-zone=enonce] .zone-toggle,
  .zones[data-enonce=on][data-indication=off] .zone[data-zone=indication] .zone-toggle { margin-inline-start: 0; }
}