# Working Agreement

## Ways of working
This repository uses the following item-by-item workflow for backlog work.

1. Tell the user when the implementation is ready for testing.
2. Apply requested corrections while the PR remains open.
3. Only commit and push final changes after the user validates the behavior.
4. The user merges, or explicitly asks the agent to merge into `main`.

Important local constraints:

- Preserve user changes in the working tree. Do not revert or stage unrelated files without explicit confirmation.
- Prefer small, focused PRs aligned to one Notion item.

## App tone of voice
- Always use french
- Always use first person ("je", "mon", "mes", etc.) BUT not when the app is explaining something to the user or sharing information. Then use the second person ("vous", "vos", "vôtre", etc.)
- Always use sweet and reassuring wording
- In buttons with icons, always place the icon before the text.

## CSS conventions
- Never use inline `style=""` attributes in Blade views. Add a class to `resources/css/app.css` instead, following the existing BEM-ish naming per component (`profile-*`, `contract-*`, `dashboard-*`).
- Exception: a value that is genuinely dynamic and computed per render/interaction (e.g. a progress-bar width from a PHP or Alpine variable, an Alpine-computed dropdown position) may stay inline, since it cannot be expressed as static CSS.
- Before adding a new class, check whether an existing one already covers the same visual pattern (grep `resources/css/app.css` for the property values) — reuse it instead of duplicating.
- Colors that are reused across rules must be defined once as a CSS custom property in the `:root` block at the top of `resources/css/app.css` and referenced via `var(...)`, not repeated as raw hex values.

## Button design system
- Three color variants: **save** (violet, filled — create/update actions), **danger** (red, `#b8291e` text/border/icon on `#fdf1f0` background — delete actions), **default** (white background, violet border, violet text — every other interactive action).
- All buttons share the same border-radius.
- Every button has an icon, and centered text.
- Two sizes: **md** (default) and **sm** (more discreet). All `md` buttons share the same height; all `sm` buttons share the same height.
- A **light** modifier hides the button's text while keeping its icon visible.
- A **width** setting controls whether a button takes its content's width, the full width of its container, or shares the row equally with its sibling buttons.
- Every delete button opens a confirmation modal after the click: "La suppression est irréversible. Souhaitez-vous continuer ?", with a "Oui" button (danger) and a "Non" button (default).