components/mission-card.js

class MissionCard extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          background: white;
          border-radius: 1rem;
          overflow: hidden;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
          transition: all 0.3s ease;
        }
        :host(:hover) {
          transform: translateY(-5px);
          box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
          cursor: pointer;
        }
.header {
          height: 8rem;
          background: linear-gradient(45deg, #6d28d9, #ec4899);
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
        }
        
        .emoji {
          font-size: 3rem;
        }
        
        .favorite-btn {
          position: absolute;
          top: 0.75rem;
          right: 0.75rem;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 50%;
          width: 2.5rem;
          height: 2.5rem;
          display: flex;
          align-items: center;
          justify-content: center;
          border: none;
          cursor: pointer;
          transition: all 0.2s;
        }
        
        .favorite-btn:hover {
          background: rgba(255, 255, 255, 0.3);
        }
        
        .content {
          padding: 1.5rem;
        }
        
        .client {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          margin-bottom: 1rem;
        }
        
        .avatar {
          width: 2.5rem;
          height: 2.5rem;
          border-radius: 50%;
          background: linear-gradient(45deg, #6d28d9, #ec4899);
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-weight: bold;
          font-size: 0.875rem;
        }
        
        .client-name {
          font-size: 0.875rem;
          color: #64748b;
          font-weight: 600;
        }
        
        .title {
          font-size: 1.125rem;
          font-weight: 700;
          color: #1e293b;
          margin-bottom: 0.75rem;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        
        .description {
          font-size: 0.875rem;
          color: #64748b;
          margin-bottom: 1rem;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        
        .stats {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0.75rem 0;
          border-top: 1px solid #e2e8f0;
          border-bottom: 1px solid #e2e8f0;
          margin-bottom: 1rem;
        }
        
        .stat {
          display: flex;
          align-items: center;
          gap: 0.25rem;
        }
        
        .impact {
          color: #f59e0b;
        }
        
        .duration {
          color: #64748b;
        }
        
        .tags {
          display: flex;
          gap: 0.5rem;
          flex-wrap: wrap;
          margin-bottom: 1.5rem;
        }
        
        .tag {
          font-size: 0.75rem;
          padding: 0.25rem 0.75rem;
          background: #f3e8ff;
          color: #6d28d9;
          border-radius: 9999px;
          font-weight: 600;
        }
        .view-btn {
          width: 100%;
          padding: 0.75rem;
          border-radius: 0.5rem;
          background: linear-gradient(45deg, #6d28d9, #ec4899);
          color: white;
          font-weight: 600;
          border: none;
          cursor: pointer;
          transition: all 0.2s;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.5rem;
        }

        .view-btn:focus {
          outline: 2px solid #7c3aed;
          outline-offset: 2px;
        }
.view-btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        
        .arrow {
          transition: transform 0.2s;
        }
        
        :host(:hover) .arrow {
          transform: translateX(2px);
        }
      </style>
      
      <div class="header">
        <div class="emoji">🚀</div>
        <button class="favorite-btn">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white">
            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
          </svg>
        </button>
      </div>
      
      <div class="content">
        <div class="client">
          <div class="avatar">AV</div>
          <span class="client-name">Atelier Vert</span>
        </div>
        
        <h3 class="title">Co-créer un atlas visuel de la mode durable parisienne</h3>
        <p class="description">Réinventons ensemble comment la mode durable peut transformer l'industrie parisienne.</p>
        
        <div class="stats">
          <div class="stat">
            <svg class="impact" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
            </svg>
            <span>8.5/10</span>
          </div>
          <div class="stat">
            <svg class="duration" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
            <span>3-4 semaines</span>
          </div>
        </div>
        
        <div class="tags">
          <span class="tag">Durabilité</span>
          <span class="tag">Storytelling</span>
        </div>
        
        <button class="view-btn">
          Voir les détails
          <svg class="arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M5 12h14"></path>
            <path d="M12 5l7 7-7 7"></path>
          </svg>
        </button>
      </div>
    `;
  }
}

customElements.define('mission-card', MissionCard);