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

fix(marketing): phone container width stable + palette brand canonique (b1/b2/b3) sur Comment ça marche

Browse Source 
- Phone shell hauteur/largeur FIXES (280×580px) — bezel ne reflow plus
  selon le mode actif. Zone TOP 96px / MIDDLE 374px overflow:hidden /
  BOTTOM 90px. Chaque mode a maintenant w-full h-full overflow-hidden.
- Modes 1/2/3/6/0 : scroll interne invisible (.dictia-mode-scroll +
  fade gradient bottom .dictia-fade-bottom) pour contenu long.
- Suppression mécanique des hex non-brand : #A78BFA, #22D3EE, #6B9FFF,
  #34D399, #F59E0B, #1E6FD9, #7C3AED, #5B21B6, #065F46, #1C3A5E,
  #D93E1E, #C4B5FD, #DDD6FE, etc. — remplacés par brand-b1 (#2563eb),
  brand-b2 (#06b6d4), brand-b3 (#c026d3) et leurs déclinaisons
  (#0891b2, #1d4ed8, #a21caf, #1e40af, #0e7490, #9333ea, #e879f9).
- FEATURES / CONVO / LANG_COLORS / USER_COLORS / FILE_TYPES réalignés
  sur palette officielle. Sophie=b2, Marc=b1, Julie=b3.
- Status sémantiques conservés : #EF4444 (REC dot), #10b981 (online
  status / 7 FORMATS PRÊTS / LOCAL badge), #dc2626 (PDF file icon).
- font-family:monospace inline → font-mono Tailwind (JetBrains Mono).
- Mobile : phone reste à 280px fixe, scale 0.92 en dessous de 320px.
- Eyebrow + connecting line gradient SVG en couleurs brand.

Tests : 9/9 fonctionnalites passent. 2 échecs préexistants sur
/conformite (SOC 2 hedge / AGPL section) sans rapport avec ce fix.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Allison
2026-04-29 10:22:57 -04:00
parent 5edaddd788
commit 199b315bc2
1 changed files with 199 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

373
templates/marketing/fonctionnalites.html
View File

@@ -398,6 +398,20 @@
/* Hide scrollbar mobile pills */
.dictia-hide-scrollbar::-webkit-scrollbar { display: none; }
/* ============ INTERNAL SCROLL (modes content) — scrollbar invisible ============ */
.dictia-mode-scroll {
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.dictia-mode-scroll::-webkit-scrollbar { display: none; }
/* Fade gradient bottom (suggest scroll continuation) */
.dictia-fade-bottom {
mask-image: linear-gradient(to bottom, black 0%, black 85%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 85%, transparent 100%);
}
/* ============ MOBILE OPTIMIZATIONS ============ */
@media (max-width: 767px) {
.dictia-statusbar,
@@ -409,6 +423,12 @@
.dictia-bg-orbs,
.dictia-bg-grid,
.dictia-wave-bar { display: none !important; }
/* Phone reste à largeur fixe — pas de stretch, scale léger si écran très étroit */
.dictia-phone-wrap { width: 280px !important; max-width: 100% !important; }
}
@media (max-width: 320px) {
.dictia-phone-wrap { transform: scale(0.92); transform-origin: top center; }
}
@media (prefers-reduced-motion: reduce) {
@@ -425,14 +445,14 @@
{# Decorative background : grid + floating orbs (desktop only) #}
<div class="dictia-bg-grid absolute inset-0 dictia-section-grid pointer-events-none" aria-hidden="true"></div>
<div class="dictia-bg-orbs absolute inset-0 pointer-events-none overflow-hidden" aria-hidden="true">
<div class="dictia-orb-float-1 absolute" style="top:15%;left:8%;width:200px;height:200px;background:radial-gradient(circle, rgba(34,211,238,0.15) 0%, transparent 70%);filter:blur(60px);"></div>
<div class="dictia-orb-float-2 absolute" style="bottom:10%;right:10%;width:240px;height:240px;background:radial-gradient(circle, rgba(167,139,250,0.18) 0%, transparent 70%);filter:blur(70px);"></div>
<div class="dictia-orb-float-1 absolute" style="top:15%;left:8%;width:200px;height:200px;background:radial-gradient(circle, rgba(6,182,212,0.15) 0%, transparent 70%);filter:blur(60px);"></div>
<div class="dictia-orb-float-2 absolute" style="bottom:10%;right:10%;width:240px;height:240px;background:radial-gradient(circle, rgba(192,38,211,0.18) 0%, transparent 70%);filter:blur(70px);"></div>
</div>
<div class="max-w-[1200px] mx-auto px-6 relative">
<div class="text-center max-w-2xl mx-auto mb-10">
<p class="eyebrow grad-text mb-4 inline-flex items-center gap-2 justify-center px-3 py-1 rounded-full"
style="background:linear-gradient(135deg, rgba(34,211,238,0.10), rgba(167,139,250,0.10)); border:1px solid rgba(167,139,250,0.18);">
style="background:linear-gradient(135deg, rgba(6,182,212,0.10), rgba(192,38,211,0.10)); border:1px solid rgba(192,38,211,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" aria-hidden="true">
<circle cx="12" cy="12" r="3"/>
<path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.9.3h.1a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9v.1a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/>
@@ -476,8 +496,8 @@
<svg width="160" height="2" viewBox="0 0 160 2" preserveAspectRatio="none">
<defs>
<linearGradient id="dictia-connecting-grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#22D3EE" stop-opacity="0.6"/>
<stop offset="100%" stop-color="#A78BFA" stop-opacity="0.6"/>
<stop offset="0%" stop-color="#06b6d4" stop-opacity="0.6"/>
<stop offset="100%" stop-color="#c026d3" stop-opacity="0.6"/>
</linearGradient>
</defs>
<line x1="0" y1="1" x2="160" y2="1" stroke="url(#dictia-connecting-grad)"
@@ -486,18 +506,19 @@
</div>
{# ─────────── ZONE CENTER : Phone container ─────────── #}
<div class="flex flex-col items-center gap-3 lg:w-[290px] flex-shrink-0 relative z-10">
<div class="flex flex-col items-center gap-3 lg:w-[280px] flex-shrink-0 relative z-10">
{# Phone shell (bezel, glow ring, drop shadow) #}
<div class="relative w-full max-w-[290px] mx-auto">
{# Phone shell (bezel, glow ring, drop shadow) — LARGEUR/HAUTEUR FIXES pour stabilité du cadre #}
<div class="relative mx-auto dictia-phone-wrap" style="width: 280px; max-width: 100%;">
{# External glow ring (pulse) #}
<div class="absolute -inset-2 pointer-events-none dictia-phone-glow-ring"
:style="`border-radius: 52px; background: radial-gradient(ellipse 80% 90% at 50% 50%, ${activeColor}28 0%, transparent 60%); transition: background 0.4s;`"
aria-hidden="true"></div>
<div class="dictia-phone-shell w-full flex flex-col overflow-hidden relative"
:style="`border: 1.5px solid ${activeColor}40; background: rgba(8,12,24,0.88); box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6), 0 12px 32px -8px ${activeColor}30, inset 0 0 32px ${activeColor}10; min-height: 540px; transition: border-color 0.4s, box-shadow 0.4s;`">
<div class="dictia-phone-shell flex flex-col overflow-hidden relative"
style="width: 280px; height: 580px;"
:style="`border: 1.5px solid ${activeColor}40; background: rgba(8,12,24,0.88); box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6), 0 12px 32px -8px ${activeColor}30, inset 0 0 32px ${activeColor}10; transition: border-color 0.4s, box-shadow 0.4s;`">
{# Ambient color tint overlay #}
<div class="absolute inset-0 pointer-events-none"
@@ -510,8 +531,8 @@
aria-hidden="true"></div>
{# Status bar mobile-style (9:41 + signals) #}
<div class="dictia-statusbar relative z-20 flex items-center justify-between px-5 pt-1"
style="height:20px;font-family:ui-monospace,monospace;color:rgba(255,255,255,0.55);font-size:9px;font-weight:600;"
<div class="dictia-statusbar relative z-20 flex items-center justify-between px-5 pt-1 font-mono"
style="height:20px;color:rgba(255,255,255,0.55);font-size:9px;font-weight:600;"
aria-hidden="true">
<span>9:41</span>
<div class="flex items-center gap-1">
@@ -545,9 +566,9 @@
<div class="dictia-camera-dot" style="width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,0.18);box-shadow:inset 0 0 1px rgba(0,0,0,0.5);"></div>
</div>
{# TOP : Logo + Mic pulsing (with sound waves) #}
<div class="flex flex-col items-center justify-center gap-2 relative z-10"
style="height: 100px; padding-top: 24px; border-bottom: 1px solid rgba(255,255,255,0.06);">
{# TOP : Logo + Mic pulsing (with sound waves) — hauteur fixe 96px #}
<div class="flex flex-col items-center justify-center gap-2 relative z-10 flex-shrink-0"
style="height: 96px; padding-top: 24px; border-bottom: 1px solid rgba(255,255,255,0.06);">
<img src="/static/images/dictia-logo-nom.png" alt="DictIA"
style="width: 80px; height: 24px; object-fit: contain; opacity: 0.75;">
<div class="relative" style="width:36px;height:36px;">
@@ -566,72 +587,73 @@
</div>
</div>
{# MIDDLE : 6 modes (1=Transcription, 2=Diarisation, 3=Langues, 4=Exports, 5=Users, 6=Share, 0=IA chat) #}
<div class="flex-1 relative z-10" style="min-height: 260px;"
{# MIDDLE : 6 modes — hauteur fixe 374px, overflow hidden strict #}
<div class="dictia-phone-middle relative z-10 flex-shrink-0" style="height: 374px; overflow: hidden;"
role="status" aria-live="polite" aria-atomic="true">
{# Mode 1 : Transcription (header REC + waveform + upload bar + words) #}
<template x-if="displayMode === 1">
<div class="dictia-mode-fade w-full h-full flex flex-col" x-data="trModeData()" x-init="init()">
<div class="dictia-mode-fade w-full h-full flex flex-col overflow-hidden" x-data="trModeData()" x-init="init()">
{# Header bar (file + REC) #}
<div class="flex items-center justify-between px-2.5 py-1.5"
style="background:rgba(34,211,238,0.06);border-bottom:1px solid rgba(34,211,238,0.12);">
<div class="flex items-center justify-between px-2.5 py-1.5 flex-shrink-0"
style="background:rgba(6,182,212,0.06);border-bottom:1px solid rgba(6,182,212,0.12);">
<div class="flex items-center gap-1.5">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:8px;height:8px;color:rgba(34,211,238,0.80);" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:8px;height:8px;color:rgba(6,182,212,0.80);" aria-hidden="true">
<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"/>
</svg>
<span style="font-size:6.5px;font-family:monospace;color:rgba(255,255,255,0.55);">reunion-jan14.mp3</span>
<span class="font-mono" style="font-size:6.5px;color:rgba(255,255,255,0.55);">reunion-jan14.mp3</span>
</div>
<div class="flex items-center gap-1">
<span class="dictia-rec-dot" style="width:5px;height:5px;border-radius:50%;background:#EF4444;"></span>
<span style="font-size:6px;font-family:monospace;color:rgba(239,68,68,0.85);letter-spacing:0.08em;font-weight:700;">REC</span>
<span class="font-mono" style="font-size:6px;color:rgba(239,68,68,0.85);letter-spacing:0.08em;font-weight:700;">REC</span>
</div>
</div>
{# Waveform animée (8 bars) #}
<div class="flex items-end justify-center gap-0.5 px-3 py-2" style="height:24px;" aria-hidden="true">
<div class="dictia-wave-bar" style="width:2px;height:14px;background:#22D3EE;animation-delay:0s;"></div>
<div class="dictia-wave-bar" style="width:2px;height:18px;background:#22D3EE;animation-delay:0.1s;"></div>
<div class="dictia-wave-bar" style="width:2px;height:10px;background:#22D3EE;animation-delay:0.2s;"></div>
<div class="dictia-wave-bar" style="width:2px;height:20px;background:#22D3EE;animation-delay:0.05s;"></div>
<div class="dictia-wave-bar" style="width:2px;height:12px;background:#22D3EE;animation-delay:0.25s;"></div>
<div class="dictia-wave-bar" style="width:2px;height:16px;background:#22D3EE;animation-delay:0.15s;"></div>
<div class="dictia-wave-bar" style="width:2px;height:8px;background:#22D3EE;animation-delay:0.3s;"></div>
<div class="dictia-wave-bar" style="width:2px;height:14px;background:#22D3EE;animation-delay:0.08s;"></div>
<div class="dictia-wave-bar" style="width:2px;height:18px;background:#22D3EE;animation-delay:0.22s;"></div>
<div class="dictia-wave-bar" style="width:2px;height:10px;background:#22D3EE;animation-delay:0.18s;"></div>
<div class="dictia-wave-bar" style="width:2px;height:14px;background:#22D3EE;animation-delay:0s;"></div>
<div class="dictia-wave-bar" style="width:2px;height:6px;background:#22D3EE;animation-delay:0.12s;"></div>
{# Waveform animée (12 bars) #}
<div class="flex items-end justify-center gap-0.5 px-3 py-2 flex-shrink-0" style="height:24px;" aria-hidden="true">
<div class="dictia-wave-bar" style="width:2px;height:14px;background:#06b6d4;animation-delay:0s;"></div>
<div class="dictia-wave-bar" style="width:2px;height:18px;background:#06b6d4;animation-delay:0.1s;"></div>
<div class="dictia-wave-bar" style="width:2px;height:10px;background:#06b6d4;animation-delay:0.2s;"></div>
<div class="dictia-wave-bar" style="width:2px;height:20px;background:#06b6d4;animation-delay:0.05s;"></div>
<div class="dictia-wave-bar" style="width:2px;height:12px;background:#06b6d4;animation-delay:0.25s;"></div>
<div class="dictia-wave-bar" style="width:2px;height:16px;background:#06b6d4;animation-delay:0.15s;"></div>
<div class="dictia-wave-bar" style="width:2px;height:8px;background:#06b6d4;animation-delay:0.3s;"></div>
<div class="dictia-wave-bar" style="width:2px;height:14px;background:#06b6d4;animation-delay:0.08s;"></div>
<div class="dictia-wave-bar" style="width:2px;height:18px;background:#06b6d4;animation-delay:0.22s;"></div>
<div class="dictia-wave-bar" style="width:2px;height:10px;background:#06b6d4;animation-delay:0.18s;"></div>
<div class="dictia-wave-bar" style="width:2px;height:14px;background:#06b6d4;animation-delay:0s;"></div>
<div class="dictia-wave-bar" style="width:2px;height:6px;background:#06b6d4;animation-delay:0.12s;"></div>
</div>
<div x-show="phase === 'upload'" class="flex-1 flex flex-col items-center justify-center gap-3 px-4">
<div x-show="phase === 'upload'" class="flex-1 flex flex-col items-center justify-center gap-3 px-4 overflow-hidden">
<div class="flex flex-col items-center gap-1.5">
<div class="w-10 h-12 rounded-md flex flex-col items-center justify-center relative"
style="background-color: rgba(34,211,238,0.12); border: 1.5px solid rgba(34,211,238,0.40);">
style="background-color: rgba(6,182,212,0.12); border: 1.5px solid rgba(6,182,212,0.40);">
<div class="absolute top-0 right-0" style="width:0;height:0;border-style:solid;border-width:0 7px 7px 0;border-color:transparent rgba(0,0,0,0.40) transparent transparent;"></div>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:13px;height:13px;color:#22D3EE;" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:13px;height:13px;color:#06b6d4;" aria-hidden="true">
<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="23"/>
</svg>
<span style="font-size:5.5px;font-family:monospace;color:rgba(34,211,238,0.70);letter-spacing:0.06em;">MP3</span>
<span class="font-mono" style="font-size:5.5px;color:rgba(6,182,212,0.70);letter-spacing:0.06em;">MP3</span>
</div>
</div>
<div class="w-full flex flex-col gap-1">
<div class="flex justify-between">
<span style="font-size:6.5px;font-family:monospace;color:rgba(34,211,238,0.65);" x-text="progress < 100 ? 'Envoi en cours…' : 'Prêt ✓'"></span>
<span style="font-size:6.5px;font-family:monospace;color:rgba(34,211,238,0.50);"><span x-text="progress"></span>%</span>
<span class="font-mono" style="font-size:6.5px;color:rgba(6,182,212,0.65);" x-text="progress < 100 ? 'Envoi en cours…' : 'Prêt ✓'"></span>
<span class="font-mono" style="font-size:6.5px;color:rgba(6,182,212,0.50);"><span x-text="progress"></span>%</span>
</div>
{# Double progress bar (track + active with glow) #}
<div class="w-full rounded-full overflow-hidden relative" style="height:4px;background-color:rgba(34,211,238,0.10);box-shadow:inset 0 0 2px rgba(0,0,0,0.4);">
<div class="h-full rounded-full" :style="`width: ${progress}%; background: linear-gradient(90deg, #22D3EE, #06B6D4); box-shadow: 0 0 6px rgba(34,211,238,0.6); transition: width 60ms linear;`"></div>
<div class="w-full rounded-full overflow-hidden relative" style="height:4px;background-color:rgba(6,182,212,0.10);box-shadow:inset 0 0 2px rgba(0,0,0,0.4);">
<div class="h-full rounded-full" :style="`width: ${progress}%; background: linear-gradient(90deg, #06b6d4, #0891b2); box-shadow: 0 0 6px rgba(6,182,212,0.6); transition: width 60ms linear;`"></div>
</div>
</div>
</div>
<div x-show="phase === 'transcribing'" class="flex-1 p-3 overflow-y-auto flex flex-col justify-start">
<p class="font-mono leading-relaxed break-words" style="font-size:9px;color:rgba(34,211,238,0.92);background:rgba(34,211,238,0.04);padding:4px 6px;border-radius:6px;border-left:2px solid rgba(34,211,238,0.4);">
<span x-text="words.slice(0, n + 1).join(' ')"></span><span class="dictia-blink ml-px" style="color:#22D3EE;display:inline-block;width:3px;background:#22D3EE;height:9px;vertical-align:middle;">&nbsp;</span>
{# Transcript zone — scroll interne avec fade bottom #}
<div x-show="phase === 'transcribing'" class="flex-1 p-3 dictia-mode-scroll dictia-fade-bottom flex flex-col justify-start" x-ref="transcriptBox">
<p class="font-mono leading-relaxed break-words" style="font-size:9px;color:rgba(6,182,212,0.92);background:rgba(6,182,212,0.04);padding:4px 6px;border-radius:6px;border-left:2px solid rgba(6,182,212,0.4);">
<span x-text="words.slice(0, n + 1).join(' ')"></span><span class="dictia-blink ml-px" style="color:#06b6d4;display:inline-block;width:3px;background:#06b6d4;height:9px;vertical-align:middle;">&nbsp;</span>
</p>
</div>
</div>
@@ -639,24 +661,24 @@
{# Mode 2 : Diarisation (conversation Sophie/Marc/Julie) #}
<template x-if="displayMode === 2">
<div class="dictia-mode-fade w-full h-full flex flex-col" x-data="diaModeData()" x-init="init()">
<div class="dictia-mode-fade w-full h-full flex flex-col overflow-hidden" x-data="diaModeData()" x-init="init()">
{# Conversation header with stacked avatars #}
<div class="flex items-center justify-between px-2.5 py-1.5"
style="background:rgba(107,159,255,0.06);border-bottom:1px solid rgba(107,159,255,0.12);">
<div class="flex items-center justify-between px-2.5 py-1.5 flex-shrink-0"
style="background:rgba(37,99,235,0.06);border-bottom:1px solid rgba(37,99,235,0.12);">
<div class="flex items-center gap-1.5">
<div class="flex" style="margin-right:2px;">
<div class="rounded-full flex items-center justify-center text-[7px] font-bold"
style="width:14px;height:14px;background:linear-gradient(135deg,#22D3EE,#0891B2);border:1.5px solid rgba(8,12,24,0.9);color:#fff;">S</div>
style="width:14px;height:14px;background:linear-gradient(135deg,#06b6d4,#0891b2);border:1.5px solid rgba(8,12,24,0.9);color:#fff;">S</div>
<div class="rounded-full flex items-center justify-center text-[7px] font-bold"
style="width:14px;height:14px;background:linear-gradient(135deg,#6B9FFF,#3B82F6);border:1.5px solid rgba(8,12,24,0.9);color:#fff;margin-left:-5px;">M</div>
style="width:14px;height:14px;background:linear-gradient(135deg,#2563eb,#1d4ed8);border:1.5px solid rgba(8,12,24,0.9);color:#fff;margin-left:-5px;">M</div>
<div class="rounded-full flex items-center justify-center text-[7px] font-bold"
style="width:14px;height:14px;background:linear-gradient(135deg,#F59E0B,#D97706);border:1.5px solid rgba(8,12,24,0.9);color:#fff;margin-left:-5px;">J</div>
style="width:14px;height:14px;background:linear-gradient(135deg,#c026d3,#a21caf);border:1.5px solid rgba(8,12,24,0.9);color:#fff;margin-left:-5px;">J</div>
</div>
<span style="font-size:6.5px;font-family:monospace;color:rgba(255,255,255,0.65);">Réunion · 3 participants</span>
<span class="font-mono" style="font-size:6.5px;color:rgba(255,255,255,0.65);">Réunion · 3 participants</span>
</div>
<span class="dictia-rec-dot" style="width:5px;height:5px;border-radius:50%;background:#34D399;"></span>
<span class="dictia-rec-dot" style="width:5px;height:5px;border-radius:50%;background:#10b981;"></span>
</div>
<div class="flex-1 flex flex-col justify-end gap-1.5 p-2 overflow-hidden">
<div class="flex-1 flex flex-col justify-end gap-1.5 p-2 dictia-mode-scroll dictia-fade-bottom">
<template x-for="(msg, i) in visible" :key="`${cycle}-${startIdx + i}`">
<div class="dictia-msg-in flex items-start gap-1.5">
<div class="rounded-full flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5"
@@ -689,14 +711,15 @@
{# Mode 3 : 99+ langues (grille 100 codes — ripple depuis centre, highlight aléatoire) #}
<template x-if="displayMode === 3">
<div class="dictia-mode-fade w-full h-full flex flex-col" x-data="langModeData()">
<div class="dictia-mode-fade w-full h-full flex flex-col overflow-hidden" x-data="langModeData()">
{# Header DÉTECTION AUTOMATIQUE #}
<div class="flex items-center justify-center gap-1.5 py-1.5"
style="background:rgba(34,211,238,0.06);border-bottom:1px solid rgba(34,211,238,0.12);">
<span class="dictia-dot-pulse" style="width:5px;height:5px;border-radius:50%;background:#22D3EE;"></span>
<span style="font-size:7px;font-family:monospace;color:rgba(34,211,238,0.85);letter-spacing:0.16em;font-weight:700;">DÉTECTION AUTOMATIQUE</span>
<div class="flex items-center justify-center gap-1.5 py-1.5 flex-shrink-0"
style="background:rgba(6,182,212,0.06);border-bottom:1px solid rgba(6,182,212,0.12);">
<span class="dictia-dot-pulse" style="width:5px;height:5px;border-radius:50%;background:#06b6d4;"></span>
<span class="font-mono" style="font-size:7px;color:rgba(6,182,212,0.85);letter-spacing:0.16em;font-weight:700;">DÉTECTION AUTOMATIQUE</span>
</div>
<div class="flex-1 overflow-hidden" style="padding:6px 5px;">
{# Scroll interne pour les 100 codes — fade bottom suggère continuation #}
<div class="flex-1 dictia-mode-scroll dictia-fade-bottom" style="padding:6px 5px;">
<div class="grid content-start" style="grid-template-columns: repeat(7, 1fr); gap: 3px;">
<template x-for="(lang, i) in LANGS" :key="lang">
<span class="font-mono font-bold text-center rounded dictia-spring"
@@ -707,12 +730,12 @@
</div>
</div>
{# Counter live en bas #}
<div class="flex items-center justify-between px-2.5 py-1.5 mt-auto"
style="background:rgba(34,211,238,0.04);border-top:1px solid rgba(34,211,238,0.10);">
<span class="font-mono dictia-fade-y" style="font-size:6.5px;color:rgba(34,211,238,0.75);letter-spacing:0.06em;animation-delay:1.4s;">
<div class="flex items-center justify-between px-2.5 py-1.5 flex-shrink-0"
style="background:rgba(6,182,212,0.04);border-top:1px solid rgba(6,182,212,0.10);">
<span class="font-mono dictia-fade-y" style="font-size:6.5px;color:rgba(6,182,212,0.75);letter-spacing:0.06em;animation-delay:1.4s;">
FR · EN · ES · DE · ZH · JA · AR · ...
</span>
<span class="font-mono font-bold dictia-fade-y" style="font-size:7.5px;color:#22D3EE;letter-spacing:0.1em;animation-delay:1.4s;">
<span class="font-mono font-bold dictia-fade-y" style="font-size:7.5px;color:#06b6d4;letter-spacing:0.1em;animation-delay:1.4s;">
99+ langues détectées
</span>
</div>
@@ -721,15 +744,15 @@
{# Mode 4 : Exports (grid 4x2 + files détaillés + checkmark) #}
<template x-if="displayMode === 4">
<div class="dictia-mode-fade w-full h-full flex flex-col" x-data="expModeData()">
<div class="dictia-mode-fade w-full h-full flex flex-col overflow-hidden" x-data="expModeData()">
{# Header subtle #}
<div class="flex items-center justify-between px-2.5 py-1.5"
style="background:rgba(107,159,255,0.06);border-bottom:1px solid rgba(107,159,255,0.12);">
<span style="font-size:7px;font-family:monospace;color:rgba(107,159,255,0.85);letter-spacing:0.14em;font-weight:700;">EXPORTS DISPONIBLES</span>
<div class="flex items-center justify-between px-2.5 py-1.5 flex-shrink-0"
style="background:rgba(37,99,235,0.06);border-bottom:1px solid rgba(37,99,235,0.12);">
<span class="font-mono" style="font-size:7px;color:rgba(37,99,235,0.85);letter-spacing:0.14em;font-weight:700;">EXPORTS DISPONIBLES</span>
</div>
{# Grid 4×2 #}
<div class="grid grid-cols-4 gap-2 p-3 flex-1 content-center justify-items-center">
<div class="grid grid-cols-4 gap-2 p-3 flex-1 content-center justify-items-center overflow-hidden">
<template x-for="(f, i) in FILE_TYPES" :key="f.ext">
<div class="dictia-spring-y" :style="`animation-delay:${i * 110}ms;`">
<div class="rounded-md flex flex-col items-center justify-end gap-0.5 relative"
@@ -749,38 +772,38 @@
</template>
</div>
{# Subtitle dynamique avec checkmark #}
<div class="flex items-center justify-center gap-1.5 px-2.5 py-1.5 mt-auto dictia-fade-y"
style="background:rgba(52,211,153,0.06);border-top:1px solid rgba(52,211,153,0.14);animation-delay:0.9s;">
<span style="width:11px;height:11px;border-radius:50%;background:#34D399;display:inline-flex;align-items:center;justify-content:center;">
{# Subtitle dynamique avec checkmark — vert sémantique conservé pour status "ready" #}
<div class="flex items-center justify-center gap-1.5 px-2.5 py-1.5 dictia-fade-y flex-shrink-0"
style="background:rgba(16,185,129,0.06);border-top:1px solid rgba(16,185,129,0.14);animation-delay:0.9s;">
<span style="width:11px;height:11px;border-radius:50%;background:#10b981;display:inline-flex;align-items:center;justify-content:center;">
<svg viewBox="0 0 24 24" fill="none" stroke="rgba(8,12,24,0.9)" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" style="width:7px;height:7px;" aria-hidden="true">
<polyline points="20 6 9 17 4 12"/>
</svg>
</span>
<span style="font-size:7px;font-family:monospace;color:#34D399;letter-spacing:0.08em;font-weight:700;">7 FORMATS PRÊTS</span>
<span class="font-mono" style="font-size:7px;color:#10b981;letter-spacing:0.08em;font-weight:700;">7 FORMATS PRÊTS</span>
</div>
</div>
</template>
{# Mode 5 : Users (counter centré + avatars colors variés + connecting lines) #}
<template x-if="displayMode === 5">
<div class="dictia-mode-fade w-full h-full flex flex-col" x-data="usersModeData()" x-init="init()">
<div class="dictia-mode-fade w-full h-full flex flex-col overflow-hidden" x-data="usersModeData()" x-init="init()">
{# Header counter #}
<div class="flex items-center justify-center gap-1.5 py-1.5"
style="background:rgba(167,139,250,0.06);border-bottom:1px solid rgba(167,139,250,0.12);">
<span style="font-size:7px;font-family:monospace;color:rgba(167,139,250,0.75);letter-spacing:0.14em;font-weight:700;">UTILISATEURS</span>
<span class="font-mono font-black" style="font-size:11px;color:#A78BFA;letter-spacing:0.05em;" x-text="count.toString().padStart(2, '0')"></span>
<span style="font-size:7px;font-family:monospace;color:rgba(167,139,250,0.45);">/ ∞</span>
<div class="flex items-center justify-center gap-1.5 py-1.5 flex-shrink-0"
style="background:rgba(192,38,211,0.06);border-bottom:1px solid rgba(192,38,211,0.12);">
<span class="font-mono" style="font-size:7px;color:rgba(192,38,211,0.75);letter-spacing:0.14em;font-weight:700;">UTILISATEURS</span>
<span class="font-mono font-black" style="font-size:11px;color:#c026d3;letter-spacing:0.05em;" x-text="count.toString().padStart(2, '0')"></span>
<span class="font-mono" style="font-size:7px;color:rgba(192,38,211,0.45);">/ ∞</span>
</div>
{# Avatar grid with connecting lines SVG #}
<div class="flex-1 relative p-2 flex flex-wrap gap-1.5 items-center justify-center content-center">
{# SVG connecting lines (desktop only via data attr) #}
<div class="flex-1 relative p-2 flex flex-wrap gap-1.5 items-center justify-center content-center overflow-hidden">
{# SVG connecting lines (brand declinaisons only) #}
<svg class="absolute inset-0 pointer-events-none" width="100%" height="100%" aria-hidden="true" style="opacity:0.4;">
<line x1="20%" y1="30%" x2="50%" y2="50%" stroke="#A78BFA" stroke-width="0.5" stroke-dasharray="2 2"/>
<line x1="80%" y1="30%" x2="50%" y2="50%" stroke="#22D3EE" stroke-width="0.5" stroke-dasharray="2 2"/>
<line x1="20%" y1="70%" x2="50%" y2="50%" stroke="#34D399" stroke-width="0.5" stroke-dasharray="2 2"/>
<line x1="80%" y1="70%" x2="50%" y2="50%" stroke="#6B9FFF" stroke-width="0.5" stroke-dasharray="2 2"/>
<line x1="20%" y1="30%" x2="50%" y2="50%" stroke="#c026d3" stroke-width="0.5" stroke-dasharray="2 2"/>
<line x1="80%" y1="30%" x2="50%" y2="50%" stroke="#06b6d4" stroke-width="0.5" stroke-dasharray="2 2"/>
<line x1="20%" y1="70%" x2="50%" y2="50%" stroke="#a21caf" stroke-width="0.5" stroke-dasharray="2 2"/>
<line x1="80%" y1="70%" x2="50%" y2="50%" stroke="#2563eb" stroke-width="0.5" stroke-dasharray="2 2"/>
</svg>
<template x-for="i in count" :key="`${cycle}-${i}`">
<div class="rounded-full flex items-center justify-center relative z-10"
@@ -798,16 +821,16 @@
{# Mode 6 : Share (breadcrumb + toolbar + rows structurées) #}
<template x-if="displayMode === 6">
<div class="dictia-mode-fade w-full h-full flex flex-col">
<div class="dictia-mode-fade w-full h-full flex flex-col overflow-hidden">
{# Breadcrumb #}
<div class="flex items-center gap-1 px-2.5 py-1.5"
style="background:rgba(52,211,153,0.06);border-bottom:1px solid rgba(52,211,153,0.12);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:7px;height:7px;color:#34D399;" aria-hidden="true">
<div class="flex items-center gap-1 px-2.5 py-1.5 flex-shrink-0"
style="background:rgba(6,182,212,0.06);border-bottom:1px solid rgba(6,182,212,0.12);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:7px;height:7px;color:#06b6d4;" 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>
<span style="font-size:6.5px;font-family:monospace;color:rgba(255,255,255,0.55);">Mes&nbsp;dossiers</span>
<span class="font-mono" style="font-size:6.5px;color:rgba(255,255,255,0.55);">Mes&nbsp;dossiers</span>
<span style="font-size:6px;color:rgba(255,255,255,0.30);">›</span>
<span style="font-size:6.5px;font-family:monospace;color:#34D399;font-weight:700;">Réunions</span>
<span class="font-mono" style="font-size:6.5px;color:#06b6d4;font-weight:700;">Réunions</span>
{# Toolbar mini #}
<div class="flex items-center gap-1.5 ml-auto" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:8px;height:8px;color:rgba(255,255,255,0.40);">
@@ -822,32 +845,32 @@
</div>
</div>
<div class="flex-1 flex flex-col gap-1.5" style="padding:6px 7px;">
<div class="flex-1 flex flex-col gap-1.5 dictia-mode-scroll dictia-fade-bottom" style="padding:6px 7px;">
{# Folders #}
<div class="flex gap-1 flex-wrap">
<template x-for="(f, fi) in [{name:'Réunions',color:'#22D3EE',count:12},{name:'Entretiens',color:'#6B9FFF',count:7},{name:'Formations',color:'#34D399',count:24}]" :key="f.name">
<template x-for="(f, fi) in [{name:'Réunions',color:'#06b6d4',count:12},{name:'Entretiens',color:'#2563eb',count:7},{name:'Formations',color:'#c026d3',count:24}]" :key="f.name">
<div class="flex items-center gap-1 rounded-md dictia-fade-y"
:style="`background-color:${f.color}18;border:1px solid ${f.color}35;padding:3px 6px;animation-delay:${fi * 100}ms;`">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:7px;height:7px;" :style="`color:${f.color};`" 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>
<span style="font-size:6.5px;font-family:monospace;" :style="`color:${f.color};`" x-text="f.name"></span>
<span style="font-size:6px;font-family:monospace;" :style="`color:${f.color}88;`" x-text="f.count"></span>
<span class="font-mono" style="font-size:6.5px;" :style="`color:${f.color};`" x-text="f.name"></span>
<span class="font-mono" style="font-size:6px;" :style="`color:${f.color}88;`" x-text="f.count"></span>
</div>
</template>
</div>
{# Tags #}
<div class="flex flex-wrap gap-1">
<template x-for="(tag, ti) in ['#RH','#Direction','#Urgent','#Archivé','#Suivi','#Confidentiel','#2024']" :key="tag">
<span class="rounded dictia-spring"
style="font-size:5.5px;padding:2px 4px;background-color:rgba(52,211,153,0.10);border:1px solid rgba(52,211,153,0.25);color:#34D399;font-family:monospace;"
<span class="rounded dictia-spring font-mono"
style="font-size:5.5px;padding:2px 4px;background-color:rgba(6,182,212,0.10);border:1px solid rgba(6,182,212,0.25);color:#06b6d4;"
:style="`animation-delay:${350 + ti * 70}ms;`"
x-text="tag"></span>
</template>
</div>
{# File rows structurées #}
<div class="flex flex-col gap-1 mt-0.5">
<template x-for="(file, fi2) in [{name:'CR-Réunion-Jan14',folder:'Réunions',color:'#22D3EE'},{name:'Entretien-Sophie',folder:'Entretiens',color:'#6B9FFF'},{name:'Formation-RGPD',folder:'Formations',color:'#34D399'}]" :key="file.name">
<template x-for="(file, fi2) in [{name:'CR-Réunion-Jan14',folder:'Réunions',color:'#06b6d4'},{name:'Entretien-Sophie',folder:'Entretiens',color:'#2563eb'},{name:'Formation-RGPD',folder:'Formations',color:'#c026d3'}]" :key="file.name">
<div class="dictia-share-row group flex items-center gap-1.5 rounded-lg dictia-fade-x cursor-pointer"
:style="`background-color:${file.color}0C;border:1px solid ${file.color}22;padding:4px 6px;animation-delay:${650 + fi2 * 120}ms;transition:background-color 0.2s;`">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:8px;height:8px;flex-shrink:0;" :style="`color:${file.color};`" aria-hidden="true">
@@ -855,7 +878,7 @@
<polyline points="14 2 14 8 20 8"/>
</svg>
<div class="flex-1 min-w-0">
<p class="truncate" style="font-size:7px;font-family:monospace;color:rgba(255,255,255,0.78);" x-text="file.name"></p>
<p class="truncate font-mono" style="font-size:7px;color:rgba(255,255,255,0.78);" x-text="file.name"></p>
</div>
<span class="rounded font-mono shrink-0"
style="font-size:5.5px;padding:1px 4px;"
@@ -870,8 +893,8 @@
</template>
</div>
</div>
<p class="text-center font-mono mt-auto dictia-fade-y px-2 py-1"
style="font-size:6.5px;color:rgba(52,211,153,0.65);letter-spacing:0.08em;background:rgba(52,211,153,0.04);border-top:1px solid rgba(52,211,153,0.10);animation-delay:1.2s;">
<p class="text-center font-mono dictia-fade-y px-2 py-1 flex-shrink-0"
style="font-size:6.5px;color:rgba(6,182,212,0.65);letter-spacing:0.08em;background:rgba(6,182,212,0.04);border-top:1px solid rgba(6,182,212,0.10);animation-delay:1.2s;">
partage sécurisé · recherche plein texte
</p>
</div>
@@ -880,34 +903,34 @@
{# Mode 0 : IA chat (Mistral 7B local Q&R typing) — visible si user clique sur IA dans grid #}
<template x-if="displayMode === 0">
<div class="dictia-mode-fade w-full h-full flex flex-col overflow-hidden" x-data="iaModeData()" x-init="init()">
<div class="flex items-center justify-center gap-1.5 py-1.5"
style="border-bottom: 1px solid rgba(167,139,250,0.14); background-color: rgba(167,139,250,0.05);">
<div class="rounded-full flex-shrink-0 dictia-dot-pulse" style="width:6px;height:6px;background-color:#34D399;"></div>
<span style="font-size:6px;font-family:monospace;color:rgba(52,211,153,0.85);letter-spacing:0.14em;">MISTRAL 7B · LOCAL</span>
<div class="flex items-center justify-center gap-1.5 py-1.5 flex-shrink-0"
style="border-bottom: 1px solid rgba(192,38,211,0.14); background-color: rgba(192,38,211,0.05);">
<div class="rounded-full flex-shrink-0 dictia-dot-pulse" style="width:6px;height:6px;background-color:#10b981;"></div>
<span class="font-mono" style="font-size:6px;color:rgba(192,38,211,0.85);letter-spacing:0.14em;">MISTRAL 7B · LOCAL</span>
</div>
<div class="flex-1 flex flex-col justify-end gap-1.5 p-2 overflow-hidden">
<div class="flex-1 flex flex-col justify-end gap-1.5 p-2 dictia-mode-scroll dictia-fade-bottom">
<template x-for="(msg, mi) in msgs" :key="mi">
<div class="dictia-fade-y" :class="msg.role === 'user' ? 'flex justify-end' : 'flex justify-start'">
<div class="rounded-lg px-2 py-1.5" style="max-width:92%;"
:style="msg.role === 'user' ? 'background-color:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);' : 'background-color:rgba(167,139,250,0.12);border:1px solid rgba(167,139,250,0.30);'">
:style="msg.role === 'user' ? 'background-color:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);' : 'background-color:rgba(192,38,211,0.12);border:1px solid rgba(192,38,211,0.30);'">
<p class="font-mono leading-relaxed whitespace-pre-line" style="font-size:7.5px;"
:style="msg.role === 'user' ? 'color:rgba(255,255,255,0.65);' : 'color:#C4B5FD;'">
<span x-text="msg.text"></span><span x-show="msg.role === 'bot' && mi === msgs.length - 1" class="dictia-blink ml-px" style="color:#A78BFA;">▌</span>
:style="msg.role === 'user' ? 'color:rgba(255,255,255,0.65);' : 'color:#e879f9;'">
<span x-text="msg.text"></span><span x-show="msg.role === 'bot' && mi === msgs.length - 1" class="dictia-blink ml-px" style="color:#c026d3;">▌</span>
</p>
</div>
</div>
</template>
</div>
<div class="flex items-center justify-center gap-1 py-1.5" style="border-top:1px solid rgba(167,139,250,0.08);">
<span style="font-size:5.5px;font-family:monospace;color:rgba(239,68,68,0.55);letter-spacing:0.06em;">0 donnée envoyée au cloud</span>
<div class="flex items-center justify-center gap-1 py-1.5 flex-shrink-0" style="border-top:1px solid rgba(192,38,211,0.08);">
<span class="font-mono" style="font-size:5.5px;color:rgba(239,68,68,0.55);letter-spacing:0.06em;">0 donnée envoyée au cloud</span>
</div>
</div>
</template>
</div>
{# BOTTOM : 6 feature icons agrandis (28×28) + label + tab indicator + Auto pill #}
<div class="relative flex flex-col items-center justify-center gap-2 z-10"
style="height: 110px; border-top: 1px solid rgba(255,255,255,0.06); background: linear-gradient(180deg, transparent, rgba(0,0,0,0.30));">
{# BOTTOM : 6 feature icons + label + tab indicator + Auto pill — hauteur fixe 90px (cadre stable) #}
<div class="relative flex flex-col items-center justify-center gap-1 z-10 flex-shrink-0"
style="height: 90px; border-top: 1px solid rgba(255,255,255,0.06); background: linear-gradient(180deg, transparent, rgba(0,0,0,0.30));">
<div class="flex items-end gap-1.5">
<template x-for="i in [1,2,3,4,5,6]" :key="i">
<button type="button" @click="handleManualSelect(i)"
@@ -918,7 +941,7 @@
<span :style="`color: ${selectedFeature === i ? FEATURES[i].color : 'rgba(255,255,255,0.42)'}; transition: color 0.2s, transform 0.15s, filter 0.2s; filter: ${selectedFeature === i ? 'drop-shadow(0 0 6px ' + FEATURES[i].color + 'CC)' : 'none'}; transform: scale(${selectedFeature === i ? 1.18 : 1}); display: inline-block;`">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px;" aria-hidden="true" x-html="featureIconPath(i)"></svg>
</span>
<span class="text-[7px] font-medium mt-0.5 leading-none uppercase tracking-wide"
<span class="text-[7px] font-mono font-medium mt-0.5 leading-none uppercase tracking-wide"
:style="`color: ${selectedFeature === i ? FEATURES[i].color : 'rgba(255,255,255,0.30)'};`"
x-text="featureShortLabel(i)"></span>
{# Tab indicator bottom border #}
@@ -932,16 +955,16 @@
<div class="flex items-center justify-center gap-1.5" style="min-height:14px;">
<template x-if="!isManual">
<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full"
style="background:rgba(52,211,153,0.10);border:1px solid rgba(52,211,153,0.25);">
<span class="dictia-auto-pulse" style="width:5px;height:5px;border-radius:50%;background:#34D399;"></span>
<span style="font-size:7px;font-family:monospace;color:#34D399;letter-spacing:0.12em;font-weight:700;">AUTO</span>
style="background:rgba(16,185,129,0.10);border:1px solid rgba(16,185,129,0.25);">
<span class="dictia-auto-pulse" style="width:5px;height:5px;border-radius:50%;background:#10b981;"></span>
<span class="font-mono" style="font-size:7px;color:#10b981;letter-spacing:0.12em;font-weight:700;">AUTO</span>
</span>
</template>
<template x-if="isManual">
<span class="inline-flex flex-col items-center gap-0.5">
<span style="font-size:7.5px;font-family:monospace;color:rgba(255,255,255,0.55);" x-text="'Auto reprend bientôt'"></span>
<span class="font-mono" style="font-size:7.5px;color:rgba(255,255,255,0.55);" x-text="'Auto reprend bientôt'"></span>
<span class="rounded-full overflow-hidden" style="width:50px;height:2px;background:rgba(255,255,255,0.10);">
<span class="block dictia-countdown-fill h-full" :key="selectedFeature" style="background:linear-gradient(90deg,#22D3EE,#A78BFA);"></span>
<span class="block dictia-countdown-fill h-full" :key="selectedFeature" style="background:linear-gradient(90deg,#06b6d4,#c026d3);"></span>
</span>
</span>
</template>
@@ -951,7 +974,7 @@
</div>{# /phone wrapper (glow ring) #}
{# Feature info card sous le phone — premium look avec icon container + hover lift #}
<div style="min-height:64px;" class="w-full max-w-[290px] mt-3">
<div style="min-height:64px;width:280px;max-width:100%;" class="mt-3 mx-auto">
<div class="dictia-feature-card rounded-xl px-4 py-3 relative"
:style="`background-color: ${activeColor}10; border: 1px solid ${activeColor}38; box-shadow: 0 6px 24px ${activeColor}1F;`">
{# Badge top-right #}
@@ -1002,30 +1025,30 @@
<div class="flex flex-col gap-3 w-full lg:w-[320px] flex-shrink-0 relative z-10">
<div class="mb-1 flex items-center gap-2">
<span class="block w-1 h-5 rounded-full" style="background:linear-gradient(180deg,#22D3EE,#A78BFA);" aria-hidden="true"></span>
<span class="block w-1 h-5 rounded-full" style="background:linear-gradient(180deg,#06b6d4,#c026d3);" aria-hidden="true"></span>
<div>
<p class="text-[9px] font-medium uppercase tracking-[0.22em]" style="color:rgba(167,139,250,0.95);">Fonctions clés</p>
<p class="text-[9px] font-medium uppercase tracking-[0.22em]" style="color:rgba(192,38,211,0.95);">Fonctions clés</p>
<p class="font-bold text-base leading-snug text-brand-navy">Le moteur IA local</p>
</div>
</div>
{# IA Mistral 7B premium card #}
{# IA Mistral 7B premium card — couleurs brand-b3 (fuchsia officiel) #}
<div class="relative rounded-xl overflow-hidden"
style="border:1.5px solid rgba(167,139,250,0.32);background-color:rgba(8,12,24,0.92);box-shadow:0 0 32px rgba(167,139,250,0.18), 0 12px 40px -10px rgba(0,0,0,0.5);">
{# Ambient purple glow #}
style="border:1.5px solid rgba(192,38,211,0.32);background-color:rgba(8,12,24,0.92);box-shadow:0 0 32px rgba(192,38,211,0.18), 0 12px 40px -10px rgba(0,0,0,0.5);">
{# Ambient fuchsia glow #}
<div class="absolute inset-0 pointer-events-none ia-ambient-glow"
style="border-radius:inherit;background:radial-gradient(ellipse 120% 60% at 15% 50%, rgba(167,139,250,0.22) 0%, transparent 70%);"
style="border-radius:inherit;background:radial-gradient(ellipse 120% 60% at 15% 50%, rgba(192,38,211,0.22) 0%, transparent 70%);"
aria-hidden="true"></div>
{# Header — Brain in 40x40 circle #}
<div class="relative px-4 pt-4 pb-3 flex items-start gap-3">
<div class="relative flex-shrink-0">
<div class="absolute -inset-3 rounded-full pointer-events-none ia-brain-glow"
style="background:radial-gradient(circle, rgba(167,139,250,0.55) 0%, transparent 70%);"
style="background:radial-gradient(circle, rgba(192,38,211,0.55) 0%, transparent 70%);"
aria-hidden="true"></div>
<div class="rounded-full flex items-center justify-center relative"
style="width:40px;height:40px;background:linear-gradient(135deg, rgba(167,139,250,0.30), rgba(167,139,250,0.12));border:1.5px solid rgba(167,139,250,0.50);box-shadow:0 4px 12px rgba(167,139,250,0.20);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:20px;height:20px;color:#C4B5FD;position:relative;z-index:1;" aria-hidden="true">
style="width:40px;height:40px;background:linear-gradient(135deg, rgba(192,38,211,0.30), rgba(192,38,211,0.12));border:1.5px solid rgba(192,38,211,0.50);box-shadow:0 4px 12px rgba(192,38,211,0.20);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-brand-b3" style="width:20px;height:20px;position:relative;z-index:1;" aria-hidden="true">
<path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z"/>
<path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z"/>
</svg>
@@ -1037,10 +1060,10 @@
</div>
<div class="flex items-center gap-1.5 flex-wrap mt-1">
<span class="text-[9px] px-2 py-0.5 rounded-md font-mono font-bold"
style="background-color:rgba(167,139,250,0.22);color:#C4B5FD;border:1px solid rgba(167,139,250,0.45);letter-spacing:0.08em;">MISTRAL 7B</span>
style="background-color:rgba(192,38,211,0.22);color:#e879f9;border:1px solid rgba(192,38,211,0.45);letter-spacing:0.08em;">MISTRAL 7B</span>
<span class="text-[8px] px-2 py-0.5 rounded font-mono font-bold ia-local-badge inline-flex items-center gap-1"
style="background-color:rgba(52,211,153,0.14);color:#34D399;border:1px solid rgba(52,211,153,0.40);letter-spacing:0.12em;">
<span class="dictia-dot-pulse" style="width:4px;height:4px;border-radius:50%;background:#34D399;"></span>
style="background-color:rgba(16,185,129,0.14);color:#10b981;border:1px solid rgba(16,185,129,0.40);letter-spacing:0.12em;">
<span class="dictia-dot-pulse" style="width:4px;height:4px;border-radius:50%;background:#10b981;"></span>
LOCAL
</span>
</div>
@@ -1049,34 +1072,34 @@
</div>
{# Divider #}
<div style="height:1px;background:linear-gradient(90deg, transparent, rgba(167,139,250,0.30), transparent);" aria-hidden="true"></div>
<div style="height:1px;background:linear-gradient(90deg, transparent, rgba(192,38,211,0.30), transparent);" aria-hidden="true"></div>
{# Performance metrics 3 cells #}
<div class="relative grid grid-cols-3 gap-0">
<div class="text-center py-2.5 px-1" style="border-right:1px solid rgba(167,139,250,0.10);">
<div class="text-center py-2.5 px-1" style="border-right:1px solid rgba(192,38,211,0.10);">
<p class="font-mono font-black text-base text-white leading-none">0&thinsp;ms</p>
<p class="text-[8px] mt-1 uppercase tracking-wider" style="color:rgba(167,139,250,0.65);">latence</p>
<p class="text-[8px] mt-1 uppercase tracking-wider" style="color:rgba(192,38,211,0.65);">latence</p>
</div>
<div class="text-center py-2.5 px-1" style="border-right:1px solid rgba(167,139,250,0.10);">
<p class="font-mono font-black text-base leading-none" style="color:#34D399;">100&thinsp;%</p>
<p class="text-[8px] mt-1 uppercase tracking-wider" style="color:rgba(167,139,250,0.65);">privé</p>
<div class="text-center py-2.5 px-1" style="border-right:1px solid rgba(192,38,211,0.10);">
<p class="font-mono font-black text-base leading-none" style="color:#10b981;">100&thinsp;%</p>
<p class="text-[8px] mt-1 uppercase tracking-wider" style="color:rgba(192,38,211,0.65);">privé</p>
</div>
<div class="text-center py-2.5 px-1">
<p class="font-mono font-black text-base leading-none" style="color:#C4B5FD;">24/7</p>
<p class="text-[8px] mt-1 uppercase tracking-wider" style="color:rgba(167,139,250,0.65);">dispo</p>
<p class="font-mono font-black text-base leading-none" style="color:#e879f9;">24/7</p>
<p class="text-[8px] mt-1 uppercase tracking-wider" style="color:rgba(192,38,211,0.65);">dispo</p>
</div>
</div>
{# Divider #}
<div style="height:1px;background:linear-gradient(90deg, transparent, rgba(167,139,250,0.22), transparent);" aria-hidden="true"></div>
<div style="height:1px;background:linear-gradient(90deg, transparent, rgba(192,38,211,0.22), transparent);" aria-hidden="true"></div>
{# Sovereignty bullets — chacun avec icon dans cercle #}
<div class="relative px-4 py-3 flex flex-col gap-2.5">
<div class="flex items-start gap-2.5">
<span class="rounded-md flex items-center justify-center flex-shrink-0 mt-0.5"
style="width:18px;height:18px;background:rgba(167,139,250,0.14);border:1px solid rgba(167,139,250,0.30);"
style="width:18px;height:18px;background:rgba(192,38,211,0.14);border:1px solid rgba(192,38,211,0.30);"
aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:10px;height:10px;color:#C4B5FD;">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-brand-b3" style="width:10px;height:10px;opacity:0.85;">
<rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/>
<line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/>
</svg>
@@ -1085,9 +1108,9 @@
</div>
<div class="flex items-start gap-2.5">
<span class="rounded-md flex items-center justify-center flex-shrink-0 mt-0.5"
style="width:18px;height:18px;background:rgba(167,139,250,0.14);border:1px solid rgba(167,139,250,0.30);"
style="width:18px;height:18px;background:rgba(192,38,211,0.14);border:1px solid rgba(192,38,211,0.30);"
aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:10px;height:10px;color:#C4B5FD;">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-brand-b3" style="width:10px;height:10px;opacity:0.85;">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/>
</svg>
</span>
@@ -1095,9 +1118,9 @@
</div>
<div class="flex items-start gap-2.5">
<span class="rounded-md flex items-center justify-center flex-shrink-0 mt-0.5"
style="width:18px;height:18px;background:rgba(167,139,250,0.14);border:1px solid rgba(167,139,250,0.30);"
style="width:18px;height:18px;background:rgba(192,38,211,0.14);border:1px solid rgba(192,38,211,0.30);"
aria-hidden="true">
<svg viewBox="0 0 24 24" fill="currentColor" stroke="none" style="width:10px;height:10px;color:#C4B5FD;"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
<svg viewBox="0 0 24 24" fill="currentColor" stroke="none" class="text-brand-b3" style="width:10px;height:10px;opacity:0.85;"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
</span>
<span class="text-[11px] leading-snug" style="color:rgba(255,255,255,0.72);">Inférence hors-ligne · résultats en secondes</span>
</div>
@@ -1132,13 +1155,13 @@
function dictiaDashboard() {
return {
FEATURES: [
{ idx: 0, title: 'IA intégrée', subtitle: "Résumé, actions, Q&R", color: '#A78BFA', badge: 'Mistral 7B' },
{ idx: 1, title: 'Transcription', subtitle: 'Parole → texte en temps réel', color: '#22D3EE', badge: 'Whisper AI' },
{ idx: 2, title: 'Diarisation', subtitle: 'Identification des locuteurs', color: '#6B9FFF', badge: null },
{ idx: 3, title: '99+ langues', subtitle: 'Détection automatique', color: '#22D3EE', badge: null },
{ idx: 4, title: 'Exports', subtitle: 'DOCX, SRT, JSON, PDF', color: '#6B9FFF', badge: null },
{ idx: 5, title: 'Utilisateurs illimités', subtitle: 'Toute votre équipe', color: '#A78BFA', badge: 'Illimité' },
{ idx: 6, title: 'Partage & Classement', subtitle: 'Dossiers, tags, recherche', color: '#34D399', badge: null }
{ idx: 0, title: 'IA intégrée', subtitle: "Résumé, actions, Q&R", color: '#c026d3', badge: 'Mistral 7B' }, /* brand-b3 */
{ idx: 1, title: 'Transcription', subtitle: 'Parole → texte en temps réel', color: '#06b6d4', badge: 'Whisper AI' }, /* brand-b2 */
{ idx: 2, title: 'Diarisation', subtitle: 'Identification des locuteurs', color: '#2563eb', badge: null }, /* brand-b1 */
{ idx: 3, title: '99+ langues', subtitle: 'Détection automatique', color: '#06b6d4', badge: null }, /* brand-b2 */
{ idx: 4, title: 'Exports', subtitle: 'DOCX, SRT, JSON, PDF', color: '#2563eb', badge: null }, /* brand-b1 */
{ idx: 5, title: 'Utilisateurs illimités', subtitle: 'Toute votre équipe', color: '#c026d3', badge: 'Illimité' }, /* brand-b3 */
{ idx: 6, title: 'Partage & Classement', subtitle: 'Dossiers, tags, recherche', color: '#06b6d4', badge: null } /* brand-b2 */
],
selectedFeature: 1,
isManual: false,
@@ -1222,12 +1245,12 @@
function diaModeData() {
return {
CONVO: [
{ s: "Sophie", c: "#22D3EE", t: "La réunion commence à 9h." },
{ s: "Marc", c: "#6B9FFF", t: "J'ai les chiffres du Q4 ici." },
{ s: "Julie", c: "#F59E0B", t: "Je propose reporter la démo." },
{ s: "Sophie", c: "#22D3EE", t: "Accord — on vote là-dessus ?" },
{ s: "Marc", c: "#6B9FFF", t: "Approuvé à l'unanimité." },
{ s: "Julie", c: "#F59E0B", t: "Action : CR envoyé ce soir." }
{ s: "Sophie", c: "#06b6d4", t: "La réunion commence à 9h." }, /* brand-b2 cyan */
{ s: "Marc", c: "#2563eb", t: "J'ai les chiffres du Q4 ici." }, /* brand-b1 blue */
{ s: "Julie", c: "#c026d3", t: "Je propose reporter la démo." }, /* brand-b3 fuchsia */
{ s: "Sophie", c: "#06b6d4", t: "Accord — on vote là-dessus ?" },
{ s: "Marc", c: "#2563eb", t: "Approuvé à l'unanimité." },
{ s: "Julie", c: "#c026d3", t: "Action : CR envoyé ce soir." }
],
shownCount: 1, cycle: 0, _iv: null,
get startIdx() { return Math.max(0, this.shownCount - 4); },
@@ -1248,7 +1271,8 @@
/* Mode 3 — Langues : grille 100 codes (ripple depuis centre + highlight aléatoire) */
function langModeData() {
return {
LANG_COLORS: ['#22D3EE','#6B9FFF','#A78BFA','#34D399','#F59E0B','#22D3EE','#6B9FFF','#A78BFA'],
/* Cycle uniquement entre brand-b1 / brand-b2 / brand-b3 + déclinaisons */
LANG_COLORS: ['#06b6d4','#2563eb','#c026d3','#0891b2','#1d4ed8','#a21caf','#06b6d4','#2563eb'],
LANGS: [
'FR','EN','ES','DE','PT','IT','NL','PL','ZH','JA',
'KO','AR','RU','HI','TR','VI','TH','SV','DA','NO',
@@ -1281,13 +1305,13 @@
function expModeData() {
return {
FILE_TYPES: [
{ ext: 'DOCX', bg: '#1E6FD9', fg: '#fff', sym: 'W' },
{ ext: 'PDF', bg: '#D93E1E', fg: '#fff', sym: 'PDF' },
{ ext: 'SRT', bg: '#7C3AED', fg: '#fff', sym: 'CC' },
{ ext: 'VTT', bg: '#5B21B6', fg: '#DDD6FE', sym: 'CC' },
{ ext: 'TXT', bg: '#374151', fg: '#9CA3AF', sym: '≡' },
{ ext: 'JSON', bg: '#065F46', fg: '#34D399', sym: '{}' },
{ ext: 'MD', bg: '#1C3A5E', fg: '#6B9FFF', sym: '#' }
{ ext: 'DOCX', bg: '#2563eb', fg: '#fff', sym: 'W' }, /* brand-b1 blue */
{ ext: 'PDF', bg: '#dc2626', fg: '#fff', sym: 'PDF' }, /* red sémantique conservé pour fichier PDF */
{ ext: 'SRT', bg: '#c026d3', fg: '#fff', sym: 'CC' }, /* brand-b3 fuchsia */
{ ext: 'VTT', bg: '#9333ea', fg: '#f5d0fe', sym: 'CC' }, /* purple-600 (déclinaison b3) */
{ ext: 'TXT', bg: '#374151', fg: '#9CA3AF', sym: '≡' }, /* gray-700 neutre */
{ ext: 'JSON', bg: '#0e7490', fg: '#67e8f9', sym: '{}' }, /* cyan-700 (déclinaison b2) */
{ ext: 'MD', bg: '#1e40af', fg: '#93c5fd', sym: '#' } /* blue-700 (déclinaison b1) */
]
};
}
@@ -1296,7 +1320,8 @@
function usersModeData() {
return {
MAX: 20, count: 1, cycle: 0, _iv: null,
USER_COLORS: ['#A78BFA', '#22D3EE', '#34D399', '#6B9FFF', '#F59E0B'],
/* Uniquement brand-b1 / brand-b2 / brand-b3 + déclinaisons */
USER_COLORS: ['#c026d3', '#06b6d4', '#2563eb', '#a21caf', '#0891b2'],
init() {
if (this._iv) clearInterval(this._iv);
this.count = 1;