/* ==========================================================================
   D3 GRAPH — Styles de l'onglet « Graphe interactif »
   ========================================================================== */

/* ---- Barre d'outils ---- */

.d3-toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 4px var(--sp-4);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-secondary);
    flex-shrink: 0;
    min-height: 32px;
}

.d3-toolbar-info {
    flex: 1;
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
    color: var(--text-tertiary);
}

.d3-search {
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
    padding: 3px 8px 3px 24px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-primary)
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238b949e'><path d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/></svg>")
        no-repeat 6px 50% / 12px 12px;
    color: var(--text-primary);
    outline: none;
    width: 170px;
    transition: border-color var(--t-fast);
}

.d3-search:focus {
    border-color: var(--accent);
}

.d3-search::placeholder {
    color: var(--text-tertiary);
}

/* ---- Conteneur du canvas ---- */

.d3-graph-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: var(--bg-primary);
    background-image: radial-gradient(
        circle,
        var(--border-subtle) 1.5px,
        transparent 1.5px
    );
    background-size: 28px 28px;
}

.d3-graph-svg {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.d3-graph-svg:active {
    cursor: grabbing;
}

/* ---- Flèches ---- */

.d3-arrow-head {
    fill: var(--accent);
    opacity: 0.7;
}

/* ---- Arêtes ---- */

.d3-link {
    stroke: var(--accent);
    stroke-width: 1.5px;
    stroke-opacity: 0.55;
    fill: none;
    pointer-events: none;
    transition: stroke-opacity var(--t-fast), stroke-width var(--t-fast);
}

.d3-link.d3-dimmed  { stroke-opacity: 0.08; }
.d3-link.d3-active  { stroke-opacity: 1; stroke-width: 2.5px; }

/* ---- Labels d'arêtes ---- */

.d3-edge-label {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    fill: var(--text-tertiary);
    pointer-events: none;
    user-select: none;
    paint-order: stroke;
    stroke: var(--bg-primary);
    stroke-width: 3px;
    stroke-linejoin: round;
    transition: opacity var(--t-fast);
}

.d3-edge-label.d3-dimmed { opacity: 0.15; }

/* ---- Nœuds ---- */

.d3-node {
    cursor: grab;
    transition: opacity var(--t-fast);
}

.d3-node:active { cursor: grabbing; }

.d3-node-bg {
    fill: var(--bg-secondary);
    stroke: var(--border-default);
    stroke-width: 1.5px;
    transition: stroke var(--t-fast), stroke-width var(--t-fast), filter var(--t-fast);
}

.d3-node-id {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    fill: var(--accent);
    letter-spacing: 0.04em;
    pointer-events: none;
    user-select: none;
}

.d3-node-label {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    fill: var(--text-primary);
    pointer-events: none;
    user-select: none;
    paint-order: stroke;
    stroke: var(--bg-primary);
    stroke-width: 3px;
    stroke-linejoin: round;
}

/* Variantes de forme — on conserve un cercle mais on change le remplissage/contour */
.d3-node.d3-shape-diamond  .d3-node-bg { fill: var(--accent-soft); stroke-dasharray: 4 3; }
.d3-node.d3-shape-cylinder .d3-node-bg { stroke-width: 2.5px; stroke-dasharray: 1 2; }
.d3-node.d3-shape-hexagon  .d3-node-bg { stroke-width: 2.5px; }
.d3-node.d3-shape-circle   .d3-node-bg { fill: var(--accent-soft); }
.d3-node.d3-shape-stadium  .d3-node-bg { stroke-width: 2.5px; }

/* ---- États : hover / focus ---- */

.d3-node.d3-dimmed             { opacity: 0.22; }
.d3-node.d3-dimmed .d3-node-bg { filter: grayscale(0.6); }

.d3-node.d3-active .d3-node-bg {
    stroke: var(--accent);
    stroke-width: 3px;
    filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.55));
}

/* ---- Nœud épinglé (fx/fy fixés) ---- */

.d3-node.d3-pinned .d3-node-bg {
    stroke-dasharray: 2 2;
}

/* ---- Recherche ---- */

.d3-node.d3-search-hit .d3-node-bg {
    stroke: var(--warning);
    stroke-width: 3px;
    filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.55));
}
.d3-node.d3-search-miss { opacity: 0.18; }