feat: website analysis pipeline, voice agent, configurator improvements

- Site analysis: cheerio HTML parsing, inline tech stack detection (~20 CMS/framework/analytics signatures), Google PageSpeed API integration
- Gemini Live voice agent: WebSocket-based real-time voice mode with live transcript, selection chips, and mid-conversation website analysis
- Type/Talk mode toggle with silent capability detection
- Stepped progress animation during brief generation (4 animated steps)
- URL + thoughts fields in Step 2, phone + contact preference in Step 3
- AI prompt improvements: dedicated website analysis section, 30-min call, concrete benefits, industry depth
- Email redesign: branded templates with logo, proper markdown rendering for both client and admin
- French locale support for AI-generated briefs
- Smaller checkmark, compact booking CTA, expanded brief area

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/configurator/StepComplete.tsx

@@ -2,7 +2,7 @@
 
 import { useTranslations } from 'next-intl';
 import { motion } from 'framer-motion';
-import { Calendar, Mail, RotateCcw } from 'lucide-react';
+import { Calendar, RotateCcw } from 'lucide-react';
 import AnimatedCheckmark from '@/components/icons/AnimatedCheckmark';
 import Button from '@/components/ui/Button';
 import CalButton from '@/components/ui/CalButton';
@@ -96,22 +96,19 @@ export default function StepComplete({ formData, brief, onReset }: StepCompleteP
       variants={containerVariants}
       initial="hidden"
       animate="visible"
-      className="flex flex-col gap-6"
+      className="flex flex-col gap-4"
     >
       {/* Checkmark + heading */}
-      <motion.div variants={itemVariants} className="flex flex-col items-center text-center pt-2 pb-1">
-        <AnimatedCheckmark size={64} color="#006494" />
+      <motion.div variants={itemVariants} className="flex flex-col items-center text-center pt-1 pb-0">
+        <AnimatedCheckmark size={40} color="#006494" />
 
-        <h3 className="font-serif text-2xl font-semibold tracking-headline text-on-surface mt-4">
+        <h3 className="font-serif text-xl font-semibold tracking-headline text-on-surface mt-2.5">
           {t('complete.title')}
         </h3>
 
-        <div className="flex items-center gap-2 mt-2">
-          <Mail size={14} strokeWidth={1.5} className="text-primary flex-shrink-0" />
-          <p className="text-sm text-outline">
-            {t('complete.subtitle', { email: displayEmail })}
-          </p>
-        </div>
+        <p className="text-sm text-outline mt-2">
+          {t('complete.subtitle', { email: displayEmail })}
+        </p>
       </motion.div>
 
       {/* Brief preview */}
@@ -123,31 +120,28 @@ export default function StepComplete({ formData, brief, onReset }: StepCompleteP
           <p className="text-xs font-semibold uppercase tracking-label text-outline mb-3">
             {t('complete.briefPreview')}
           </p>
-          <div className="space-y-1 max-h-72 overflow-y-auto pr-1 scrollbar-thin">
+          <div className="space-y-1 max-h-[28rem] overflow-y-auto pr-1 scrollbar-thin">
             {renderBrief(brief)}
           </div>
         </motion.div>
       )}
 
-      {/* Booking */}
+      {/* Next step: book a call */}
       <motion.div variants={itemVariants}>
-        <div className="rounded-xl bg-surface-low px-5 py-5 text-center">
-          <div className="flex justify-center mb-3">
-            <span className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
-              <Calendar size={18} strokeWidth={1.5} className="text-primary-dark" />
-            </span>
+        <div className="flex items-center justify-between gap-4 rounded-lg border border-primary/20 bg-primary/5 px-4 py-3">
+          <div className="min-w-0">
+            <p className="text-sm font-semibold text-on-surface">
+              {t('complete.nextStep')}
+            </p>
+            <p className="text-xs text-outline mt-0.5">
+              {t('complete.bookSubtitle')}
+            </p>
           </div>
-          <p className="text-sm font-semibold text-on-surface mb-1">
-            {t('complete.bookTitle')}
-          </p>
-          <p className="text-xs text-outline mb-4">
-            {t('complete.bookSubtitle')}
-          </p>
           <CalButton
-            className="inline-flex items-center gap-2 px-6 py-2.5 rounded-lg text-sm font-medium text-white transition-all hover:-translate-y-px active:translate-y-0"
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white whitespace-nowrap transition-all hover:-translate-y-px active:translate-y-0 flex-shrink-0"
             style={{ background: 'linear-gradient(135deg, #006494, #5BA4D9)' }}
           >
-            <Calendar size={16} />
+            <Calendar size={14} />
             {t('complete.bookCall')}
           </CalButton>
         </div>