<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Votre vidéo est prête – VideoPowerPME</title>
  <style>
    /* Reset */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      background-color: #f0f4f8;
      font-family: 'Segoe UI', Arial, sans-serif;
      color: #2d3748;
      padding: 32px 16px;
    }

    /* Wrapper */
    .wrapper {
      max-width: 600px;
      margin: 0 auto;
    }

    /* Header */
    .header {
      background: #2563eb;
      border-radius: 16px 16px 0 0;
      padding: 36px 40px 28px;
      text-align: center;
      border-bottom: 3px solid #f97316;
    }
    .header .logo {
      font-size: 22px;
      font-weight: 800;
      letter-spacing: 1px;
      color: #ffffff;
    }
    .header .logo span {
      color: #fde68a;
    }
    .header .tagline {
      font-size: 12px;
      color: #bfdbfe;
      margin-top: 4px;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    /* Body */
    .body {
      background-color: #ffffff;
      padding: 40px 40px 32px;
    }

    /* Success badge */
    .badge-wrapper {
      text-align: center;
      margin-bottom: 28px;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #d1fae5;
      border: 1px solid #16a34a;
      border-radius: 50px;
      padding: 10px 22px;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }
    .badge-text {
      font-size: 13px;
      font-weight: 600;
      color: #15803d;
      letter-spacing: 0.5px;
    }

    /* Greeting */
    .greeting {
      font-size: 26px;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 10px;
    }
    .greeting span {
      color: #2563eb;
    }
    .subtitle {
      font-size: 15px;
      color: #64748b;
      line-height: 1.6;
      margin-bottom: 32px;
    }

    /* Info card */
    .info-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 24px 28px;
      margin-bottom: 28px;
    }
    .info-card .card-title {
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #94a3b8;
      margin-bottom: 18px;
      font-weight: 600;
    }
    .info-row {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 12px 0;
      border-bottom: 1px solid #e2e8f0;
    }
    .info-row:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
    .info-icon {
      width: 39px;
    height: 36px;
    border-radius: 8px;
    background-color: #f0f0f0; /* Exemple */
    
    /* Remplacement de Flexbox */
    display: inline-block;
    text-align: center;
    line-height: 36px; /* Doit être égal à height */
    vertical-align: middle;
    
    font-size: 16px;
    }
    .icon-user   { background-color: #dbeafe; }
    .icon-video  { background-color: #ede9fe; }
    .icon-clock  { background-color: #dcfce7; }
    .info-content .label {
      font-size: 11px;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 3px;
    }
    .info-content .value {
      font-size: 15px;
      color: #1e293b;
      font-weight: 500;
      word-break: break-all;
    }

    /* CTA button */
    .cta-wrapper {
      text-align: center;
      margin-bottom: 32px;
    }
    .cta-btn {
      display: inline-block;
      background: #2563eb;
      color: #ffffff;
      text-decoration: none;
      font-size: 16px;
      font-weight: 700;
      padding: 16px 44px;
      border-radius: 50px;
      letter-spacing: 0.5px;
      box-shadow: 0 6px 24px rgba(37, 99, 235, 0.35);
      transition: opacity 0.2s;
    }
    .cta-btn:hover { opacity: 0.88; }
    .cta-note {
      font-size: 12px;
      color: #94a3b8;
      margin-top: 12px;
    }

    /* Divider */
    .divider {
      border: none;
      border-top: 1px solid #e2e8f0;
      margin: 28px 0;
    }

    /* Info message */
    .info-msg {
      background: #eff6ff;
      border-left: 3px solid #2563eb;
      border-radius: 0 8px 8px 0;
      padding: 14px 18px;
      font-size: 13px;
      color: #475569;
      line-height: 1.7;
    }
    .info-msg strong { color: #1e40af; }

    /* Footer */
    .footer {
      background: #f1f5f9;
      border-radius: 0 0 16px 16px;
      padding: 24px 40px;
      text-align: center;
      border-top: 1px solid #e2e8f0;
    }
    .footer .site {
      font-size: 13px;
      color: #2563eb;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-decoration: none;
    }
    .footer .copyright {
      font-size: 11px;
      color: #94a3b8;
      margin-top: 8px;
    }
    .footer .links {
      margin-top: 10px;
    }
    .footer .links a {
      font-size: 11px;
      color: #64748b;
      text-decoration: none;
      margin: 0 8px;
    }
    .footer .links a:hover { color: #2563eb; }

    /* Responsive */
    @media (max-width: 480px) {
      .body, .header, .footer { padding-left: 22px; padding-right: 22px; }
      .greeting { font-size: 22px; }
      .cta-btn { padding: 14px 32px; font-size: 15px; }
    }
  </style>
</head>
<body>
  <div class="wrapper">

    <!-- HEADER -->
    <div class="header">
      <div class="logo">Video<span>Power</span>PME</div>
      <div class="tagline">Téléchargeur de vidéos professionnel</div>
    </div>

    <!-- BODY -->
    <div class="body">

      <!-- Badge statut -->
      <div class="badge-wrapper">
        <div class="badge">
          <span class="badge-text">Téléchargement terminé</span>
        </div>
      </div>

      <!-- Salutation -->
      <div class="greeting">
        Bonjour, <span>{{ .Tx.Data.name }}</span> 👋
      </div>
      <p class="subtitle">
        Bonne nouvelle ! Votre vidéo a été téléchargée avec succès et est maintenant prête à être récupérée.
      </p>

      <!-- Carte infos -->
      <div class="info-card">
        <div class="card-title">Détails du téléchargement</div>

        <div class="info-row">
          <div class="info-icon icon-user">👤</div>
          <div class="info-content">
            <div class="label">Utilisateur</div>
            <div class="value">{{ .Tx.Data.name }}</div>
          </div>
        </div>

        <div class="info-row">
          <div class="info-icon icon-video">🎬</div>
          <div class="info-content">
            <div class="label">Vidéo téléchargée</div>
            <div class="value">{{ .Tx.Data.video }}</div>
          </div>
        </div>

        <div class="info-row">
          <div class="info-icon icon-clock">🕐</div>
          <div class="info-content">
            <div class="label">Fin du téléchargement</div>
            <div class="value">{{ .Tx.Data.date }}</div>
          </div>
        </div>
      </div>

      <!-- Bouton CTA -->
      <div class="cta-wrapper">
        <a href="{{ .Tx.Data.url }}" class="cta-btn">
          ⬇️ &nbsp; Télécharger ma vidéo
        </a>
        <p class="cta-note">Le lien est valable pendant <strong>24 heures</strong></p>
      </div>

      <hr class="divider" />

      <!-- Note d'info -->
      <div class="info-msg">
        <strong>⚠️ Important :</strong> Assurez-vous de télécharger votre fichier avant expiration du lien.
        Passé ce délai, vous devrez relancer une nouvelle demande. Si vous rencontrez un problème,
        contactez notre support à <strong>video@powerpme.com</strong>.
      </div>

    </div>

    <!-- FOOTER -->
    <div class="footer">
      <a href="https://video.powerpme.com" class="site">VideoPowerPME.com</a>
      <p class="copyright">© 2025 VideoPowerPME – Tous droits réservés.</p>
      <div class="links">
        <a href="#">Se désabonner</a>
        <a href="#">Politique de confidentialité</a>
        <a href="#">Support</a>
      </div>
    </div>

  </div>
</body>
</html>
