/* =============================================================================
   fetcher.css - Vue « Agent fetcher » (couche GEO, Prompt 10)
   Registre : décideur/dev, dense mais lisible. Anti-fouillis : une carte = une
   idée ; les previews sont repliées par défaut (<details>).
   ========================================================================== */

.fetch-view {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--rs-sp-5);
}

/* --- En-tête ---------------------------------------------------------------- */
.fetch-hero {
  background: linear-gradient(135deg, var(--rs-secondary) 0%, var(--rs-secondary-700) 100%);
  color: #fff;
  border-radius: var(--rs-radius-lg);
  padding: var(--rs-sp-6);
}
.fetch-hero__kicker { font-size: var(--rs-fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--rs-dev-accent); font-weight: 700; }
.fetch-hero__title { font-size: var(--rs-fs-2xl); margin: var(--rs-sp-2) 0; display: inline-flex; align-items: center; gap: var(--rs-sp-2); line-height: 1.15; }
.fetch-hero__lead { font-size: var(--rs-fs-md); color: rgba(255, 255, 255, 0.85); line-height: 1.6; max-width: 64ch; margin: 0; }

/* --- Cartes ----------------------------------------------------------------- */
.fetch-card {
  background: var(--rs-surface);
  border-radius: var(--rs-radius-lg);
  padding: var(--rs-sp-5);
  box-shadow: var(--rs-shadow-sm);
}
.fetch-card__head { display: flex; align-items: center; gap: var(--rs-sp-2); margin-bottom: var(--rs-sp-2); }
.fetch-card__title { font-size: var(--rs-fs-lg); color: var(--rs-secondary); margin: 0; }
.fetch-card__lead { font-size: var(--rs-fs-sm); color: var(--rs-ink-soft); line-height: 1.6; margin: 0 0 var(--rs-sp-4); max-width: 72ch; }

/* --- Encart découverte (mise en avant) ------------------------------------- */
.fetch-discovery { background: linear-gradient(180deg, var(--rs-main-100) 0%, var(--rs-surface) 60%); }
.fetch-disco-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rs-sp-3); }
.fetch-disco { display: flex; gap: var(--rs-sp-3); align-items: flex-start; font-size: var(--rs-fs-sm); color: var(--rs-ink); line-height: 1.55; }
.fetch-disco__bullet { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--rs-radius-pill); background: var(--rs-surface-2); color: var(--rs-muted); font-weight: 700; font-size: var(--rs-fs-xs); }
.fetch-disco--d { font-weight: 600; }
.fetch-disco--d .fetch-disco__bullet { background: var(--rs-main); color: #fff; }

/* --- Signaux de découverte (grille 4) -------------------------------------- */
.fetch-signals { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--rs-sp-3); }
.fetch-signal { border: 1px solid var(--rs-line); border-radius: var(--rs-radius); padding: var(--rs-sp-3); background: var(--rs-surface-2); }
.fetch-signal__top { display: flex; align-items: center; gap: var(--rs-sp-2); margin-bottom: var(--rs-sp-2); }
.fetch-signal__num { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--rs-radius-pill); background: var(--rs-secondary); color: #fff; font-weight: 700; font-size: var(--rs-fs-xs); }
.fetch-signal__label { font-weight: 700; font-size: var(--rs-fs-sm); color: var(--rs-secondary); }
.fetch-signal__probe { margin-left: auto; font-size: var(--rs-fs-xs); font-weight: 700; padding: 2px 8px; border-radius: var(--rs-radius-pill); background: var(--rs-mock-bg); color: var(--rs-mock); }
.fetch-signal__probe.is-ok { background: var(--rs-live-bg); color: var(--rs-live); }
.fetch-signal__probe.is-na { background: var(--rs-cached-bg); color: var(--rs-cached); }
.fetch-signal__code { display: block; font-family: var(--rs-mono); font-size: var(--rs-fs-xs); color: var(--rs-ink-soft); word-break: break-all; line-height: 1.5; }

/* --- Artefacts (liste repliable) ------------------------------------------- */
.fetch-arts { display: flex; flex-direction: column; gap: var(--rs-sp-2); }
.fetch-art { border: 1px solid var(--rs-line); border-radius: var(--rs-radius); overflow: hidden; background: var(--rs-surface); }
.fetch-art[open] { box-shadow: var(--rs-shadow-sm); }
.fetch-art__sum { display: flex; align-items: center; gap: var(--rs-sp-3); padding: var(--rs-sp-3); cursor: pointer; list-style: none; }
.fetch-art__sum::-webkit-details-marker { display: none; }
.fetch-art__sum::before { content: "▸"; color: var(--rs-muted); transition: transform 0.18s ease; flex: none; }
.fetch-art[open] .fetch-art__sum::before { transform: rotate(90deg); }
.fetch-art__left { display: flex; align-items: center; gap: var(--rs-sp-2); min-width: 0; flex: 1; }
.fetch-art__star { color: var(--rs-accent); }
.fetch-art__label { font-family: var(--rs-mono); font-size: var(--rs-fs-sm); color: var(--rs-ink); word-break: break-all; }
.fetch-art__right { display: flex; align-items: center; gap: var(--rs-sp-2); margin-left: auto; flex: none; }
.fetch-art__body { padding: 0 var(--rs-sp-3) var(--rs-sp-3); }
.fetch-art__tools { display: flex; gap: var(--rs-sp-2); margin-bottom: var(--rs-sp-2); }
.fetch-art__pre { max-height: 360px; overflow: auto; margin: 0; white-space: pre-wrap; }

/* --- Badges de statut ------------------------------------------------------ */
.fetch-badge { font-size: var(--rs-fs-xs); font-weight: 700; padding: 2px 10px; border-radius: var(--rs-radius-pill); white-space: nowrap; border: 1px solid transparent; }
.fetch-badge--consumed      { background: var(--rs-live-bg);  color: var(--rs-live);   border-color: var(--rs-live); }
.fetch-badge--best_practice { background: var(--rs-main-100); color: var(--rs-main-600); border-color: var(--rs-main); }
.fetch-badge--standard      { background: #e4ecfb;            color: #2563eb;          border-color: #2563eb; }
.fetch-badge--proposed      { background: var(--rs-rag-bg);   color: var(--rs-rag);    border-color: var(--rs-rag); }
.fetch-badge--emerging      { background: var(--rs-cached-bg); color: var(--rs-cached); border-color: var(--rs-cached); }
.fetch-badge--legacy        { background: var(--rs-mock-bg);  color: var(--rs-mock);   border-color: var(--rs-mock); }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 720px) {
  .fetch-signals { grid-template-columns: 1fr; }
  .fetch-hero { padding: var(--rs-sp-5); }
  .fetch-hero__title { font-size: var(--rs-fs-xl); }
  .fetch-art__right { width: 100%; margin-left: 30px; }
}

/* =============================================================================
   Visualiseur OKF (Prompt 10B) : graphe live + rendu markdown
   ========================================================================== */
.fetch-okf__badges { display: flex; flex-wrap: wrap; gap: var(--rs-sp-2); align-items: center; margin-bottom: var(--rs-sp-2); }
.fetch-okf__local {
  font-size: var(--rs-fs-xs); color: var(--rs-live); background: var(--rs-live-bg);
  border-radius: var(--rs-radius-pill); padding: 2px 10px; font-weight: 600;
}
.fetch-okf__warn {
  font-size: var(--rs-fs-xs); color: var(--rs-muted); font-style: italic;
  background: var(--rs-surface-2); border-radius: var(--rs-radius-sm);
  padding: var(--rs-sp-2) var(--rs-sp-3); margin: var(--rs-sp-2) 0;
}
.fetch-okf__layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rs-sp-3); margin-top: var(--rs-sp-3); align-items: start; }
.fetch-okf__graphcol { display: flex; flex-direction: column; gap: var(--rs-sp-2); }
.fetch-okf__graph {
  min-height: 400px; height: 400px; border: 1px solid var(--rs-line);
  border-radius: var(--rs-radius-sm); background: #fbfcfe; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: var(--rs-muted); font-size: var(--rs-fs-sm);
}
/* Légende « couleur = type du frontmatter » + compteur de nœuds/arêtes. */
.fetch-okf__legend { display: flex; flex-wrap: wrap; gap: 6px var(--rs-sp-3); align-items: center; }
.fetch-okf__legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: var(--rs-fs-xs); color: var(--rs-ink-soft); text-transform: capitalize; }
.fetch-okf__legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.fetch-okf__legend-cap { flex-basis: 100%; font-size: var(--rs-fs-xs); color: var(--rs-muted); font-style: italic; }
.fetch-okf__stats { margin: 0; font-size: var(--rs-fs-xs); color: var(--rs-muted); font-weight: 600; }

/* Colonne droite : explication pédagogique épinglée + visionneuse de doc défilante. */
.fetch-okf__preview {
  display: flex; flex-direction: column;
  min-height: 400px; max-height: 460px;
  border: 1px solid var(--rs-line); border-radius: var(--rs-radius-sm);
  background: var(--rs-surface);
}
.fetch-okf__intro {
  flex: 0 0 auto; padding: var(--rs-sp-3);
  background: var(--rs-surface-2); border-bottom: 1px solid var(--rs-line);
  border-radius: var(--rs-radius-sm) var(--rs-radius-sm) 0 0;
}
.fetch-okf__intro-title { margin: 0 0 6px; font-size: var(--rs-fs-sm); font-weight: 700; color: var(--rs-secondary); }
.fetch-okf__intro-p { margin: 0 0 6px; font-size: var(--rs-fs-xs); line-height: 1.5; color: var(--rs-ink-soft); }
.fetch-okf__intro-p:last-child { margin-bottom: 0; }
.fetch-okf__doc { flex: 1 1 auto; overflow: auto; padding: var(--rs-sp-3); }
.fetch-okf__preview-hint { color: var(--rs-muted); font-size: var(--rs-fs-sm); }
.fetch-okf__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--rs-sp-2); }
.fetch-okf__tag { font-size: var(--rs-fs-xs); color: var(--rs-main-600); background: var(--rs-surface-2); border-radius: var(--rs-radius-pill); padding: 1px 8px; }
.fetch-okf__desc { margin: 0 0 var(--rs-sp-2); font-size: var(--rs-fs-sm); font-style: italic; color: var(--rs-ink-soft); }
.fetch-okf__meta { font-size: var(--rs-fs-xs); color: var(--rs-muted); }
/* Lien INTERNE au bundle (navigue dans le graphe) vs lien externe (ouvre le fichier). */
.fetch-okf__md a.fetch-okf__xlink { font-weight: 600; text-decoration-style: dotted; cursor: pointer; }
.fetch-okf__preview-file { display: flex; flex-wrap: wrap; gap: var(--rs-sp-2); align-items: center; margin-bottom: var(--rs-sp-2); }
.fetch-okf__preview-file code { font-family: var(--rs-mono); font-size: var(--rs-fs-xs); color: var(--rs-ink-soft); }
.fetch-okf__type {
  font-size: var(--rs-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  border-radius: var(--rs-radius-pill); padding: 1px 8px; color: #fff; background: var(--rs-muted);
}
.fetch-okf__type--index { background: #6b53d6; }
.fetch-okf__type--guide { background: #1f8a70; }
.fetch-okf__type--concept { background: #2563eb; }
.fetch-okf__type--faq { background: #c2410c; }
.fetch-okf__type--scope { background: var(--rs-cached); color: var(--rs-ink); }
.fetch-okf__md { font-size: var(--rs-fs-sm); line-height: 1.5; color: var(--rs-ink); }
.fetch-okf__md h2 { font-size: var(--rs-fs-md); margin: var(--rs-sp-3) 0 var(--rs-sp-1); color: var(--rs-secondary); }
.fetch-okf__md h2.fetch-okf__doc-title { font-size: var(--rs-fs-lg); margin: 0 0 var(--rs-sp-2); }
.fetch-okf__md p, .fetch-okf__md li { margin: 0 0 6px; }
.fetch-okf__md blockquote { margin: var(--rs-sp-2) 0; padding: var(--rs-sp-2) var(--rs-sp-3); background: var(--rs-surface-2); border-radius: var(--rs-radius-sm); color: var(--rs-ink-soft); }
.fetch-okf__md a { color: var(--rs-main-600); }
.fetch-okf__md code { font-family: var(--rs-mono); font-size: 0.92em; background: var(--rs-surface-2); padding: 1px 4px; border-radius: 3px; }
.fetch-okf__err, .fetch-okf__offline { color: var(--rs-muted); font-size: var(--rs-fs-sm); text-align: center; padding: var(--rs-sp-4); }
@media (max-width: 760px) { .fetch-okf__layout { grid-template-columns: 1fr; } }