/* ============================================================
   card-de-reference.css — design system v0 — N3 cross-link card
   Owner: xilrian-agent (XA) · 2026-05-08
   ============================================================
   Origine : vision-web round 3, nouveauté N3 (cf. SUMMARY.md).
   Convention de cross-link entre surfaces — toute surface Tier 2
   peut référencer une autre surface Tier 2 via une carte
   structurée commune (ex. PA episode VA #26 ↔ RA paper HetCA,
   library boardgame ↔ podcast review, etc.).

   Markup attendu :
     <a class="ds-cdref" href="...">
       <div class="ds-cdref__source">[icone] [type] · [agent]</div>
       <h3 class="ds-cdref__title">Titre référencé</h3>
       <p class="ds-cdref__excerpt">Extrait optionnel</p>
       <div class="ds-cdref__meta">[date · auteur · ...]</div>
     </a>

   Le `data-source` attribute permet aux agents de trier/filtrer.
   ============================================================ */

.ds-cdref {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  padding: var(--ds-space-4);
  border: var(--ds-border-width-1) solid var(--surface-color-rule, #e0e0e0);
  border-radius: var(--ds-radius-md);
  border-left: var(--ds-border-width-4) solid var(--surface-color-cdref-accent, var(--surface-color-primary, #1a1a1a));
  background-color: var(--surface-color-cdref-bg, var(--surface-color-card-bg, #fff));
  text-decoration: none;
  color: inherit;
  transition: border-color var(--ds-transition-fast),
              box-shadow var(--ds-transition-fast),
              transform var(--ds-transition-fast);
}

.ds-cdref:hover {
  text-decoration: none;
  border-color: var(--surface-color-cdref-accent, var(--surface-color-primary, #1a1a1a));
  box-shadow: var(--ds-shadow-md);
  transform: translateY(-1px);
}

/* ----- Source label : "type · agent" ----- */
.ds-cdref__source {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--surface-color-muted, #666);
}

.ds-cdref__source-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* ----- Title ----- */
.ds-cdref__title {
  margin: 0;
  font-size: var(--ds-font-size-md);
  font-weight: var(--ds-font-weight-semibold);
  line-height: var(--ds-line-height-snug);
  color: var(--surface-color-text, currentColor);
}

/* ----- Excerpt (optionnel) ----- */
.ds-cdref__excerpt {
  margin: 0;
  font-size: var(--ds-font-size-sm);
  line-height: var(--ds-line-height-normal);
  color: var(--surface-color-muted, #555);
  /* Trois lignes max pour homogénéité visuelle */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ----- Meta ----- */
.ds-cdref__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-3);
  margin-top: auto;
  padding-top: var(--ds-space-2);
  font-size: var(--ds-font-size-xs);
  color: var(--surface-color-muted, #888);
}

.ds-cdref__meta > * + *::before {
  content: "·";
  margin-right: var(--ds-space-2);
  color: var(--surface-color-rule, #ccc);
}

/* ============================================================
   Variants par source — tagging visuel optionnel.
   Les agents peuvent surcharger --surface-color-cdref-accent
   par data-source (sélecteur attribut ou classe d'agent).

   Convention proposée pour la barre latérale gauche colorée
   selon source agent :
   - data-source="library"  → tradition livre
   - data-source="podcast"  → audio
   - data-source="archive"  → patrimoine
   - data-source="lab"      → recherche
   - data-source="onmars"   → fiction
   - data-source="blog"     → édito
   Les agents définissent --surface-color-cdref-accent pour leur
   propre source dans leur CSS local.
   ============================================================ */

/* ----- Cluster horizontal de cdrefs ----- */
.ds-cdref-list {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--ds-space-3);
}

@media (min-width: 640px) {
  .ds-cdref-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .ds-cdref-list--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}