/* ═══════════════════════════════════════════════════════════════════════════ FIVESTAR EATS — LE SYSTÈME (annuaire + page de commande) DEUX VERDICTS DU CLIENT, LE MÊME JOUR, ET IL AVAIT RAISON LES DEUX FOIS. 1. La version noire : « ça fait du gros Claude design, c'est laid, c'est pas minimaliste, boutons gros ». Mesuré : 33 dégradés linéaires, 12 dégradés radiaux, 28 ombres portées, 39 usages de l'or, 7 blocs en majuscules espacées dans le SEUL `commander.html`. C'était une page de bijoutier. 2. La version blanche qui a suivi : « Uber Eats version Wish ». Là aussi c'est juste, et c'est la critique la plus utile des deux : j'avais repris leur structure SANS notre identité. Copier quelqu'un, c'est accepter d'être jugé sur son terrain — et sur le terrain d'Uber, avec deux restaurants et quatre photos, on perd. CE QUI SUIT EST LA SYNTHÈSE, ET ELLE TIENT EN UNE PHRASE : NOS COULEURS, LEUR DENSITÉ, NOTRE MOUVEMENT. ── NOS COULEURS ───────────────────────────────────────────────────────── Le noir reste : personne, dans la livraison de repas, n'est sombre. Uber est blanc, DoorDash est blanc, Skip est blanc. C'est la seule chose qui fait qu'on ne ressemble pas à leur version pauvre. MAIS L'OR NE BAIGNE PLUS RIEN. Il ne touche plus QUE l'action : le bouton principal, le mot « Eats », le trait de l'onglet actif. Trois endroits. Un prix, un nom de plat, une bordure, une étiquette ne sont JAMAIS dorés — et c'est cette dispersion, pas le noir, qui faisait « template de luxe ». Le noir est légèrement CHAUD (#0d0c0b, pas #0a0b0f) : un noir bleuté sous un or chaud, c'est la palette que toutes les machines produisent. Un neutre incliné vers l'accent se lit comme un choix. ── LEUR DENSITÉ ───────────────────────────────────────────────────────── C'est ce qu'il faut garder de la version blanche, et ce n'est pas du copiage : c'est de la mesure. Photo de plat à 88 px (neuf plats par écran au lieu de cinq), pastilles à 36 px, corps à 15 px, titres de section à 17 px. Aucune majuscule décorative, aucun interlettrage. ── NOTRE MOUVEMENT ────────────────────────────────────────────────────── C'est là qu'on dépasse, et c'est gratuit : Uber Eats sur le web ne répond presque à rien. Ici, TOUT ce qui se clique s'enfonce, l'article VOLE vers le panier, le compteur rebondit, le total compte, les feuilles montent avec une vraie inertie. Les durées et les courbes viennent de leur propre système de design (github.com/uber/baseweb) — on applique leurs règles mieux qu'eux. ── LES TROIS INTERDITS, LEVÉS LE 22 SEPT. 2026 ────────────────────────── Ils disaient : aucun dégradé, aucune lueur colorée, une seule police (celle du système). Le client les a lus, expliqués, et levés en toutes lettres : « oublie ces règles, tu as carte blanche, je veux vraiment du changement, de quoi d'impressionnant ». Ils restent écrits ici parce que le verdict qui les avait fait naître, lui, n'a pas été levé : « gros Claude design ». Ce qui remplace les interdits, c'est une DISCIPLINE, et elle tient en trois lignes — c'est la différence entre du luxe et du clinquant : 1. UN DÉGRADÉ DONNE DE LA PROFONDEUR OU DE LA LISIBILITÉ, jamais de la couleur : le voile sous un nom posé sur une photo, la lumière du haut sur le bouton d'action (deux tons du MÊME or, pas trois couleurs), les fondus de bord. Jamais un fond qui va du noir au bleu. 2. UNE LUEUR DIT « C'EST ICI QUE TA MAIN VA » : le bouton d'action, un champ en focus, un choix coché, une carte survolée. Toujours l'or de l'action (`--halo`), jamais une autre teinte, jamais au repos partout. 3. UNE POLICE D'AFFICHAGE, Fraunces, pour ce qu'on LIT EN GRAND — le nom du restaurant, les titres, le nom d'un plat sur sa carte. Le corps, les prix, les boutons, le champ de carte de Stripe restent en police système : `display=swap` fait que rien n'est jamais invisible, et une seule famille se charge, en une requête. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* LES PALIERS. Quatre, et la profondeur ne se fait QUE par eux : un élément posé sur un autre monte d'un palier, il ne gagne pas une ombre. */ --bg:#0d0c0b; --surface:#171614; --surface2:#211f1c; --line:#2b2926; /* Le texte. Trois niveaux, et le troisième ne porte jamais une information qu'on doit lire — seulement des indices et des champs vides. */ --text:#f4f2ef; --text2:#9d978e; --text3:#6b665f; /* L'ACTION, ET ELLE SEULE. L'or est un APLAT — pas un dégradé à trois arrêts, pas une ombre colorée, pas un reflet qui balaye. C'était six effets pour dire « appuyez ici ». */ --ink:#e0b25c; --ink-on:#17120a; --or:#e0b25c; /* UN CONTRÔLE SÉLECTIONNÉ N'EST PAS UNE ACTION. Une pastille de filtre active, l'onglet d'un segment, la cuisine choisie : ce sont des ÉTATS. Les peindre en or, c'est six ors à l'écran et plus aucun qui veuille dire « appuyez ici ». Ils prennent donc le blanc — le contraste maximal du système — et l'or reste à l'action seule. */ --sel:#f4f2ef; --sel-on:#0d0c0b; /* Les deux couleurs qui portent un SENS, jamais une humeur : ce qui est bon pour le client, et ce qui l'empêche de commander. */ --good:#4ac489; --good-bg:rgba(74,196,137,.13); --bad:#ff6b6b; --bad-bg:rgba(255,107,107,.13); --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; /* 10 pour ce qu'on remplit, 14 pour ce qui porte une image, et la pilule UNIQUEMENT pour le segment et le bouton d'action — deux par écran. */ --r:10px; --r-lg:14px; --r-pill:999px; /* L'OMBRE NOIRE : ce qui FLOTTE au-dessus d'une photo qu'on ne choisit pas. `--ombre-2` est la grande, pour ce qui se détache de toute la page (une feuille, une carte soulevée). */ --ombre:0 2px 8px rgba(0,0,0,.5); --ombre-2:0 28px 64px -28px rgba(0,0,0,.9); /* LA LUEUR DE L'ACTION (22 sept. 2026, carte blanche). Deux intensités du même or : `--halo` pour ce qu'on est sur le point de presser, `--halo-doux` pour ce qu'on vient de choisir ou qu'on remplit. Aucune autre teinte ne luit jamais. `--ink-2` est l'or ÉCLAIRÉ, le haut du bouton d'action. */ --ink-2:#f3cb74; --halo:0 12px 32px -10px rgba(224,178,92,.62); --halo-doux:0 0 0 3px rgba(224,178,92,.22); /* LE FILET DE LUMIÈRE : un pixel plus clair en haut d'une surface, ce qui la fait paraître éclairée d'en haut au lieu de peinte. */ --filet-haut:inset 0 1px 0 rgba(255,255,255,.06); /* Les courbes d'Uber (github.com/uber/baseweb, src/themes/shared/animation.ts). Ce qui ENTRE décélère, ce qui SORT accélère, ce qui répond au doigt part net. C'est ce détail qui fait qu'une interface paraît obéir au lieu de suivre — et Uber Eats sur le web ne s'en sert presque pas. */ --ease-in:cubic-bezier(.22,1,.36,1); --ease-out:cubic-bezier(.64,0,.78,0); --ease-io:cubic-bezier(.83,0,.17,1); --ease-rep:cubic-bezier(.11,0,.5,0); --gut:16px; } /* ── LE THÈME CLAIR (25 sept. 2026) ──────────────────────────────────────── « Ce qui manque face aux grandes applications de livraison » : une page qui suit le réglage du téléphone. Le noir reste la maison ; le clair est un choix du CLIENT, pas une mode de la page. IL NE S'ALLUME QUE SUR DEMANDE, PAR `data-theme` SUR . La page de commande pose l'attribut AVANT le premier dessin (un petit script dans son ) : le réglage du système (`prefers-color-scheme`), sauf si le client a choisi lui-même (la bascule du pied de page, gardée sur l'appareil) ; embarquée (`embed=1`), elle suit TOUJOURS le système — c'est le site du restaurant qui décide de l'ambiance, pas notre mémoire. POURQUOI PAS UN `@media (prefers-color-scheme: light)` ICI MÊME : ce fichier est aussi celui de l'annuaire (`eats.html`), dont les règles propres n'ont jamais été relues en clair. Sans l'attribut, rien ne change pour lui ; le jour où il l'adopte, il pose `data-theme` comme la page de commande. ET UNE SEULE DÉCLARATION PAR JETON : le script tranche entre système et choix du client, la feuille n'a qu'un bloc à porter. LES CONTRASTES SONT CALCULÉS (luminance relative WCAG 2.x), pas estimés — `tests/test-commande-client-3.mjs` les recalcule depuis CE bloc : --text #1a1816 : 16,7 / 15,3 / 13,8 sur --bg / --surface / --surface2 --text2 #5c574f : 6,8 / 6,2 / 5,6 --text3 #655e55 : 6,0 / 5,5 / 5,0 (il porte de vrais textes ici) --ink #8a5a0b : 5,6 / 5,1 / 4,6 (l'or devient TEXTE lisible) --good #186b42 : 6,2 / 5,6 / 5,1 ; --bad #b3261e : 6,2 / 5,7 / 5,1 blanc sur --ink : 5,9 ; sur --ink-2 (le haut du bouton) : 4,6. L'OR CHANGE DE RÔLE : sur fond noir, l'or clair se lit ; sur fond clair, le même #e0b25c tombe à 1,9:1 — illisible partout où il est un texte (« Livrer à », « Modifier », l'heure du coursier). Il fonce donc, et le bouton d'action prend un texte BLANC au lieu du brun presque noir. */ :root[data-theme="light"]{ color-scheme:light; --bg:#faf8f5; --surface:#f1eee9; --surface2:#e7e3dc; --line:#d9d4cb; --text:#1a1816; --text2:#5c574f; --text3:#655e55; --ink:#8a5a0b; --ink-2:#a06b14; --ink-on:#ffffff; --or:#8a5a0b; --sel:#1a1816; --sel-on:#faf8f5; --good:#186b42; --good-bg:rgba(24,107,66,.1); --bad:#b3261e; --bad-bg:rgba(179,38,30,.08); /* Les ombres noires d'un fond noir sont des taches sur du papier : même rôle, un quart de la force. */ --ombre:0 2px 8px rgba(0,0,0,.14); --ombre-2:0 28px 64px -28px rgba(0,0,0,.28); --halo:0 12px 32px -10px rgba(138,90,11,.42); --halo-doux:0 0 0 3px rgba(138,90,11,.2); --filet-haut:inset 0 1px 0 rgba(255,255,255,.7); } :root[data-theme="dark"]{color-scheme:dark} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} /* Pas de zoom au double-toucher sur les boutons (+/− des quantités) — le pourquoi est écrit dans vitrine.css ; le pincement reste permis. */ html,button,a,input,select,label,[role=button],[onclick]{touch-action:manipulation} body{font-family:var(--sans);background:var(--bg);color:var(--text); font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:0;cursor:pointer} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} [hidden]{display:none!important} /* L'ÉCHELLE. Six tailles, et aucune n'est décorative : chacune répond à une question différente. Le tracking négatif ne vit que sur les deux plus grandes — en dessous de 17 px il resserre sans rien gagner. */ .t-titre{font-size:22px;font-weight:600;letter-spacing:-.4px;line-height:1.2} .t-sec{font-size:17px;font-weight:600;letter-spacing:-.2px;line-height:1.25} .t-nom{font-size:16px;font-weight:500;line-height:1.3} .t-corps{font-size:15px;font-weight:400} .t-meta{font-size:14px;font-weight:400;color:var(--text2)} .t-mini{font-size:12px;font-weight:400;color:var(--text2)} /* LE BOUTON D'ACTION. Noir, plat, 52 px, une seule par écran. Il ne brille pas : il s'enfonce, et c'est la courbe « réponse » d'Uber qui le fait. */ .fs-go{display:flex;align-items:center;justify-content:center;gap:8px;width:100%; min-height:52px;padding:0 20px;border-radius:var(--r-pill); background:var(--ink);color:var(--ink-on);font-size:16px;font-weight:600; transition:transform .1s var(--ease-rep),opacity .15s var(--ease-io)} .fs-go:active{transform:scale(.985)} .fs-go[disabled],.fs-go[aria-disabled="true"]{background:var(--surface2);color:var(--text3); cursor:default;transform:none} /* Le bouton secondaire : un contour, jamais un deuxième aplat. Deux aplats sur le même écran, et on ne sait plus lequel est l'action. */ .fs-2e{display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:44px;padding:0 18px;border-radius:var(--r-pill); border:1px solid var(--line);background:transparent;font-size:15px;font-weight:500; transition:background .15s var(--ease-io)} .fs-2e:active{background:var(--surface)} /* LA PASTILLE. 36 px — la hauteur d'Uber, mesurée sur leurs captures. Elle était à 44 px chez nous, avec un contour doré et un compteur en gras. */ .fs-chip{display:inline-flex;align-items:center;gap:6px;flex:none;height:36px; padding:0 14px;border-radius:var(--r-pill);background:var(--surface); font-size:14px;font-weight:500;color:var(--text);white-space:nowrap; transition:background .15s var(--ease-io)} .fs-chip:active{background:var(--surface2)} .fs-chip[aria-pressed="true"],.fs-chip.on{background:var(--sel);color:var(--sel-on)} /* LE SEGMENT. Le seul autre usage de la pilule. Pas de curseur qui glisse : un aplat qui se déplace attire l'œil sur le contrôle au lieu du contenu. */ .fs-seg{display:flex;padding:3px;border-radius:var(--r-pill);background:var(--surface); height:40px} .fs-seg button{flex:1;border-radius:var(--r-pill);font-size:14px;font-weight:500; color:var(--text2);transition:background .18s var(--ease-io),color .18s var(--ease-io)} .fs-seg button.on{background:var(--surface2);color:var(--text);box-shadow:none;font-weight:600} /* LE CHAMP. Gris plein, aucun contour — le contour et le fond gris ensemble font deux fois le même travail. Le contour n'apparaît qu'au focus. */ .fs-champ{width:100%;min-height:46px;padding:12px 14px;border-radius:var(--r); background:var(--surface);border:1px solid transparent;font-size:15px} .fs-champ::placeholder{color:var(--text3)} .fs-champ:focus{outline:none;background:var(--bg);border-color:var(--text)} /* LA LIGNE. Un filet, jamais une carte. Douze cartes empilées avec un rayon et une ombre chacune, c'est douze objets séparés là où il y a une seule liste. */ .fs-ligne{display:flex;gap:12px;align-items:flex-start;padding:14px 0; border-bottom:1px solid var(--line)} .fs-ligne:last-child{border-bottom:0} /* Les deux pastilles d'état. Elles disent un fait, pas une ambiance. */ .fs-ok{color:var(--good)} .fs-no{color:var(--bad)} :focus-visible{outline:2px solid var(--text);outline-offset:2px;border-radius:4px} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ── LE PARCOURS DE CONNEXION (`FSCompte.parcours`, compte-eats.js) ──────── Une seule fois pour les deux pages, depuis le 23 sept. 2026 : c'était deux copies. La forme est celle d'Uber Eats, relevée capture par capture — une question par écran, le champ d'abord, « Continuer » en pleine largeur, « ou » puis Google, le code en cases, la flèche de retour ronde à gauche et « Suivant → » à droite. La couleur, elle, reste la nôtre : l'or ne va qu'à l'action, la lueur qu'à ce qu'on remplit. `.fs-cp .fs-cp-t` ET PAS `.fs-cp-t` SEUL : l'annuaire habille déjà tout `h3` d'une feuille (`.ov h3`, plus fort qu'une classe seule). Monter d'une classe suffit, sans toucher à la règle de la page. */ /* UNE COLONNE ÉTROITE ET CENTRÉE, comme chez Uber : sur ordinateur la feuille de la page de commande fait 560 px, et les six cases se tassaient à gauche pendant que « Suivant » partait au bout de la ligne. */ .fs-cp{display:flex;flex-direction:column;gap:14px;width:100%;max-width:420px;margin:0 auto} .fs-cp .fs-cp-t{font-family:var(--serif);font-size:24px;font-weight:500;line-height:1.22; letter-spacing:-.3px;color:var(--text);margin:4px 0 0} .fs-cp-dest{display:block;margin-top:4px;font-family:var(--sans);font-size:17px;font-weight:600; color:var(--ink);word-break:break-all} .fs-cp-s{font-size:14px;line-height:1.5;color:var(--text2);margin:-4px 0 0} .fs-cp-l{font-size:13px;font-weight:500;color:var(--text2);margin:2px 0 -8px} .fs-cp-err{font-size:13.5px;font-weight:500;color:var(--bad);margin:-2px 0 0} .fs-cp-ou{display:flex;align-items:center;gap:12px;color:var(--text3);font-size:12px;font-weight:500} .fs-cp-ou::before,.fs-cp-ou::after{content:'';flex:1;height:1px;background:var(--line)} .fs-cp-google{display:flex;justify-content:center} .fs-cp-google:empty{display:none} .fs-cp-fin{font-size:12px;line-height:1.55;color:var(--text3);margin-top:4px} .fs-cp-fin a{color:var(--text2);text-decoration:underline;text-underline-offset:2px} /* LE CONSENTEMENT (25 sept. 2026) : une phrase lisible, pas un astérisque — `--text2` et non `--text3`, parce qu'elle engage le client. */ .fs-cp-consent{font-size:12.5px;line-height:1.5;color:var(--text2);margin:2px 0 0} .fs-cp-consent a{color:var(--text);text-decoration:underline;text-underline-offset:2px} /* L'HISTORIQUE D'UN COMPTE (`FSCompte.historique`) : une ligne par commande, un filet entre deux, « Voir » en lien et « Recommander » en pastille. */ .fs-hist{margin-top:18px} .fs-hist-t{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:4px} .fs-hist-l{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)} .fs-hist-l:last-child{border-bottom:0} .fs-hist-i{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.35} .fs-hist-i b{font-size:14.5px;font-weight:600;color:var(--text)} .fs-hist-i span{font-size:13px;color:var(--text2)} .fs-hist-v{flex:none;font-size:13.5px;color:var(--text2);text-decoration:underline;text-underline-offset:2px} .fs-hist .fs-chip{background:var(--surface2)} /* LES CASES DU CODE. Six, à la largeur du doigt ; celle qu'on remplit prend la lueur de l'action — la seule lueur de l'écran. */ .fs-cp-cases{display:flex;gap:8px} .fs-cp-case{flex:1;min-width:0;max-width:52px;height:58px;border-radius:var(--r); background:var(--surface2);border:1px solid var(--line);text-align:center; font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text); caret-color:var(--ink);transition:border-color .15s var(--ease-io),box-shadow .15s var(--ease-io)} .fs-cp-case:focus{outline:none;border-color:var(--ink);box-shadow:var(--halo-doux)} /* « Renvoyer » garde sa taille de pastille : dans une colonne, un enfant s'étire sur toute la largeur et devient un deuxième bouton d'action. LA PASTILLE ET LES CHAMPS MONTENT D'UN PALIER. La feuille de l'annuaire est déjà `--surface` : un champ ou une pastille au même palier y devient invisible — seul le texte flottait. Un élément posé sur un autre monte d'un palier (la règle des paliers, en tête de ce fichier). */ .fs-cp>.fs-chip{align-self:flex-start;background:var(--surface2)} .fs-cp .fs-champ{background:var(--surface2)} .fs-cp-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px} .fs-cp-nav.fin{justify-content:flex-end} .fs-cp-nav .fs-go{width:auto;padding:0 26px} .fs-cp-rond{flex:none;width:52px;height:52px;border-radius:50%;background:var(--surface2); color:var(--text);font-size:20px;display:flex;align-items:center;justify-content:center; transition:background .15s var(--ease-io)} .fs-cp-rond:active{background:var(--line)} /* ── LE COIN FR/EN D'`i18n.js` ───────────────────────────────────────────── Il est peint en dur pour un fond noir dans `i18n.js` (`rgba(12,17,32,.9)`), ce qui nous va — SAUF son bouton actif, qui prend `var(--gold)` : ce jeton n'existe plus ici. On ne redéfinit donc que ce qui casserait. LE `html` EN TÊTE N'EST PAS DE LA SUPERSTITION : `i18n.js` injecte son