/* ============================================================================
   02 Forensics — la toile du moodboard.
   Aucune valeur brute : tout vient de `tokens.css`. Seules la position et la
   taille des cartes, et la transformation de la vue, sont posées en ligne par
   le JS : ce sont des géométries, pas des choix de style.
   ========================================================================= */
.fx{
  position:relative;display:flex;flex-direction:column;
  block-size:calc(100dvh - var(--appbar-h,52px) - var(--s-4) - var(--s-5));
  min-block-size:420px;
}
.fx__barre{
  position:absolute;z-index:3;inset-block-start:var(--s-3);inset-inline-start:var(--s-3);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);
  padding:var(--s-1);border-radius:var(--radius-lg);
  background:var(--popover);border:1px solid var(--border);box-shadow:var(--shadow-md);
}
.fx__g{box-shadow:none}
.fx__zoom{min-inline-size:4.5em;font-size:var(--t-2xs)}
.fx__tout{gap:var(--s-1)}

.fx__toile{
  position:relative;flex:1;min-block-size:0;overflow:hidden;
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background-color:var(--card);
  background-image:radial-gradient(circle,var(--border-strong) 1px,transparent 1.2px);
  cursor:default;touch-action:none;
}
.fx__toile:focus-visible{outline-offset:-2px}
.fx__toile.is-pan,.fx__toile.is-main,.fx__toile[data-outil="main"]{cursor:grab}
.fx__toile.is-pan{cursor:grabbing}
.fx__toile[data-outil="note"],.fx__toile[data-outil="lien"],.fx__toile[data-outil="fleche"]{cursor:crosshair}
.fx__toile.is-depot{box-shadow:inset 0 0 0 2px var(--ring)}
.fx__monde{position:absolute;inset-block-start:0;inset-inline-start:0;transform-origin:0 0}
/* Les flèches passent PAR-DESSUS les cartes : une flèche entre deux cartes
   qui se chevauchent doit rester visible. Seule leur zone de clic capte le
   pointeur. */
.fx__fleches{position:absolute;z-index:2147483000;inset-block-start:0;inset-inline-start:0;inline-size:1px;block-size:1px;overflow:visible;pointer-events:none}
.fx__fleches marker path{fill:var(--soft-foreground)}
.fx-fl__l{fill:none;stroke:var(--soft-foreground);stroke-width:2}
.fx-fl__hit{fill:none;stroke:transparent;stroke-width:14;pointer-events:stroke;cursor:pointer}
.fx-fl.is-sel .fx-fl__l{stroke:var(--ring);stroke-width:2.5}

.fx__vide{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s-1);padding:var(--s-6);text-align:center;pointer-events:none;
  font-size:var(--t-sm);color:var(--muted-foreground);
}
.fx__vide b{color:var(--foreground);font-weight:600}
.fx__msg{
  position:absolute;z-index:3;inset-block-end:var(--s-3);inset-inline-start:50%;transform:translateX(-50%);
  margin:0;padding:var(--s-2) var(--s-3);border-radius:var(--radius-md);
  font-size:var(--t-xs);color:var(--primary-foreground);background:var(--primary);box-shadow:var(--shadow-md);
}
.fx__msg.is-bad{background:var(--danger-fill);color:var(--on-fill)}

/* --- les cartes --- */
.fx-it{
  position:absolute;display:flex;flex-direction:column;
  border-radius:var(--radius-md);background:var(--card);
  border:1px solid var(--border);box-shadow:var(--shadow-sm);
  cursor:move;user-select:none;
}
.fx__toile[data-outil="fleche"] .fx-it{cursor:crosshair}
.fx-it.is-sel{border-color:var(--ring);box-shadow:0 0 0 2px var(--ring),var(--shadow-md)}
.fx-it.is-source{box-shadow:0 0 0 2px var(--ring);border-style:dashed}
.fx-it__poignee{
  position:absolute;inset-block-end:-5px;inset-inline-end:-5px;inline-size:12px;block-size:12px;
  border-radius:var(--radius-sm);background:var(--card);border:1.5px solid var(--ring);
  cursor:nwse-resize;opacity:0;
}
.fx-it.is-sel .fx-it__poignee,.fx-it:hover .fx-it__poignee{opacity:1}

.fx-note{background:color-mix(in oklab,var(--f-uap) 16%,var(--card));padding:var(--s-3)}
.fx-note__t{flex:1;overflow:hidden;font-size:var(--t-sm);line-height:var(--lh-snug);white-space:pre-wrap;overflow-wrap:anywhere}
.fx-note__ta{
  flex:1;resize:none;font:inherit;font-size:var(--t-sm);line-height:var(--lh-snug);
  color:var(--foreground);background:transparent;border:0;padding:0;
}
.fx-note__ta:focus-visible{outline:none}
.fx-vide{color:var(--muted-foreground);font-style:italic}

.fx-link{padding:var(--s-3);gap:var(--s-1);overflow:hidden}
.fx-lien__t{font-size:var(--t-sm);font-weight:600;line-height:var(--lh-snug);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-lien__d{font-size:var(--t-2xs);color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-lien__a{
  margin-block-start:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:var(--s-1);
  font-size:var(--t-2xs);color:var(--ring);text-decoration:none;cursor:pointer;
}
.fx-lien__a:hover{text-decoration:underline}
.fx-form{display:flex;flex-direction:column;gap:var(--s-1)}
.fx-form input,.fx-img__leg{
  inline-size:100%;min-block-size:var(--tap-min);padding:0 var(--s-2);
  font:inherit;font-size:var(--t-xs);color:var(--foreground);
  background:var(--card);border:1px solid var(--input);border-radius:var(--radius-sm);
}

.fx-image{padding:0;overflow:hidden;background:var(--muted)}
.fx-image img{flex:1;min-block-size:0;inline-size:100%;object-fit:cover;display:block;pointer-events:none}
.fx-image span.fx-img__leg,.fx-image input.fx-img__leg{
  flex:none;border:0;border-radius:0;border-block-start:1px solid var(--border);
  display:block;padding:var(--s-1) var(--s-2);min-block-size:0;
  font-size:var(--t-2xs);color:var(--soft-foreground);background:var(--card);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.fx-hors .btn{margin-block-start:var(--s-4)}