/* ============================================================ ESPACE DE TRAVAIL (lot 1, 30/09)
   Le dépôt dans le navigateur : arborescence, onglets, éditeur, aperçu en direct, console HTTP, et l'atelier de projet
   qui les assemble. Même monde que le reste : la feuille crème posée sur le tapis, l'encre pour le texte, Courier
   Prime pour ce qui est code ou statut, Oswald pour les libellés, le vermillon pour ce qui est modifié, faux ou à
   tamponner. La marge de l'éditeur porte les annotations comme la marge d'une copie corrigée : un chiffre au stylo
   rouge, la bulle du glossaire pour le commentaire. Aucune icône autre que des SVG tracés. */

/* ---- l'espace (grille : arborescence | éditeur) */
.ws { --ws-h: clamp(380px, 64vh, 780px); --ws-tree-w: 224px; position: relative; display: grid; grid-template-columns: var(--ws-tree-w) minmax(0, 1fr);
  height: var(--ws-h); color: var(--ink); background: var(--card-in); border: 1px solid var(--card-edge); border-radius: 3px; overflow: hidden; }
.ws .sp { flex: 1; }
.ws-side { display: flex; flex-direction: column; min-height: 0; background: var(--card-2); border-right: 1px solid var(--card-edge); }
.ws-sh { display: flex; align-items: center; gap: 2px; padding: 6px 6px 0 8px; border-bottom: 1px solid var(--card-edge); }
.ws-st { font-family: var(--disp); font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); padding: 6px 6px 7px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ws-st:hover { color: var(--ink-dim); }
.ws-st.on { color: var(--ink); border-bottom-color: var(--ink); }
.ws-ib { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--ink-dim); border-radius: 3px; }
.ws-ib:hover { color: var(--ink); background: rgba(var(--ink-rgb), .07); }
.ws-tree, .ws-find { flex: 1; min-height: 0; overflow: auto; padding: 6px 0 10px; }
.ws-count { font-family: var(--type); font-size: 11px; color: var(--ink-faint); padding: 5px 10px; border-top: 1px solid var(--card-edge); }
.ws-row { display: flex; align-items: center; width: 100%; min-height: 26px; padding: 0 6px 0 calc(8px + var(--d, 0) * 13px); text-align: left;
  font-family: var(--type); font-size: 13px; line-height: 1.3; color: var(--ink); position: relative; }
/* le thème d'icônes (lot 9) : une couleur par TYPE de fichier, franche mais posée sur le crème — les seules couleurs
   vives de la feuille, parce qu'elles disent quelque chose (le langage du fichier). La pastille = le contour au
   trait + un fond de la même teinte à 14 %. Valeurs du thème sombre plus bas (data-theme="dark"). */
:root { --ic-ts: #2f5f9e; --ic-tsx: #1f7596; --ic-js: #a77a0c; --ic-vue: #2e8656; --ic-css: #7a4bb0; --ic-html: #c4581f;
  --ic-java: #a3402a; --ic-sql: #17807b; --ic-conf: #66806a; --ic-json: #b7791f; --ic-md: #5a554a; --ic-file: #8a8273; --ic-dir: #c08a2a; }
:root[data-theme="dark"] { --ic-ts: #7fb0ec; --ic-tsx: #6cc7e6; --ic-js: #e8c25a; --ic-vue: #6fd39b; --ic-css: #c09ae8; --ic-html: #f09a62;
  --ic-java: #ec8b72; --ic-sql: #5fcfc6; --ic-conf: #a9c2aa; --ic-json: #f0b860; --ic-md: #c9c2b2; --ic-file: #a8a090; --ic-dir: #e8b65a; }
.ws-ic { flex: none; display: block; }
.ws-ic .pg { fill: currentColor; fill-opacity: .14; }
.ic-ts { color: var(--ic-ts); } .ic-tsx { color: var(--ic-tsx); } .ic-js { color: var(--ic-js); } .ic-vue { color: var(--ic-vue); }
.ic-css { color: var(--ic-css); } .ic-html { color: var(--ic-html); } .ic-java { color: var(--ic-java); } .ic-sql { color: var(--ic-sql); }
.ic-conf { color: var(--ic-conf); } .ic-json { color: var(--ic-json); } .ic-md { color: var(--ic-md); } .ic-file { color: var(--ic-file); }
.ic-dir, .ic-diro { color: var(--ic-dir); }
.ic-dir .pg, .ic-diro .pg { fill-opacity: .22; }
.ws-dir { padding-right: 2px; color: var(--ink-dim); }
.ws-dn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; min-height: 26px; text-align: left; font: inherit; color: inherit; }
.ws-dn > svg:first-child { flex: none; transition: transform .15s var(--ease); color: var(--ink-faint); }
.ws-dir.open .ws-dn > svg:first-child { transform: rotate(90deg); }
.ws-dir:hover, .ws-file:hover { background: rgba(var(--ink-rgb), .05); }
.ws-dir .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-dir.empty .nm { font-style: italic; }
.ws-vide { flex: none; font-family: var(--disp); font-style: normal; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); border: 1px dashed var(--ink-faint); border-radius: 2px; padding: 0 4px; }
/* les fichiers fournis (02/10, retour Fabio) : à leur VRAIE place dans l'arbre, atténués, cadenas ; un seul
   interrupteur en bas de l'arbre les masque ou les montre (un dossier qui n'a que des fournis part avec eux) */
.ws-file.ro .ws-fn, .ws-dir.ro .ws-dn { color: var(--ink-faint); }
.ws-file.ro .ws-ic, .ws-dir.ro .ws-ic { opacity: .5; }
.ws-provt { display: flex; align-items: center; gap: 6px; width: calc(100% - 16px); margin: 8px 8px 2px; padding: 5px 6px; border-top: 1px dashed var(--card-edge);
  font-family: var(--disp); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); text-align: left; }
.ws-provt:hover { color: var(--ink); }
.ws-provt svg { flex: none; }
/* créer : deux boutons-texte en tête de l'arbre, visibles d'emblée (pas cachés derrière un « + » de 28 px) */
.ws-mk { display: flex; gap: 4px; padding: 0 8px 6px; margin-bottom: 4px; border-bottom: 1px dashed var(--card-edge); }
.ws-mk button { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 6px; font-family: var(--disp); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); border: 1px solid var(--card-edge); border-radius: 3px; }
.ws-mk button:hover { color: var(--ink); border-color: var(--ink-dim); background: var(--card-hi); }
.ws-file { padding-left: calc(24px + var(--d, 0) * 13px); padding-right: 2px; }
/* le fichier ouvert : crème plus soutenu, filet vermillon (celui des onglets) */
.ws-file.on { background: var(--card-sel); box-shadow: inset 2px 0 0 var(--stamp); }
.ws-fn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; min-height: 26px; text-align: left; font: inherit; color: inherit; }
.ws-fn .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-fn .nm i, .ws-tab .nm i, .ws-hf i { font-style: normal; color: var(--ink-faint); }
.ws-file.cite .nm { font-weight: 700; }
.ws-file.ro .ws-fn { color: var(--ink-dim); }
.ws-lock { display: inline-flex; color: var(--ink-faint); }
.ws-dot { display: none; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--stamp); }
/* « modifié » : le point vermillon DEVANT le fichier, dans la marge de l'indentation (l'alignement ne bouge pas) */
.ws-file .ws-dot { position: absolute; left: calc(13px + var(--d, 0) * 13px); top: 50%; margin-top: -3px; }
.ws-file.mod .ws-dot, .ws-tab.mod .ws-dot { display: inline-block; }
.ws-file.err .nm, .ws-dir.err .nm { color: var(--stamp); text-decoration: underline wavy rgba(200, 50, 30, .55); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ws-ia { display: none; flex: none; align-items: center; justify-content: center; min-width: 24px; height: 24px; color: var(--ink-faint); border-radius: 3px; }
.ws-file:hover .ws-ia, .ws-file:focus-within .ws-ia, .ws-dir:hover .ws-ia, .ws-dir:focus-within .ws-ia, .ws-ia.arm { display: inline-flex; }
.ws-ia:hover { color: var(--ink); background: rgba(var(--ink-rgb), .08); }
.ws-ia.arm { padding: 0 7px; font-family: var(--disp); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--cream); background: var(--stamp); }
.ws-new { margin: 2px 8px 8px; padding: 8px; background: var(--card-in); border: 1px solid var(--ink-dim); border-radius: 3px; }
.ws-new label { display: block; font-family: var(--disp); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 5px; }
.ws-new label b { font-family: var(--type); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink); }
.ws-new input, .ws-q, .ws-gq { width: 100%; font-family: var(--type); font-size: 13px; color: var(--ink); background: var(--field); border: 1px solid var(--card-edge); border-radius: 3px; padding: 6px 8px; caret-color: var(--stamp); }
.ws-new input:focus, .ws-q:focus, .ws-gq:focus { outline: none; border-color: var(--ink-dim); }
.ws-new small { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.35; color: var(--ink-faint); }
.ws-nerr { font-size: 12px; color: var(--stamp); margin-top: 4px; }
.ws-nerr:empty { display: none; }
/* recherche */
.ws-find { padding: 8px 8px 12px; }
.ws-help { font-size: 12.5px; line-height: 1.4; color: var(--ink-faint); margin: 8px 2px; }
.ws-hg { margin-top: 8px; }
.ws-hf { display: flex; gap: 6px; align-items: baseline; font-family: var(--type); font-size: 12.5px; color: var(--ink); padding: 2px 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ws-hf i { font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.ws-hf b { margin-left: auto; font-family: var(--disp); font-weight: 400; font-size: 11px; color: var(--ink-dim); }
.ws-hit { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px; width: 100%; padding: 3px 2px; text-align: left; font-family: var(--type); font-size: 12px; line-height: 1.35; color: var(--ink-dim); border-radius: 2px; }
.ws-hit:hover, .ws-hit.on { background: rgba(var(--ink-rgb), .07); color: var(--ink); }
.ws-hit .ln { text-align: right; color: var(--ink-faint); }
.ws-hit .tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-hit mark { background: rgba(208, 138, 30, .35); color: var(--ink); border-radius: 2px; }

/* ---- colonne de l'éditeur */
.ws-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ws-tabs { display: flex; align-items: stretch; background: var(--card-2); border-bottom: 1px solid var(--card-edge); min-height: 34px; }
.ws.tree-off { grid-template-columns: minmax(0, 1fr); }
.ws.tree-off .ws-side { display: none; }
.ws-drawer[aria-pressed="false"] { color: var(--ink); }
.ws-drawer:hover { color: var(--ink); background: var(--card-hi); }
.ws-drawer { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 0 12px; font-family: var(--disp); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); border-right: 1px solid var(--card-edge); }
.ws-tl { display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ws-tl::-webkit-scrollbar { display: none; }
.ws-tab { position: relative; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 8px 0 13px; max-width: 220px; cursor: pointer;
  font-family: var(--type); font-size: 13px; color: var(--ink-dim); border-right: 1px solid var(--card-edge); }
.ws-tab .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-tab .ws-ic { width: 14px; height: 14px; margin-left: -3px; }
.ws-tab:hover { color: var(--ink); background: var(--card-hi); }
.ws-tab.on { color: var(--ink); background: var(--card-in); box-shadow: inset 0 2px 0 var(--stamp); margin-bottom: -1px; }
.ws-tab.ro .nm { font-style: italic; }
.ws-tab.err .nm { color: var(--stamp); }
.ws-x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 3px; color: var(--ink-faint); visibility: hidden; }
.ws-tab:hover .ws-x, .ws-tab.on .ws-x { visibility: visible; }
.ws-x:hover { color: var(--ink); background: rgba(var(--ink-rgb), .08); }
.ws-tab.mod .ws-x { display: none; }
.ws-tab.mod:hover .ws-x { display: inline-flex; }
.ws-tab.mod:hover .ws-dot { display: none; }
.ws-tab .ws-dot { margin-right: 7px; }
.ws-tab.mod:not(:hover) .ws-dot { display: inline-block; }
.ws-crumb { display: flex; align-items: center; gap: 12px; padding: 3px 12px; font-family: var(--type); font-size: 11.5px; color: var(--ink-faint); border-bottom: 1px dashed var(--card-edge); white-space: nowrap; overflow: hidden; }
.ws-crumb[hidden] { display: none; }
.ws-cp { overflow: hidden; text-overflow: ellipsis; }
.ws-cp i { font-style: normal; margin: 0 4px; color: var(--card-edge); }
.ws-cp b { font-weight: 400; color: var(--ink-dim); }
.ws-ro { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-family: var(--disp); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
/* remettre au départ (lot 9) : dans la barre du fichier ouvert, à droite, dès qu'il diffère du départ */
.ws-rst { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; flex: none; padding: 1px 7px; font-family: var(--disp); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); border: 1px solid var(--card-edge); border-radius: 3px; background: var(--card-in); }
.ws-rst:hover { color: var(--stamp-deep); border-color: var(--stamp); }
.ws-rst.arm { color: var(--cream); background: var(--stamp); border-color: var(--stamp); }
.ws-ro + .ws-rst { margin-left: 10px; }
/* le menu d'un fichier (clic droit) : une fiche de carton, pas un menu système */
.ws-ctx { position: absolute; z-index: 40; min-width: 190px; padding: 4px; background: var(--card); border: 1px solid var(--card-edge); border-radius: 3px; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); }
.ws-ctxh { padding: 4px 8px 5px; font-family: var(--type); font-size: 11.5px; color: var(--ink-faint); border-bottom: 1px dashed var(--card-edge); margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }
.ws-ctx button { display: block; width: 100%; text-align: left; padding: 6px 10px; font-family: var(--sans); font-size: 13.5px; color: var(--ink); border-radius: 2px; }
.ws-ctx button:hover { background: rgba(var(--ink-rgb), .07); }
.ws-ctx button.arm { color: var(--cream); background: var(--stamp); }
.ws-ed { flex: 1; min-height: 0; position: relative; }
.ws-ed .CodeMirror, .ws .ws-ed .editor { height: 100%; min-height: 0; border: 0; border-radius: 0; resize: none; }
/* fichier fourni (lecture seule) : des hachures d'encre translucides, posées PAR-DESSUS le fond du thème d'éditeur,
   quel qu'il soit (un fond crème en dur masquait un Dracula) */
.ws.ro .ws-ed .CodeMirror, .ws.ro .ws-ed .editor { background-image: repeating-linear-gradient(135deg, rgba(var(--ink-rgb), .045) 0 10px, transparent 10px 20px); }
.ws-foot { display: flex; align-items: center; gap: 14px; padding: 3px 12px; font-family: var(--type); font-size: 11.5px; color: var(--ink-faint); border-top: 1px solid var(--card-edge); background: var(--card-2); white-space: nowrap; overflow: hidden; }
.ws-foot kbd { font-family: var(--type); font-size: 10.5px; color: var(--ink-dim); border: 1px solid var(--card-edge); border-radius: 2px; padding: 0 3px; background: var(--card-in); }
.ws-keys { overflow: hidden; text-overflow: ellipsis; }
/* CodeMirror dans l'espace : les barres de défilement parlent encre, pas tapis */
.ws .CodeMirror-vscrollbar, .ws .CodeMirror-hscrollbar { scrollbar-color: var(--card-edge) transparent; }
.ws .CodeMirror ::-webkit-scrollbar-thumb { background: var(--card-edge); border-color: transparent; }
.ws .CodeMirror ::-webkit-scrollbar-corner, .ws .CodeMirror-scrollbar-filler, .ws .CodeMirror-gutter-filler { background: transparent; }
.ws-gut { width: 22px; }
.ws-gm { display: flex; gap: 2px; align-items: center; justify-content: center; height: 100%; padding-top: 2px; cursor: pointer; }
.ws-gm b, .ws-tn { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 50%;
  font-family: var(--disp); font-size: 10.5px; font-weight: 500; color: var(--stamp); border: 1.3px solid var(--stamp); background: var(--card-in); line-height: 1; }
.ws-gm b { background: transparent; }     /* dans la gouttière, le fond est celui du thème d'éditeur */
.ws-gm i { font-family: var(--disp); font-style: normal; font-weight: 600; font-size: 13px; color: var(--cream); background: var(--stamp); border-radius: 2px; padding: 0 4px; line-height: 15px; }
.ws-anchor { background: rgba(200, 50, 30, .07); border-bottom: 1.5px solid rgba(200, 50, 30, .55); cursor: help; }
.ws-errline { background: rgba(200, 50, 30, .06); }
.ws-errline .CodeMirror-line { text-decoration: underline wavy rgba(200, 50, 30, .7); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ws-errw { margin: 1px 0 4px 6px; padding: 3px 9px; font-family: var(--type); font-size: 12px; line-height: 1.4; color: var(--stamp-deep); border-left: 2px solid var(--stamp); background: rgba(200, 50, 30, .06); white-space: pre-wrap; }
.ws-errw b { font-family: var(--disp); font-weight: 500; font-size: 11px; letter-spacing: .06em; margin-right: 8px; color: var(--stamp); }
.ws-flash { background: rgba(208, 138, 30, .22); transition: background .6s; }
.ws-errs { max-height: 120px; overflow: auto; border-top: 1px solid var(--card-edge); }
.ws-errs button { display: block; width: 100%; text-align: left; padding: 4px 12px; font-family: var(--type); font-size: 12px; color: var(--stamp-deep); }
.ws-errs button:hover { background: rgba(200, 50, 30, .06); }
/* annotations : la marge de la copie */
.ws-notes { max-height: 32%; overflow: auto; border-top: 1px solid var(--card-edge); background: var(--card); padding: 6px 12px 8px; font-size: 13.5px; }
.ws-nh { font-family: var(--disp); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 2px; }
.ws-notes ol { list-style: none; }
.ws-notes li > button { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; align-items: baseline; width: 100%; text-align: left; padding: 3px 0; color: var(--ink); }
.ws-notes li > button:hover:not(:disabled) { color: var(--stamp-deep); }
.ws-notes li > button:disabled { cursor: default; opacity: 1; }
.ws-notes .tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.45; }
.ws-notes li.lost .ws-tn { color: var(--ink-faint); border-color: var(--ink-faint); border-style: dashed; }
.ws-notes li.lost .tx { white-space: normal; color: var(--ink-dim); }
.ws-notes li small { display: block; margin: 0 0 4px 28px; font-size: 12px; color: var(--ink-faint); }
.ws-nother { margin-top: 4px; font-size: 12.5px; color: var(--ink-dim); }
.ws-nother .xref { font-family: var(--type); font-size: 12px; }
.ws-tip { max-width: calc(100vw - 24px); }
.ws-tip .glt { display: flex; align-items: center; gap: 8px; }
.ws-tip .glt code { font-family: var(--type); font-size: 12.5px; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-tip .gls p { margin: 0 0 6px; } .ws-tip .gls p:last-child { margin-bottom: 0; }
/* aller à un fichier */
.ws-goto { position: absolute; z-index: 30; top: 38px; left: 50%; transform: translateX(-50%); width: min(520px, calc(100% - 24px)); background: var(--card); border: 1px solid var(--card-edge); border-radius: 4px; box-shadow: 0 16px 40px rgba(0, 0, 0, .3); padding: 8px; }
.ws-gl { max-height: 300px; overflow: auto; margin-top: 6px; }
.ws-gi { display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left; padding: 5px 8px; border-radius: 3px; font-family: var(--type); font-size: 13px; color: var(--ink); }
.ws-gi .d { font-size: 11.5px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-gi b { font-weight: 700; color: var(--stamp-deep); }
.ws-gi.on, .ws-gi:hover { background: rgba(var(--ink-rgb), .07); }
.ws-scrim { display: none; position: absolute; inset: 0; z-index: 20; background: rgba(10, 42, 31, .18); }
.ws.goto-open .ws-scrim { display: block; }
.ws.nocm .ws-foot .ws-keys { display: none; }

/* ---- aperçu en direct */
.pv { display: flex; flex-direction: column; gap: 8px; color: var(--ink); }
.pv-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pv-bar .sp { flex: 1; }
.pv-st { order: 3; flex: 1 1 100%; font-family: var(--type); font-size: 12px; color: var(--ink-faint); }
.pv-frame { position: relative; min-height: 180px; background: #fff; border: 1px solid var(--card-edge); border-radius: 3px; overflow: hidden; }
.pv-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.pv-veil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; background: rgba(var(--card-rgb), .82); }
.pv-veil[hidden] { display: none; }
.pv-ko { font-family: var(--type); font-size: 13px; color: var(--ink-dim); max-width: 36ch; }
.pv-grip { height: 12px; margin-top: -6px; cursor: ns-resize; touch-action: none; position: relative; }
.pv-grip::after { content: ""; position: absolute; left: 50%; top: 4px; width: 44px; height: 4px; margin-left: -22px; border-top: 1px solid var(--ink-faint); border-bottom: 1px solid var(--ink-faint); }
.pv-errs { border: 2px solid var(--stamp); border-radius: 3px; padding: 8px 12px; box-shadow: inset 0 0 0 2px var(--card), inset 0 0 0 3px var(--stamp); }
.pv-eh { font-family: var(--disp); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--stamp); margin-bottom: 4px; }
.pv-e { display: block; font-family: var(--type); font-size: 12.5px; padding: 2px 0; }
.pv-e b { display: block; font-weight: 400; color: var(--stamp-deep); word-break: break-all; }
.pv-con > summary { cursor: pointer; list-style: none; font-family: var(--disp); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); padding: 3px 0; }
.pv-con > summary::-webkit-details-marker { display: none; }
.pv-con > summary::before { content: '▸ '; display: inline-block; transition: transform .2s var(--ease); }
.pv-con[open] > summary::before { transform: rotate(90deg); }
.pv-n { font-family: var(--type); font-weight: 400; margin-left: 4px; color: var(--ink-faint); }
.pv-n.w { color: var(--amber); } .pv-n.e { color: var(--stamp); }
.pv-log { margin-top: 4px; max-height: 200px; overflow: auto; padding: 6px 0; border-radius: 3px; background: var(--term); color: #d8d2c4; font-family: var(--type); font-size: 12.5px; line-height: 1.5; }
.pv-l { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; padding: 1px 10px; white-space: pre-wrap; word-break: break-word; }
.pv-l i { font-style: normal; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #7e7566; padding-top: 2px; }
.pv-l.warn { color: #ffd479; } .pv-l.warn i { color: #b99a4e; }
.pv-l.error { color: #ffb3a6; background: rgba(200, 50, 30, .12); } .pv-l.error i { color: #ff8d78; }
.pv-empty { padding: 4px 10px; color: #7e7566; font-size: 12px; }
.pv-empty code { color: #d8d2c4; }
.pv-clear { margin-top: 4px; font-family: var(--disp); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.pv-clear:hover { color: var(--ink); }
/* « ouvrir en grand » : la feuille couvre la page, l'aperçu prend toute la hauteur */
.pv.pv-big { position: fixed; z-index: 70; inset: 0; padding: calc(14px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); background: var(--card); }
.pv.pv-big .pv-frame { flex: 1; height: auto !important; }
.pv.pv-big .pv-grip { display: none; }
.pv.pv-big .pv-log { max-height: 22vh; }
body.pv-lock { overflow: hidden; }

/* ---- console HTTP */
.hc { color: var(--ink); }
.hc-help { font-size: 13.5px; line-height: 1.45; color: var(--ink-dim); margin-bottom: 10px; }
.hc-req { padding: 6px 0; border-top: 1px dashed var(--card-edge); }
.hc-req:first-child { border-top: 0; }
.hc-line { display: flex; gap: 6px; align-items: center; }
.hc-m { font-family: var(--type); font-size: 13px; font-weight: 700; color: var(--ink); background: var(--card-in); border: 1px solid var(--card-edge); border-radius: 3px; padding: 5px 4px; }
.hc-p { flex: 1; min-width: 0; font-family: var(--type); font-size: 13.5px; color: var(--ink); background: var(--card-in); border: 1px solid var(--card-edge); border-radius: 3px; padding: 5px 8px; caret-color: var(--stamp); }
.hc-p:focus, .hc-m:focus, .hc-more textarea:focus { outline: none; border-color: var(--ink-dim); }
.hc-tg { font-family: var(--disp); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); padding: 5px 7px; border-radius: 3px; }
.hc-tg:hover, .hc-tg.on { color: var(--ink); background: rgba(var(--ink-rgb), .06); }
.hc-rm { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; color: var(--ink-faint); border-radius: 3px; }
.hc-rm:hover { color: var(--stamp); background: rgba(200, 50, 30, .07); }
.hc-more { display: grid; gap: 6px; margin: 6px 0 2px; }
.hc-more label { font-family: var(--disp); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.hc-more label small { font-family: var(--sans); font-size: 11.5px; text-transform: none; letter-spacing: 0; color: var(--ink-faint); margin-left: 6px; }
.hc-more textarea { display: block; width: 100%; margin-top: 3px; font-family: var(--type); font-size: 12.5px; line-height: 1.45; color: var(--ink); background: var(--card-in); border: 1px solid var(--card-edge); border-radius: 3px; padding: 6px 8px; resize: vertical; }
.hc-warn { font-size: 12.5px; color: var(--amber); }
.hc-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.hc-bar .sp { flex: 1; }
.hc-out { margin-top: 12px; }
.hc-head { font-family: var(--disp); font-size: 24px; letter-spacing: .05em; text-transform: uppercase; color: var(--ok); }
.hc-head.ko { color: var(--stamp); }
.hc-sub { font-size: 13.5px; color: var(--ink-dim); margin: 4px 0 6px; }
.hc-ce { display: block; font-family: var(--type); font-size: 12.5px; padding: 3px 0; border-top: 1px dashed var(--card-edge); }
.hc-ce b { display: block; font-weight: 400; color: var(--stamp-deep); word-break: break-all; }
.hc-why { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--stamp); background: rgba(200, 50, 30, .05); font-size: 14px; line-height: 1.45; }
.hc-why .lbl { display: block; font-family: var(--disp); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); margin-top: 4px; }
.hc-why p { white-space: pre-wrap; }
.hc-meta { font-family: var(--type); font-size: 12px; color: var(--ink-faint); margin-bottom: 6px; }
.hc-res { padding: 9px 0; border-top: 1px solid var(--card-edge); }
.hc-rl { display: flex; align-items: center; gap: 10px; }
.hc-rl .sp { flex: 1; }
.hc-st { display: inline-block; min-width: 50px; text-align: center; font-family: var(--disp); font-size: 15px; font-weight: 500; letter-spacing: .06em; padding: 1px 7px; border: 1.5px solid currentColor; border-radius: 2px; transform: rotate(-2deg); box-shadow: inset 0 0 0 2px var(--card), inset 0 0 0 3px currentColor; }
.hc-st.s2 { color: var(--ok); } .hc-st.s3 { color: var(--ink-dim); } .hc-st.s4 { color: var(--amber); } .hc-st.s5, .hc-st.e { color: var(--stamp); }
.hc-st.e { font-size: 11px; text-transform: uppercase; }
.hc-rq { font-family: var(--type); font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-ms { font-family: var(--type); font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
.hc-hs { font-family: var(--type); font-size: 12px; line-height: 1.5; padding: 4px 0 2px 12px; color: var(--ink-dim); word-break: break-all; }
.hc-hs b { font-weight: 400; color: var(--ink); }
.hc-body { margin-top: 6px; padding: 8px 10px; max-height: 320px; overflow: auto; font-family: var(--type); font-size: 12.5px; line-height: 1.5; background: var(--card-in); border: 1px solid var(--card-edge); border-radius: 3px; white-space: pre-wrap; word-break: break-word; }
.hc-body .jk { color: var(--ink); font-weight: 700; } .hc-body .js { color: var(--code-s); } .hc-body .jn { color: var(--code-n); } .hc-body .jb { color: var(--code-k); font-weight: 700; }
.hc-empty { margin-top: 4px; font-family: var(--type); font-size: 12px; color: var(--ink-faint); }
.hc-ko { font-size: 13.5px; color: var(--stamp-deep); margin-top: 6px; }
.hc-log .term { max-height: 360px; }
.hc-fail { display: block; margin: 4px -6px; padding: 4px 6px; color: #ffd479; background: rgba(200, 50, 30, .22); border-left: 3px solid var(--stamp); }

/* ---- l'atelier de projet : barre, espace, volet à onglets */
.pjwrap.ide { max-width: none; }
.pjide { color: var(--ink); background: var(--card); border-radius: 4px; box-shadow: var(--shadow-ticket); padding: 12px 14px 14px; }
.pjide-bar { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 2px 2px 12px; }
.pjide-bar .sp { flex: 1; }
.pjcur { min-width: 0; }
.pjcur small { display: block; font-family: var(--disp); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-dim); }
.pjcur b { font-size: 17px; font-weight: 600; }
.pjide-bar .stamp-btn { font-size: 18px; padding: 10px 20px; }
.pjide-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 24%); gap: 14px; }
.pjpanel { display: flex; flex-direction: column; min-width: 0; height: var(--ws-h, clamp(380px, 64vh, 780px)); border: 1px solid var(--card-edge); border-radius: 3px; background: var(--card); }
.pjptabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--card-edge); background: var(--card-2); scrollbar-width: none; }
.pjptabs::-webkit-scrollbar { display: none; }
.pjptabs button { flex: none; font-family: var(--disp); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); padding: 9px 12px 8px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.pjptabs button:hover { color: var(--ink); }
.pjptabs button.on { color: var(--ink); border-bottom-color: var(--stamp); background: var(--card); }
.pjptabs button i { font-style: normal; font-family: var(--type); font-size: 11.5px; letter-spacing: 0; text-transform: none; margin-left: 5px; }
.pjptabs button i.ok { color: var(--ok); } .pjptabs button i.ko { color: var(--stamp); }
.pjpane { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px 16px; }
.pjpane .big { font-size: 34px; } .pjpane .big.ko { font-size: 22px; }
.pjpane .tl { grid-template-columns: 58px minmax(0, 1fr); font-size: 14px; }
.pjpane .jal { padding: 9px 6px; }
.pjpane .jalb { font-size: 14px; }
.pjguide { margin: 8px 0 10px; padding: 10px 12px; background: var(--card-in); border: 1px solid var(--card-edge); border-left: 3px solid var(--ink); border-radius: 2px; font-size: 14px; }
.pjguide .answer { font-size: 14px; }
.pjlbl { display: block; font-family: var(--disp); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-dim); margin: 8px 0 3px; }
.pjide-foot { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-top: 10px; }
.pjide-foot .sp { flex: 1; }
.pjide-foot .btn.arm { color: var(--cream); background: var(--stamp); border-color: var(--stamp); }
.pjmeta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-family: var(--type); font-size: 12.5px; color: var(--ink-dim); }
.pjmeta b { font-family: var(--disp); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; color: var(--ink); }
.pjxpl { margin-top: 10px; }

@media (max-width: 1000px) {
  .pjide-grid { grid-template-columns: minmax(0, 1fr); }
  .pjpanel { height: auto; max-height: none; }
  .pjpane { overflow: visible; }
  .ws { --ws-tree-w: 180px; }
}
/* mobile : l'arborescence devient un tiroir, l'éditeur prend la largeur, le volet se range dessous */
@media (max-width: 720px) {
  .ws { --ws-h: 58vh; grid-template-columns: minmax(0, 1fr); }
  .ws-side { position: absolute; z-index: 25; top: 0; bottom: 0; left: 0; width: min(84%, 320px); transform: translateX(-102%); transition: transform .25s var(--ease), visibility .25s; visibility: hidden; }
  .ws.side-open .ws-side { transform: none; visibility: visible; box-shadow: 8px 0 24px rgba(0, 0, 0, .25); }
  .ws.side-open .ws-scrim { display: block; }
  .ws-drawer { min-height: 40px; }
  .ws.tree-off { grid-template-columns: minmax(0, 1fr); }
  .ws.tree-off .ws-side { display: flex; }
  .ws-tab { min-height: 40px; }
  .ws-row, .ws-fn, .ws-dn, .ws-provt { min-height: 38px; }
  .ws-mk button { min-height: 36px; padding: 0 12px 0 10px; }
  .ws-ia { display: inline-flex; min-width: 36px; height: 36px; }
  .ws-hit { padding: 7px 2px; }
  .ws-keys { display: none; }
  .ws-new input, .ws-q, .ws-gq, .hc-p, .hc-m, .hc-more textarea { font-size: 16px; }
  .ws-ed .CodeMirror { font-size: 13px; min-height: 0; }
  .ws-notes { max-height: 38%; }
  .pjide { padding: 10px 10px 12px; margin: 0 -6px; }
  .pjide-bar { position: sticky; bottom: calc(60px + env(safe-area-inset-bottom)); z-index: 5; order: 2; padding: 10px 0 4px; background: linear-gradient(to top, var(--card) 72%, transparent); }
  .pjide { display: flex; flex-direction: column; }
  .pjide-bar .stamp-btn { width: 100%; }
  .pjcur { display: none; }          /* le tampon dit déjà « Lancer le jalon 2 » : le bandeau collé reste mince */
  .pjpane { padding: 10px 10px 14px; }
  .pjptabs button { padding: 11px 11px 10px; }
  .pv-frame { max-height: 70vh; }
  .hc-rl { flex-wrap: wrap; }
}
/* sur le papier, les barres de défilement sont d'encre pâle, pas de tapis */
.pjpanel, .pjpane, .ws-tree, .ws-find, .ws-notes, .ws-gl, .hc-body, .pv-log { scrollbar-color: var(--card-edge) transparent; }
.pjpane::-webkit-scrollbar-thumb, .ws-tree::-webkit-scrollbar-thumb, .ws-find::-webkit-scrollbar-thumb, .ws-notes::-webkit-scrollbar-thumb, .ws-gl::-webkit-scrollbar-thumb, .hc-body::-webkit-scrollbar-thumb { background: var(--card-edge); border-color: var(--card); }
.hc-res summary .hv { margin-left: 6px; font-family: var(--type); font-size: 11.5px; letter-spacing: 0; text-transform: none; }
/* console HTTP : statut attendu (clé `expect` d'une requête, ou saisi par l'élève) — conforme en vert, écart en vermillon */
.hc-x { width: 62px; flex: none; font-family: var(--type); font-size: 13px; text-align: center; color: var(--ink); background: var(--card-in); border: 1px dashed var(--card-edge); border-radius: 3px; padding: 5px 4px; }
.hc-x:focus { outline: none; border-style: solid; border-color: var(--ink-dim); }
.hc-exp { flex: none; white-space: nowrap; font-family: var(--disp); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 1px 6px; border-radius: 2px; }
.hc-exp.ok { color: var(--ok); }
.hc-exp.ko { color: var(--cream); background: var(--stamp); }
.hc-res.off { box-shadow: inset 3px 0 0 var(--stamp); padding-left: 10px; }
@media (max-width: 720px) { .hc-x { font-size: 16px; width: 70px; } }
/* ---- réponse de l'IA locale (aiaide.js) : une autre matière que la feuille crème du contenu vérifié — papier gris
   bleuté, filet pointillé d'encre à gauche, libellé qui dit qui parle, et la mise en garde en pied, toujours. */
.aiaid { margin-top: 12px; padding: 10px 14px 10px 16px; color: var(--ink); background: var(--card-ai); border-left: 2px dashed var(--ink-dim); border-radius: 0 3px 3px 0; font-size: 14.5px; line-height: 1.5; }
.aiaid .sp { flex: 1; }
.aiaid-h { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 4px; }
.aiaid-l { font-family: var(--disp); font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-dim); }
.aiaid-m { font-family: var(--type); font-size: 12px; color: var(--ink-faint); }
.aiaid-b .answer { font-size: 14.5px; }
.aiaid-b pre.code { background: var(--card-ai-in); }
.aiaid-w { margin-top: 8px; padding-top: 6px; border-top: 1px dotted var(--ink-faint); font-size: 12.5px; font-style: italic; color: var(--ink-dim); }

/* ---- thème sombre (02/10) : le crochet `data-theme="dark"` posé au lot 9 pour l'arborescence est devenu le thème
   sombre de toute l'application ; l'espace de travail n'a plus de règles propres, il suit les jetons du papier
   (`--card*`, `--ink*`) redéfinis dans base.css. Seules les teintes --ic-* (plus haut) gardent leurs valeurs sombres. */