nav-carte/components/PlatformeTaffCard.vue

<template>
  <button
    type="button"
    class="taff-card"
    :style="`border-left-color: ${tagConfig.accent};`"
    @click="$emit('open', plateforme)"
  >
    <!-- Ligne 1 : tag + badge AO + lien -->
    <div class="taff-card-top">
      <div class="flex items-center gap-2 flex-wrap">
        <span class="taff-tag" :style="`background: ${tagConfig.bg}; color: ${tagConfig.text};`">
          {{ tagConfig.emoji }} {{ tagConfig.label }}
        </span>
        <span
          v-if="plateforme.type === 'appel-offre-public'"
          class="taff-badge-ao"
        >AO public</span>
      </div>
      <a
        :href="plateforme.url"
        target="_blank"
        rel="noopener noreferrer"
        class="taff-visit-btn"
        @click.stop
        title="Visiter le site"
      >
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
          <polyline points="15 3 21 3 21 9"/>
          <line x1="10" y1="14" x2="21" y2="3"/>
        </svg>
        Visiter
      </a>
    </div>

    <!-- Ligne 2 : nom -->
    <div class="taff-card-name">{{ plateforme.nom }}</div>

    <!-- Ligne 3 : axes (icône + score, compacts) -->
    <div class="taff-card-axes">
      <template v-for="axe in AXES" :key="axe.id">
        <span
          v-if="plateforme.scoring[axe.id] !== null"
          class="taff-axe-chip"
          :style="`background: ${axeScoreBg(plateforme.scoring[axe.id])}; color: ${axeScoreText(plateforme.scoring[axe.id])};`"
          :title="axe.label"
        >{{ axe.icon }} {{ plateforme.scoring[axe.id] }}</span>
      </template>
    </div>

    <!-- Ligne 4 : description (3 lignes max, lisible) -->
    <p class="taff-card-desc">{{ plateforme.description_courte }}</p>

    <!-- Ligne 5 : secteurs + coût -->
    <div class="taff-card-footer">
      <div class="flex items-center gap-1.5 flex-wrap">
        <span
          v-for="s in plateforme.secteurs_servis.slice(0, 3)"
          :key="s"
          class="taff-secteur-chip"
        >{{ SECTEUR_LABELS[s] ?? s }}</span>
        <span v-if="plateforme.secteurs_servis.length > 3" class="taff-more">+{{ plateforme.secteurs_servis.length - 3 }}</span>
      </div>
      <span class="taff-cout">{{ COUT_LABELS[plateforme.cout_entree] ?? plateforme.cout_entree }}</span>
    </div>
  </button>
</template>

<script setup lang="ts">
import type { PlateformeTaff } from '~/types/plateforme-taff'

const props = defineProps<{ plateforme: PlateformeTaff }>()
defineEmits<{ open: [p: PlateformeTaff] }>()

const AXES = [
  { id: 'remuneration' as const, icon: '🪙', label: 'Rémunération' },
  { id: 'transparence' as const, icon: '🔍', label: 'Transparence' },
  { id: 'pratiques'    as const, icon: '⚖️', label: 'Pratiques pro' },
  { id: 'ecologie'     as const, icon: '🌿', label: 'Écologie' },
  { id: 'matching'     as const, icon: '🎯', label: 'Matching' },
]

const TAG_CONFIG = {
  'recommande':   { emoji: '✅', label: 'Recommandé AEP', accent: '#5a7a4a', bg: 'rgba(90,122,74,0.12)',    text: '#3d5534' },
  'sous-reserve': { emoji: '⚠️', label: 'Sous réserve',   accent: '#c4a472', bg: 'rgba(196,164,114,0.15)', text: '#7a5f2a' },
  'a-eviter':     { emoji: '❌', label: 'À éviter',       accent: '#a85d3e', bg: 'rgba(168,93,62,0.12)',    text: '#7a3322' },
}

const tagConfig = computed(() => TAG_CONFIG[props.plateforme.scoring.tag_global] ?? TAG_CONFIG['sous-reserve'])

function axeScoreBg(score: string | null) {
  if (score === '✅') return 'rgba(90,122,74,0.12)'
  if (score === '⚠️') return 'rgba(196,164,114,0.15)'
  if (score === '❌') return 'rgba(168,93,62,0.12)'
  return 'var(--nav-bg-alt)'
}
function axeScoreText(score: string | null) {
  if (score === '✅') return '#3d5534'
  if (score === '⚠️') return '#7a5f2a'
  if (score === '❌') return '#7a3322'
  return 'var(--nav-text-muted)'
}

const SECTEUR_LABELS: Record<string, string> = {
  'renovation': 'Rénovation', 'construction-neuve': 'Neuf', 'urbanisme': 'Urbanisme',
  'architecture-interieure': 'Archi intérieure', 'paysage': 'Paysage',
  'mar-conseil': 'MAR/Conseil', 'transversal': 'Transversal',
}
const COUT_LABELS: Record<string, string> = {
  'gratuit': 'Gratuit', 'freemium': 'Freemium', 'abonnement': 'Abonnement',
  'lead-paye': 'Lead payant', 'commission': 'Commission',
}
</script>

<style scoped>
.taff-card {
  width: 100%;
  text-align: left;
  border-radius: 12px;
  border: 1px solid var(--nav-bg-alt);
  border-left: 4px solid;
  background: var(--nav-surface);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s;
  cursor: pointer;
}
.taff-card:hover { box-shadow: 0 4px 16px rgba(26,34,56,0.1); }
.taff-card:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: 2px; }

.taff-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem 1rem 0.5rem;
}

.taff-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.taff-badge-ao {
  display: inline-flex;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 500;
  background: var(--nav-bg-alt);
  color: var(--nav-text-muted);
}

.taff-visit-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--nav-bg-alt);
  color: var(--nav-text);
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.taff-visit-btn:hover { opacity: 0.7; }

.taff-card-name {
  padding: 0.25rem 1rem 0.75rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--nav-text);
  line-height: 1.3;
}

.taff-card-axes {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0 1rem 0.875rem;
  flex-wrap: wrap;
}

.taff-axe-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.taff-card-desc {
  padding: 0 1rem 1rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--nav-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.taff-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--nav-bg-alt);
  flex-wrap: wrap;
}

.taff-secteur-chip {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  background: var(--nav-bg);
  color: var(--nav-text-muted);
  border: 1px solid var(--nav-bg-alt);
}

.taff-more {
  font-size: 0.75rem;
  color: var(--nav-text-muted);
}

.taff-cout {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--nav-text-muted);
  white-space: nowrap;
}
</style>