diff --git a/apps/web/src/components/plans/wizard/CadenceCalendar.tsx b/apps/web/src/components/plans/wizard/CadenceCalendar.tsx
new file mode 100644
index 0000000..3073e0b
--- /dev/null
+++ b/apps/web/src/components/plans/wizard/CadenceCalendar.tsx
@@ -0,0 +1,530 @@
+import { useMemo } from "react";
+import { Plus, Trash2, AlertTriangle } from "lucide-react";
+import type { RelanceTone } from "@rubis/shared";
+
+import { cn } from "@/lib/utils";
+import { TONE_LABELS } from "@/lib/plans";
+import { Field } from "@/components/ui/Field";
+import { Input } from "@/components/ui/Input";
+import { Button } from "@/components/ui/Button";
+
+/**
+ * Étape minimale pour la visu calendrier (subject/body arrivent à
+ * l'étape 3 du wizard).
+ */
+export type DraftStepLite = {
+  offsetDays: number;
+  tone: RelanceTone;
+  requiresManualValidation?: boolean;
+};
+
+/**
+ * Calendrier mensuel comme visualisation principale de la cadence.
+ *
+ * - L'échéance fictive sert de repère héros (◆ rubis plein) pour que
+ *   l'utilisateur se projette dans le timing réel.
+ * - Chaque étape s'affiche sur la case du jour J+offset, colorée par
+ *   tonalité.
+ * - Cliquer une case = sélectionner l'étape, l'éditeur (offset + ton +
+ *   supprimer) apparaît directement en dessous.
+ * - On rend tous les mois entre la première et la dernière étape, plus
+ *   le mois de l'échéance : on évite de scroller un calendrier vide.
+ *
+ * Date de référence : le 15 du mois prochain. Stable, prévisible,
+ * laisse de la marge pour les offsets négatifs (rappel avant échéance)
+ * comme positifs (mises en demeure J+30, J+60).
+ */
+export function CadenceCalendar({
+  steps,
+  selectedIndex = -1,
+  onSelectStep,
+  onUpdateStep,
+  onAddStep,
+  onRemoveStep,
+}: {
+  steps: DraftStepLite[];
+  selectedIndex?: number;
+  onSelectStep?: (idx: number) => void;
+  onUpdateStep?: (idx: number, patch: Partial<DraftStepLite>) => void;
+  onAddStep: () => void;
+  onRemoveStep: (idx: number) => void;
+}) {
+  const dueDate = useMemo(() => {
+    const now = new Date();
+    return new Date(now.getFullYear(), now.getMonth() + 1, 15);
+  }, []);
+
+  const stepDates = useMemo(
+    () => steps.map((s) => addDays(dueDate, s.offsetDays)),
+    [steps, dueDate],
+  );
+
+  const months = useMemo(() => listMonths(dueDate, stepDates), [dueDate, stepDates]);
+
+  const selected = selectedIndex >= 0 ? steps[selectedIndex] : null;
+
+  return (
+    <div className="rounded-card border border-line bg-cream/40 p-4 sm:p-5">
+      {/* Header */}
+      <div className="flex items-start justify-between gap-3 mb-4">
+        <div>
+          <p className="text-[11px] uppercase tracking-[0.1em] text-ink-3 font-semibold">
+            Calendrier
+          </p>
+          <p className="mt-1 text-[12px] text-ink-3 leading-snug">
+            Pour une facture échue le{" "}
+            <strong className="text-ink-2 tabular-nums">
+              {formatLongDate(dueDate)}
+            </strong>
+            , voici ce que Rubis enverra.
+          </p>
+        </div>
+        <p className="text-[11.5px] text-ink-3 italic tabular-nums shrink-0 mt-0.5">
+          {steps.length}/8
+        </p>
+      </div>
+
+      {/* Légende */}
+      <Legend />
+
+      {/* Grilles mensuelles */}
+      <div className="mt-4 flex flex-col gap-5">
+        {months.map((m) => (
+          <MonthGrid
+            key={`${m.getFullYear()}-${m.getMonth()}`}
+            month={m}
+            dueDate={dueDate}
+            steps={steps}
+            stepDates={stepDates}
+            selectedIndex={selectedIndex}
+            onSelectStep={onSelectStep}
+          />
+        ))}
+      </div>
+
+      {/* Editor inline pour l'étape sélectionnée */}
+      <div className="mt-5 pt-5 border-t border-line">
+        {selected ? (
+          <StepEditor
+            step={selected}
+            index={selectedIndex}
+            stepDate={stepDates[selectedIndex]!}
+            canRemove={steps.length > 1}
+            onUpdate={(patch) => onUpdateStep?.(selectedIndex, patch)}
+            onRemove={() => onRemoveStep(selectedIndex)}
+          />
+        ) : (
+          <p className="text-[13px] text-ink-3 italic text-center py-3">
+            Touchez une case dans le calendrier pour modifier une relance.
+          </p>
+        )}
+      </div>
+
+      {/* Ajouter une étape */}
+      {steps.length < 8 && (
+        <button
+          type="button"
+          onClick={onAddStep}
+          className={cn(
+            "mt-4 w-full flex items-center justify-center gap-2",
+            "rounded-default border-2 border-dashed border-line bg-transparent",
+            "px-4 py-3 text-[13px] font-medium text-ink-3",
+            "hover:border-rubis hover:text-rubis-deep hover:bg-rubis-glow/20 transition-colors",
+            "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-rubis-glow",
+          )}
+        >
+          <Plus size={15} aria-hidden="true" />
+          Ajouter une étape
+        </button>
+      )}
+    </div>
+  );
+}
+
+// ============================================================================
+// Légende
+// ============================================================================
+function Legend() {
+  return (
+    <div className="flex flex-wrap items-center gap-x-4 gap-y-1.5 text-[11px] text-ink-3">
+      <span className="inline-flex items-center gap-1.5">
+        <span className="size-2.5 rotate-45 bg-rubis border border-rubis" aria-hidden="true" />
+        Échéance
+      </span>
+      <span className="inline-flex items-center gap-1.5">
+        <span className="size-2.5 rounded-full bg-rubis-glow border border-rubis" aria-hidden="true" />
+        Doux
+      </span>
+      <span className="inline-flex items-center gap-1.5">
+        <span className="size-2.5 rounded-full bg-cream-2 border border-line" aria-hidden="true" />
+        Standard
+      </span>
+      <span className="inline-flex items-center gap-1.5">
+        <span className="size-2.5 rounded-full bg-ink border border-ink" aria-hidden="true" />
+        Ferme
+      </span>
+      <span className="inline-flex items-center gap-1.5">
+        <span className="size-2.5 rounded-full bg-rubis-deep border border-rubis-deep" aria-hidden="true" />
+        Strict
+      </span>
+    </div>
+  );
+}
+
+// ============================================================================
+// Grille d'un mois
+// ============================================================================
+
+const TONE_CELL_CLASS: Record<RelanceTone, string> = {
+  amical: "bg-rubis-glow border-rubis text-rubis-deep",
+  courtois: "bg-cream-2 border-ink-3 text-ink",
+  ferme: "bg-ink border-ink text-cream",
+  mise_en_demeure: "bg-rubis-deep border-rubis-deep text-cream",
+};
+
+const WEEKDAY_LABELS = ["L", "M", "M", "J", "V", "S", "D"];
+
+function MonthGrid({
+  month,
+  dueDate,
+  steps,
+  stepDates,
+  selectedIndex,
+  onSelectStep,
+}: {
+  month: Date;
+  dueDate: Date;
+  steps: DraftStepLite[];
+  stepDates: Date[];
+  selectedIndex: number;
+  onSelectStep?: (idx: number) => void;
+}) {
+  const firstDay = new Date(month.getFullYear(), month.getMonth(), 1);
+  const lastDay = new Date(month.getFullYear(), month.getMonth() + 1, 0);
+  const firstDayOfWeek = (firstDay.getDay() + 6) % 7; // L=0...D=6
+
+  const daysInMonth = lastDay.getDate();
+  const cells: (Date | null)[] = [];
+  for (let i = 0; i < firstDayOfWeek; i++) cells.push(null);
+  for (let d = 1; d <= daysInMonth; d++) {
+    cells.push(new Date(month.getFullYear(), month.getMonth(), d));
+  }
+  while (cells.length % 7 !== 0) cells.push(null);
+
+  return (
+    <div>
+      <p className="font-display text-[14px] font-semibold text-ink-2 mb-2 capitalize">
+        {formatMonth(month)}
+      </p>
+      <div className="grid grid-cols-7 gap-1 sm:gap-1.5">
+        {WEEKDAY_LABELS.map((label, i) => (
+          <div
+            key={`wd-${i}`}
+            className="text-center text-[10.5px] font-semibold uppercase tracking-wide text-ink-3"
+          >
+            {label}
+          </div>
+        ))}
+        {cells.map((date, i) => (
+          <DayCell
+            key={i}
+            date={date}
+            dueDate={dueDate}
+            steps={steps}
+            stepDates={stepDates}
+            selectedIndex={selectedIndex}
+            onSelectStep={onSelectStep}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function DayCell({
+  date,
+  dueDate,
+  steps,
+  stepDates,
+  selectedIndex,
+  onSelectStep,
+}: {
+  date: Date | null;
+  dueDate: Date;
+  steps: DraftStepLite[];
+  stepDates: Date[];
+  selectedIndex: number;
+  onSelectStep?: (idx: number) => void;
+}) {
+  if (!date) return <div aria-hidden="true" />;
+
+  const isDue = sameDay(date, dueDate);
+  // En cas de collision (deux étapes le même jour), on prend la dernière —
+  // c'est la plus récente dans le plan, dominante visuellement.
+  const stepIdx = lastIndexOf(stepDates, (d) => sameDay(d, date));
+  const step = stepIdx >= 0 ? steps[stepIdx] : null;
+  const isSelected = stepIdx === selectedIndex;
+  const isInteractive = isDue || step !== null;
+
+  // Cellule "due date" : ◆ rubis sur fond glow, pas cliquable (info-only)
+  if (isDue) {
+    return (
+      <div
+        className={cn(
+          "relative aspect-square flex flex-col items-center justify-center rounded-default",
+          "border-2 border-rubis bg-rubis-glow text-rubis-deep",
+          "shadow-rubis",
+        )}
+        aria-label={`Échéance le ${formatLongDate(date)}`}
+      >
+        <span className="size-3 rotate-45 bg-rubis" aria-hidden="true" />
+        <span className="text-[10.5px] font-bold tabular-nums mt-0.5">
+          {date.getDate()}
+        </span>
+      </div>
+    );
+  }
+
+  // Cellule "étape" : couleur par ton, cliquable
+  if (step) {
+    return (
+      <button
+        type="button"
+        onClick={() => onSelectStep?.(stepIdx)}
+        aria-pressed={isSelected}
+        aria-label={`${TONE_LABELS[step.tone]}, J${step.offsetDays >= 0 ? "+" : ""}${step.offsetDays}, le ${formatLongDate(date)}`}
+        className={cn(
+          "relative aspect-square flex flex-col items-center justify-center rounded-default",
+          "border-2 transition-all",
+          "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-rubis-glow",
+          TONE_CELL_CLASS[step.tone],
+          isSelected && "ring-4 ring-rubis-glow scale-[1.04]",
+        )}
+      >
+        <span className="text-[10px] font-semibold opacity-70 tabular-nums">
+          J{step.offsetDays >= 0 ? "+" : ""}
+          {step.offsetDays}
+        </span>
+        <span className="text-[12px] font-bold tabular-nums">
+          {date.getDate()}
+        </span>
+      </button>
+    );
+  }
+
+  // Cellule normale (jour sans event) — affichage muet
+  return (
+    <div
+      className={cn(
+        "aspect-square flex items-center justify-center rounded-default",
+        "text-[12px] tabular-nums text-ink-3",
+        isSameDay(date, new Date()) && "ring-1 ring-rubis-glow",
+      )}
+    >
+      {date.getDate()}
+    </div>
+  );
+}
+
+// ============================================================================
+// Editor inline
+// ============================================================================
+function StepEditor({
+  step,
+  index,
+  stepDate,
+  canRemove,
+  onUpdate,
+  onRemove,
+}: {
+  step: DraftStepLite;
+  index: number;
+  stepDate: Date;
+  canRemove: boolean;
+  onUpdate: (patch: Partial<DraftStepLite>) => void;
+  onRemove: () => void;
+}) {
+  return (
+    <div>
+      <div className="flex items-center justify-between gap-3 mb-3">
+        <div className="flex items-center gap-2.5 min-w-0">
+          <span
+            aria-hidden="true"
+            className={cn(
+              "shrink-0 size-3 rounded-full border",
+              TONE_CELL_CLASS[step.tone],
+            )}
+          />
+          <p className="font-display text-[14px] font-semibold text-ink truncate">
+            Étape {index + 1} · {formatLongDate(stepDate)}
+          </p>
+        </div>
+        {canRemove && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onRemove}
+            className="text-rubis-deep hover:bg-rubis-glow/40"
+          >
+            <Trash2 size={14} /> Supprimer
+          </Button>
+        )}
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <Field
+          label="Décalage (jours)"
+          htmlFor={`step-offset-${index}`}
+          hint="Négatif = avant échéance. 0 = jour J. 30 = J+30."
+        >
+          <OffsetInput
+            id={`step-offset-${index}`}
+            value={step.offsetDays}
+            onCommit={(n) => onUpdate({ offsetDays: n })}
+          />
+        </Field>
+        <Field label="Tonalité" htmlFor={`step-tone-${index}`}>
+          <select
+            id={`step-tone-${index}`}
+            className={cn(
+              "h-11 w-full rounded-default border border-line bg-white px-3",
+              "text-[14px] text-ink",
+              "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-rubis-glow focus-visible:border-rubis",
+            )}
+            value={step.tone}
+            onChange={(e) => {
+              const tone = e.target.value as RelanceTone;
+              onUpdate({
+                tone,
+                requiresManualValidation: tone === "mise_en_demeure",
+              });
+            }}
+          >
+            {(Object.keys(TONE_LABELS) as RelanceTone[]).map((t) => (
+              <option key={t} value={t}>
+                {TONE_LABELS[t]}
+              </option>
+            ))}
+          </select>
+        </Field>
+      </div>
+
+      {step.tone === "mise_en_demeure" && (
+        <p className="mt-3 inline-flex items-center gap-2 text-[12px] text-rubis-deep">
+          <AlertTriangle size={12} /> Validation manuelle obligatoire avant
+          envoi (sécurité juridique).
+        </p>
+      )}
+    </div>
+  );
+}
+
+// ============================================================================
+// Helpers
+// ============================================================================
+function addDays(d: Date, n: number): Date {
+  const r = new Date(d);
+  r.setDate(r.getDate() + n);
+  return r;
+}
+
+function sameDay(a: Date, b: Date): boolean {
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  );
+}
+
+function isSameDay(a: Date, b: Date): boolean {
+  return sameDay(a, b);
+}
+
+function lastIndexOf<T>(arr: T[], pred: (x: T) => boolean): number {
+  for (let i = arr.length - 1; i >= 0; i--) {
+    if (pred(arr[i]!)) return i;
+  }
+  return -1;
+}
+
+function listMonths(dueDate: Date, stepDates: Date[]): Date[] {
+  const all = [dueDate, ...stepDates];
+  const earliest = new Date(Math.min(...all.map((d) => d.getTime())));
+  const latest = new Date(Math.max(...all.map((d) => d.getTime())));
+  const months: Date[] = [];
+  let cur = new Date(earliest.getFullYear(), earliest.getMonth(), 1);
+  const end = new Date(latest.getFullYear(), latest.getMonth(), 1);
+  while (cur <= end) {
+    months.push(new Date(cur));
+    cur = new Date(cur.getFullYear(), cur.getMonth() + 1, 1);
+  }
+  return months;
+}
+
+const FR_MONTH = new Intl.DateTimeFormat("fr-FR", {
+  month: "long",
+  year: "numeric",
+});
+
+const FR_LONG = new Intl.DateTimeFormat("fr-FR", {
+  weekday: "long",
+  day: "numeric",
+  month: "long",
+});
+
+function formatMonth(d: Date): string {
+  return FR_MONTH.format(d);
+}
+
+function formatLongDate(d: Date): string {
+  return FR_LONG.format(d);
+}
+
+// ============================================================================
+// OffsetInput (string-controlled, accepte vide/`-` intermédiaires)
+// ============================================================================
+import { useEffect, useState } from "react";
+
+function OffsetInput({
+  id,
+  value,
+  onCommit,
+}: {
+  id: string;
+  value: number;
+  onCommit: (n: number) => void;
+}) {
+  const [local, setLocal] = useState<string>(String(value));
+
+  useEffect(() => {
+    setLocal(String(value));
+  }, [value]);
+
+  return (
+    <Input
+      id={id}
+      type="text"
+      inputMode="numeric"
+      pattern="-?[0-9]*"
+      value={local}
+      onChange={(e) => {
+        const next = e.target.value;
+        if (next === "" || next === "-" || /^-?\d{0,3}$/.test(next)) {
+          setLocal(next);
+          if (next !== "" && next !== "-") {
+            const parsed = parseInt(next, 10);
+            if (!Number.isNaN(parsed)) {
+              onCommit(Math.max(-30, Math.min(180, parsed)));
+            }
+          }
+        }
+      }}
+      onBlur={() => {
+        if (local === "" || local === "-") {
+          setLocal("0");
+          onCommit(0);
+        }
+      }}
+    />
+  );
+}
diff --git a/apps/web/src/components/plans/wizard/CadenceTimeline.tsx b/apps/web/src/components/plans/wizard/CadenceTimeline.tsx
deleted file mode 100644
index 8843ee5..0000000
--- a/apps/web/src/components/plans/wizard/CadenceTimeline.tsx
+++ /dev/null
@@ -1,284 +0,0 @@
-import { useEffect, useState } from "react";
-import { Plus, X, AlertTriangle } from "lucide-react";
-import type { RelanceTone } from "@rubis/shared";
-
-import { cn } from "@/lib/utils";
-import { TONE_LABELS } from "@/lib/plans";
-import { Field } from "@/components/ui/Field";
-import { Input } from "@/components/ui/Input";
-
-/**
- * Étape minimale pour la liste (subject/body arrivent à l'étape 3 du wizard).
- */
-export type DraftStepLite = {
-  offsetDays: number;
-  tone: RelanceTone;
-  requiresManualValidation?: boolean;
-};
-
-const TONE_DOT_CLASS: Record<RelanceTone, string> = {
-  amical: "bg-rubis-glow border-rubis",
-  courtois: "bg-cream-2 border-line",
-  ferme: "bg-ink border-ink",
-  mise_en_demeure: "bg-rubis-deep border-rubis-deep",
-};
-
-/**
- * Liste verticale des étapes d'un plan. Chaque étape = une card cliquable
- * avec un petit ◆ accent (coloré par tonalité), l'offset (J+X), le label
- * de ton, et un bouton retirer aligné dans le flux.
- *
- * La card sélectionnée s'étend pour révéler l'éditeur inline (décalage
- * en jours + tonalité) directement sous l'en-tête. Pas de panneau séparé,
- * pas de saut de focus — l'utilisateur édite ce qu'il vient de tapper.
- *
- * Décision de design : on n'utilise PAS le ◆ rotaté comme structure
- * (trop fragile en vertical, collisions des coins avec le texte). Le ◆
- * reste un accent de marque, présent mais petit.
- */
-export function CadenceTimeline({
-  steps,
-  selectedIndex = -1,
-  onSelectStep,
-  onUpdateStep,
-  onAddStep,
-  onRemoveStep,
-}: {
-  steps: DraftStepLite[];
-  selectedIndex?: number;
-  onSelectStep?: (idx: number) => void;
-  onUpdateStep?: (idx: number, patch: Partial<DraftStepLite>) => void;
-  onAddStep: () => void;
-  onRemoveStep: (idx: number) => void;
-}) {
-  return (
-    <div className="rounded-card border border-line bg-cream/40 p-4 sm:p-5">
-      <div className="flex items-center justify-between mb-3">
-        <p className="text-[11px] uppercase tracking-[0.1em] text-ink-3 font-semibold">
-          Cadence
-        </p>
-        <p className="text-[11.5px] text-ink-3 italic tabular-nums">
-          {steps.length} étape{steps.length > 1 ? "s" : ""} · max 8
-        </p>
-      </div>
-
-      <ol className="flex flex-col gap-1.5">
-        {steps.map((step, idx) => {
-          const isSelected = idx === selectedIndex;
-          return (
-            <li key={idx}>
-              <StepCard
-                step={step}
-                index={idx}
-                selected={isSelected}
-                canRemove={steps.length > 1}
-                onSelect={() => onSelectStep?.(idx)}
-                onUpdate={(patch) => onUpdateStep?.(idx, patch)}
-                onRemove={() => onRemoveStep(idx)}
-              />
-            </li>
-          );
-        })}
-      </ol>
-
-      {steps.length < 8 && (
-        <button
-          type="button"
-          onClick={onAddStep}
-          className={cn(
-            "mt-2 w-full flex items-center justify-center gap-2",
-            "rounded-default border-2 border-dashed border-line bg-transparent",
-            "px-4 py-3 text-[13px] font-medium text-ink-3",
-            "hover:border-rubis hover:text-rubis-deep hover:bg-rubis-glow/20 transition-colors",
-            "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-rubis-glow",
-          )}
-        >
-          <Plus size={15} aria-hidden="true" />
-          Ajouter une étape
-        </button>
-      )}
-    </div>
-  );
-}
-
-function StepCard({
-  step,
-  index,
-  selected,
-  canRemove,
-  onSelect,
-  onUpdate,
-  onRemove,
-}: {
-  step: DraftStepLite;
-  index: number;
-  selected: boolean;
-  canRemove: boolean;
-  onSelect: () => void;
-  onUpdate: (patch: Partial<DraftStepLite>) => void;
-  onRemove: () => void;
-}) {
-  return (
-    <div
-      className={cn(
-        "rounded-card border bg-white transition-colors",
-        selected
-          ? "border-rubis shadow-rubis"
-          : "border-line hover:border-ink-3",
-      )}
-    >
-      {/* Header — toujours visible, cliquable pour sélectionner */}
-      <div className="flex items-center gap-3 px-4 py-3">
-        <button
-          type="button"
-          onClick={onSelect}
-          className="flex-1 flex items-center gap-3 min-w-0 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rubis-glow rounded-default"
-          aria-pressed={selected}
-        >
-          {/* Numéro d'ordre */}
-          <span className="shrink-0 flex size-7 items-center justify-center rounded-full bg-cream-2 text-ink-2 font-display text-[12px] font-bold tabular-nums">
-            {index + 1}
-          </span>
-
-          {/* ◆ accent coloré par tonalité — signature de marque */}
-          <span
-            aria-hidden="true"
-            className={cn(
-              "shrink-0 size-2.5 rotate-45 border",
-              TONE_DOT_CLASS[step.tone],
-            )}
-          />
-
-          {/* Offset + ton */}
-          <div className="flex-1 min-w-0 flex items-baseline gap-2">
-            <span className="font-display text-[15px] font-bold text-ink tabular-nums">
-              J{step.offsetDays >= 0 ? "+" : ""}
-              {step.offsetDays}
-            </span>
-            <span className="text-ink-3">·</span>
-            <span className="text-[13.5px] text-ink-2 truncate">
-              {TONE_LABELS[step.tone]}
-            </span>
-          </div>
-        </button>
-
-        {canRemove && (
-          <button
-            type="button"
-            onClick={(e) => {
-              e.stopPropagation();
-              onRemove();
-            }}
-            className={cn(
-              "shrink-0 flex size-9 items-center justify-center rounded-full",
-              "text-ink-3 hover:text-rubis-deep hover:bg-rubis-glow/40 transition-colors",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rubis-glow",
-            )}
-            aria-label={`Retirer l'étape ${index + 1}`}
-          >
-            <X size={16} />
-          </button>
-        )}
-      </div>
-
-      {/* Éditeur inline — apparaît dans la card sélectionnée */}
-      {selected && (
-        <div className="border-t border-line bg-cream-2/30 px-4 py-4">
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-            <Field
-              label="Décalage (jours)"
-              htmlFor={`step-offset-${index}`}
-              hint="Négatif = avant échéance. 0 = jour J. 30 = J+30."
-            >
-              <OffsetInput
-                id={`step-offset-${index}`}
-                value={step.offsetDays}
-                onCommit={(n) => onUpdate({ offsetDays: n })}
-              />
-            </Field>
-            <Field label="Tonalité" htmlFor={`step-tone-${index}`}>
-              <select
-                id={`step-tone-${index}`}
-                className={cn(
-                  "h-11 w-full rounded-default border border-line bg-white px-3",
-                  "text-[14px] text-ink",
-                  "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-rubis-glow focus-visible:border-rubis",
-                )}
-                value={step.tone}
-                onChange={(e) => {
-                  const tone = e.target.value as RelanceTone;
-                  onUpdate({
-                    tone,
-                    requiresManualValidation: tone === "mise_en_demeure",
-                  });
-                }}
-              >
-                {(Object.keys(TONE_LABELS) as RelanceTone[]).map((t) => (
-                  <option key={t} value={t}>
-                    {TONE_LABELS[t]}
-                  </option>
-                ))}
-              </select>
-            </Field>
-          </div>
-          {step.tone === "mise_en_demeure" && (
-            <p className="mt-3 inline-flex items-center gap-2 text-[12px] text-rubis-deep">
-              <AlertTriangle size={12} /> Validation manuelle obligatoire
-              avant envoi (sécurité juridique).
-            </p>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-/**
- * Input numérique signé piloté en string local. Évite le 0 fantôme quand on
- * efface pour ressaisir, et accepte les états intermédiaires "" et "-" le
- * temps que l'utilisateur termine de taper. Clamp [-30, 180] sur commit ;
- * fallback à 0 au blur si vide.
- */
-function OffsetInput({
-  id,
-  value,
-  onCommit,
-}: {
-  id: string;
-  value: number;
-  onCommit: (n: number) => void;
-}) {
-  const [local, setLocal] = useState<string>(String(value));
-
-  useEffect(() => {
-    setLocal(String(value));
-  }, [value]);
-
-  return (
-    <Input
-      id={id}
-      type="text"
-      inputMode="numeric"
-      pattern="-?[0-9]*"
-      value={local}
-      onChange={(e) => {
-        const next = e.target.value;
-        if (next === "" || next === "-" || /^-?\d{0,3}$/.test(next)) {
-          setLocal(next);
-          if (next !== "" && next !== "-") {
-            const parsed = parseInt(next, 10);
-            if (!Number.isNaN(parsed)) {
-              onCommit(Math.max(-30, Math.min(180, parsed)));
-            }
-          }
-        }
-      }}
-      onBlur={() => {
-        if (local === "" || local === "-") {
-          setLocal("0");
-          onCommit(0);
-        }
-      }}
-    />
-  );
-}
diff --git a/apps/web/src/routes/_app/plans_.nouveau.tsx b/apps/web/src/routes/_app/plans_.nouveau.tsx
index 37d1552..aa34501 100644
--- a/apps/web/src/routes/_app/plans_.nouveau.tsx
+++ b/apps/web/src/routes/_app/plans_.nouveau.tsx
@@ -25,7 +25,7 @@ import { Field } from "@/components/ui/Field";
 import { Input } from "@/components/ui/Input";
 import { Textarea } from "@/components/ui/Textarea";
 import { Eyebrow } from "@/components/ui/Eyebrow";
-import { CadenceTimeline } from "@/components/plans/wizard/CadenceTimeline";
+import { CadenceCalendar } from "@/components/plans/wizard/CadenceCalendar";
 import { EmailPreview } from "@/components/plans/wizard/EmailPreview";
 import { AiGenerateModal } from "@/components/plans/wizard/AiGenerateModal";
 
@@ -454,7 +454,7 @@ function StepCadence({ draft, onChange }: { draft: Draft; onChange: (d: Draft) =
         </p>
       </div>
 
-      <CadenceTimeline
+      <CadenceCalendar
         steps={draft.steps}
         selectedIndex={selectedIdx}
         onSelectStep={setSelectedIdx}