> ## Documentation Index
> Fetch the complete documentation index at: https://docs.regasolutions.io/llms.txt
> Use this file to discover all available pages before exploring further.

# REGA sur téléphone

> Ce que REGA devient sous 900 px de large : ce qui disparaît, ce qu'on ne peut pas y faire, et comment se répartir le travail entre l'ordinateur et le pouce.

Sur un ordinateur, REGA est un poste de commande à trois colonnes : on surveille un flux. Sur un
téléphone, la question n'est plus la même — c'est **voir un drop et acheter au pouce**. L'interface
ne se contente pas de rétrécir : elle **choisit** ce qu'elle abandonne, et l'ordre de ces abandons
n'est pas laissé au hasard.

<Frame caption="Le flux sur un téléphone de 390 px : en-tête réduit, une annonce à la fois, ACHETER sur toute la largeur, barre d'onglets basse.">
  <img src="https://mintcdn.com/regasolutions/qwd9LpL60q4fWPff/images/bord-tel-fr.webp?fit=max&auto=format&n=qwd9LpL60q4fWPff&q=85&s=a55ee31bfc8cb30c39152f0ce37378ed" alt="Le flux REGA sur téléphone, deux annonces visibles et le bouton ACHETER pleine largeur" width="780" height="1688" data-path="images/bord-tel-fr.webp" />
</Frame>

<Note>
  **La règle qui gouverne toute cette page : ce qui informe cède, ce qui agit reste.** Un compteur, un
  libellé, un titre d'écran, un rappel de contexte — tout cela tombe. Un interrupteur, un prix, un
  bouton `ACHETER` — jamais. Le bouton `ACHETER` ne rétrécit à aucun moment : sur téléphone il gagne
  même une rangée entière, sur toute la largeur de la carte.
</Note>

***

## Les quatre largeurs

REGA connaît quatre mises en page, et elles se déclenchent sur la **largeur de la fenêtre** — jamais
sur le type d'appareil. Chaque palier reprend tout ce que le précédent a déjà retiré.

```mermaid theme={null}
flowchart TD
    A["1580 px et plus<br/>Trois colonnes, tout est visible d'un coup"]
    B["1280 px et plus<br/>Achats et conversations passent<br/>derrière le bouton ⋮"]
    C["900 px et plus<br/>La barre latérale devient un rail d'icônes<br/>Les réglages passent derrière le bouton ☰"]
    D["Sous 900 px — TÉLÉPHONE<br/>Barre d'onglets en bas · une seule colonne<br/>Cibles portées à 44 px · menus et fenêtres<br/>remontent du bas · une seule mise en page"]
    E["Sous 430 px — écran étroit<br/>Le logo tombe · le mot AUTOBUY tombe<br/>Le nom du compte s'abrège"]
    F["NE TOMBE JAMAIS<br/>La pastille AUTOBUY et le compte qui paie<br/>— les deux seules choses qui touchent à l'argent"]
    A --> B --> C --> D --> E --> F
```

| Largeur de la fenêtre | Ce qui change                                                                                                                                                                    |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **1580 px et plus**   | La mise en page complète, trois colonnes.                                                                                                                                        |
| **1280 – 1579 px**    | La colonne de droite — achats récents et conversations — devient un panneau qu'on appelle par `⋮`.                                                                               |
| **900 – 1279 px**     | La barre latérale se réduit à un rail d'icônes de 64 px ; la colonne de gauche devient un panneau qu'on appelle par `☰`.                                                         |
| **Sous 900 px**       | **Le palier téléphone.** Plus de barre latérale : une barre d'onglets fixe en bas de 56 px. L'en-tête passe de 56 à 52 px. Toutes les cibles tactiles passent de 32 à **44 px**. |
| **Sous 430 px**       | Une compaction supplémentaire de l'en-tête. Ce n'est **pas** un cinquième palier : rien d'autre ne change dans le produit.                                                       |

<Info>
  **Les paliers sont en largeur pure, et c'est assumé.** Un iPad tenu en portrait (744 à 834 px) reçoit
  donc la mise en page téléphone — barre d'onglets basse, une seule colonne — sur un écran de plus de
  1000 px de haut. En revanche, la taille des cibles ne suit pas la largeur mais **le doigt** : tout
  écran tactile reçoit ses cibles de 44 px, y compris un iPad Pro de 1024 px qui n'est pas au palier
  téléphone.
</Info>

***

## La navigation au pouce

La barre latérale disparaît entièrement et sept entrées de navigation ne tiennent pas au pouce : sur
390 px elles feraient 55 px chacune, sous le minimum tactile, et personne n'en lirait le libellé. REGA
en garde donc **quatre**, plus un cinquième bouton qui appelle les autres.

| Onglet    | Ce qu'on y fait                                                                         |
| --------- | --------------------------------------------------------------------------------------- |
| `Flux`    | Le direct : les annonces à la seconde où elles naissent, et le bouton `ACHETER`.        |
| `Filtres` | Ce que le radar cherche pour vous.                                                      |
| `Achats`  | Vos commandes, les conversations, les colis en point relais.                            |
| `Suivis`  | La watchlist — les articles mis de côté et leur prix.                                   |
| `Plus`    | Ouvre une feuille `NAVIGATION` qui contient `Comptes`, `Ventes`, `Stats` et `Réglages`. |

<Tip>
  Dans la feuille `Plus`, chaque entrée **retrouve son libellé complet** — ce n'est plus une icône à
  deviner. Si vous allez souvent dans Ventes ou dans Comptes, c'est deux gestes au lieu d'un : sur un
  téléphone, ce sont les écrans qu'on consulte, pas ceux depuis lesquels on agit dans l'urgence.
</Tip>

<Warning>
  Sur les captures de cette page, un bouton `Administration` occupe une place dans l'en-tête.
  Réservé à l'équipe REGA — ce bouton n'apparaît pas sur votre compte. Concrètement, votre en-tête
  dispose de **52 px de plus** que celui des images : c'est exactement la largeur de ce bouton et de sa
  gouttière, et à 390 px cela fait la différence entre un nom de compte lisible et un nom coupé.
</Warning>

***

## Ce qui disparaît de l'en-tête, et pourquoi

L'en-tête est la surface la plus disputée du produit : à 390 px, il débordait de **79 px** avant
d'être repris (et de **149 px** sur un écran de 320). Voici ce qui a cédé, dans l'ordre.

**Sous 900 px**

| Ce qui tombe                       | Ce qui reste à sa place                                                                                                |
| ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| Le libellé `RADAR ACTIF`           | Le point vert. Il dit la même chose sans coûter de largeur.                                                            |
| Le libellé de portée du compte     | **Le nom du compte** — c'est lui qui dit qui paie. La portée complète reste dans l'info-bulle et dans l'écran Comptes. |
| Les mots `Vinted` et `Vestiaire`   | La pastille de couleur, qui porte déjà la place.                                                                       |
| Le compte de rotation (le « 2/3 ») | Il reste entier dans l'écran Comptes.                                                                                  |
| L'avatar du compte                 | Le nom est écrit juste à côté : l'avatar était une redite.                                                             |

**Sous 430 px**

| Ce qui tombe                                                                 | Ce qui reste à sa place                                                                                                                   |
| ---------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| Le logo `rega`                                                               | La barre d'onglets nomme déjà l'écran courant.                                                                                            |
| Le mot `AUTOBUY` — **130 px mesurés**, le plus gros consommateur de la barre | **L'interrupteur, sa couleur et son état.** Le lecteur d'écran, lui, entend toujours le mot complet.                                      |
| Le texte de la seconde place                                                 | Sa pastille. Une moitié absente ferait croire à une déconnexion.                                                                          |
| Le nom de compte trop long                                                   | Il s'abrège avec des points de suspension, avec un plancher de **56 px** — une troncature qu'on voit vaut mieux qu'une troncature muette. |

<Check>
  **Deux éléments ne tombent à aucune largeur : la pastille AUTOBUY et l'indicateur du compte qui
  paie.** Ce sont les deux seuls éléments de la coquille qui touchent à de l'argent. Tout le reste est
  négociable ; ces deux-là, non.
</Check>

***

## Écran par écran

### Le flux

<Frame caption="Le flux : une seule mise en page, la photo à gauche, le rail de vignettes dessous, ACHETER sur sa propre rangée.">
  <img src="https://mintcdn.com/regasolutions/qwd9LpL60q4fWPff/images/bord-tel-fr.webp?fit=max&auto=format&n=qwd9LpL60q4fWPff&q=85&s=a55ee31bfc8cb30c39152f0ce37378ed" alt="Le flux REGA sur téléphone en mise en page Dossier" width="780" height="1688" data-path="images/bord-tel-fr.webp" />
</Frame>

Sous 900 px, **la mise en page est imposée** : `Mur` et `Tableau` ne sont pas proposés. Si vous les
cherchez, REGA vous répond `Sur téléphone il n'y a qu'une seule mise en page.` Et pour un second feed
côte à côte : `Un seul feed sur cet écran — deux bandes tomberaient sous la largeur de carte lisible.`

Ce n'est pas une punition : c'est là que le téléphone **reprend** ce que l'ancienne carte compacte lui
retirait. La photo passe d'environ 128 px à un bloc bien plus large, et le carrousel de vignettes
revient. Ce rail de vignettes était auparavant masqué alors que les images étaient déjà chargées :
mesuré **0 rail visible sur 10** à 890, 555 et 390 px, pendant que la carte annonçait 4, 5, 7 et 8
photos. On payait le téléchargement sans rien montrer.

Ce que la carte abandonne, et où le retrouver :

| Abandonné sur la carte                                 | Où c'est resté                                                                                                                |
| ------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- |
| Les faits secondaires — filtre déclencheur, état, pays | Dans la fiche de l'article, tous.                                                                                             |
| L'étiquette du compte payeur                           | Écrite **une fois** dans l'en-tête de la bande. La répéter sur chaque carte d'un écran qui n'en montre que deux est du bruit. |
| Le total livré estimé                                  | Le prix reste en grand : c'est le chiffre sur lequel on décide.                                                               |
| Le débit du flux                                       | Dans le panneau `☰` (`Réglages du compte, de l'autobuy et du feed`).                                                          |

<Warning>
  **Faire défiler le flux le gèle.** Quarante pixels suffisent — et sur un téléphone, défiler est le
  geste par défaut. C'est voulu : on ne veut pas que la liste bouge sous le doigt qui vise `ACHETER`.
  Le gel s'annonce par un bandeau collant `NOUVELLES` précédé du nombre ; taper dessus remet la liste
  en tête. **Exception : quand AUTOBUY est armé, le flux ne gèle plus** — la machine achète, l'humain
  ne vise pas.
</Warning>

### Filtres

<Frame caption="Filtres : le résumé et le plafond tombent, les deux interrupteurs restent.">
  <img src="https://mintcdn.com/regasolutions/qwd9LpL60q4fWPff/images/filtres-tel-fr.webp?fit=max&auto=format&n=qwd9LpL60q4fWPff&q=85&s=fbe96e42497b63b1901aa24502bdb81f" alt="L'écran Filtres de REGA sur téléphone" width="780" height="1688" data-path="images/filtres-tel-fr.webp" />
</Frame>

* Sous 1280 px : l'intitulé de la colonne autobuy tombe, **l'interrupteur reste**.
* Sous 900 px : le compteur de détections tombe (il informe) ; la grille passe à une colonne ; les
  actions d'en-tête prennent toute la largeur.
* **Sous 599 px : le résumé de la ligne et le plafond du filtre disparaissent aussi.** Le nom,
  l'autobuy et le `⋯` ne tombent jamais.
* Toute fenêtre de réglage colle au bas de l'écran et réserve la place de la barre d'accueil du
  téléphone.

<Tip>
  Créer ou refondre un filtre depuis un téléphone est possible, mais c'est le geste le moins confortable
  du produit : la fenêtre est haute, elle défile, et le plafond du filtre — la seule borne d'argent qui
  suive vraiment l'achat automatique — n'est plus lisible sur la ligne à cette largeur. **Faites vos
  filtres sur ordinateur, servez-vous-en depuis le téléphone.**
</Tip>

### Achats

<Frame caption="Achats : les rangées de boutons de filtre défilent sur place au lieu de s'empiler sur cinq lignes.">
  <img src="https://mintcdn.com/regasolutions/qwd9LpL60q4fWPff/images/commandes-tel-fr.webp?fit=max&auto=format&n=qwd9LpL60q4fWPff&q=85&s=54e1667767210ff7df7fa7795bb93528" alt="L'écran Achats de REGA sur téléphone, quatre commandes visibles" width="780" height="1688" data-path="images/commandes-tel-fr.webp" />
</Frame>

C'est l'écran qui a le plus gagné à être mesuré. Enroulée, la barre d'outils collante occupait
**310 px sur 736 — 42 % de l'écran, en permanence**, parce que cinq boutons de vue tombaient sur trois
lignes et neuf boutons de statut sur cinq. Aujourd'hui chaque rangée **défile sur place**. Ce qu'il en
reste : 154 px, 18,2 % de l'écran.

* La ligne d'une commande passe de 4 rangées à 2, avec une vignette de 40 × 50.
* **Le Kanban s'empile** : à 390 px sur 40 commandes, il ne montrait plus que **1,19 colonne sur 8** à
  la fois, et 32 % de la pile. Il est désormais présenté une colonne par rangée.
* Le fil de conversation devient un panneau qu'on appelle, au lieu d'une colonne.
* Sous 700 px, le lien vers la carte d'un point relais tombe — **le nombre de colis et le repère
  d'attente restent visibles**, ce sont les deux seules informations qui décident d'un déplacement.
  C'est l'adresse qui s'abrège, jamais eux.

### Suivis

<Frame caption="Suivis : le bouton Affiner remplace marque, catégorie et bornes de prix.">
  <img src="https://mintcdn.com/regasolutions/qwd9LpL60q4fWPff/images/watchlist-tel-fr.webp?fit=max&auto=format&n=qwd9LpL60q4fWPff&q=85&s=d6bfab26ccecc3e76e34eff15628c2e4" alt="La watchlist de REGA sur téléphone, trois articles suivis" width="780" height="1688" data-path="images/watchlist-tel-fr.webp" />
</Frame>

* **Le sélecteur de disposition n'est pas rendu du tout.** `Grille` demande 760 px, `Tableau` en
  demande 1100 : à 390 px il ne resterait que `Liste`, et un sélecteur à une seule entrée est un
  contrôle mort. REGA ne masque pas une option indisponible : **il ne l'offre pas.**
* Si vous réduisez la fenêtre sous le plancher, l'affichage retombe sur `Liste` **sans effacer votre
  choix** : il revient dès que la place revient.
* Marque, catégorie et bornes de prix passent derrière un bouton `Affiner`, dont l'info-bulle dit
  `Marque, catégorie et bornes de prix`. Quand des filtres sont actifs, elle en donne le nombre.
* La carte passe de 7 rangées à 3. **Rien n'est retiré : ce qui était empilé se pose côte à côte.**
  Avant, la ligne faisait 221 px et on voyait **un seul article entièrement, sur quatorze** ; on en
  voit trois.

### Ventes

<Frame caption="Ventes : la photo cesse d'être en portrait, deux cartes tiennent par rangée.">
  <img src="https://mintcdn.com/regasolutions/qwd9LpL60q4fWPff/images/ventes-tel-fr.webp?fit=max&auto=format&n=qwd9LpL60q4fWPff&q=85&s=08c2f7c1603e88a75ed8886a2880e734" alt="L'écran Ventes de REGA sur téléphone, deux cartes par rangée" width="780" height="1688" data-path="images/ventes-tel-fr.webp" />
</Frame>

C'était l'écran le plus abîmé sous petite largeur : à 390 × 844, **0 carte entière sur 16** était
visible, parce que l'en-tête occupait 494 px sur 736 défilables — **60 %**. Après reprise : **2 cartes
entières**. La photo cesse d'être en portrait et devient carrée (en portrait, elle coûtait 212,5 px à
elle seule) ; le bloc de contexte passe de 148 à 62 px.

Sous 560 px, une phrase **apparaît** au-dessus du tableau : `◂ la table défile horizontalement ▸`.
Elle est cachée partout ailleurs, et ne se montre qu'à la largeur où le débordement est réel.

### Comptes

<Frame caption="Comptes : la liste seule. La fiche d'un compte prend tout l'écran, et une flèche ramène ici.">
  <img src="https://mintcdn.com/regasolutions/qwd9LpL60q4fWPff/images/comptes-tel-fr.webp?fit=max&auto=format&n=qwd9LpL60q4fWPff&q=85&s=bd473705c36bac03a60d75d2a0caef20" alt="L'écran Comptes de REGA sur téléphone, les deux places empilées" width="780" height="1688" data-path="images/comptes-tel-fr.webp" />
</Frame>

**C'est le seul écran qui devient un maître-détail.** Sur téléphone, une seule des deux colonnes est à
l'écran à la fois : la liste, ou la fiche. L'autre n'est pas supprimée — elle est à une flèche de
distance, `←` `Revenir à la liste`.

Les deux portes de place (Vinted, Vestiaire Collective) s'empilent sous 719 px : une porte à
demi-largeur sur un téléphone devient une cible qu'on rate. Et la liste des membres d'un groupe est
plafonnée à 48 % de la hauteur d'écran — sans quoi elle empêcherait d'atteindre le bouton
d'enregistrement.

### Stats

<Frame caption="Stats : pas de titre d'écran, les périodes défilent sur une seule rangée.">
  <img src="https://mintcdn.com/regasolutions/qwd9LpL60q4fWPff/images/stats-tel-fr.webp?fit=max&auto=format&n=qwd9LpL60q4fWPff&q=85&s=791ea85e2d03af100a26e12bfcd99b2b" alt="L'écran Statistiques de REGA sur téléphone" width="780" height="1688" data-path="images/stats-tel-fr.webp" />
</Frame>

Le **titre de l'écran disparaît** : la barre de navigation dit déjà où l'on est, et il coûtait une
rangée entière sur l'écran où il en reste le moins. Le seul repère restant est l'onglet actif en bas.
Toutes les rangées de boutons se réunissent sur une seule ligne qui défile — mesuré : 336 px, puis
290 en mettant chaque groupe sur sa rangée, puis **\~200** en les réunissant.

### Réglages

<Frame caption="Réglages : les sections défilent sur une rangée, les lignes se ré-aèrent.">
  <img src="https://mintcdn.com/regasolutions/qwd9LpL60q4fWPff/images/parametres-tel-fr.webp?fit=max&auto=format&n=qwd9LpL60q4fWPff&q=85&s=31a811f9347e5008363ce8cddbf8c651" alt="L'écran Paramètres de REGA sur téléphone" width="780" height="1688" data-path="images/parametres-tel-fr.webp" />
</Frame>

C'est l'écran le plus important à connaître depuis un téléphone, parce que **trois choses n'existent
que là** : la langue, le plafond d'achat, et l'activation des alertes sur cet appareil. Les actions de
confirmation y passent en colonne pleine largeur, avec l'annulation **au-dessus** de l'irréversible :
sur un pouce, la position compte plus que la couleur.

***

## Menus, fenêtres et cibles : ce qui change partout à la fois

Ces trois règles s'appliquent sur **tous** les écrans dès qu'on est sur un écran tactile ou sous
900 px. Elles expliquent la plupart des surprises.

<CardGroup cols={3}>
  <Card title="Les menus remontent du bas" icon="panel-bottom">
    Un menu `⋯`, un sélecteur, une liste de choix : tout s'ouvre **collé au bas de l'écran**, là où le
    pouce est — jamais sous le bouton que vous venez de taper.
  </Card>

  <Card title="Les fenêtres deviennent des feuilles" icon="square-dashed-bottom">
    Pleine largeur, coins arrondis en haut, plafonnées à 92 % de la hauteur, **et avec leur propre
    défileur interne**. Sans ce défileur, tout ce qui dépassait était physiquement hors d'atteinte —
    mesuré : 1337 px de contenu dans 791 px de fenêtre, et rien qui défilait.
  </Card>

  <Card title="Tout devient atteignable au doigt" icon="hand-pointer">
    Boutons de filtre et champs mesurés à **31 et 32 px** sur un iPhone de 390 px : portés à 44. Les
    cibles trop petites sont agrandies **par leur zone sensible, pas par leur dessin** — l'écran ne
    grossit pas, il devient touchable.
  </Card>
</CardGroup>

<Note>
  Le bouton principal d'une page prend toute la largeur — mais **pas au-delà** : mesuré sur un iPad de
  820 px, un bouton de 752 px n'est plus une cible, c'est une barre.
</Note>

***

## L'argent, depuis un téléphone

C'est la section à lire deux fois. Rien de ce qui suit ne dépend de la taille de l'écran, mais tout y
prend un sens différent — parce qu'un téléphone se verrouille, se met en poche, et perd le réseau.

<Steps>
  <Step title="L'achat automatique tourne sur nos serveurs">
    Armer la pastille `AUTOBUY` depuis votre téléphone arme **le serveur**. Il survit à la fermeture de
    l'onglet, à la fermeture du navigateur, à l'extinction de l'appareil. La ligne `Où tourne l'achat
            automatique` — `sur nos serveurs — fermer l'onglet ne l'arrête pas` — **énonce cet état** ; ce
    n'est pas un interrupteur qu'on règle. **Le seul geste qui l'arrête, c'est de le désarmer.**
  </Step>

  <Step title="Trois plafonds distincts, du plus large au plus étroit">
    `Plafond d'achat` (Réglages → `ACHAT`) vaut pour **tous** les achats, manuels et automatiques, sur
    toutes les machines — `Au-dessus de ce montant, l'achat est refusé et vous en êtes averti. Vide =
            aucun plafond.` Il est **vide d'origine**, et posé, il refuse aussi un article dont le prix est
    illisible. · `Plafond par article` vit dans le panneau AUTOBUY du tableau de bord, vaut **120 €**
    d'origine et **n'est mémorisé que dans ce navigateur-là**. · Le plafond d'un **filtre** ne borne
    que l'achat automatique de ce filtre.
  </Step>

  <Step title="Le point relais : deux objets à ne pas confondre">
    `Point relais automatique` (Réglages) est **actif d'origine**, et son texte est sans détour :
    `rega choisit le point de retrait pendant l'achat. Éteint, l'achat échoue faute de point relais —
            laissez-le allumé.` Éteint, l'achat échoue avec
    `Aucun point relais n'a pu être sélectionné pour cette commande.` — **rien ne pose de question à
    personne.** C'est autre chose que `PRÉPARER CE TRANSPORTEUR` (écran Comptes), qui est un achat
    RÉEL de quelques euros, une fois par compte et par transporteur, et qui reste **facultatif**.
  </Step>

  <Step title="Un paiement interrompu n'est jamais rejoué">
    Si la connexion lâche **au moment de payer**, l'issue est inconnue : rejouer risquerait un double
    débit. REGA ne rejoue donc pas. Sur un téléphone — ascenseur, métro, mauvais réseau — c'est le cas
    qui vous arrivera. **Le geste : ouvrir `Achats` et regarder, avant de retenter quoi que ce soit.**
  </Step>
</Steps>

<Warning>
  **Le `Plafond par article` ne voyage pas.** Il est mémorisé dans le navigateur où vous l'avez posé :
  la valeur réglée sur votre ordinateur n'existe pas sur votre téléphone, et inversement. Si vous voulez
  une borne qui vaille partout et pour tout le monde, c'est le `Plafond d'achat` des Réglages — et pour
  borner un achat automatique, c'est le plafond du filtre.
</Warning>

<Info>
  Le gain de `PRÉPARER CE TRANSPORTEUR` est d'environ 1,3 s sur l'achat, et il **n'est pas additif** :
  c'est le **vendeur** qui choisit le transporteur. En préparer plusieurs élargit la **part** de vos
  achats qui gagnent ce temps ; ça n'augmente jamais le gain lui-même.
</Info>

***

## Les alertes de drop : la seule chaîne qui compte

Un téléphone sans alertes n'est qu'un écran de plus. Voici la chaîne complète, et les deux endroits
où elle se casse en silence.

```mermaid theme={null}
flowchart TD
    F["Un filtre avec « Me notifier » coché"] --> R["Le radar détecte l'annonce"]
    R --> C["🔔 La cloche, dans l'application"]
    R --> P["Une alerte poussée vers vos appareils"]
    P --> D{"Cet appareil est-il activé ?<br/>Réglages → Notifications"}
    D -->|"non"| X["Silence — et rien ne vous le dit"]
    D -->|"oui"| I{"iPhone ?"}
    I -->|"ouvert dans Safari"| S["REFUS annoncé :<br/>il faut ajouter rega<br/>à l'écran d'accueil"]
    I -->|"ajouté à l'écran d'accueil<br/>ou Android"| N["Alerte système :<br/>photo · marque · titre · prix"]
```

<Steps>
  <Step title="Cochez « Me notifier » sur le filtre — pas ailleurs">
    C'est l'interrupteur le plus oublié, et REGA le dit lui-même :
    `N'émet que pour les filtres qui l'ont demandé — l'interrupteur vit sur chaque filtre.`
    Son aide, dans la fenêtre du filtre : `Une notification à chaque détection de ce filtre — photo,
            marque, titre et prix. Aucun plafond n'est appliqué : un filtre large en produira beaucoup.`
  </Step>

  <Step title="Activez l'appareil">
    Réglages → `Notifications` → `Cet appareil` → `Activer sur cet appareil`. Le bouton
    `Demande l'autorisation du navigateur, puis enregistre cet appareil.` L'état recherché est
    `Appareil activé ✓`. Chaque téléphone, chaque ordinateur s'active séparément.
  </Step>

  <Step title="Sur iPhone : ajoutez rega à l'écran d'accueil, sinon rien n'arrive">
    Depuis un simple onglet Safari, REGA refuse et vous dit pourquoi : `Sur iPhone, les alertes
            exigent d'ajouter rega à l'écran d'accueil (Partager → Sur l'écran d'accueil), puis de l'ouvrir
            depuis là.` Faites-le, puis rouvrez REGA **depuis l'icône**.
  </Step>

  <Step title="Vérifiez que c'est bien fait">
    Réglages → `APPAREILS ET CONNEXIONS`. La ligne `Mode` doit afficher
    `Installée sur l'écran d'accueil` et **non** `Onglet de navigateur`. La ligne `Alertes` doit
    afficher `Autorisées`.
  </Step>
</Steps>

<Warning>
  **Il n'y a aucun plancher de cadence sur les alertes, volontairement.** Vous choisissez quels filtres
  notifient, donc vous choisissez le volume. Un débit ingérable vient toujours d'un filtre trop large,
  jamais d'un réglage manquant.
</Warning>

***

## Ce qu'on ne peut pas faire depuis un téléphone

Dit franchement, pour que vous ne le cherchiez pas.

| Ce qui n'est pas possible                                         | Où le faire                                                                              |
| ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| Choisir la mise en page du flux (`Mur`, `Tableau`)                | Sur un écran plus large. `Tableau` demande 1280 px.                                      |
| Ouvrir deux feeds côte à côte                                     | À partir d'environ 690 px de largeur — un iPad en portrait en ouvre deux.                |
| Choisir la disposition de la watchlist                            | `Grille` à partir de 760 px, `Tableau` à partir de 1100 px.                              |
| Voir la liste des comptes **et** une fiche en même temps          | Sur ordinateur. Sur téléphone, c'est l'un ou l'autre, à une flèche de distance.          |
| Voir le débit du flux sur l'écran du flux                         | Il est dans le panneau `☰`.                                                              |
| Changer la langue depuis l'en-tête                                | Réglages → `APPARENCE`. C'est désormais **le seul** endroit.                             |
| Voir marque / catégorie / bornes de prix des Suivis sans un geste | Elles sont derrière `Affiner`.                                                           |
| Recevoir une alerte iPhone depuis un onglet Safari                | Ajoutez rega à l'écran d'accueil (voir plus haut).                                       |
| Se servir utilement du bouton `⧉` de fenêtre détachée             | Il est présent, mais il demande une fenêtre de 560 × 980 qu'un navigateur mobile ignore. |

***

## Se répartir le travail

La bonne façon d'utiliser REGA n'est pas « tout sur le téléphone » ni « tout sur l'ordinateur ». C'est
une répartition, et elle découle directement de ce que chaque largeur sait faire.

```mermaid theme={null}
flowchart TD
    Q{"Qu'est-ce que vous faites ?"}
    Q -->|"Je veux voir et acheter maintenant"| T["TÉLÉPHONE<br/>Flux · Suivis · Achats<br/>Armer ou désarmer AUTOBUY"]
    Q -->|"Je construis ou j'affine ma stratégie"| O["ORDINATEUR<br/>Filtres · plafonds · groupes<br/>Comptes et points relais"]
    Q -->|"Je compare, je décide, je fais mes comptes"| O2["ORDINATEUR<br/>Ventes · Stats · Kanban des achats"]
    T --> A["L'achat automatique, lui,<br/>tourne sur nos serveurs<br/>dans les deux cas"]
    O --> A
    O2 --> A
```

| Sur le téléphone                           | Sur l'ordinateur                                  |
| ------------------------------------------ | ------------------------------------------------- |
| Voir les drops et acheter au pouce         | Créer, nommer et affiner les filtres              |
| Armer / désarmer `AUTOBUY` avant de sortir | Poser les plafonds et les portées d'achat         |
| Suivre un article, répondre à un vendeur   | Comparer beaucoup de ventes d'un coup d'œil       |
| Vérifier une commande, un point relais     | Lire le Kanban des achats sur ses huit colonnes   |
| Recevoir les alertes                       | Connecter les comptes, préparer les transporteurs |

***

## Nos conseils

<AccordionGroup>
  <Accordion title="1. Ajoutez rega à l'écran d'accueil, même si vous n'êtes pas sur iPhone" icon="download">
    Sur iPhone c'est **obligatoire** : sans cela, les alertes n'existent pas — Safari ne les accorde
    qu'à une application ajoutée à l'écran d'accueil. Partout ailleurs, c'est quand même le bon
    réglage : l'application s'ouvre en plein écran, la place de l'encoche est réservée, et l'en-tête
    ne se glisse plus sous la barre d'état. Vérifiez ensuite dans Réglages →
    `APPAREILS ET CONNEXIONS` que `Mode` affiche `Installée sur l'écran d'accueil`.
  </Accordion>

  <Accordion title="2. Une alerte de drop demande TROIS interrupteurs, pas un" icon="bell">
    Le filtre (`Me notifier`), l'appareil (`Activer sur cet appareil`), et le type d'alerte. En
    oublier un donne un **silence qu'on ne diagnostique pas** — on croit alors le produit cassé. Si
    vous n'entendez rien, reprenez les trois dans cet ordre avant toute autre hypothèse.
  </Accordion>

  <Accordion title="3. Ne cochez « Me notifier » que sur vos filtres étroits" icon="filter">
    Il n'existe aucun plancher de cadence. Un filtre large notifiant, sur un téléphone, produit un
    flot que vous finirez par couper au niveau du système — et vous couperez du même coup les alertes
    qui comptaient. Gardez le filtre large **dans le flux**, et réservez l'alerte aux filtres dont
    chaque détection mérite votre pouce.
  </Accordion>

  <Accordion title="4. Armez AUTOBUY quand vous partez marcher — vous gagnez deux choses" icon="zap">
    D'abord l'évidence : l'achat tourne sur nos serveurs, vous pouvez verrouiller l'écran et ranger le
    téléphone. Ensuite le détail que personne ne devine : **armé, le flux ne gèle plus au
    défilement**. C'est exactement le bon mode « je regarde en marchant » — désarmé, quarante pixels
    de défilement suffisent à figer la liste.
  </Accordion>

  <Accordion title="5. Nommez vos comptes court — huit caractères utiles" icon="user">
    À 390 px, un nom de 23 caractères mettait **15 px de nom hors fenêtre** ; à deux places
    (Vinted + Vestiaire) et 320 px, le nom Vinted tombait à 18 px. Le plancher est aujourd'hui de
    56 px, et un nom long s'affiche en entier dès 768 px — mais sur un téléphone, un nom court est la
    seule façon de lire **qui paie** sans ouvrir l'info-bulle.
  </Accordion>

  <Accordion title="6. Posez votre borne d'argent au bon endroit" icon="euro">
    Le `Plafond par article` du tableau de bord ne suit pas d'un appareil à l'autre : réglé sur votre
    ordinateur, il n'existe pas sur votre téléphone. La borne qui vaut partout est le `Plafond
            d'achat` des Réglages ; celle qui borne un achat automatique est **le plafond du filtre**
    (`Plafond par article — laisser vide pour n'imposer aucun plafond`). Posez-les depuis
    l'ordinateur, une fois.
  </Accordion>

  <Accordion title="7. Sur téléphone, laissez la densité « Confortable »" icon="ruler">
    C'est contre-intuitif : `Compacte` **n'est pas plus compacte** sur un téléphone. Le palier
    téléphone donne déjà des marges de 12 px, et le réglage compact en rend 14 — donc plus large. Le
    réglage qui change vraiment la densité est `Taille du texte` : ses trois crans valent 0,94, 1 et
    1,08. `Compact` — `Plus d'annonces à l'écran` — est le bon choix si vous voulez voir plus de
    cartes.
  </Accordion>

  <Accordion title="8. Cherchez les menus au pouce, pas là où vous avez tapé" icon="panel-bottom">
    Sur téléphone, un `⋯` ou un sélecteur s'ouvre **en bas de l'écran**, jamais sous le bouton. Ce
    n'est pas cosmétique : c'est ce qui a supprimé des menus amputés, où des entrées sortaient du
    cadre et devenaient inatteignables. Et si une fenêtre semble coupée en bas, **elle défile à
    l'intérieur** — posez le doigt dedans, pas sur la page.
  </Accordion>

  <Accordion title="9. Basculez la langue une seule fois, depuis n'importe quel appareil" icon="languages">
    La langue suit **la personne**, pas l'appareil : choisie sur votre ordinateur, elle vous rattrape
    sur le téléphone à l'ouverture. Elle commande aussi vos courriels —
    `L'interface, les messages et les courriels.` C'est dans Réglages → `APPARENCE`, et nulle part
    ailleurs.
  </Accordion>

  <Accordion title="10. Préparez le transporteur une fois, depuis Comptes — puis n'y pensez plus" icon="truck">
    `PRÉPARER CE TRANSPORTEUR` est un achat réel de quelques euros, une seule fois par compte et par
    transporteur. C'est **facultatif** : sans lui l'achat aboutit, simplement \~1,3 s plus lent. Faites-
    le sur l'écran Comptes, tranquillement — sur téléphone c'est un maître-détail, une fiche à la
    fois, et la flèche `←` `Revenir à la liste` vous ramène.
  </Accordion>
</AccordionGroup>

***

## Ce qui surprend

<AccordionGroup>
  <Accordion title="Un iPad tenu en portrait est traité comme un téléphone">
    Les paliers sont en largeur pure. Un iPad en portrait (744 à 834 px) reçoit donc la barre
    d'onglets basse et la mise en page imposée — sur un écran de plus de 1000 px de haut. C'est assumé.
    En revanche il ouvre bien **deux** feeds côte à côte, là où un téléphone de 390 px n'en ouvre
    qu'un : le calcul porte sur la largeur réelle, pas sur le palier.
  </Accordion>

  <Accordion title="Un iPad Pro de 1024 px reçoit des cibles de 44 px sans être « téléphone »">
    Parce que **la cible tactile ne dépend pas de la largeur, elle dépend du doigt**. C'est un défaut
    mesuré au banc : sur un iPad Pro en portrait, les cibles restaient à 32 px — taille de souris. Tous
    les écrans tactiles reçoivent désormais 44 px, quelle que soit leur largeur.
  </Accordion>

  <Accordion title="Le titre de l'écran Statistiques disparaît complètement">
    Il ne se replie pas, il n'est pas abrégé : il n'est plus là. Le seul repère est l'onglet actif de
    la barre du bas. C'est un choix : ce titre coûtait une rangée entière sur l'écran qui en a le
    moins.
  </Accordion>

  <Accordion title="Le mot AUTOBUY disparaît, mais l'interrupteur reste — et il se dit toujours">
    Sous 430 px, le mot tombe : 130 px mesurés, le plus gros consommateur de la barre. Un interrupteur
    se lit à sa position et à sa couleur, pas à son étiquette — et l'étiquette revient dès 431 px. Un
    lecteur d'écran, lui, entend toujours le mot complet : on allège l'œil, pas l'accessibilité.
  </Accordion>

  <Accordion title="Sur écran étroit, votre second compte n'affiche plus que sa pastille">
    Avec Vinted **et** Vestiaire, sous 430 px, la seconde moitié de l'indicateur perd son texte et ne
    garde que sa pastille de couleur. **Ce n'est pas une déconnexion.** Une moitié absente ferait
    croire que la place n'est pas connectée : elle cède son texte, jamais sa présence.
  </Accordion>

  <Accordion title="Le bouton ⧉ « fenêtre détachée » est là et ne sert à rien">
    Il est rendu sur toutes les largeurs, y compris sur téléphone, et son info-bulle dit
    `Ouvrir le flux général dans une fenêtre détachée`. Il demande une fenêtre de 560 × 980 — un
    navigateur mobile ignore ces dimensions. Ne comptez pas dessus depuis un téléphone.
  </Accordion>

  <Accordion title="Le geste vertical défile la liste, le geste horizontal tourne les photos">
    Sur une carte, les deux ne se marchent pas dessus : un balayage horizontal fait tourner le
    carrousel **sans** faire défiler la page. Dans la visionneuse plein écran, **tout** geste tourne
    une photo et la page ne bouge pas. C'est voulu.
  </Accordion>

  <Accordion title="L'indicateur d'erreur est en bas à gauche, au-dessus de la barre d'onglets">
    C'est la seule tache rouge du produit, et elle est placée pour ne pas croiser un message de
    confirmation. Si quelque chose ne va pas, c'est là qu'il faut regarder — pas en haut de l'écran.
  </Accordion>
</AccordionGroup>

***

## Les limites, dites franchement

<Warning>
  **Le mode paysage n'est pas traité.** Les largeurs seules décident : un iPhone tourné à
  l'horizontale (844 px de large) reste au palier téléphone, avec sa barre d'onglets de 56 px et son
  en-tête de 52 px sur une hauteur de 390 px. Aucune mesure de ce cas n'existe dans nos relevés. Tenez
  votre téléphone en portrait.
</Warning>

* **Ventes plafonne à 2 cartes entières** à 390 × 844. Quatre est hors d'atteinte sans amputer la
  photo. Pour comparer beaucoup de ventes, c'est la même page sur un écran plus large.
* **Sur un écran de 320 × 700, la watchlist ne montre qu'une carte à la fois.** Deux remèdes ont été
  essayés et mesurés : il reste 384 px de hauteur libre, et deux cartes en demandent 400. On a préféré
  ne rien amputer.
* **Sous 480 px, le nombre d'avis d'un vendeur disparaît** (son pseudo reste). Le seuil est en largeur
  d'écran et c'est un pis-aller assumé : selon la largeur, la carte du vendeur passe de deux colonnes
  à une, si bien que le pseudo survit à 360 px et meurt à 390.
* **La page Vestiaire n'est liée depuis aucune navigation** — ni sur téléphone, ni ailleurs.

<Check>
  Ce qui, en revanche, est vérifié : sur les **neuf pages** du produit, à 390, 834, 1280 et 1440 px, en
  français et en anglais, **aucun débordement horizontal**. La page ne part jamais de travers sous le
  doigt.
</Check>

***

## Pour aller plus loin

<CardGroup cols={2}>
  <Card title="Le tableau de bord" icon="layout-dashboard" href="/fr/ecrans/tableau-de-bord">
    Le détail de chaque contrôle du flux, et ce qui peut refuser un achat.
  </Card>

  <Card title="Les filtres" icon="filter" href="/fr/ecrans/filtres">
    Construire un filtre étroit — celui qui mérite une alerte sur votre téléphone.
  </Card>

  <Card title="Les achats" icon="package" href="/fr/ecrans/commandes">
    Les commandes, les conversations et les colis en point relais.
  </Card>

  <Card title="Les réglages" icon="settings" href="/fr/ecrans/parametres">
    Plafond d'achat, point relais automatique, notifications, langue, appareils.
  </Card>

  <Card title="Les comptes" icon="users" href="/fr/ecrans/comptes">
    Qui paie, et comment préparer un transporteur.
  </Card>

  <Card title="La watchlist" icon="heart" href="/fr/ecrans/watchlist">
    Ce que fait le bouton `Affiner`, et ce que valent les prix affichés.
  </Card>
</CardGroup>
