fix blog and animation connexion

apps/backend/src/application/controllers/admin.controller.ts

@@ -1068,6 +1068,10 @@ export class AdminController {
       status: post.status,
       isFeatured: post.isFeatured,
       publishedAt: post.publishedAt,
+      metaTitle: post.metaTitle,
+      metaDescription: post.metaDescription,
+      primaryKeyword: post.primaryKeyword,
+      secondaryKeywords: post.secondaryKeywords,
       createdAt: post.createdAt,
       updatedAt: post.updatedAt,
     };

apps/backend/src/application/controllers/blog.controller.ts

@@ -124,6 +124,10 @@ export class BlogController {
       status: post.status,
       isFeatured: post.isFeatured,
       publishedAt: post.publishedAt,
+      metaTitle: post.metaTitle,
+      metaDescription: post.metaDescription,
+      primaryKeyword: post.primaryKeyword,
+      secondaryKeywords: post.secondaryKeywords,
       createdAt: post.createdAt,
       updatedAt: post.updatedAt,
     };

apps/backend/src/application/dto/blog-post.dto.ts

@@ -6,6 +6,7 @@ import {
   IsArray,
   IsBoolean,
   IsEnum,
+  IsDateString,
   MaxLength,
   MinLength,
   Matches,
@@ -62,6 +63,35 @@ export class CreateBlogPostDto {
   @IsNotEmpty()
   @MaxLength(255)
   authorName: string;
+
+  @ApiPropertyOptional({ description: 'ISO date string for scheduled publication' })
+  @IsOptional()
+  @IsDateString()
+  scheduledAt?: string;
+
+  @ApiPropertyOptional({ description: 'SEO meta title (50-60 chars recommended)' })
+  @IsOptional()
+  @IsString()
+  @MaxLength(255)
+  metaTitle?: string;
+
+  @ApiPropertyOptional({ description: 'SEO meta description (150-160 chars recommended)' })
+  @IsOptional()
+  @IsString()
+  @MaxLength(500)
+  metaDescription?: string;
+
+  @ApiPropertyOptional({ description: 'Primary SEO keyword' })
+  @IsOptional()
+  @IsString()
+  @MaxLength(255)
+  primaryKeyword?: string;
+
+  @ApiPropertyOptional({ type: [String], description: 'Secondary SEO keywords' })
+  @IsOptional()
+  @IsArray()
+  @IsString({ each: true })
+  secondaryKeywords?: string[];
 }
 
 export class UpdateBlogPostDto {
@@ -123,6 +153,35 @@ export class UpdateBlogPostDto {
   @IsOptional()
   @IsBoolean()
   isFeatured?: boolean;
+
+  @ApiPropertyOptional({ description: 'ISO date string for scheduled publication' })
+  @IsOptional()
+  @IsDateString()
+  scheduledAt?: string;
+
+  @ApiPropertyOptional()
+  @IsOptional()
+  @IsString()
+  @MaxLength(255)
+  metaTitle?: string;
+
+  @ApiPropertyOptional()
+  @IsOptional()
+  @IsString()
+  @MaxLength(500)
+  metaDescription?: string;
+
+  @ApiPropertyOptional()
+  @IsOptional()
+  @IsString()
+  @MaxLength(255)
+  primaryKeyword?: string;
+
+  @ApiPropertyOptional({ type: [String] })
+  @IsOptional()
+  @IsArray()
+  @IsString({ each: true })
+  secondaryKeywords?: string[];
 }
 
 export class BlogPostResponseDto {
@@ -138,6 +197,10 @@ export class BlogPostResponseDto {
   @ApiProperty({ enum: BlogPostStatus }) status: BlogPostStatus;
   @ApiProperty() isFeatured: boolean;
   @ApiPropertyOptional() publishedAt?: Date;
+  @ApiPropertyOptional() metaTitle?: string;
+  @ApiPropertyOptional() metaDescription?: string;
+  @ApiPropertyOptional() primaryKeyword?: string;
+  @ApiProperty({ type: [String] }) secondaryKeywords: string[];
   @ApiProperty() createdAt: Date;
   @ApiProperty() updatedAt: Date;
 }

apps/backend/src/application/services/blog.service.ts

@@ -44,7 +44,7 @@ export class BlogService implements OnApplicationBootstrap {
       throw new ConflictException(`Slug "${dto.slug}" is already in use`);
     }
 
-    const post = BlogPost.create({
+    let post = BlogPost.create({
       id: uuidv4(),
       title: dto.title,
       slug: dto.slug,
@@ -54,8 +54,17 @@ export class BlogService implements OnApplicationBootstrap {
       category: dto.category,
       tags: dto.tags ?? [],
       authorName: dto.authorName,
+      metaTitle: dto.metaTitle,
+      metaDescription: dto.metaDescription,
+      primaryKeyword: dto.primaryKeyword,
+      secondaryKeywords: dto.secondaryKeywords ?? [],
     });
 
+    if (dto.scheduledAt) {
+      const schedDate = new Date(dto.scheduledAt);
+      post = schedDate > new Date() ? post.schedule(schedDate) : post.publish();
+    }
+
     return this.blogPostRepository.save(post);
   }
 
@@ -79,12 +88,21 @@ export class BlogService implements OnApplicationBootstrap {
       tags: dto.tags,
       authorName: dto.authorName,
       isFeatured: dto.isFeatured,
+      metaTitle: dto.metaTitle,
+      metaDescription: dto.metaDescription,
+      primaryKeyword: dto.primaryKeyword,
+      secondaryKeywords: dto.secondaryKeywords,
     });
 
-    if (dto.status !== undefined && dto.status !== post.status) {
+    if (dto.scheduledAt) {
+      const schedDate = new Date(dto.scheduledAt);
+      updated = schedDate > new Date() ? updated.schedule(schedDate) : updated.publish();
+    } else if (dto.status !== undefined && dto.status !== post.status) {
       if (dto.status === BlogPostStatus.PUBLISHED) updated = updated.publish();
       else if (dto.status === BlogPostStatus.ARCHIVED) updated = updated.archive();
       else if (dto.status === BlogPostStatus.DRAFT) updated = updated.unpublish();
+      else if (dto.status === BlogPostStatus.SCHEDULED && post.publishedAt)
+        updated = updated.schedule(post.publishedAt);
     }
 
     return this.blogPostRepository.save(updated);
@@ -101,7 +119,7 @@ export class BlogService implements OnApplicationBootstrap {
 
   async getPublishedPostBySlug(slug: string): Promise<BlogPost> {
     const post = await this.blogPostRepository.findBySlug(slug);
-    if (!post || !post.isPublished()) {
+    if (!post || !post.isVisibleToPublic()) {
       throw new NotFoundException('Article not found');
     }
     return post;
@@ -113,6 +131,7 @@ export class BlogService implements OnApplicationBootstrap {
     const publishedFilters: BlogPostFilters = {
       ...filters,
       status: BlogPostStatus.PUBLISHED,
+      includeScheduled: true,
     };
     const [posts, total] = await Promise.all([
       this.blogPostRepository.findByFilters(publishedFilters),

apps/backend/src/domain/entities/blog-post.entity.ts

@@ -1,5 +1,6 @@
 export enum BlogPostStatus {
   DRAFT = 'draft',
+  SCHEDULED = 'scheduled',
   PUBLISHED = 'published',
   ARCHIVED = 'archived',
 }
@@ -19,6 +20,10 @@ interface BlogPostProps {
   status: BlogPostStatus;
   isFeatured: boolean;
   publishedAt?: Date;
+  metaTitle?: string;
+  metaDescription?: string;
+  primaryKeyword?: string;
+  secondaryKeywords: string[];
   createdAt: Date;
   updatedAt: Date;
 }
@@ -32,6 +37,7 @@ export class BlogPost {
     const now = new Date();
     return new BlogPost({
       ...props,
+      secondaryKeywords: props.secondaryKeywords ?? [],
       status: BlogPostStatus.DRAFT,
       isFeatured: false,
       createdAt: now,
@@ -79,6 +85,18 @@ export class BlogPost {
   get publishedAt(): Date | undefined {
     return this.props.publishedAt;
   }
+  get metaTitle(): string | undefined {
+    return this.props.metaTitle;
+  }
+  get metaDescription(): string | undefined {
+    return this.props.metaDescription;
+  }
+  get primaryKeyword(): string | undefined {
+    return this.props.primaryKeyword;
+  }
+  get secondaryKeywords(): string[] {
+    return this.props.secondaryKeywords;
+  }
   get createdAt(): Date {
     return this.props.createdAt;
   }
@@ -99,6 +117,10 @@ export class BlogPost {
         | 'tags'
         | 'authorName'
         | 'isFeatured'
+        | 'metaTitle'
+        | 'metaDescription'
+        | 'primaryKeyword'
+        | 'secondaryKeywords'
       >
     >
   ): BlogPost {
@@ -114,18 +136,43 @@ export class BlogPost {
     });
   }
 
+  schedule(date: Date): BlogPost {
+    return new BlogPost({
+      ...this.props,
+      status: BlogPostStatus.SCHEDULED,
+      publishedAt: date,
+      updatedAt: new Date(),
+    });
+  }
+
   archive(): BlogPost {
     return new BlogPost({ ...this.props, status: BlogPostStatus.ARCHIVED, updatedAt: new Date() });
   }
 
   unpublish(): BlogPost {
-    return new BlogPost({ ...this.props, status: BlogPostStatus.DRAFT, updatedAt: new Date() });
+    return new BlogPost({
+      ...this.props,
+      status: BlogPostStatus.DRAFT,
+      publishedAt: undefined,
+      updatedAt: new Date(),
+    });
   }
 
   isPublished(): boolean {
     return this.props.status === BlogPostStatus.PUBLISHED;
   }
 
+  isVisibleToPublic(): boolean {
+    if (this.props.status === BlogPostStatus.PUBLISHED) return true;
+    if (
+      this.props.status === BlogPostStatus.SCHEDULED &&
+      this.props.publishedAt &&
+      this.props.publishedAt <= new Date()
+    )
+      return true;
+    return false;
+  }
+
   toObject(): BlogPostProps {
     return { ...this.props };
   }

apps/backend/src/domain/ports/out/blog-post.repository.ts

@@ -9,6 +9,8 @@ export interface BlogPostFilters {
   isFeatured?: boolean;
   limit?: number;
   offset?: number;
+  /** When true, also include SCHEDULED posts whose publishedAt <= now */
+  includeScheduled?: boolean;
 }
 
 export interface BlogPostRepository {

apps/backend/src/infrastructure/persistence/typeorm/entities/blog-post.orm-entity.ts

@@ -40,6 +40,18 @@ export class BlogPostOrmEntity {
   @Column('timestamp', { nullable: true })
   published_at?: Date;
 
+  @Column('varchar', { length: 255, nullable: true })
+  meta_title?: string;
+
+  @Column('varchar', { length: 500, nullable: true })
+  meta_description?: string;
+
+  @Column('varchar', { length: 255, nullable: true })
+  primary_keyword?: string;
+
+  @Column('jsonb', { default: [] })
+  secondary_keywords: string[];
+
   @CreateDateColumn()
   created_at: Date;
 

apps/backend/src/infrastructure/persistence/typeorm/migrations/1747000000000-AddSeoFieldsToBlogPosts.ts

@@ -0,0 +1,41 @@
+import { MigrationInterface, QueryRunner, TableColumn } from 'typeorm';
+
+export class AddSeoFieldsToBlogPosts1747000000000 implements MigrationInterface {
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.addColumns('blog_posts', [
+      new TableColumn({
+        name: 'meta_title',
+        type: 'varchar',
+        length: '255',
+        isNullable: true,
+      }),
+      new TableColumn({
+        name: 'meta_description',
+        type: 'varchar',
+        length: '500',
+        isNullable: true,
+      }),
+      new TableColumn({
+        name: 'primary_keyword',
+        type: 'varchar',
+        length: '255',
+        isNullable: true,
+      }),
+      new TableColumn({
+        name: 'secondary_keywords',
+        type: 'jsonb',
+        isNullable: false,
+        default: "'[]'",
+      }),
+    ]);
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.dropColumns('blog_posts', [
+      'meta_title',
+      'meta_description',
+      'primary_keyword',
+      'secondary_keywords',
+    ]);
+  }
+}

apps/backend/src/infrastructure/persistence/typeorm/repositories/typeorm-blog-post.repository.ts

@@ -31,7 +31,11 @@ export class TypeOrmBlogPostRepository implements BlogPostRepository {
   async findByFilters(filters: BlogPostFilters): Promise<BlogPost[]> {
     const query = this.ormRepository.createQueryBuilder('post');
 
-    if (filters.status) {
+    if (filters.includeScheduled && filters.status === BlogPostStatus.PUBLISHED) {
+      query.andWhere(
+        "(post.status = 'published' OR (post.status = 'scheduled' AND post.published_at <= CURRENT_TIMESTAMP))"
+      );
+    } else if (filters.status) {
       query.andWhere('post.status = :status', { status: filters.status });
     }
 
@@ -61,7 +65,11 @@ export class TypeOrmBlogPostRepository implements BlogPostRepository {
   async count(filters: BlogPostFilters): Promise<number> {
     const query = this.ormRepository.createQueryBuilder('post');
 
-    if (filters.status) {
+    if (filters.includeScheduled && filters.status === BlogPostStatus.PUBLISHED) {
+      query.andWhere(
+        "(post.status = 'published' OR (post.status = 'scheduled' AND post.published_at <= CURRENT_TIMESTAMP))"
+      );
+    } else if (filters.status) {
       query.andWhere('post.status = :status', { status: filters.status });
     }
     if (filters.category) {
@@ -105,6 +113,10 @@ export class TypeOrmBlogPostRepository implements BlogPostRepository {
       status: orm.status as BlogPostStatus,
       isFeatured: orm.is_featured,
       publishedAt: orm.published_at,
+      metaTitle: orm.meta_title,
+      metaDescription: orm.meta_description,
+      primaryKeyword: orm.primary_keyword,
+      secondaryKeywords: orm.secondary_keywords ?? [],
       createdAt: orm.created_at,
       updatedAt: orm.updated_at,
     });
@@ -124,6 +136,10 @@ export class TypeOrmBlogPostRepository implements BlogPostRepository {
     orm.status = post.status;
     orm.is_featured = post.isFeatured;
     orm.published_at = post.publishedAt;
+    orm.meta_title = post.metaTitle;
+    orm.meta_description = post.metaDescription;
+    orm.primary_keyword = post.primaryKeyword;
+    orm.secondary_keywords = post.secondaryKeywords;
     orm.created_at = post.createdAt;
     orm.updated_at = post.updatedAt;
     return orm;

apps/frontend/app/[locale]/blog/[slug]/BlogPostContent.tsx

@@ -0,0 +1,301 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { ArrowLeft, Calendar, User, Tag, Clock, Share2, BookOpen, Anchor } from 'lucide-react';
+import { Link } from '@/i18n/navigation';
+import { LandingHeader, LandingFooter } from '@/components/layout';
+import { getBlogPost, type BlogPost } from '@/lib/api/blog';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:4000';
+
+function resolveUrl(url: string | null | undefined): string | undefined {
+  if (!url) return undefined;
+  if (url.startsWith('http')) return url;
+  return `${API_BASE_URL}${url}`;
+}
+
+function formatDate(dateStr: string): string {
+  return new Date(dateStr).toLocaleDateString('fr-FR', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+}
+
+function estimateReadingTime(content: string): number {
+  const text = content.replace(/<[^>]*>/g, '');
+  const words = text.trim().split(/\s+/).length;
+  return Math.max(1, Math.ceil(words / 200));
+}
+
+const CATEGORY_LABELS: Record<string, string> = {
+  industry: 'Industrie',
+  technology: 'Technologie',
+  guides: 'Guides',
+  news: 'Actualités',
+};
+
+function LoadingSkeleton() {
+  return (
+    <div className="min-h-screen bg-white">
+      <LandingHeader />
+      <div className="max-w-4xl mx-auto px-6 pt-32 pb-20">
+        <div className="animate-pulse space-y-6">
+          <div className="h-4 bg-gray-200 rounded w-24" />
+          <div className="h-10 bg-gray-200 rounded w-3/4" />
+          <div className="h-5 bg-gray-200 rounded w-1/2" />
+          <div className="h-72 bg-gray-200 rounded-2xl mt-8" />
+          <div className="space-y-3 mt-8">
+            {[...Array(6)].map((_, i) => (
+              <div key={i} className="h-4 bg-gray-200 rounded" style={{ width: `${85 + (i % 3) * 5}%` }} />
+            ))}
+          </div>
+        </div>
+      </div>
+      <LandingFooter />
+    </div>
+  );
+}
+
+function NotFoundView() {
+  return (
+    <div className="min-h-screen bg-white">
+      <LandingHeader />
+      <div className="max-w-4xl mx-auto px-6 pt-32 pb-20 text-center">
+        <Anchor className="w-24 h-24 text-gray-200 mx-auto mb-6" />
+        <h1 className="text-3xl font-bold text-brand-navy mb-4">Article introuvable</h1>
+        <p className="text-gray-600 mb-8">
+          Cet article n&apos;existe pas ou n&apos;est pas encore publié.
+        </p>
+        <Link href="/blog">
+          <span className="inline-flex items-center space-x-2 px-6 py-3 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all font-semibold">
+            <ArrowLeft className="w-4 h-4" />
+            <span>Retour au blog</span>
+          </span>
+        </Link>
+      </div>
+      <LandingFooter />
+    </div>
+  );
+}
+
+export default function BlogPostContent({ slug }: { slug: string }) {
+  const [post, setPost] = useState<BlogPost | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [notFound, setNotFound] = useState(false);
+
+  useEffect(() => {
+    if (!slug) return;
+    let cancelled = false;
+
+    getBlogPost(slug)
+      .then(p => {
+        if (!cancelled) setPost(p);
+      })
+      .catch(() => {
+        if (!cancelled) setNotFound(true);
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+
+    return () => { cancelled = true; };
+  }, [slug]);
+
+  if (loading) return <LoadingSkeleton />;
+  if (notFound || !post) return <NotFoundView />;
+
+  const readingTime = estimateReadingTime(post.content);
+  const processedContent = post.content.replace(
+    /src="(\/api\/v1\/blog\/images\/[^"]+)"/g,
+    `src="${API_BASE_URL}$1"`
+  );
+
+  const handleShare = () => {
+    if (navigator.share) {
+      navigator.share({ title: post.title, url: window.location.href });
+    } else {
+      navigator.clipboard.writeText(window.location.href);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-white">
+      <LandingHeader />
+
+      {/* Hero */}
+      <section className="relative pt-32 pb-20 bg-gradient-to-br from-brand-navy via-brand-navy to-[#1a2a5e]">
+        <div className="absolute inset-0 overflow-hidden">
+          <div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise/10 rounded-full blur-3xl" />
+          <div className="absolute bottom-10 right-20 w-64 h-64 bg-blue-400/10 rounded-full blur-3xl" />
+        </div>
+
+        <div className="relative z-10 max-w-4xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+          >
+            <Link href="/blog">
+              <span className="inline-flex items-center space-x-2 text-white/60 hover:text-white transition-colors mb-8 text-sm group">
+                <ArrowLeft className="w-4 h-4 group-hover:-translate-x-0.5 transition-transform" />
+                <span>Retour au blog</span>
+              </span>
+            </Link>
+
+            <div className="flex items-center flex-wrap gap-3 mb-6">
+              <span className="px-3 py-1 bg-brand-turquoise text-white text-sm font-medium rounded-full">
+                {CATEGORY_LABELS[post.category] ?? post.category}
+              </span>
+              {post.isFeatured && (
+                <span className="px-3 py-1 bg-white/15 text-white text-sm font-medium rounded-full border border-white/20">
+                  À la une
+                </span>
+              )}
+            </div>
+
+            <h1 className="text-3xl lg:text-5xl font-bold text-white mb-6 leading-tight tracking-tight">
+              {post.title}
+            </h1>
+
+            <p className="text-lg text-white/75 mb-10 leading-relaxed max-w-2xl">{post.excerpt}</p>
+
+            <div className="flex flex-wrap items-center gap-x-6 gap-y-3 text-white/55 text-sm">
+              <div className="flex items-center space-x-2">
+                <User className="w-4 h-4" />
+                <span>{post.authorName}</span>
+              </div>
+              {post.publishedAt && (
+                <div className="flex items-center space-x-2">
+                  <Calendar className="w-4 h-4" />
+                  <span>{formatDate(post.publishedAt)}</span>
+                </div>
+              )}
+              <div className="flex items-center space-x-2">
+                <Clock className="w-4 h-4" />
+                <span>{readingTime} min de lecture</span>
+              </div>
+              {post.tags.length > 0 && (
+                <div className="flex items-center space-x-2">
+                  <Tag className="w-4 h-4" />
+                  <span>{post.tags.join(', ')}</span>
+                </div>
+              )}
+            </div>
+          </motion.div>
+        </div>
+
+        <div className="absolute bottom-0 left-0 right-0">
+          <svg className="w-full h-16" viewBox="0 0 1440 64" preserveAspectRatio="none">
+            <path d="M0,32 C360,64 720,0 1080,32 C1260,48 1380,24 1440,32 L1440,64 L0,64 Z" fill="white" />
+          </svg>
+        </div>
+      </section>
+
+      {/* Cover Image */}
+      {post.coverImageUrl && (
+        <div className="max-w-4xl mx-auto px-6 lg:px-8 -mt-6 relative z-10 mb-4">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+          >
+            <img
+              src={resolveUrl(post.coverImageUrl)}
+              alt={post.title}
+              className="w-full h-72 lg:h-[420px] object-cover rounded-2xl shadow-2xl"
+            />
+          </motion.div>
+        </div>
+      )}
+
+      {/* Content + Sidebar */}
+      <section className="py-12">
+        <div className="max-w-4xl mx-auto px-6 lg:px-8">
+          <div className="lg:grid lg:grid-cols-[1fr_80px] lg:gap-8 items-start">
+            {/* Article body */}
+            <motion.article
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.3 }}
+              className="prose prose-lg prose-slate max-w-none
+                prose-headings:font-bold prose-headings:text-brand-navy prose-headings:tracking-tight
+                prose-h2:text-2xl prose-h2:mt-10 prose-h2:mb-4 prose-h2:border-l-4 prose-h2:border-brand-turquoise prose-h2:pl-4
+                prose-h3:text-xl prose-h3:mt-8 prose-h3:mb-3
+                prose-p:text-gray-700 prose-p:leading-relaxed prose-p:mb-5
+                prose-a:text-brand-turquoise prose-a:font-medium hover:prose-a:underline
+                prose-strong:text-brand-navy
+                prose-blockquote:not-italic
+                prose-ul:text-gray-700 prose-ol:text-gray-700
+                prose-img:rounded-xl prose-img:shadow-lg"
+              dangerouslySetInnerHTML={{ __html: processedContent }}
+            />
+
+            {/* Floating share button (desktop) */}
+            <div className="hidden lg:block sticky top-24">
+              <button
+                onClick={handleShare}
+                className="w-10 h-10 flex items-center justify-center bg-white border border-gray-200 rounded-full shadow-sm text-gray-400 hover:text-brand-turquoise hover:border-brand-turquoise transition-colors"
+                title="Partager l'article"
+              >
+                <Share2 className="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+
+          {/* Tags */}
+          {post.tags.length > 0 && (
+            <div className="flex flex-wrap gap-2 mt-12 pt-8 border-t border-gray-100">
+              {post.tags.map(tag => (
+                <span
+                  key={tag}
+                  className="px-3 py-1.5 bg-gray-100 text-gray-600 text-sm rounded-full hover:bg-gray-200 transition-colors"
+                >
+                  #{tag}
+                </span>
+              ))}
+            </div>
+          )}
+
+          {/* CTA */}
+          <div className="mt-16 rounded-2xl bg-gradient-to-br from-brand-navy to-[#1a2a5e] p-8 lg:p-10 text-center">
+            <BookOpen className="w-8 h-8 text-brand-turquoise mx-auto mb-4" />
+            <h2 className="text-xl lg:text-2xl font-bold text-white mb-3">
+              Prêt à tester Xpeditis ?
+            </h2>
+            <p className="text-white/70 mb-6 max-w-md mx-auto text-sm leading-relaxed">
+              Créez votre compte en 2 minutes et lancez votre premier chiffrage maritime instantané.
+              C&apos;est gratuit et sans engagement.
+            </p>
+            <a
+              href="/register"
+              className="inline-flex items-center gap-2 px-6 py-3 bg-brand-turquoise text-white rounded-xl font-semibold hover:bg-brand-turquoise/90 transition-all shadow-lg hover:shadow-xl hover:-translate-y-0.5"
+            >
+              Créer mon compte gratuitement
+            </a>
+          </div>
+
+          {/* Back + Share */}
+          <div className="mt-10 flex items-center justify-between">
+            <Link href="/blog">
+              <span className="inline-flex items-center space-x-2 px-5 py-2.5 bg-brand-navy text-white rounded-xl hover:bg-brand-navy/90 transition-all font-medium text-sm group">
+                <ArrowLeft className="w-4 h-4 group-hover:-translate-x-0.5 transition-transform" />
+                <span>Retour au blog</span>
+              </span>
+            </Link>
+            <button
+              onClick={handleShare}
+              className="lg:hidden inline-flex items-center space-x-2 px-4 py-2.5 border border-gray-200 rounded-xl text-gray-600 hover:border-brand-turquoise hover:text-brand-turquoise transition-colors text-sm"
+            >
+              <Share2 className="w-4 h-4" />
+              <span>Partager</span>
+            </button>
+          </div>
+        </div>
+      </section>
+
+      <LandingFooter />
+    </div>
+  );
+}

apps/frontend/app/[locale]/blog/[slug]/page.tsx

@@ -1,230 +1,81 @@
-'use client';
+import type { Metadata } from 'next';
-
+import BlogPostContent from './BlogPostContent';
-import { useState, useEffect } from 'react';
-import { useParams } from 'next/navigation';
-import { Link } from '@/i18n/navigation';
-import { motion } from 'framer-motion';
-import { ArrowLeft, Calendar, User, Tag, Anchor } from 'lucide-react';
-import { LandingHeader, LandingFooter } from '@/components/layout';
-import { getBlogPost, type BlogPost } from '@/lib/api/blog';
 
 const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:4000';
-function resolveUrl(url: string | null | undefined): string | undefined {
+
-  if (!url) return undefined;
+async function fetchPostMeta(slug: string) {
-  if (url.startsWith('http')) return url;
+  try {
-  return `${API_BASE_URL}${url}`;
+    const res = await fetch(`${API_BASE_URL}/api/v1/blog/${slug}`, {
+      cache: 'no-store',
+    });
+    if (!res.ok) return null;
+    return res.json() as Promise<{
+      title: string;
+      excerpt: string;
+      metaTitle?: string;
+      metaDescription?: string;
+      primaryKeyword?: string;
+      secondaryKeywords?: string[];
+      coverImageUrl?: string;
+      authorName: string;
+      publishedAt?: string;
+      updatedAt: string;
+    }>;
+  } catch {
+    return null;
+  }
 }
 
-function formatDate(dateStr: string): string {
+export async function generateMetadata({
-  return new Date(dateStr).toLocaleDateString('fr-FR', {
+  params,
-    year: 'numeric',
+}: {
-    month: 'long',
+  params: { slug: string; locale: string };
-    day: 'numeric',
+}): Promise<Metadata> {
-  });
+  const post = await fetchPostMeta(params.slug);
-}
 
-const CATEGORY_LABELS: Record<string, string> = {
+  if (!post) {
-  industry: 'Industrie',
+    return { title: 'Blog — Xpeditis' };
-  technology: 'Technologie',
+  }
-  guides: 'Guides',
-  news: 'Actualités',
-};
 
-export default function BlogPostPage() {
+  const title = post.metaTitle || post.title;
-  const params = useParams();
+  const description = post.metaDescription || post.excerpt;
-  const slug = params?.slug as string;
+  const keywords = [post.primaryKeyword, ...(post.secondaryKeywords ?? [])]
+    .filter(Boolean)
+    .join(', ');
+  const coverImage = post.coverImageUrl
+    ? post.coverImageUrl.startsWith('http')
+      ? post.coverImageUrl
+      : `${API_BASE_URL}${post.coverImageUrl}`
+    : undefined;
 
-  const [post, setPost] = useState<BlogPost | null>(null);
+  return {
-  const [loading, setLoading] = useState(true);
+    title,
-  const [notFound, setNotFound] = useState(false);
+    description,
-
+    keywords: keywords || undefined,
-  useEffect(() => {
+    openGraph: {
-    if (!slug) return;
+      title,
-
+      description,
-    let cancelled = false;
+      type: 'article',
-
+      publishedTime: post.publishedAt,
-    getBlogPost(slug)
+      authors: [post.authorName],
-      .then(p => {
+      images: coverImage ? [{ url: coverImage, alt: post.title }] : [],
-        if (!cancelled) setPost(p);
+    },
-      })
+    twitter: {
-      .catch(() => {
+      card: 'summary_large_image',
-        if (!cancelled) setNotFound(true);
+      title,
-      })
+      description,
-      .finally(() => {
+      images: coverImage ? [coverImage] : [],
-        if (!cancelled) setLoading(false);
+    },
-      });
+    alternates: {
-
+      canonical: `/blog/${params.slug}`,
-    return () => {
+    },
-      cancelled = true;
   };
-  }, [slug]);
+}
-
+
-  if (loading) {
+export default function BlogPostPage({
-    return (
+  params,
-      <div className="min-h-screen bg-white">
+}: {
-        <LandingHeader />
+  params: { slug: string; locale: string };
-        <div className="max-w-4xl mx-auto px-6 pt-32 pb-20">
+}) {
-          <div className="animate-pulse space-y-4">
+  return <BlogPostContent slug={params.slug} />;
-            <div className="h-8 bg-gray-200 rounded w-3/4" />
-            <div className="h-4 bg-gray-200 rounded w-1/2" />
-            <div className="h-64 bg-gray-200 rounded-xl mt-8" />
-          </div>
-        </div>
-        <LandingFooter />
-      </div>
-    );
-  }
-
-  if (notFound || !post) {
-    return (
-      <div className="min-h-screen bg-white">
-        <LandingHeader />
-        <div className="max-w-4xl mx-auto px-6 pt-32 pb-20 text-center">
-          <Anchor className="w-24 h-24 text-gray-200 mx-auto mb-6" />
-          <h1 className="text-3xl font-bold text-brand-navy mb-4">Article introuvable</h1>
-          <p className="text-gray-600 mb-8">
-            Cet article n&apos;existe pas ou n&apos;est pas encore publié.
-          </p>
-          <Link href="/blog">
-            <span className="inline-flex items-center space-x-2 px-6 py-3 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all font-semibold">
-              <ArrowLeft className="w-4 h-4" />
-              <span>Retour au blog</span>
-            </span>
-          </Link>
-        </div>
-        <LandingFooter />
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen bg-white">
-      <LandingHeader />
-
-      {/* Hero */}
-      <section className="relative pt-32 pb-16 bg-gradient-to-br from-brand-navy to-brand-navy/95">
-        <div className="absolute inset-0 opacity-10">
-          <div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise rounded-full blur-3xl" />
-        </div>
-
-        <div className="relative z-10 max-w-4xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6 }}
-          >
-            <Link href="/blog">
-              <span className="inline-flex items-center space-x-2 text-white/60 hover:text-white transition-colors mb-8 text-sm">
-                <ArrowLeft className="w-4 h-4" />
-                <span>Retour au blog</span>
-              </span>
-            </Link>
-
-            <div className="flex items-center space-x-3 mb-6">
-              <span className="px-3 py-1 bg-brand-turquoise text-white text-sm font-medium rounded-full">
-                {CATEGORY_LABELS[post.category] ?? post.category}
-              </span>
-              {post.isFeatured && (
-                <span className="px-3 py-1 bg-white/20 text-white text-sm font-medium rounded-full">
-                  À la une
-                </span>
-              )}
-            </div>
-
-            <h1 className="text-3xl lg:text-5xl font-bold text-white mb-6 leading-tight">
-              {post.title}
-            </h1>
-
-            <p className="text-lg text-white/80 mb-8">{post.excerpt}</p>
-
-            <div className="flex flex-wrap items-center gap-6 text-white/60 text-sm">
-              <div className="flex items-center space-x-2">
-                <User className="w-4 h-4" />
-                <span>{post.authorName}</span>
-              </div>
-              {post.publishedAt && (
-                <div className="flex items-center space-x-2">
-                  <Calendar className="w-4 h-4" />
-                  <span>{formatDate(post.publishedAt)}</span>
-                </div>
-              )}
-              {post.tags.length > 0 && (
-                <div className="flex items-center space-x-2">
-                  <Tag className="w-4 h-4" />
-                  <span>{post.tags.join(', ')}</span>
-                </div>
-              )}
-            </div>
-          </motion.div>
-        </div>
-
-        <div className="absolute bottom-0 left-0 right-0">
-          <svg className="w-full h-16" viewBox="0 0 1440 60" preserveAspectRatio="none">
-            <path
-              d="M0,30 C240,50 480,10 720,30 C960,50 1200,10 1440,30 L1440,60 L0,60 Z"
-              fill="white"
-            />
-          </svg>
-        </div>
-      </section>
-
-      {/* Cover Image */}
-      {post.coverImageUrl && (
-        <div className="max-w-4xl mx-auto px-6 lg:px-8 -mt-8 relative z-10">
-          <motion.img
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6, delay: 0.2 }}
-            src={resolveUrl(post.coverImageUrl)}
-            alt={post.title}
-            className="w-full h-64 lg:h-96 object-cover rounded-2xl shadow-2xl"
-          />
-        </div>
-      )}
-
-      {/* Content */}
-      <section className="py-16">
-        <div className="max-w-4xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6, delay: 0.3 }}
-            className="prose prose-lg prose-brand max-w-none"
-            dangerouslySetInnerHTML={{
-              __html: post.content.replace(
-                /src="(\/api\/v1\/blog\/images\/[^"]+)"/g,
-                `src="${API_BASE_URL}$1"`
-              ),
-            }}
-          />
-
-          {/* Tags */}
-          {post.tags.length > 0 && (
-            <div className="flex flex-wrap gap-2 mt-12 pt-8 border-t border-gray-200">
-              {post.tags.map(tag => (
-                <span
-                  key={tag}
-                  className="px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full"
-                >
-                  #{tag}
-                </span>
-              ))}
-            </div>
-          )}
-
-          {/* Back link */}
-          <div className="mt-12">
-            <Link href="/blog">
-              <span className="inline-flex items-center space-x-2 px-6 py-3 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90 transition-all font-semibold">
-                <ArrowLeft className="w-4 h-4" />
-                <span>Retour au blog</span>
-              </span>
-            </Link>
-          </div>
-        </div>
-      </section>
-
-      <LandingFooter />
-    </div>
-  );
 }

apps/frontend/app/[locale]/dashboard/admin/blog/page.tsx

@@ -25,6 +25,10 @@ import {
   ImageIcon,
   X,
   Loader2,
+  Search,
+  Clock,
+  ChevronDown,
+  ChevronUp,
 } from 'lucide-react';
 import { Link } from '@/i18n/navigation';
 
@@ -49,17 +53,26 @@ const CATEGORIES: { value: BlogPostCategory; label: string }[] = [
 
 const STATUS_LABELS: Record<BlogPostStatus, string> = {
   draft: 'Brouillon',
+  scheduled: 'Planifié',
   published: 'Publié',
   archived: 'Archivé',
 };
 
 const STATUS_COLORS: Record<BlogPostStatus, string> = {
   draft: 'bg-yellow-100 text-yellow-800',
+  scheduled: 'bg-blue-100 text-blue-800',
   published: 'bg-green-100 text-green-800',
   archived: 'bg-gray-100 text-gray-600',
 };
 
-const EMPTY_FORM: CreateBlogPostRequest = {
+interface FormData extends CreateBlogPostRequest {
+  metaTitle: string;
+  metaDescription: string;
+  primaryKeyword: string;
+  secondaryKeywordsInput: string;
+}
+
+const EMPTY_FORM: FormData = {
   title: '',
   slug: '',
   excerpt: '',
@@ -68,6 +81,10 @@ const EMPTY_FORM: CreateBlogPostRequest = {
   category: 'industry',
   tags: [],
   authorName: '',
+  metaTitle: '',
+  metaDescription: '',
+  primaryKeyword: '',
+  secondaryKeywordsInput: '',
 };
 
 function generateSlug(title: string): string {
@@ -80,6 +97,38 @@ function generateSlug(title: string): string {
     .replace(/\s+/g, '-');
 }
 
+function toLocalDatetimeValue(dateStr?: string): string {
+  if (!dateStr) return '';
+  const d = new Date(dateStr);
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+// SEO preview snippet
+function SeoPreview({
+  metaTitle,
+  metaDescription,
+  slug,
+}: {
+  metaTitle: string;
+  metaDescription: string;
+  slug: string;
+}) {
+  const displayTitle = metaTitle || "Titre de l'article";
+  const displayDesc = metaDescription || "Description de l'article...";
+  const displayUrl = `xpeditis.com/blog/${slug || 'votre-slug'}`;
+  return (
+    <div className="border border-gray-200 rounded-lg p-4 bg-gray-50 text-sm">
+      <p className="text-xs text-gray-400 mb-2 font-medium uppercase tracking-wide">
+        Aperçu Google
+      </p>
+      <p className="text-blue-700 text-base font-medium truncate leading-tight">{displayTitle}</p>
+      <p className="text-green-700 text-xs mt-0.5 truncate">{displayUrl}</p>
+      <p className="text-gray-600 text-xs mt-1 line-clamp-2 leading-relaxed">{displayDesc}</p>
+    </div>
+  );
+}
+
 export default function AdminBlogPage() {
   const [posts, setPosts] = useState<BlogPost[]>([]);
   const [loading, setLoading] = useState(true);
@@ -92,7 +141,9 @@ export default function AdminBlogPage() {
   const [uploadingCover, setUploadingCover] = useState(false);
   const [tagsInput, setTagsInput] = useState('');
   const [editStatus, setEditStatus] = useState<BlogPostStatus>('draft');
-  const [formData, setFormData] = useState<CreateBlogPostRequest>(EMPTY_FORM);
+  const [formData, setFormData] = useState<FormData>(EMPTY_FORM);
+  const [scheduledAt, setScheduledAt] = useState('');
+  const [seoOpen, setSeoOpen] = useState(false);
   const coverInputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -112,19 +163,44 @@ export default function AdminBlogPage() {
     }
   };
 
-  const handleCreate = async (e: React.FormEvent) => {
+  const buildPayload = (withStatus?: BlogPostStatus): CreateBlogPostRequest => {
-    e.preventDefault();
+    const tags = tagsInput
-    setSaving(true);
-    try {
-      await createBlogPost({
-        ...formData,
-        tags: tagsInput
       ? tagsInput
           .split(',')
           .map(t => t.trim())
           .filter(Boolean)
-          : [],
+      : [];
-      });
+    const secondaryKeywords = formData.secondaryKeywordsInput
+      ? formData.secondaryKeywordsInput
+          .split(',')
+          .map(t => t.trim())
+          .filter(Boolean)
+      : [];
+    return {
+      title: formData.title,
+      slug: formData.slug,
+      excerpt: formData.excerpt,
+      content: formData.content,
+      coverImageUrl: formData.coverImageUrl || undefined,
+      category: formData.category,
+      tags,
+      authorName: formData.authorName,
+      metaTitle: formData.metaTitle || undefined,
+      metaDescription: formData.metaDescription || undefined,
+      primaryKeyword: formData.primaryKeyword || undefined,
+      secondaryKeywords,
+      scheduledAt: scheduledAt || undefined,
+      ...(withStatus ? { status: withStatus } : {}),
+    };
+  };
+
+  const handleCreate = async (e: React.FormEvent, publishNow?: boolean) => {
+    e.preventDefault();
+    setSaving(true);
+    try {
+      const payload = buildPayload(publishNow ? 'published' : undefined);
+      if (publishNow) payload.scheduledAt = undefined;
+      await createBlogPost(payload);
       await fetchPosts();
       closeModal();
     } catch (err: any) {
@@ -140,14 +216,7 @@ export default function AdminBlogPage() {
     setSaving(true);
     try {
       const data: UpdateBlogPostRequest = {
-        ...formData,
+        ...buildPayload(editStatus),
-        status: editStatus,
-        tags: tagsInput
-          ? tagsInput
-              .split(',')
-              .map(t => t.trim())
-              .filter(Boolean)
-          : [],
       };
       await updateBlogPost(selectedPost.id, data);
       await fetchPosts();
@@ -219,8 +288,10 @@ export default function AdminBlogPage() {
   const openCreate = () => {
     setFormData(EMPTY_FORM);
     setTagsInput('');
+    setScheduledAt('');
     setEditStatus('draft');
     setSelectedPost(null);
+    setSeoOpen(false);
     setShowCreateModal(true);
   };
 
@@ -235,9 +306,15 @@ export default function AdminBlogPage() {
       category: post.category,
       tags: post.tags,
       authorName: post.authorName,
+      metaTitle: post.metaTitle ?? '',
+      metaDescription: post.metaDescription ?? '',
+      primaryKeyword: post.primaryKeyword ?? '',
+      secondaryKeywordsInput: (post.secondaryKeywords ?? []).join(', '),
     });
     setTagsInput(post.tags.join(', '));
+    setScheduledAt(post.status === 'scheduled' ? toLocalDatetimeValue(post.publishedAt) : '');
     setEditStatus(post.status);
+    setSeoOpen(!!(post.metaTitle || post.metaDescription || post.primaryKeyword));
     setShowEditModal(true);
   };
 
@@ -247,6 +324,8 @@ export default function AdminBlogPage() {
     setSelectedPost(null);
     setFormData(EMPTY_FORM);
     setTagsInput('');
+    setScheduledAt('');
+    setSeoOpen(false);
   };
 
   const handleTitleChange = (title: string) => {
@@ -257,10 +336,27 @@ export default function AdminBlogPage() {
         prev.slug === generateSlug(prev.title) || prev.slug === ''
           ? generateSlug(title)
           : prev.slug,
+      metaTitle: prev.metaTitle === prev.title || prev.metaTitle === '' ? title : prev.metaTitle,
     }));
   };
 
+  const metaTitleLen = formData.metaTitle.length;
+  const metaDescLen = formData.metaDescription.length;
+  const metaTitleColor =
+    metaTitleLen === 0
+      ? 'text-gray-400'
+      : metaTitleLen <= 60
+        ? 'text-green-600'
+        : 'text-red-500';
+  const metaDescColor =
+    metaDescLen === 0
+      ? 'text-gray-400'
+      : metaDescLen <= 160
+        ? 'text-green-600'
+        : 'text-red-500';
+
   const isOpen = showCreateModal || showEditModal;
+  const isScheduleMode = !!scheduledAt;
 
   return (
     <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
@@ -347,11 +443,25 @@ export default function AdminBlogPage() {
                       {CATEGORIES.find(c => c.value === post.category)?.label ?? post.category}
                     </td>
                     <td className="px-6 py-4">
+                      <div className="flex flex-col gap-1">
                         <span
-                        className={`px-2 py-1 rounded-full text-xs font-medium ${STATUS_COLORS[post.status]}`}
+                          className={`px-2 py-1 rounded-full text-xs font-medium w-fit ${STATUS_COLORS[post.status]}`}
                         >
                           {STATUS_LABELS[post.status]}
                         </span>
+                        {post.status === 'scheduled' && post.publishedAt && (
+                          <span className="text-xs text-gray-400 flex items-center gap-1">
+                            <Clock className="w-3 h-3" />
+                            {new Date(post.publishedAt).toLocaleString('fr-FR', {
+                              day: '2-digit',
+                              month: '2-digit',
+                              year: '2-digit',
+                              hour: '2-digit',
+                              minute: '2-digit',
+                            })}
+                          </span>
+                        )}
+                      </div>
                     </td>
                     <td className="px-6 py-4 text-sm text-gray-600">{post.authorName}</td>
                     <td className="px-6 py-4 text-sm text-gray-500">
@@ -361,7 +471,7 @@ export default function AdminBlogPage() {
                     </td>
                     <td className="px-6 py-4">
                       <div className="flex items-center justify-end space-x-1">
-                        {post.status === 'published' && (
+                        {(post.status === 'published' || post.status === 'scheduled') && (
                           <Link href={`/blog/${post.slug}`} target="_blank">
                             <button
                               className="p-1.5 text-gray-400 hover:text-blue-600 transition-colors"
@@ -436,6 +546,7 @@ export default function AdminBlogPage() {
                   className="text-sm border border-gray-300 rounded-lg px-3 py-1.5 focus:ring-2 focus:ring-blue-500 focus:outline-none"
                 >
                   <option value="draft">Brouillon</option>
+                  <option value="scheduled">Planifié</option>
                   <option value="published">Publié</option>
                   <option value="archived">Archivé</option>
                 </select>
@@ -492,29 +603,183 @@ export default function AdminBlogPage() {
                   minHeight={500}
                 />
               </div>
+
+              {/* SEO Panel */}
+              <div className="bg-white rounded-xl border border-gray-200 shadow-sm">
+                <button
+                  type="button"
+                  onClick={() => setSeoOpen(o => !o)}
+                  className="w-full flex items-center justify-between px-5 py-4 text-left"
+                >
+                  <div className="flex items-center gap-2">
+                    <Search className="w-4 h-4 text-gray-500" />
+                    <span className="font-semibold text-gray-900 text-sm">
+                      SEO & Référencement
+                    </span>
+                    {(formData.metaTitle || formData.metaDescription || formData.primaryKeyword) && (
+                      <span className="w-2 h-2 rounded-full bg-green-500 inline-block" />
+                    )}
+                  </div>
+                  {seoOpen ? (
+                    <ChevronUp className="w-4 h-4 text-gray-400" />
+                  ) : (
+                    <ChevronDown className="w-4 h-4 text-gray-400" />
+                  )}
+                </button>
+
+                {seoOpen && (
+                  <div className="px-5 pb-5 space-y-4 border-t border-gray-100">
+                    <div className="mt-4">
+                      <SeoPreview
+                        metaTitle={formData.metaTitle}
+                        metaDescription={formData.metaDescription}
+                        slug={formData.slug}
+                      />
+                    </div>
+
+                    <div>
+                      <div className="flex items-center justify-between mb-1">
+                        <label className="block text-sm font-medium text-gray-700">
+                          Meta Titre
+                        </label>
+                        <span className={`text-xs ${metaTitleColor}`}>
+                          {metaTitleLen}/60
+                        </span>
+                      </div>
+                      <input
+                        type="text"
+                        value={formData.metaTitle}
+                        onChange={e =>
+                          setFormData(prev => ({ ...prev, metaTitle: e.target.value }))
+                        }
+                        maxLength={255}
+                        className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                        placeholder="Titre affiché dans Google (50-60 car. idéal)"
+                      />
+                    </div>
+
+                    <div>
+                      <div className="flex items-center justify-between mb-1">
+                        <label className="block text-sm font-medium text-gray-700">
+                          Meta Description
+                        </label>
+                        <span className={`text-xs ${metaDescColor}`}>
+                          {metaDescLen}/160
+                        </span>
+                      </div>
+                      <textarea
+                        rows={3}
+                        value={formData.metaDescription}
+                        onChange={e =>
+                          setFormData(prev => ({ ...prev, metaDescription: e.target.value }))
+                        }
+                        maxLength={500}
+                        className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none resize-none"
+                        placeholder="Description affichée dans Google (150-160 car. idéal)"
+                      />
+                    </div>
+
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-1">
+                        Mot-clé principal
+                      </label>
+                      <input
+                        type="text"
+                        value={formData.primaryKeyword}
+                        onChange={e =>
+                          setFormData(prev => ({ ...prev, primaryKeyword: e.target.value }))
+                        }
+                        className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                        placeholder="ex: devis maritime instantané"
+                      />
+                    </div>
+
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-1">
+                        Mots-clés secondaires{' '}
+                        <span className="text-gray-400 font-normal">(virgule)</span>
+                      </label>
+                      <input
+                        type="text"
+                        value={formData.secondaryKeywordsInput}
+                        onChange={e =>
+                          setFormData(prev => ({
+                            ...prev,
+                            secondaryKeywordsInput: e.target.value,
+                          }))
+                        }
+                        className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                        placeholder="ex: fret maritime, suivi de marchandise, Click&Ship"
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
             </div>
 
             {/* Sidebar — 1/3 */}
             <div className="space-y-5">
-              {/* Publish button */}
+              {/* Publication */}
-              <div className="bg-white rounded-xl border border-gray-200 p-5 shadow-sm">
+              <div className="bg-white rounded-xl border border-gray-200 p-5 shadow-sm space-y-4">
-                <h3 className="font-semibold text-gray-900 mb-4">Publication</h3>
+                <h3 className="font-semibold text-gray-900">Publication</h3>
+
+                {/* Scheduled date */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1.5">
+                    <Clock className="w-3.5 h-3.5 text-gray-400" />
+                    Date de publication planifiée
+                  </label>
+                  <input
+                    type="datetime-local"
+                    value={scheduledAt}
+                    onChange={e => setScheduledAt(e.target.value)}
+                    className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                  />
+                  {scheduledAt && (
+                    <button
+                      type="button"
+                      onClick={() => setScheduledAt('')}
+                      className="text-xs text-gray-400 hover:text-red-500 mt-1 underline"
+                    >
+                      Effacer la date
+                    </button>
+                  )}
+                  <p className="text-xs text-gray-400 mt-1">
+                    {isScheduleMode
+                      ? 'Le post sera publié automatiquement à cette date.'
+                      : 'Laisser vide pour publier manuellement.'}
+                  </p>
+                </div>
+
+                {showCreateModal ? (
+                  <div className="space-y-2">
+                    <button
+                      type="button"
+                      disabled={saving}
+                      onClick={e => handleCreate(e, true)}
+                      className="w-full py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-medium disabled:opacity-50 flex items-center justify-center gap-2 text-sm"
+                    >
+                      {saving && <Loader2 className="w-4 h-4 animate-spin" />}
+                      Publier maintenant
+                    </button>
                     <button
                       type="submit"
                       disabled={saving}
-                  className="w-full py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium disabled:opacity-50 flex items-center justify-center gap-2"
+                      className="w-full py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium disabled:opacity-50 flex items-center justify-center gap-2 text-sm"
                     >
                       {saving && <Loader2 className="w-4 h-4 animate-spin" />}
-                  {saving
+                      {isScheduleMode ? 'Planifier' : 'Enregistrer brouillon'}
-                    ? 'Enregistrement...'
+                    </button>
-                    : showCreateModal
+                  </div>
-                      ? 'Créer le brouillon'
+                ) : (
-                      : 'Enregistrer'}
+                  <button
+                    type="submit"
+                    disabled={saving}
+                    className="w-full py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium disabled:opacity-50 flex items-center justify-center gap-2 text-sm"
+                  >
+                    {saving && <Loader2 className="w-4 h-4 animate-spin" />}
+                    {saving ? 'Enregistrement...' : 'Enregistrer'}
                   </button>
-                {showCreateModal && (
-                  <p className="text-xs text-gray-400 text-center mt-2">
-                    Créé en brouillon. Publiez depuis la liste.
-                  </p>
                 )}
               </div>
 
@@ -561,7 +826,6 @@ export default function AdminBlogPage() {
                   className="hidden"
                   onChange={handleCoverUpload}
                 />
-                {/* Also allow URL */}
                 <div className="mt-3">
                   <input
                     type="url"

apps/frontend/app/[locale]/login/page.tsx

@@ -1,12 +1,55 @@
 'use client';
 
-import { useState, Suspense } from 'react';
+import { useState, useEffect, useRef, Suspense } from 'react';
 import { Link } from '@/i18n/navigation';
 import Image from 'next/image';
 import { useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import { useAuth } from '@/lib/context/auth-context';
 
+function AnimatedCounter({
+  end,
+  suffix = '',
+  prefix = '',
+  decimals = 0,
+  isActive,
+  duration = 2,
+}: {
+  end: number;
+  suffix?: string;
+  prefix?: string;
+  decimals?: number;
+  isActive: boolean;
+  duration?: number;
+}) {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    if (!isActive) return;
+    let startTime: number | undefined;
+
+    const animate = (timestamp: number) => {
+      if (!startTime) startTime = timestamp;
+      const progress = Math.min((timestamp - startTime) / (duration * 1000), 1);
+      const eased = 1 - Math.pow(1 - progress, 3);
+      setCount(eased * end);
+      if (progress < 1) requestAnimationFrame(animate);
+      else setCount(end);
+    };
+
+    requestAnimationFrame(animate);
+  }, [end, duration, isActive]);
+
+  const display = decimals > 0 ? count.toFixed(decimals) : Math.floor(count).toString();
+  return (
+    <>
+      {prefix}
+      {display}
+      {suffix}
+    </>
+  );
+}
+
 interface FieldErrors {
   email?: string;
   password?: string;
@@ -60,6 +103,22 @@ function LoginPageContent() {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState('');
   const [fieldErrors, setFieldErrors] = useState<FieldErrors>({});
+  const [statsActive, setStatsActive] = useState(false);
+  const statsRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setStatsActive(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.3 }
+    );
+    if (statsRef.current) observer.observe(statsRef.current);
+    return () => observer.disconnect();
+  }, []);
 
   const validateForm = (): boolean => {
     const errors: FieldErrors = {};
@@ -273,7 +332,7 @@ function LoginPageContent() {
           </div>
 
           <div className="mt-8 pt-8 border-t border-neutral-200">
-            <div className="flex flex-wrap justify-center gap-6 text-body-sm text-neutral-500">
+            <div className="flex flex-wrap justify-center gap-4 text-body-sm text-neutral-500">
               <Link href="/contact" className="hover:text-accent transition-colors">
                 {tFooter('contact')}
               </Link>
@@ -283,6 +342,12 @@ function LoginPageContent() {
               <Link href="/terms" className="hover:text-accent transition-colors">
                 {tFooter('terms')}
               </Link>
+              <Link href="/cookies" className="hover:text-accent transition-colors">
+                {tFooter('cookies')}
+              </Link>
+              <Link href="/compliance" className="hover:text-accent transition-colors">
+                {tFooter('compliance')}
+              </Link>
             </div>
           </div>
         </div>
@@ -372,19 +437,28 @@ function LoginPageContent() {
               </div>
             </div>
 
-            <div className="grid grid-cols-3 gap-8 mt-12 pt-12 border-t border-neutral-700">
+            <div
+              ref={statsRef}
+              className="grid grid-cols-3 gap-8 mt-12 pt-12 border-t border-neutral-700"
+            >
               <div>
-                <div className="text-display-sm text-brand-turquoise">50+</div>
+                <div className="text-display-sm text-brand-turquoise">
+                  <AnimatedCounter end={50} suffix="+" isActive={statsActive} />
+                </div>
                 <div className="text-body-sm text-neutral-300 mt-1">{tPanel('stats.carriers')}</div>
               </div>
               <div>
-                <div className="text-display-sm text-brand-turquoise">10k+</div>
+                <div className="text-display-sm text-brand-turquoise">
+                  <AnimatedCounter end={10} suffix="k+" isActive={statsActive} />
+                </div>
                 <div className="text-body-sm text-neutral-300 mt-1">
                   {tPanel('stats.shipments')}
                 </div>
               </div>
               <div>
-                <div className="text-display-sm text-brand-turquoise">99.5%</div>
+                <div className="text-display-sm text-brand-turquoise">
+                  <AnimatedCounter end={99.5} decimals={1} suffix="%" isActive={statsActive} />
+                </div>
                 <div className="text-body-sm text-neutral-300 mt-1">
                   {tPanel('stats.satisfaction')}
                 </div>

apps/frontend/app/[locale]/register/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, Suspense } from 'react';
+import { useState, useEffect, useRef, Suspense } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { Link, useRouter } from '@/i18n/navigation';
 import Image from 'next/image';
@@ -9,6 +9,49 @@ import { register } from '@/lib/api';
 import { verifyInvitation, type InvitationResponse } from '@/lib/api/invitations';
 import type { OrganizationType } from '@/types/api';
 
+function AnimatedCounter({
+  end,
+  suffix = '',
+  prefix = '',
+  decimals = 0,
+  isActive,
+  duration = 2,
+}: {
+  end: number;
+  suffix?: string;
+  prefix?: string;
+  decimals?: number;
+  isActive: boolean;
+  duration?: number;
+}) {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    if (!isActive) return;
+    let startTime: number | undefined;
+
+    const animate = (timestamp: number) => {
+      if (!startTime) startTime = timestamp;
+      const progress = Math.min((timestamp - startTime) / (duration * 1000), 1);
+      const eased = 1 - Math.pow(1 - progress, 3);
+      setCount(eased * end);
+      if (progress < 1) requestAnimationFrame(animate);
+      else setCount(end);
+    };
+
+    requestAnimationFrame(animate);
+  }, [end, duration, isActive]);
+
+  const display = decimals > 0 ? count.toFixed(decimals) : Math.floor(count).toString();
+  return (
+    <>
+      {prefix}
+      {display}
+      {suffix}
+    </>
+  );
+}
+
 function RegisterPageContent() {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -16,6 +59,22 @@ function RegisterPageContent() {
   const tFooter = useTranslations('auth.footerLinks');
 
   const [step, setStep] = useState<1 | 2>(1);
+  const [statsActive, setStatsActive] = useState(false);
+  const statsRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setStatsActive(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.3 }
+    );
+    if (statsRef.current) observer.observe(statsRef.current);
+    return () => observer.disconnect();
+  }, []);
 
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
@@ -223,21 +282,30 @@ function RegisterPageContent() {
               </div>
             </div>
           </div>
-          <div className="grid grid-cols-3 gap-8 mt-12 pt-12 border-t border-neutral-700">
+          <div
+            ref={statsRef}
+            className="grid grid-cols-3 gap-8 mt-12 pt-12 border-t border-neutral-700"
+          >
             <div>
-              <div className="text-display-sm text-brand-turquoise">2k+</div>
+              <div className="text-display-sm text-brand-turquoise">
+                <AnimatedCounter end={2} suffix="k+" isActive={statsActive} />
+              </div>
               <div className="text-body-sm text-neutral-300 mt-1">
                 {t('sidePanel.stats.companies')}
               </div>
             </div>
             <div>
-              <div className="text-display-sm text-brand-turquoise">150+</div>
+              <div className="text-display-sm text-brand-turquoise">
+                <AnimatedCounter end={150} suffix="+" isActive={statsActive} />
+              </div>
               <div className="text-body-sm text-neutral-300 mt-1">
                 {t('sidePanel.stats.countries')}
               </div>
             </div>
             <div>
-              <div className="text-display-sm text-brand-turquoise">24/7</div>
+              <div className="text-display-sm text-brand-turquoise">
+                <AnimatedCounter end={24} suffix="/7" isActive={statsActive} />
+              </div>
               <div className="text-body-sm text-neutral-300 mt-1">
                 {t('sidePanel.stats.support')}
               </div>
@@ -697,7 +765,7 @@ function RegisterPageContent() {
           </div>
 
           <div className="mt-6 pt-6 border-t border-neutral-200">
-            <div className="flex flex-wrap justify-center gap-6 text-body-sm text-neutral-500">
+            <div className="flex flex-wrap justify-center gap-4 text-body-sm text-neutral-500">
               <Link href="/contact" className="hover:text-accent transition-colors">
                 {tFooter('contact')}
               </Link>
@@ -707,6 +775,12 @@ function RegisterPageContent() {
               <Link href="/terms" className="hover:text-accent transition-colors">
                 {tFooter('terms')}
               </Link>
+              <Link href="/cookies" className="hover:text-accent transition-colors">
+                {tFooter('cookies')}
+              </Link>
+              <Link href="/compliance" className="hover:text-accent transition-colors">
+                {tFooter('compliance')}
+              </Link>
             </div>
           </div>
         </div>

apps/frontend/messages/en.json

@@ -4263,8 +4263,10 @@
     },
     "footerLinks": {
       "contact": "Contact us",
-      "privacy": "Privacy",
+      "privacy": "Privacy Policy",
-      "terms": "Terms"
+      "terms": "Terms of Service",
+      "cookies": "Cookie Policy",
+      "compliance": "GDPR Compliance"
     },
     "forgotPassword": {
       "title": "Forgot password?",

apps/frontend/messages/fr.json

@@ -4304,8 +4304,10 @@
     },
     "footerLinks": {
       "contact": "Contactez-nous",
-      "privacy": "Confidentialité",
+      "privacy": "Politique de confidentialité",
-      "terms": "Conditions"
+      "terms": "Conditions générales",
+      "cookies": "Politique de cookies",
+      "compliance": "Conformité RGPD"
     },
     "forgotPassword": {
       "title": "Mot de passe oublié ?",

apps/frontend/middleware.ts

@@ -31,6 +31,11 @@ const prefixPublicPaths = [
   '/carrier',
   '/pricing',
   '/docs',
+  '/privacy',
+  '/terms',
+  '/cookies',
+  '/compliance',
+  '/security',
 ];
 
 function stripLocale(pathname: string): { locale: string | null; pathWithoutLocale: string } {

apps/frontend/src/lib/api/admin.ts

@@ -197,7 +197,15 @@ export async function getOrganizationDocuments(organizationId: string): Promise<
 
 // ==================== BLOG ====================
 
-export interface CreateBlogPostRequest {
+export interface BlogPostSeoFields {
+  metaTitle?: string;
+  metaDescription?: string;
+  primaryKeyword?: string;
+  secondaryKeywords?: string[];
+  scheduledAt?: string;
+}
+
+export interface CreateBlogPostRequest extends BlogPostSeoFields {
   title: string;
   slug: string;
   excerpt: string;
@@ -208,7 +216,7 @@ export interface CreateBlogPostRequest {
   authorName: string;
 }
 
-export interface UpdateBlogPostRequest {
+export interface UpdateBlogPostRequest extends BlogPostSeoFields {
   title?: string;
   slug?: string;
   excerpt?: string;

apps/frontend/src/lib/api/blog.ts

@@ -1,6 +1,6 @@
 import { get } from './client';
 
-export type BlogPostStatus = 'draft' | 'published' | 'archived';
+export type BlogPostStatus = 'draft' | 'scheduled' | 'published' | 'archived';
 export type BlogPostCategory = 'industry' | 'technology' | 'guides' | 'news';
 
 export interface BlogPost {
@@ -16,6 +16,10 @@ export interface BlogPost {
   status: BlogPostStatus;
   isFeatured: boolean;
   publishedAt?: string;
+  metaTitle?: string;
+  metaDescription?: string;
+  primaryKeyword?: string;
+  secondaryKeywords: string[];
   createdAt: string;
   updatedAt: string;
 }