/* Atelier (30/09) : la voie « faire ». Aucun matériau neuf hormis la MARQUE DE NIVEAU d'un exemple (I · II · III,
   Oswald, comme les numéros de ticket) : « par où commencer » est une rangée de tickets, le programme reprend les
   groupes à filets du Cours, l'échelle des projets le fil des projets, la fiche d'exemple le ticket (le problème),
   la feuille crème (l'éditeur, la sortie, les manipulations) et la grille du jury (les tests). La prédiction de
   l'élève est écrite à la machine (Courier Prime) : c'est sa voix, comme la question sur le ticket.
   Placée AVANT responsive.css (qui adapte .edwrap, .actions…) ; ses propres règles mobiles sont en fin de fichier. */

/* ---------------------------------------------------------------- l'onglet */
.xcount { font-family: var(--disp); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-dim); text-align: right; line-height: 1.25; }
.xcount b { font-size: 34px; font-weight: 500; color: var(--fg); letter-spacing: 0; margin-right: 6px; font-variant-numeric: tabular-nums; }
.xcount small { display: block; font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--fg-faint); margin-top: 6px; max-width: 24ch; margin-left: auto; }
.xstart { margin-top: 26px; }
.xstart h2 { margin-right: 8px; }
.xtix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 14px; }
.ticket.xtk { display: block; width: 100%; text-align: left; cursor: pointer; transition: transform .25s var(--ease); animation: deal .55s var(--ease) both; }
.ticket.xtk:nth-child(1) { transform: rotate(-.6deg); } .ticket.xtk:nth-child(2) { transform: rotate(.5deg); animation-delay: .05s; } .ticket.xtk:nth-child(3) { transform: rotate(-.3deg); animation-delay: .1s; }
.ticket.xtk:hover { transform: rotate(0) translateY(-3px); }
.xtt { font-family: var(--sans); font-size: 18px; font-weight: 600; line-height: 1.3; margin-top: 8px; color: var(--ink); text-wrap: balance; }
.xwhy { font-family: var(--type); font-size: 13px; color: var(--ink-dim); margin-top: 8px; line-height: 1.4; }
/* la marque de niveau : I découverte · II usage courant · III cas tordu */
.xlv { font-family: var(--disp); font-weight: 600; letter-spacing: .08em; font-size: 15px; color: var(--fg-dim); }
.xlv.l2 { color: var(--fg); } .xlv.l3 { color: #ff8d78; }
.ticket .xlv, .ink .xlv { color: var(--ink-dim); } .ticket .xlv.l2, .ink .xlv.l2 { color: var(--ink); } .ticket .xlv.l3, .ink .xlv.l3 { color: var(--stamp); }
.ticket .thead .xlv { font-family: var(--disp); font-size: 13px; letter-spacing: .1em; }
.xprog { margin-top: 6px; }
.xg .tocg-h small { margin-left: auto; }
.xscope { border-top: 1px solid var(--baize-line); padding: 4px 14px 6px; }
.xsh { display: flex; align-items: baseline; gap: 12px; padding: 7px 0 3px; }
.xsl { font-family: var(--disp); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-dim); }
.xth { font-size: 12.5px; color: var(--fg-faint); text-decoration: underline dotted; text-underline-offset: 3px; margin-left: auto; }
.xth:hover { color: var(--fg); }
.xrow { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; width: 100%; text-align: left; padding: 8px 0; border-top: 1px dashed var(--baize-line); transition: background .15s; }
.xsh + .xrow { border-top: 0; }
.xrow:hover { background: rgba(255,255,255,.04); }
.xrow .xt { font-size: 16px; }
.xrow .xt small { display: block; font-size: 12px; color: var(--fg-faint); margin-top: 1px; }
.xst { font-family: var(--type); font-size: 12px; color: var(--fg-faint); text-align: right; white-space: nowrap; }
.xst.on { color: var(--fg-dim); } .xst.ok { color: var(--cream); }

/* ---------------------------------------------------------------- la fiche d'exemple */
.xcrumb { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; font-size: 13px; }
.xcrumb .sp { flex: 1; }
.xhead { max-width: 1100px; }
.xhead .xtitle { font-family: var(--sans); font-weight: 600; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: 0; line-height: 1.2; margin-top: 10px; color: var(--ink); }
.xintro { margin-top: 10px; max-width: 70ch; font-size: 16.5px; line-height: 1.55; }
.xintro p + p { margin-top: 8px; }
.xintro code, .xtries code, .xdefi code, .xrun code { font-family: var(--type); font-size: .92em; background: rgba(var(--ink-rgb), .06); padding: 0 3px; border-radius: 2px; }
.xtheo { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--card-edge); font-size: 14px; color: var(--ink-dim); }
.xtheo .xref { color: var(--ink); }
.xbench { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 22px; max-width: 1100px; }
/* Les vues d'atelier élargissent le canevas (classe posée par le routeur) : à 1360 px, un éditeur Java flanqué d'une
   colonne ne montrait que ~45 colonnes. Mesuré avec cm.getScrollInfo().clientWidth / cm.defaultCharWidth(). */
body.wide main, body.wide .top { max-width: 1800px; }
.xside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.xside > div:empty { display: none; }
/* lot 9 (retour Fabio) : manipulations, défi et tuteur sont DANS la colonne de gauche (.xmain), sous l'IDE — un aperçu
   agrandi à droite ne les repousse plus. En une colonne, .xmain s'efface et l'ordre d'avant est gardé : IDE, sortie
   (la colonne de droite), manipulations, défi, tuteur. */
.xmain { min-width: 0; }
.xmain > .xtries, .xmain > .xdefi, .xmain > .xtutor { max-width: none; }
@media (max-width: 1179.98px) {
  .xmain { display: contents; }
  .xbench > .xside { order: 1; }
  .xbench .xtries, .xbench .xdefi, .xbench .xtutor { order: 2; margin-top: 0; }
}
@media (min-width: 1180px) {
  /* le code à gauche, la consigne en cours et la sortie à droite, collantes : on lit, on code, on vérifie sans défiler */
  .xfiche > * { max-width: none; }
  /* le carton court sur toute la largeur : le texte garde sa colonne de mesure, la fiche signalétique (niveau, durée,
     mode, pile) passe à droite, au-dessus de la colonne des manipulations */
  .xhead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 24%); grid-template-areas: "title meta" "intro meta" "theo theo"; column-gap: 32px; }
  .xhead .thead { grid-area: meta; flex-direction: column; align-items: flex-end; text-align: right; gap: 6px; padding-top: 4px; border-left: 1px dashed var(--card-edge); padding-left: 18px; align-self: stretch; }
  .xhead .xtitle { grid-area: title; margin-top: 0; }
  .xhead .xintro { grid-area: intro; }
  .xhead .xtheo { grid-area: theo; }
  .xbench { grid-template-columns: minmax(0, 1fr) minmax(340px, 26%); gap: 18px; align-items: start; }
  .xside { position: sticky; top: 10px; max-height: calc(100vh - 20px); overflow: auto; padding-bottom: 4px; }
  .xed.edwrap { padding: 12px 14px; }
  .xfiche .ws { --ws-tree-w: 168px; }   /* variable de workspace.css : le repli (.tree-off) continue de marcher */
}
.xcurp { padding: 16px 18px; }
.xch { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-family: var(--disp); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); padding-bottom: 6px; border-bottom: 1px solid var(--card-edge); }
.xch .k { font-size: 12px; color: var(--ink-faint); } .xch .k.ok { color: var(--ok); }
.xask { margin-top: 8px; font-size: 16px; line-height: 1.5; }
.xask code { font-family: var(--type); font-size: .9em; background: rgba(var(--ink-rgb), .06); padding: 0 3px; border-radius: 2px; }
/* consignes structurées (lot 10 : le but, puis des puces, parfois un bloc de code) — lisibles même dans la colonne de
   26 % : puces compactes, numéros alignés, code qui défile au lieu de déborder (lot 9) */
.xask p + p, .xdst p + p, .xask p + ul, .xask p + ol, .xdst p + ul, .xdst p + ol { margin-top: 6px; }
.xask ul, .xask ol, .xdst ul, .xdst ol { margin: 6px 0 4px; padding-left: 1.25em; }
.xask li, .xdst li { margin: 3px 0; line-height: 1.45; padding-left: 2px; }
.xask li::marker, .xdst li::marker { color: var(--ink-faint); }
.xask ol li::marker, .xdst ol li::marker { font-family: var(--disp); font-size: .9em; }
.xask pre, .xdst pre { max-width: 100%; overflow-x: auto; margin: 8px 0; font-size: 13px; }
.xcurp { min-width: 0; }
.xcurp .xask { font-size: 15px; }
.xtrbody > .xask { margin: 2px 0 10px; font-size: 15px; }
.xcurp .xtrbody { padding: 4px 0 0; background: none; }
.xcurp .xcmp { grid-template-columns: minmax(0, 1fr); }
.xside .sheet { animation: none; }
.xrun h3, .xtries h3, .xdefi h3 { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.xrun h3 { margin-bottom: 8px; }
.xidle { font-family: var(--type); font-size: 13px; color: var(--ink-faint); }
.xverdict { font-family: var(--disp); font-size: 26px; letter-spacing: .06em; text-transform: uppercase; color: var(--ok); line-height: 1.1; margin: 4px 0 8px; }
.xverdict.ko { color: var(--stamp); }
.xmatch { margin-top: 10px; font-size: 14.5px; color: var(--ok); }
.xmatch.ko { color: var(--stamp); } .xmatch.dimm { color: var(--ink-dim); }
.xcmp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.xcmp .lbl, .xpred .lbl, .xseen .lbl, .xshowb .lbl, .xdiff .lbl, .xhintb .lbl { font-family: var(--disp); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); display: block; margin-bottom: 4px; }
.xh4 { font-family: var(--disp); font-weight: 500; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--stamp); margin-top: 12px; }
.xplain { margin-top: 8px; font-size: 15px; line-height: 1.5; padding-left: 10px; border-left: 2px solid var(--stamp); }

/* les manipulations */
.xtries, .xdefi { margin-top: 22px; max-width: 1100px; }
.xsub { font-family: var(--type); font-size: 12px; color: var(--ink-dim); }
.xtutor .xsub { color: var(--fg-faint); }
.xlead { font-size: 15px; color: var(--ink-dim); margin-top: 6px; max-width: 72ch; }
.xlead b { color: var(--ink); font-weight: 600; }
.xtlist { margin-top: 10px; border-top: 1px solid var(--card-edge); }
.jal.xtr { border-top: 1px solid var(--card-edge); }
.jal.xtr .t { font-size: 15.5px; line-height: 1.45; }
.jal.xtr .t p { display: inline; }
.xtrbody { padding: 4px 10px 18px 52px; background: rgba(var(--ink-rgb), .05); }
.xwhere { font-size: 13px; color: var(--ink-dim); padding-top: 4px; }
.xfile { font-family: var(--type); font-size: 13px; color: var(--ink); border-bottom: 1px dotted var(--ink-dim); padding: 0 1px; }
.xfile:hover { color: var(--stamp); border-bottom-color: var(--stamp); }
/* la prédiction : écrite à la machine, sur une bande de papier plus claire — et, une fois « Vérifier » appuyé,
   figée avec un petit tampon « noté » : on ne réécrit pas sa prédiction après avoir vu le résultat */
.xpred { position: relative; margin-top: 12px; background: var(--card-in); border: 1px solid var(--card-edge); border-left: 3px solid var(--ink); border-radius: 3px; padding: 10px 14px 12px; }
.xpq { font-size: 15px; font-weight: 600; }
.xpq p { margin: 0; }
.xpred textarea { display: block; width: 100%; margin-top: 8px; font-family: var(--type); font-size: 15px; line-height: 1.5; color: var(--ink); background: transparent; border: 0; border-bottom: 1px dashed var(--ink-faint); padding: 4px 2px; resize: vertical; caret-color: var(--stamp); }
.xpred textarea:focus { outline: none; border-bottom-color: var(--ink); }
.xpa { font-family: var(--type); font-size: 15px; line-height: 1.5; margin-top: 6px; white-space: pre-wrap; }
.xpred.locked::after { content: 'noté'; position: absolute; top: 8px; right: 12px; font-family: var(--disp); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--stamp); border: 1.5px solid var(--stamp); border-radius: 2px; padding: 1px 6px; transform: rotate(-4deg); }
.xtract { margin-top: 12px; }
.xlink { font-size: 13px; color: var(--ink-dim); text-decoration: underline dotted; text-underline-offset: 3px; padding: 4px 0; }
.xlink:hover { color: var(--ink); }
.xnote { font-size: 13.5px; color: var(--ink-dim); margin-top: 8px; line-height: 1.45; max-width: 76ch; }
.xnote .btn { margin-left: 6px; }
.xseen { margin-top: 12px; padding: 10px 14px; border-left: 3px solid var(--ok); background: rgba(47,125,79,.06); font-size: 15px; line-height: 1.55; }
.xseen p + p { margin-top: 6px; }
.xyour { margin-top: 8px; font-family: var(--type); font-size: 13.5px; color: var(--ink-dim); }
.xshowb { margin-top: 12px; }
.xdiff + .xdiff { margin-top: 8px; }
.xdf { margin: 0; padding: 8px 10px; background: var(--card-in); border: 1px solid var(--card-edge); border-radius: 3px; font-family: var(--type); font-size: 12.5px; line-height: 1.5; overflow-x: auto; white-space: pre; }
.xdf span { display: block; }
.xdf .a { background: rgba(47,125,79,.12); color: var(--code-s); } .xdf .d { background: rgba(200,50,30,.09); color: var(--stamp-deep); text-decoration: line-through; text-decoration-color: rgba(156,36,21,.35); }
.xdf .c { color: var(--ink-dim); } .xdf .g { color: var(--ink-faint); }
.xhintb { margin-top: 10px; }
.xbank { padding: 10px 14px; border-left: 3px solid var(--amber); background: rgba(208,138,30,.07); font-size: 15px; }
.xdst { margin-top: 8px; font-size: 16px; line-height: 1.55; max-width: 72ch; }
.xdst p + p { margin-top: 6px; }
.xdefi .stm { transform: rotate(-3deg); margin-left: 6px; }
pre.xsel { margin: 4px 0 8px; padding: 6px 10px; font-family: var(--type); font-size: 12.5px; white-space: pre-wrap; background: rgba(var(--ink-rgb), .05); border-left: 3px solid var(--card-edge); }

/* le tuteur : sur le tapis, sous la fiche — une conversation en marge du travail, pas une feuille de plus */
.xtutor { margin-top: 26px; max-width: 1100px; border-top: 1px solid var(--baize-line); padding-top: 14px; }
.xtuh { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.xtuh h3 { color: var(--fg); }
.xtuh .sp { flex: 1; }
.xoff { margin-top: 8px; font-size: 14px; color: var(--fg-dim); }
.xoff .btn { margin-left: 8px; }
.xdialog { margin-top: 12px; }
.xdialog .txt p + p { margin-top: 6px; }
.xtuf { margin-top: 10px; border-top: 1px dashed var(--card-edge); padding-top: 10px; }
.xtuf textarea { display: block; width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: var(--card-in); border: 1px solid var(--card-edge); border-radius: 3px; padding: 8px 10px; resize: vertical; }
.xtuf textarea:focus { outline: none; border-color: var(--ink-dim); }
.xtuf .actions { margin-top: 8px; }

/* ---------------------------------------------------------------- mobile */
@media (max-width: 1000px) {
  .xtix { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ticket.xtk:nth-child(n) { transform: none; }
}
@media (max-width: 720px) {
  .xcount { text-align: left; }
  .xcount b { font-size: 26px; }
  .xcount small { margin-left: 0; max-width: none; }
  .xscope { padding: 2px 10px 6px; }
  .xrow { grid-template-columns: 30px minmax(0, 1fr); min-height: 48px; }
  .xrow .xst { grid-column: 2; text-align: left; }
  .xth { padding: 8px 0; }
  .xcrumb .btn { flex: 0 0 auto; }
  .xcrumb > .dim { order: 5; flex-basis: 100%; }
  .xintro { font-size: 15.5px; }
  .edwrap .actions:has(> #run) { background: linear-gradient(to top, var(--card) 70%, transparent); }
  .xed .edbar .btn { flex: 1 1 40%; min-height: 40px; font-size: 12.5px; padding: 8px 8px; }
  .xtrbody { padding: 4px 4px 16px 6px; }
  .xtract .btn { flex: 1 1 auto; }
  .xcmp { grid-template-columns: minmax(0, 1fr); }
  .xtuh .btn { flex: 1 1 100%; }
}
.xface { margin-top: 12px; }
.xface .xpa { font-family: var(--type); background: var(--card-in); border: 1px solid var(--card-edge); border-left: 3px solid var(--ink); border-radius: 3px; padding: 8px 12px; margin-top: 0; }
.xface .term { margin-top: 0; }
/* la réponse du tuteur est une aide d'IA (aiaide.js, matière grise) : ni la machine à écrire ni le pre-wrap du dialogue */
.xdialog .turn.rec .txt { white-space: normal; font-family: var(--sans); }
.xdialog .aiaid { margin-top: 0; }

/* ================================================================ disposition « atelier » (lot 11, 02/10)
   Au choix de l'élève (`setting.layout`), sur les trois fiches de travail : exemple, projet, exercice. Le volet
   gauche (≈ 34 %, collant, défilable) porte l'énoncé — ou la leçon, par l'onglet ; le volet droit l'IDE en haut et la
   CONSOLE dessous, à onglets, de hauteur réglable à la poignée. Aucun matériau neuf : les onglets du volet gauche sont
   ceux de l'en-tête (Oswald souligné d'un filet crème, sur le tapis), ceux de la console sont ceux du volet du projet
   (.pjptabs : sur le papier, filet vermillon), la console est une feuille crème posée sur le tapis comme l'éditeur.
   Les nœuds sont ceux de la disposition classique, déplacés (disposition.js) ; tout est sous `.lay-at`, qui n'est
   posé qu'à 1180 px et plus — sous cette largeur, rien ici ne s'applique et l'empilement d'origine revient. */
.laybtn { display: inline-flex; align-items: center; gap: 7px; }
.laybtn .lay-ic { flex: none; }
.ink .laybtn.on { color: var(--ink); border-color: var(--ink-dim); background: rgba(var(--ink-rgb), .06); }
@media (max-width: 1179.98px) { .laybtn { display: none; } .atl { display: none !important; } }
.atl[hidden], .at-enonce[hidden], .at-lecon[hidden] { display: none; }
/* le canevas s'élargit comme pour l'atelier d'exemple (body.wide), exercice compris */
main:has(.lay-at) { max-width: 1800px; }
body:has(.lay-at) .top { max-width: 1800px; }
.lay-at { max-width: none; }
.lay-at > .atl { display: grid; grid-template-columns: minmax(360px, 34%) minmax(0, 1fr); gap: 18px; align-items: start; }
/* ce qui a été vidé par le déplacement ne laisse pas de trou */
.lay-at .xbench, .lay-at .pjpanel { display: none; }
.lay-at .pjide-grid { grid-template-columns: minmax(0, 1fr); }

/* ---- volet gauche : onglets Énoncé | Leçon, puis le contenu, qui défile en dedans */
.at-left { position: sticky; top: 10px; max-height: calc(100vh - 20px); overflow: auto; min-width: 0; padding: 0 4px 10px 0; scrollbar-color: var(--baize-line) transparent; }
.at-tabs { position: sticky; top: 0; z-index: 3; display: flex; gap: 4px; background: var(--baize); border-bottom: 1px solid var(--baize-line); margin-bottom: 14px; }
.at-tabs button { font-family: var(--disp); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-dim); padding: 8px 12px 7px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.at-tabs button:hover { color: var(--fg); }
.at-tabs button.on { color: var(--fg); border-bottom-color: var(--cream); }
.at-enonce { display: flex; flex-direction: column; gap: 14px; }
.at-enonce > *, .at-enonce .at-fold > :not(summary) { margin-top: 0; max-width: none; }
.at-enonce .sheet { animation: none; }
/* le carton d'énoncé dans une colonne étroite : la fiche signalétique repasse au-dessus du titre, en ligne */
.lay-at .xhead { display: block; }
.lay-at .xhead .thead { flex-direction: row; flex-wrap: wrap; align-items: baseline; text-align: left; gap: 4px 14px; border-left: 0; padding: 0; }
.lay-at .xhead .xtitle { margin-top: 10px; }
.lay-at .at-enonce .ticket { transform: none; }
/* feuille crème autour de ce qui vivait sur le papier de l'IDE (jalons, corrigé, plan de reprise, solution) */
.at-card { color: var(--ink); background: var(--card); border-radius: 4px; box-shadow: var(--shadow-ticket); padding: 12px 14px 14px; }
.at-card:has(> [hidden]:not(.pjpane)), .at-card:has(> :empty) { display: none; }
.at-card > .pjpane { display: block; padding: 0; overflow: visible; }
.at-card > .pjpane[hidden] { display: block; }       /* « Jalons » n'est plus un onglet : toujours visible ici */
.at-card > #solbox > div, .at-card > #pjsolbox > div { margin-top: 0 !important; }
.at-card > .plan { margin-top: 0; }
/* l'accordéon des manipulations et du défi : replié par défaut quand une manipulation est ouverte au-dessus */
.at-fold > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-family: var(--disp); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-dim); padding: 6px 0; border-top: 1px solid var(--baize-line); }
.at-fold > summary::-webkit-details-marker { display: none; }
.at-fold > summary svg { flex: none; transition: transform .15s var(--ease); }
.at-fold[open] > summary svg { transform: rotate(90deg); }
.at-fold > summary:hover { color: var(--fg); }
.at-fold > :not(summary) { margin-top: 8px; }
.at-fold .xtries > .actions h3 { display: none; }      /* le titre « Manipulations » est déjà celui de l'accordéon */
.at-none { font-size: 14px; color: var(--fg-dim); }
.at-con .at-none { color: var(--ink-faint); font-family: var(--type); font-size: 13px; }
/* l'onglet « Leçon » : la leçon rendue comme dans le lecteur, sur la feuille crème */
.at-lecon .lesson { color: var(--ink); background: var(--card); border-radius: 4px; box-shadow: var(--shadow-ticket); padding: 16px 18px 20px; margin-top: 0; font-size: 15.5px; }
.at-lh { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.at-lh .lbl { font-family: var(--disp); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.at-lh .xref { margin-left: auto; font-size: 13.5px; color: var(--ink); }
.at-lt { font-family: var(--disp); font-weight: 500; font-size: 24px; letter-spacing: .02em; color: var(--ink); margin: 4px 0 2px; }
.at-lread { font-size: 13px; color: var(--ink-dim); margin-bottom: 10px; }
.at-les pre { max-width: 100%; overflow-x: auto; }
.at-lsub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 12px; }
.at-lsub .pjlbl { color: var(--fg-dim); width: 100%; }
.at-lchip { font-size: 13.5px; color: var(--fg-dim); border: 1px solid var(--baize-line); border-radius: 3px; padding: 4px 10px; }
.at-lchip:hover { color: var(--fg); border-color: var(--fg-dim); }
.at-lchip.on { color: var(--on-cream); background: var(--cream); border-color: var(--cream); }

/* ---- volet droit : l'IDE (au moins 240 px), la poignée, la console (au moins 240 px) */
.at-right { position: sticky; top: 10px; height: calc(100vh - 20px); min-height: 560px; display: flex; flex-direction: column; min-width: 0; }
/* le code garde 240 px au moins : quand la place manque, c'est la console qui cède, jusqu'à ses 240 px (fit() dans
   disposition.js, qui mesure ce que l'IDE consomme en barres et en onglets) */
.at-ide { flex: 1 1 0; min-height: 240px; display: flex; flex-direction: column; }
.at-ide > * { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; margin: 0; }
/* exemple : barre, espace de travail (il prend la hauteur), bouton Lancer */
.at-ide > .xed > .xws { flex: 1 1 0; min-height: 0; display: flex; }
.at-ide .ws { flex: 1 1 0; height: auto; min-height: 0; width: 100%; }
.at-ide > .xed > .actions, .at-ide > .edwrap:not(.xed) > .actions { margin-top: 8px !important; }
.at-ide .actions > .stamp-btn { font-size: 18px; padding: 9px 20px; }
.at-ide .ws-notes { max-height: 24%; }
/* projet : barre, grille d'une colonne (l'espace de travail), pied */
.at-ide > .pjide > .pjide-grid { flex: 1 1 0; min-height: 0; }
.at-ide #pjws { display: flex; min-height: 0; }
/* exercice : l'éditeur unique prend la hauteur et défile en dedans */
.at-ide > .edwrap:not(.xed) > .CodeMirror, .at-ide > .edwrap:not(.xed) > .editor { flex: 1 1 0; height: auto; min-height: 0; resize: none; }
.at-grip { flex: none; height: 14px; cursor: row-resize; position: relative; touch-action: none; }
.at-grip::after { content: ""; position: absolute; left: 50%; top: 5px; width: 54px; height: 4px; margin-left: -27px; border-radius: 2px; background: var(--baize-line); transition: background .15s; }
.at-grip:hover::after, .atl.drag .at-grip::after { background: var(--fg-dim); }
.atl.drag { user-select: none; }
.atl.drag iframe { pointer-events: none; }
.at-con { flex: none; height: var(--at-fit-h, var(--at-con-h, 36%)); min-height: 240px; max-height: calc(100% - 254px); display: flex; flex-direction: column; color: var(--ink); background: var(--card); border-radius: 4px; box-shadow: var(--shadow-ticket); overflow: hidden; }
.at-ctabs { flex: none; display: flex; overflow-x: auto; border-bottom: 1px solid var(--card-edge); background: var(--card-2); scrollbar-width: none; }
.at-ctabs::-webkit-scrollbar { display: none; }
.at-ctabs button { flex: none; font-family: var(--disp); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); padding: 9px 14px 8px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.at-ctabs button:hover { color: var(--ink); }
.at-ctabs button.on { color: var(--ink); border-bottom-color: var(--stamp); background: var(--card); }
.at-ctabs button i { font-style: normal; font-family: var(--type); font-size: 11.5px; letter-spacing: 0; text-transform: none; margin-left: 6px; }
.at-ctabs button i.ok { color: var(--ok); } .at-ctabs button i.ko { color: var(--stamp); }
.at-panes { flex: 1; min-height: 0; overflow: auto; padding: 12px 16px 16px; scrollbar-color: var(--card-edge) transparent; }
.at-pane[hidden] { display: none; }
/* dans la console, les feuilles d'origine perdent leur carton (elles sont déjà sur le papier) */
.at-pane .sheet, .at-pane .edwrap { background: none; box-shadow: none; padding: 0; border-radius: 0; animation: none; max-width: none; margin: 0; }
.at-pane > .pjpane, .at-pane > .pjpane[hidden] { display: block; padding: 0; overflow: visible; }
.at-pane .xrun > h3, .at-pane .xpv > .edbar { display: none; }
.at-pane > details.outbox:first-of-type, .at-pane > .term:first-child, .at-pane > .xh4:first-child { margin-top: 0; }
/* l'aperçu remplit la console : sa hauteur suit la poignée de la console, la sienne s'efface */
.at-panes:has(> .at-pane:not([hidden]) .pv) { display: flex; flex-direction: column; }
.at-pane:has(.pv):not([hidden]), .at-pane .pv, .at-pane :is(.xout, .xpv, #xpv, .pjpane):has(.pv) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.at-con .pv-frame { flex: 1 1 0; height: auto !important; min-height: 140px; }
.at-con .pv-grip { display: none; }
.at-con .pv.pv-big .pv-frame { height: auto !important; }
/* Réglages › Espace de travail : le choix de disposition (deux boutons, le choix courant en plein) */
.laychoice { display: inline-flex; gap: 6px; }
small .lay-ic { display: inline-block; vertical-align: -3px; }