Corrige la grille des besoins : postes manquants au-delà du premier

Chaque cellule de la grille (label de poste, en-têtes, créneaux, cases
vides) recevait sa position via l'ordre d'émission des enfants, en
comptant sur le fait que chaque ligne totalise exactement le nombre de
tranches de 30 min d'un jour pour que l'auto-flow CSS reste aligné. Un
poste dont les créneaux ne tombaient pas exactement sur ce total (deux
créneaux adjacents mais non alignés sur 30 min, courant depuis la
création de créneaux à la main) décalait tous les postes suivants —
leur nom de poste n'apparaissait plus sur la bonne ligne.

Chaque cellule reçoit maintenant sa position de grille explicitement
(gridColumn/gridRow calculés), immunisé contre ce genre de décalage :
l'anomalie d'un poste reste locale à sa propre ligne.

Nouveau test de non-régression (scripts/smoke.tsx:checkGridLayout) :
inspecte les gridRow réellement rendus plutôt que la simple absence de
crash — un décalage CSS n'est pas détectable par un rendu SSR ordinaire.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

frontend/src/pages/GrillePage.tsx

@@ -94,6 +94,21 @@ export function GrillePage() {
     }),
   ].join(' ');
 
+  // Ligne de grille (1-based) où commence chaque jour, colonne 1 réservée au
+  // nom du poste — chaque cellule reçoit sa position explicitement
+  // (`gridColumn`/`gridRow`) plutôt que de compter sur l'ordre d'émission
+  // des enfants : un poste dont les créneaux ne totalisent pas exactement le
+  // nombre de tranches d'un jour (créneaux adjacents non alignés sur 30 min,
+  // par ex.) ne doit jamais décaler les lignes suivantes.
+  const dayColumnStarts: number[] = [];
+  {
+    let col = 2;
+    for (const day of shownDays) {
+      dayColumnStarts.push(col);
+      col += day.slotLabels.length;
+    }
+  }
+
   const selected = selectedShiftId
     ? matrix.data.positions
         .flatMap((p) => p.shifts.map((s) => ({ position: p, shift: s })))
@@ -206,15 +221,21 @@ export function GrillePage() {
       <div className="flex min-h-0 flex-1 items-stretch">
         <div className="max-h-[calc(100vh-118px)] min-w-0 flex-1 overflow-auto">
           <div className="grid w-max border-b-[3px] border-ink" style={{ gridTemplateColumns }}>
-            <div className="sticky left-0 top-0 z-[6] flex items-center gap-[6px] border-b-2 border-r-[3px] border-ink border-b-cream bg-ink px-2 py-[6px] font-display text-[10px] font-extrabold uppercase tracking-wider text-cream">
+            <div
+              style={{ gridColumn: '1 / span 1', gridRow: 1 }}
+              className="sticky left-0 top-0 z-[6] flex items-center gap-[6px] border-b-2 border-r-[3px] border-ink border-b-cream bg-ink px-2 py-[6px] font-display text-[10px] font-extrabold uppercase tracking-wider text-cream"
+            >
               {t('grille.positionsCount', { count: matrix.data.positions.length })}
               <HelpTip text={t('grille.footnote')} side="bottom" />
             </div>
-            {shownDays.map((day) => (
+            {shownDays.map((day, di) => (
               <div
                 key={day.date}
                 className="sticky top-0 z-[4] flex items-baseline gap-[7px] border-b-2 border-r-[3px] border-ink border-b-cream border-r-cream bg-ink px-[9px] py-[6px] text-cream"
-                style={{ gridColumn: `span ${day.slotLabels.length}` }}
+                style={{
+                  gridColumn: `${dayColumnStarts[di]} / span ${day.slotLabels.length}`,
+                  gridRow: 1,
+                }}
               >
                 <span className="font-display text-[12px] font-black tracking-tight">
                   {shortDayLabel(`${day.date}T12:00`)}
@@ -222,13 +243,17 @@ export function GrillePage() {
               </div>
             ))}
 
-            <div className="sticky left-0 top-[27px] z-[6] flex items-center border-b-[3px] border-r-[3px] border-ink bg-sand px-2 font-mono text-[8.5px] opacity-60">
+            <div
+              style={{ gridColumn: '1 / span 1', gridRow: 2 }}
+              className="sticky left-0 top-[27px] z-[6] flex items-center border-b-[3px] border-r-[3px] border-ink bg-sand px-2 font-mono text-[8.5px] opacity-60"
+            >
               {t('grille.assignedRequired')}
             </div>
-            {shownDays.map((day) =>
+            {shownDays.map((day, di) =>
               day.slotLabels.map((label, i) => (
                 <div
                   key={`${day.date}|${i}`}
+                  style={{ gridColumn: `${dayColumnStarts[di] + i} / span 1`, gridRow: 2 }}
                   className="sticky top-[27px] z-[3] overflow-hidden text-ellipsis whitespace-nowrap border-b-[3px] border-r border-ink bg-sand px-[2px] py-[5px] text-center font-mono text-[9.5px]"
                 >
                   {label}
@@ -236,11 +261,13 @@ export function GrillePage() {
               )),
             )}
 
-            {shownPositions.map((position) => (
+            {shownPositions.map((position, posIndex) => (
               <PositionRow
                 key={position.id}
                 position={position}
                 days={shownDays}
+                dayColumnStarts={dayColumnStarts}
+                rowIndex={3 + posIndex}
                 dayBoundary={dayBoundary}
                 selectedShiftId={selectedShiftId}
                 onSelect={setSelectedShiftId}
@@ -305,6 +332,8 @@ function LegendItem({
 function PositionRow({
   position,
   days,
+  dayColumnStarts,
+  rowIndex,
   dayBoundary,
   selectedShiftId,
   onSelect,
@@ -312,6 +341,8 @@ function PositionRow({
 }: {
   position: MatrixPosition;
   days: TimeGridDay[];
+  dayColumnStarts: number[];
+  rowIndex: number;
   dayBoundary: string;
   selectedShiftId: string | null;
   onSelect: (id: string) => void;
@@ -321,34 +352,62 @@ function PositionRow({
 
   return (
     <>
-      <div className="sticky left-0 z-[2] flex h-9 flex-col justify-center gap-[1px] border-b border-r-[3px] border-ink bg-cream px-2">
+      <div
+        style={{ gridColumn: '1 / span 1', gridRow: rowIndex }}
+        className="sticky left-0 z-[2] flex h-9 flex-col justify-center gap-[1px] border-b border-r-[3px] border-ink bg-cream px-2"
+      >
         <span className="truncate font-display text-[12px] font-bold tracking-tight">
           {position.name}
         </span>
         <span className="truncate font-mono text-[8.5px] opacity-55">{position.location}</span>
       </div>
-      {days.map((day) => {
+      {days.map((day, di) => {
+        const base = dayColumnStarts[di];
         const dayPlacements = placements.get(day.date) ?? [];
         const cells: React.ReactNode[] = [];
         let cursor = 0;
         for (const { item: shift, columnStart, columnSpan } of dayPlacements) {
-          for (let i = cursor; i < Math.max(cursor, columnStart); i += 1) {
-            cells.push(<div key={`${day.date}|empty|${i}`} className="h-9 border-b border-r border-ink" />);
+          // `columnStart` peut retomber avant `cursor` : deux créneaux du
+          // même poste adjacents mais non alignés sur 30 min s'arrondissent
+          // chacun à la tranche englobante et peuvent se toucher/chevaucher
+          // légèrement à l'affichage — on raccourcit plutôt que de laisser
+          // deux cellules revendiquer la même colonne (chaque cellule ayant
+          // sa position de grille explicite, ce repli reste local à ce
+          // poste : il ne décale jamais les lignes suivantes).
+          const start = Math.min(Math.max(cursor, columnStart), day.slotLabels.length);
+          for (let i = cursor; i < start; i += 1) {
+            cells.push(
+              <div
+                key={`${day.date}|empty|${i}`}
+                style={{ gridColumn: `${base + i} / span 1`, gridRow: rowIndex }}
+                className="h-9 border-b border-r border-ink"
+              />,
+            );
           }
-          cells.push(
-            <ShiftCell
-              key={shift.shift_id}
-              shift={shift}
-              span={columnSpan}
-              selected={selectedShiftId === shift.shift_id}
-              onSelect={onSelect}
-              names={volunteerNamesByShift.get(shift.shift_id) ?? []}
-            />,
-          );
-          cursor = Math.max(cursor, columnStart + columnSpan);
+          const end = Math.min(Math.max(start + 1, columnStart + columnSpan), day.slotLabels.length);
+          if (start < day.slotLabels.length) {
+            cells.push(
+              <ShiftCell
+                key={shift.shift_id}
+                shift={shift}
+                gridColumn={`${base + start} / span ${end - start}`}
+                gridRow={rowIndex}
+                selected={selectedShiftId === shift.shift_id}
+                onSelect={onSelect}
+                names={volunteerNamesByShift.get(shift.shift_id) ?? []}
+              />,
+            );
+          }
+          cursor = Math.max(cursor, end);
         }
         for (let i = cursor; i < day.slotLabels.length; i += 1) {
-          cells.push(<div key={`${day.date}|empty|${i}`} className="h-9 border-b border-r border-ink" />);
+          cells.push(
+            <div
+              key={`${day.date}|empty|${i}`}
+              style={{ gridColumn: `${base + i} / span 1`, gridRow: rowIndex }}
+              className="h-9 border-b border-r border-ink"
+            />,
+          );
         }
         return cells;
       })}
@@ -358,13 +417,15 @@ function PositionRow({
 
 function ShiftCell({
   shift,
-  span,
+  gridColumn,
+  gridRow,
   selected,
   onSelect,
   names,
 }: {
   shift: MatrixShift;
-  span: number;
+  gridColumn: string;
+  gridRow: number;
   selected: boolean;
   onSelect: (id: string) => void;
   names: string[];
@@ -380,7 +441,7 @@ function ShiftCell({
   return (
     <div
       onClick={() => onSelect(shift.shift_id)}
-      style={{ gridColumn: `span ${span}` }}
+      style={{ gridColumn, gridRow }}
       className={cx(
         'group relative flex h-9 cursor-pointer items-center justify-center gap-[3px] border-b border-r border-ink',
         undefinedNeed && 'bg-sand-dark hover:bg-sand',