nav-carte/components/FicheMiniCard.vue

<!--
  FicheMiniCard — B3-M2, B11-M2
  La carte entière ouvre la fiche (bouton étiré par ::after) ; avec
  `etiquettesCliquables`, les chips deviennent des boutons qui émettent
  `etiquette` (la vue fiches ajoute le filtre). Un bouton ne pouvant pas en
  contenir d'autres, la racine est un <article>, plus un <button> : apparence
  inchangée, page /dev/fiche-mini-card comprise.
-->
<template>
  <article class="fiche-mini-card" :class="{ 'fiche-mini-card--actif': actif }">
    <button
      type="button"
      class="fiche-mini-card__ouvrir"
      @click="emit('open')"
    >
      <span class="fiche-mini-card__nom">{{ fiche.nom }}</span>
      <span v-if="fiche.resume" class="fiche-mini-card__resume">{{ fiche.resume }}</span>
    </button>

    <ChipGroup
      v-if="fiche.chips.length || fiche.echelle"
      :aria-label="`Étiquettes de ${fiche.nom}`"
      class="fiche-mini-card__chips"
    >
      <Chip v-if="fiche.echelle" as="span" variant="echelle" :label="fiche.echelle" />
      <template v-if="etiquettesCliquables">
        <Chip
          v-for="chip in fiche.chips"
          :key="chip"
          variant="fonction"
          :label="chip"
          :active="etiquettesActives?.includes(chip)"
          :aria-label="`Filtrer par ${chip}`"
          @toggle="emit('etiquette', chip)"
        />
      </template>
      <template v-else>
        <Chip v-for="chip in fiche.chips" :key="chip" as="span" variant="fonction" :label="chip" />
      </template>
    </ChipGroup>

    <span v-if="!fiche.geoloc" class="fiche-mini-card__no-geo">Sans localisation</span>
  </article>
</template>

<script setup lang="ts">
import type { MiniFiche } from '~/composables/useFicheAdapter'

defineProps<{
  fiche: MiniFiche
  etiquettesCliquables?: boolean
  /** Libellés de chips déjà filtrés (affichés pressés). */
  etiquettesActives?: string[]
  /** Fiche survolée sur la carte ou sélectionnée. */
  actif?: boolean
}>()

const emit = defineEmits<{
  open: []
  etiquette: [label: string]
}>()
</script>

<style scoped>
.fiche-mini-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  padding: var(--space-sm);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  box-sizing: border-box;
  transition: background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .fiche-mini-card {
    transition: none;
  }
}

.fiche-mini-card:hover {
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
}

/* Survol d'une épingle ou fiche sélectionnée : liseré safran */
.fiche-mini-card--actif {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.fiche-mini-card:has(.fiche-mini-card__ouvrir:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Bouton étiré : toute la carte ouvre la fiche, les chips cliquables passent dessus */
.fiche-mini-card__ouvrir {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.fiche-mini-card__ouvrir::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.fiche-mini-card__ouvrir:focus-visible {
  outline: none;
}

.fiche-mini-card__nom {
  width: 100%;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fiche-mini-card__resume {
  width: 100%;
  margin-top: var(--space-2xs);
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  /* --text-muted ne donne que 3,7:1 sur --surface (DESIGN-SYSTEM §Navigation) */
  color: color-mix(in srgb, var(--text) 78%, transparent);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fiche-mini-card__chips {
  position: relative;
  z-index: 1;
  margin-top: var(--space-xs);
  pointer-events: none;
}
.fiche-mini-card__chips :deep(button) {
  pointer-events: auto;
}

.fiche-mini-card__no-geo {
  margin-top: var(--space-2xs);
  font-size: var(--fs-xs);
  color: color-mix(in srgb, var(--text) 78%, transparent);
}
</style>