/* window.css — l'app, reproduite. Thème sombre de l'app, cotes de l'app
   (bande de titre 52, colonne 68, bandeau de volet 34, écart 12), valeurs
   relevées dans le code Swift (Template.swift, PaneChrome.swift,
   WorkspaceSidebar.swift) : le volet actif s'allume dans la couleur de son
   workspace, ici l'orange du premier. Chaque fenêtre est dessinée à sa
   taille réelle puis mise à l'échelle par `.scaler`. */

/* Le graphite de l'app, en clair. */
:root {
  --g-frame: #2C2C2E; --g-stage: #141416; --g-pane: #000000; --g-head: #242424;
  --g-rule: #38383A; --g-edge: #48484A;
  --g-1: #F5F5F7; --g-2: #E5E5EA; --g-3: #D1D1D6; --g-4: #C7C7CC; --g-5: #AEAEB2; --g-6: #8E8E93; --g-8: #48484A;
}

/* Mise à l'échelle : --w est la largeur réelle, --s l'échelle posée par le JS. */
.scaler { position: relative; width: 100%; height: calc(var(--h) * var(--s, 1) * 1px); }
.scaler > .win,
.scaler > .scaled {
  position: absolute; left: 0; top: 0;
  width: calc(var(--w) * 1px); height: calc(var(--h) * 1px);
  transform: scale(var(--s, 1)); transform-origin: 0 0;
}

/* La fenêtre seule, posée sur la nuit de la page. */
.desk { position: relative; }

/* ---------------------------------------------------------------- Fenêtre */
.win {
  /* La couleur du workspace (orange, #E0813F) et ses dérivés, fondus sur le noir du volet. */
  --acc: #E0813F; --acc-title: #F3CDB2; --acc-head: #1B1008; --acc-rule: #874E26; --acc-num: #522F17; --acc-glow: rgba(224,129,63,.35);
  background: var(--g-frame); border-radius: var(--r-window); overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08), 0 30px 80px -20px rgba(0,0,0,.8);
  color: var(--g-1); font-family: var(--sans); text-align: left;
}
.win-band { position: absolute; left: 0; right: 0; top: 0; height: 52px; display: flex; align-items: center; }
.lights { position: absolute; left: 20px; display: flex; gap: 8px; }
.lights i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.25); }
.lights i:nth-child(2) { background: #FEBC2E; }
.lights i:nth-child(3) { background: #28C840; }
.crumb { position: absolute; left: 88px; display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--g-1); }
.crumb svg { width: 18px; height: 18px; color: var(--g-4); }
.crumb .tog { margin-right: 8px; }
.crumb .chev { width: 14px; height: 14px; color: var(--g-6); }
.crumb .path { font: 500 12.5px/1 var(--mono); color: var(--g-5); }
.tabs { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 30px; height: 52px; }
.tabs span { position: relative; display: grid; place-items: center; font-size: 13.5px; font-weight: 500; color: var(--g-5); }
.tabs span.on { color: var(--g-1); }
.tabs span.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--g-1); }
/* À droite : « Add » (le seul bouton cerné), un filet, puis Détacher, Disposition, Signaler un bug. */
.band-tools { position: absolute; right: 14px; display: flex; align-items: center; gap: 6px; color: var(--g-4); }
.band-tools .add {
  position: relative; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--g-8); color: var(--g-2); font-size: 13.5px; font-weight: 500;
}
.band-tools .add::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(245,245,247,.08); opacity: 0; transition: opacity 150ms ease-out; }
.band-tools .add.on::before { opacity: 1; }
.band-tools .add svg { position: relative; width: 15px; height: 15px; }
.band-tools .add .down { width: 13px; height: 13px; color: var(--g-6); }
.band-tools .sep { width: 1px; height: 18px; margin: 0 6px; background: var(--g-8); }
.band-tools .bb { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; }
.band-tools .bb svg { width: 17px; height: 17px; }
/* Fenêtre étroite (téléphone) : la bande garde l'essentiel. */
[data-narrow] .crumb .chev, [data-narrow] .crumb .path, [data-narrow] .band-tools .add, [data-narrow] .band-tools .sep { display: none; }

/* La colonne des workspaces. */
.win-col { position: absolute; left: 0; top: 58px; bottom: 0; width: 68px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tile {
  position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .3px;
  background: var(--tile-bg); color: var(--tile-fg); box-shadow: inset 0 0 0 1px var(--tile-edge);
}
/* La palette des workspaces (Template.swift) : fond et lettres fondus depuis la teinte, liseré à 26 %. */
.tile.c0 { --tile-bg: #453830; --tile-fg: #E69A65; --tile-edge: rgba(224,129,63,.26); }
.tile.c1 { --tile-bg: #304246; --tile-fg: #6AD3DE; --tile-edge: rgba(69,200,214,.26); }
.tile.c2 { --tile-bg: #453842; --tile-fg: #E899CD; --tile-edge: rgba(226,127,192,.26); }
.tile.on { box-shadow: inset 0 0 0 1px var(--g-1); }
.tile.on::before { content: ""; position: absolute; left: -16px; width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--g-1); }
/* Le nombre de volets du workspace, à cheval sur le coin. */
.tile .count {
  position: absolute; right: -5px; bottom: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: #1C1C1E; box-shadow: 0 0 0 2px var(--g-frame); color: #fff;
  font: 600 10px/17px var(--sans); font-variant-numeric: tabular-nums; letter-spacing: 0; text-align: center;
}
.tile.plus { background: none; box-shadow: none; border: 1px dashed rgba(72,72,74,.75); color: var(--g-5); }
.tile.plus svg { width: 16px; height: 16px; }
.col-rule { width: 28px; height: 1px; background: var(--g-rule); margin: 2px 0; }
.col-page { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 56px; padding: 7px 0 6px; border-radius: 9px; color: var(--g-5); font-size: 10px; font-weight: 500; }
.col-page svg { width: 20px; height: 20px; color: var(--g-4); }
.col-foot { margin-top: auto; margin-bottom: 14px; display: flex; flex-direction: column; align-items: center; gap: 16px; color: var(--g-4); }
.col-foot .moon { width: 16px; height: 16px; }
.col-foot .cog { width: 20px; height: 20px; }
/* L'usage : deux anneaux, crédits IA dehors, voix dedans, partis de midi. Rien au centre. */
.usage { width: 30px; height: 30px; transform: rotate(-90deg); fill: none; stroke-width: 2.8; stroke-linecap: round; }
.usage .trk { stroke: rgba(245,245,247,.14); }
.usage .val { stroke: var(--g-3); }
.usage .val.in { stroke: var(--g-5); }

/* La scène et sa grille de volets. */
.win-stage {
  position: absolute; left: 68px; top: 52px; right: 10px; bottom: 10px;
  background: var(--g-stage); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--g-rule);
  padding: 22px 18px 18px;
}
.grid { position: relative; height: 100%; display: grid; gap: 12px; grid-template-columns: 1fr; grid-template-rows: 1fr; grid-template-areas: "a"; }
.grid[data-layout="2"] { grid-template-columns: 1fr 1fr; grid-template-areas: "a b"; }
.grid[data-layout="3"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "a b" "a c"; }
.grid[data-layout="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "a b" "d c"; }

/* ---------------------------------------------------------------- Volet */
.pane {
  position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column;
  background: var(--g-pane); border-radius: var(--r-pane);
  box-shadow: 0 4px 16px rgba(0,0,0,.28);
}
.pane[hidden] { display: none; }
/* Le liseré : gris au repos ; sur le volet actif, la couleur du workspace et
   son halo, sur un calque qui ne fait que paraître — on n'anime pas une ombre. */
.pane::before, .pane::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; }
.pane::before { box-shadow: inset 0 0 0 1px #636366; }
.pane::after {
  box-shadow: inset 0 0 0 1px var(--acc), 0 0 26px var(--acc-glow), 0 14px 34px rgba(0,0,0,.5);
  opacity: 0; transition: opacity 150ms ease-out;
}
.pane.is-active { z-index: 1; }
.pane.is-active::after { opacity: 1; }
/* Le bandeau et le pied : gris au repos, teintés de la couleur du workspace sur le volet actif. */
.pane-head, .pane-foot {
  position: relative; flex: none; display: flex; align-items: center; padding: 0 12px; overflow: hidden;
  background: var(--g-head); font-weight: 600; color: var(--g-5); white-space: nowrap;
}
.pane-head { height: 34px; gap: 10px; border-radius: var(--r-pane) var(--r-pane) 0 0; box-shadow: inset 0 -1px 0 #0A0A0A; font-size: 12px; }
.pane-foot { height: 22px; gap: 6px; border-radius: 0 0 var(--r-pane) var(--r-pane); box-shadow: inset 0 1px 0 #0A0A0A; font-size: 11px; }
.pane-head::before, .pane-foot::before { content: ""; position: absolute; inset: 0; background: var(--acc-head); opacity: 0; transition: opacity 150ms ease-out; }
.pane-head::before { box-shadow: inset 0 -1px 0 var(--acc-rule); }
.pane-foot::before { box-shadow: inset 0 1px 0 var(--acc-rule); }
.pane.is-active .pane-head::before, .pane.is-active .pane-foot::before { opacity: 1; }
.pane-head > *, .pane-foot > * { position: relative; }
.pane.is-active .pane-head, .pane.is-active .pane-foot { color: var(--acc-title); }
.pane-head b { font-weight: 600; }
.pane-head .task { margin-left: -4px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.num { min-width: 17px; height: 17px; padding: 0 5px; display: grid; place-items: center; border-radius: 5px; background: rgba(255,255,255,.07); color: var(--g-4); font: 600 10px/1 var(--mono); }
.pane.is-active .num { background: var(--acc-num); color: var(--acc-title); }
.agent { width: 11px; height: 11px; flex: none; margin-right: -4px; color: var(--g-1); }
.agent.claude { color: #D97757; }
.agent.ide { width: 15px; height: 15px; color: inherit; }
.agent.working { animation: spin 2.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pane-head .icons { margin-left: auto; display: flex; gap: 2px; opacity: .75; }
.pane.is-active .pane-head .icons { opacity: 1; }
.pane-head .icons i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: var(--g-5); }
.pane-head .icons svg { width: 11px; height: 11px; }
.pane-body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.pane-foot .dot { opacity: .5; }
.pane-foot svg { width: 9px; height: 9px; opacity: .7; }

/* Un terminal : Codex, Claude Code. Monaco sur noir, le fil en haut, la
   saisie en bas ; quand le fil déborde, il défile (site.js le tient au
   bas), comme dans un vrai terminal. */
.term { display: flex; flex-direction: column; padding: 8px 10px 6px; font: 12px/1.5 Monaco, var(--mono); color: var(--g-1); }
.term p { margin: 0; }
.term .scroll { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.term .scroll > * { flex: none; }
.term .ln { display: none; white-space: pre; }
.term .ln.on { display: block; animation: ln-in 260ms var(--ease) both; }
@keyframes ln-in { from { opacity: 0; transform: translateY(4px); } }
.term .sub { padding-left: 2ch; }
.term .dim, .term .ph, .cc-effort { color: #8B8E98; }
.term .ok { color: var(--green); }
.term .you { margin: 6px -10px; padding: 3px 10px; background: #1E1E1E; white-space: pre-wrap; }
.term .caret { display: inline-block; width: 7px; height: 15px; vertical-align: -3px; background: var(--acc); animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* Claude Code : l'accueil au crabe, toujours en haut ; les puces ⏺, l'effort, la saisie entre deux filets, le mode. */
.cc-hello { flex: none; display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.cc-hello p { white-space: pre; }
/* Le crabe de Claude Code : des pixels plus hauts que larges, comme les demi-cellules du terminal. */
.clawd { flex: none; width: 58px; height: 38px; shape-rendering: crispEdges; }
.term .dot.ok { color: var(--green); }
.cc-effort { flex: none; align-self: flex-end; margin: 6px 0 3px; white-space: pre; }
.cc-input { flex: none; display: flex; gap: 1ch; margin: 0 -10px; padding: 4px 10px; box-shadow: inset 0 1px 0 #5A5A5E, inset 0 -1px 0 #5A5A5E; white-space: pre; overflow: hidden; }
.cc-input .blk { font-style: normal; background: var(--acc); color: #fff; }
.cc-mode { flex: none; margin-top: 5px; padding-left: 2ch; white-space: pre; overflow: hidden; }
.cc-mode .y { color: #E5C04A; }

/* Un Thread (ThreadPaneView.swift, rendu dans ui/assistant-ui/src/thread) :
   pour tous les agents, le fil se lit comme le terminal de Claude Code. Votre
   consigne en bulle, son heure dessous ; « ⏺ » devant le texte et devant
   chaque outil (gris qui clignote en cours, vert une fois fait), « ⎿ »
   dessous ; lectures, recherches et commandes réunies en une ligne grise
   (« Read 2 files ») ; le diff numéroté, en bandes vertes. En bas, sur une
   colonne de 44rem : le spinner et son chrono qui court, la saisie (le
   modèle à gauche ; l'effort et Envoyer, ou Stop, à droite), puis le mode. */
.agent.mark { width: 14px; height: 14px; color: #E9E9ED; }
.pane-head b + b, .th-task > b { margin-left: -4px; }
.th-task { display: flex; align-items: center; gap: 10px; min-width: 0; transition: opacity 300ms var(--ease); }
.th-task.off { opacity: 0; }
.thread { --fg: 250,250,250; --ok: #00BC7D; display: flex; flex-direction: column; background: #000; color: rgb(var(--fg)); }
.th-scroll { flex: 1; min-height: 0; overflow: hidden; padding: 16px 16px 0; }
.th-col { max-width: 704px; margin: 0 auto; padding-bottom: 20px; display: flex; flex-direction: column; gap: 20px; }
.th-col p { margin: 0; }
.thread .ln { display: none; }
.thread .ln.on { display: block; animation: ln-in 260ms var(--ease) both; }
/* Les lignes du terminal : la police mono, une gouttière de 20 pour la puce. */
.th-t, .th-done, .th-spin, .th-status { font: 12.5px/1.65 var(--mono); }
.th-say, .th-t, .th-done { position: relative; padding: 0 8px 0 28px; }
.th-say::before, .th-t::before, .th-done::before { position: absolute; left: 8px; top: 0; }
.th-say::before, .th-t::before { content: "\23FA\FE0E"; font-size: .9em; }
/* Votre consigne : une bulle à droite, l'heure dessous. */
.th-you { align-self: flex-end; max-width: 80%; padding: 0 8px; text-align: right; }
.th-you p { display: inline-block; padding: 8px 14px; border-radius: 16px 16px 6px 16px; background: #0B0B0B; box-shadow: inset 0 0 0 1px rgba(var(--fg),.1); text-align: left; font-size: 14px; line-height: 1.625; }
.th-you time { display: block; margin-top: 5px; padding: 0 4px; font-size: 11px; line-height: 1; color: rgba(var(--fg),.4); font-variant-numeric: tabular-nums; }
/* Le texte de l'agent. */
.th-say { font-size: 14px; line-height: 1.625; }
.th-say::before { color: rgba(var(--fg),.85); }
/* Un outil : « ⏺ Update(src/…) », le nom en gras ; « ⎿ Added 3 lines » dessous. */
.th-t { color: rgba(var(--fg),.55); }
.th-t::before { color: var(--ok); }
.th-t.run::before { color: rgba(var(--fg),.45); animation: th-blink 1s step-end infinite; }
@keyframes th-blink { 50% { opacity: .2; } }
.th-t .h { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: rgba(var(--fg),.7); }
.th-t .h b { font-weight: 600; color: rgb(var(--fg)); }
.th-t .el { position: relative; padding-left: 28px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.th-t .el::before { content: "⎿"; position: absolute; left: 0; color: rgba(var(--fg),.35); }
.th-t.run .el, .th-t.run .th-diff { display: none; }
/* Un groupe : vivant, « ⏺ Reading 2 files… » et l'élément en cours ; fini, une ligne grise sans puce. */
.th-t.grp .h { color: rgba(var(--fg),.8); }
.th-t.grp .past, .th-t.grp.run .el.now { display: block; }
.th-t.grp:not(.run) .now, .th-t.grp.run .past { display: none; }
.th-t.grp:not(.run)::before { content: none; }
.th-t.grp:not(.run) .h { color: rgba(var(--fg),.55); }
/* Le diff numéroté : les lignes ajoutées en bandes vertes (du contenu, pas un fond d'interface). */
.th-diff { margin-left: 28px; font: 12px/1.55 var(--mono); white-space: pre; overflow: hidden; }
.th-diff span { display: block; padding-right: 8px; color: rgba(var(--fg),.6); }
.th-diff .add { background: rgba(0,188,125,.15); color: #A4F4CF; }
.th-diff i { font-style: normal; color: rgba(var(--fg),.4); }
/* « ✻ Brewed for 24s · done 10:43 AM » : la fin du tour, immobile. */
.th-done { color: rgba(var(--fg),.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-done::before { content: "✻"; }
/* Le bas du volet, sur la même colonne ; le fil s'efface dessous. */
.th-dock { position: relative; flex: none; width: 100%; max-width: 736px; margin: 0 auto; padding: 0 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.th-dock p { margin: 0; }
.th-dock::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; background: linear-gradient(to top, #000, transparent); pointer-events: none; }
/* « ✻ Simmering… (12s · ↓ 1.2k tokens · thinking with high effort) » : le glyphe tourne, le verbe luit, le chrono court. */
.th-spin { display: none; padding: 0 8px; color: rgba(var(--fg),.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-spin.on { display: block; }
.th-spin .g { display: inline-block; width: 20px; color: rgba(var(--fg),.7); }
.th-spin .v {
  background: linear-gradient(90deg, rgba(var(--fg),.75) 40%, #fff 50%, rgba(var(--fg),.75) 60%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: th-shine 2s linear infinite;
}
@keyframes th-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
.th-spin em { font-style: normal; color: rgba(var(--fg),.4); font-variant-numeric: tabular-nums; }
.th-composer { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 16px; background: #0B0B0B; box-shadow: inset 0 0 0 1px rgba(var(--fg),.1); }
.pane.is-active .th-composer { box-shadow: inset 0 0 0 1px rgba(var(--fg),.25); }
.th-field { min-height: 30px; padding: 3px 10px; font-size: 16px; line-height: 24px; white-space: nowrap; overflow: hidden; }
.th-field .ph { color: rgba(161,161,161,.6); }
.th-field [data-typed]:not(:empty) ~ .ph { display: none; }
.th-field .caret { display: inline-block; width: 2px; height: 18px; margin-right: 1px; vertical-align: -3px; background: #E5E5E5; animation: blink 1.05s steps(1) infinite; }
.pane:not(.is-active) .th-field .caret { visibility: hidden; }
.th-bar { display: flex; align-items: center; gap: 2px; }
.th-plus { display: grid; place-items: center; width: 28px; height: 28px; color: rgba(var(--fg),.85); }
.th-plus svg { width: 16px; height: 16px; }
.th-chip { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 500; color: rgba(var(--fg),.7); white-space: nowrap; }
.th-chip .logo { width: 14px; height: 14px; color: #E9E9ED; }
.th-chip .dn { width: 12px; height: 12px; margin-left: -2px; color: rgba(var(--fg),.45); }
.th-chip.push { margin-left: auto; }
.th-send { display: grid; place-items: center; width: 28px; height: 28px; margin-left: 4px; border-radius: 50%; background: #E5E5E5; color: #171717; transition: opacity 150ms ease-out; }
.th-send svg { width: 16px; height: 16px; }
.th-send .sq { display: none; width: 11px; height: 11px; border-radius: 2px; background: currentColor; }
.th-send.off { opacity: .5; }
.th-send.stop svg { display: none; }
.th-send.stop .sq { display: block; }
/* « ⏵⏵ auto mode on » : le mode, sous la saisie, comme le bas du terminal. */
.th-status { padding: 6px 8px 0; font-size: 12px; color: rgba(var(--fg),.65); white-space: nowrap; overflow: hidden; }
/* L'IDE : le bouton « MD », à droite, avant Agrandir et Fermer. */
.pane-head .md { margin-left: auto; }
.pane-head .md + .icons { margin-left: 0; }

/* Un navigateur : la barre d'adresse de l'app, et la boutique Lumen, sombre. */
.browser { display: flex; flex-direction: column; background: #0E0E10; color: #E8E6E1; }
.url { flex: none; display: flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px; background: #141414; box-shadow: inset 0 -1px 0 #0A0A0A; }
.url i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; color: var(--g-5); }
.url i svg { width: 11px; height: 11px; }
.url .bar {
  flex: 1; min-width: 0; display: flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px;
  background: rgba(44,44,46,.7); box-shadow: inset 0 0 0 1px var(--g-8); color: var(--g-1); font: 500 11px/1 var(--mono); white-space: nowrap; overflow: hidden;
}
.fav { flex: none; display: grid; place-items: center; width: 11px; height: 11px; margin-right: -4px; border-radius: 3px; background: #E8E6E1; color: #0E0E10; font: 700 8px/1 var(--serif); }
.driven {
  display: flex; align-items: center; gap: 5px; height: 18px; padding: 0 4px 0 7px; border-radius: 9px;
  background: rgba(224,129,63,.14); box-shadow: inset 0 0 0 1px rgba(224,129,63,.45); color: var(--acc-title); font-size: 10px; font-weight: 500;
}
.driven svg { width: 10px; height: 10px; }
.driven .hand { width: 11px; height: 11px; opacity: .8; }
.shop { position: relative; flex: 1; padding: 14px 18px; overflow: hidden; }
.shop-top { display: flex; align-items: baseline; gap: 18px; font-size: 11px; color: #8E8C86; }
.shop-top b { font: 600 17px/1 var(--serif); color: #F2F0EB; margin-right: auto; }
.chips { display: flex; gap: 6px; margin: 12px 0; }
.chip { height: 22px; padding: 0 10px; display: grid; place-items: center; border-radius: 11px; box-shadow: inset 0 0 0 1px #34343A; font-size: 10.5px; font-weight: 500; color: #C9C7C1; }
.chip.on { background: #F2F0EB; box-shadow: none; color: #0E0E10; }
.items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.item { transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
.item i { display: block; height: 58px; border-radius: 6px; background: var(--c, #3A3A3C); }
.item { min-width: 0; }
.item > span b { flex: none; color: #F2F0EB; }
.item > span { gap: 6px; display: flex; justify-content: space-between; margin-top: 5px; font-size: 10px; color: #C9C7C1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item.out { opacity: .12; transform: scale(.94); }
.count { margin-top: 10px; font-size: 10.5px; color: #8E8C86; }
.count b { color: #F2F0EB; }
.browser .agent-cursor { color: var(--acc); }
.browser .agent-cursor::after { border-color: var(--acc); }

/* Le curseur de l'agent. */
.agent-cursor { position: absolute; left: 0; top: 0; width: 18px; height: 18px; color: #111113; pointer-events: none; transition: transform 900ms var(--ease); z-index: 3; }
.agent-cursor::after { content: ""; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #111113; opacity: 0; transform: scale(.4); }
.agent-cursor.click::after { animation: ripple 520ms var(--ease); }
@keyframes ripple { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.8); } }

/* Un éditeur de code : onglets de fichiers, la page en nuances de gris, et
   son pied (sauvegarde auto, branche, rétablir, enregistrer). */
.editor { display: flex; flex-direction: column; background: #000; }
.md { display: grid; place-items: center; height: 22px; padding: 0 6px; border-radius: 6px; font: 600 10px/1 var(--mono); color: var(--g-5); }
.ed-tabs { flex: none; display: flex; height: 34px; box-shadow: inset 0 -1px 0 #26262B; font: 12px/1 var(--mono); }
.ed-tabs span { position: relative; display: flex; align-items: center; padding: 0 14px; color: var(--g-5); box-shadow: inset -1px 0 0 #26262B; }
.ed-tabs span.on { background: #0A0A0C; color: var(--g-1); }
.ed-tabs span.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--acc); }
.ed-main { flex: 1; min-height: 0; display: flex; overflow: hidden; background: #0A0A0C; font: 500 12px/1.6 var(--mono); color: var(--g-5); }
.ed-foot {
  flex: none; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px;
  border-radius: 0 0 var(--r-pane) var(--r-pane); background: #000; box-shadow: inset 0 1px 0 #26262B; font-size: 11px; color: var(--g-3); white-space: nowrap;
}
.ed-foot .tog { position: relative; width: 26px; height: 15px; border-radius: 8px; background: var(--g-8); }
.ed-foot .tog i { position: absolute; right: 2px; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--g-1); }
.ed-foot .br { display: flex; align-items: center; gap: 4px; margin-left: 10px; }
.ed-foot .br svg { width: 9px; height: 9px; }
.ed-foot .br .down { width: 8px; height: 8px; }
.ed-foot .acts { margin-left: auto; display: flex; gap: 6px; }
.ed-foot .acts i { display: grid; place-items: center; width: 30px; height: 25px; border-radius: 7px; box-shadow: inset 0 0 0 1px var(--g-8); }
.ed-foot .acts svg { width: 12px; height: 12px; }
.gutter { flex: none; width: 38px; padding: 12px 8px 0 0; text-align: right; color: var(--g-8); background: #0A0A0C; }
.code { flex: 1; padding: 12px 14px; background: #0A0A0C; }
.code .l { display: block; white-space: pre; margin: 0 -14px; padding: 0 14px; }
.gutter span { display: block; }
.code .l.new { background: rgba(98,197,84,.10); box-shadow: inset 2px 0 0 var(--green); }
.code .k { color: var(--g-1); font-weight: 700; }
.code .s { color: #B8B8BD; }
.code .f { color: var(--g-2); }
.code .m { color: var(--g-6); }

/* ---------------------------------------------------------------- L'orbe de dictée
   Celle de l'app publiée : pilule #131314, liseré à 6 %, barres violettes pendant qu'on parle. */
.orb {
  display: inline-flex; align-items: center; gap: 14px; padding: 14px 22px; border-radius: 36px;
  background: #131314; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.35), 0 18px 40px -12px rgba(0,0,0,.7);
  color: #fff;
}
.orb img { width: 28px; height: 28px; }
.orb .word { font: 500 24px/1 var(--display); letter-spacing: -.01em; }
.orb .sep { width: 1px; height: 24px; background: rgba(255,255,255,.18); }
.bars { display: flex; align-items: center; gap: 4px; height: 24px; }
.bars i { width: 3px; height: 24px; border-radius: 2px; background: #9475F7; transform: scaleY(.18); transform-origin: 50% 50%; }
/* Posé au-dessus de la saisie de Codex, où la consigne s'écrit. */
.win .orb { position: absolute; left: 50%; top: 470px; transform: translate(-50%, 16px) scale(.96); opacity: 0; transition: opacity 300ms var(--ease), transform 300ms var(--ease); z-index: 6; }
.win .orb.on { opacity: 1; transform: translate(-50%, 0); }
/* L'orbe de la voix (VoiceOrbButton, VoiceOrbPanel) : la sphère de la bande, juste avant « Add », sa bulle « Talk to Plume »
   au survol, et la tuile qui se déroule sous les onglets — du gris du cadre, la ligne d'une seule pièce, la croix. Le bleu est
   celui du navigateur de l'app (#3B82F6) ; l'eau est dessinée au canevas (site.js). */
.win-band { z-index: 9; }
.orb-btn { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; }
.orb-btn canvas { width: 22px; height: 22px; display: block; }
.orb-btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(245,245,247,.06); opacity: 0; transition: opacity 120ms ease-out; }
.orb-btn.on::before { opacity: 1; }
.orb-btn canvas { position: relative; }
.vo-bubble {
  position: absolute; top: calc(100% + 9px); left: 50%; padding: 10px 12px; border-radius: 10px; white-space: nowrap;
  background: var(--g-head); box-shadow: inset 0 0 0 1px var(--g-8), 0 5px 13px rgba(0,0,0,.4);
  font-size: 12.5px; font-weight: 500; line-height: 1; color: var(--g-1); pointer-events: none;
  opacity: 0; transform: translate(-50%, -3px); transition: opacity 120ms ease-out, transform 120ms ease-out;
}
.vo-bubble.on { opacity: 1; transform: translate(-50%, 0); }
.vo-bubble::before { content: ""; position: absolute; left: 50%; top: -4px; width: 7px; height: 7px; background: var(--g-head); box-shadow: -1px -1px 0 var(--g-8); transform: translateX(-50%) rotate(45deg); }
.vo-tile {
  position: absolute; top: 52px; left: 50%; z-index: 8; width: 540px; display: none; flex-direction: column;
  transform: translateX(-50%); border-radius: 0 0 14px 14px;
  background:
    radial-gradient(120px 80px at 32px 24px, rgba(59,130,246, calc(.08 + var(--glow, 0) * .2)), transparent 70%),
    linear-gradient(180deg, var(--g-frame) 0%, #29292B 60%, #262628 100%);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.05), inset -1px 0 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(255,255,255,.07),
              0 18px 40px rgba(0,0,0,.45), 0 4px 10px rgba(0,0,0,.25);
}
.vo-tile.open { display: flex; animation: vo-drop 240ms var(--ease); }
@keyframes vo-drop { from { transform: translateX(-50%) scaleY(.55); transform-origin: 50% 0; } }
.vo-row { height: 54px; display: flex; align-items: center; gap: 13px; padding: 0 8px 0 12px; }
.vo-row canvas { flex: none; width: 34px; height: 34px; display: block; }
.vo-line { position: relative; flex: 1; min-width: 0; height: 22px; overflow: hidden; }
.vo-line.fade { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px); mask-image: linear-gradient(90deg, transparent 0, #000 28px); }
.vo-txt { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 14.5px; line-height: 22px; letter-spacing: -.005em; color: var(--g-1); }
.vo-txt.hint, .vo-txt.status { color: var(--g-5); }
.vo-txt.you { color: var(--g-3); }
.vo-txt.sent { color: var(--g-6); }
.vo-txt .caret { display: inline-block; width: 2px; height: 16px; margin-left: 2px; vertical-align: -3px; border-radius: 1px; background: #3B82F6; }
.vo-x { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; color: var(--g-5); }
.vo-x svg { width: 14px; height: 14px; }
/* Le pointeur de la souris, blanc : la sienne, pas celle de l'agent. */
.vo-cursor { z-index: 12; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); opacity: 0; transition: transform 900ms var(--ease), opacity 250ms var(--ease); }
.vo-cursor.on { opacity: 1; }
.vo-cursor::after { border-color: #fff; }
/* La page Activité, où l'orbe emmène à la fin. */
/* C'est la page « Network activity » des onglets Features (mêmes jauges, même liste), posée sur la scène. */
.vact { position: absolute; inset: 0; display: flex; overflow: hidden; border-radius: 10px; background: #0B0B0C; box-shadow: inset 0 0 0 1px var(--g-rule); opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease); }
.win-stage.to-activity .vact { opacity: 1; }
.win-stage.to-activity .grid { opacity: 0; }


/* ---------------------------------------------------------------- Onglets Chat et Design
   Une colonne de 240 (conversations, ou fil du design), puis la zone
   principale, sur le fond de la scène. */
.win-stage.split { padding: 0; display: flex; overflow: hidden; background: #0B0B0C; }
.side { width: 240px; flex: none; display: flex; flex-direction: column; gap: 2px; padding: 14px 10px 12px; box-shadow: inset -1px 0 0 var(--g-rule); }
/* ---------------------------------------------------------------- Le Chat (ChatView.swift, ComposerKit.swift)
   La scène au gris de l'app ; la colonne de 240 bordée à droite ; la
   conversation part du haut de la scène, centrée sur 660, et la saisie
   reste en bas. Aucune clé API installée : le Chat puise dans les crédits IA. */
.chatwin .win-stage.split { background: var(--g-stage); }
.ch-side { width: 240px; flex: none; display: flex; flex-direction: column; gap: 4px; padding: 14px 10px 12px; box-shadow: inset -1px 0 0 #3A3A3C; }
.ch-new { display: flex; align-items: center; gap: 9px; height: 34px; margin: 0 1px 2px; padding: 0 12px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--g-1); }
.ch-new svg { width: 13px; height: 13px; }
.ch-new kbd { margin-left: auto; font: 11px/1 var(--sans); letter-spacing: .5px; color: var(--g-6); }
.ch-search { display: flex; align-items: center; gap: 7px; height: 28px; margin: 6px 0 4px; padding: 0 9px; border-radius: 8px; background: #2C2C2E; box-shadow: inset 0 0 0 1px #3A3A3C; font-size: 12px; color: var(--g-6); }
.ch-search svg { width: 11px; height: 11px; }
.ch-row { padding: 7px 11px; border-radius: 8px; font-size: 12.5px; line-height: 1.25; color: var(--g-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-row.on { background: rgba(245,245,247,.05); color: var(--g-1); }
.ch-foot { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; padding: 8px 16px 0; }
.ch-price { display: flex; align-items: center; gap: 4px; padding: 12px 0 10px; font: 11.5px/1 "Avenir Next", var(--sans); color: var(--g-3); }
.ch-price svg { width: 9px; height: 9px; color: var(--g-6); }
.ch-key { display: flex; align-items: center; gap: 4px; margin: 10px 0 3px; padding: 5px 11px; border-radius: 10px; border: 1px dashed #636366; font: 11px/1 "Avenir Next", var(--sans); color: var(--g-4); }
.ch-key b { font-size: 12px; font-weight: 400; }

.ch-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 22px 14px 2px; }
.ch-thread { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 22px; padding: 26px max(20px, calc(50% - 330px)) 24px; }
.ch-thread > * { flex: none; transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
.ch-thread > .new { opacity: 0; transform: translateY(8px); }
.ch-you { align-self: flex-end; max-width: 480px; padding: 9px 16px; border-radius: 18px; background: rgba(245,245,247,.08); font-size: 13px; line-height: 1.5; color: var(--g-2); }
.ch-ans { display: flex; flex-direction: column; gap: 8px; }
.ch-ans p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--g-3); }
.ch-ans b { font-weight: 700; color: var(--g-1); }
/* Quand le modèle change, son nom au-dessus de la réponse, puis un filet. */
.ch-mark { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 500; color: var(--g-4); }
.ch-mark svg, .ch-mark .mono { width: 12px; height: 12px; }
.ch-mark::after { content: ""; flex: 1; height: 1px; background: #3A3A3C; }
/* Sous chaque réponse, toujours là : Copier, Régénérer, les tokens, Plus, le modèle. */
.ch-acts { display: flex; align-items: center; color: var(--g-5); }
.ch-acts i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; }
.ch-acts i svg { width: 12px; height: 12px; }
.ch-acts .n { height: 22px; padding: 0 6px; font-size: 11px; line-height: 22px; font-variant-numeric: tabular-nums; }
.ch-acts .by { display: flex; align-items: center; gap: 5px; padding-left: 8px; font-size: 11px; color: var(--g-6); }
.ch-acts .by svg, .ch-acts .by .mono { width: 11px; height: 11px; }
.chatwin .claude { color: #D97757; }

/* La saisie : noir, cerclée, sur 660 au plus ; la ligne de la facturation dessous. */
.ch-compose { flex: none; display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 700px; margin: 0 auto; padding: 4px 20px 12px; }
.ch-box { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: #060606; box-shadow: inset 0 0 0 1px #4A4A50; }
.ch-field { min-height: 44px; font-size: 13px; line-height: 19px; color: #E4E7F5; white-space: nowrap; overflow: hidden; }
.ch-field .ph { color: #7A7E85; }
.ch-field [data-c-typed]:not(:empty) + .ph { display: none; }
.ch-bar { display: flex; align-items: center; gap: 3px; }
.ch-plus, .ch-send { display: grid; place-items: center; width: 26px; height: 26px; flex: none; }
.ch-plus { border-radius: 8px; color: var(--g-4); }
.ch-plus svg { width: 12px; height: 12px; }
.ch-pick { display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 8px; font-size: 11.5px; font-weight: 500; color: var(--g-4); white-space: nowrap; transition: background-color 150ms; }
.ch-pick svg { width: 14px; height: 14px; }
.ch-pick .mono { width: 14px; height: 14px; }
.ch-pick .up { width: 8px; height: 8px; color: var(--g-6); }
.ch-pick.open { background: rgba(245,245,247,.08); color: var(--g-2); }
.ch-tok { margin-left: auto; height: 22px; padding: 0 4px; font-size: 11px; line-height: 22px; font-variant-numeric: tabular-nums; color: var(--g-6); }
.ch-send { border-radius: 50%; background: rgba(245,245,247,.12); color: var(--g-6); transition: transform 150ms var(--ease); }
.ch-send svg { width: 12px; height: 12px; }
.ch-send.ready { color: var(--g-1); }
.ch-send.press { transform: scale(.9); }

/* Le choix du modèle : une bulle au-dessus du bouton, les IA à gauche, leurs modèles à droite. */
.ch-picker {
  position: absolute; left: 28px; bottom: 50px; width: 458px; padding: 6px; z-index: 3; border-radius: 12px;
  background: #2C2C2E; box-shadow: inset 0 0 0 1px var(--g-8), 0 12px 25px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(6px); transition: opacity 220ms var(--ease), transform 220ms var(--ease); pointer-events: none;
}
.ch-picker.on { opacity: 1; transform: none; }
.ch-psearch { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px; box-shadow: inset 0 -1px 0 #3A3A3C; font-size: 12.5px; color: var(--g-5); }
.ch-psearch svg { width: 12px; height: 12px; }
.ch-pcols { display: flex; padding-top: 6px; }
.ch-prov { width: 196px; flex: none; display: flex; flex-direction: column; gap: 2px; padding-right: 6px; }
.ch-prov span { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 8px; border-radius: 8px; }
.ch-prov span > svg:first-child, .ch-prov .mono { width: 15px; height: 15px; }
.ch-prov b { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; font-weight: 500; color: var(--g-2); }
.ch-prov small { font-size: 10px; font-weight: 400; color: var(--g-5); }
.ch-prov .go { width: 9px; height: 9px; margin-left: auto; color: var(--g-6); }
.ch-prov span.on { background: rgba(245,245,247,.05); }
.ch-mods { flex: 1; display: flex; flex-direction: column; gap: 2px; padding-left: 6px; box-shadow: inset 1px 0 0 #3A3A3C; }
.ch-mods span { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border-radius: 8px; }
.ch-mods b { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; font-weight: 500; color: var(--g-2); }
.ch-mods small { font-size: 10px; font-weight: 400; color: var(--g-5); }
.ch-mods .cost { display: flex; gap: 2px; }
.ch-mods .cost i { width: 3px; height: 11px; border-radius: 1px; background: var(--g-8); }
.ch-mods .cost i.f { background: var(--g-3); }
.ch-mods .ok { width: 11px; height: 11px; color: var(--g-1); visibility: hidden; }
.ch-mods span.on { background: rgba(245,245,247,.08); }
.ch-mods span.on .ok { visibility: visible; }
[data-narrow] .ch-side { display: none; }
[data-narrow] .ch-picker { left: 0; }

/* La question et la réponse de l'onglet Activité. */
.c-user { align-self: flex-end; max-width: 480px; padding: 9px 14px; border-radius: 18px; background: #2C2C2E; font-size: 14px; line-height: 1.45; color: var(--g-1); }
.c-ans { font-size: 14px; line-height: 1.6; color: var(--g-3); }
.c-ans b { color: var(--g-1); font-weight: 600; }

/* Le champ de la question, dans l'onglet Activité. */
.c-field { min-height: 22px; font-size: 14px; line-height: 22px; color: var(--g-1); white-space: nowrap; overflow: hidden; }
.c-field:empty::before { content: attr(data-placeholder); color: var(--g-6); }
.mono { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: #3A3A3C; color: var(--g-1); font: 700 9.5px/1 var(--sans); font-style: normal; flex: none; }

/* Le Design : le fil à gauche, la maquette au centre, la saisie dessous. */
.d-side { gap: 10px; padding-top: 16px; }
.d-back { align-self: flex-end; font-size: 12px; color: var(--g-5); }
.d-title { padding: 0 6px; font-size: 14px; color: var(--g-1); }
.d-thread { display: flex; flex-direction: column; gap: 9px; padding: 4px 6px 0; overflow: hidden; }
.d-thread > * { transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
.d-thread > .new { opacity: 0; transform: translateY(6px); }
.d-user { align-self: flex-end; max-width: 100%; padding: 7px 11px; border-radius: 14px; background: #2C2C2E; font-size: 12.5px; line-height: 1.4; color: var(--g-1); }
.d-step { font-size: 12px; color: var(--g-5); }
.d-step::before { content: "✦ "; color: var(--g-3); }
.d-done { font-size: 12.5px; line-height: 1.45; color: var(--g-3); }
.d-done b { color: var(--g-1); }
.d-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 22px 30px 16px; }
.d-web { width: 100%; max-width: 700px; flex: 1; min-height: 0; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: #F4F3EF; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 24px 60px -20px rgba(0,0,0,.8); }
.d-bar { position: relative; flex: none; height: 34px; display: flex; align-items: center; justify-content: center; background: #E7E5DF; box-shadow: inset 0 -1px 0 #D6D3CB; }
.d-bar .lights { left: 12px; gap: 6px; }
.d-bar .lights i { width: 9px; height: 9px; }
.d-url { height: 22px; padding: 0 40px; border-radius: 6px; background: #F4F3EF; font-size: 11.5px; line-height: 22px; color: #5E5C57; }
.d-zoom { position: absolute; right: 12px; font-size: 11px; color: #7A7872; }
/* La saisie du Design (DesignComposer.swift) : la boîte du Chat, « Claude · Opus 5 »
   sans logo, le total seulement une fois des tokens dépensés ; la signature dessous. */
.d-compose { width: 100%; max-width: 700px; margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.d-compose .ch-box { box-shadow: inset 0 0 0 1px #2E2E33; }
.d-compose .ch-box.writing { box-shadow: inset 0 0 0 1px #4A4A50; }
.d-compose .ch-bar { gap: 8px; }
.d-compose .sp { flex: 1; }
.d-compose .ch-tok { margin-left: 0; }
.d-compose .ch-tok[hidden] { display: none; }
.d-compose .ch-pick .v { color: var(--g-5); }
.d-powered { margin: 0; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 10.5px; color: var(--g-6); }
.d-powered svg { width: 12px; height: 12px; color: #D97757; }

/* La page de la boutique, telle que Design la reproduit. */
.lp { position: relative; flex: 1; overflow: hidden; color: #141413; font-family: var(--sans); }
.lp-promo { position: absolute; left: 0; right: 0; top: 0; height: 30px; display: grid; place-items: center; background: #141413; color: #F4F3EF; font-size: 11.5px; font-weight: 600; transform: translateY(-100%); transition: transform 500ms var(--ease); }
.lp-body { padding: 16px 26px; transition: transform 500ms var(--ease); }
.lp.promo .lp-promo { transform: none; }
.lp.promo .lp-body { transform: translateY(30px); }
[data-lp-part] { transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.lp.building [data-lp-part] { opacity: 0; transform: translateY(8px); }
[data-lp-part].shown { opacity: 1 !important; transform: none !important; }
.lp-nav { display: flex; align-items: center; gap: 22px; font-size: 12px; color: #5E5C57; }
.lp-nav b { margin-right: 10px; font: 600 17px/1 var(--serif); color: #141413; }
.lp-nav .cart { margin-left: auto; }
.lp-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; margin: 26px 0 22px; }
.lp-copy h4 { margin: 0; font: 600 30px/1.08 var(--serif); letter-spacing: -.01em; transform-origin: 0 100%; transition: transform 500ms var(--ease); }
.lp-copy p { margin: 12px 0 18px; font-size: 13px; color: #5E5C57; }
.lp.big h4 { transform: scale(1.3); }
.lp.big .lp-copy p { transform: translateY(8px); }
.lp-copy p { transition: transform 500ms var(--ease); }
.lp-btn { position: relative; display: inline-grid; place-items: center; height: 34px; padding: 0 18px; border-radius: 17px; background: #C9B99A; color: #141413; font-size: 12.5px; font-weight: 600; isolation: isolate; }
.lp-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #141413; opacity: 0; transition: opacity 500ms var(--ease); }
.lp-btn { transition: color 500ms var(--ease); }
.lp.dark .lp-btn { color: #F4F3EF; }
.lp.dark .lp-btn::before { opacity: 1; }
.lp-img { display: block; height: 170px; border-radius: 10px; background: linear-gradient(135deg, #D8D3C8, #8A9486); }
.lp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.lp-grid i { height: 84px; border-radius: 8px; background: var(--c); }

/* Fenêtre étroite (téléphone) : la colonne cède la place. */
[data-narrow] .side { display: none; }

/* La page ouverte depuis la colonne : Agents, Activité. */
.col-page.on { background: rgba(245,245,247,.08); color: var(--g-1); }
.col-page.on svg { color: var(--g-1); }
.act-page { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 22px 26px 18px; }
.act-head b { display: block; font-size: 22px; font-weight: 700; color: var(--g-1); }
.act-head span { display: block; margin-top: 4px; font-size: 13px; color: var(--g-5); }

/* ---------------------------------------------------------------- La page Agents (AgentsPageView.swift)
   L'en-tête, la recherche, puis trois colonnes : la bibliothèque, la liste,
   la fiche (qui s'ouvre au clic) ; l'installation par-dessus. `.done` : la
   page est passée à « Installed › MCP », la fiche à celle de l'installé. */
.ag.win-stage.split { background: var(--g-stage); }
.ag-page { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-top: 24px; }
.ag-head { display: flex; align-items: flex-end; gap: 24px; padding: 0 40px; }
.ag-head b { display: block; font: 600 22px/1.1 "Avenir Next", var(--sans); color: var(--g-1); }
.ag-head > div > span { display: block; margin-top: 6px; font: 12.5px/1.3 "Avenir Next", var(--sans); color: var(--g-5); }
.ag-ghost { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 30px; margin-left: auto; padding: 0 14px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--g-6); font-size: 12.5px; font-weight: 500; color: var(--g-1); white-space: nowrap; }
.ag-ghost.bright { box-shadow: inset 0 0 0 1px var(--g-1); }
.ag-ghost svg { width: 13px; height: 13px; }
.ag-bar { display: flex; align-items: center; gap: 8px; padding: 20px 40px 0; }
.ag-search { display: flex; align-items: center; gap: 8px; width: 480px; height: 36px; padding: 0 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--g-8); font-size: 13px; color: var(--g-6); }
.ag-search svg { width: 14px; height: 14px; color: var(--g-5); }
.ag-filter { display: grid; place-items: center; width: 44px; height: 36px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--g-8); color: var(--g-4); }
.ag-filter svg { width: 15px; height: 15px; }
.ag-view { display: flex; gap: 2px; padding: 3px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--g-8); }
.ag-view i { display: grid; place-items: center; width: 30px; height: 28px; border-radius: 7px; color: var(--g-5); }
.ag-view i.on { background: rgba(245,245,247,.09); color: var(--g-1); }
.ag-view svg { width: 14px; height: 14px; }
.ag-cols { flex: 1; min-height: 0; display: flex; margin-top: 20px; padding-left: 40px; box-shadow: inset 0 1px 0 var(--g-rule); overflow: hidden; }
/* La bibliothèque : Catalog et Installed, chacun avec Skills, MCP, Plugins. */
.ag-nav { flex: none; width: 200px; display: flex; flex-direction: column; padding: 16px 14px 0 0; box-shadow: inset -1px 0 0 var(--g-rule); }
.ag-nav small { padding: 0 8px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--g-6); }
.ag-nav span { display: flex; align-items: center; gap: 9px; height: 28px; padding: 0 10px 0 26px; border-radius: 7px; font-size: 12.5px; color: var(--g-3); }
.ag-nav span svg { flex: none; width: 14px; height: 14px; color: var(--g-5); }
.ag-nav span.top { height: 30px; padding: 0 8px; font-size: 13px; font-weight: 500; color: var(--g-1); }
.ag-nav span.top svg { width: 15px; height: 15px; color: var(--g-4); }
.ag-nav span.top.lit svg { color: var(--g-1); }
.ag-nav span.gap { margin-top: 18px; }
.ag-nav span.on { background: rgba(245,245,247,.13); color: var(--g-1); }
.ag-nav span.on svg { color: var(--g-1); }
.ag-nav i { margin-left: auto; font-style: normal; font-size: 11px; color: var(--g-6); }
.ag-nav span.on i { color: var(--g-3); }
/* La liste : une ligne par élément, le titre du groupe au-dessus. */
.ag-list { flex: 1; min-width: 0; padding: 6px 0; overflow: hidden; }
.ag.open .ag-list { flex: none; width: 470px; box-shadow: inset -1px 0 0 var(--g-rule); }
.ag-list h5 { margin: 0; padding: 0 16px; height: 28px; line-height: 28px; font-size: 11.5px; font-weight: 600; color: var(--g-3); }
.ag-row { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px; transition: background-color 120ms ease-out; }
.ag-row.on { background: rgba(245,245,247,.17); }
.ag .ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--g-8); color: var(--g-3); }
.ag .ic svg { width: 15px; height: 15px; }
.ag .ic.big { width: 44px; height: 44px; border-radius: 12px; }
.ag .ic.big svg { width: 20px; height: 20px; }
.ag-row .t { flex: 1; min-width: 0; }
.ag .t b { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--g-1); }
.ag .t em { font-style: normal; height: 18px; padding: 0 6px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--g-8); font-size: 10.5px; line-height: 18px; color: var(--g-4); }
.ag-row p { margin: 3px 0 0; font-size: 12px; color: var(--g-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-row .st { flex: none; font-size: 11.5px; color: var(--g-5); white-space: nowrap; }
.ag.open .ag-row .st { display: none; }
.ag .tag { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--g-8); font-size: 11px; color: var(--green); }
.ag .tag svg { width: 11px; height: 11px; }
/* L'interrupteur d'un élément installé, allumé. */
.ag .sw { position: relative; flex: none; width: 46px; height: 26px; border-radius: 13px; background: #8FE39A; }
.ag .sw::after { content: ""; position: absolute; right: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
/* La fiche. */
.ag-det { display: none; flex: 1; min-width: 0; overflow: hidden; }
.ag.open .ag-det { display: block; animation: ln-in 260ms var(--ease) both; }
.ag .ag-inst { display: none; }
.ag.done .ag-cat { display: none; }
.ag.done .ag-inst { display: block; }
.ag-det .dh { display: flex; align-items: center; gap: 14px; height: 88px; padding: 0 28px; box-shadow: inset 0 -1px 0 var(--g-rule); }
.ag-det .dh .t { min-width: 0; }
.ag-det .dh p { margin: 3px 0 0; font-size: 12px; color: var(--g-4); }
.ag-det .db { padding: 6px 28px 40px; }
.ag-det small { display: block; height: 32px; margin-top: 6px; line-height: 32px; font-size: 11.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--g-6); }
.ag-det .db p { margin: 0 0 18px; font-size: 12.5px; line-height: 1.55; color: var(--g-2); }
.ag-det .prompt { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 12px 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--g-8); font-size: 13px; color: var(--g-1); }
.ag-det .prompt svg { flex: none; width: 16px; height: 16px; color: var(--g-5); }
.ag-det .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ag-det .chips span { display: flex; align-items: center; gap: 8px; min-width: 150px; height: 44px; white-space: nowrap; padding: 0 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--g-8); font-size: 13px; color: var(--g-1); }
.ag-det .chips span > svg { flex: none; width: 16px; height: 16px; }
.ag-det .chips span.off { opacity: .35; }
.ag-det .cfg span { display: flex; align-items: center; gap: 10px; height: 36px; }
.ag-det .cfg span > svg { flex: none; width: 14px; height: 14px; }
.ag-det .cfg code { font: 12.5px/1 var(--mono); color: var(--g-2); }
.ag-det .cfg i { margin-left: auto; height: 24px; padding: 0 9px; border-radius: 7px; box-shadow: inset 0 0 0 1px var(--g-6); font-style: normal; font-size: 11.5px; font-weight: 500; line-height: 24px; color: var(--g-1); }
.ag-det .src span { font-size: 12.5px; color: var(--g-6); }
/* Le cercle coché : blanc, la coche dans la couleur de la feuille. */
.ag-det .chips i, .ag-tiles i { flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-left: auto; border-radius: 50%; background: var(--g-1); color: #2C2C2E; }
.ag-det .chips i svg, .ag-tiles i svg { width: 10px; height: 10px; }
.ag .claude { color: #D97757; }
.ag .gemini { color: #4285F4; }
/* L'installation : un voile, la feuille, les agents en deux colonnes, Annuler / Confirmer. */
.ag-modal { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: opacity 200ms var(--ease), visibility 0s 200ms; }
.ag.modal .ag-modal { opacity: 1; visibility: visible; transition: opacity 200ms var(--ease); }
.ag-dialog { width: 540px; padding: 22px 24px 20px; border-radius: 16px; background: #2C2C2E; box-shadow: inset 0 0 0 1px var(--g-8), 0 20px 40px rgba(0,0,0,.6); transform: translateY(8px) scale(.98); transition: transform 250ms var(--ease); }
.ag.modal .ag-dialog { transform: none; }
.ag-dialog > b { display: block; font-size: 15px; font-weight: 600; color: var(--g-1); }
.ag-dialog > span { display: block; margin-top: 8px; font-size: 12.5px; color: var(--g-4); }
.ag-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.ag-tiles span { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--g-8); font-size: 13px; color: var(--g-1); transition: box-shadow 150ms, background-color 150ms; }
.ag-tiles span > svg { flex: none; width: 20px; height: 20px; }
.ag-tiles i { opacity: 0; transition: opacity 150ms; }
.ag-tiles small { margin-left: auto; font-size: 11px; color: var(--g-6); }
.ag-tiles small + i { margin-left: 0; }
.ag-tiles span.on { background: rgba(245,245,247,.05); box-shadow: inset 0 0 0 1.5px var(--g-1); }
.ag-tiles span.on i { opacity: 1; }
.ag-tiles span.off { opacity: .35; }
.ag-actions { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 18px; font-size: 12.5px; color: var(--g-3); }
.ag-actions > span:first-child { display: flex; align-items: center; gap: 4px; }
.ag-actions > span:first-child svg { width: 12px; height: 12px; }
.ag-actions .ok { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; border-radius: 9px; background: var(--g-8); font-weight: 500; color: var(--g-5); transition: background-color 150ms, color 150ms; }
.ag-actions .ok.ready { background: #55555A; color: var(--g-1); }
.ag-actions .ok.busy::before { content: ""; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid rgba(245,245,247,.3); border-top-color: var(--g-1); animation: spin .8s linear infinite; }
.ag .agent-cursor { z-index: 4; }

/* ---------------------------------------------------------------- La page Activité réseau
   Quatre jauges, la question à l'IA, les services en écoute ; la
   conversation s'ouvre à droite et la page se resserre. */
.gauges { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 18px; border-radius: 12px; background: #141416; box-shadow: inset 0 0 0 1px var(--g-rule); }
.gauge { padding: 14px 16px 12px; box-shadow: inset -1px 0 0 var(--g-rule); }
.gauge:last-child { box-shadow: none; }
.g-top { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--g-5); }
.g-top em { font-style: normal; color: var(--g-6); }
.gauge b { display: block; margin-top: 8px; font-size: 22px; font-weight: 700; color: var(--g-1); font-variant-numeric: tabular-nums; }
.gauge b small { font-size: 12px; font-weight: 500; color: var(--g-5); }
.spark { display: block; width: 100%; height: 28px; margin-top: 6px; overflow: visible; }
.spark path { fill: none; stroke: var(--g-2); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.g-bar { display: flex; gap: 2px; height: 4px; margin: 18px 0 10px; border-radius: 2px; background: #2A2A2D; overflow: hidden; }
.g-bar i { height: 100%; background: var(--g-5); }
.g-bar i.mine { background: var(--g-1); }
.gauge p { margin: 6px 0 0; font-size: 11px; color: var(--g-6); }
.act-ask { display: flex; align-items: center; gap: 10px; height: 46px; margin: 16px 0 14px; padding: 0 8px 0 16px; border-radius: 12px; background: #1C1C1E; box-shadow: inset 0 0 0 1px var(--g-rule); }
.act-ask .lens { font-size: 13px; color: var(--g-4); }
.act-ask .c-field { flex: 1; min-width: 0; font-size: 13.5px; }
.ask-btn { height: 30px; padding: 0 12px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--g-8); font-size: 12px; font-weight: 600; line-height: 30px; color: var(--g-4); white-space: nowrap; transition: background-color 200ms, color 200ms, transform 150ms; }
.ask-btn.on { background: var(--g-1); color: #000; box-shadow: none; }
.ask-btn.press { transform: scale(.94); }
.svc { border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--g-rule); }
.svc-r { display: grid; grid-template-columns: 1.3fr 1.2fr 1.4fr .8fr 1fr .7fr 72px; align-items: center; gap: 10px; height: 44px; padding: 0 16px; font-size: 12.5px; color: var(--g-3); box-shadow: inset 0 1px 0 var(--g-rule); transition: background-color 300ms var(--ease); }
.act.open .svc-r { grid-template-columns: 1.3fr 1.2fr 1fr .7fr 72px; }
.act.open .svc-r .dir, .act.open .svc-r .since { display: none; }
.svc-h { height: 38px; background: #141416; box-shadow: none; font-size: 11.5px; color: var(--g-6); }
.svc-r b { display: block; font-size: 13px; color: var(--g-1); }
.svc-r em { display: block; font-style: normal; font-size: 11px; color: var(--g-6); }
.svc-r .port { color: var(--g-2); }
.svc-r .dir { font: 500 11.5px/1.2 var(--mono); color: var(--g-5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-r .stop { justify-self: end; height: 24px; padding: 0 9px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--g-8); font-size: 11px; line-height: 24px; color: var(--g-4); }
.svc-r.hot { background: rgba(255,255,255,.05); }
.cpu { display: flex; align-items: center; gap: 8px; }
.cpu i { position: relative; width: 40px; height: 4px; border-radius: 2px; background: #2A2A2D; overflow: hidden; }
.cpu i::after { content: ""; position: absolute; inset: 0; background: var(--g-3); transform-origin: 0 50%; transform: scaleX(var(--v, .2)); transition: transform 600ms var(--ease); }
.cpu em { font-size: 12px; color: var(--g-3); }
.svc-g { display: flex; align-items: center; height: 30px; padding: 0 16px; background: #111113; box-shadow: inset 0 1px 0 var(--g-rule); font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--g-5); }
.act-convo { width: 0; flex: none; display: flex; flex-direction: column; gap: 12px; opacity: 0; overflow: hidden; background: #0F0F11; box-shadow: inset 1px 0 0 var(--g-rule); transition: width 450ms var(--ease), opacity 300ms var(--ease); }
.act.open .act-convo { width: 400px; opacity: 1; }
.act-convo > * { flex: none; min-width: 360px; margin: 0 20px; }
.ac-top { display: flex; align-items: center; justify-content: space-between; min-width: 400px; height: 52px; margin: 0; padding: 0 20px; box-shadow: inset 0 -1px 0 var(--g-rule); font-size: 13.5px; color: var(--g-4); }
.ac-top b { color: var(--g-1); }
.act-convo .c-user { align-self: flex-end; min-width: 0; margin-top: 6px; font-size: 13px; }
.ac-think, .ac-meta { font-size: 12px; color: var(--g-5); opacity: 0; transition: opacity 250ms var(--ease); }
.ac-think.on, .ac-meta.on { opacity: 1; }
.act-convo .c-ans { font-size: 13px; }
.c-ans .w { opacity: 0; transition: opacity 160ms var(--ease); }
.c-ans .w.on { opacity: 1; }

/* ---------------------------------------------------------------- La capture (ScreenCaptureModule, CaptureDockView, CaptureEditor)
   La page Lumen et un volet Claude Code dans Plume. ⌘⇧5 : le voile, la zone
   et ses poignées, la barre. La vignette entre au dock ; un clic l'ouvre
   dans l'éditeur, où l'on annote ; on la glisse ensuite dans Claude Code. */
.cap { overflow: hidden; border-radius: 14px; background: radial-gradient(80% 70% at 50% 0%, #1A1A1E, #0B0B0D 70%); box-shadow: inset 0 0 0 1px var(--line); }
.cap-win { position: absolute; left: 28px; top: 28px; width: 640px; height: 440px; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: #F4F3EF; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 30px 70px -20px rgba(0,0,0,.9); }
.cap-plume { position: absolute; left: 690px; top: 28px; width: 462px; height: 440px; display: flex; flex-direction: column; }
.cap-band { flex: none; position: relative; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; color: var(--g-4); }
.cap-band .lights { left: 12px; gap: 6px; }
.cap-band .lights i { width: 10px; height: 10px; }
.cap-plume .pane { flex: 1; min-height: 0; margin: 0 8px 8px; }
.cap-plume .term .img { font-weight: 700; color: var(--g-1); }
.cap-plume .term .ln { white-space: pre-wrap; }
.cap-in [data-cap-img] { display: none; }
.cap-in.on [data-cap-img] { display: inline; }
/* Au-dessus du volet, pendant qu'on y glisse la capture : le liseré orange de l'app. */
.cap-drop { position: absolute; inset: 4px; z-index: 3; border-radius: 10px; box-shadow: inset 0 0 0 2px #E8833A; background: rgba(232,131,58,.08); opacity: 0; transition: opacity 120ms ease-out; pointer-events: none; }
.cap-drop.on { opacity: 1; }
/* Le voile, la zone : liseré blanc dedans, noir dehors, huit poignées, la taille dessous. */
.cap-sel { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 5; box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgba(0,0,0,.5), 0 0 0 9999px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity 130ms ease-out; }
.cap-sel.on { opacity: 1; }
.cap-sel > i { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.5); }
.cap-sel > i:nth-child(1) { left: 0; top: 0; }
.cap-sel > i:nth-child(2) { left: 50%; top: 0; }
.cap-sel > i:nth-child(3) { left: 100%; top: 0; }
.cap-sel > i:nth-child(4) { left: 100%; top: 50%; }
.cap-sel > i:nth-child(5) { left: 100%; top: 100%; }
.cap-sel > i:nth-child(6) { left: 50%; top: 100%; }
.cap-sel > i:nth-child(7) { left: 0; top: 100%; }
.cap-sel > i:nth-child(8) { left: 0; top: 50%; }
.cap-dim { position: absolute; left: 50%; top: calc(100% + 8px); height: 24px; padding: 0 11px; border-radius: 6px; transform: translateX(-50%); background: rgba(0,0,0,.72); color: #fff; font: 500 11px/24px var(--sans); white-space: pre; }
/* La barre de capture : six modes, les options, « Capture », fermer. */
.cap-bar {
  position: absolute; left: 50%; bottom: 22px; z-index: 6; display: flex; align-items: center; gap: 4px; padding: 9px 10px; border-radius: 18px;
  background: rgba(44,44,48,.82); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 6px 18px rgba(0,0,0,.28); color: #fff;
  opacity: 0; transform: translate(-50%, 10px); transition: opacity 130ms ease-out, transform 130ms ease-out; pointer-events: none;
}
.cap-bar.on { opacity: 1; transform: translate(-50%, 0); }
.cap-bar .m { display: grid; place-items: center; width: 52px; height: 44px; border-radius: 11px; }
.cap-bar .m svg { width: 17px; height: 17px; }
.cap-bar .m.on { background: #000; }
.cap-bar .sep { width: 1px; height: 34px; margin: 0 6px; background: rgba(255,255,255,.12); }
.cap-bar .opt { display: grid; place-items: center; width: 38px; height: 44px; border-radius: 11px; color: var(--g-5); }
.cap-bar .opt svg { width: 14px; height: 14px; }
.cap-bar .go { padding: 9px 16px; border-radius: 17px; background: #000; font-size: 12px; font-weight: 600; transition: transform 150ms var(--ease); }
.cap-bar .go.press { transform: scale(.92); }
/* Le dock, en bas au centre, déplié : ‹ les vignettes ›, la corbeille, la poignée. */
.cap-dock {
  position: absolute; left: 50%; bottom: 18px; z-index: 6; display: flex; align-items: center; gap: 8px; height: 88px; padding: 0 10px 0 12px; border-radius: 26px;
  background: linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.02)), rgba(0,0,0,.55); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 6px 16px rgba(0,0,0,.35);
  opacity: 0; transform: translate(-50%, 10px); transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.cap-dock.on { opacity: 1; transform: translate(-50%, 0); }
.cap-dock .nav { display: grid; place-items: center; width: 16px; height: 44px; color: #fff; opacity: .38; }
.cap-dock .nav svg { width: 11px; height: 11px; }
.cap-dock .row { display: flex; gap: 10px; }
.cap-dock .dv { width: 1px; height: 44px; margin: 0 4px; background: rgba(255,255,255,.22); }
.cap-dock .bin { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: rgba(255,255,255,.8); }
.cap-dock .bin svg { width: 12px; height: 12px; }
.cap-dock .grip { width: 15px; height: 25px; opacity: .75; background: radial-gradient(circle, #fff 1.4px, transparent 1.9px) 0 0 / 10px 10px; }
/* Une vignette : 96 × 64, bord blanc, sans ombre. */
.th { position: relative; flex: none; width: 96px; height: 64px; border-radius: 9px; overflow: hidden; background: #1E1E1E; }
.th::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.75); }
.th.pick::after { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.95); }
.th.code { background: #1E1E1E linear-gradient(#FF8A7E, #FF8A7E) 10px 12px / 22px 3px no-repeat; }
.th.code::before { content: ""; position: absolute; left: 10px; top: 20px; width: 60px; height: 34px; background: linear-gradient(#93B7F2, #93B7F2) 0 0 / 46px 3px no-repeat, linear-gradient(#D1D1D6, #D1D1D6) 8px 8px / 52px 3px no-repeat, linear-gradient(#86DB79, #86DB79) 8px 16px / 36px 3px no-repeat, linear-gradient(#D1D1D6, #D1D1D6) 0 24px / 40px 3px no-repeat; }
.th.page { background: #FFFFFF linear-gradient(#EDEDF0, #EDEDF0) 0 0 / 100% 12px no-repeat; }
.th.page::before { content: ""; position: absolute; left: 10px; top: 20px; width: 76px; height: 36px; background: linear-gradient(#1C1C1E, #1C1C1E) 0 0 / 40px 6px no-repeat, linear-gradient(#C7C7CC, #C7C7CC) 0 12px / 60px 3px no-repeat, linear-gradient(#0A84FF, #0A84FF) 0 22px / 26px 10px no-repeat; }
.th.shot { background: #F4F3EF; }
.th .blur { position: absolute; inset: 0; overflow: hidden; filter: blur(6px); opacity: .35; }
.th.fly { position: absolute; left: 0; top: 0; z-index: 9; transform-origin: 0 0; transition: transform 900ms var(--ease); box-shadow: 0 12px 26px rgba(0,0,0,.45); }
/* L'éditeur : une fenêtre du Mac, titre et taille, la barre d'outils, la capture sur son fond. */
.cap-ed { position: absolute; left: 150px; top: 36px; width: 880px; height: 470px; z-index: 7; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: #1E1E1E; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 30px 80px rgba(0,0,0,.7); opacity: 0; transform: scale(.96); transition: opacity 200ms var(--ease), transform 200ms var(--ease); pointer-events: none; }
.cap-ed.on { opacity: 1; transform: none; }
.ed-title { position: relative; flex: none; height: 40px; display: grid; place-items: center; background: #2A2A2A; text-align: center; }
.ed-title .lights { left: 14px; top: 50%; gap: 7px; transform: translateY(-50%); }
.ed-title .lights i { width: 11px; height: 11px; }
.ed-title b { display: block; font-size: 12.5px; font-weight: 600; color: var(--g-2); }
.ed-title small { display: block; font-size: 10.5px; color: var(--g-6); }
.ed-tools { flex: none; height: 44px; display: flex; align-items: center; gap: 4px; padding: 0 12px; background: #2A2A2A; box-shadow: inset 0 -1px 0 #111; }
.ed-tools i { display: grid; place-items: center; width: 30px; height: 26px; border-radius: 6px; background: rgba(255,255,255,.08); color: var(--g-2); transition: background-color 150ms, color 150ms; }
.ed-tools i svg { width: 14px; height: 14px; }
.ed-tools i.on { background: #0A84FF; color: #fff; }
.ed-tools .dv { width: 1px; height: 18px; margin: 0 4px; background: var(--g-8); }
.ed-tools .col b { width: 16px; height: 16px; border-radius: 50%; background: #E0322A; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.ed-tools .thick b { width: 14px; height: 3px; border-radius: 1.5px; background: var(--g-2); }
.ed-tools .sp { flex: 1; }
.ed-tools .save { display: none; place-items: center; height: 26px; margin-left: 4px; padding: 0 12px; border-radius: 6px; background: #0A84FF; color: #fff; font-size: 12.5px; font-weight: 600; transition: transform 150ms var(--ease); }
.ed-tools .save.on { display: grid; }
.ed-tools .save.press { transform: scale(.94); }
.ed-canvas { flex: 1; min-height: 0; display: grid; place-items: center; background: #161616; }
.ed-img { position: relative; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
/* Les annotations : rouge, 3 pt, flèche à tête ouverte, texte gras ombré. */
.ann { position: absolute; left: 0; top: 0; overflow: visible; fill: none; stroke: #E0322A; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ann text { fill: #E0322A; stroke: none; font: 700 16px/1 var(--sans); filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.ann .arr { transition: stroke-dashoffset 600ms var(--ease); }
.ann .head { opacity: 0; transition: opacity 120ms; }
.ann .head.on { opacity: 1; }
/* Le pointeur du Mac, qui fait les gestes de la démo. */
.cap-cur { position: absolute; left: 0; top: 0; z-index: 10; width: 22px; height: 22px; color: #000; opacity: 0; transition: transform 700ms var(--ease), opacity 200ms; pointer-events: none; }
.cap-cur.on { opacity: 1; }
.cap-cur svg { width: 22px; height: 22px; }
.cap-cur::after { content: ""; position: absolute; left: -7px; top: -7px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); opacity: 0; transform: scale(.4); }
.cap-cur.click::after { animation: ripple 420ms var(--ease); }