# Mobile-friendly HTML deck pattern

Use this pattern when a slide deck must work on iPhone-sized screens as well as desktop.

## What worked

- Keep the desktop deck as a fixed 16:9 canvas for desktop and print.
- Add a dedicated mobile breakpoint at around 900px or smaller.
- In mobile mode, do not rely on a horizontal translate track across all slides.
- Show one slide at a time with an `.active` class.
- Make each slide `min-height: 100svh` and let the content flow vertically.
- Remove decorative overlays that consume space or reduce legibility on small screens.
- Replace sticky or floating footers with normal flow content if they cover the last row.
- Keep buttons large enough to tap comfortably.
- Use a simple previous / next interaction model.

## Verification checklist

- Capture a 390×844 screenshot and inspect the first slide visually.
- Confirm there is no footer overlay hiding content.
- Confirm headings wrap cleanly and body text remains readable.
- Confirm that the deck is still usable when switching between desktop and mobile widths.
- If print export exists, verify print CSS separately from mobile CSS.

## Common pitfalls

- Desktop-scale canvas shrunk to phone width, which makes text tiny.
- Sticky controls covering the progress bar or body copy.
- Horizontal slide transform still active on mobile.
- Decorative borders, glows, and ornaments eating too much vertical space.
- **Portrait photos cropped to mid-torso on mobile** — `object-fit: cover` defaults to `object-position: center`, which cuts off the subject's head and shows their neck/chest in short containers. Always add `object-position: top` to portrait `img` elements inside fixed-height cards or image slots. This is especially critical for team/member photos where the face must be visible:
  ```html
  <img src="team_pro/flo.png" style="object-fit:cover; object-position:top;">
  ```
  User complaint that triggered this: "les photos sont mal cadrées sur iphone on voit le milieu du cou mais pas la tête"