Innova-AI/dictia-public
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat(brand): logo officiel DictIA + palette blue/cyan/fuchsia (matche le logo)

Browse Source 
Logos officiels installés :
- static/images/dictia-logo.png (28 KB optimisé 256×256)
- static/images/dictia-logo-128.png (10 KB retina)
- static/images/dictia-logo-fullres.png (originaux conservés OG/social)
- static/images/dictia-logo.svg + dictia-logo-nom.svg (cleaned C2PA metadata)
- Header marketing/base.html : <img> 40×40 + wordmark "DictIA" + tagline "Transcription"
- Footer marketing/_footer.html : <img> 36×36 + wordmark
- Favicon mis à jour vers logo PNG

Note : SVG sources sont des PNG base64 wrappés (pas de vrais paths) — PNG utilisé
en production (8× plus léger), SVG conservé pour fallback.

Palette canonique alignée sur le logo :
- brand-b1 : #7c3aed (mauve) → #2563eb (blue-600 vibrant — primary)
- brand-b2 : #a855f7 (mauve clair) → #06b6d4 (cyan-500 — aqua mid)
- brand-b3 : #06b6d4 (aqua) → #c026d3 (fuchsia-600 — magenta accent)
- Gradient signature : linear-gradient(118deg, #2563eb, #06b6d4 52%, #c026d3)
- Box shadow CTA : rgba(37,99,235,0.28/0.42)
- 72 remplacements hex/rgba dans 5 templates marketing/legal + email service

Tests : 81 passed / 3 failed (3 échecs pré-existants /blog + trust-bar phrasing,
non liés à ce changement). 0 régression.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Allison
2026-04-28 15:54:17 -04:00
parent 34d40162b3
commit 575db5e342
20 changed files with 166 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
templates/legal/_layout.html
View File

@@ -27,7 +27,7 @@
height: 4px;
margin-top: 0.5rem;
border-radius: 4px;
background: linear-gradient(118deg, #7c3aed, #a855f7 52%, #06b6d4);
background: linear-gradient(118deg, #2563eb, #06b6d4 52%, #06b6d4);
}
.legal-content h3 {
font-size: 1.25rem; /* 20px */
@@ -60,16 +60,16 @@
.legal-content ol { list-style-type: decimal; list-style-position: outside; }
.legal-content li { margin-bottom: 0.35rem; }
.legal-content a {
background: linear-gradient(118deg, #7c3aed, #a855f7 52%, #06b6d4);
background: linear-gradient(118deg, #2563eb, #06b6d4 52%, #06b6d4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 600;
text-decoration: underline;
text-decoration-color: #7c3aed;
text-decoration-color: #2563eb;
}
.legal-content a:focus-visible {
outline: 2px solid #7c3aed;
outline: 2px solid #2563eb;
outline-offset: 2px;
border-radius: 2px;
}
@@ -95,7 +95,7 @@
background-color: #fafbfd;
}
.legal-content blockquote {
border-left: 4px solid #7c3aed;
border-left: 4px solid #2563eb;
background-color: rgba(247, 249, 252, 0.6);
padding: 0.75rem 1rem;
margin: 1.25rem 0;
@@ -156,12 +156,12 @@
transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}
.legal-toc a:hover {
background-color: rgba(124, 58, 237, 0.05);
background-color: rgba(37,99,235, 0.05);
}
.legal-toc a.is-active {
border-left-color: #7c3aed;
color: #7c3aed !important;
background-color: rgba(124, 58, 237, 0.06);
border-left-color: #2563eb;
color: #2563eb !important;
background-color: rgba(37,99,235, 0.06);
}
.legal-breadcrumb {
position: sticky;

8
templates/legal/index.html
View File

@@ -13,16 +13,16 @@
transform: translateY(-2px);
}
.legal-card:focus-visible {
outline: 2px solid #7c3aed;
outline: 2px solid #2563eb;
outline-offset: 3px;
}
/* Icône circulaire avec dégradé de marque, contraste suffisant. */
.legal-card-icon {
background: linear-gradient(135deg, rgba(124,58,237,0.10), rgba(6,182,212,0.10));
color: #7c3aed;
background: linear-gradient(135deg, rgba(37,99,235,0.10), rgba(6,182,212,0.10));
color: #2563eb;
}
.legal-card.is-external .legal-card-icon {
background: linear-gradient(135deg, rgba(168,85,247,0.12), rgba(6,182,212,0.12));
background: linear-gradient(135deg, rgba(6,182,212,0.12), rgba(6,182,212,0.12));
}
/* Print : pas de bouton CTA, pas d'animations. */
@media print {

10
templates/marketing/_footer.html
View File

@@ -5,7 +5,15 @@
{# Column 1 — Brand + contact #}
<div>
<a href="/" class="font-black text-xl grad-text" aria-label="DictIA — page d'accueil">DictIA</a>
<a href="/" class="inline-flex items-center gap-3" aria-label="DictIA — page d'accueil">
<img src="{{ url_for('static', filename='images/dictia-logo.png') }}"
alt=""
width="36"
height="36"
class="w-9 h-9"
aria-hidden="true">
<span class="font-black text-xl grad-text">DictIA</span>
</a>
<p class="text-sm text-white/70 mt-3">Transcription IA conforme Loi&nbsp;25, conçue au Québec.</p>
<address class="not-italic text-xs text-white/70 mt-4 leading-relaxed">
77&nbsp;ch. de la Seigneurie<br>

17
templates/marketing/base.html
View File

@@ -31,7 +31,8 @@
<link rel="stylesheet" href="/static/css/marketing.css">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/static/images/favicon.svg">
<link rel="icon" type="image/png" href="/static/images/dictia-logo.png">
<link rel="alternate icon" type="image/svg+xml" href="/static/images/favicon.svg">
{% block schema %}{% endblock %}
{% block head_extra %}{% endblock %}
@@ -40,9 +41,17 @@
<!-- Glassmorphism header (FlexiHub style: 62px, navy/.97 + backdrop-blur-xl + 0.045 border) -->
<header class="fixed top-0 inset-x-0 z-50 h-[62px] bg-brand-navy/[0.97] backdrop-blur-xl border-b border-white/[0.045]">
<div class="max-w-[1200px] mx-auto h-full px-6 flex items-center justify-between">
<a href="/" class="flex flex-col leading-none" aria-label="DictIA — Transcription, accueil">
<span class="font-black text-xl tracking-tight grad-text">DictIA</span>
<span class="text-[10px] uppercase tracking-[0.2em] text-white font-medium mt-0.5">Transcription</span>
<a href="/" class="flex items-center gap-3 leading-none" aria-label="DictIA — Transcription, accueil">
<img src="{{ url_for('static', filename='images/dictia-logo.png') }}"
alt=""
width="40"
height="40"
class="w-10 h-10 flex-shrink-0"
aria-hidden="true">
<span class="flex flex-col">
<span class="font-black text-xl tracking-tight grad-text">DictIA</span>
<span class="text-[10px] uppercase tracking-[0.2em] text-white font-medium mt-0.5">Transcription</span>
</span>
</a>
<nav class="hidden md:flex gap-8 text-sm font-medium text-white/80" aria-label="Navigation principale">

16
templates/marketing/fonctionnalites.html
View File

@@ -15,7 +15,7 @@
bottom: -10px;
width: 0;
height: 3px;
background: linear-gradient(118deg, #7c3aed, #a855f7 52%, #06b6d4);
background: linear-gradient(118deg, #2563eb, #06b6d4 52%, #06b6d4);
transform: translateX(-50%);
transition: width 600ms ease-out;
}
@@ -27,16 +27,16 @@
/* Hover lift cards */
.ani-lift { transition: transform 200ms ease-out, box-shadow 200ms ease-out; }
.ani-lift:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(124, 58, 237, 0.18); }
.ani-lift:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(37,99,235, 0.18); }
/* Sticky sub-nav active link */
.subnav-link[aria-current="true"] { color: #7c3aed; }
.subnav-link[aria-current="true"] { color: #2563eb; }
.subnav-link[aria-current="true"]::after {
content: '';
display: block;
height: 2px;
margin-top: 4px;
background: linear-gradient(118deg, #7c3aed, #a855f7 52%, #06b6d4);
background: linear-gradient(118deg, #2563eb, #06b6d4 52%, #06b6d4);
}
/* Cosmic float orbs (n'utilise pas tc-float-y pour éviter rebuild) */
@@ -46,8 +46,8 @@
/* DictIA Cloud pulse glow */
@keyframes card-pulse-glow {
0%, 100% { box-shadow: 0 4px 20px rgba(124, 58, 237, 0.28); }
50% { box-shadow: 0 12px 40px rgba(124, 58, 237, 0.5); }
0%, 100% { box-shadow: 0 4px 20px rgba(37,99,235, 0.28); }
50% { box-shadow: 0 12px 40px rgba(37,99,235, 0.5); }
}
.card-pulse-glow { animation: card-pulse-glow 3s ease-in-out infinite; }
@@ -76,13 +76,13 @@
{# Cosmic orbs background — float animation subtile #}
<div class="absolute inset-0 pointer-events-none" aria-hidden="true">
<div class="orb-float-a absolute top-1/4 left-1/4 w-[600px] h-[600px] rounded-full"
style="background: radial-gradient(circle, rgba(124,58,237,0.16) 0%, transparent 60%); filter: blur(40px);"></div>
style="background: radial-gradient(circle, rgba(37,99,235,0.16) 0%, transparent 60%); filter: blur(40px);"></div>
<div class="orb-float-b absolute top-1/2 right-1/4 w-[500px] h-[500px] rounded-full"
style="background: radial-gradient(circle, rgba(6,182,212,0.07) 0%, transparent 60%); filter: blur(40px);"></div>
<div class="absolute inset-0"
style="background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 40px 40px;"></div>
<div class="absolute top-1/3 left-0 right-0 h-px"
style="background: linear-gradient(90deg, transparent, rgba(124,58,237,0.3), rgba(6,182,212,0.2), transparent);"></div>
style="background: linear-gradient(90deg, transparent, rgba(37,99,235,0.3), rgba(6,182,212,0.2), transparent);"></div>
</div>
<div class="relative max-w-[1200px] mx-auto px-6 text-center">

72
templates/marketing/landing.html
View File

@@ -19,7 +19,7 @@
}
.hero-flow-card.is-active {
transform: scale(1.05);
box-shadow: 0 0 22px rgba(6, 182, 212, 0.45), 0 0 44px rgba(124, 58, 237, 0.18);
box-shadow: 0 0 22px rgba(6, 182, 212, 0.45), 0 0 44px rgba(37,99,235, 0.18);
}
.hero-flow-card.is-inactive { opacity: 0.45; }
/* Animated arrow draw between cards */
@@ -63,7 +63,7 @@
border-radius: 9999px;
pointer-events: none;
z-index: 9999;
background: radial-gradient(circle, rgba(6,182,212,0.18) 0%, rgba(124,58,237,0.10) 50%, transparent 70%);
background: radial-gradient(circle, rgba(6,182,212,0.18) 0%, rgba(37,99,235,0.10) 50%, transparent 70%);
animation: hero-shockwave 700ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
/* ── Word-staggered title reveal ── */
@@ -148,7 +148,7 @@
<div class="absolute inset-0 pointer-events-none" aria-hidden="true">
{# Orb 1 — primary mauve, top-left #}
<div class="absolute top-1/4 left-1/4 w-[600px] h-[600px] rounded-full opacity-100"
style="background: radial-gradient(circle, rgba(124,58,237,0.16) 0%, transparent 60%); filter: blur(40px);"></div>
style="background: radial-gradient(circle, rgba(37,99,235,0.16) 0%, transparent 60%); filter: blur(40px);"></div>
{# Orb 2 — aqua, mid-right #}
<div class="absolute top-1/2 right-1/4 w-[500px] h-[500px] rounded-full"
style="background: radial-gradient(circle, rgba(6,182,212,0.07) 0%, transparent 60%); filter: blur(40px);"></div>
@@ -160,7 +160,7 @@
style="background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 40px 40px;"></div>
{# Horizontal accent line — gradient mauve to aqua to transparent #}
<div class="absolute top-1/3 left-0 right-0 h-px"
style="background: linear-gradient(90deg, transparent, rgba(124,58,237,0.3), rgba(6,182,212,0.2), transparent);"></div>
style="background: linear-gradient(90deg, transparent, rgba(37,99,235,0.3), rgba(6,182,212,0.2), transparent);"></div>
</div>
{# 3D abstract orb — reacts to mouse via Alpine ox/oy → CSS variables #}
@@ -174,14 +174,14 @@
<div class="absolute inset-0 rounded-full border border-brand-b3/15" style="transform: scale(1.35);"></div>
{# Ambient blob #}
<div class="absolute inset-0 rounded-full"
style="background: radial-gradient(ellipse at 40% 40%, rgba(167,139,250,0.14) 0%, rgba(6,182,212,0.07) 50%, transparent 75%); filter: blur(20px);"></div>
style="background: radial-gradient(ellipse at 40% 40%, rgba(96,165,250,0.14) 0%, rgba(6,182,212,0.07) 50%, transparent 75%); filter: blur(20px);"></div>
{# Rotating mesh ring A #}
<div class="hero-orb-ring-a absolute inset-0 rounded-full border border-dashed border-white/[0.07]" style="transform: scale(1.15);"></div>
{# Rotating mesh ring B #}
<div class="hero-orb-ring-b absolute inset-0 rounded-full border border-white/[0.05]" style="transform: scale(0.9);"></div>
{# Inner glow core #}
<div class="absolute inset-[30%] rounded-full"
style="background: radial-gradient(circle, rgba(167,139,250,0.25) 0%, rgba(6,182,212,0.08) 60%, transparent 100%);"></div>
style="background: radial-gradient(circle, rgba(96,165,250,0.25) 0%, rgba(6,182,212,0.08) 60%, transparent 100%);"></div>
</div>
</div>
@@ -273,7 +273,7 @@
<span class="relative inline-flex">
{# Pulse halo behind the primary CTA #}
<span class="hero-cta-halo absolute -inset-1 rounded pointer-events-none"
style="background: radial-gradient(ellipse, rgba(167,139,250,0.50) 0%, transparent 70%);"
style="background: radial-gradient(ellipse, rgba(96,165,250,0.50) 0%, transparent 70%);"
aria-hidden="true"></span>
<a
href="/contact"
@@ -1024,13 +1024,13 @@
</g>
{# Order bar — visible quand p ≈ 1 #}
<g class="wave-bar" :style="`opacity: ${p}`">
<rect x="{{ cx - bw / 2 }}" y="{{ 25 - order_heights[i] / 2 }}" width="{{ bw }}" height="{{ order_heights[i] }}" rx="{{ bw / 2 }}" fill="rgba(167,139,250,0.6)"/>
<rect x="{{ cx - bw / 2 }}" y="{{ 25 - order_heights[i] / 2 }}" width="{{ bw }}" height="{{ order_heights[i] }}" rx="{{ bw / 2 }}" fill="rgba(96,165,250,0.6)"/>
</g>
{% endfor %}
{# Bouclier holographique (état ordre) #}
<path d="M 50 8 L 68 14 L 68 27 Q 68 38 50 43 Q 32 38 32 27 L 32 14 Z"
fill="none" stroke="rgba(167,139,250,0.55)" stroke-width="0.55" stroke-dasharray="2.5 2"
fill="none" stroke="rgba(96,165,250,0.55)" stroke-width="0.55" stroke-dasharray="2.5 2"
:style="`opacity: ${orderOp * 0.4}`"/>
</svg>
@@ -1040,16 +1040,16 @@
<div class="w-10 h-10 md:w-12 md:h-12 rounded flex items-center justify-center backdrop-blur-md border"
:style="`background: rgba(${Math.round(255 + (167-255)*p)},${Math.round(60 + (139-60)*p)},${Math.round(60 + (250-60)*p)},0.12); border-color: rgba(${Math.round(255 + (167-255)*p)},${Math.round(80 + (139-80)*p)},${Math.round(80 + (250-80)*p)},0.28);`">
<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 md:w-5 md:h-5"
:style="`color: ${p < 0.5 ? '#FF6B6B' : '#a78bfa'}`"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="22"/></svg>
:style="`color: ${p < 0.5 ? '#FF6B6B' : '#60a5fa'}`"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="22"/></svg>
</div>
<span class="text-[8px] font-medium" :style="`color: ${p < 0.5 ? 'rgba(255,107,107,0.65)' : 'rgba(167,139,250,0.65)'}`">Audio</span>
<span class="text-[8px] font-medium" :style="`color: ${p < 0.5 ? 'rgba(255,107,107,0.65)' : 'rgba(96,165,250,0.65)'}`">Audio</span>
</div>
{# Icône Texte transcrit (droite) #}
<div class="absolute z-20 right-[3%] top-1/2 -translate-y-1/2 flex flex-col items-center gap-1.5"
:style="`opacity: ${orderOp}`" aria-hidden="true">
<div class="w-10 h-10 md:w-12 md:h-12 rounded flex items-center justify-center backdrop-blur-md border border-brand-b1/30"
style="background: linear-gradient(135deg, rgba(167,139,250,0.15), rgba(124,58,237,0.07)); box-shadow: 0 0 18px rgba(167,139,250,0.18);">
style="background: linear-gradient(135deg, rgba(96,165,250,0.15), rgba(37,99,235,0.07)); box-shadow: 0 0 18px rgba(96,165,250,0.18);">
<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 md:w-5 md:h-5 text-brand-b1"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" y1="13" x2="15" y2="13"/></svg>
</div>
<span class="text-[8px] font-medium text-brand-b1/70">Texte</span>
@@ -1076,7 +1076,7 @@
<div class="absolute inset-0 z-10 pointer-events-none" :style="`opacity: ${orderOp}`" aria-hidden="true">
{% for fy in [18, 21, 24, 27, 30] %}
<span class="wave-flow absolute w-1 h-1 rounded-full bg-brand-b1"
style="top: {{ fy }}%; left: 12%; box-shadow: 0 0 5px rgba(167,139,250,0.7); animation-delay: {{ loop.index0 * 0.32 }}s;"></span>
style="top: {{ fy }}%; left: 12%; box-shadow: 0 0 5px rgba(96,165,250,0.7); animation-delay: {{ loop.index0 * 0.32 }}s;"></span>
{% endfor %}
</div>
@@ -1104,7 +1104,7 @@
{'text': '100&nbsp;% Confidentiel — Hébergé au Qc', 'x': 18, 'y': 40}
] %}
<div class="absolute flex items-center gap-1.5 px-2 py-1 rounded backdrop-blur-sm"
style="left: {{ sol.x }}%; top: {{ sol.y }}%; transform: translate(-50%, -50%); background: rgba(167,139,250,0.10); border: 1px solid rgba(167,139,250,0.20);">
style="left: {{ sol.x }}%; top: {{ sol.y }}%; transform: translate(-50%, -50%); background: rgba(96,165,250,0.10); border: 1px solid rgba(96,165,250,0.20);">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="w-2.5 h-2.5 text-brand-b1 shrink-0" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg>
<span class="text-[8px] md:text-[10px] text-white/80 whitespace-nowrap">{{ sol.text | safe }}</span>
</div>
@@ -1129,7 +1129,7 @@
@click.stop="toggle()"
class="absolute bottom-3 left-1/2 -translate-x-1/2 z-30 inline-flex items-center gap-2 px-5 py-2.5 rounded text-xs font-bold transition-all border focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2"
:class="activated ? 'border-brand-b1/30 text-brand-b1' : 'border-white/15 text-white/70'"
:style="activated ? 'background: linear-gradient(135deg, rgba(167,139,250,0.2), rgba(124,58,237,0.1));' : 'background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));'"
:style="activated ? 'background: linear-gradient(135deg, rgba(96,165,250,0.2), rgba(37,99,235,0.1));' : 'background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));'"
x-cloak>
<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-3.5 h-3.5"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/></svg>
<span x-text="activated ? 'Voir sans DictIA' : 'Activer DictIA'"></span>
@@ -1220,7 +1220,7 @@
<div class="absolute h-px bg-brand-border" style="top: 44px; left: 12.5%; right: 12.5%;" aria-hidden="true"></div>
<div
class="pipeline-track-fill absolute h-[2px]"
style="top: 43px; left: 12.5%; width: 75%; background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%);"
style="top: 43px; left: 12.5%; width: 75%; background: linear-gradient(90deg, #2563eb 0%, #06b6d4 100%);"
:style="`transform: scaleX(${steps[active].fillPct / 100})`"
aria-hidden="true"
></div>
@@ -1228,7 +1228,7 @@
{# Moving glowing dot — left transitions via CSS #}
<div
class="pipeline-dot absolute w-3.5 h-3.5 rounded-full bg-white pointer-events-none z-10"
style="top: 44px; transform: translate(-50%, -50%); box-shadow: 0 0 18px rgba(168,85,247,0.55), 0 0 36px rgba(124,58,237,0.35);"
style="top: 44px; transform: translate(-50%, -50%); box-shadow: 0 0 18px rgba(6,182,212,0.55), 0 0 36px rgba(37,99,235,0.35);"
:style="`left: ${steps[active].positionPct}%`"
aria-hidden="true"
></div>
@@ -1258,7 +1258,7 @@
<span
class="relative w-[88px] h-[88px] rounded-full border-2 flex items-center justify-center transition-all duration-300"
:class="{
'border-brand-b1 bg-brand-b1/10 scale-105 shadow-[0_0_28px_rgba(124,58,237,0.35)]': active === {{ loop.index0 }},
'border-brand-b1 bg-brand-b1/10 scale-105 shadow-[0_0_28px_rgba(37,99,235,0.35)]': active === {{ loop.index0 }},
'border-brand-b3/60 bg-brand-b3/10': active > {{ loop.index0 }},
'border-brand-border bg-white': active < {{ loop.index0 }}
}"
@@ -1283,7 +1283,7 @@
viewBox="0 0 88 88"
aria-hidden="true"
>
<circle class="pipeline-sweep-ring" cx="44" cy="44" r="41" fill="none" stroke="#7c3aed" stroke-width="2" stroke-linecap="round"></circle>
<circle class="pipeline-sweep-ring" cx="44" cy="44" r="41" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round"></circle>
</svg>
</template>
</span>
@@ -1318,7 +1318,7 @@
<span
:key="active"
class="pipeline-underline absolute bottom-0 left-0 h-[2px] w-full"
style="background: linear-gradient(90deg, #7c3aed, #a855f7);"
style="background: linear-gradient(90deg, #2563eb, #06b6d4);"
aria-hidden="true"
></span>
</div>
@@ -1470,8 +1470,8 @@
.hub-ring-3 { animation-delay: 2s; }
/* DictIA core breathing glow */
@keyframes hub-core-breathe {
0%, 100% { box-shadow: 0 0 26px rgba(168,85,247,0.55), 0 0 56px rgba(168,85,247,0.18); }
50% { box-shadow: 0 0 38px rgba(168,85,247,0.75), 0 0 72px rgba(168,85,247,0.28); }
0%, 100% { box-shadow: 0 0 26px rgba(6,182,212,0.55), 0 0 56px rgba(6,182,212,0.18); }
50% { box-shadow: 0 0 38px rgba(6,182,212,0.75), 0 0 72px rgba(6,182,212,0.28); }
}
.hub-core { animation: hub-core-breathe 3.5s ease-in-out infinite; }
/* Reduced motion : freeze everything */
@@ -1533,14 +1533,14 @@
{# Render bezier connections (visible strokes) — DictIA → Hubs (thick), Hub → Tools (thin) #}
{# DictIA → Hubs #}
<use href="#hub-path-docs" fill="none" stroke="#7c3aed" stroke-width="1.5" opacity="0.55" />
<use href="#hub-path-docs" fill="none" stroke="#2563eb" stroke-width="1.5" opacity="0.55" />
<use href="#hub-path-comm" fill="none" stroke="#06b6d4" stroke-width="1.5" opacity="0.55" />
<use href="#hub-path-auto" fill="none" stroke="#8b5cf6" stroke-width="1.5" opacity="0.55" />
{# Hub → Tool (lighter) #}
<use href="#hub-path-word" fill="none" stroke="#7c3aed" stroke-width="1" opacity="0.30" />
<use href="#hub-path-google" fill="none" stroke="#7c3aed" stroke-width="1" opacity="0.30" />
<use href="#hub-path-obsidian" fill="none" stroke="#7c3aed" stroke-width="1" opacity="0.30" />
<use href="#hub-path-word" fill="none" stroke="#2563eb" stroke-width="1" opacity="0.30" />
<use href="#hub-path-google" fill="none" stroke="#2563eb" stroke-width="1" opacity="0.30" />
<use href="#hub-path-obsidian" fill="none" stroke="#2563eb" stroke-width="1" opacity="0.30" />
<use href="#hub-path-outlook" fill="none" stroke="#06b6d4" stroke-width="1" opacity="0.30" />
<use href="#hub-path-teams" fill="none" stroke="#06b6d4" stroke-width="1" opacity="0.30" />
<use href="#hub-path-notion" fill="none" stroke="#06b6d4" stroke-width="1" opacity="0.30" />
@@ -1550,7 +1550,7 @@
{# Animated particles — DictIA → Hubs (bigger, dual particles) #}
{% for hub in [
('docs', '#7c3aed', '0s', '2.4s'),
('docs', '#2563eb', '0s', '2.4s'),
('comm', '#06b6d4', '0.8s', '2.4s'),
('auto', '#8b5cf6', '1.6s', '2.4s')
] %}
@@ -1568,9 +1568,9 @@
{# Animated particles — Hub → Tool (smaller, fast) #}
{% for tool in [
('word', '#7c3aed', '0s'),
('google', '#7c3aed', '0.4s'),
('obsidian', '#7c3aed', '0.8s'),
('word', '#2563eb', '0s'),
('google', '#2563eb', '0.4s'),
('obsidian', '#2563eb', '0.8s'),
('outlook', '#06b6d4', '0.2s'),
('teams', '#06b6d4', '0.6s'),
('notion', '#06b6d4', '1.0s'),
@@ -1602,7 +1602,7 @@
{# Hub labels overlay — positioned to match SVG hub coords (200/460 = 43.5% top, 168/900=18.7% / 450/900=50% / 732/900=81.3% left) #}
{% set hub_data = [
('Documents', 'Word · Google Docs · Obsidian', '18.7%', 'rgba(124,58,237,0.10)', 'rgba(124,58,237,0.30)', 'text-violet-300'),
('Documents', 'Word · Google Docs · Obsidian', '18.7%', 'rgba(37,99,235,0.10)', 'rgba(37,99,235,0.30)', 'text-violet-300'),
('Communication', 'Outlook · Teams · Notion', '50%', 'rgba(6,182,212,0.10)', 'rgba(6,182,212,0.30)', 'text-cyan-300'),
('Automatisation', 'Zapier · Make · n8n', '81.3%', 'rgba(139,92,246,0.10)', 'rgba(139,92,246,0.30)', 'text-purple-300')
] %}
@@ -2148,7 +2148,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"
class="relative w-5 h-5 transition-colors duration-300"
:class="step >= 2 ? 'text-amber-500' : 'text-brand-b1'"
:style="`filter: drop-shadow(0 0 ${step >= 2 ? '6px rgba(245,158,11,0.7)' : '4px rgba(124,58,237,0.5)'})`"
:style="`filter: drop-shadow(0 0 ${step >= 2 ? '6px rgba(245,158,11,0.7)' : '4px rgba(37,99,235,0.5)'})`"
aria-hidden="true">
<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
</svg>
@@ -2225,15 +2225,15 @@
<a href="{{ reg.href }}" target="_blank" rel="noopener noreferrer"
class="cadre-reg group flex items-start gap-2 rounded px-2.5 py-1.5 no-underline border focus-visible:outline-2 focus-visible:outline-amber-500 focus-visible:outline-offset-2"
:class="flashIdx === {{ loop.index0 }} ? 'is-flash' : ''"
style="border-color: {{ 'rgba(239,68,68,0.20)' if reg.risk else 'rgba(124,58,237,0.15)' }};">
style="border-color: {{ 'rgba(239,68,68,0.20)' if reg.risk else 'rgba(37,99,235,0.15)' }};">
<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-3.5 h-3.5 mt-0.5 shrink-0"
style="color: {{ 'rgba(239,68,68,0.65)' if reg.risk else 'rgba(124,58,237,0.55)' }};"
style="color: {{ 'rgba(239,68,68,0.65)' if reg.risk else 'rgba(37,99,235,0.55)' }};"
aria-hidden="true"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
<div class="min-w-0 flex-1">
<div class="flex items-start gap-1.5 flex-wrap">
<span class="cadre-reg-label font-semibold text-[11px] leading-tight shrink-0 transition-colors"
style="color: {{ '#dc2626' if reg.risk else '#7c3aed' }};">{{ reg.label }}</span>
style="color: {{ '#dc2626' if reg.risk else '#2563eb' }};">{{ reg.label }}</span>
<span class="text-[10px] leading-tight text-brand-navy/55">{{ reg.detail | safe }}</span>
</div>
</div>
@@ -2513,7 +2513,7 @@
{# Two warm cosmic orbs to mirror the Hero — visual closure of the page #}
<div class="absolute inset-0 pointer-events-none" aria-hidden="true">
<div class="absolute top-1/4 left-1/3 w-[500px] h-[500px] rounded-full"
style="background: radial-gradient(circle, rgba(124,58,237,0.14) 0%, transparent 60%); filter: blur(50px);"></div>
style="background: radial-gradient(circle, rgba(37,99,235,0.14) 0%, transparent 60%); filter: blur(50px);"></div>
<div class="absolute bottom-1/4 right-1/3 w-[450px] h-[450px] rounded-full"
style="background: radial-gradient(circle, rgba(6,182,212,0.10) 0%, transparent 60%); filter: blur(50px);"></div>
</div>

2
templates/marketing/tarifs.html
View File

@@ -117,7 +117,7 @@
<section class="relative bg-brand-navy text-white py-20 overflow-hidden" aria-labelledby="tarifs-cta-title">
<div class="absolute inset-0 pointer-events-none" aria-hidden="true">
<div class="absolute top-1/3 left-1/3 w-[500px] h-[500px] rounded-full"
style="background: radial-gradient(circle, rgba(124,58,237,0.12) 0%, transparent 60%); filter: blur(50px);"></div>
style="background: radial-gradient(circle, rgba(37,99,235,0.12) 0%, transparent 60%); filter: blur(50px);"></div>
</div>
<div class="relative max-w-[820px] mx-auto px-6 text-center">
<h2 id="tarifs-cta-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black mb-6">