dictia-public/templates/marketing/_partials/_pricing_tiers.html

{# Single source of truth for the v7.0 pricing — used by landing.html#tarifs and /tarifs page.
   When prices change, edit ONLY this file (and src/billing/plans.py for Stripe IDs).

   v7.0 — 3 forfaits Cloud (en rangée) + 1 DictIA LOCAL (bloc dédié) + 1 soumission :
     - Cloud BASIC      189 $/mois  (no setup)
     - Cloud ESSENTIEL  349 $/mois  (no setup)
     - Cloud PRO        549 $/mois  + 485 $ onboarding (recommended)
     - DictIA LOCAL     5 998 $ An 1 puis 500 $/an dès An 2 (bloc large dédié, "Vous en êtes propriétaire")
     - Pro+             soumission personnalisée → /contact?pro-plus=1

   Common to all forfaits :
     WhisperX Large-v3 (99%+ · 99+ langues), pyannote diarisation, Mistral résumés,
     exports SRT/VTT/TXT/JSON/DOCX, Loi 25 conforme, OVH Beauharnois (Cloud) ou local. #}

{% from 'macros/pricing_card.html' import pricing_card %}
{% from 'macros/button.html' import button %}

{%- set _baseline_features_cloud = [
  'WhisperX Large-v3 · 99 %+ précision · 99+ langues',
  'Diarisation pyannote (qui parle)',
  'Résumés IA + Points d’action (Mistral Nemo 12B)',
  'Exports SRT, VTT, TXT, JSON, DOCX',
  'Hébergement OVH Beauharnois (QC)',
  'Conforme Loi 25 · Anti-DDoS · Backups quotidiens',
  'Aucune limite utilisateurs'
] -%}

{# === Ligne 1 — 3 forfaits Cloud (1/2/3 cols responsive) === #}
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 items-stretch">

  {{ pricing_card(
    slug='cloud-basic',
    name='Cloud BASIC',
    badge='Cloud · Souverain QC',
    target='Solopreneur · petite équipe · usage occasionnel à régulier.',
    monthly=189,
    capacity_audio='~165&nbsp;h audio/mois',
    capacity_storage='100&nbsp;Go',
    gpu='NVIDIA L4 partagé',
    features=_baseline_features_cloud,
    cta_label='Démarrer en Cloud'
  ) }}

  {{ pricing_card(
    slug='cloud-essentiel',
    name='Cloud ESSENTIEL',
    badge='Cloud · Souverain QC',
    target='Cabinet en croissance · usage quotidien soutenu.',
    monthly=349,
    capacity_audio='~330&nbsp;h audio/mois',
    capacity_storage='200&nbsp;Go',
    gpu='NVIDIA L4 partagé étendu',
    features=_baseline_features_cloud,
    cta_label='Choisir Essentiel'
  ) }}

  {{ pricing_card(
    slug='cloud-pro',
    name='Cloud PRO',
    badge='Cloud · Souverain QC',
    recommended=True,
    target='Organisation établie · usage intensif multi-postes.',
    setup=485,
    monthly=549,
    capacity_audio='~660&nbsp;h audio/mois',
    capacity_storage='500&nbsp;Go',
    gpu='NVIDIA L4 dédié priorité',
    features=_baseline_features_cloud + [
      'GPU dédié priorité (latence garantie)',
      'Onboarding assisté inclus'
    ],
    cta_label='Commander Pro'
  ) }}

</div>

{# === Bloc 2 — DictIA LOCAL (large, distinctif, pleine largeur) === #}
<section class="mt-12 relative overflow-hidden bg-brand-navy2 border border-brand-border rounded p-8 md:p-12"
         aria-labelledby="dictia-local-title">
  {# Decorative orbs background — purely decorative, hidden from AT #}
  <div class="absolute -top-32 -right-32 w-[500px] h-[500px] rounded-full pointer-events-none"
       style="background: radial-gradient(circle, rgba(37,99,235,0.10) 0%, transparent 70%); filter: blur(60px);" aria-hidden="true"></div>
  <div class="absolute -bottom-32 -left-32 w-[400px] h-[400px] rounded-full pointer-events-none"
       style="background: radial-gradient(circle, rgba(192,38,211,0.08) 0%, transparent 70%); filter: blur(60px);" aria-hidden="true"></div>

  <div class="relative grid lg:grid-cols-[minmax(0,1fr)_minmax(0,420px)] gap-10 lg:gap-12 items-center">

    {# === LEFT — copy + checkmarks === #}
    <div>
      <div class="flex items-center gap-2 mb-4 flex-wrap">
        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-brand-b1/10 border border-brand-b1/30 text-xs font-semibold text-brand-b1">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-3.5 h-3.5" aria-hidden="true"><path d="M12 2C8 2 5 5 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-4-3-7-7-7z"/><circle cx="12" cy="9" r="2.5"/></svg>
          Au Québec
        </span>
        <span class="text-xs text-white/60">par InnovA AI</span>
      </div>

      <p class="eyebrow grad-text mb-2">DictIA LOCAL · Serveur souverain</p>
      <h3 id="dictia-local-title" class="text-3xl md:text-4xl font-black text-white mb-4 leading-tight">
        Vous en êtes <span class="grad-text">propriétaire</span>.
      </h3>
      <p class="text-base text-white/75 mb-6 leading-relaxed max-w-xl">
        On vous vend, configure et installe votre serveur IA directement dans vos locaux. Vous êtes propriétaire du matériel. <strong class="text-white">Vos données ne quittent jamais votre bureau.</strong>
      </p>

      <ul class="space-y-3 mb-6" role="list">
        {% for bullet in [
          ('PC + GPU RTX vous appartient', 'pas de location, pas d&rsquo;abonnement matériel'),
          ('Traitement 100&nbsp;% local', 'aucun transit réseau, fonctionne hors-ligne'),
          ('Assemblé et configuré au Québec par InnovA AI', 'support local inclus'),
          ('On vient l&rsquo;installer chez vous', 'formation incluse, opérationnel le jour&nbsp;1'),
          ('Achat direct sans appel d&rsquo;offres si &lt;&nbsp;34&nbsp;700&nbsp;$', 'DictIA LOCAL s&rsquo;y qualifie')
        ] %}
        <li class="flex items-start gap-3 text-sm text-white/80">
          <span class="flex-shrink-0 w-5 h-5 grad-bg flex items-center justify-center mt-0.5" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" class="w-3 h-3 text-white"><path d="M5 13l4 4L19 7"/></svg>
          </span>
          <span><strong class="text-white">{{ bullet[0] | safe }}</strong> — {{ bullet[1] | safe }}</span>
        </li>
        {% endfor %}
      </ul>

      <div class="flex flex-wrap gap-3 items-center">
        {{ button('Voir les serveurs disponibles', href='/contact?plan=dictia-local', variant='primary', size='md', icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" aria-hidden="true"><path d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>') }}
        <span class="text-sm text-white/60">5&nbsp;998&nbsp;$ An&nbsp;1 · 500&nbsp;$/an dès An&nbsp;2</span>
      </div>
    </div>

    {# === RIGHT — server visual mockup === #}
    <div class="relative">
      <div class="bg-brand-navy3/60 border border-brand-b1/20 rounded p-6 backdrop-blur-sm">
        <p class="eyebrow text-white/60 mb-3 text-center">GPU RTX — DictIA LOCAL</p>
        <div class="flex flex-col items-center gap-4">
          {# Server icon SVG (rack stylisé) — purely decorative #}
          <div class="w-32 h-32 grad-bg flex items-center justify-center relative" aria-hidden="true">
            <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2.5" class="w-16 h-16 text-white">
              <rect x="8" y="10" width="48" height="14" rx="0"/>
              <circle cx="14" cy="17" r="1.5" fill="currentColor"/>
              <circle cx="20" cy="17" r="1.5" fill="currentColor"/>
              <line x1="30" y1="17" x2="50" y2="17"/>
              <rect x="8" y="28" width="48" height="14" rx="0"/>
              <circle cx="14" cy="35" r="1.5" fill="currentColor"/>
              <circle cx="20" cy="35" r="1.5" fill="currentColor"/>
              <line x1="30" y1="35" x2="50" y2="35"/>
              <rect x="8" y="46" width="48" height="14" rx="0"/>
              <circle cx="14" cy="53" r="1.5" fill="currentColor"/>
              <circle cx="20" cy="53" r="1.5" fill="currentColor"/>
              <line x1="30" y1="53" x2="50" y2="53"/>
            </svg>
          </div>
          <p class="text-center text-white font-bold text-base">Serveur DictIA</p>
          <ul class="space-y-1.5 text-xs text-white/70 w-full" role="list">
            <li class="flex items-center gap-2">
              <span class="w-1 h-1 rounded-full bg-brand-b2" aria-hidden="true"></span>
              <span>Interface web</span>
            </li>
            <li class="flex items-center gap-2">
              <span class="w-1 h-1 rounded-full bg-brand-b2" aria-hidden="true"></span>
              <span>PC gaming haute performance</span>
            </li>
            <li class="flex items-center gap-2">
              <span class="w-1 h-1 rounded-full bg-brand-b2" aria-hidden="true"></span>
              <span>GPU RTX 5070&nbsp;Ti 16&nbsp;Go dédié IA</span>
            </li>
            <li class="flex items-center gap-2">
              <span class="w-1 h-1 rounded-full bg-brand-b2" aria-hidden="true"></span>
              <span>WhisperX + LLM Mistral 7B local</span>
            </li>
            <li class="flex items-center gap-2">
              <span class="w-1 h-1 rounded-full bg-brand-b2" aria-hidden="true"></span>
              <span>DictIA pré-installé</span>
            </li>
            <li class="flex items-center gap-2">
              <span class="w-1 h-1 rounded-full bg-brand-b3" aria-hidden="true"></span>
              <span class="font-semibold text-white">Votre propriété</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

{# === Pro+ banner — soumission personnalisée pour grands volumes / SLA renforcé === #}
<div class="mt-10 max-w-5xl mx-auto p-6 bg-brand-navy text-white border border-brand-b2/30 rounded backdrop-blur-sm relative overflow-hidden">
  <div class="absolute inset-0 pointer-events-none opacity-60" aria-hidden="true"
       style="background: radial-gradient(circle at 100% 0%, rgba(192,38,211,0.12) 0%, transparent 55%), radial-gradient(circle at 0% 100%, rgba(6,182,212,0.10) 0%, transparent 55%);"></div>
  <div class="relative flex items-center justify-between flex-wrap gap-6">
    <div class="flex-1 min-w-[260px]">
      <p class="eyebrow grad-text mb-2 text-[11px]">Pro+ · Soumission personnalisée</p>
      <h3 class="text-lg font-bold text-white mb-2">Au-delà de Cloud&nbsp;PRO&nbsp;?</h3>
      <p class="text-sm text-white/75 leading-relaxed">
        &gt;&nbsp;660&nbsp;h audio/mois · &gt;&nbsp;500&nbsp;Go stockage · 7+ utilisateurs intensifs · multi-sites · SLA&nbsp;99,9&nbsp;% · SOC&nbsp;2 Type&nbsp;I/II · PHIPA · PIPEDA Ontario · documentation gouv. (SEAO/MCN).
      </p>
    </div>
    {{ button('Demander une soumission', href='/contact?pro-plus=1', variant='primary', size='md') }}
  </div>
</div>