feat(marketing): pricing 3 forfaits + ROI calculator Alpine.js

templates/macros/pricing_card.html

@@ -0,0 +1,41 @@
+{# Reusable pricing card macro. FlexiHub style — recommended tier gets a grad-bg outer border (1.5px gradient frame).
+
+   Args:
+     slug          : URL-safe identifier (goes into href, NOT piped through | safe — autoescape protects URL)
+     name          : Display name (piped through | safe — may contain entities; current names like "DictIA 8" are entity-free)
+     price_setup   : Setup price string with NBSP (e.g. '3 450 $') — piped through | safe
+     price_monthly : Monthly price string with NBSP (e.g. '173 $') — piped through | safe
+     target        : Target audience tagline — piped through | safe (may contain entities)
+     features      : List of feature strings, each piped through | safe (will contain   entities)
+     recommended   : If True, wraps the card in grad-bg gradient frame + RECOMMANDÉ badge
+     cta_url       : Base URL for the CTA — slug appended (NOT piped through | safe — URL injection guard)
+
+   Note: CTA label is "Réserver [name]" not "Choisir" because product is in pre-launch
+   (cf. trust bar "Pré-inscription ouverte") — LPC art. 219 hygiene.
+   The button macro autoescapes its `text` arg, so `name` MUST NOT contain HTML entities
+   (verified: "DictIA 8", "DictIA 16", "DictIA Cloud" are all entity-free). #}
+{%- macro pricing_card(slug, name, price_setup, price_monthly, target, features, recommended=False, cta_url='/checkout') -%}
+<div class="relative {% if recommended %}grad-bg p-[1.5px] rounded-[20px]{% endif %}">
+  {% if recommended %}<span class="absolute -top-3 left-1/2 -translate-x-1/2 grad-bg text-white text-xs font-bold px-3 py-1 rounded-full shadow-cta">★ RECOMMANDÉ</span>{% endif %}
+  <div class="bg-white p-8 rounded-[18px] border border-brand-border h-full flex flex-col">
+    <div class="mb-6">
+      <h3 class="text-xl font-black mb-1 text-brand-navy">{{ name | safe }}</h3>
+      <p class="text-sm text-brand-navy/70">{{ target | safe }}</p>
+    </div>
+    <div class="mb-6">
+      <div class="text-4xl font-black grad-text">{{ price_setup | safe }}</div>
+      <div class="text-sm text-brand-navy/70">+ {{ price_monthly | safe }} / mois</div>
+    </div>
+    <ul class="space-y-3 mb-8 flex-grow">
+      {% for f in features %}
+      <li class="flex items-start gap-2 text-sm text-brand-navy/80">
+        <span class="grad-text font-black flex-shrink-0" aria-hidden="true">✓</span>
+        <span>{{ f | safe }}</span>
+      </li>
+      {% endfor %}
+    </ul>
+    {% from 'macros/button.html' import button %}
+    {{ button('Réserver ' + name, href=cta_url + '/' + slug, variant='primary' if recommended else 'secondary', size='lg') }}
+  </div>
+</div>
+{%- endmacro -%}