/* Ateliers « code » (Python, POO, Algorithmique) : zone Moteur = éditeur + console (+ variables, logigramme).
   S'ajoute à atelier.css et zones.css (copiés de maquette/assets). Aucun défilement de la PAGE : seuls l'éditeur,
   la console, le tableau des variables et le logigramme défilent dans leur cadre. */
.mc {
  --alp-fonte: 14px; --alp-lh: 21px;
  --ed-bg: #fff; --ed-gut: #F1F4FA; --ed-gut-ink: #7C89A3; --ed-ink: var(--ink); --ed-ligne: var(--n2);
  --ed-k: #5B3FD9; --ed-s: #0B7A55; --ed-n: #1D56D6; --ed-c: #7A8699; --ed-o: #A8480A;
  --ed-actif: #DBEAFE; --ed-actif-bord: #2563EB; --ed-err: #FEE2E2; --ed-err-bord: #B91C1C; --ed-sel: rgba(11,95,255,.2);
  --cons-bg: #14213D; --cons-ink: #F4F7FF;
  flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; background: var(--surface);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .mc { --ed-bg: #0D1526; --ed-gut: #141E35; --ed-gut-ink: #6F7F9E; --ed-k: #B7A3FF; --ed-s: #6EDDB0; --ed-n: #8DB8FF; --ed-c: #8593AC; --ed-o: #F2B866; --ed-actif: #17325E; --ed-actif-bord: #5C97FF; --ed-err: #40191C; --ed-err-bord: #FF8A80; --ed-sel: rgba(120,160,255,.3); --cons-bg: #070D1A; }
}
:root[data-theme=dark] .mc { --ed-bg: #0D1526; --ed-gut: #141E35; --ed-gut-ink: #6F7F9E; --ed-k: #B7A3FF; --ed-s: #6EDDB0; --ed-n: #8DB8FF; --ed-c: #8593AC; --ed-o: #F2B866; --ed-actif: #17325E; --ed-actif-bord: #5C97FF; --ed-err: #40191C; --ed-err-bord: #FF8A80; --ed-sel: rgba(120,160,255,.3); --cons-bg: #070D1A; }
@media (pointer: coarse), (max-width: 760px) { .mc { --alp-fonte: 16px; --alp-lh: 23px; } }
@supports (-webkit-touch-callout: none) { .mc { --alp-fonte: 16px; --alp-lh: 23px; } }

/* ----- barre d'outils ----- */
.mc-barre { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 5px 8px; border-bottom: 1px solid var(--n2); background: var(--n0); }
.mc-barre .btn { padding: 0 12px; }
.mc-etat { flex: 1 1 140px; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-etat[data-cls=ok], .alp-etat.fini { color: var(--ok); font-weight: 650; }
.mc-etat[data-cls=ko], .alp-etat.erreur { color: var(--ko); font-weight: 650; }
.alp-etat { font-size: .82rem; color: var(--n5); }

/* ----- corps : grille de panneaux ----- */
.mc-corps { flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.mc-onglets { display: none; }
.mc-zone { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.mc-zone + .mc-zone { border-inline-start: 1px solid var(--n2); }
.mc-py .mc-corps { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.mc-py .mc-code { grid-column: 1; grid-row: 1 / -1; }
.mc-py .mc-cons { grid-column: 2; grid-row: 1 / -1; }
.mc-algo .mc-corps { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) minmax(0, .9fr); }
.mc-algo .mc-code { grid-column: 1; grid-row: 1 / -1; }
.mc-algo .mc-exec { grid-column: 2; grid-row: 1 / -1; }
.mc-algo .mc-lg { grid-column: 3; grid-row: 1 / -1; }
.mc-editeur { flex: 1 1 auto; min-height: 0; display: flex; }
.mc-editeur .alp-editeur { flex: 1 1 auto; min-width: 0; }

.mc-onglets button { flex: 1; min-height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid var(--n3); border-radius: 10px; background: var(--surface); color: var(--ink); font-weight: 650; cursor: pointer; }
.mc-onglets button[aria-selected=true] { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.mc-barre .btn { min-width: 44px; }
/* tablette portrait / écran moyen : code à gauche, exécution ou logigramme à droite */
@media (max-width: 1099px) and (min-width: 761px) and (min-height: 561px) {
  .mc-algo .mc-corps { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .mc-algo .mc-onglets { display: flex; gap: 4px; padding: 4px 6px; border-bottom: 1px solid var(--n2); background: var(--n0); grid-column: 2; grid-row: 1; }
  .mc-algo .mc-onglets [data-p=code] { display: none; }
  .mc-algo .mc-exec, .mc-algo .mc-lg { grid-column: 2; grid-row: 2; }
  .mc-algo[data-vue=lg] .mc-exec, .mc-algo:not([data-vue=lg]) .mc-lg { display: none; }
}
/* téléphone et paysage bas : un seul panneau à la fois, onglets en haut */
@media (max-width: 760px), (max-height: 560px) {
  .mc-corps { grid-template-columns: minmax(0, 1fr) !important; }
  .mc-onglets { display: flex; grid-column: 1; grid-row: 1; gap: 4px; padding: 4px 6px; border-bottom: 1px solid var(--n2); background: var(--n0); }
  .mc-zone { grid-column: 1 !important; grid-row: 2 !important; display: none; border-inline-start: 0 !important; }
  .mc-py[data-vue=code] .mc-code, .mc-py[data-vue=cons] .mc-cons,
  .mc-algo[data-vue=code] .mc-code, .mc-algo[data-vue=exec] .mc-exec, .mc-algo[data-vue=lg] .mc-lg { display: flex; }
  .mc-barre { gap: 4px; padding: 4px 6px; }
  .mc-barre .btn { padding: 0 10px; }
  .mc-barre .lib:not(.vf) { display: none; }
  .mc-barre .mc-etat { flex-basis: 100%; order: 9; }
  .mc-barre .mc-etat:empty { display: none; }
}
@media (max-height: 560px) { .mc-barre .mc-etat { position: absolute; inset-inline: 8px; bottom: 6px; z-index: 6; padding: 4px 10px; background: var(--surface); border: 1px solid var(--n3); border-radius: 8px; box-shadow: var(--sh); pointer-events: none; flex: none; } .mc-barre .mc-etat:empty { display: none; } .mc-barre .btn { padding: 0 12px; } }
.zone[data-zone=moteur] .zone-corps { position: relative; }

/* ----- éditeur de code (modules du site : classes alp-*) ----- */
.alp-editeur { min-height: 0; font: 500 var(--alp-fonte)/var(--alp-lh) var(--f-mono); background: var(--ed-bg); color: var(--ed-ink); display: flex; position: relative; }
.alp-gouttiere { color: var(--ed-gut-ink); text-align: end; -webkit-user-select: none; user-select: none; background: var(--ed-gut); flex: none; width: 40px; position: relative; overflow: hidden; }
.alp-gouttiere-in { position: relative; }
.alp-gouttiere-num { height: var(--alp-lh); padding-inline-end: 6px; font-size: .78em; position: absolute; inset-inline: 0; }
.alp-gouttiere-num.erreur { background: var(--ed-err-bord); color: #fff; font-weight: 700; }
.alp-gouttiere-num.actif { background: var(--ed-actif-bord); color: #fff; font-weight: 700; }
.alp-saisie-cadre { flex: 1 1 auto; min-width: 0; position: relative; overflow: hidden; }
.alp-calques { pointer-events: none; position: absolute; top: 0; left: 0; right: 0; }
.alp-couleur, .alp-code { font: inherit; white-space: pre; tab-size: 4; letter-spacing: 0; border: 0; margin: 0; padding: 8px 10px; }
.alp-couleur { color: var(--ed-ink); box-sizing: border-box; min-width: 100%; position: relative; }
.alp-code { box-sizing: border-box; resize: none; color: transparent; width: 100%; height: 100%; caret-color: var(--ed-ink); overscroll-behavior: contain; background: transparent; outline: none; position: absolute; inset: 0; overflow: auto; -webkit-text-fill-color: transparent; }
.alp-code::selection { color: transparent; background: var(--ed-sel); }
.alp-code:focus-visible { box-shadow: inset 0 0 0 2px var(--bleu); }
.alp-barres { position: relative; }
.alp-barre { height: var(--alp-lh); position: absolute; left: 0; right: 0; }
.alp-barre.actif { background: var(--ed-actif); box-shadow: inset 3px 0 0 var(--ed-actif-bord); }
.alp-barre.erreur { background: var(--ed-err); box-shadow: inset 3px 0 0 var(--ed-err-bord); }
.alp-couleur .k { color: var(--ed-k); font-weight: 700; }
.alp-couleur .s { color: var(--ed-s); }
.alp-couleur .n { color: var(--ed-n); }
.alp-couleur .c { color: var(--ed-c); font-style: normal; }
.alp-couleur .o { color: var(--ed-o); font-weight: 700; }
.alp-erreur { background: var(--ko-soft); color: var(--ko); border-top: 1px solid var(--ko); flex: none; max-height: 5.5em; margin: 0; padding: 6px 10px; font-size: .82rem; overflow: auto; }
.alp-erreur[hidden] { display: none; }

/* ----- boîte à outils (insère un modèle d'instruction) ----- */
.alp-boite { flex: none; display: flex; gap: 4px; padding: 3px 6px; overflow-x: auto; border-bottom: 1px solid var(--n2); background: var(--n0); scrollbar-width: thin; }
.alp-boite-btn { all: unset; box-sizing: border-box; flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 10px 0 7px; border: 1px solid var(--n3); border-radius: 9px; background: var(--surface); color: var(--ink); cursor: pointer; font-weight: 650; font-size: .85rem; white-space: nowrap; }
.alp-boite-btn:hover { background: var(--bleu-soft); border-color: var(--bleu-line); }
.alp-boite-btn:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }
.alp-boite-btn[hidden] { display: none; }
.alp-boite-ico { flex: none; width: 24px; height: 16px; }
.mc-code > .touches { flex: none; }

/* ----- console, saisies, variables ----- */
.mc-cons { background: var(--cons-bg); color: var(--cons-ink); }
.mc-sortie, .alp-sortie { flex: 1 1 auto; min-height: 0; margin: 0; padding: 8px 10px; overflow: auto; overscroll-behavior: contain; white-space: pre-wrap; word-break: break-word; font: 500 max(.84rem, 13px)/1.45 var(--f-mono); color: var(--cons-ink); -webkit-user-select: text; user-select: text; }
.mc-sortie .err, .alp-sortie .err { color: #FFB4AB; font-weight: 700; }
.mc-sortie .fin, .alp-sortie .fin { color: #8FE3B5; }
.alp-sortie .echo { color: #FDE68A; }
.mc-entrees, .alp-donnees { flex: none; border-top: 1px solid rgba(255,255,255,.15); font-size: .8rem; color: var(--cons-ink); }
.mc-entrees summary, .alp-donnees summary { cursor: pointer; color: #CBD5E1; min-height: 44px; display: flex; align-items: center; padding: 0 10px; }
.mc-entrees textarea, .alp-donnees textarea { box-sizing: border-box; display: block; width: calc(100% - 12px); margin: 0 6px 6px; min-height: 3.2em; max-height: 6em; resize: vertical; border: 0; border-radius: 8px; padding: 4px 8px; background: #fff; color: #14213D; font: 500 .85rem var(--f-mono); }
.alp-console { flex: 1 1 55%; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--cons-bg); color: var(--cons-ink); }
.alp-saisie { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px; border-top: 1px solid rgba(255,255,255,.15); }
.alp-saisie[hidden] { display: none; }
.alp-saisie label { color: #FDE68A; white-space: nowrap; text-overflow: ellipsis; max-width: 45%; overflow: hidden; font: 700 .78rem/1.2 var(--f-mono); }
.alp-saisie input { flex: 1 1 auto; min-width: 0; min-height: 44px; color: #14213D; background: #fff; border: 2px solid #FDE68A; border-radius: 8px; padding: 0 8px; font: 600 16px var(--f-mono); }
.alp-saisie button { min-height: 44px; min-width: 44px; padding: 0 14px; color: #14213D; cursor: pointer; background: #FDE68A; border: 0; border-radius: 8px; font-weight: 800; }
.mc-exec { background: var(--surface); }
.alp-variables { flex: 1 1 45%; min-height: 0; overflow: auto; overscroll-behavior: contain; border-top: 1px solid var(--n2); background: var(--surface); }
.alp-variables table { border-collapse: collapse; width: 100%; font: 500 .8rem/1.3 var(--f-mono); }
.alp-variables th { color: var(--n7); text-align: start; background: var(--n1); padding: 4px 6px; font: 700 .7rem var(--f-ui); position: sticky; top: 0; }
.alp-variables td { color: var(--ink); text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid var(--n1); max-width: 140px; padding: 3px 6px; overflow: hidden; }
.alp-variables td.type { color: var(--n5); }
.alp-variables td.vide { color: var(--n4); }
.alp-variables tr.change td { background: var(--warn-soft); }
.alp-variables .aucune { color: var(--n5); padding: 8px; font-size: .78rem; margin: 0; }

/* ----- logigramme ----- */
.mc-lg { background: var(--surface); }
.mc-lg-tete { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 8px; border-bottom: 1px solid var(--n2); background: var(--n0); }
.mc-lg-btns { display: flex; gap: 2px; }
.alp-lg-cadre { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; cursor: grab; touch-action: pan-x pan-y; background: #fff; position: relative; }
.alp-lg-cadre.glisse { cursor: grabbing; }
.alp-lg-cadre svg { margin: 8px auto; display: block; }
.alp-lg-note { color: var(--warn); background: var(--warn-soft); flex: none; margin: 0; padding: 4px 10px; font-size: .78rem; }
.alp-lg-note[hidden] { display: none; }
.alp-lg-vide { color: #475569; text-align: center; padding: 18px; font-size: .85rem; }

/* ----- indications, accueil, formateur ----- */
.ex-code { margin: 4px 0; padding: 6px 8px; background: var(--n1); border-radius: 6px; white-space: pre-wrap; word-break: break-word; font: 500 .8rem/1.45 var(--f-mono); -webkit-user-select: text; user-select: text; }
.ex-code code { background: none; padding: 0; }
.fn-carte code { white-space: pre-wrap; }
.liste-ex { grid-template-rows: repeat(var(--nex, 5), minmax(0, 1fr)); }
.kpis.taux { grid-template-columns: repeat(var(--nex, 5), minmax(0, 1fr)); }
.enonce-corps pre { margin: 4px 0; padding: 6px 8px; background: var(--n1); border-radius: 6px; white-space: pre-wrap; font: 500 .8rem/1.45 var(--f-mono); }
.enonce-corps pre code { background: none; padding: 0; }
.enonce-corps .exemple { border-inline-start: 4px solid var(--z-enonce); background: var(--z-enonce-soft); border-radius: 6px; padding: 4px 10px; margin: 4px 0; }
.enonce-corps table.mini { border-collapse: collapse; font-size: .84rem; margin: 4px 0; }
.enonce-corps table.mini th, .enonce-corps table.mini td { border: 1px solid var(--n3); padding: 2px 8px; text-align: start; }
@media (max-width: 1179px) { .kpis.taux { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .mc * { transition: none !important; scroll-behavior: auto !important; } }

/* En-tête en paysage bas : 5 exercices + onglets + boutons doivent tenir sur une ligne */
@media (max-height: 560px) { .top { gap: 4px; } .top .chips { gap: 3px; } .lang .nl { display: none; } .lang summary { padding: 0 8px; } }
/* Cartes d'exercices : titres sur une ligne (5 exercices sur petit écran) */
.ex-carte .t b, .ex-carte .t > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { .ex-carte .t b { font-size: .9rem; } .ex-carte { gap: 8px; } }
/* L'en-tête ne se comprime jamais (contenu des zones plus haut que l'écran) */
.page > .top { flex: none; }
@media (max-width: 760px) { #heroPetit { display: none; } }
/* Écrans moyens (tablette portrait) : en-tête compact, boutons à icône seule pour ne pas se chevaucher */
@media (max-width: 1100px) { .top .zg-lib, .top .fs-lib, .top .marque small, .top .marque span.nom, .top .lang .nl { display: none; } .top .zones-global, .top .fs-btn { min-width: 44px; padding: 0 10px; } }