fix(web): retire l'affichage visuel du contexte des tech steps

Ne touche que le rendu — le backend continue de calculer et de
persister contextStart/contextEnd (tech-step-matcher.ts, StepTechStep),
et splitDescriptionByTechSteps continue de découper la description
autour du contexte (segments isKeyword: false). StepDescription.tsx
rend désormais ces segments comme du texte brut, comme un segment sans
technique — plus d'encadré/bordure autour de la clause, seul le
mot-clé reste surligné avec sa tooltip.

.step-tech-step-context (CSS) retirée, devenue inutilisée.

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

apps/web/src/features/recipes/recipes.scss

@@ -627,27 +627,11 @@
   }
 }
 
-// The wider clause a `.step-tech-step` keyword was found in (see
+// `.step-tech-step-context` (the wider clause a `.step-tech-step` keyword
-// StepDescription.tsx/highlight-tech-steps.ts's `contextStart`/
+// was found in) used to be highlighted here too, more subtly — turned back
-// `contextEnd`) — a lighter treatment than the keyword itself (no dotted
+// off (see `StepDescription.tsx`'s doc comment): the backend still
-// underline, no hover/focus state, no cursor: help: purely visual, not
+// computes and persists `contextStart`/`contextEnd`, this file just no
-// interactive, the keyword segment inside/beside it already carries the
+// longer gives that class any styling to render with.
-// tooltip) so the keyword still reads as the strongest highlight, this
-// just shows how much of the sentence it was understood from. The
-// original 6% background tint (half the keyword's own 14%) turned out to
-// be imperceptible in practice against this dark theme — `--color-primary`
-// itself isn't bright/saturated enough for a same-order-of-magnitude
-// percentage cut in half to still read as "highlighted" rather than "not
-// highlighted at all" — so this pairs a still-subtle 10% background with a
-// thin solid bottom border for a second, independent visual cue.
-.step-tech-step-context {
-  display: inline;
-  padding: 0 0.15em;
-  margin: 0;
-  border-radius: 0.2em;
-  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
-  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
-}
 
 // --- Favorite star toggle (detail panel header) -----------------------------
 .favorite-star-button {

apps/web/src/features/recipes/steps/StepDescription.tsx

@@ -9,11 +9,17 @@ import { splitDescriptionByTechSteps } from "./highlight-tech-steps";
  * matched words highlighted and given a {@link Tooltip} naming the
  * technique (e.g. hovering/focusing "hacher" in "Hacher les oignons" shows
  * "Hacher") — `RecipeDetailPanel`'s replacement for a bare `<p>{description}</p>`.
- * When a match also carries `contextStart`/`contextEnd` (see
+ *
- * `StepTechStepView`), the wider clause the keyword was found in (e.g.
+ * A match's wider `contextStart`/`contextEnd` clause (see
- * "Dans une poêle chaude" around a `preheat` keyword of "poêle chaude") is
+ * `StepTechStepView`) is deliberately *not* visualized here — only the
- * highlighted too, more subtly — no tooltip of its own, the keyword inside
+ * tight keyword span is highlighted. The backend still computes and
- * it already carries one.
+ * persists it (`tech-step-matcher.ts`/`StepTechStep`), and
+ * `splitDescriptionByTechSteps` still splits the description around it
+ * (`isKeyword: false` context segments), but this component now renders
+ * those non-keyword segments as plain text, same as a segment with no
+ * technique at all — the visual "wider clause, subtler highlight"
+ * treatment (`.step-tech-step-context`) turned out to be more visual noise
+ * than useful signal in practice and was turned back off.
  *
  * `techStep.key` resolves its tooltip label through `catalog.techSteps.<key>`
  * i18n, the same pattern every other reference catalog (diets, units, …)
@@ -41,14 +47,10 @@ export function StepDescription({
         if (!segment.techStep) return <Fragment key={key}>{segment.text}</Fragment>;
 
         if (!segment.isKeyword) {
-          // Context-only run — subtly highlighted, no tooltip of its own
+          // Context-only run — rendered as plain text, same as a segment
-          // (the keyword segment elsewhere in this same technique already
+          // with no technique at all (see this component's doc comment for
-          // has one) and not interactive, unlike the keyword's <button>.
+          // why the wider-clause highlight was turned back off).
-          return (
+          return <Fragment key={key}>{segment.text}</Fragment>;
-            <span key={key} className="step-tech-step-context">
-              {segment.text}
-            </span>
-          );
         }
         return (
           <Tooltip key={key} content={t(`catalog.techSteps.${segment.techStep.key}`)}>

apps/web/src/features/recipes/steps/highlight-tech-steps.ts

@@ -7,9 +7,11 @@ import type { StepTechStepView } from "@batch-cooking/shared";
  * the tight keyword span (`isKeyword: true`, e.g. "préchauffer") and, when
  * `StepTechStepView.contextStart`/`contextEnd` are present, the wider
  * surrounding clause around it (`isKeyword: false`, e.g. "Dans une poêle
- * chaude" around a keyword of "poêle chaude"). What `StepDescription.tsx`
+ * chaude" around a keyword of "poêle chaude"). `StepDescription.tsx`
- * renders: plain segments as-is, keyword segments in a strong
+ * currently renders `isKeyword: false` segments as plain text (no visual
- * tooltip-bearing highlight, context segments in a subtler one around it.
+ * distinction from a segment with no technique at all) — the context split
+ * still happens here so the data stays available, but its own dedicated
+ * highlight was turned back off; see that component's doc comment.
  */
 export interface DescriptionSegment {
   text: string;