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

refactor(brand): décale palette bleu→mauve dégradé (b1=#7c3aed, b2=#a855f7, b3=#06b6d4 aqua) pour différencier DictIA

Browse Source 
Décale la palette canonique DictIA du bleu/cyan/vert vers mauve/violet/aqua
afin de distinguer visuellement le produit DictIA des autres outils InnovA AI
(qui restent sur palette bleue) tout en gardant la même structure de gradient,
mêmes tokens Tailwind, et même intensité visuelle.

Mapping appliqué:
- Hex semantic: #0062ff → #7c3aed (mauve), #00bdd8 → #a855f7 (lighter mauve)
- Hex aqua décoratif: #00c896 → #06b6d4 (cyan-500, aqua préservé)
- Hex secondaire: #6B9FFF / rgba(107,159,255,*) → #a78bfa (violet-400)
- Hex blue-700 #1d4ed8 (cadre reg label) → #7c3aed (mauve)
- Box shadows / rgba opacités: rgba(0,98,255,*) → rgba(124,58,237,*)
- Décoratif (orbes cosmiques, glows): mauve+aqua mix pour préserver l'effet
  "cosmic dégradé" — orbe primaire en mauve, orbes secondaires en aqua
- Hub network DictIA: Documents=mauve, Communication=aqua, Automatisation
  reste #8b5cf6 (déjà violet, marqueur visuel distinct via positionnement)
- Couleurs sémantiques fonctionnelles (red/green pour erreurs/succès, amber
  pour alertes) inchangées

Fichiers modifiés:
- static/css/tailwind.config.js (brand.b1/b2/b3 + brand-grad + boxShadow.cta
  + boxShadow.cta-hover + keyframes.tc-pulse-glow)
- static/css/marketing.css (rebuild Tailwind: 169356 → 163036 bytes)
- templates/legal/{_layout,index}.html
- templates/marketing/{landing,fonctionnalites,conformite,tarifs}.html
- tests/test_marketing_landing_template.py (test_hero_has_cosmic_orbs_background
  mis à jour avec assertions mauve/aqua au lieu de blue/cyan/green)

Hors scope (non touchés):
- Couleurs Tailwind utility (red/green/amber/emerald) sémantiques
- --brand-navy* (backgrounds dark restent neutres)
- Templates legacy (account.html, admin.html, components/, modals/)
- #8b5cf6 (Automatisation hub), #f59e0b (alertes), #ef4444 (erreurs)

Tests: 111 passed, 5 failed (toutes 5 pré-existantes, non liées aux couleurs:
/blog link manquant, MAPP eyebrow, SOC 2 phrasing, Gitea URL).
HTTP 200 vérifié sur /, /fonctionnalites, /tarifs, /conformite, /legal/,
/legal/conditions.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Allison
2026-04-28 15:39:09 -04:00
parent 680df39089
commit 34d40162b3
9 changed files with 151 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
static/css/marketing.css
View File

@@ -1703,31 +1703,31 @@
} }
} }
.border-brand-b1 { .border-brand-b1 {
border-color: #0062ff; border-color: #7c3aed;
} }
.border-brand-b1\/15 { .border-brand-b1\/15 {
border-color: color-mix(in oklab, #0062ff 15%, transparent); border-color: color-mix(in oklab, #7c3aed 15%, transparent);
} }
.border-brand-b1\/20 { .border-brand-b1\/20 {
border-color: color-mix(in oklab, #0062ff 20%, transparent); border-color: color-mix(in oklab, #7c3aed 20%, transparent);
} }
.border-brand-b1\/25 { .border-brand-b1\/25 {
border-color: color-mix(in oklab, #0062ff 25%, transparent); border-color: color-mix(in oklab, #7c3aed 25%, transparent);
} }
.border-brand-b1\/30 { .border-brand-b1\/30 {
border-color: color-mix(in oklab, #0062ff 30%, transparent); border-color: color-mix(in oklab, #7c3aed 30%, transparent);
} }
.border-brand-b1\/35 { .border-brand-b1\/35 {
border-color: color-mix(in oklab, #0062ff 35%, transparent); border-color: color-mix(in oklab, #7c3aed 35%, transparent);
} }
.border-brand-b2\/40 { .border-brand-b2\/40 {
border-color: color-mix(in oklab, #00bdd8 40%, transparent); border-color: color-mix(in oklab, #a855f7 40%, transparent);
} }
.border-brand-b3\/15 { .border-brand-b3\/15 {
border-color: color-mix(in oklab, #00c896 15%, transparent); border-color: color-mix(in oklab, #06b6d4 15%, transparent);
} }
.border-brand-b3\/60 { .border-brand-b3\/60 {
border-color: color-mix(in oklab, #00c896 60%, transparent); border-color: color-mix(in oklab, #06b6d4 60%, transparent);
} }
.border-brand-border { .border-brand-border {
border-color: #e6ebf2; border-color: #e6ebf2;
@@ -2030,28 +2030,28 @@
background-color: var(--color-blue-600); background-color: var(--color-blue-600);
} }
.bg-brand-b1 { .bg-brand-b1 {
background-color: #0062ff; background-color: #7c3aed;
} }
.bg-brand-b1\/5 { .bg-brand-b1\/5 {
background-color: color-mix(in oklab, #0062ff 5%, transparent); background-color: color-mix(in oklab, #7c3aed 5%, transparent);
} }
.bg-brand-b1\/10 { .bg-brand-b1\/10 {
background-color: color-mix(in oklab, #0062ff 10%, transparent); background-color: color-mix(in oklab, #7c3aed 10%, transparent);
} }
.bg-brand-b1\/15 { .bg-brand-b1\/15 {
background-color: color-mix(in oklab, #0062ff 15%, transparent); background-color: color-mix(in oklab, #7c3aed 15%, transparent);
} }
.bg-brand-b1\/\[0\.06\] { .bg-brand-b1\/\[0\.06\] {
background-color: color-mix(in oklab, #0062ff 6%, transparent); background-color: color-mix(in oklab, #7c3aed 6%, transparent);
} }
.bg-brand-b3 { .bg-brand-b3 {
background-color: #00c896; background-color: #06b6d4;
} }
.bg-brand-b3\/10 { .bg-brand-b3\/10 {
background-color: color-mix(in oklab, #00c896 10%, transparent); background-color: color-mix(in oklab, #06b6d4 10%, transparent);
} }
.bg-brand-b3\/60 { .bg-brand-b3\/60 {
background-color: color-mix(in oklab, #00c896 60%, transparent); background-color: color-mix(in oklab, #06b6d4 60%, transparent);
} }
.bg-brand-bg { .bg-brand-bg {
background-color: #f7f9fc; background-color: #f7f9fc;
@@ -2370,15 +2370,15 @@
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
} }
.from-brand-b1\/15 { .from-brand-b1\/15 {
--tw-gradient-from: color-mix(in oklab, #0062ff 15%, transparent); --tw-gradient-from: color-mix(in oklab, #7c3aed 15%, transparent);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
} }
.from-brand-b1\/\[0\.06\] { .from-brand-b1\/\[0\.06\] {
--tw-gradient-from: color-mix(in oklab, #0062ff 6%, transparent); --tw-gradient-from: color-mix(in oklab, #7c3aed 6%, transparent);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
} }
.from-brand-b3 { .from-brand-b3 {
--tw-gradient-from: #00c896; --tw-gradient-from: #06b6d4;
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
} }
.from-orange-500 { .from-orange-500 {
@@ -2421,15 +2421,15 @@
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
} }
.to-brand-b1 { .to-brand-b1 {
--tw-gradient-to: #0062ff; --tw-gradient-to: #7c3aed;
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
} }
.to-brand-b3\/10 { .to-brand-b3\/10 {
--tw-gradient-to: color-mix(in oklab, #00c896 10%, transparent); --tw-gradient-to: color-mix(in oklab, #06b6d4 10%, transparent);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
} }
.to-brand-b3\/\[0\.04\] { .to-brand-b3\/\[0\.04\] {
--tw-gradient-to: color-mix(in oklab, #00c896 4%, transparent); --tw-gradient-to: color-mix(in oklab, #06b6d4 4%, transparent);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
} }
.to-purple-500 { .to-purple-500 {
@@ -2979,9 +2979,6 @@
color: color-mix(in oklab, var(--color-amber-900) 90%, transparent); color: color-mix(in oklab, var(--color-amber-900) 90%, transparent);
} }
} }
.text-blue-300 {
color: var(--color-blue-300);
}
.text-blue-400 { .text-blue-400 {
color: var(--color-blue-400); color: var(--color-blue-400);
} }
@@ -3001,31 +2998,31 @@
color: var(--color-blue-900); color: var(--color-blue-900);
} }
.text-brand-b1 { .text-brand-b1 {
color: #0062ff; color: #7c3aed;
} }
.text-brand-b1\/45 { .text-brand-b1\/45 {
color: color-mix(in oklab, #0062ff 45%, transparent); color: color-mix(in oklab, #7c3aed 45%, transparent);
} }
.text-brand-b1\/55 { .text-brand-b1\/55 {
color: color-mix(in oklab, #0062ff 55%, transparent); color: color-mix(in oklab, #7c3aed 55%, transparent);
} }
.text-brand-b1\/60 { .text-brand-b1\/60 {
color: color-mix(in oklab, #0062ff 60%, transparent); color: color-mix(in oklab, #7c3aed 60%, transparent);
} }
.text-brand-b1\/65 { .text-brand-b1\/65 {
color: color-mix(in oklab, #0062ff 65%, transparent); color: color-mix(in oklab, #7c3aed 65%, transparent);
} }
.text-brand-b1\/70 { .text-brand-b1\/70 {
color: color-mix(in oklab, #0062ff 70%, transparent); color: color-mix(in oklab, #7c3aed 70%, transparent);
} }
.text-brand-b1\/80 { .text-brand-b1\/80 {
color: color-mix(in oklab, #0062ff 80%, transparent); color: color-mix(in oklab, #7c3aed 80%, transparent);
} }
.text-brand-b2 { .text-brand-b2 {
color: #00bdd8; color: #a855f7;
} }
.text-brand-b3 { .text-brand-b3 {
color: #00c896; color: #06b6d4;
} }
.text-brand-navy { .text-brand-navy {
color: #060d1a; color: #060d1a;
@@ -3198,6 +3195,9 @@
.text-teal-600 { .text-teal-600 {
color: var(--color-teal-600); color: var(--color-teal-600);
} }
.text-violet-300 {
color: var(--color-violet-300);
}
.text-violet-600 { .text-violet-600 {
color: var(--color-violet-600); color: var(--color-violet-600);
} }
@@ -3324,7 +3324,7 @@
} }
} }
.accent-brand-b1 { .accent-brand-b1 {
accent-color: #0062ff; accent-color: #7c3aed;
} }
.opacity-0 { .opacity-0 {
opacity: 0%; opacity: 0%;
@@ -3378,8 +3378,8 @@
--tw-shadow: 0 0 6px var(--tw-shadow-color, rgba(239,68,68,0.6)); --tw-shadow: 0 0 6px var(--tw-shadow-color, rgba(239,68,68,0.6));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
} }
.shadow-\[0_0_28px_rgba\(0\,98\,255\,0\.35\)\] { .shadow-\[0_0_28px_rgba\(124\,58\,237\,0\.35\)\] {
--tw-shadow: 0 0 28px var(--tw-shadow-color, rgba(0,98,255,0.35)); --tw-shadow: 0 0 28px var(--tw-shadow-color, rgba(124,58,237,0.35));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
} }
.shadow-\[0_8px_30px_-6px_rgba\(239\,68\,68\,0\.55\)\] { .shadow-\[0_8px_30px_-6px_rgba\(239\,68\,68\,0\.55\)\] {
@@ -3387,7 +3387,7 @@
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
} }
.shadow-cta { .shadow-cta {
--tw-shadow: 0 4px 20px var(--tw-shadow-color, rgba(0, 98, 255, 0.28)); --tw-shadow: 0 4px 20px var(--tw-shadow-color, rgba(124, 58, 237, 0.28));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
} }
.shadow-lg { .shadow-lg {
@@ -3579,7 +3579,7 @@
.group-hover\:text-brand-b1 { .group-hover\:text-brand-b1 {
&:is(:where(.group):hover *) { &:is(:where(.group):hover *) {
@media (hover: hover) { @media (hover: hover) {
color: #0062ff; color: #7c3aed;
} }
} }
} }
@@ -3789,14 +3789,14 @@
.hover\:border-brand-b1 { .hover\:border-brand-b1 {
&:hover { &:hover {
@media (hover: hover) { @media (hover: hover) {
border-color: #0062ff; border-color: #7c3aed;
} }
} }
} }
.hover\:border-brand-b1\/30 { .hover\:border-brand-b1\/30 {
&:hover { &:hover {
@media (hover: hover) { @media (hover: hover) {
border-color: color-mix(in oklab, #0062ff 30%, transparent); border-color: color-mix(in oklab, #7c3aed 30%, transparent);
} }
} }
} }
@@ -4150,7 +4150,7 @@
.hover\:from-brand-b1 { .hover\:from-brand-b1 {
&:hover { &:hover {
@media (hover: hover) { @media (hover: hover) {
--tw-gradient-from: #0062ff; --tw-gradient-from: #7c3aed;
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
} }
} }
@@ -4190,7 +4190,7 @@
.hover\:to-brand-b3 { .hover\:to-brand-b3 {
&:hover { &:hover {
@media (hover: hover) { @media (hover: hover) {
--tw-gradient-to: #00c896; --tw-gradient-to: #06b6d4;
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
} }
} }
@@ -4306,7 +4306,7 @@
.hover\:text-brand-b1 { .hover\:text-brand-b1 {
&:hover { &:hover {
@media (hover: hover) { @media (hover: hover) {
color: #0062ff; color: #7c3aed;
} }
} }
} }
@@ -4426,7 +4426,7 @@
.hover\:shadow-cta { .hover\:shadow-cta {
&:hover { &:hover {
@media (hover: hover) { @media (hover: hover) {
--tw-shadow: 0 4px 20px var(--tw-shadow-color, rgba(0, 98, 255, 0.28)); --tw-shadow: 0 4px 20px var(--tw-shadow-color, rgba(124, 58, 237, 0.28));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
} }
} }
@@ -4434,7 +4434,7 @@
.hover\:shadow-cta-hover { .hover\:shadow-cta-hover {
&:hover { &:hover {
@media (hover: hover) { @media (hover: hover) {
--tw-shadow: 0 8px 32px var(--tw-shadow-color, rgba(0, 98, 255, 0.42)); --tw-shadow: 0 8px 32px var(--tw-shadow-color, rgba(124, 58, 237, 0.42));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
} }
} }
@@ -4613,7 +4613,7 @@
} }
.focus-visible\:outline-brand-b1 { .focus-visible\:outline-brand-b1 {
&:focus-visible { &:focus-visible {
outline-color: #0062ff; outline-color: #7c3aed;
} }
} }
.focus-visible\:outline-red-700 { .focus-visible\:outline-red-700 {
@@ -5890,13 +5890,13 @@
} }
@layer utilities { @layer utilities {
.grad-text { .grad-text {
background-image: linear-gradient(118deg, #0062ff, #00bdd8 52%, #00c896); background-image: linear-gradient(118deg, #7c3aed, #a855f7 52%, #06b6d4);
-webkit-background-clip: text; -webkit-background-clip: text;
background-clip: text; background-clip: text;
color: transparent; color: transparent;
} }
.grad-bg { .grad-bg {
background-image: linear-gradient(118deg, #0062ff, #00bdd8 52%, #00c896); background-image: linear-gradient(118deg, #7c3aed, #a855f7 52%, #06b6d4);
color: var(--color-white); color: var(--color-white);
} }
.eyebrow { .eyebrow {

16
static/css/tailwind.config.js
View File

@@ -6,9 +6,9 @@ module.exports = {
extend: { extend: {
colors: { colors: {
brand: { brand: {
b1: '#0062ff', b1: '#7c3aed',
b2: '#00bdd8', b2: '#a855f7',
b3: '#00c896', b3: '#06b6d4',
navy: '#060d1a', navy: '#060d1a',
navy2: '#0b1525', navy2: '#0b1525',
navy3: '#0f1e35', navy3: '#0f1e35',
@@ -21,11 +21,11 @@ module.exports = {
mono: ['JetBrains Mono Variable', 'JetBrains Mono', 'monospace'], mono: ['JetBrains Mono Variable', 'JetBrains Mono', 'monospace'],
}, },
backgroundImage: { backgroundImage: {
'brand-grad': 'linear-gradient(118deg, #0062ff, #00bdd8 52%, #00c896)', 'brand-grad': 'linear-gradient(118deg, #7c3aed, #a855f7 52%, #06b6d4)',
}, },
boxShadow: { boxShadow: {
'cta': '0 4px 20px rgba(0, 98, 255, 0.28)', 'cta': '0 4px 20px rgba(124, 58, 237, 0.28)',
'cta-hover': '0 8px 32px rgba(0, 98, 255, 0.42)', 'cta-hover': '0 8px 32px rgba(124, 58, 237, 0.42)',
}, },
borderRadius: { borderRadius: {
DEFAULT: '0.75rem', DEFAULT: '0.75rem',
@@ -44,8 +44,8 @@ module.exports = {
'50%': { transform: 'translateY(-8px)' }, '50%': { transform: 'translateY(-8px)' },
}, },
'tc-pulse-glow': { 'tc-pulse-glow': {
'0%, 100%': { boxShadow: '0 4px 20px rgba(0, 98, 255, 0.28)' }, '0%, 100%': { boxShadow: '0 4px 20px rgba(124, 58, 237, 0.28)' },
'50%': { boxShadow: '0 8px 32px rgba(0, 98, 255, 0.42)' }, '50%': { boxShadow: '0 8px 32px rgba(124, 58, 237, 0.42)' },
}, },
'plus-breathe': { 'plus-breathe': {
'0%, 100%': { transform: 'scale(1)' }, '0%, 100%': { transform: 'scale(1)' },

18
templates/legal/_layout.html
View File

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

8
templates/legal/index.html
View File

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

2
templates/marketing/conformite.html
View File

@@ -8,7 +8,7 @@
{# ===== HEADER ===== #} {# ===== HEADER ===== #}
<section class="bg-brand-navy text-white py-20 overflow-hidden relative" aria-labelledby="page-title"> <section class="bg-brand-navy text-white py-20 overflow-hidden relative" aria-labelledby="page-title">
<div class="absolute top-1/3 left-1/4 w-[500px] h-[500px] rounded-full pointer-events-none" aria-hidden="true" <div class="absolute top-1/3 left-1/4 w-[500px] h-[500px] rounded-full pointer-events-none" aria-hidden="true"
style="background: radial-gradient(circle, rgba(0,200,150,0.07) 0%, transparent 60%); filter: blur(60px);"></div> style="background: radial-gradient(circle, rgba(6,182,212,0.07) 0%, transparent 60%); filter: blur(60px);"></div>
<div class="relative max-w-[820px] mx-auto px-6 text-center"> <div class="relative max-w-[820px] mx-auto px-6 text-center">
<p class="eyebrow grad-text mb-4">CONFORMITÉ — FORTERESSE QUÉBÉCOISE</p> <p class="eyebrow grad-text mb-4">CONFORMITÉ — FORTERESSE QUÉBÉCOISE</p>
<h1 id="page-title" class="text-[clamp(2.25rem,4vw,3.5rem)] font-black mb-4"> <h1 id="page-title" class="text-[clamp(2.25rem,4vw,3.5rem)] font-black mb-4">

20
templates/marketing/fonctionnalites.html
View File

@@ -15,7 +15,7 @@
bottom: -10px; bottom: -10px;
width: 0; width: 0;
height: 3px; height: 3px;
background: linear-gradient(118deg, #0062ff, #00bdd8 52%, #00c896); background: linear-gradient(118deg, #7c3aed, #a855f7 52%, #06b6d4);
transform: translateX(-50%); transform: translateX(-50%);
transition: width 600ms ease-out; transition: width 600ms ease-out;
} }
@@ -27,16 +27,16 @@
/* Hover lift cards */ /* Hover lift cards */
.ani-lift { transition: transform 200ms ease-out, box-shadow 200ms ease-out; } .ani-lift { transition: transform 200ms ease-out, box-shadow 200ms ease-out; }
.ani-lift:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0, 98, 255, 0.18); } .ani-lift:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(124, 58, 237, 0.18); }
/* Sticky sub-nav active link */ /* Sticky sub-nav active link */
.subnav-link[aria-current="true"] { color: #0062ff; } .subnav-link[aria-current="true"] { color: #7c3aed; }
.subnav-link[aria-current="true"]::after { .subnav-link[aria-current="true"]::after {
content: ''; content: '';
display: block; display: block;
height: 2px; height: 2px;
margin-top: 4px; margin-top: 4px;
background: linear-gradient(118deg, #0062ff, #00bdd8 52%, #00c896); background: linear-gradient(118deg, #7c3aed, #a855f7 52%, #06b6d4);
} }
/* Cosmic float orbs (n'utilise pas tc-float-y pour éviter rebuild) */ /* Cosmic float orbs (n'utilise pas tc-float-y pour éviter rebuild) */
@@ -46,8 +46,8 @@
/* DictIA Cloud pulse glow */ /* DictIA Cloud pulse glow */
@keyframes card-pulse-glow { @keyframes card-pulse-glow {
0%, 100% { box-shadow: 0 4px 20px rgba(0, 98, 255, 0.28); } 0%, 100% { box-shadow: 0 4px 20px rgba(124, 58, 237, 0.28); }
50% { box-shadow: 0 12px 40px rgba(0, 98, 255, 0.5); } 50% { box-shadow: 0 12px 40px rgba(124, 58, 237, 0.5); }
} }
.card-pulse-glow { animation: card-pulse-glow 3s ease-in-out infinite; } .card-pulse-glow { animation: card-pulse-glow 3s ease-in-out infinite; }
@@ -76,13 +76,13 @@
{# Cosmic orbs background — float animation subtile #} {# Cosmic orbs background — float animation subtile #}
<div class="absolute inset-0 pointer-events-none" aria-hidden="true"> <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" <div class="orb-float-a absolute top-1/4 left-1/4 w-[600px] h-[600px] rounded-full"
style="background: radial-gradient(circle, rgba(0,98,255,0.16) 0%, transparent 60%); filter: blur(40px);"></div> style="background: radial-gradient(circle, rgba(124,58,237,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" <div class="orb-float-b absolute top-1/2 right-1/4 w-[500px] h-[500px] rounded-full"
style="background: radial-gradient(circle, rgba(0,189,216,0.07) 0%, transparent 60%); filter: blur(40px);"></div> style="background: radial-gradient(circle, rgba(6,182,212,0.07) 0%, transparent 60%); filter: blur(40px);"></div>
<div class="absolute inset-0" <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> 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" <div class="absolute top-1/3 left-0 right-0 h-px"
style="background: linear-gradient(90deg, transparent, rgba(0,98,255,0.3), rgba(0,189,216,0.2), transparent);"></div> style="background: linear-gradient(90deg, transparent, rgba(124,58,237,0.3), rgba(6,182,212,0.2), transparent);"></div>
</div> </div>
<div class="relative max-w-[1200px] mx-auto px-6 text-center"> <div class="relative max-w-[1200px] mx-auto px-6 text-center">
@@ -330,7 +330,7 @@
{# ===== ARCHITECTURE & INFRASTRUCTURE ===== #} {# ===== ARCHITECTURE & INFRASTRUCTURE ===== #}
<section id="architecture" class="relative bg-brand-navy text-white py-20 scroll-mt-32 overflow-hidden" aria-labelledby="architecture-title"> <section id="architecture" class="relative bg-brand-navy text-white py-20 scroll-mt-32 overflow-hidden" aria-labelledby="architecture-title">
<div class="absolute top-1/2 right-1/4 w-[500px] h-[500px] rounded-full pointer-events-none" aria-hidden="true" <div class="absolute top-1/2 right-1/4 w-[500px] h-[500px] rounded-full pointer-events-none" aria-hidden="true"
style="background: radial-gradient(circle, rgba(0,200,150,0.08) 0%, transparent 60%); filter: blur(60px);"></div> style="background: radial-gradient(circle, rgba(6,182,212,0.08) 0%, transparent 60%); filter: blur(60px);"></div>
<div class="relative max-w-[1200px] mx-auto px-6"> <div class="relative max-w-[1200px] mx-auto px-6">
<div class="text-center max-w-3xl mx-auto mb-14"> <div class="text-center max-w-3xl mx-auto mb-14">

126
templates/marketing/landing.html
View File

@@ -19,7 +19,7 @@
} }
.hero-flow-card.is-active { .hero-flow-card.is-active {
transform: scale(1.05); transform: scale(1.05);
box-shadow: 0 0 22px rgba(0, 189, 216, 0.45), 0 0 44px rgba(0, 98, 255, 0.18); box-shadow: 0 0 22px rgba(6, 182, 212, 0.45), 0 0 44px rgba(124, 58, 237, 0.18);
} }
.hero-flow-card.is-inactive { opacity: 0.45; } .hero-flow-card.is-inactive { opacity: 0.45; }
/* Animated arrow draw between cards */ /* Animated arrow draw between cards */
@@ -63,7 +63,7 @@
border-radius: 9999px; border-radius: 9999px;
pointer-events: none; pointer-events: none;
z-index: 9999; z-index: 9999;
background: radial-gradient(circle, rgba(0,189,216,0.18) 0%, rgba(0,98,255,0.10) 50%, transparent 70%); background: radial-gradient(circle, rgba(6,182,212,0.18) 0%, rgba(124,58,237,0.10) 50%, transparent 70%);
animation: hero-shockwave 700ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation: hero-shockwave 700ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
} }
/* ── Word-staggered title reveal ── */ /* ── Word-staggered title reveal ── */
@@ -144,23 +144,23 @@
<span class="hero-shockwave" :style="`left:${sw.x}px; top:${sw.y}px;`" aria-hidden="true"></span> <span class="hero-shockwave" :style="`left:${sw.x}px; top:${sw.y}px;`" aria-hidden="true"></span>
</template> </template>
{# Cosmic orbs background — 3 radial gradients (blue 16%, cyan 7%, green 11%) + subtle grid + horizontal accent line #} {# Cosmic orbs background — 3 radial gradients (mauve 16%, aqua 7%, aqua 11%) + subtle grid + horizontal accent line #}
<div class="absolute inset-0 pointer-events-none" aria-hidden="true"> <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
{# Orb 1 — primary blue, top-left #} {# Orb 1 — primary mauve, top-left #}
<div class="absolute top-1/4 left-1/4 w-[600px] h-[600px] rounded-full opacity-100" <div class="absolute top-1/4 left-1/4 w-[600px] h-[600px] rounded-full opacity-100"
style="background: radial-gradient(circle, rgba(0,98,255,0.16) 0%, transparent 60%); filter: blur(40px);"></div> style="background: radial-gradient(circle, rgba(124,58,237,0.16) 0%, transparent 60%); filter: blur(40px);"></div>
{# Orb 2 — cyan, mid-right #} {# Orb 2 — aqua, mid-right #}
<div class="absolute top-1/2 right-1/4 w-[500px] h-[500px] rounded-full" <div class="absolute top-1/2 right-1/4 w-[500px] h-[500px] rounded-full"
style="background: radial-gradient(circle, rgba(0,189,216,0.07) 0%, transparent 60%); filter: blur(40px);"></div> style="background: radial-gradient(circle, rgba(6,182,212,0.07) 0%, transparent 60%); filter: blur(40px);"></div>
{# Orb 3 — accent green, bottom-left #} {# Orb 3 — aqua accent, bottom-left #}
<div class="absolute bottom-1/4 left-1/3 w-[400px] h-[400px] rounded-full" <div class="absolute bottom-1/4 left-1/3 w-[400px] h-[400px] rounded-full"
style="background: radial-gradient(circle, rgba(0,200,150,0.11) 0%, transparent 60%); filter: blur(40px);"></div> style="background: radial-gradient(circle, rgba(6,182,212,0.11) 0%, transparent 60%); filter: blur(40px);"></div>
{# Subtle grid overlay (FlexiHub signature) #} {# Subtle grid overlay (FlexiHub signature) #}
<div class="absolute inset-0" <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> 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 blue to cyan to transparent #} {# Horizontal accent line — gradient mauve to aqua to transparent #}
<div class="absolute top-1/3 left-0 right-0 h-px" <div class="absolute top-1/3 left-0 right-0 h-px"
style="background: linear-gradient(90deg, transparent, rgba(0,98,255,0.3), rgba(0,189,216,0.2), transparent);"></div> style="background: linear-gradient(90deg, transparent, rgba(124,58,237,0.3), rgba(6,182,212,0.2), transparent);"></div>
</div> </div>
{# 3D abstract orb — reacts to mouse via Alpine ox/oy → CSS variables #} {# 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> <div class="absolute inset-0 rounded-full border border-brand-b3/15" style="transform: scale(1.35);"></div>
{# Ambient blob #} {# Ambient blob #}
<div class="absolute inset-0 rounded-full" <div class="absolute inset-0 rounded-full"
style="background: radial-gradient(ellipse at 40% 40%, rgba(107,159,255,0.14) 0%, rgba(0,189,216,0.07) 50%, transparent 75%); filter: blur(20px);"></div> 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>
{# Rotating mesh ring A #} {# 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> <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 #} {# 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> <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 #} {# Inner glow core #}
<div class="absolute inset-[30%] rounded-full" <div class="absolute inset-[30%] rounded-full"
style="background: radial-gradient(circle, rgba(107,159,255,0.25) 0%, rgba(0,189,216,0.08) 60%, transparent 100%);"></div> style="background: radial-gradient(circle, rgba(167,139,250,0.25) 0%, rgba(6,182,212,0.08) 60%, transparent 100%);"></div>
</div> </div>
</div> </div>
@@ -273,7 +273,7 @@
<span class="relative inline-flex"> <span class="relative inline-flex">
{# Pulse halo behind the primary CTA #} {# Pulse halo behind the primary CTA #}
<span class="hero-cta-halo absolute -inset-1 rounded pointer-events-none" <span class="hero-cta-halo absolute -inset-1 rounded pointer-events-none"
style="background: radial-gradient(ellipse, rgba(107,159,255,0.50) 0%, transparent 70%);" style="background: radial-gradient(ellipse, rgba(167,139,250,0.50) 0%, transparent 70%);"
aria-hidden="true"></span> aria-hidden="true"></span>
<a <a
href="/contact" href="/contact"
@@ -432,8 +432,8 @@
/* Cycle col 3 (DictIA) — bordure lumineuse pulsante VERT (round 4 : conformité) */ /* Cycle col 3 (DictIA) — bordure lumineuse pulsante VERT (round 4 : conformité) */
@keyframes cycle-conforme-glow { @keyframes cycle-conforme-glow {
0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.18), 0 0 0 0 rgba(0,189,216,0.10); } 0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.18), 0 0 0 0 rgba(6,182,212,0.10); }
50% { box-shadow: 0 0 32px 2px rgba(34,197,94,0.32), 0 0 60px 0 rgba(0,189,216,0.14); } 50% { box-shadow: 0 0 32px 2px rgba(34,197,94,0.32), 0 0 60px 0 rgba(6,182,212,0.14); }
} }
.cycle-card-dictia.is-visible { animation: cycle-conforme-glow 3.4s ease-in-out infinite; } .cycle-card-dictia.is-visible { animation: cycle-conforme-glow 3.4s ease-in-out infinite; }
@@ -746,7 +746,7 @@
style="transition-delay: 240ms;"> style="transition-delay: 240ms;">
{# Halo ambiant #} {# Halo ambiant #}
<div class="absolute inset-0 pointer-events-none" aria-hidden="true" <div class="absolute inset-0 pointer-events-none" aria-hidden="true"
style="background: radial-gradient(ellipse 80% 35% at 50% 0%, rgba(0,189,216,0.12) 0%, transparent 65%);"></div> style="background: radial-gradient(ellipse 80% 35% at 50% 0%, rgba(6,182,212,0.12) 0%, transparent 65%);"></div>
<div class="relative px-5 py-3 border-b border-brand-b1/15 flex items-center gap-2.5"> <div class="relative px-5 py-3 border-b border-brand-b1/15 flex items-center gap-2.5">
{# Numéro 03 → checkmark vert (round 4) #} {# Numéro 03 → checkmark vert (round 4) #}
@@ -870,7 +870,7 @@
<section class="relative bg-brand-navy text-white py-20 overflow-hidden" aria-labelledby="solution-title"> <section class="relative bg-brand-navy text-white py-20 overflow-hidden" aria-labelledby="solution-title">
{# Single subtle orb in solution bg — less busy than hero #} {# Single subtle orb in solution bg — less busy than hero #}
<div class="absolute top-1/2 right-1/4 w-[500px] h-[500px] rounded-full pointer-events-none" aria-hidden="true" <div class="absolute top-1/2 right-1/4 w-[500px] h-[500px] rounded-full pointer-events-none" aria-hidden="true"
style="background: radial-gradient(circle, rgba(0,200,150,0.08) 0%, transparent 60%); filter: blur(60px);"></div> style="background: radial-gradient(circle, rgba(6,182,212,0.08) 0%, transparent 60%); filter: blur(60px);"></div>
<div class="relative max-w-[1200px] mx-auto px-6"> <div class="relative max-w-[1200px] mx-auto px-6">
<div class="text-center max-w-2xl mx-auto mb-12"> <div class="text-center max-w-2xl mx-auto mb-12">
@@ -1024,13 +1024,13 @@
</g> </g>
{# Order bar — visible quand p ≈ 1 #} {# Order bar — visible quand p ≈ 1 #}
<g class="wave-bar" :style="`opacity: ${p}`"> <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(107,159,255,0.6)"/> <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)"/>
</g> </g>
{% endfor %} {% endfor %}
{# Bouclier holographique (état ordre) #} {# 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" <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(107,159,255,0.55)" stroke-width="0.55" stroke-dasharray="2.5 2" fill="none" stroke="rgba(167,139,250,0.55)" stroke-width="0.55" stroke-dasharray="2.5 2"
:style="`opacity: ${orderOp * 0.4}`"/> :style="`opacity: ${orderOp * 0.4}`"/>
</svg> </svg>
@@ -1038,18 +1038,18 @@
<div class="absolute z-20 left-[3%] top-1/2 -translate-y-1/2 flex flex-col items-center gap-1.5" <div class="absolute z-20 left-[3%] top-1/2 -translate-y-1/2 flex flex-col items-center gap-1.5"
:style="`opacity: ${Math.max(0.25, 1 - p * 0.55)}`" aria-hidden="true"> :style="`opacity: ${Math.max(0.25, 1 - p * 0.55)}`" 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" <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 + (107-255)*p)},${Math.round(60 + (130-60)*p)},${Math.round(60 + (159-60)*p)},0.12); border-color: rgba(${Math.round(255 + (107-255)*p)},${Math.round(80 + (159-80)*p)},${Math.round(80 + (255-80)*p)},0.28);`"> :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" <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' : '#6B9FFF'}`"><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' : '#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>
</div> </div>
<span class="text-[8px] font-medium" :style="`color: ${p < 0.5 ? 'rgba(255,107,107,0.65)' : 'rgba(107,159,255,0.65)'}`">Audio</span> <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>
</div> </div>
{# Icône Texte transcrit (droite) #} {# 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" <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"> :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" <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(107,159,255,0.15), rgba(45,127,249,0.07)); box-shadow: 0 0 18px rgba(107,159,255,0.18);"> 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);">
<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> <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> </div>
<span class="text-[8px] font-medium text-brand-b1/70">Texte</span> <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"> <div class="absolute inset-0 z-10 pointer-events-none" :style="`opacity: ${orderOp}`" aria-hidden="true">
{% for fy in [18, 21, 24, 27, 30] %} {% for fy in [18, 21, 24, 27, 30] %}
<span class="wave-flow absolute w-1 h-1 rounded-full bg-brand-b1" <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(107,159,255,0.7); animation-delay: {{ loop.index0 * 0.32 }}s;"></span> style="top: {{ fy }}%; left: 12%; box-shadow: 0 0 5px rgba(167,139,250,0.7); animation-delay: {{ loop.index0 * 0.32 }}s;"></span>
{% endfor %} {% endfor %}
</div> </div>
@@ -1104,7 +1104,7 @@
{'text': '100&nbsp;% Confidentiel — Hébergé au Qc', 'x': 18, 'y': 40} {'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" <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(107,159,255,0.10); border: 1px solid rgba(107,159,255,0.20);"> 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);">
<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> <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> <span class="text-[8px] md:text-[10px] text-white/80 whitespace-nowrap">{{ sol.text | safe }}</span>
</div> </div>
@@ -1129,7 +1129,7 @@
@click.stop="toggle()" @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="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'" :class="activated ? 'border-brand-b1/30 text-brand-b1' : 'border-white/15 text-white/70'"
:style="activated ? 'background: linear-gradient(135deg, rgba(107,159,255,0.2), rgba(45,127,249,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(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));'"
x-cloak> 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> <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> <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="absolute h-px bg-brand-border" style="top: 44px; left: 12.5%; right: 12.5%;" aria-hidden="true"></div>
<div <div
class="pipeline-track-fill absolute h-[2px]" class="pipeline-track-fill absolute h-[2px]"
style="top: 43px; left: 12.5%; width: 75%; background: linear-gradient(90deg, #0062ff 0%, #00bdd8 100%);" style="top: 43px; left: 12.5%; width: 75%; background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%);"
:style="`transform: scaleX(${steps[active].fillPct / 100})`" :style="`transform: scaleX(${steps[active].fillPct / 100})`"
aria-hidden="true" aria-hidden="true"
></div> ></div>
@@ -1228,7 +1228,7 @@
{# Moving glowing dot — left transitions via CSS #} {# Moving glowing dot — left transitions via CSS #}
<div <div
class="pipeline-dot absolute w-3.5 h-3.5 rounded-full bg-white pointer-events-none z-10" 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(0,189,216,0.55), 0 0 36px rgba(0,98,255,0.35);" 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="`left: ${steps[active].positionPct}%`" :style="`left: ${steps[active].positionPct}%`"
aria-hidden="true" aria-hidden="true"
></div> ></div>
@@ -1258,7 +1258,7 @@
<span <span
class="relative w-[88px] h-[88px] rounded-full border-2 flex items-center justify-center transition-all duration-300" class="relative w-[88px] h-[88px] rounded-full border-2 flex items-center justify-center transition-all duration-300"
:class="{ :class="{
'border-brand-b1 bg-brand-b1/10 scale-105 shadow-[0_0_28px_rgba(0,98,255,0.35)]': active === {{ loop.index0 }}, 'border-brand-b1 bg-brand-b1/10 scale-105 shadow-[0_0_28px_rgba(124,58,237,0.35)]': active === {{ loop.index0 }},
'border-brand-b3/60 bg-brand-b3/10': active > {{ loop.index0 }}, 'border-brand-b3/60 bg-brand-b3/10': active > {{ loop.index0 }},
'border-brand-border bg-white': active < {{ loop.index0 }} 'border-brand-border bg-white': active < {{ loop.index0 }}
}" }"
@@ -1283,7 +1283,7 @@
viewBox="0 0 88 88" viewBox="0 0 88 88"
aria-hidden="true" aria-hidden="true"
> >
<circle class="pipeline-sweep-ring" cx="44" cy="44" r="41" fill="none" stroke="#0062ff" stroke-width="2" stroke-linecap="round"></circle> <circle class="pipeline-sweep-ring" cx="44" cy="44" r="41" fill="none" stroke="#7c3aed" stroke-width="2" stroke-linecap="round"></circle>
</svg> </svg>
</template> </template>
</span> </span>
@@ -1318,7 +1318,7 @@
<span <span
:key="active" :key="active"
class="pipeline-underline absolute bottom-0 left-0 h-[2px] w-full" class="pipeline-underline absolute bottom-0 left-0 h-[2px] w-full"
style="background: linear-gradient(90deg, #0062ff, #00bdd8);" style="background: linear-gradient(90deg, #7c3aed, #a855f7);"
aria-hidden="true" aria-hidden="true"
></span> ></span>
</div> </div>
@@ -1386,7 +1386,7 @@
<div class="bg-brand-navy text-white rounded p-6 relative overflow-hidden"> <div class="bg-brand-navy text-white rounded p-6 relative overflow-hidden">
{# Subtle orb décoratif #} {# Subtle orb décoratif #}
<div class="absolute -top-12 -right-12 w-48 h-48 rounded-full pointer-events-none" aria-hidden="true" <div class="absolute -top-12 -right-12 w-48 h-48 rounded-full pointer-events-none" aria-hidden="true"
style="background: radial-gradient(circle, rgba(0,189,216,0.15) 0%, transparent 60%); filter: blur(30px);"></div> style="background: radial-gradient(circle, rgba(6,182,212,0.15) 0%, transparent 60%); filter: blur(30px);"></div>
<div class="relative"> <div class="relative">
<div class="flex items-center gap-3 mb-4"> <div class="flex items-center gap-3 mb-4">
@@ -1470,8 +1470,8 @@
.hub-ring-3 { animation-delay: 2s; } .hub-ring-3 { animation-delay: 2s; }
/* DictIA core breathing glow */ /* DictIA core breathing glow */
@keyframes hub-core-breathe { @keyframes hub-core-breathe {
0%, 100% { box-shadow: 0 0 26px rgba(0,189,216,0.55), 0 0 56px rgba(0,189,216,0.18); } 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(0,189,216,0.75), 0 0 72px rgba(0,189,216,0.28); } 50% { box-shadow: 0 0 38px rgba(168,85,247,0.75), 0 0 72px rgba(168,85,247,0.28); }
} }
.hub-core { animation: hub-core-breathe 3.5s ease-in-out infinite; } .hub-core { animation: hub-core-breathe 3.5s ease-in-out infinite; }
/* Reduced motion : freeze everything */ /* Reduced motion : freeze everything */
@@ -1482,9 +1482,9 @@
} }
</style> </style>
<section class="bg-brand-navy text-white py-20 overflow-hidden relative" aria-labelledby="hub-title"> <section class="bg-brand-navy text-white py-20 overflow-hidden relative" aria-labelledby="hub-title">
{# Decorative cosmic orb — cyan, mid-section #} {# Decorative cosmic orb — aqua, mid-section #}
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[700px] h-[700px] rounded-full pointer-events-none" aria-hidden="true" <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[700px] h-[700px] rounded-full pointer-events-none" aria-hidden="true"
style="background: radial-gradient(circle, rgba(0,189,216,0.10) 0%, transparent 60%); filter: blur(60px);"></div> style="background: radial-gradient(circle, rgba(6,182,212,0.10) 0%, transparent 60%); filter: blur(60px);"></div>
<div class="relative max-w-[1200px] mx-auto px-6"> <div class="relative max-w-[1200px] mx-auto px-6">
<div class="text-center max-w-2xl mx-auto mb-12"> <div class="text-center max-w-2xl mx-auto mb-12">
@@ -1533,25 +1533,25 @@
{# Render bezier connections (visible strokes) — DictIA → Hubs (thick), Hub → Tools (thin) #} {# Render bezier connections (visible strokes) — DictIA → Hubs (thick), Hub → Tools (thin) #}
{# DictIA → Hubs #} {# DictIA → Hubs #}
<use href="#hub-path-docs" fill="none" stroke="#0062ff" stroke-width="1.5" opacity="0.55" /> <use href="#hub-path-docs" fill="none" stroke="#7c3aed" stroke-width="1.5" opacity="0.55" />
<use href="#hub-path-comm" fill="none" stroke="#00bdd8" 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" /> <use href="#hub-path-auto" fill="none" stroke="#8b5cf6" stroke-width="1.5" opacity="0.55" />
{# Hub → Tool (lighter) #} {# Hub → Tool (lighter) #}
<use href="#hub-path-word" fill="none" stroke="#0062ff" stroke-width="1" opacity="0.30" /> <use href="#hub-path-word" fill="none" stroke="#7c3aed" stroke-width="1" opacity="0.30" />
<use href="#hub-path-google" fill="none" stroke="#0062ff" 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="#0062ff" 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-outlook" fill="none" stroke="#00bdd8" 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="#00bdd8" 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="#00bdd8" stroke-width="1" opacity="0.30" /> <use href="#hub-path-notion" fill="none" stroke="#06b6d4" stroke-width="1" opacity="0.30" />
<use href="#hub-path-zapier" fill="none" stroke="#8b5cf6" stroke-width="1" opacity="0.30" /> <use href="#hub-path-zapier" fill="none" stroke="#8b5cf6" stroke-width="1" opacity="0.30" />
<use href="#hub-path-make" fill="none" stroke="#8b5cf6" stroke-width="1" opacity="0.30" /> <use href="#hub-path-make" fill="none" stroke="#8b5cf6" stroke-width="1" opacity="0.30" />
<use href="#hub-path-n8n" fill="none" stroke="#8b5cf6" stroke-width="1" opacity="0.30" /> <use href="#hub-path-n8n" fill="none" stroke="#8b5cf6" stroke-width="1" opacity="0.30" />
{# Animated particles — DictIA → Hubs (bigger, dual particles) #} {# Animated particles — DictIA → Hubs (bigger, dual particles) #}
{% for hub in [ {% for hub in [
('docs', '#0062ff', '0s', '2.4s'), ('docs', '#7c3aed', '0s', '2.4s'),
('comm', '#00bdd8', '0.8s', '2.4s'), ('comm', '#06b6d4', '0.8s', '2.4s'),
('auto', '#8b5cf6', '1.6s', '2.4s') ('auto', '#8b5cf6', '1.6s', '2.4s')
] %} ] %}
<circle r="3.2" fill="{{ hub[1] }}" opacity="0.95"> <circle r="3.2" fill="{{ hub[1] }}" opacity="0.95">
@@ -1568,12 +1568,12 @@
{# Animated particles — Hub → Tool (smaller, fast) #} {# Animated particles — Hub → Tool (smaller, fast) #}
{% for tool in [ {% for tool in [
('word', '#0062ff', '0s'), ('word', '#7c3aed', '0s'),
('google', '#0062ff', '0.4s'), ('google', '#7c3aed', '0.4s'),
('obsidian', '#0062ff', '0.8s'), ('obsidian', '#7c3aed', '0.8s'),
('outlook', '#00bdd8', '0.2s'), ('outlook', '#06b6d4', '0.2s'),
('teams', '#00bdd8', '0.6s'), ('teams', '#06b6d4', '0.6s'),
('notion', '#00bdd8', '1.0s'), ('notion', '#06b6d4', '1.0s'),
('zapier', '#8b5cf6', '0.1s'), ('zapier', '#8b5cf6', '0.1s'),
('make', '#8b5cf6', '0.5s'), ('make', '#8b5cf6', '0.5s'),
('n8n', '#8b5cf6', '0.9s') ('n8n', '#8b5cf6', '0.9s')
@@ -1602,8 +1602,8 @@
{# 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) #} {# 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 = [ {% set hub_data = [
('Documents', 'Word · Google Docs · Obsidian', '18.7%', 'rgba(0,98,255,0.10)', 'rgba(0,98,255,0.30)', 'text-blue-300'), ('Documents', 'Word · Google Docs · Obsidian', '18.7%', 'rgba(124,58,237,0.10)', 'rgba(124,58,237,0.30)', 'text-violet-300'),
('Communication', 'Outlook · Teams · Notion', '50%', 'rgba(0,189,216,0.10)', 'rgba(0,189,216,0.30)', 'text-cyan-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') ('Automatisation', 'Zapier · Make · n8n', '81.3%', 'rgba(139,92,246,0.10)', 'rgba(139,92,246,0.30)', 'text-purple-300')
] %} ] %}
{% for name, sub, leftpos, bgcol, brdcol, txtcol in hub_data %} {% for name, sub, leftpos, bgcol, brdcol, txtcol in hub_data %}
@@ -1814,9 +1814,9 @@
{# ===== CONFORMITÉ FORTERESSE ===== #} {# ===== CONFORMITÉ FORTERESSE ===== #}
<section class="bg-brand-navy text-white py-20 overflow-hidden relative" aria-labelledby="conformite-title"> <section class="bg-brand-navy text-white py-20 overflow-hidden relative" aria-labelledby="conformite-title">
{# Subtle decorative orb — green this time, like the Solution section #} {# Subtle decorative orb — aqua, like the Solution section #}
<div class="absolute top-1/3 left-1/4 w-[500px] h-[500px] rounded-full pointer-events-none" aria-hidden="true" <div class="absolute top-1/3 left-1/4 w-[500px] h-[500px] rounded-full pointer-events-none" aria-hidden="true"
style="background: radial-gradient(circle, rgba(0,200,150,0.07) 0%, transparent 60%); filter: blur(60px);"></div> style="background: radial-gradient(circle, rgba(6,182,212,0.07) 0%, transparent 60%); filter: blur(60px);"></div>
<div class="relative max-w-[1200px] mx-auto px-6"> <div class="relative max-w-[1200px] mx-auto px-6">
<div class="text-center max-w-2xl mx-auto mb-12"> <div class="text-center max-w-2xl mx-auto mb-12">
@@ -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" <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="relative w-5 h-5 transition-colors duration-300"
:class="step >= 2 ? 'text-amber-500' : 'text-brand-b1'" :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(0,98,255,0.5)'})`" :style="`filter: drop-shadow(0 0 ${step >= 2 ? '6px rgba(245,158,11,0.7)' : '4px rgba(124,58,237,0.5)'})`"
aria-hidden="true"> 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"/> <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> </svg>
@@ -2225,15 +2225,15 @@
<a href="{{ reg.href }}" target="_blank" rel="noopener noreferrer" <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="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' : ''" :class="flashIdx === {{ loop.index0 }} ? 'is-flash' : ''"
style="border-color: {{ 'rgba(239,68,68,0.20)' if reg.risk else 'rgba(0,98,255,0.15)' }};"> style="border-color: {{ 'rgba(239,68,68,0.20)' if reg.risk else 'rgba(124,58,237,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" <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" 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(0,98,255,0.55)' }};" style="color: {{ 'rgba(239,68,68,0.65)' if reg.risk else 'rgba(124,58,237,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> 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="min-w-0 flex-1">
<div class="flex items-start gap-1.5 flex-wrap"> <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" <span class="cadre-reg-label font-semibold text-[11px] leading-tight shrink-0 transition-colors"
style="color: {{ '#dc2626' if reg.risk else '#1d4ed8' }};">{{ reg.label }}</span> style="color: {{ '#dc2626' if reg.risk else '#7c3aed' }};">{{ reg.label }}</span>
<span class="text-[10px] leading-tight text-brand-navy/55">{{ reg.detail | safe }}</span> <span class="text-[10px] leading-tight text-brand-navy/55">{{ reg.detail | safe }}</span>
</div> </div>
</div> </div>
@@ -2513,9 +2513,9 @@
{# Two warm cosmic orbs to mirror the Hero — visual closure of the page #} {# 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 inset-0 pointer-events-none" aria-hidden="true">
<div class="absolute top-1/4 left-1/3 w-[500px] h-[500px] rounded-full" <div class="absolute top-1/4 left-1/3 w-[500px] h-[500px] rounded-full"
style="background: radial-gradient(circle, rgba(0,98,255,0.14) 0%, transparent 60%); filter: blur(50px);"></div> style="background: radial-gradient(circle, rgba(124,58,237,0.14) 0%, transparent 60%); filter: blur(50px);"></div>
<div class="absolute bottom-1/4 right-1/3 w-[450px] h-[450px] rounded-full" <div class="absolute bottom-1/4 right-1/3 w-[450px] h-[450px] rounded-full"
style="background: radial-gradient(circle, rgba(0,200,150,0.10) 0%, transparent 60%); filter: blur(50px);"></div> style="background: radial-gradient(circle, rgba(6,182,212,0.10) 0%, transparent 60%); filter: blur(50px);"></div>
</div> </div>
<div class="relative max-w-[820px] mx-auto px-6 text-center"> <div class="relative max-w-[820px] mx-auto px-6 text-center">

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"> <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 inset-0 pointer-events-none" aria-hidden="true">
<div class="absolute top-1/3 left-1/3 w-[500px] h-[500px] rounded-full" <div class="absolute top-1/3 left-1/3 w-[500px] h-[500px] rounded-full"
style="background: radial-gradient(circle, rgba(0,98,255,0.12) 0%, transparent 60%); filter: blur(50px);"></div> style="background: radial-gradient(circle, rgba(124,58,237,0.12) 0%, transparent 60%); filter: blur(50px);"></div>
</div> </div>
<div class="relative max-w-[820px] mx-auto px-6 text-center"> <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"> <h2 id="tarifs-cta-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black mb-6">

10
tests/test_marketing_landing_template.py
View File

@@ -110,13 +110,13 @@ def test_hero_has_dual_cta():
def test_hero_has_cosmic_orbs_background(): def test_hero_has_cosmic_orbs_background():
"""Hero has 3 radial gradient orbs (FlexiHub signature).""" """Hero has 3 radial gradient orbs (FlexiHub signature, mauve/aqua palette)."""
client = app.test_client() client = app.test_client()
body = client.get('/').data.decode('utf-8') body = client.get('/').data.decode('utf-8')
# Look for the 3 orb opacities (16% blue, 7% cyan, 11% green) # Look for the 3 orb opacities (16% mauve, 7% aqua, 11% aqua accent)
assert 'rgba(0,98,255,0.16)' in body, "Missing primary blue orb" assert 'rgba(124,58,237,0.16)' in body, "Missing primary mauve orb"
assert 'rgba(0,189,216,0.07)' in body, "Missing cyan orb" assert 'rgba(6,182,212,0.07)' in body, "Missing aqua orb"
assert 'rgba(0,200,150,0.11)' in body, "Missing green accent orb" assert 'rgba(6,182,212,0.11)' in body, "Missing aqua accent orb"
def test_hero_has_social_proof_microcopy(): def test_hero_has_social_proof_microcopy():