/* ==========================================================================
   Écran PC — terminal des créations (dimensions en px image : dalle 814 × 461)
   ========================================================================== */

.termapp {
  position: absolute; inset: 0;
  container-type: inline-size;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-columns: minmax(0, 1fr);
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255, 120, 60, .07), transparent 70%),
    #0f0c12;
  color: #ece4da;
  font-family: var(--f-mono);
  font-size: 19px; line-height: 1.15;
  overflow: hidden;
}
.termapp::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .045), transparent 30%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px);
}

.t-dim { color: #8f8799; }
.t-acc { color: var(--orange); }
.t-err { color: #ff5f6d; }
.t-dir { color: #6cc4ff; }
.t-prompt { color: var(--orange); white-space: nowrap; }
.t-cmd { color: #fff; }
.t-caret { display: inline-block; width: .55em; height: 1em; vertical-align: -2px; background: #ece4da; animation: fx-blink 1s steps(1, end) infinite; }

/* ---------- Barre de titre ---------- */
.term-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 5px 12px; background: #1b1620; border-bottom: 2px solid #2b2431;
}
.term-dots { display: flex; gap: 6px; }
.term-dots i { width: 10px; height: 10px; background: #ff5f56; }
.term-dots i:nth-child(2) { background: #ffbd2e; }
.term-dots i:nth-child(3) { background: #27c93f; }
.term-title { flex: 1; font-size: 17px; color: #a79fb0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term-help {
  border: 2px solid #3a3141; background: none; color: #d8cfe0; padding: 0 8px;
  font-family: var(--f-mono); font-size: 17px; cursor: pointer;
}
.term-help:hover, .term-help:focus-visible { border-color: var(--orange); color: #fff; outline: none; }

/* ---------- Corps ---------- */
.term-body { display: grid; grid-template-columns: 186px minmax(0, 1fr); min-height: 0; }
.term-tree {
  padding: 10px 6px 10px 12px; border-right: 2px solid #231d29; overflow-y: auto; min-height: 0;
  scrollbar-width: none;
}
.term-tree p { margin: 0 0 6px; }
.term-tree ul { list-style: none; margin: 0; padding: 0; }
.term-tree button {
  display: block; width: 100%; padding: 2px 4px; border: 0; background: none; text-align: left;
  font-family: var(--f-mono); font-size: 18px; color: #6cc4ff; cursor: pointer; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.term-tree button:hover, .term-tree button:focus-visible { background: #2a2232; outline: none; color: #fff; }
.term-tree button.is-active { background: var(--orange); color: #140c08; }
.t-tree-foot { margin-top: 10px !important; }

.term-main {
  position: relative;
  padding: 10px 14px 14px; overflow-y: auto; min-height: 0;
  scrollbar-width: thin; scrollbar-color: #4a3f52 transparent;
}
.t-line { margin: 0 0 3px; overflow-wrap: anywhere; }
.t-line a { color: #6cc4ff; }
.t-table { border-collapse: collapse; }
.t-table td { padding: 0 16px 0 0; vertical-align: top; }
.t-ls { list-style: none; margin: 2px 0 6px; padding: 0; display: grid; gap: 1px; }
.t-ls button {
  display: flex; gap: 14px; align-items: baseline; width: 100%;
  padding: 1px 6px; border: 0; background: none; text-align: left; cursor: pointer;
  font-family: var(--f-mono); font-size: 19px; color: inherit;
}
.t-ls button:hover, .t-ls button:focus-visible { background: #2a2232; outline: none; }
.t-ls .t-dir { min-width: 170px; }

/* ---------- Fiche projet ---------- */
.t-project {
  margin: 8px 0 6px; padding: 12px 14px;
  border: 2px solid #3a2f41; background: #15111a;
  animation: t-in .35s steps(6, end) both;
}
@keyframes t-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.t-project header p { margin: 0; }
.t-project h3 {
  margin: 2px 0 4px; font-family: var(--f-px); font-weight: 400; font-size: 32px; line-height: 1;
  color: var(--orange); text-shadow: 2px 2px 0 #4a1d08;
}
.t-meta { color: #a79fb0; }
.t-meta a { color: #6cc4ff; }
.t-project > p { margin: 8px 0; font-size: 19px; color: #e2dad0; }
.t-impact { list-style: none; margin: 6px 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.t-impact li { padding: 4px 10px; border-left: 4px solid var(--orange); background: rgba(255, 138, 61, .1); }
.t-impact b { font-family: var(--f-px); font-size: 26px; line-height: 1; color: #fff; margin-right: 8px; }
.t-impact span { color: #cfc6bd; }
.t-stack { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.t-stack li { padding: 0 8px; border: 2px solid #3a3141; color: #d8cfe0; font-size: 17px; }

.t-figure { margin: 0; border: 2px solid #2b2431; }
.t-figure figcaption {
  display: flex; justify-content: space-between; align-items: center;
  padding: 2px 8px; background: #1b1620; color: #8f8799; font-size: 17px;
}
.t-zoom { border: 0; background: none; color: var(--orange); font-family: var(--f-mono); font-size: 17px; cursor: pointer; padding: 0 4px; }
.t-zoom:hover, .t-zoom:focus-visible { background: var(--orange); color: #140c08; outline: none; }
.t-diagram { padding: 0; background: #0e0b15; }
.t-diagram .diagram { display: block; width: 100%; height: auto; }

.t-pnav { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }

/* ---------- Saisie & raccourcis ---------- */
.term-input {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-top: 2px solid #231d29; background: #120e15;
}
.term-input input {
  flex: 1; min-width: 0; border: 0; outline: none; background: none;
  color: #fff; font-family: var(--f-mono); font-size: 19px; caret-color: var(--orange);
}
.term-chips { display: flex; gap: 6px; padding: 4px 12px 7px; background: #120e15; overflow-x: auto; scrollbar-width: none; }
.t-chip {
  flex: none; padding: 0 10px; border: 2px solid #3a3141; background: #1b1620; cursor: pointer;
  font-family: var(--f-mono); font-size: 17px; color: #d8cfe0;
}
.t-chip:hover, .t-chip:focus-visible { border-color: var(--orange); color: #fff; outline: none; }

/* ---------- Schémas ---------- */
.diagram .dg-label { font-family: var(--f-mono); font-size: 19px; fill: #f4ede4; }
.diagram .dg-sub { font-family: var(--f-mono); font-size: 16px; fill: #a99fb5; }
.diagram .dg-flow { animation: dg-dash 1s linear infinite; }
@keyframes dg-dash { to { stroke-dashoffset: -8; } }
.dg-legend { list-style: none; margin: 0; padding: 6px 10px 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--f-mono); font-size: 16px; color: #a79fb0; }
.dg-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: 0; }

.dg-modal {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 24px;
  background: rgba(5, 3, 8, .82); backdrop-filter: blur(4px);
  animation: tv-swap .25s ease-out both;
}
.dg-modal-box {
  width: min(1240px, 100%); max-height: 100%; overflow: auto;
  background: #0f0c12; border: 2px solid #3a2f41; clip-path: var(--notch);
}
.dg-modal-box header {
  display: flex; align-items: baseline; gap: 14px; padding: 10px 14px;
  border-bottom: 2px solid #2b2431; font-family: var(--f-mono); font-size: 20px;
}
.dg-modal-box header b { font-family: var(--f-px); font-weight: 400; color: var(--orange); font-size: 28px; }
.dg-close {
  margin-left: auto; border: 2px solid #3a3141; background: none; color: #ece4da; cursor: pointer;
  font-family: var(--f-mono); font-size: 18px; padding: 0 10px;
}
.dg-close:hover, .dg-close:focus-visible { border-color: var(--orange); outline: none; }
.dg-modal-body .diagram { display: block; width: 100%; height: auto; }

/* ---------- Plein écran (petits écrans) ---------- */
.termapp.is-fullscreen { inset: 64px 8px 64px; border: 4px solid #050508; border-radius: 6px; box-shadow: 0 0 40px rgba(255, 90, 40, .4); }

@container (max-width: 640px) {
  .termapp { font-size: 18px; }
  .term-body { grid-template-columns: minmax(0, 1fr); }
  .term-title { font-size: 15px; }
  .term-tree { display: none; }
  .term-title { text-align: left; }
  .t-ls .t-dir { min-width: 0; }
  .t-ls button { flex-direction: column; gap: 0; }
}