/* ============================================================
   D3RF -- grid-shared.css
   Composant grille/card/filtres partage par `/` (ecran 3, revision
   Fred 01/08) et `/projets/`. VISUAL_SPEC section 3 ecran 3 exige la
   reutilisation EXACTE du composant /projets/ -- zero fork : ce fichier
   est la SEULE source des regles filtres/badges/etat-vide/pagination,
   charge par les deux pages. `js/projets.js` est de la meme facon
   partage tel quel (memes id/class, aucune duplication de logique).
   ============================================================ */

.filter-status,
.filter-tag {
  scroll-snap-align: start;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-m);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-card);
  white-space: nowrap;
}

.filter-status:hover,
.filter-tag:hover {
  border-color: var(--node-active);
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.filter-status.is-active,
.filter-tag.is-active {
  background: var(--node-active);
  border-color: var(--node-active);
  color: var(--bg-primary);
}

.filter-count {
  opacity: 0.75;
}

.filter-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.filter-status-dot--shipped { background: var(--status-shipped); box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-shipped) 20%, transparent); }
.filter-status-dot--built { background: var(--status-built); }
.filter-status-dot--explored { background: transparent; border: 1.5px solid var(--status-explored); }
.filter-status-dot--spark { background: transparent; border: 1.5px dashed var(--status-spark); }
.filter-status.is-active .filter-status-dot--explored,
.filter-status.is-active .filter-status-dot--spark { border-color: var(--bg-primary); }

.filter-reset {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-m);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
  margin-left: var(--space-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  flex-shrink: 0;
  transition: color var(--dur-fast) ease;
}
.filter-reset:hover { color: var(--text-primary); }
.filter-reset[hidden] { display: none; }

.filter-status[disabled],
.filter-tag[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ============================================================
   BADGES DE STATUT (STYLE_GUIDE 6.2) -- densite de forme, pas
   de couleur seule : lisible en niveaux de gris.
   ============================================================ */
.card-status--shipped .card-status-dot {
  background: var(--status-shipped);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-shipped) 20%, transparent);
}
.card-status--built .card-status-dot {
  background: var(--status-built);
}
.card-status--explored .card-status-dot {
  background: transparent;
  border: 1.5px solid var(--status-explored);
}
.card-status--spark .card-status-dot {
  background: transparent;
  border: 1.5px dashed var(--status-spark);
}

.card-year {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--ls-mono);
  color: var(--text-muted);
  flex-shrink: 0;
}

/* {{TAGS_HTML}} (scripts/build-v22.py, partage card + fiche) emet
   class="tag" -- alias visuel de l'ancien .card-tag (v4-styles.css). */
.card-tags .tag,
.fiche-tags .tag {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--ls-mono);
  color: var(--text-muted);
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-elevated);
  white-space: nowrap;
  display: inline-block;
}

/* ============================================================
   GRILLE -- etat vide, pagination
   ============================================================ */
.grid-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: calc(2 * (280px + var(--grid-gap)));
  text-align: center;
}

/* QA_V22 bloquant : la regle .grid-empty{display:flex} ecrasait l'attribut
   hidden pose par js/projets.js. */
.grid-empty[hidden] {
  display: none;
}

.grid-empty-node {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: var(--stroke-logo) solid var(--node-default);
  background: var(--bg-primary);
}

.grid-empty-text {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.grid-empty-link {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-m);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: none;
  cursor: pointer;
}

.grid-load-more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-8);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-m);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.btn-secondary:hover {
  border-color: var(--node-active);
  background: var(--bg-elevated);
}

.project-card[hidden] { display: none; }

/* DA_REVIEW_V22 4.4 : au-dessus de 768px les rangees de filtres passent a la
   ligne, le defilement horizontal reste l'exception mobile signalee. */
@media (min-width: 768px) {
  .filters-row {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

/* DA_REVIEW_V22 4.7 : cibles tactiles 44px minimum sous 768px. */
@media (max-width: 767px) {
  .filter-status,
  .filter-tag,
  .filter-reset {
    min-height: 44px;
  }
}