feat: implement Weather Workshop feature with models, UI components, and session management for enhanced team visibility and personal well-being tracking

src/app/api/weather/[id]/subscribe/route.ts

@@ -0,0 +1,122 @@
+import { auth } from '@/lib/auth';
+import {
+  canAccessWeatherSession,
+  getWeatherSessionEvents,
+} from '@/services/weather';
+
+export const dynamic = 'force-dynamic';
+
+// Store active connections per session
+const connections = new Map<string, Set<ReadableStreamDefaultController>>();
+
+export async function GET(request: Request, { params }: { params: Promise<{ id: string }> }) {
+  const { id: sessionId } = await params;
+  const session = await auth();
+
+  if (!session?.user?.id) {
+    return new Response('Unauthorized', { status: 401 });
+  }
+
+  // Check access
+  const hasAccess = await canAccessWeatherSession(sessionId, session.user.id);
+  if (!hasAccess) {
+    return new Response('Forbidden', { status: 403 });
+  }
+
+  const userId = session.user.id;
+  let lastEventTime = new Date();
+  let controller: ReadableStreamDefaultController;
+
+  const stream = new ReadableStream({
+    start(ctrl) {
+      controller = ctrl;
+
+      // Register connection
+      if (!connections.has(sessionId)) {
+        connections.set(sessionId, new Set());
+      }
+      connections.get(sessionId)!.add(controller);
+
+      // Send initial ping
+      const encoder = new TextEncoder();
+      controller.enqueue(
+        encoder.encode(`data: ${JSON.stringify({ type: 'connected', userId })}\n\n`)
+      );
+    },
+    cancel() {
+      // Remove connection on close
+      connections.get(sessionId)?.delete(controller);
+      if (connections.get(sessionId)?.size === 0) {
+        connections.delete(sessionId);
+      }
+    },
+  });
+
+  // Poll for new events (simple approach, works with any DB)
+  const pollInterval = setInterval(async () => {
+    try {
+      const events = await getWeatherSessionEvents(sessionId, lastEventTime);
+      if (events.length > 0) {
+        const encoder = new TextEncoder();
+        for (const event of events) {
+          // Don't send events to the user who created them
+          if (event.userId !== userId) {
+            controller.enqueue(
+              encoder.encode(
+                `data: ${JSON.stringify({
+                  type: event.type,
+                  payload: JSON.parse(event.payload),
+                  userId: event.userId,
+                  user: event.user,
+                  timestamp: event.createdAt,
+                })}\n\n`
+              )
+            );
+          }
+          lastEventTime = event.createdAt;
+        }
+      }
+    } catch {
+      // Connection might be closed
+      clearInterval(pollInterval);
+    }
+  }, 1000); // Poll every second
+
+  // Cleanup on abort
+  request.signal.addEventListener('abort', () => {
+    clearInterval(pollInterval);
+  });
+
+  return new Response(stream, {
+    headers: {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      Connection: 'keep-alive',
+    },
+  });
+}
+
+// Helper to broadcast to all connections (called from actions)
+export function broadcastToWeatherSession(sessionId: string, event: object) {
+  const sessionConnections = connections.get(sessionId);
+  if (!sessionConnections || sessionConnections.size === 0) {
+    return;
+  }
+
+  const encoder = new TextEncoder();
+  const message = encoder.encode(`data: ${JSON.stringify(event)}\n\n`);
+
+  for (const controller of sessionConnections) {
+    try {
+      controller.enqueue(message);
+    } catch {
+      // Connection might be closed, remove it
+      sessionConnections.delete(controller);
+    }
+  }
+
+  // Clean up empty sets
+  if (sessionConnections.size === 0) {
+    connections.delete(sessionId);
+  }
+}

src/app/page.tsx

@@ -84,6 +84,22 @@ export default function Home() {
               accentColor="#10b981"
               newHref="/weekly-checkin/new"
             />
+
+            {/* Weather Workshop Card */}
+            <WorkshopCard
+              href="/sessions?tab=weather"
+              icon="🌤️"
+              title="Météo"
+              tagline="Votre état en un coup d'œil"
+              description="Créez votre météo personnelle sur 4 axes clés (Performance, Moral, Flux, Création de valeur) et partagez-la avec votre équipe pour une meilleure visibilité de votre état."
+              features={[
+                '4 axes : Performance, Moral, Flux, Création de valeur',
+                'Emojis météo pour exprimer votre état visuellement',
+                'Notes globales pour détailler votre ressenti',
+              ]}
+              accentColor="#3b82f6"
+              newHref="/weather/new"
+            />
           </div>
         </section>
 
@@ -459,6 +475,94 @@ export default function Home() {
           </div>
         </section>
 
+        {/* Weather Deep Dive Section */}
+        <section className="mb-16">
+          <div className="flex items-center gap-3 mb-8">
+            <span className="text-4xl">🌤️</span>
+            <div>
+              <h2 className="text-3xl font-bold text-foreground">Météo</h2>
+              <p className="text-blue-500 font-medium">Votre état en un coup d&apos;œil</p>
+            </div>
+          </div>
+
+          <div className="grid gap-8 lg:grid-cols-2">
+            {/* Why */}
+            <div className="rounded-xl border border-border bg-card p-6">
+              <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
+                <span className="text-2xl">💡</span>
+                Pourquoi créer une météo personnelle ?
+              </h3>
+              <p className="text-muted mb-4">
+                La météo est un outil simple et visuel pour exprimer rapidement votre état sur 4 axes clés.
+                En la partageant avec votre équipe, vous créez de la transparence et facilitez la communication
+                sur votre bien-être et votre performance.
+              </p>
+              <ul className="space-y-2 text-sm text-muted">
+                <li className="flex items-start gap-2">
+                  <span className="text-blue-500">•</span>
+                  Exprimer rapidement votre état avec des emojis météo intuitifs
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-blue-500">•</span>
+                  Partager votre météo avec votre équipe pour une meilleure visibilité
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-blue-500">•</span>
+                  Créer un espace de dialogue ouvert sur votre performance et votre moral
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-blue-500">•</span>
+                  Suivre l&apos;évolution de votre état dans le temps
+                </li>
+              </ul>
+            </div>
+
+            {/* The 4 axes */}
+            <div className="rounded-xl border border-border bg-card p-6">
+              <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
+                <span className="text-2xl">📋</span>
+                Les 4 axes de la météo
+              </h3>
+              <div className="space-y-3">
+                <CategoryPill icon="☀️" name="Performance" color="#f59e0b" description="Votre performance personnelle et l'atteinte de vos objectifs" />
+                <CategoryPill icon="😊" name="Moral" color="#22c55e" description="Votre moral actuel et votre ressenti" />
+                <CategoryPill icon="🌊" name="Flux" color="#3b82f6" description="Votre flux de travail personnel et les blocages éventuels" />
+                <CategoryPill icon="💎" name="Création de valeur" color="#8b5cf6" description="Votre création de valeur et votre apport" />
+              </div>
+            </div>
+
+            {/* How it works */}
+            <div className="rounded-xl border border-border bg-card p-6 lg:col-span-2">
+              <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
+                <span className="text-2xl">⚙️</span>
+                Comment ça marche ?
+              </h3>
+              <div className="grid md:grid-cols-4 gap-4">
+                <StepCard
+                  number={1}
+                  title="Créer votre météo"
+                  description="Créez une nouvelle météo personnelle avec un titre et une date"
+                />
+                <StepCard
+                  number={2}
+                  title="Choisir vos emojis"
+                  description="Pour chaque axe, sélectionnez un emoji météo qui reflète votre état"
+                />
+                <StepCard
+                  number={3}
+                  title="Ajouter des notes"
+                  description="Complétez avec des notes globales pour détailler votre ressenti"
+                />
+                <StepCard
+                  number={4}
+                  title="Partager avec l'équipe"
+                  description="Partagez votre météo avec votre équipe ou une équipe entière pour qu'ils puissent voir votre état"
+                />
+              </div>
+            </div>
+          </div>
+        </section>
+
         {/* OKRs Deep Dive Section */}
         <section className="mb-16">
           <div className="flex items-center gap-3 mb-8">

src/app/sessions/WorkshopTabs.tsx

@@ -16,8 +16,9 @@ import { deleteSwotSession, updateSwotSession } from '@/actions/session';
 import { deleteMotivatorSession, updateMotivatorSession } from '@/actions/moving-motivators';
 import { deleteYearReviewSession, updateYearReviewSession } from '@/actions/year-review';
 import { deleteWeeklyCheckInSession, updateWeeklyCheckInSession } from '@/actions/weekly-checkin';
+import { deleteWeatherSession, updateWeatherSession } from '@/actions/weather';
 
-type WorkshopType = 'all' | 'swot' | 'motivators' | 'year-review' | 'weekly-checkin' | 'byPerson';
+type WorkshopType = 'all' | 'swot' | 'motivators' | 'year-review' | 'weekly-checkin' | 'weather' | 'byPerson';
 
 const VALID_TABS: WorkshopType[] = [
   'all',
@@ -25,6 +26,7 @@ const VALID_TABS: WorkshopType[] = [
   'motivators',
   'year-review',
   'weekly-checkin',
+  'weather',
   'byPerson',
 ];
 
@@ -107,13 +109,27 @@ interface WeeklyCheckInSession {
   workshopType: 'weekly-checkin';
 }
 
-type AnySession = SwotSession | MotivatorSession | YearReviewSession | WeeklyCheckInSession;
+interface WeatherSession {
+  id: string;
+  title: string;
+  date: Date;
+  updatedAt: Date;
+  isOwner: boolean;
+  role: 'OWNER' | 'VIEWER' | 'EDITOR';
+  user: { id: string; name: string | null; email: string };
+  shares: Share[];
+  _count: { entries: number };
+  workshopType: 'weather';
+}
+
+type AnySession = SwotSession | MotivatorSession | YearReviewSession | WeeklyCheckInSession | WeatherSession;
 
 interface WorkshopTabsProps {
   swotSessions: SwotSession[];
   motivatorSessions: MotivatorSession[];
   yearReviewSessions: YearReviewSession[];
   weeklyCheckInSessions: WeeklyCheckInSession[];
+  weatherSessions: WeatherSession[];
 }
 
 // Helper to get resolved collaborator from any session
@@ -124,6 +140,17 @@ function getResolvedCollaborator(session: AnySession): ResolvedCollaborator {
     return (session as YearReviewSession).resolvedParticipant;
   } else if (session.workshopType === 'weekly-checkin') {
     return (session as WeeklyCheckInSession).resolvedParticipant;
+  } else if (session.workshopType === 'weather') {
+    // For weather sessions, use the owner as the "participant" since it's a personal weather
+    const weatherSession = session as WeatherSession;
+    return {
+      raw: weatherSession.user.name || weatherSession.user.email,
+      matchedUser: {
+        id: weatherSession.user.id,
+        email: weatherSession.user.email,
+        name: weatherSession.user.name,
+      },
+    };
   } else {
     return (session as MotivatorSession).resolvedParticipant;
   }
@@ -168,6 +195,7 @@ export function WorkshopTabs({
   motivatorSessions,
   yearReviewSessions,
   weeklyCheckInSessions,
+  weatherSessions,
 }: WorkshopTabsProps) {
   const searchParams = useSearchParams();
   const router = useRouter();
@@ -193,6 +221,7 @@ export function WorkshopTabs({
     ...motivatorSessions,
     ...yearReviewSessions,
     ...weeklyCheckInSessions,
+    ...weatherSessions,
   ].sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime());
 
   // Filter based on active tab (for non-byPerson tabs)
@@ -205,7 +234,9 @@ export function WorkshopTabs({
           ? motivatorSessions
           : activeTab === 'year-review'
             ? yearReviewSessions
-            : weeklyCheckInSessions;
+            : activeTab === 'weekly-checkin'
+              ? weeklyCheckInSessions
+              : weatherSessions;
 
   // Separate by ownership
   const ownedSessions = filteredSessions.filter((s) => s.isOwner);
@@ -263,6 +294,13 @@ export function WorkshopTabs({
           label="Weekly Check-in"
           count={weeklyCheckInSessions.length}
         />
+        <TabButton
+          active={activeTab === 'weather'}
+          onClick={() => setActiveTab('weather')}
+          icon="🌤️"
+          label="Météo"
+          count={weatherSessions.length}
+        />
       </div>
 
       {/* Sessions */}
@@ -375,34 +413,43 @@ function SessionCard({ session }: { session: AnySession }) {
       ? (session as SwotSession).collaborator
       : session.workshopType === 'year-review'
         ? (session as YearReviewSession).participant
-        : (session as MotivatorSession).participant
+        : session.workshopType === 'weather'
+          ? ''
+          : (session as MotivatorSession).participant
   );
 
   const isSwot = session.workshopType === 'swot';
   const isYearReview = session.workshopType === 'year-review';
   const isWeeklyCheckIn = session.workshopType === 'weekly-checkin';
+  const isWeather = session.workshopType === 'weather';
   const href = isSwot
     ? `/sessions/${session.id}`
     : isYearReview
       ? `/year-review/${session.id}`
       : isWeeklyCheckIn
         ? `/weekly-checkin/${session.id}`
-        : `/motivators/${session.id}`;
-  const icon = isSwot ? '📊' : isYearReview ? '📅' : isWeeklyCheckIn ? '📝' : '🎯';
+        : isWeather
+          ? `/weather/${session.id}`
+          : `/motivators/${session.id}`;
+  const icon = isSwot ? '📊' : isYearReview ? '📅' : isWeeklyCheckIn ? '📝' : isWeather ? '🌤️' : '🎯';
   const participant = isSwot
     ? (session as SwotSession).collaborator
     : isYearReview
       ? (session as YearReviewSession).participant
       : isWeeklyCheckIn
         ? (session as WeeklyCheckInSession).participant
-        : (session as MotivatorSession).participant;
+        : isWeather
+          ? (session as WeatherSession).user.name || (session as WeatherSession).user.email
+          : (session as MotivatorSession).participant;
   const accentColor = isSwot
     ? '#06b6d4'
     : isYearReview
       ? '#f59e0b'
       : isWeeklyCheckIn
         ? '#10b981'
-        : '#8b5cf6';
+        : isWeather
+          ? '#3b82f6'
+          : '#8b5cf6';
 
   const handleDelete = () => {
     startTransition(async () => {
@@ -412,7 +459,9 @@ function SessionCard({ session }: { session: AnySession }) {
           ? await deleteYearReviewSession(session.id)
           : isWeeklyCheckIn
             ? await deleteWeeklyCheckInSession(session.id)
-            : await deleteMotivatorSession(session.id);
+            : isWeather
+              ? await deleteWeatherSession(session.id)
+              : await deleteMotivatorSession(session.id);
 
       if (result.success) {
         setShowDeleteModal(false);
@@ -436,10 +485,12 @@ function SessionCard({ session }: { session: AnySession }) {
                 title: editTitle,
                 participant: editParticipant,
               })
-            : await updateMotivatorSession(session.id, {
-                title: editTitle,
-                participant: editParticipant,
-              });
+            : isWeather
+              ? await updateWeatherSession(session.id, { title: editTitle })
+              : await updateMotivatorSession(session.id, {
+                  title: editTitle,
+                  participant: editParticipant,
+                });
 
       if (result.success) {
         setShowEditModal(false);
@@ -456,7 +507,7 @@ function SessionCard({ session }: { session: AnySession }) {
     setShowEditModal(true);
   };
 
-  const editParticipantLabel = isSwot ? 'Collaborateur' : 'Participant';
+  const editParticipantLabel = isSwot ? 'Collaborateur' : isWeather ? '' : 'Participant';
 
   return (
     <>
@@ -524,6 +575,17 @@ function SessionCard({ session }: { session: AnySession }) {
                       })}
                     </span>
                   </>
+                ) : isWeather ? (
+                  <>
+                    <span>{(session as WeatherSession)._count.entries} membres</span>
+                    <span>·</span>
+                    <span>
+                      {new Date((session as WeatherSession).date).toLocaleDateString('fr-FR', {
+                        day: 'numeric',
+                        month: 'short',
+                      })}
+                    </span>
+                  </>
                 ) : (
                   <span>{(session as MotivatorSession)._count.cards}/10</span>
                 )}
@@ -640,13 +702,15 @@ function SessionCard({ session }: { session: AnySession }) {
             >
               {editParticipantLabel}
             </label>
-            <Input
-              id="edit-participant"
-              value={editParticipant}
-              onChange={(e) => setEditParticipant(e.target.value)}
-              placeholder={isSwot ? 'Nom du collaborateur' : 'Nom du participant'}
-              required
-            />
+            {!isWeather && (
+              <Input
+                id="edit-participant"
+                value={editParticipant}
+                onChange={(e) => setEditParticipant(e.target.value)}
+                placeholder={isSwot ? 'Nom du collaborateur' : 'Nom du participant'}
+                required
+              />
+            )}
           </div>
           <ModalFooter>
             <Button
@@ -659,7 +723,7 @@ function SessionCard({ session }: { session: AnySession }) {
             </Button>
             <Button
               type="submit"
-              disabled={isPending || !editTitle.trim() || !editParticipant.trim()}
+              disabled={isPending || !editTitle.trim() || (!isWeather && !editParticipant.trim())}
             >
               {isPending ? 'Enregistrement...' : 'Enregistrer'}
             </Button>

src/app/sessions/page.tsx

@@ -5,6 +5,7 @@ import { getSessionsByUserId } from '@/services/sessions';
 import { getMotivatorSessionsByUserId } from '@/services/moving-motivators';
 import { getYearReviewSessionsByUserId } from '@/services/year-review';
 import { getWeeklyCheckInSessionsByUserId } from '@/services/weekly-checkin';
+import { getWeatherSessionsByUserId } from '@/services/weather';
 import { Card, Button } from '@/components/ui';
 import { WorkshopTabs } from './WorkshopTabs';
 
@@ -34,13 +35,14 @@ export default async function SessionsPage() {
     return null;
   }
 
-  // Fetch SWOT, Moving Motivators, Year Review, and Weekly Check-in sessions
-  const [swotSessions, motivatorSessions, yearReviewSessions, weeklyCheckInSessions] =
+  // Fetch SWOT, Moving Motivators, Year Review, Weekly Check-in, and Weather sessions
+  const [swotSessions, motivatorSessions, yearReviewSessions, weeklyCheckInSessions, weatherSessions] =
     await Promise.all([
       getSessionsByUserId(session.user.id),
       getMotivatorSessionsByUserId(session.user.id),
       getYearReviewSessionsByUserId(session.user.id),
       getWeeklyCheckInSessionsByUserId(session.user.id),
+      getWeatherSessionsByUserId(session.user.id),
     ]);
 
   // Add type to each session for unified display
@@ -64,12 +66,18 @@ export default async function SessionsPage() {
     workshopType: 'weekly-checkin' as const,
   }));
 
+  const allWeatherSessions = weatherSessions.map((s) => ({
+    ...s,
+    workshopType: 'weather' as const,
+  }));
+
   // Combine and sort by updatedAt
   const allSessions = [
     ...allSwotSessions,
     ...allMotivatorSessions,
     ...allYearReviewSessions,
     ...allWeeklyCheckInSessions,
+    ...allWeatherSessions,
   ].sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime());
 
   const hasNoSessions = allSessions.length === 0;
@@ -102,11 +110,17 @@ export default async function SessionsPage() {
             </Button>
           </Link>
           <Link href="/weekly-checkin/new">
-            <Button>
+            <Button variant="outline">
               <span>📝</span>
               Nouveau Check-in
             </Button>
           </Link>
+          <Link href="/weather/new">
+            <Button>
+              <span>🌤️</span>
+              Nouvelle Météo
+            </Button>
+          </Link>
         </div>
       </div>
 
@@ -142,11 +156,17 @@ export default async function SessionsPage() {
               </Button>
             </Link>
             <Link href="/weekly-checkin/new">
-              <Button>
+              <Button variant="outline">
                 <span>📝</span>
                 Créer un Check-in
               </Button>
             </Link>
+            <Link href="/weather/new">
+              <Button>
+                <span>🌤️</span>
+                Créer une Météo
+              </Button>
+            </Link>
           </div>
         </Card>
       ) : (
@@ -156,6 +176,7 @@ export default async function SessionsPage() {
             motivatorSessions={allMotivatorSessions}
             yearReviewSessions={allYearReviewSessions}
             weeklyCheckInSessions={allWeeklyCheckInSessions}
+            weatherSessions={allWeatherSessions}
           />
         </Suspense>
       )}

src/app/weather/[id]/page.tsx

@@ -0,0 +1,102 @@
+import { notFound } from 'next/navigation';
+import Link from 'next/link';
+import { auth } from '@/lib/auth';
+import { getWeatherSessionById } from '@/services/weather';
+import { getUserTeams } from '@/services/teams';
+import { WeatherBoard, WeatherLiveWrapper, WeatherInfoPanel } from '@/components/weather';
+import { Badge } from '@/components/ui';
+import { EditableWeatherTitle } from '@/components/ui/EditableWeatherTitle';
+
+interface WeatherSessionPageProps {
+  params: Promise<{ id: string }>;
+}
+
+export default async function WeatherSessionPage({ params }: WeatherSessionPageProps) {
+  const { id } = await params;
+  const authSession = await auth();
+
+  if (!authSession?.user?.id) {
+    return null;
+  }
+
+  const [session, userTeams] = await Promise.all([
+    getWeatherSessionById(id, authSession.user.id),
+    getUserTeams(authSession.user.id),
+  ]);
+
+  if (!session) {
+    notFound();
+  }
+
+  return (
+    <main className="mx-auto max-w-7xl px-4 py-8">
+      {/* Header */}
+      <div className="mb-8">
+        <div className="flex items-center gap-2 text-sm text-muted mb-2">
+          <Link href="/sessions?tab=weather" className="hover:text-foreground">
+            Météo
+          </Link>
+          <span>/</span>
+          <span className="text-foreground">{session.title}</span>
+          {!session.isOwner && (
+            <Badge variant="accent" className="ml-2">
+              Partagé par {session.user.name || session.user.email}
+            </Badge>
+          )}
+        </div>
+
+        <div className="flex items-start justify-between">
+          <div>
+            <EditableWeatherTitle
+              sessionId={session.id}
+              initialTitle={session.title}
+              isOwner={session.isOwner}
+            />
+          </div>
+          <div className="flex items-center gap-3">
+            <Badge variant="primary">{session.entries.length} membres</Badge>
+            <span className="text-sm text-muted">
+              {new Date(session.date).toLocaleDateString('fr-FR', {
+                day: 'numeric',
+                month: 'long',
+                year: 'numeric',
+              })}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Info sur les catégories */}
+      <WeatherInfoPanel />
+
+      {/* Live Wrapper + Board */}
+      <WeatherLiveWrapper
+        sessionId={session.id}
+        sessionTitle={session.title}
+        currentUserId={authSession.user.id}
+        shares={session.shares}
+        isOwner={session.isOwner}
+        canEdit={session.canEdit}
+        userTeams={userTeams}
+      >
+        <WeatherBoard
+          sessionId={session.id}
+          currentUserId={authSession.user.id}
+          currentUser={{
+            id: authSession.user.id,
+            name: authSession.user.name ?? null,
+            email: authSession.user.email ?? '',
+          }}
+          entries={session.entries}
+          shares={session.shares}
+          owner={{
+            id: session.user.id,
+            name: session.user.name ?? null,
+            email: session.user.email ?? '',
+          }}
+          canEdit={session.canEdit}
+        />
+      </WeatherLiveWrapper>
+    </main>
+  );
+}

src/app/weather/new/page.tsx

@@ -0,0 +1,142 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  Button,
+  Input,
+} from '@/components/ui';
+import { createWeatherSession } from '@/actions/weather';
+import { getWeekYearLabel } from '@/lib/date-utils';
+
+export default function NewWeatherPage() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
+  const [title, setTitle] = useState('');
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    const formData = new FormData(e.currentTarget);
+    const dateStr = formData.get('date') as string;
+    const date = dateStr ? new Date(dateStr) : undefined;
+
+    if (!title) {
+      setError('Veuillez remplir le titre');
+      setLoading(false);
+      return;
+    }
+
+    const result = await createWeatherSession({ title, date });
+
+    if (!result.success) {
+      setError(result.error || 'Une erreur est survenue');
+      setLoading(false);
+      return;
+    }
+
+    router.push(`/weather/${result.data?.id}`);
+  }
+
+  // Default date to today
+  const today = new Date().toISOString().split('T')[0];
+
+  // Update title when date changes
+  useEffect(() => {
+    setTitle(getWeekYearLabel(new Date(selectedDate)));
+  }, [selectedDate]);
+
+  return (
+    <main className="mx-auto max-w-2xl px-4 py-8">
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <span>🌤️</span>
+            Nouvelle Météo
+          </CardTitle>
+          <CardDescription>
+            Créez une météo personnelle pour faire le point sur 4 axes clés et partagez-la avec votre équipe
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-6">
+            {error && (
+              <div className="rounded-lg border border-destructive/20 bg-destructive/10 p-3 text-sm text-destructive">
+                {error}
+              </div>
+            )}
+
+            <Input
+              label="Titre de la météo"
+              name="title"
+              placeholder="Ex: Météo S05 - 2026"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              required
+            />
+
+            <div>
+              <label htmlFor="date" className="block text-sm font-medium text-foreground mb-1">
+                Date de la météo
+              </label>
+              <input
+                id="date"
+                name="date"
+                type="date"
+                defaultValue={today}
+                onChange={(e) => setSelectedDate(e.target.value)}
+                required
+                className="w-full rounded-lg border border-border bg-input px-3 py-2 text-foreground outline-none focus:border-primary focus:ring-2 focus:ring-primary/20"
+              />
+            </div>
+
+            <div className="rounded-lg border border-border bg-card-hover p-4">
+              <h3 className="font-medium text-foreground mb-2">Comment ça marche ?</h3>
+              <ol className="text-sm text-muted space-y-1 list-decimal list-inside">
+                <li>
+                  <strong>Performance</strong> : Comment évaluez-vous votre performance personnelle ?
+                </li>
+                <li>
+                  <strong>Moral</strong> : Quel est votre moral actuel ?
+                </li>
+                <li>
+                  <strong>Flux</strong> : Comment se passe votre flux de travail personnel ?
+                </li>
+                <li>
+                  <strong>Création de valeur</strong> : Comment évaluez-vous votre création de valeur ?
+                </li>
+              </ol>
+              <p className="text-sm text-muted mt-2">
+                💡 <strong>Astuce</strong> : Partagez votre météo avec votre équipe pour qu&apos;ils puissent voir votre état. Chaque membre peut créer sa propre météo et la partager !
+              </p>
+            </div>
+
+            <div className="flex gap-3 pt-4">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => router.back()}
+                disabled={loading}
+              >
+                Annuler
+              </Button>
+              <Button type="submit" loading={loading} className="flex-1">
+                Créer la météo
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </main>
+  );
+}

src/app/weekly-checkin/new/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import {
   Card,
@@ -12,11 +12,14 @@ import {
   Input,
 } from '@/components/ui';
 import { createWeeklyCheckInSession } from '@/actions/weekly-checkin';
+import { getWeekYearLabel } from '@/lib/date-utils';
 
 export default function NewWeeklyCheckInPage() {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
+  const [title, setTitle] = useState('');
 
   async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
@@ -24,7 +27,6 @@ export default function NewWeeklyCheckInPage() {
     setLoading(true);
 
     const formData = new FormData(e.currentTarget);
-    const title = formData.get('title') as string;
     const participant = formData.get('participant') as string;
     const dateStr = formData.get('date') as string;
     const date = dateStr ? new Date(dateStr) : undefined;
@@ -49,6 +51,11 @@ export default function NewWeeklyCheckInPage() {
   // Default date to today
   const today = new Date().toISOString().split('T')[0];
 
+  // Update title when date changes
+  useEffect(() => {
+    setTitle(getWeekYearLabel(new Date(selectedDate)));
+  }, [selectedDate]);
+
   return (
     <main className="mx-auto max-w-2xl px-4 py-8">
       <Card>
@@ -75,6 +82,8 @@ export default function NewWeeklyCheckInPage() {
               label="Titre du check-in"
               name="title"
               placeholder="Ex: Check-in semaine du 15 janvier"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
               required
             />
 
@@ -94,6 +103,7 @@ export default function NewWeeklyCheckInPage() {
                 name="date"
                 type="date"
                 defaultValue={today}
+                onChange={(e) => setSelectedDate(e.target.value)}
                 required
                 className="w-full rounded-lg border border-border bg-input px-3 py-2 text-foreground outline-none focus:border-primary focus:ring-2 focus:ring-primary/20"
               />