/* Sizzle — direction visuelle du § 11. Entre Pinterest, le carnet de cuisine et le magazine culinaire. Jamais un dashboard fitness : pas de néon, pas de dégradé violet. */ /* Palette de marque. Les cinq premières valeurs viennent de la charte ; les autres en sont dérivées pour couvrir les besoins d'interface (texte secondaire, filets, alertes) sans introduire de teinte étrangère. */ :root { --cream: #F7ECDF; /* fond — le beige de l’accueil sur toutes les pages, 14/09 */ --sand: #DCC9AE; /* aplats secondaires */ --terra: #C65A2E; /* accent principal */ /* ⚠️ **Le brun profond est passé à la terre cuite du logo — 12/09.** Même jeton, donc tout ce qui l'employait suit : liens, icônes des raccourcis, onglet actif. */ --cinnamon: #A94A2A; /* terre cuite profonde */ --sage: #7C8B63; /* vert */ /* ⚠️ **Le seul bleu de la palette, et il ne sert qu'à l'eau — 04/09.** Tout le reste est chaud (crème, terre, cannelle, sauge) ; le bleu est ce qui dit « eau » sans un mot, et c'est la seule raison de l'introduire. Désaturé exprès pour tenir à côté de la terre, plutôt que le bleu franc de la maquette qui y jurerait. ⛔ Ne pas s'en servir pour autre chose : un accent qui désigne deux choses n'en désigne plus aucune. */ --bleu: #4F7CA6; /* eau, et rien d'autre */ --card: #FFFFFF; /* La barre d'onglets porte le beige du fichier « footer Navbar » (12/09), mesuré sur la bande : ni `--card` (trop blanc) ni `--cream` (le fond des pages, sur lequel elle doit se lire). Opaque — § 6. Et c'est ce beige exact que porte le contour de la cocotte du ➕, découpée avec lui : sur la barre le liseré se fond, au-dessus d'elle il détache le dessin du contenu qui défile. */ --barre: #FEFAF3; /* Les cœurs, partout : pastille allumée, carte des favoris, coin de photo. */ --coeur: #A94A2A; /* Le pied du bandeau d'accueil — c'est lui qui prolonge l'image vers le bas. */ --accueil-fond: #F7ECDF; /* L'encadré « Une idée pour ce soir » — la couleur donnée par Luca le 13/09. ⚠️ **Le texte y change de couleur, et c'est mesuré** : la cannelle y rend 3,15 de contraste et le gris 2,2 — sous la barre AA. Brun sombre et terre profonde y rendent 5,75 et 5,11. */ --idee-fond: #BFC689; --idee-texte: #4A3E33; --idee-lien: #7A3118; --espresso: #2E241D; --muted: #8C7F70; --line: #E7DCCA; --amber: #D9A441; --danger: #A6412F; /* ── Le bouton plein a ses propres jetons — R05, 21/09 ───────────────────── ⛔ **`--cinnamon` est une couleur de *texte*, pas un fond de bouton.** Le jeton a été éclairci pour le thème sombre le 10/09, parce qu'un brun foncé ne se lit pas sur du chocolat ; `.btn-primary` s'en servait comme fond, et le libellé blanc du bouton « Analyser » de P14 tombait alors à **2,19:1** en sombre. Une couleur qui sert de fond *et* d'encre doit aller dans deux directions à chaque changement de thème : elle finit par en rater une. → **Deux jetons, et le couple se mesure.** `--bouton-fond` reste terre cuite dans les deux thèmes ; `--bouton-texte` est ce qui se lit dessus. Relevé sur les couleurs calculées : 5,68:1 en clair, 4,99:1 en sombre, et le fond garde 5,68:1 / 3,16:1 avec la carte qui le porte — un bouton doit aussi se voir avant de se lire. ⚠️ **Le libellé grisé n'est plus un blanc à 55 %.** `opacity` mélangeait le blanc au terre cuite et donnait 2,3:1 : un bouton d'attente qu'on ne sait plus lire. L'état inactif a donc son propre couple, franchement plus pâle que le bouton actif (donc reconnaissable d'un coup d'œil) et lisible — 4,83:1 en clair, 5,02:1 en sombre. */ --bouton-fond: #A94A2A; --bouton-texte: #FFFFFF; --bouton-inactif-fond: #E7DCCA; --bouton-inactif-texte: #6B5B45; /* L'encre des commandes **sans** fond plein : `.btn-ghost`, `.chip` au repos, les onglets. ⛔ **Ce n'est pas `--muted`.** Le gris des textes secondaires rendait 3,90:1 sur la carte et 3,75:1 sur la barre d'onglets : lisible pour une phrase d'appoint, pas pour le mot qui *est* le bouton. Même famille, assez foncée pour être lue : 6,55:1 sur la carte, 6,29:1 sur la barre, 6,21:1 en thème sombre. */ --bouton-second-texte: #6B5B45; /* Le rouge qui s'écrit n'est pas le rouge qui se remplit — même partage que dans `admin.css`. `--danger` reste un fond de pastille ; posé en texte sur la carte sombre il tombait à 2,57:1 (« Retirer » de la relecture). */ --danger-texte: #A6412F; /* Le vert de « valider la relecture » : `--sage` rendait 3,66:1 sous du blanc. Même famille, assez foncé pour porter une encre claire — 6,69:1 en clair, 4,74:1 en sombre. */ --bouton-valide-fond: #556042; /* ── Le carnet : les jetons des menus C01–C30 — DA01, 21/09 ──────────────── La direction demandée par Luca (`design/nouveau-visuel/CADRE_MENUS.md`) est une **surface** propre aux feuilles : papier ivoire, cartes distinctes à filet pêche, sauge pour la sélection. Ce n'est pas la palette des écrans — ceux-ci gardent `--cream` / `--card` — et c'est voulu : une fenêtre qui se pose par-dessus une page doit s'en détacher. D'où un jeu **préfixé**, posé ici et redéfini dans les deux blocs sombres, plutôt que trente valeurs recopiées feuille par feuille (le cadre l'interdit explicitement). ⚠️ **Le papier sombre est plus foncé que les `#302820` du cadre, et c'est une mesure, pas un goût.** Le pied d'une feuille porte `.btn-primary`, dont le fond `--bouton-fond` (#BC4C2B en sombre) doit garder 3:1 contre ce qui l'entoure — R05 : un bouton se voit avant de se lire. Sur #302820 il tombe à **2,90:1** ; sur #2B231C il rend **3,09:1**. Les cartes gardent l'écart annoncé avec le papier. */ --carnet-papier: #FFF9F1; --carnet-papier-bas: #FBF1E5; --carnet-carte: #FFFDF8; --carnet-filet: #ECDCCB; --carnet-filet-vif: #CFA789; /* survol et pointeur, jamais un état */ /* Cacao : 11,13:1 sur la carte, 10,82:1 sur le papier. Il remplace `--espresso` **dans les feuilles seulement** — l'encre d'un carnet est brune, celle d'un écran reste celle des écrans. */ --carnet-encre: #513329; /* Le sous-texte d'une carte : 5,43:1 sur la carte, 5,28:1 sur le papier. ⛔ Pas `--muted` (3,84:1 sur la carte ivoire). */ --carnet-encre-douce: #786558; /* La sélection — bascule active, cran retenu, option courante. L'encre du carnet y rend 9,55:1, son sous-texte 4,66:1, le trait sauge 5,19:1. */ --carnet-sauge: #E9EEDB; --carnet-sauge-trait: #53683C; --carnet-sauge-filet: #A0AC83; --carnet-ombre: 0 14px 34px rgba(58, 38, 27, .18); /* Le rouge **qui se remplit** — le bouton d'une suppression, pas le mot rouge (`--danger-texte`). `--danger` seul ne suffisait pas : il n'est pas redéfini en sombre et rendait 2,51:1 contre le papier brun, soit un bouton de suppression qu'on ne voit plus. Le couple est mesuré dans les deux thèmes — 6,14:1 / 5,87:1 en clair, 5,47:1 / 5,16:1 en sombre. */ --danger-fond: #A6412F; --danger-fond-texte: #FFFFFF; --radius: 22px; --shadow: 0 10px 30px rgba(48, 41, 35, .07); --tabbar-h: 68px; /* Largeur de la colonne de l'app. Un jeton et non un nombre recopié : tout ce qui se pose en `position: fixed` doit se recadrer dessus, et une seconde valeur écrite en dur ailleurs finirait par en dévier. */ --app-w: 720px; /* Largeur du rail de navigation, **nulle tant qu'il n'existe pas**. C'est ce qui permet au recadrage des couches fixes ci-dessous de s'écrire une seule fois : sur téléphone il vaut zéro et la formule se réduit au centrage d'avant, sur ordinateur il décale tout ce qui est fixe de la même quantité que la colonne. Une seconde formule pour le grand écran aurait divergé au premier ajout — c'est la leçon de `--app-w` lui-même. */ --rail-w: 0px; /* Largeur de lecture d'un écran, et **elle n'est pas celle de la coque**. Un écran qui liste (recettes, journal, courses) se remplit sur toute la largeur ; un écran qui se lit ou se remplit (objectif, édition, relecture) ne doit pas s'étirer avec la fenêtre — une ligne de saisie de 1 100 px et un paragraphe de 180 caractères ne se lisent plus. Le défaut vaut donc la coque entière, et le registre du § « tablette et bureau » nomme les écrans qui la réduisent. */ --lecture-w: var(--app-w); /* ── Une seule écriture pour toute l'interface — R12, 21/09 ──────────────── Demande de Luca : la police du cadran des macros (`.mleg-nom`) partout. Elle **remplace** l'ancien couple serif de titre / sans d'interface, qui faisait cohabiter trois écritures sur un même écran. `--serif` et `--sans` restent définis juste en dessous, pointant ici : c'est le filet de sécurité d'une déclaration oubliée ailleurs ou d'un style posé en JavaScript — sans lui, un coin de l'application resterait en Palatino sans que rien ne le dise. ⛔ Ne plus les employer dans du code neuf. Le repli n'est pas une deuxième écriture manuscrite : les polices manuscrites du système (Segoe Script, Bradley Hand) n'ont ni le même dessin ni la même largeur, et l'interface changerait de personnalité selon l'appareil. C'est la pile système d'avant, **remise à l'échelle** par `size-adjust` pour que les tailles calibrées pour Caveat ne deviennent pas énormes le temps du chargement, ou définitivement si la fonte échoue. */ --ecriture: "Caveat Gourde", "Sizzle repli", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --serif: var(--ecriture); /* ⛔ hérité, ne plus employer */ --sans: var(--ecriture); /* ⛔ hérité, ne plus employer */ /* ── L'échelle de texte, calibrée pour Caveat ─────────────────────────────── Les tailles de la pile système ne se recopient pas : le cadre des menus le dit, « le manuscrit à 12,5 px serait trop petit ». La correspondance appliquée aux 946 déclarations existantes est compressive — ×1,50 jusqu'à 16 px, puis `24 + 0,60·(s−16)` jusqu'à 30 px, puis ×1,08 —, calibrée sur les valeurs déjà écrites en Caveat ici (`.puces-jour button` : 14 px système → 22 px Caveat) et sur la table du cadre des menus. Ces jetons nomment les degrés obtenus, pour que la direction artistique des menus (DA01) compose avec une échelle et non trente valeurs libres. ⚠️ Ce sont des **degrés**, pas un `!important` : une règle plus précise garde le dernier mot, et la hiérarchie des écrans existants est conservée. */ --t-titre: 32.5px; /* titre d'écran ou de feuille (30–34 au cadre) */ --t-titre-sec: 27.5px; /* titre de section */ --t-carte: 24px; /* texte d'une carte, libellé d'une commande */ --t-carte-sous: 20px; /* sous-texte d'une carte */ --t-corps: 22.5px; /* corps de texte, formulaire */ --t-champ: 24px; /* saisie — ⚠️ jamais sous 16 px (zoom iOS) */ --t-appoint: 19.5px; /* mention secondaire, aide, unité d'une liste */ --t-micro: 16.5px; /* étiquette minuscule ; plancher de l'échelle */ --t-nombre: 43px; /* le nombre qu'on vient lire (36–48 au cadre) */ --t-unite: 24px; /* son unité, posée à côté */ /* Caveat monte plus haut et descend plus bas qu'une linéale : l'interligne absolu d'avant suffit, il n'a pas à croître avec la taille. */ --lh-titre: 1.1; --lh-carte: 1.2; --lh-corps: 1.3; /* 400 est fin pour une écriture manuscrite à petite taille ; 500 est le poids de lecture, 600–700 restent l'accent. ⚠️ Et pas 600 par défaut : au-delà, les bancs de contraste basculent sur le seuil « grand texte » (3:1), qui n'est pas celui d'un libellé. */ --g-corps: 500; --g-accent: 600; --g-titre: 700; } /* ── La fonte, servie par le dépôt ───────────────────────────────────────────── Aucune requête à Google Fonts : le fichier est dans `frontend/fonts/`, la CSP n'autorise que `font-src 'self'`, et la licence OFL est conservée à côté. ⚠️ **`?v=` à la main, et c'est nécessaire.** `ASSET_VERSION` ne s'applique qu'aux URL écrites dans les documents HTML (`index.html`, `admin.html`, `sw.js`) ; celle-ci est dans la feuille de style, donc elle ne serait jamais invalidée. Le sous-ensemble a été étendu le 21/09 (`œ Œ ’ « » – … € ≈ ≤ ≥`, accents, fractions) **sous le même nom de fichier** : sans ce compteur, un navigateur qui avait déjà la version U+0020–00FF continuerait d'afficher le repli système sur ces caractères. Incrémenter à chaque régénération de la fonte, et le noter dans `fonts/caveat/README.md`. */ @font-face { font-family: "Caveat Gourde"; src: url("/static/fonts/caveat/caveat-latin.woff2?v=2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } /* Le repli, à l'échelle de Caveat. Toutes les tailles de cette feuille sont calibrées pour une manuscrite étroite ; rendues avec une linéale, elles seraient 1,5 fois trop grosses et l'application se disloquerait pendant le chargement (`swap`) ou pour de bon si la fonte n'arrive pas. `size-adjust` rend au repli l'échelle qu'il avait avant R12. ⚠️ `local()` seulement : aucun téléchargement, aucune requête externe. Si aucun de ces noms n'existe, la face est invalide et la pile de `--ecriture` passe simplement au suivant — `system-ui`, sans ajustement. */ @font-face { font-family: "Sizzle repli"; src: local("Helvetica Neue"), local("Roboto"), local("Segoe UI"), local("Arial"), local("DejaVu Sans"), local("Liberation Sans"); size-adjust: 67%; } /* Le gras du repli : sans cette seconde face, un `font-weight: 700` demandé à une face déclarée sur toute la plage sortirait en maigre. Déclarées à 400 et 700, les deux laissent le navigateur choisir — et synthétiser si le système n'a que la romaine. */ @font-face { font-family: "Sizzle repli"; src: local("Helvetica Neue Bold"), local("Roboto Bold"), local("Segoe UI Bold"), local("Arial Bold"), local("DejaVu Sans Bold"), local("Liberation Sans Bold"); size-adjust: 67%; font-weight: 700; } /* Mode sombre en tons chocolat, jamais en gris neutre (§ 11). Trois états : choix explicite clair, choix explicite sombre, et défaut système. Les tokens sont définis en clair sur :root nu, puis redéfinis pour chacun des deux cas sombres — sinon le bascule ne gagne que dans un sens. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cream: #1F1813; --card: #2A211A; --espresso: #F3EADD; --muted: #B0A08D; --line: #3C3027; --sand: #6B5B45; --terra: #D9743F; --sage: #93A278; --bleu: #7FA9CE; /* ⚠️ **Le brun profond manquait à la palette sombre.** Mesuré le 10/09 : « Explorer les recettes » rendait **1,71** de contraste sur le bandeau de découverte — un brun foncé sur du chocolat ne se lit pas. Il n'était pas redéfini ici alors que la terre, la sauge et le bleu l'étaient : le trou ne s'était pas vu parce qu'aucun texte de cette couleur n'occupait encore une place où on le cherche. */ --cinnamon: #E0A276; --coeur: #D9743F; --accueil-fond: #1F1813; --idee-fond: #3B4029; --idee-texte: #D9CFB9; --idee-lien: #E0A276; --barre: #2A211A; /* R05 : le bouton reste terre cuite, mais un ton qui porte du blanc. ⛔ Ce n'est pas `--cinnamon` : lui est passé à la pêche claire pour être lu *sur* le chocolat, ce qui est l'inverse du besoin d'un fond. */ --bouton-fond: #BC4C2B; --bouton-inactif-fond: #3C3027; --bouton-inactif-texte: #B0A08D; --bouton-second-texte: #B0A08D; /* ⚠️ **#E0785F rendait 4,49:1 sur la carte du carnet — mesuré au banc du 21/09 (03d-1), sur sept entrées « Supprimer… ».** La carte ivoire du carnet sombre (#372D25) est plus claire que la carte des écrans (#2A211A), où le même rouge tenait 5,28:1 : le passage des menus au papier a mangé le centième qui manquait. Ce ton-ci rend **5,10:1** sur la carte du carnet, 5,87 sur son papier et 5,99 sur la carte des écrans — il améliore les trois. ⛔ **Et `--danger-fond` ne bouge pas** : c'est un rouge de remplissage, mesuré avec son encre brune (5,47:1 / 5,16:1). Les deux portaient la même valeur par coïncidence ; les confondre aurait déplacé un bouton pour corriger un mot. */ --danger-texte: #E68669; --bouton-valide-fond: #6A7854; /* Le carnet en sombre — DA01. Papier brun, cartes un ton au-dessus, filet chaud. Le papier est plus foncé que le #302820 du cadre pour que le fond du bouton principal garde ses 3:1 (voir le bloc clair). */ --carnet-papier: #2B231C; --carnet-papier-bas: #262019; --carnet-carte: #372D25; --carnet-filet: #5B4A3E; --carnet-filet-vif: #7A6453; --carnet-encre: #FFF3E4; --carnet-encre-douce: #D8C4AD; --carnet-sauge: #3F4A2E; --carnet-sauge-trait: #D4E2B5; --carnet-sauge-filet: #6D7F4E; --carnet-ombre: 0 14px 34px rgba(0, 0, 0, .45); /* ⚠️ **Un fond clair porte une encre foncée**, jamais le blanc du thème clair : c'est la règle du cadre pour le sombre, et c'est ce que le calcul dit — #FFFFFF sur cette pêche ne rendrait que 1,69:1. */ --danger-fond: #E0785F; --danger-fond-texte: #2E1B16; --shadow: 0 10px 30px rgba(0, 0, 0, .32); } } :root[data-theme="dark"] { --cream: #1F1813; --card: #2A211A; --espresso: #F3EADD; --muted: #B0A08D; --line: #3C3027; --sand: #6B5B45; --terra: #D9743F; --sage: #93A278; --bleu: #7FA9CE; /* ⚠️ **Le brun profond manquait à la palette sombre.** Mesuré le 10/09 : « Explorer les recettes » rendait **1,71** de contraste sur le bandeau de découverte — un brun foncé sur du chocolat ne se lit pas. Il n'était pas redéfini ici alors que la terre, la sauge et le bleu l'étaient : le trou ne s'était pas vu parce qu'aucun texte de cette couleur n'occupait encore une place où on le cherche. */ --cinnamon: #E0A276; --coeur: #D9743F; --accueil-fond: #1F1813; --idee-fond: #3B4029; --idee-texte: #D9CFB9; --idee-lien: #E0A276; --barre: #2A211A; /* R05 : le bouton reste terre cuite, mais un ton qui porte du blanc. */ --bouton-fond: #BC4C2B; --bouton-inactif-fond: #3C3027; --bouton-inactif-texte: #B0A08D; --bouton-second-texte: #B0A08D; /* ⚠️ **#E0785F rendait 4,49:1 sur la carte du carnet — mesuré au banc du 21/09 (03d-1), sur sept entrées « Supprimer… ».** La carte ivoire du carnet sombre (#372D25) est plus claire que la carte des écrans (#2A211A), où le même rouge tenait 5,28:1 : le passage des menus au papier a mangé le centième qui manquait. Ce ton-ci rend **5,10:1** sur la carte du carnet, 5,87 sur son papier et 5,99 sur la carte des écrans — il améliore les trois. ⛔ **Et `--danger-fond` ne bouge pas** : c'est un rouge de remplissage, mesuré avec son encre brune (5,47:1 / 5,16:1). Les deux portaient la même valeur par coïncidence ; les confondre aurait déplacé un bouton pour corriger un mot. */ --danger-texte: #E68669; --bouton-valide-fond: #6A7854; /* Le carnet en sombre — DA01. Papier brun, cartes un ton au-dessus, filet chaud. Le papier est plus foncé que le #302820 du cadre pour que le fond du bouton principal garde ses 3:1 (voir le bloc clair). */ --carnet-papier: #2B231C; --carnet-papier-bas: #262019; --carnet-carte: #372D25; --carnet-filet: #5B4A3E; --carnet-filet-vif: #7A6453; --carnet-encre: #FFF3E4; --carnet-encre-douce: #D8C4AD; --carnet-sauge: #3F4A2E; --carnet-sauge-trait: #D4E2B5; --carnet-sauge-filet: #6D7F4E; --carnet-ombre: 0 14px 34px rgba(0, 0, 0, .45); /* ⚠️ **Un fond clair porte une encre foncée**, jamais le blanc du thème clair : c'est la règle du cadre pour le sombre, et c'est ce que le calcul dit — #FFFFFF sur cette pêche ne rendrait que 1,69:1. */ --danger-fond: #E0785F; --danger-fond-texte: #2E1B16; --shadow: 0 10px 30px rgba(0, 0, 0, .32); } * { box-sizing: border-box; } /* `display: flex` ou `grid` dans une règle de classe l'emporte sur la valeur par défaut de l'attribut `hidden`, qui n'est qu'un `display: none` de la feuille de style du navigateur. Sans ce garde-fou, tout élément masqué en JS mais mis en flex reste visible — c'est ce qui affichait « Filtres : » sans aucun filtre actif. */ [hidden] { display: none !important; } /* ⚠️ **Sur l'accueil, le fond de la page est blanc — 12/09.** Safari sur iOS récent ignore `theme-color` et peint la zone de l'heure et de la batterie avec le fond du document ; c'est aussi lui qu'on voit en tirant l'écran vers le bas. Le haut du bandeau d'accueil étant blanc, le crème y dessinait une bande. La classe est posée par `barreEtat`, et chaque page du carrousel porte son propre fond pour que ce blanc ne se voie nulle part ailleurs. */ html.sur-accueil, html.sur-accueil body { background: #FFFFFF; } body { margin: 0; background: var(--cream); color: var(--espresso); font-family: var(--ecriture); font-size: var(--t-champ); font-weight: var(--g-corps); /* ⚠️ **1,55 devenait 1,55 × 1,5 — R12.** L'interligne est un multiple de la taille : la remise à l'échelle de la fonte l'aurait multiplié lui aussi, et chaque paragraphe aurait pris deux fois la hauteur d'avant. Caveat monte et descend beaucoup, mais son encre tient dans 0,92 em : 1,3 lui laisse de l'air et rend à un paragraphe une hauteur proche de celle de l'ancienne linéale à 1,55. */ line-height: var(--lh-corps); -webkit-font-smoothing: antialiased; /* Deuxième des quatre verrous d'échelle (voir la balise `viewport`), et il en fait deux à lui seul. `pan-x pan-y` autorise exactement les deux gestes dont l'app a besoin — le défilement vertical d'une page, le glissement horizontal du carrousel — et **rien d'autre** : ni pincement, ni double-tap pour zoomer, puisque ce dernier n'est conservé que pour `auto` et `manipulation`. Et non `manipulation`, qui laisse passer le pincement : il fallait alors le refuser en JavaScript, par un écouteur `touchmove` non passif sur `document` — c'est-à-dire en s'interposant à chaque déplacement de doigt, ce qui faisait accrocher le défilement de toute l'application. La règle CSS obtient le même verrou sans jamais se mettre sur le chemin du geste. */ touch-action: pan-x pan-y; } /* Le zoom d'un onglet en arrière-plan, ou un iPhone tourné en paysage, fait grossir les textes longs de son propre chef. Sur une coque à hauteur fixe, ça déborde toutes les barres. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Le défilement quitte la fenêtre pour descendre dans chaque page. C'est ce qui permet au carrousel de faire glisser deux pages côte à côte : tant que c'était la fenêtre qui défilait, on ne pouvait pas en montrer deux à la fois sans perdre la position de lecture de la première. */ html, body { height: 100%; } body { overflow: hidden; } #app { max-width: var(--app-w); margin: 0 auto; height: 100vh; height: 100dvh; /* barres d'adresse mobiles comprises */ display: flex; flex-direction: column; overflow: hidden; /* M01, 21/09 — la bande « Pas de connexion » **pousse** la colonne au lieu de la couvrir : posée par-dessus, elle interceptait les quatre boutons de la couverture d'une fiche (banc des menus, D1). `--hors-reseau-h` vaut la hauteur mesurée de la bande tant qu'elle paraît, rien sinon (`peindreHorsReseau`). */ padding-top: var(--hors-reseau-h, 0px); } .screen[hidden] { display: none; } /* ── Recadrage des couches fixes ───────────────────────────────────────────── `position: fixed` se calcule sur la **fenêtre**, jamais sur l'ancêtre : une couche posée comme ça ignore le `max-width` de `#app` et s'étale sur tout l'écran. La barre d'onglets faisait 1280 px de large devant une colonne de 720, ses cinq cellules réparties sur la fenêtre entière : l'accueil se retrouvait à gauche du contenu, le profil à droite, et seul le ➕ tombait encore en face de quelque chose. Le mode cuisine et le scan d'assiette, eux, couvraient toute la page pendant que le reste de l'app restait en colonne. Un seul recadrage, appliqué partout où il manquait. Les fonds de feuille en sont exclus à dessein : un voile ne couvre pas une colonne, il couvre l'écran, sinon on voit la page vive de chaque côté. */ /* Le bandeau de mise à jour. Fixe, donc **recadré** comme les autres couches fixes : sans ça il ferait 1280 px de large devant une colonne de 720 (§ 2). Posé en haut parce que le bas appartient à la barre d'onglets, et discret — c'est une information, pas une alerte : rien n'est cassé, la page est seulement en retard. */ .maj-dispo { /* Au-dessus de **tout**, y compris de l'écran de connexion et des feuilles : c'est la seule couche qui ne parle pas du contenu mais de l'application elle-même. Vu à la vérification — posée à 60 comme `.auth-wrap`, elle passait dessous et n'existait que dans le DOM. */ position: fixed; top: 0; z-index: 70; border: none; border-radius: 0 0 12px 12px; padding: 9px 14px; font: inherit; font-size: 19.5px; background: var(--espresso); color: var(--cream); box-shadow: 0 2px 10px rgb(0 0 0 / 18%); cursor: pointer; } /* ⚠️ **Sauf sous une fenêtre ouverte — revue du 21/09.** `isolerLeFond` la neutralise (`inert`) comme le reste du fond, et c'est voulu : recharger la page au milieu d'une saisie emporterait la saisie. Mais à z-index 70 elle restait peinte **au-dessus** du voile, parfaitement lisible et parfaitement morte — la pire des deux moitiés. Le `[inert]` que pose le socle sert ici de signal : elle repasse sous le voile (50) et sous la feuille (51). ⛔ Sans `display: none` : une bande qui disparaît puis revient à la fermeture est plus déroutante qu'une bande atténuée derrière le voile. */ .maj-dispo[inert] { z-index: 40; } /* La bande « pas de connexion » — P40, 20/09. Même bord et même rang que `.maj-dispo`, et c'est voulu : les deux parlent de l'application elle-même, pas du contenu. ⛔ **Elles ne s'affichent jamais ensemble** — le § *deux couches fixes au même bord se recouvrent* se règle ici par le code plutôt que par un décalage : « toucher pour recharger » hors ligne mènerait à la page de repli, donc ferait perdre l'application. C'est `peindreHorsReseau` qui tranche. ⚠️ **Pas de `position: sticky` dans `#app`** : la bande doit couvrir aussi l'écran de connexion et les feuilles, comme sa voisine. */ .hors-reseau { position: fixed; top: 0; z-index: 70; border-radius: 0 0 12px 12px; padding: 9px 14px; font-size: 19.5px; text-align: center; background: var(--espresso); color: var(--cream); box-shadow: 0 2px 10px rgb(0 0 0 / 18%); } /* ⚠️ **Et le centre n'est pas toujours celui de la fenêtre.** Dès qu'un rail de navigation occupe le bord gauche (§ « tablette et bureau »), la colonne de contenu n'est plus centrée sur l'écran mais sur ce qu'il en reste : une couche recadrée sur 50 % passerait à moitié sous le rail. `--rail-w` vaut zéro tant que le rail n'existe pas, donc la formule est **la même** sur téléphone — et c'est tout l'intérêt : une seconde règle pour le grand écran aurait oublié la couche suivante. */ .tabbar, .plate-screen, .cook-screen, .maj-dispo, .fs-panier, .hors-reseau { left: calc(50% + var(--rail-w) / 2); right: auto; transform: translateX(-50%); width: min(var(--app-w), calc(100% - var(--rail-w))); } /* ── Carrousel des onglets ───────────────────────────────────────────────── */ /* L'aimantation est native : le doigt entraîne la page en temps réel, le navigateur gère l'inertie, le rebond aux extrémités et la fluidité. Aucun JavaScript ne s'interpose — c'est ce qui fait la différence entre « ça bascule après coup » et « je pousse une carte ». */ #pager { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; /* Sans ça, arriver au bout du carrousel déclencherait le geste de retour du navigateur ou le rebond de la page. */ overscroll-behavior-x: contain; scrollbar-width: none; /* Indispensable, et pas seulement cosmétique : sans lui, Chrome mobile laisse le débordement horizontal des pages voisines élargir la fenêtre de mise en page — 977 px au lieu de 390 — puis **dézoome toute l'interface** pour la faire tenir. Tout l'écran rapetissait d'un facteur 2,5. Un `overflow: hidden` sur `html` ou `body` n'y change rien ; c'est le confinement de peinture qui empêche la propagation. */ contain: paint; } #pager::-webkit-scrollbar { display: none; } .pane { flex: 0 0 100%; width: 100%; min-width: 0; background: var(--cream); scroll-snap-align: start; /* Un élan ne saute pas trois onglets : on avance d'une page à la fois. */ scroll-snap-stop: always; /* `clip` et non `hidden`, et ce mot fait toute la différence : `hidden` crée malgré tout un conteneur de défilement horizontal, qui absorbe le geste et ne le transmet jamais au carrousel — la page ne bougeait pas d'un pixel. `clip` découpe sans devenir scrollable. Et on ne peut pas laisser l'axe en `visible` : accolé à un `auto` vertical, il se calcule en `auto`. Les trois valeurs se ressemblent, une seule fonctionne. */ overflow-y: auto; overflow-x: clip; overscroll-behavior-y: contain; padding: 28px 20px calc(var(--tabbar-h) + 32px); } /* Les écrans de détail vivent hors du carrousel et le recouvrent. */ .screen:not(.pane) { flex: 1; min-height: 0; overflow-y: auto; padding: 28px 20px calc(var(--tabbar-h) + 32px); } h1, h2, .kcal-value { font-family: var(--ecriture); font-weight: 400; } /* Cibles tactiles ≥ 44 px et focus visible — contrainte AA du § 11. */ button, input, textarea, select { font: inherit; } button { min-height: 44px; } /* ── La zone tactile, quand le dessin est plus petit qu'elle ───────────────── La ligne au-dessus est la contrainte AA du § 11, et quatre familles la réécrivent **à dessein** : une puce de filtre à 44 px de haut ferait des rangées deux fois plus épaisses, et un bouton-icône rond de 44 px écrase les en-têtes. Le dessin a raison ; ce qui a tort est que la **cible** lui soit égale — le doigt ne vise pas ce qu'il voit, il vise à peu près. D'où ce pseudo-élément : centré, transparent, il porte les 44 px que le doigt cherche **sans rien changer à la mise en page**, puisqu'il est hors du flux. Une pastille de 38 px se touche comme si elle en faisait 44, et l'écran est pixel pour pixel le même. Relevé au viewport iPhone 14, tous écrans démasqués : **119 cibles sous 44 px, dont 85 dans ces familles** — boutons-icônes (36 et 40 px), puces (38 et 40), avatar (42), boutons ronds (42), barre du plein écran (38), et les trois commandes posées sur la photo de fiche (40). ⛔ **Les liens de texte en sont exclus, et c'est voulu.** `.link-btn` porte `min-height: 0` depuis le § 8 : un lien posé dans une phrase n'est pas un bouton, et lui donner 44 px de zone lui ferait avaler les mots voisins — donc leur voler le tap. Ce que le § 8 interdit est l'inverse : poser en `.link-btn` une commande qui est un vrai bouton, comme la porte vers la pellicule l'a été. ⛔ **Et `.info-dot` non plus**, pour la même raison en pire : 20 px au fil du texte, sa zone déborderait de 12 px de chaque côté sur des mots cliquables. */ .icon-btn, .chip, .avatar-btn, .btn-round, .fs-bar-btn, .shop-more { position: relative; } /* ⚠️ `.hero-back`, `.hero-fav` et `.hero-menu` sont **déjà** `position: absolute` sur la photo : leur poser `relative` les décrocherait de leur coin. Un élément absolu est déjà le repère de ses enfants, ils n'ont donc rien à recevoir. */ /* ── Le second lot, 22/08 ────────────────────────────────────────────────── Relevé au banc, viewport iPhone 14, tous écrans démasqués : 61 cibles sous 44 px, dont **42 liens de texte** — exclus depuis le 19/08 et toujours, parce qu'une zone de 44 px autour d'un lien dans une phrase volerait le tap des mots voisins. Restaient 19 cibles réparties en sept familles ; les quatre traitées ici sont celles dont la zone déborde de **1 à 4 px seulement**, donc sans risque pour ce qui les entoure : | | Avant | Ce qui manquait | |---|---|---| | `.stepper button` (± portions, ×8) | 40×40 | 4 px | | `.segmented button` (×2) | 168×40 | 4 px de haut | | `.field-eye` | 36×44 | 8 px de large | | `#steps-more` | 42×44 | 2 px de large | **`.info-dot` (20×20, ×3) y est finalement**, et sur sa structure plutôt que sur une mesure au banc — les trois écrans qui la portent demandent un état qu'un compte jetable n'a pas (un objectif posé, une fiche calculée), et la mesure faite en démasquant tous les écrans à la fois ne vaut rien : elle superpose des écrans qui ne coexistent jamais. Ce qui tranche est que ses voisins **ne sont pas des cibles** : la pastille est frère d'un `` de texte dans `.today-goal-line`, dans `.kcal-line`, ou dans un `

`. Le risque nommé le 19/08 — « voler le tap des mots voisins » — vise un lien **dans une phrase**, pas une pastille en bout de ligne à côté de texte inerte. ⛔ **`.precision` (20×6) reste dehors, et c'est un refus assumé.** C'est une **bande**, pas un bouton : 6 px de haut, et une zone de 44 px déborderait de 19 px au-dessus, c'est-à-dire sur la ligne des kcal et sa propre pastille `#kcal-detail`. Deux zones qui se recouvrent se volent le tap l'une à l'autre — le défaut qu'on cherche à éviter, obtenu en le corrigeant. ⛔ **Et les trois `` non plus** — deux `.interrupteur` et `#veg-switch`. Un pseudo-élément ne s'applique pas à un élément **remplacé** : la règle passerait au vert dans la feuille et ne peindrait rien. */ .icon-btn::after, .chip::after, .avatar-btn::after, .btn-round::after, .fs-bar-btn::after, .hero-back::after, .hero-fav::after, .hero-menu::after, .hero-collect::after, .hero-share::after, .recipe-temps-plus::after, .stepper button::after, .segmented button::after, .field-eye::after, #steps-more::after, .info-dot::after, .cook-etape-lien::after, .plan-retirer::after, .shop-more::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max(100%, 44px); height: max(100%, 44px); } /* Troisième verrou d'échelle, et le seul qui traite la cause la plus fréquente. **iOS agrandit la page dès qu'on met au point un champ dont le texte fait moins de 16 px**, puis la laisse zoomée *et décalée* quand le clavier se referme — c'est le décentrage qu'on voyait sans comprendre d'où il venait. Ni `user-scalable=no` ni `touch-action` n'y changent quoi que ce soit : le seuil est sur la taille du texte, et rien d'autre. D'où ce plancher, qui vaut pour tous les champs de l'app. Les règles qui descendaient à 14 ou 15 px ont été remontées une par une plutôt que forcées ici : une seule déclaration de trop et les rangées de relecture, qui sont la grille la plus serrée de l'app, se seraient mises à déborder en silence. */ input, textarea, select { font-size: 24px; } :focus-visible { outline: 2.5px solid var(--terra); outline-offset: 2px; border-radius: 8px; } .hint { color: var(--muted); font-size: 20px; margin: 0 0 12px; } .form-error { margin: 12px 2px 0; color: var(--danger); font-size: 21px; } .link-btn { border: none; background: none; color: var(--cinnamon); cursor: pointer; padding: 4px 2px; font-size: 21px; min-height: 0; } .btn-primary { border: none; border-radius: 14px; cursor: pointer; background: var(--bouton-fond); color: var(--bouton-texte); padding: 11px 20px; font-weight: 600; } /* ⚠️ **Grisé, pas transparent** — R05. `opacity: .55` délavait le libellé *et* le fond dans la page : le blanc tombait à 2,3:1 sur le terre cuite éclairci, et le bouton « Analyser » en cours d'envoi devenait illisible au moment précis où il dit ce qu'il fait. Le couple inactif est franchement plus pâle que le bouton actif — on voit d'un coup d'œil qu'il ne répond pas — et il se lit encore. `cursor: progress` reste : ces boutons-là sont désactivés le temps d'un envoi. */ .btn-primary:disabled { background: var(--bouton-inactif-fond); color: var(--bouton-inactif-texte); cursor: progress; } .btn-ghost { border: 1.5px solid var(--line); background: transparent; color: var(--bouton-second-texte); border-radius: 999px; padding: 9px 20px; cursor: pointer; /* Certains porteurs de cette classe sont des liens et non des boutons — l'accès à l'administration en est un, parce qu'il change de page. Sans ces trois lignes, il sort souligné et plus bas que ses voisins, et se lit comme un objet d'une autre nature alors qu'il fait le même geste. */ text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; } /* ⚠️ **Le même refus de l'opacité pour les commandes sans fond — revue du 21/09.** Elle restait en sept endroits (`opacity: .35` à `.55`), et une encre délavée n'est pas mesurable comme un couple : à .35 le libellé d'un bouton de navigation du mode cuisine tombait sous 2:1 sur le crème. `--bouton-inactif-texte` est franchement plus pâle que l'encre active tout en restant lisible ; c'est le filet, lui, qui dit que la commande ne répond pas. */ .btn-ghost:disabled, .cook-nav .btn-ghost:disabled, .chip:disabled, .sheet-item:disabled, .link-btn:disabled, .identite-ligne .link-btn:disabled, .av-outil-go:disabled, #screen-bloques .bloque-debloquer:disabled { color: var(--bouton-inactif-texte); border-color: var(--line); background: var(--bouton-inactif-fond); } /* Une ligne de feuille et un lien nus n'ont pas de fond au repos : leur donner le fond inactif dessinerait une pastille là où il n'y a jamais eu de forme. */ .sheet-item:disabled, .link-btn:disabled, .identite-ligne .link-btn:disabled { background: none; } /* ── Authentification — P38, 19/09 ────────────────────────────────────────── Une couche fixe (§ 2 : elle est dans `PLEIN_ECRAN_ASSUME`, c'est un écran entier sans `#app`), qui porte deux choses : le welcome, et la carte des états. Une seule couche, une seule règle de recadrage : ce qui est ici ne se recopie pas pour le second écran. */ .auth-wrap { /* ⚠️ **Une surface claire dans les deux thèmes**, donc ses jetons d'encre aussi : sans cette ligne, `--bouton-second-texte` passait au beige clair en thème sombre et « Demander un nouveau lien » rendait 2,54:1 sur du blanc (R05, 21/09). Les fonds de la carte sont déjà écrits en dur ici. */ --bouton-second-texte: #6B5B45; --bouton-fond: #A94A2A; --bouton-texte: #FFFFFF; /* ⚠️ **Et l'état désactivé avec eux — revue du 21/09.** Ils manquaient à cette portée : en thème sombre, « Se connecter » encore grisé devenait une pastille presque noire (#3C3027) sur la carte crème de P38, c'est-à-dire l'inverse exact de ce que la surface claire impose. */ --bouton-inactif-fond: #E7DCCA; --bouton-inactif-texte: #6B5B45; /* 80 : au-dessus des bandeaux (60) et de tout empilement de feuilles — c'est un écran entier, rien de l'application ne doit paraître par-dessus. */ position: fixed; inset: 0; z-index: 80; overflow-y: auto; display: flex; flex-direction: column; /* Blanc sur téléphone, comme la carte qui remplit tout — ce qui dépasse sous la barre d'état (`viewport-fit=cover`) doit être de la même couleur qu'elle. Le crème ne sert qu'autour d'une carte centrée, sur large écran. */ background: var(--card); /* ⚠️ **L'accès reste clair, quel que soit le thème** — Luca, 19/09, en sombre : « tu veux bien remettre le reste de la page en blanc ». Le welcome est une photo claire et la carte s'accorde à sa barre d'état blanche ; les jetons du thème clair sont donc reposés ici, et tout ce qui vit dans la couche les hérite — pas de seconde feuille de règles pour le sombre. */ --cream: #F7ECDF; --card: #FFFFFF; --espresso: #2E241D; --muted: #8C7F70; --line: #E7DCCA; --sand: #DCC9AE; --terra: #C65A2E; --cinnamon: #A94A2A; --coeur: #A94A2A; --danger: #A6412F; color: var(--espresso); color-scheme: light; /* Un écran d'accès est **figé** (Luca, 19/09 : « ça devrait pas être scrollable de bas en haut ») : rien ne rebondit quand tout tient, et il ne défile que là où il ne tient pas (un iPhone SE sur l'inscription). */ overscroll-behavior: contain; } /* ── Le welcome — le mockup « welcome screen P38 » ───────────────────────── Le fond est **la page** (§ *une image qui porte une disposition doit être la page*) : bord à bord, `cover`, ancré en bas pour garder la table et le carnet quand l'écran est court — c'est le haut, le mur nu, qui se coupe. La casserole et le logo se posent sur le mur ; la nappe crème du bas porte les points et les deux boutons, comme sur le mockup. */ .welcome { position: absolute; inset: 0; display: flex; flex-direction: column; /* ⚠️ **iOS peint la barre d'état avec le bord haut de la page tel qu'il était au chargement** — mesuré sur les captures de Luca le 19/09 : la bande faisait exactement (244, 230, 217), le mur de la photo, et elle restait beige au-dessus d'une carte blanche, `theme-color` blanc compris. Le fond commence donc **sous** la zone sûre, sur un blanc qui est aussi celui de la carte : ce que la barre échantillonne est blanc, sur tous les écrans de la couche. */ padding-top: env(safe-area-inset-top, 0px); background-color: #FFFFFF; background-image: url("/static/img/welcome-fond.webp"); background-position: center bottom; background-size: cover; background-repeat: no-repeat; background-origin: content-box; background-clip: content-box; /* ⚠️ Le fond est une photo claire quelle que soit la préférence de thème : ce qui se pose dessus garde ses couleurs fixes, sinon le texte du thème sombre disparaît (vu au banc sur la pilule « Passer » de P29). */ color: #2E241D; } .welcome-defile { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; /* Glisser, dans les deux sens — une page défile en hauteur sur un écran court — et jamais pincer (§ 1). */ touch-action: pan-x pan-y; } .welcome-defile::-webkit-scrollbar { display: none; } @media (prefers-reduced-motion: reduce) { .welcome-defile { scroll-behavior: auto; } } .welcome-diapos-pages { display: contents; } .welcome-diapo { flex: none; width: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; align-items: center; padding: 18px 20px 12px; overflow-y: auto; } /* La marque : la casserole détourée au-dessus du logo détouré, centrés sur le mur. Un seul nombre commande la scène — la largeur du logo —, la casserole s'en déduit. Ni l'un ni l'autre n'est redessiné. */ .welcome-marque { --logo-w: min(72vw, 300px); display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: 2vh; } .welcome-casserole { width: calc(var(--logo-w) * .58); height: auto; display: block; margin-bottom: -6px; } .welcome-logo { width: var(--logo-w); height: auto; display: block; } /* Les pages de présentation : une carte crème translucide sur la scène — opaque à 94 %, parce que ce qui se pose sur une photo redevient opaque, jamais translucide (§ *un décor qui porte quelque chose*). Le titre serif et les quatre cartes sont ceux de P29. */ .welcome-page-carte { width: 100%; max-width: 440px; margin-top: 8px; padding: 18px 16px 16px; border-radius: 22px; background: rgb(255 252 246 / 94%); box-shadow: 0 8px 30px rgb(46 36 29 / 12%); } #auth-welcome .welcome-titre { margin: 0 0 6px; text-align: center; font-family: var(--ecriture); font-weight: 400; font-size: 32.5px; line-height: 1.1; color: #2E241D; } #auth-welcome .welcome-sous { margin: 0 0 6px; text-align: center; font-size: 24.5px; color: #2E241D; } #auth-welcome .welcome-lead { margin: 0 auto 14px; text-align: center; max-width: 38ch; font-size: 22px; color: #6F6257; } /* La nappe du bas : coins très arrondis en haut, comme le mockup, les deux boutons pleine largeur, 52 px chacun. Elle **réserve** sa place dans la colonne — rien ne vit dessous. */ .welcome-pied { flex: none; position: relative; z-index: 1; padding: 10px 24px calc(22px + env(safe-area-inset-bottom, 0px)); border-radius: 40px 40px 0 0; background: #FFFCF6; box-shadow: 0 -10px 40px rgb(30 24 20 / 12%); display: flex; flex-direction: column; gap: 10px; } .welcome-pied .welcome-points { list-style: none; display: flex; justify-content: center; gap: 2px; margin: 0; padding: 0; } .welcome-pied .welcome-points button { width: 30px; height: 44px; padding: 0; border: none; background: none; cursor: pointer; display: grid; place-items: center; } .welcome-pied .welcome-points button::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #DCC9AE; } .welcome-pied .welcome-points button.on::after { width: 22px; border-radius: 999px; background: #C65A2E; } .welcome-pied .btn-primary, .welcome-pied .btn-ghost { width: 100%; min-height: 52px; font-size: 24.5px; font-weight: 600; border-radius: 999px; } /* ⚠️ **Écrit en dur, parce que l'écran d'entrée ne suit pas le thème** : il porte sa nappe claire et ses encres brunes dans les deux cas. `#C65A2E` y rendait 4,28:1 sous du blanc — la terre cuite du logo est un fond d'accent, pas un fond de bouton (R05). Le brun profond du même logo rend 5,68:1. */ .welcome-pied .btn-primary { background: #A94A2A; color: #fff; } .welcome-pied .btn-ghost { background: #FFFCF6; color: #A94A2A; border-color: #E7DCCA; } /* Sur un écran large, le welcome devient une carte centrée sur le fond : la scène ne s'étire pas sur 1 440 px (§ 10 — on borne l'objet, pas la page). */ @media (min-width: 820px) { .welcome { inset: auto; position: relative; margin: auto; width: 430px; height: min(900px, calc(100vh - 40px)); border-radius: 28px; overflow: hidden; box-shadow: 0 20px 60px rgb(30 24 20 / 18%); } .auth-wrap:has(#auth-welcome:not([hidden])) { justify-content: center; padding: 20px 0; } } /* ── La carte des états P38-2 à P38-8 ────────────────────────────────────── Pleine hauteur sur téléphone, le chevron en haut à gauche, le logo, le titre serif, la phrase, le formulaire. Sur large écran elle redevient une carte. */ .auth-card { width: min(430px, 100%); margin: 0 auto; flex: 1; background: var(--card); padding: calc(10px + env(safe-area-inset-top, 0px)) 26px max(16px, env(safe-area-inset-bottom, 0px)); text-align: center; position: relative; } @media (min-width: 560px) { /* Sur large écran la carte redevient une carte, pas une feuille collée bas. */ .auth-wrap { justify-content: center; padding: 40px 0; background: var(--cream); } .auth-card { flex: none; border-radius: var(--radius); padding-top: 18px; box-shadow: var(--shadow); } } .auth-retour { display: block; margin: 0 0 2px -4px; } /* Le logo est un WebP à fond transparent : il se pose sur le blanc du thème clair comme sur le brun du thème sombre sans avoir deux fichiers. */ .auth-wordmark { width: 196px; height: auto; margin: 0 auto 8px; display: block; } .auth-titre { margin: 0 0 6px; font-family: var(--ecriture); font-weight: 400; font-size: 32.5px; line-height: 1.1; color: var(--espresso); } .auth-sub { color: var(--muted); margin: 0 0 16px; font-size: 22.5px; line-height: 1.45; } .auth-enveloppe { display: block; width: 132px; height: auto; margin: 8px auto 14px; } [data-etat="sent"] .auth-titre, [data-etat="sentNoMail"] .auth-titre { margin-top: 4px; } /* Inscriptions fermées (P38-8) : le message dans un panneau, sous le titre. */ .auth-fermees { margin: 6px 0 4px; } .auth-fermees-texte { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--cream); border: 1px solid var(--line); color: var(--espresso); font-size: 22.5px; line-height: 1.5; } /* La règle du mot de passe, avec sa coche : vide tant qu'elle n'est pas tenue, verte ensuite — P38-6. Le texte reste, seule la coche change. */ .auth-regles { list-style: none; margin: -2px 0 0; padding: 0 4px; text-align: left; color: var(--muted); font-size: 20px; display: grid; gap: 4px; } .auth-regles li { display: flex; align-items: center; gap: 8px; } .auth-regle-coche { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--sand); display: grid; place-items: center; } .auth-regles li.ok { color: var(--espresso); } .auth-regles li.ok .auth-regle-coche { border-color: var(--sage); background: var(--sage); } .auth-regles li.ok .auth-regle-coche::after { content: ""; width: 8px; height: 4px; border: 2px solid #fff; border-top: none; border-right: none; transform: translateY(-1px) rotate(-45deg); } /* L'erreur sous les champs (P38-7) : rouge, avec sa pastille « ! », et les champs fautifs bordés de la même couleur. */ .auth-error { display: flex; align-items: flex-start; gap: 8px; margin: 2px 2px 0; text-align: left; font-size: 21px; line-height: 1.4; } .auth-error::before { content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px; background: var(--danger); color: #fff; font-size: 19px; font-weight: 700; display: grid; place-items: center; } .field.field-erreur input { border-color: var(--danger); } .field.field-erreur .field-icon { stroke: var(--danger); } .auth-relien { display: flex; width: 100%; margin-top: 12px; } .auth-vers-accueil { display: flex; width: 100%; margin-top: 18px; } .auth-vers-connexion { display: block; margin: 14px auto 0; min-height: 44px; font-size: 22.5px; font-weight: 600; } /* ── Champs ──────────────────────────────────────────────────────────────── */ .auth-card form { display: grid; gap: 10px; } .field { position: relative; display: flex; align-items: center; } .field-icon { position: absolute; left: 15px; width: 20px; height: 20px; stroke: var(--muted); fill: none; pointer-events: none; } .field input { width: 100%; border: 1px solid var(--line); border-radius: 14px; /* 44px à gauche pour l'icône, 46px à droite pour l'œil. */ padding: 13px 46px 13px 44px; background: var(--card); color: inherit; min-height: 52px; font-size: 24px; } .field input:focus { outline: none; border-color: var(--terra); box-shadow: 0 0 0 3px color-mix(in srgb, var(--terra) 18%, transparent); } .field-eye { position: absolute; right: 8px; display: grid; place-items: center; width: 36px; height: 36px; border: none; background: none; cursor: pointer; border-radius: 10px; color: var(--muted); } .field-eye svg { width: 20px; height: 20px; stroke: currentColor; fill: none; } .field-eye:hover { color: var(--espresso); } .auth-card .btn-primary { margin-top: 4px; min-height: 52px; font-size: 24px; } /* ── Liens sous le formulaire ────────────────────────────────────────────── */ .auth-switch { margin: 12px 0 0; font-size: 22px; color: var(--muted); } .auth-switch .link-btn { font-weight: 600; } .auth-forgot { display: block; margin: 2px auto 0; min-height: 44px; font-size: 22px; color: var(--cinnamon); font-weight: 600; } .auth-hint { color: var(--muted); font-size: 19.5px; margin: 14px 0 0; } /* La ligne qui renvoie à la politique de confidentialité, sous les fournisseurs. ⚠️ **13 px, et c'est une exception nommée au § 1** : le plancher de 16 px vise les **champs de saisie**, parce qu'iOS agrandit la page à la mise au point. Un paragraphe ne se mets pas au point ; ce qui le gouverne est la lisibilité, et le lien qu'il contient est une cible tactile — pas une entrée de texte. */ .auth-legal { color: var(--muted); font-size: 19.5px; line-height: 1.5; margin: 10px 0 0; text-align: center; } .auth-legal a { color: var(--muted); text-decoration: underline; } .auth-note { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--cream); border: 1px solid var(--line); color: var(--muted); font-size: 19.5px; line-height: 1.5; text-align: left; } .auth-note strong { color: var(--espresso); } /* ── Fournisseurs ────────────────────────────────────────────────────────── */ .auth-or { display: flex; align-items: center; gap: 12px; margin: 14px 0 12px; color: var(--muted); font-size: 19.5px; } .auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); } .provider-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--espresso); font-size: 22.5px; font-weight: 600; text-decoration: none; cursor: pointer; } .provider-btn:hover { background: var(--cream); } .provider-btn + .provider-btn { margin-top: 8px; } /* Le logo Google impose ses couleurs officielles : elles ne se dérivent pas de la charte, et les altérer contreviendrait à ses règles d'usage. */ .provider-btn svg { flex: none; } /* Fond noir, texte blanc : variante imposée par les règles d'Apple sur fond clair. En thème sombre elle s'inverse, pour rester détachée du fond. */ .provider-apple { background: #000; border-color: #000; color: #fff; } .provider-apple:hover { background: #1a1a1a; } /* Deux écritures nécessaires, comme pour les jetons de couleur : la media query couvre le réglage « système », le sélecteur couvre le choix explicite. `:not([data-theme="light"])` seul s'appliquerait AUSSI en thème clair. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .provider-apple { background: #fff; border-color: #fff; color: #000; } :root:not([data-theme="light"]) .provider-apple:hover { background: #eee; } } :root[data-theme="dark"] .provider-apple { background: #fff; border-color: #fff; color: #000; } :root[data-theme="dark"] .provider-apple:hover { background: #eee; } /* Sur l'accès, toujours clair (voir `.auth-wrap`) : le bouton Apple garde sa variante noire, quelle que soit la préférence de thème. */ .auth-wrap .provider-btn.provider-apple { background: #000; border-color: #000; color: #fff; } .auth-wrap .provider-btn.provider-apple:hover { background: #1a1a1a; } .provider-btn.disabled { opacity: .4; cursor: not-allowed; } .provider-btn.disabled:hover { background: var(--card); } .provider-apple.disabled:hover { background: #000; } :root[data-theme="dark"] .provider-apple.disabled:hover { background: #fff; } .provider-note { margin: 8px 2px 0; color: var(--muted); font-size: 19px; text-align: center; } /* ── Bandeau éphémère ────────────────────────────────────────────────────── */ /* ⚠️ **Au-dessus des feuilles empilées, quoi qu'elles empilent — 20/09.** La profondeur d'une feuille vaut `51 + 2n` : au troisième étage elle atteignait 55, c'est-à-dire l'égalité avec ce bandeau, que l'ordre du document tranchait alors au hasard. Un message d'erreur passé sous la feuille qui l'a provoquée n'existe pas. La borne est posée avant qu'un chemin à trois étages existe. */ .toast { position: fixed; z-index: 60; /* Même recadrage que la feuille (M02) : le message répond à un geste fait dans la colonne, pas au milieu de la fenêtre. Sur téléphone `--rail-w` vaut zéro, la formule ne change rien. */ left: calc(50% + var(--rail-w) / 2); transform: translateX(-50%) translateY(20px); bottom: calc(var(--tabbar-h) + 16px); width: min(420px, calc(100% - 28px)); background: var(--espresso); color: var(--cream); border-radius: 16px; padding: 13px 17px; font-size: 20px; line-height: 1.45; box-shadow: 0 12px 34px rgba(30, 24, 20, .3); opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; } .toast.on { opacity: 1; transform: translateX(-50%) translateY(0); } /* Ranger au frigo depuis le scanner — cahier § 7. Le champ à gauche, le bouton à droite : on lit « combien » avant « ajouter », qui est l'ordre de la phrase. ⚠️ **16 px sur le champ** (§ 1) — clavier décimal, donc zoom iOS. */ .food-au-frigo { display: flex; align-items: center; gap: 10px; } .food-au-frigo .btn-ghost { flex: 1; } .fap-qte { display: flex; align-items: center; gap: 6px; font-size: 20px; color: var(--muted); flex: none; } .fap-qte input { width: 56px; font-size: 24px; padding: 10px 6px; text-align: center; border: 1px solid var(--line); border-radius: 12px; background: var(--card); } /* ── Bascule Recettes / Collections ──────────────────────────────────────── */ .segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 4px; margin-bottom: 18px; } .segmented button { position: relative; /* repère de la zone de 44 px */ border: none; background: none; color: var(--muted); cursor: pointer; padding: 9px 8px; border-radius: 10px; font-size: 21px; min-height: 40px; } .segmented button.on { background: var(--cinnamon); color: #FFFFFF; font-weight: 600; } /* ── Aujourd'hui — journal ───────────────────────────────────────────────── */ /* Sur un écran étroit, la pastille, les deux flèches et « Vue d'ensemble » ne tiennent pas sur une ligne : le retour à la ligne vaut mieux qu'un libellé coupé, et il ne se produit que là où c'est nécessaire. */ .day-nav { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; row-gap: 8px; margin-bottom: 16px; } .day-nav .icon-btn { width: 36px; height: 36px; min-height: 36px; font-size: 26px; } /* ⛔ **Une flèche est un libellé, pas un tracé — revue de 03b.** Ces trois boutons portent « ‹ » et « › » en **texte** : `opacity: .3` les délavait jusqu'à 2,54:1 en sombre, et le banc les voit désormais comme n'importe quel libellé de commande. Le couple inactif du fichier (R05) dit l'indisponibilité par la pastille pâle et garde la flèche lisible. */ .day-nav .icon-btn:disabled { background: var(--bouton-inactif-fond); color: var(--bouton-inactif-texte); border-color: var(--line); cursor: default; } /* La date est une pastille encadrée, comme sur la maquette : elle se lit comme un bouton, ce qu'elle est — elle ouvre le sélecteur natif du téléphone. */ .day-pill { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--card); color: var(--espresso); cursor: pointer; font-size: 22px; font-weight: 600; padding: 8px 13px; border-radius: 999px; overflow: hidden; white-space: nowrap; } .day-pill .icon { width: 16px; height: 16px; color: var(--muted); flex: none; } /* ⚠️ **L'encre de Caveat déborde de sa chasse** — P24, reproduit par 04, corrigé en 05C. Le « i » final d'« Aujourd'hui » dépasse de 2,8 px sa boîte d'avance (mesuré par `measureText` : encre 84,2 px pour une chasse de 81,4) ; le `overflow: hidden` qui porte les points de suspension le coupait, et la pastille lisait « Aujourd'hu » sans rien signaler — `scrollWidth` égalait `clientWidth`. La marge de fin du libellé donne sa place à l'encre ; le rembourrage de la pastille la rend, pour que la largeur ne change pas. */ .day-pill span { overflow: hidden; text-overflow: ellipsis; padding-right: .2em; } /* `capitalize` mettrait une majuscule à chaque mot — « Samedi 8 Août ». En français, jours et mois restent en minuscules ; seule la première lettre du libellé se capitalise. Il faut un `inline-block` : `::first-letter` ne s'applique pas à une boîte purement en ligne. */ #day-label-text { display: inline-block; } #day-label-text::first-letter { text-transform: uppercase; } .day-caret { color: var(--muted); font-size: 19.5px; line-height: 1; flex: none; } /* Pas de `margin-left: auto` : poussée à droite, la puce se retrouvait seule et comme égarée dès que la ligne passait à deux. Centrée avec le reste, le retour à la ligne se lit comme voulu. */ .day-overview { display: flex; align-items: center; gap: 6px; color: var(--terra); } .day-overview .icon { width: 15px; height: 15px; } .day-home .icon { width: 16px; height: 16px; } /* Le champ de date reste dans le document — il porte le sélecteur natif — mais ne s'affiche pas : c'est le libellé qui l'ouvre. `display: none` le rendrait inatteignable par `showPicker()`. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); } /* La carte de tête : le budget à gauche, les trois macros à droite. Deux colonnes plutôt qu'un anneau centré — l'anneau segmenté par repas disait de quoi la journée était faite, la barre ne dit que son avancement, mais elle libère la moitié droite pour les macros qui étaient en dessous. */ /* Titre à gauche, comme sur la maquette. `.pane-head` est une grille symétrique `1fr auto 1fr` faite pour un titre centré entre deux groupes de boutons ; cet en-tête n'en a qu'un, et la troisième colonne restée vide prenait la moitié de la largeur — « Compteur de calories » se coupait en deux pour tenir dans 145 px. */ /* `.pane-head.today-head` et non `.today-head` seul : à une classe contre une, c'est l'ordre du fichier qui tranche, et `.pane-head` est déclaré 550 lignes plus bas. La règle était juste et n'avait simplement aucun effet — même mécanique que l'anneau du jour ramené à 96 px par `.ring`. */ .pane-head.today-head { grid-template-columns: minmax(0, 1fr) auto; } .today-head .head-title { text-align: left; } .today-head .page-title { font-size: 29px; } /* La colonne de droite passe devant, et c'est mesuré : la gauche porte un nombre et « / 2 100 kcal » (≈ 96 px), la droite un anneau de 44 px **plus** un nom et un pourcentage sur la même ligne (≈ 109 px). Le partage était l'inverse, hérité d'une époque où la droite n'affichait pas de pourcentage. */ .today-card { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 12px; align-items: start; } /* ⚠️ **Une colonne quand les macros sont sorties.** L'écran du jour garde les deux — son anneau et son budget se lisent ensemble ; l'accueil, lui, donne aux macros leur propre carte (planche du 03/09), et la seconde colonne y serait restée vide. Un modificateur plutôt qu'une seconde carte : c'est la même, avec un contenu de moins. */ .today-solo { grid-template-columns: minmax(0, 1fr); } /* ── L'encadré du jour et ses trois puces — demandé le 05/09 ───────────────── **Trois cartes empilées sont devenues une carte à trois puces.** Ce qui change n'est pas le contenu — les trois panneaux sont ceux d'avant, à la ligne près — c'est qu'un seul se voit à la fois et qu'il a donc toute la largeur : la compaction écrite le 04/09 pour des colonnes d'un tiers d'écran n'a plus d'objet, et elle s'en va avec elles. ⚠️ **Deux attributs décident, et ils ne se marchent pas dessus.** `hidden` dit « la donnée n'est pas arrivée » et vient du code qui peint ; `data-puce` dit « ce n'est pas la puce ouverte » et vit ici. D'où le `:not([hidden])` : sans lui, la feuille de style rouvrirait un panneau que le chargement n'a pas encore rempli — deux écritures sur la même question, § 3. */ /* ⚠️ **Le même cadre crème porte la scène kcal de P24** (R13, 22/09) : mêmes couleurs nutrition, même marge, même conteneur — les tailles de la scène sont en `cqi`, donc relatives à ce cadre, et ne tombent juste qu'avec lui. */ .card.encadre-jour, .card.cadre-kcal { --nutrition-proteines: #C36039; --nutrition-glucides: #DDA23D; --nutrition-lipides: #87934F; --nutrition-fond: color-mix(in srgb, var(--card) 44%, var(--cream)); --nutrition-doux: color-mix(in srgb, var(--cream) 80%, var(--sand)); --nutrition-secondaire: color-mix(in srgb, var(--espresso) 70%, var(--nutrition-fond)); padding: 12px; border-radius: 25px; width: 100%; max-width: 660px; margin-inline: auto; background: var(--nutrition-fond); border: 1px solid color-mix(in srgb, var(--card) 78%, var(--sand)); box-shadow: 0 5px 18px #6F482616, inset 0 1px 0 color-mix(in srgb, var(--card) 70%, transparent); container-type: inline-size; } /* Barre crème et onglet terre cuite arrondis, référence du 20/09. La police manuscrite locale est partagée avec les inscriptions de la gourde. */ .segmented.puces-jour { grid-template-columns: repeat(3, 1fr); max-width: none; margin-bottom: 10px; padding: 0; border-radius: 999px; gap: 0; background: var(--nutrition-doux); border: 0; } .puces-jour button { position: relative; padding: 5px 6px; min-height: 44px; border-radius: 999px; font: 700 clamp(22px, 5.7cqi, 29px)/1.15 var(--ecriture); color: var(--espresso); } .puces-jour button.on { background: linear-gradient(145deg, #CE7746, #BC5228); color: #FFF8ED; box-shadow: 0 3px 8px #AC51231A; } .puces-jour button + button:not(.on)::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: var(--sand); } .puces-jour button.on + button::before { display: none; } .puce-pane { display: none; margin-bottom: 0; } .encadre-jour[data-puce="kcal"] #accueil-jour:not([hidden]), .encadre-jour[data-puce="macros"] #accueil-macros-carte:not([hidden]), .encadre-jour[data-puce="eau"] #accueil-eau:not([hidden]) { display: grid; } /* « Voir le détail » appartient à l'encadré entier. La vue Macros ajoute la même porte vers la saisie d'un repas que la vue Calories. */ .encadre-pied { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 14px; padding: 3px; border: 0; border-radius: 999px; background: var(--nutrition-doux); } .encadre-pied #accueil-detail { flex: 1; border: 0; background: transparent; color: var(--espresso); padding: 6px 8px; font: 700 clamp(21px, 5.6cqi, 28px)/1.15 var(--ecriture); } .encadre-pied #accueil-detail span { margin-left: 6px; font: 400 31px/1 var(--ecriture); } #accueil-macros-ajout { display: none; } .encadre-jour[data-puce="macros"] #accueil-macros-ajout { display: inline-flex; } /* Le pied d'une carte du haut : ce qu'on lit à gauche, ce qu'on fait à droite. ⚠️ **Il s'enroule** — « 1 240 kcal au-dessus de votre repère » et « Voir le détail » font 330 px pour 302 dans une carte à 390 pt, et un bouton poussé hors de la carte est le § 2 dans sa version la plus discrète. */ .today-pied { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .today-pied .today-eaten { flex: 1 1 auto; } /* ⚠️ **Et il reste à droite quand la ligne s'enroule.** « 1 240 kcal au-dessus de votre repère » prend la rangée entière à 390 pt : sans cette ligne le bouton repart au bord gauche, sous un texte qu'il n'accompagne plus. */ .today-pied .btn-mini { margin-left: auto; } /* Une porte de carte n'est pas une action de page : elle se dimensionne comme ce qu'elle vaut. ⛔ Mais jamais sous 44 px — le § 1 passe avant. */ .btn-ghost.btn-mini { padding: 6px 16px; font-size: 20px; } .today-budget { display: grid; gap: 2px; align-content: start; } /* ⚠️ **Pas `display: flex` ici**, et c'est le second décalage du 16/08. « Calories consommées » passe à la ligne dans une colonne de 160 px ; en flex, le libellé prend alors toute la largeur disponible et le « i » se retrouve **à droite du bloc de deux lignes**, centré entre elles — détaché de son texte, il se lit comme un badge posé là. En flux normal il suit le dernier mot, ce qui est le seul endroit où un « i » veut dire quelque chose. */ .today-heading { margin: 0; color: var(--espresso); font-size: 21px; font-weight: 600; } /* ── La pastille d'un titre de carte — planche du 03/09 ─────────────────────── Les trois cartes du haut portent le même objet : un pictogramme dans un rond teinté, puis le titre en clair. ⚠️ **La couleur est celle de la carte, pas du titre** — la flamme est terre, la goutte bleue, l'anneau des macros ambre —, et c'est ce qui les distingue d'un coup d'œil sans écrire trois nuances de texte : le § *un signal qui ne distingue rien ne compte pas* appliqué à une couleur. Le titre, lui, reste espresso partout. ⚠️ **`inline-flex` et `vertical-align`** : le titre passe sur deux lignes dans une carte étroite, et une pastille en `flex` s'y détacherait de son mot — c'est le défaut du « i » du 16/08, noté juste au-dessus. */ .tete-icone { display: inline-grid; place-items: center; vertical-align: -7px; width: 26px; height: 26px; border-radius: 9px; margin-right: 7px; background: color-mix(in srgb, currentColor 13%, var(--card)); } .tete-icone .icon { width: 15px; height: 15px; } .tete-flamme { color: var(--terra); } .tete-macros { color: var(--amber); } /* Le « i » porte l'avertissement qui compte : la cible contient déjà l'activité, le sport ne s'y rajoute pas. Discret, mais jamais absent. ⚠️ **Il y en avait deux règles**, à 800 lignes d'écart et de tailles différentes (17 px ici, 20 px plus bas) — donc la seconde gagnait, et corriger celle-ci ne changeait rien à l'écran. Trouvé le 16/08 en corrigeant le décalage du « i » : la correction était juste et sans effet. Une seule désormais, et les deux appelants (`#today-info`, `#kcal-info`) la partagent. */ .info-dot { /* `inline-flex` et non `flex` : il suit le dernier mot du libellé au lieu de se poser à côté du bloc. Le `vertical-align` le cale sur le texte plutôt que sur le bas de la boîte, où il pendait. (Sans effet dans un parent flex, où c'est `align-items` qui décide — donc sans risque pour `#kcal-info`.) */ position: relative; /* repère de la zone de 44 px — voir en tête de fichier */ display: inline-flex; align-items: center; justify-content: center; vertical-align: -4px; width: 20px; height: 20px; min-height: 20px; flex: none; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--muted); font-size: 16.5px; font-style: italic; line-height: 1; cursor: pointer; } /* L'écart au texte n'est posé que là où le « i » suit un mot : dans le `h3` des filtres, c'est le `gap` du parent flex qui s'en charge, et les deux s'ajouteraient. */ /* L'écart est porté par le `gap` de `.today-goal-line`. */ .today-kcal { font-family: var(--ecriture); font-size: 49.5px; line-height: 1.05; color: var(--terra); font-weight: 400; } /* La cible et son « i » sur une ligne. `flex` ici est sans danger — contrairement à `.today-heading`, cette ligne ne passe jamais à deux : « / 2 100 kcal » fait 96 px pour 128 disponibles, et le point en occupe 20. */ .today-goal-line { margin: 0; display: flex; align-items: center; gap: 6px; min-width: 0; } .today-target { color: var(--muted); font-size: 21px; min-width: 0; } .today-track { height: 8px; border-radius: 999px; background: var(--line); margin: 10px 0 8px; overflow: hidden; } .today-track > div { /* ⚠️ **Terre, et non sauge.** La planche peint la jauge des calories dans l'accent de la marque ; le vert y désignait un état — « dans la cible » — que rien ne change jamais, puisque la barre plafonne et que **rien ne change de couleur au-dessus de la cible** (voir `renderDayBudget`). Une couleur qui ne varie pas ne dit rien : autant qu'elle soit celle de la carte. ⛔ L'eau garde la sienne — la gourde, `.gourde-eau`, le seul bleu du dépôt. */ height: 100%; border-radius: 999px; background: var(--terra); transition: width .45s ease; } .today-eaten { grid-column: 1 / -1; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 0; color: var(--muted); font-size: 19.5px; } .today-eaten b { color: var(--terra); font-weight: 600; } .eaten-flame { display: flex; color: var(--terra); } .eaten-flame .icon { width: 14px; height: 14px; } /* ── Le rond de la journée — planches des 03 et 04/09 ───────────────────────── Un anneau pour les trois macros, une légende, et la ligne qui dit ce que l'anneau découpe. Le détail du choix — pourquoi des calories et pas des grammes — est en tête de `renderDayMacros`. */ .macro-bloc { display: grid; gap: 10px; justify-items: center; } .macro-donut { width: 88px; height: 88px; flex: none; transform: rotate(-90deg); } .mdonut-piste, .mdonut-part { fill: none; stroke-width: 11; /* ⛔ **Bout droit, jamais arrondi.** Un `round` déborde de sa part des deux côtés : la dernière recouvrirait la première, et une part de 2 % s'y peindrait plus large qu'elle n'est. */ stroke-linecap: butt; } .mdonut-piste { stroke: var(--line); } .mdonut-part { transition: stroke-dasharray .45s ease; } .macro-legende { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; width: 100%; } .macro-legende li { display: flex; align-items: center; gap: 7px; min-width: 0; } .mleg-point { width: 9px; height: 9px; border-radius: 50%; flex: none; } .mleg-nom { font-size: 19px; font-weight: 600; min-width: 0; } /* Les chiffres se poussent au bout de la ligne, et **ne se compriment pas** : c'est le nom qui a de la marge. Chasse fixe, sinon trois nombres empilés ne s'alignent sur rien. */ .mleg-val { margin-left: auto; flex: none; color: var(--muted); font-size: 19px; font-variant-numeric: tabular-nums; white-space: nowrap; } .mleg-val b { color: var(--espresso); font-weight: 600; font-size: 21px; } /* ⚠️ **La note réserve sa ligne même vide** — elle apparaît dès la première calorie notée, et sans hauteur réservée toute la carte sauterait à ce moment-là. Le § *une hauteur qui apparaît est une hauteur réservée*. */ .macro-note { margin: 0; min-height: 1.2em; color: var(--muted); font-size: 16.5px; text-align: center; } /* Une carte par repas. La version précédente les réunissait dans une carte dense pour qu'ils tiennent tous sans défiler ; la vignette par ligne rend ce pari caduc, et des cartes distinctes se relisent mieux. */ /* `minmax(0, 1fr)` et non `1fr` : un élément de grille vaut `min-width: auto`, donc un libellé long — « Pain complet ou intégral (à la farine T150) » — élargit la piste au-delà de son conteneur au lieu d'être coupé. Les cartes sortaient de l'écran par la droite, sans que la page défile pour autant. */ .meals-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .meal-card { padding: 14px 16px; min-width: 0; } .meal-head { display: flex; align-items: center; gap: 10px; } .meal-icon { width: 34px; height: 34px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #FFFFFF; } .meal-icon .icon { width: 18px; height: 18px; } .meal-name { flex: 1; font-size: 24px; font-weight: 600; font-family: var(--ecriture); } .meal-kcal { color: var(--terra); font-size: 20px; font-weight: 600; white-space: nowrap; } .meal-add { width: 32px; height: 32px; min-height: 32px; } .meal-add .icon { width: 15px; height: 15px; } /* ── Le cadran des calories — P24 et accueil, 15/09 ───────────────────────────── Un anneau qui se remplit vers le repère et plafonne, le total au centre. Né sur l'écran du jour (P24), posé sur l'accueil le même jour à la demande de Luca : un seul dessin, donc des règles qui ne dépendent d'aucun écran. */ .jr-anneau { position: relative; width: 100%; aspect-ratio: 1; margin: 0 auto; } .jr-anneau-svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; } .jr-anneau-piste, .jr-anneau-arc { fill: none; stroke-width: 12; } .jr-anneau-piste { stroke: color-mix(in srgb, var(--sage) 25%, var(--card)); } .jr-anneau-arc { stroke: color-mix(in srgb, var(--sage) 70%, #3F6B2F); stroke-linecap: round; stroke-dasharray: 0 400; transition: stroke-dasharray .45s ease; } .jr-anneau-centre { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; padding: 16px; } .jr-anneau-centre .today-kcal { font-family: var(--ecriture); font-weight: 800; font-size: clamp(31px, 8.76vw, 39px); color: var(--espresso); line-height: 1.05; } .jr-anneau-centre .today-goal-line { gap: 3px; justify-content: center; } .jr-anneau-centre .today-target { font-size: 19px; color: var(--espresso); font-weight: 600; white-space: nowrap; } /* Cadre nutrition — références de Luca du 20/09. Le dessin est décoratif ; les totaux et les jauges restent du HTML/SVG. Le centre et le diamètre suivent la géométrie des deux images 1152 × 768 : centre à 50 % / 49 %. Le dessin est agrandi de 20 % dans la scène pour réduire ses marges vides ; le diamètre de l'assiette vaut alors ≈ 60 % de la largeur de la scène. */ .nutrition-scene { position: relative; width: 100%; max-width: 560px; aspect-ratio: 3 / 2; margin: 4px auto 0; overflow: hidden; } .nutrition-assiette { position: absolute; left: -10%; top: -10%; display: block; width: 120%; max-width: none; height: auto; pointer-events: none; } /* ── La scène kcal — P01 et P24 (R13, 22/09) ───────────────────────────────── Née sur l'accueil le 20/09, reprise telle quelle par le détail de la journée à la demande de Luca : ces règles ne dépendent d'aucun écran. L'hôte ne choisit que ce qui entoure la scène (le pied de l'accueil, l'écart et les tuiles de P24), jamais ses proportions, ses couleurs ou sa typographie. */ .nutrition-scene.cadran-kcal { display: block; } .cadran-kcal .jr-anneau { position: absolute; left: 50%; top: 49%; width: 66%; transform: translate(-50%, -50%); margin: 0; } .cadran-kcal .jr-anneau-piste { stroke: #E8D4BC; stroke-width: 8; } .cadran-kcal .jr-anneau-arc { stroke: #C66334; stroke-width: 8; } .cadran-kcal .jr-anneau-centre { padding: 12%; } .cadran-kcal .today-kcal { color: #47260F; font-size: clamp(32.5px, 10.83cqi, 59.5px); white-space: nowrap; } .cadran-kcal .today-goal-line { flex-wrap: wrap; gap: 4px; } .cadran-kcal .today-target { color: #795436; font-size: clamp(16.5px, 5.37cqi, 24.5px); font-weight: 600; } .cadran-kcal .info-dot { color: #795436; border-color: #BA9B7A; width: 17px; height: 17px; min-height: 17px; font-size: 15px; } .cadran-kcal .today-track { display: none; } #accueil-jour { gap: 0; } #accueil-jour .today-pied { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 9px; margin-top: 2px; align-items: center; } #accueil-jour .today-eaten, .nutrition-repas { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 0; min-width: 0; color: var(--espresso); font-size: 18px; grid-column: auto; line-height: 1.25; } #accueil-jour .today-eaten b, .nutrition-repas b { display: block; color: var(--espresso); font-size: clamp(18px, 5.49cqi, 25px); font-weight: 750; } #accueil-jour .today-eaten small, .nutrition-repas small { display: block; margin-top: 2px; font-size: clamp(15px, 4.5cqi, 21px); color: var(--nutrition-secondaire); } #accueil-jour .eaten-flame .icon { width: 25px; height: 30px; } .nutrition-repas { padding-left: 8px; gap: 5px; border-left: 1px solid var(--sand); } .nutrition-repas > .icon { width: 24px; height: 27px; flex: none; color: var(--nutrition-lipides); } .nutrition-ajout { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 13px; border: 0; border-radius: 999px; color: #FFF8ED; background: linear-gradient(145deg, #CF7848, #BC5228); font: 700 clamp(20px, 5.1cqi, 26px)/1.1 var(--ecriture); cursor: pointer; } .nutrition-ajout .pastille-plus { display: inline-block; width: auto; height: auto; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; color: inherit; font: 300 34.5px/.8 var(--ecriture); } #accueil-macros .nutrition-scene { grid-column: 1 / -1; } #accueil-macros .macro-donut { position: absolute; left: 50%; top: 49%; width: 75%; height: auto; transform: translate(-50%, -50%); } #accueil-macros .macro-secteur { stroke: #FFF2DD; stroke-width: 1.4; stroke-linejoin: round; } #accueil-macros .mdonut-part { transition: none; } #accueil-macros .mdonut-piste, #accueil-macros .mdonut-part { stroke-width: 3.5; } #accueil-macros .mdonut-piste { stroke: #E8D4BC; } #accueil-macros { gap: 6px; } #accueil-macros .macro-legende { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } #accueil-macros .macro-legende li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 4px; row-gap: 2px; padding: 0 10px; align-content: start; } #accueil-macros .macro-legende li:first-child { padding-left: 0; } #accueil-macros .macro-legende li:last-child { padding-right: 0; } #accueil-macros .macro-legende li + li { border-left: 1px solid var(--sand); } #accueil-macros .mleg-point { width: 24px; height: 26px; grid-row: 1; align-self: center; } #accueil-macros .mleg-point .icon { width: 100%; height: 100%; } #accueil-macros .mleg-nom { font: 700 clamp(18px, 4.8cqi, 25px)/1.1 var(--ecriture); } #accueil-macros .mleg-val { grid-column: 1 / -1; margin: 0; font-size: clamp(15px, 4.2cqi, 21px); white-space: normal; color: var(--nutrition-secondaire); } #accueil-macros .mleg-val b { font-size: clamp(22.5px, 6.25cqi, 28px); } .mleg-barre { grid-column: 1 / -1; height: 7px; margin-top: 5px; background: var(--sand); border-radius: 999px; overflow: hidden; } .mleg-barre i { display: block; height: 100%; border-radius: inherit; transition: width .45s ease; } #accueil-macros .macro-note { margin-top: 3px; font-size: 15px; color: var(--nutrition-secondaire); } @container (max-width: 310px) { #accueil-jour .today-pied { gap: 7px; } #accueil-jour .eaten-flame, .nutrition-repas > .icon { display: none; } .nutrition-repas { padding-left: 7px; gap: 4px; } .nutrition-ajout { padding: 6px 10px; gap: 5px; } #accueil-macros .macro-legende li { padding: 0 7px; } #accueil-macros .macro-legende li { grid-template-columns: minmax(0, 1fr); } #accueil-macros .mleg-point { width: 19px; height: 23px; } #accueil-macros .mleg-nom { grid-column: 1; grid-row: 2; } #accueil-macros .mleg-val { grid-column: 1 / -1; } #accueil-macros .mleg-point { grid-row: 1; } } @media (prefers-reduced-motion: reduce) { .cadran-kcal .jr-anneau-arc, .encadre-jour .mdonut-part, .mleg-barre i { transition: none; } } /* ── Compteur de calories / journée — P24 de la refonte, 15/09 ───────────────── Tout est scopé sur `#screen-today` : l'accueil (P01, livré) partage les corps et les classes de la carte du jour, et ne doit pas bouger d'un pixel. Refait le jour même sur le retour de Luca — « ça ne ressemble pas du tout au mockup » : la tête était une carte, les tuiles et l'objectif prenaient la moitié de l'écran, et l'eau avait perdu sa gourde. */ #screen-today .jr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } #screen-today .jr-date { display: flex; align-items: center; gap: 6px; min-width: 0; } #screen-today .jr-date .day-pill { min-height: 44px; padding: 0 10px 0 14px; font-weight: 500; font-size: 22px; } #screen-today .jr-fleches { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--card); } #screen-today .jr-fleches .icon-btn { width: 40px; height: 44px; min-height: 44px; border: none; background: none; font-size: 26px; } #screen-today .jr-fleches .icon-btn:disabled { background: var(--bouton-inactif-fond); color: var(--bouton-inactif-texte); border-radius: 999px; cursor: default; } #screen-today .jr-titres { margin: 2px 0 10px; } #screen-today .jr-titre { margin: 0; font-family: var(--ecriture); font-weight: 700; font-size: clamp(32.5px, 9.3vw, 41px); line-height: 1.1; } #screen-today .jr-sous { margin: 2px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 22.5px; } #screen-today .today-colonnes > * + * { margin-top: 12px; } /* Pendant qu'une journée jamais lue arrive, l'ancienne s'estompe sous le nouveau titre : on voit que le geste a pris, et qu'on ne lit pas encore ce jour-là. */ #screen-today .jr-tete, #screen-today .jr-duo, #screen-today .meals-stack { transition: opacity .15s ease; } #screen-today.jr-chargement .jr-tete, #screen-today.jr-chargement .jr-duo, #screen-today.jr-chargement .meals-stack { opacity: .45; } /* La tête (R13, 22/09) : la scène kcal de l'accueil dans son cadre crème, l'écart sous l'assiette, puis les trois tuiles des macros. La scène elle-même n'a aucune règle ici — voir « La scène kcal », plus haut. */ #screen-today .jr-tete { display: grid; gap: 10px; } #screen-today .jr-tete > .cadre-kcal { margin: 0; } #screen-today .jr-tete .macro-bloc { justify-items: stretch; } #screen-today .today-eaten { grid-column: 1 / -1; justify-content: center; margin: 2px 0 0; font-size: 21px; line-height: 1.3; text-align: center; } /* Trois tuiles sous la scène (R13) : le nom, les grammes, la barre. Serrées à droite de l'ancien anneau, elles tombaient sous 60 px et coupaient « Protéines » comme « 51 / 120 g » ; sous l'assiette elles ont la largeur. */ #screen-today .jr-macros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } #screen-today .jr-macro { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "nom" "val" "barre"; column-gap: 6px; row-gap: 5px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); min-width: 0; } #screen-today .jr-macro-nom { grid-area: nom; font-size: 20px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #screen-today .jr-macro-point { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; } #screen-today .jr-macro-barre { grid-area: barre; display: block; height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; } #screen-today .jr-macro-barre > i { display: block; height: 100%; border-radius: 999px; } #screen-today .jr-macro-val { grid-area: val; font-size: 19.5px; color: var(--muted); white-space: nowrap; } #screen-today .jr-macro-val b { color: var(--espresso); } /* Sous 360 px, une tuile par ligne : le nom et les grammes côte à côte. */ @media (max-width: 359px) { #screen-today .jr-macros { grid-template-columns: minmax(0, 1fr); } #screen-today .jr-macro { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom val" "barre barre"; } } /* L'objectif, compact ; l'eau et sa gourde à côté. */ #screen-today .jr-duo { display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: 10px; align-items: start; } @media (max-width: 379px) { #screen-today .jr-duo { grid-template-columns: minmax(0, 1fr); } } #screen-today .jr-duo > .card { margin: 0; padding: 12px; border: 1px solid var(--line); box-shadow: none; } #screen-today .jr-objectif { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; text-align: left; font: inherit; color: var(--espresso); cursor: pointer; padding-right: 28px; min-height: 44px; } #screen-today .jr-objectif .jr-chevron { position: absolute; right: 8px; top: 50%; margin-top: -9px; width: 18px; height: 18px; color: var(--muted); transform: rotate(-90deg); } #screen-today .jr-pastille { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--terra); background: color-mix(in srgb, var(--terra) 12%, var(--card)); } #screen-today .jr-pastille .icon { width: 16px; height: 16px; } #screen-today .jr-duo-texte { display: grid; gap: 1px; min-width: 0; } #screen-today .jr-duo-texte small { color: var(--muted); font-size: 19.5px; line-height: 1.25; } #screen-today .jr-duo-texte b { font-size: 24px; } #screen-today .jr-eau { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: start; } #screen-today .jr-eau-texte { display: grid; gap: 2px; min-width: 0; } #screen-today .jr-eau-tete { margin: 0; display: flex; align-items: center; gap: 5px; font-size: 19.5px; color: var(--muted); } #screen-today .jr-eau-valeur { margin: 0; font-size: 21px; color: var(--muted); } #screen-today .jr-eau-valeur b { font-size: 25px; color: var(--espresso); } #screen-today .jr-eau-note { margin: 0; font-size: 19px; line-height: 1.3; color: var(--muted); } #screen-today .jr-eau-gestes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; } #screen-today .jr-eau-boire { min-height: 44px; padding: 0 12px; border-radius: 999px; border: none; cursor: pointer; background: color-mix(in srgb, var(--bleu) 14%, var(--card)); color: var(--bleu); font: inherit; font-size: 22.5px; font-weight: 700; } #screen-today .jr-eau-retirer { min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font: inherit; font-size: 21px; cursor: pointer; } #screen-today .jr-eau-fixer { min-height: 44px; font-size: 20px; white-space: nowrap; padding: 0; } #screen-today .jr-gourde { grid-column: 2; grid-row: 1; height: 150px; } /* Le ruban de la semaine. */ #screen-today .jr-semaine { display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; align-items: center; gap: 2px; } #screen-today .jr-semaine-fleche { width: 28px; height: 44px; min-height: 44px; border: none; background: none; font-size: 26.5px; color: var(--muted); padding: 0; } #screen-today .jr-semaine-fleche:disabled { background: var(--bouton-inactif-fond); color: var(--bouton-inactif-texte); border-radius: 999px; cursor: default; } #screen-today .jr-semaine-jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; } #screen-today .jr-jour { display: grid; justify-items: center; gap: 0; min-height: 48px; padding: 5px 0; border: none; border-radius: 12px; font: inherit; cursor: pointer; color: var(--espresso); background: color-mix(in srgb, var(--sand) 32%, var(--cream)); } /* Le jour de la semaine fait partie du libellé du bouton : `--muted` y rendait 3,03:1 sur le sable (revue du 21/09). */ #screen-today .jr-jour small { font-size: 19px; color: var(--bouton-second-texte); } #screen-today .jr-jour b { font-size: 24px; font-weight: 600; } #screen-today .jr-jour.on { background: var(--bouton-fond); color: var(--bouton-texte); } /* ⛔ Et pas `opacity: .9` : une encre translucide n'est plus mesurable comme un couple de couleurs, alors que c'est la date du jour choisi. Un mélange à 88 % rendait encore 4,23:1 en sombre : la même encre que le chiffre, c'est la taille qui hiérarchise. */ #screen-today .jr-jour.on small { color: var(--bouton-texte); } /* Un jour à venir : il porte un chiffre **et** son jour de semaine, donc deux libellés à lire. `opacity: .45` les délavait avec leur pastille (R05, revue de 03b) ; le couple inactif garde la lecture et dit l'indisponibilité. */ #screen-today .jr-jour:disabled { background: var(--bouton-inactif-fond); color: var(--bouton-inactif-texte); cursor: default; } #screen-today .jr-jour:disabled small { color: var(--bouton-inactif-texte); } #screen-today .jr-jour:focus-visible, #screen-today .jr-objectif:focus-visible, #screen-today .jr-eau-boire:focus-visible, #screen-today .meal-add:focus-visible, #screen-today .meal-plier:focus-visible { outline: 3px solid color-mix(in srgb, var(--terra) 55%, transparent); outline-offset: 2px; } #screen-today .jr-actions { display: flex; flex-wrap: wrap; gap: 8px; } #screen-today .jr-actions:not(:has(> :not([hidden]))) { display: none; } #screen-today .jr-actions .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; } #screen-today .jr-actions .chip .icon { width: 15px; height: 15px; } /* Les repas du mockup : une carte fine, des lignes denses. */ #screen-today .meals-stack { gap: 10px; } #screen-today .meal-card { padding: 8px 12px 10px; border: 1px solid var(--line); box-shadow: none; } #screen-today .meal-head { gap: 8px; } #screen-today .meal-icon { width: 28px; height: 28px; background: none; } #screen-today .meal-icon .icon { width: 22px; height: 22px; } #screen-today .meal-name { flex: 1; min-width: 0; margin: 0; font-size: 25px; font-weight: 700; line-height: 1.2; } #screen-today .meal-kcal { color: var(--espresso); font-size: 22.5px; font-weight: 700; white-space: nowrap; } #screen-today .meal-plier { width: 40px; height: 44px; min-height: 44px; border: none; background: none; color: var(--terra); } #screen-today .meal-plier .icon { width: 18px; height: 18px; transition: transform .2s ease; } #screen-today .meal-card.replie .meal-plier .icon { transform: rotate(-90deg); } #screen-today .meal-lignes { border: 1px solid var(--line); border-radius: 12px; padding: 0 0 0 8px; } #screen-today .meal-lignes .diary-entry { padding: 6px 0; gap: 10px; } #screen-today .meal-lignes .diary-entry + .diary-entry { padding-top: 6px; } #screen-today .meal-lignes .diary-thumb { width: 44px; height: 44px; border-radius: 10px; } #screen-today .meal-lignes .diary-label { font-size: 22.5px; } #screen-today .meal-lignes .diary-kcal { color: var(--muted); font-weight: 400; font-size: 22px; white-space: nowrap; } #screen-today .meal-vide { margin: 0; padding: 12px 0; color: var(--muted); font-size: 21px; } #screen-today .meal-add { display: flex; align-items: center; justify-content: center; gap: 6px; width: auto; height: auto; min-height: 44px; margin: 8px auto 0; padding: 0 18px; border: none; border-radius: 999px; background: color-mix(in srgb, var(--terra) 11%, var(--card)); color: var(--cinnamon); font: inherit; font-size: 22px; font-weight: 500; cursor: pointer; } #screen-today .meal-add .icon { width: 15px; height: 15px; } #screen-today .entry-menu { width: 36px; height: 44px; min-height: 44px; border: none; background: none; } /* Sous 370 px, le total passe sous le nom (320 px : 37 px de débordement) ; à 390 il tient à droite, comme le mockup. */ #screen-today .meal-name { font-size: 24.5px; } #screen-today .meal-kcal { font-size: 21px; } @media (max-width: 369px) { #screen-today .meal-head { display: grid; grid-template-columns: 28px minmax(0, 1fr) 40px; grid-template-areas: "icone nom plier" "icone kcal plier"; column-gap: 8px; } #screen-today .meal-icon { grid-area: icone; } #screen-today .meal-name { grid-area: nom; } #screen-today .meal-kcal { grid-area: kcal; font-size: 21px; font-weight: 600; color: var(--muted); } #screen-today .meal-plier { grid-area: plier; } } .entry-menu { width: 26px; height: 26px; min-height: 26px; border: none; background: none; } .entry-menu .icon { width: 16px; height: 16px; } /* Chaque pixel repris sur la vignette, les écarts et le menu revient au libellé : les noms CIQUAL sont longs par construction (« Pain complet ou intégral (à la farine T150) ») et c'est la seule colonne qui se coupe. */ .diary-entry { display: flex; align-items: center; gap: 8px; padding: 10px 0 0; } .diary-entry + .diary-entry { border-top: 1px solid var(--line); padding-top: 10px; } .diary-thumb { width: 40px; height: 40px; flex: none; border-radius: 12px; overflow: hidden; background: var(--cream); display: flex; align-items: center; justify-content: center; } .diary-thumb img { width: 100%; height: 100%; object-fit: cover; } /* Monochrome, et c'est une règle : une couleur par famille se lirait comme un jugement sur ce qui est mangé, ce que le § 10 refuse jusque dans une pastille de 40 px. Le dessin distingue, la teinte ne classe pas. */ .diary-thumb-empty { color: var(--sand); } .diary-thumb-empty .icon { width: 22px; height: 22px; } .diary-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } /* Deux lignes, pas une. Les libellés CIQUAL sont longs par construction, et la coupe sur une ligne tombait au quinzième caractère : « Pain complet ou i… » n'identifie plus rien. Tant qu'aucune vignette ne porte la reconnaissance, c'est le nom qui la porte seul. */ .diary-label { font-size: 22px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .diary-detail { color: var(--muted); font-size: 19px; } /* En italique, et sur sa propre ligne : la mention doit se distinguer du poids qui la précède — l'un est ce qu'on a pesé, l'autre est ce qu'on a supposé. */ .diary-estime { font-style: italic; display: block; } .diary-kcal { font-size: 21px; font-weight: 600; color: var(--cinnamon); white-space: nowrap; } /* ── Objectif ────────────────────────────────────────────────────────────── */ .danger-link { display: block; margin: 0 auto 8px; color: var(--danger); } /* ── Définir un objectif — P25 de la refonte, 15/09 ───────────────────────── La maquette : ‹ à gauche et « Étape 1 sur 9 » à droite, une frise de points reliés, un grand titre serif avec la marmite souriante qui déborde à droite, des cartes à pictogramme teinté et bouton radio, un encart sauge, et un « Suivant → » plein. Toutes les règles sont scopées sur `#screen-goal`. ⚠️ **Le décor cède au titre, jamais l'inverse** — même arbitrage que `.ip-head` (P14) : la marmite est posée en absolu dans l'angle, le titre lui réserve sa largeur, et sous 360 px elle rétrécit. Sur les étapes chiffrées elle part : un champ et « Suivant » ne se cherchent pas sous le clavier. */ #screen-goal .goal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } #screen-goal .goal-compteur { margin: 0; color: var(--muted); font-size: 22.5px; } /* Les points et leur fil : le fil est le fond de la liste, pas un élément de plus, et les points franchis le recouvrent de terre cuite. */ #screen-goal .goal-frise { list-style: none; margin: 0 0 22px; padding: 0 4px; display: flex; justify-content: space-between; align-items: center; background: linear-gradient(var(--line), var(--line)) center / calc(100% - 8px) 2px no-repeat; } #screen-goal .goal-frise li { width: 12px; height: 12px; border-radius: 50%; background: var(--line); box-shadow: 0 0 0 3px var(--cream); } #screen-goal .goal-frise li.fait { background: var(--terra); } #screen-goal .goal-frise li.courant { width: 22px; height: 22px; background: var(--terra); box-shadow: 0 0 0 3px var(--cream), 0 2px 6px color-mix(in srgb, var(--terra) 35%, transparent); } #screen-goal .goal-corps { position: relative; } /* Mesuré le 15/09 : « Quel est ton objectif ? » fait 247 px en 28 px. La marmite déborde de 16 px dans la gouttière, comme sur la maquette, pour que le titre tienne sur une ligne à 390 px ; les paliers plus bas suivent la même mesure (230 px en 26, 212 px en 24). */ #screen-goal .goal-decor { --decor-w: 118px; position: absolute; top: -18px; right: -16px; width: var(--decor-w); height: calc(var(--decor-w) * .82); pointer-events: none; } #screen-goal .goal-decor img { position: absolute; display: block; } #screen-goal .goal-decor-marmite { right: 6px; bottom: 0; width: 86%; } #screen-goal .goal-decor-tomate { left: -4px; bottom: -4px; width: 30%; } #screen-goal .goal-decor-basilic { right: 10px; top: 0; width: 32%; transform: rotate(18deg); } /* ⚠️ **Sur toutes les étapes** — demandé par Luca le 15/09 : le même traitement d'une question à l'autre. Le titre lui réserve sa largeur. */ #screen-goal .goal-decor { display: block; } #screen-goal .wizard-q, #screen-goal .wizard-hint { padding-right: 96px; } #screen-goal .wizard-hint { margin-bottom: 26px; } #screen-goal .wizard-q { margin: 0 0 8px; font-family: var(--ecriture); font-weight: 400; font-size: 31px; line-height: 1.12; } #screen-goal .wizard-hint { color: var(--muted); font-size: 22.5px; line-height: 1.4; margin: 0 0 20px; } /* ⚠️ La règle large borne `.wizard-choices` à 660 px ; ici l'encart et « Suivant » prennent la colonne, et des cartes plus étroites qu'eux se lisaient décalées. */ #screen-goal .wizard-choices { display: grid; gap: 12px; max-width: none; } #screen-goal .wizard-choices button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; text-align: left; cursor: pointer; color: inherit; border: 1.5px solid var(--line); background: var(--card); border-radius: 16px; padding: 12px 16px; } #screen-goal .wizard-choices button.on { border-color: var(--terra); background: color-mix(in srgb, var(--terra) 9%, var(--card)); } #screen-goal .goal-choix-texte { flex: 1; min-width: 0; } #screen-goal .goal-choix-texte strong { display: block; font-family: var(--ecriture); font-weight: 400; font-size: 26px; line-height: 1.2; } #screen-goal .goal-choix-texte small { display: block; margin-top: 3px; color: var(--muted); font-size: 21px; line-height: 1.35; } #screen-goal .goal-picto { flex: none; width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; } #screen-goal .goal-picto .icon { width: 32px; height: 32px; } #screen-goal .goal-picto-terra { background: color-mix(in srgb, var(--terra) 14%, var(--card)); color: var(--danger); } #screen-goal .goal-picto-sauge { background: color-mix(in srgb, var(--sage) 18%, var(--card)); color: #3F5A45; } #screen-goal .goal-picto-ambre { background: color-mix(in srgb, var(--amber) 18%, var(--card)); color: #8A6212; } #screen-goal .goal-picto-sable { background: color-mix(in srgb, var(--sand) 35%, var(--card)); color: var(--muted); } #screen-goal .goal-picto-rose { background: color-mix(in srgb, var(--coeur) 12%, var(--card)); color: var(--coeur); } /* Le bouton radio : un anneau vide, rempli d'un point quand la carte est choisie. `aria-pressed` le dit sans la couleur. */ #screen-goal .goal-radio { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--sand); background: var(--card); } #screen-goal .wizard-choices button.on .goal-radio { border-color: var(--terra); background: radial-gradient(circle, var(--terra) 0 5px, var(--card) 6px); } #screen-goal .goal-facultatif { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--sage) 14%, var(--card)); color: color-mix(in srgb, var(--sage) 55%, var(--espresso)); font-size: 21px; line-height: 1.45; } #screen-goal .goal-facultatif .icon { flex: none; width: 26px; height: 26px; color: var(--sage); } /* Le chiffre vit dans une carte, comme un choix : même bord, même rayon, le pictogramme à gauche. Le nombre en gros, l'unité à côté — on tape un chiffre, pas un formulaire. */ #screen-goal .goal-saisie { display: flex; align-items: center; gap: 14px; border: 1.5px solid var(--line); background: var(--card); border-radius: 16px; padding: 14px 16px; } #screen-goal .goal-saisie .wizard-field { flex: 1; margin-top: 0; } #screen-goal .goal-saisie:focus-within { border-color: var(--terra); } /* Le résultat : quatre cartes, aux teintes des macros du journal (`MACROS`). */ #screen-goal .goal-cibles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; } #screen-goal .goal-cible { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "picto nom" "picto valeur"; column-gap: 10px; row-gap: 4px; align-items: center; min-width: 0; border: 1.5px solid var(--line); background: var(--card); border-radius: 16px; padding: 12px; font-size: 20px; color: var(--muted); } #screen-goal .goal-cible .goal-picto { grid-area: picto; width: 42px; height: 42px; } #screen-goal .goal-cible .goal-picto .icon { width: 24px; height: 24px; } #screen-goal .goal-cible > span:not(.goal-picto) { grid-area: nom; } #screen-goal .goal-cible input { grid-area: valeur; width: 100%; min-width: 0; border: none; border-bottom: 2px solid var(--line); background: none; color: var(--espresso); font-family: var(--ecriture); font-size: 29px; padding: 0 0 2px; } #screen-goal .goal-cible input:focus-visible { outline: none; border-bottom-color: var(--terra); } #screen-goal .goal-cible:focus-within { border-color: var(--terra); } @media (max-width: 359px) { #screen-goal .goal-cibles { grid-template-columns: 1fr; } } /* Le nombre en gros, l'unité à côté : on tape un chiffre, pas un formulaire. */ #screen-goal .wizard-field { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-top: 12px; } #screen-goal .wizard-field input { width: 4.5ch; border: none; border-bottom: 2px solid var(--line); background: none; color: inherit; text-align: center; font-size: 47.5px; font-family: var(--ecriture); padding: 4px 0; } #screen-goal .wizard-field input:focus-visible { outline: none; border-bottom-color: var(--terra); } #screen-goal .wizard-field span { color: var(--muted); font-size: 24.5px; } /* Les deux molettes du délai : la forme de la feuille de quantité, posée sur la page. La relecture au-dessus dit ce que le serveur recevra (« 3 mois, soit environ 13 semaines »), parce que c'est en semaines qu'il calcule. */ #screen-goal .goal-delai-lu { margin: 0 0 14px; text-align: center; font-size: 24px; color: var(--espresso); } #screen-goal .goal-roues { max-width: 320px; margin: 0 auto; } #screen-goal .wizard-next { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 22px; min-height: 54px; font-size: 24.5px; } #screen-goal .wizard-next .icon { width: 22px; height: 22px; } #screen-goal .wizard-next.goal-sans-fleche .icon { display: none; } #screen-goal .wizard-next:disabled { cursor: default; } #screen-goal .pace-note { margin-bottom: 16px; } #screen-goal .goal-plus-tard { display: block; margin: 8px auto 0; min-height: 44px; font-size: 24px; } #screen-goal #goal-clear { margin-top: 4px; min-height: 44px; } @media (max-width: 389px) { #screen-goal .goal-decor { --decor-w: 104px; } #screen-goal .wizard-q { font-size: 30px; } #screen-goal .wizard-q, #screen-goal .wizard-hint { padding-right: 84px; } } @media (max-width: 359px) { /* 320 px : 280 de contenu, « Quel est ton objectif ? » fait 194 px en 22. */ #screen-goal .goal-decor { --decor-w: 80px; right: -12px; } #screen-goal .wizard-q { font-size: 27.5px; } #screen-goal .wizard-q, #screen-goal .wizard-hint { padding-right: 62px; } #screen-goal .goal-picto { width: 42px; height: 42px; } #screen-goal .wizard-choices button { gap: 10px; padding: 10px 12px; } } .pace-note { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--cream); border: 1px solid var(--line); font-size: 20px; line-height: 1.5; } .pace-note.warn { background: #FFF3E2; border-color: #F0DCBE; color: #7A5320; } /* ── Feuille d'ajout au journal ──────────────────────────────────────────── */ #meal-sheet input, #meal-sheet select, #weightedit-sheet input { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; background: var(--cream); color: inherit; font-size: 24px; min-height: 46px; margin-bottom: 8px; } .meal-free-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .meal-free-row input { margin-bottom: 10px; } /* Les quatre libellés de la grille (C14 saisie libre, C19 création) sont sur une même ligne : `.champ-libelle:first-child` ôte sa marge haute au premier seul, et « kcal » flottait 16 px au-dessus de « Protéines ». Même marge pour les quatre, et alignés sur leur bas — un libellé qui passe à deux lignes reste posé sur son champ. */ .meal-free-row > .champ-libelle { margin: 8px 0 4px; align-self: end; } #meal-sheet .btn-primary, #meal-sheet .btn-ghost { width: 100%; } #meal-sheet .btn-ghost { margin-top: 8px; } .meal-picker { max-height: 46vh; overflow-y: auto; display: grid; gap: 4px; } .meal-pick { border: none; background: none; color: inherit; cursor: pointer; text-align: left; padding: 11px 12px; border-radius: 12px; font-size: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .meal-pick:hover { background: var(--cream); } /* La proposition de découpage — § A3. Teintée sans être alarmante : ce n'est pas une erreur à corriger, c'est un choix à faire, et « garder une fiche » est une réponse aussi valable que l'autre. */ .split-card { border: 1px solid var(--sand); } .split-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 2px; max-height: 34vh; overflow-y: auto; } .split-list li { padding: 8px 0 8px 16px; font-size: 22px; position: relative; border-top: 1px solid var(--line); } .split-list li:first-child { border-top: none; } .split-list li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 5px; height: 5px; border-radius: 50%; background: var(--sand); } /* Le même sujet, vu depuis un import en masse : le lot n'a pas d'écran de relecture, donc le compte doit se lire dans la liste. */ .batch-compilations { margin: 0 0 10px; padding: 9px 12px; border-radius: 12px; background: var(--cream); border: 1px solid var(--sand); color: var(--cinnamon); font-size: 19.5px; } .batch-multi { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--sand); color: var(--espresso); font-size: 17px; font-weight: 600; white-space: nowrap; } .split-actions { display: grid; gap: 8px; } .split-actions .btn-primary, .split-actions .btn-ghost { width: 100%; } /* Chercher un aliment, puis dire combien — § 13. Les largeurs sont préfixées par `#meal-sheet` et non écrites en classe seule : `#meal-sheet input` étend déjà tous les champs de la feuille à 100 %, et un `.qty-row input` à une classe contre un identifiant perdrait sans qu'on voie pourquoi. Même leçon que l'anneau du jour passé à 96 px. */ /* ── Écran « Rechercher » — § 13 ──────────────────────────────────────────── Un écran de détail, donc rien en `position: fixed` ici : la barre de frappe défile avec le reste. C'était tentant de la coller en haut, et c'est le piège du § 2 des conventions — une couche fixe se calcule sur la fenêtre et ignore `--app-w`, il aurait fallu la recadrer ou la déclarer. Une barre qui défile ne coûte rien : on tape une fois, puis on lit. */ .fs-bar { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); padding: 4px 6px 4px 14px; margin-bottom: 14px; } .fs-bar-icon { width: 19px; height: 19px; flex: none; color: var(--muted); } /* **16 px, et ce n'est pas négociable** (§ 1 des conventions) : en dessous, iOS agrandit la page à la mise au point et la laisse décalée quand le clavier se referme. Si la place manque, ce sont les rembourrages qui cèdent. `min-width: 0` parce qu'un champ en flex refuse de rétrécir sous sa taille intrinsèque, et la ligne pousserait les boutons hors du cadre. */ #fs-input { flex: 1; min-width: 0; border: none; background: none; color: inherit; font-family: var(--ecriture); font-size: 24px; padding: 10px 0; min-height: 44px; } #fs-input:focus { outline: none; } /* Chrome et Safari posent leur propre croix dans un `type="search"` : deux croix côte à côte, dont une seule connaît nos états. */ #fs-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .fs-bar-btn { flex: none; width: 38px; height: 38px; min-height: 38px; padding: 0; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; } .fs-bar-btn .icon { width: 18px; height: 18px; } .fs-kinds { margin-bottom: 18px; } .fs-block { margin-bottom: 22px; } .fs-block-title { font-family: var(--ecriture); font-size: 21px; font-weight: 600; margin: 0 0 10px; color: var(--espresso); } /* P27 : une rangée de cartes qui défile au doigt, et qui retient son geste — déclarée dans `RANGEES_LATERALES`. */ .fs-pills { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } /* Une pastille de rappel n'est pas une puce de filtre : elle *ouvre* un aliment au lieu de restreindre une liste. Même forme, teinte plus sourde — `.chip.on` est réservé à ce qui filtre, et les confondre ferait lire les récents comme des filtres actifs. */ .fs-pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--card); color: inherit; border-radius: 999px; padding: 7px 14px 7px 8px; cursor: pointer; font: inherit; font-size: 20px; min-height: 38px; max-width: 100%; } .fs-pill .diary-thumb { width: 24px; height: 24px; border-radius: 50%; } .fs-pill .diary-thumb-empty .icon { width: 14px; height: 14px; } .fs-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fs-card { display: flex; align-items: center; gap: 14px; width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: inherit; cursor: pointer; padding: 16px; text-align: left; margin-bottom: 10px; } .fs-card-icon { display: flex; color: var(--terra); flex: none; } .fs-card-icon .icon { width: 26px; height: 26px; } .fs-card-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .fs-card-lines strong { font-size: 22.5px; } .fs-card-lines small { color: var(--muted); font-size: 19px; } .fs-card-go { color: var(--muted); font-size: 26.5px; flex: none; } /* Le résultat de tête — la réponse la plus probable, sortie du lot pour qu'elle se prenne sans lire les suivantes. Il n'apparaît que sur « Tous » : dans une liste déjà filtrée par nature, distinguer le premier de la liste revient à l'afficher deux fois. */ .fs-top { display: flex; align-items: center; gap: 14px; width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: inherit; cursor: pointer; padding: 14px; text-align: left; margin-bottom: 20px; box-shadow: var(--shadow); } .fs-top .diary-thumb { width: 72px; height: 72px; border-radius: 16px; } .fs-top .diary-thumb-empty .icon { width: 34px; height: 34px; } .fs-top-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .fs-top-name { font-family: var(--ecriture); font-size: 27px; line-height: 1.15; } .fs-top-note { color: var(--muted); font-size: 19.5px; } .fs-top-side { flex: none; text-align: right; display: flex; flex-direction: column; gap: 2px; } .fs-top-kcal { font-size: 26px; font-weight: 600; color: var(--terra); } .fs-top-per { color: var(--muted); font-size: 18px; } /* L'étiquette de nature. Sur `.recall`, elle se pose entre le nom et la valeur ; elle ne prend la place de rien puisque `.recall-text` est le seul élément élastique de la rangée. */ .fs-tag { flex: none; border-radius: 999px; padding: 3px 9px; font-size: 17px; background: var(--cream); color: var(--muted); border: 1px solid var(--line); } .fs-tag-produit { color: var(--sage); } .fs-tag-aliment { color: var(--cinnamon); } /* **Deux lignes, pas une.** Les libellés CIQUAL sont longs par construction, et `.recall-name` coupe sur une ligne : la rangée sortait « Farine de … » et « Pomme Gol… », qui n'identifient plus rien. Exactement le défaut déjà corrigé sur `.diary-label`, revenu par une autre liste — l'étiquette de nature ayant pris en plus sa part de largeur. Le nom gagne de la hauteur plutôt que de la largeur : c'est la seule des deux dimensions dont on dispose, à 390 px avec une valeur et une étiquette sur la même ligne. Scopé à cet écran — les rappels du scan et de l'assiette tiennent sur une ligne et n'ont pas à changer de forme. */ #fs-results .recall-name { white-space: normal; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fs-section { margin-bottom: 20px; } /* La même section, posée sous la bibliothèque — § 13. Deux corrections, et la seconde est la seule qui se voit vraiment : 1. un filet et de l'air, parce que la section suit une grille de vignettes et répond à une **autre** question que la frappe : sans séparation elle se lit comme la fin de la liste de recettes ; 2. **pas de défilement interne.** `.recall-list` est plafonnée à 38vh sur l'écran de recherche, où elle occupe la page entière. Ici la page défile déjà : un second défilement imbriqué au milieu piège le doigt, et les dernières lignes deviennent inatteignables sans viser la bonne zone. */ #library-foods { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); } #library-foods .recall-list { max-height: none; overflow-y: visible; } .fs-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .fs-section-head h2 { font-family: var(--ecriture); font-size: 21px; font-weight: 600; margin: 0; } /* « Tout voir » bascule sur la puce de nature correspondante plutôt que d'allonger la section : c'est la même liste, vue sans ses voisines, et le filtre reste visible en haut — sans quoi on ne saurait plus pourquoi les produits ont disparu. */ .fs-section-all { border: none; background: none; padding: 0; cursor: pointer; color: var(--terra); font: inherit; font-size: 20px; font-weight: 600; } /* L'attribution ODbL — elle suit la donnée partout où elle s'affiche, et une liste de résultats en affiche autant qu'une fiche. Discrète mais présente : la licence demande la mention, pas la mise en avant. */ .fs-section-source { color: var(--muted); font-size: 18px; margin: 6px 0 0; padding: 0 4px; } /* L'état vide n'est plus un cul-de-sac : c'est le moment exact où quelqu'un abandonne la saisie, donc il porte les deux gestes qui la sauvent. Colonne et non ligne : le bouton principal doit être atteignable au pouce sans viser. */ .fs-empty { display: flex; flex-direction: column; gap: 12px; text-align: center; } /* Le même bloc, mais suivi de résultats : il se resserre pour laisser voir la liste sous lui, et se lit comme un avertissement plutôt qu'un aboutissement. */ .fs-approchant { padding: 16px; margin-bottom: 16px; } /* Les mêmes portes, mais **en pied d'une liste qui a répondu** : elles doivent rester atteignables sans jamais concurrencer les résultats. D'où le trait de séparation et le bouton de scan rendu à sa forme discrète — au-dessus, la liste est la réponse ; ici on ouvre seulement une issue à qui n'y a pas trouvé son produit. */ .fs-sorties { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); } .fs-sorties .fs-empty-lead { color: var(--muted); font-size: 20px; } .fs-sorties .btn-primary { background: transparent; color: var(--terra); border: 1px solid var(--line); } .fs-empty-lead { margin: 0; } .fs-empty .btn-primary { margin: 0; min-height: 48px; } .fs-empty .link-btn { padding: 0; } /* ── P27 — la recherche d'aliments du mockup, 15/09 ────────────────────────── ⚠️ **Toutes les règles P27 sont scopées sur `#screen-foodsearch`** : les lignes de résultat (`listeAliments`) sont aussi peintes sous la bibliothèque, qui n'a pas à changer de forme — § *une règle qui ne gagne que par sa place se perd*. */ #screen-foodsearch .fs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } /* « Plusieurs » : la sélection multiple, en pilule comme « Conseils photo » de P26, et pressée quand le mode est actif. */ #screen-foodsearch .fs-multi { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--espresso); font: inherit; font-size: 22.5px; cursor: pointer; } #screen-foodsearch .fs-multi .icon { width: 18px; height: 18px; color: var(--terra); } /* R05, revue du 21/09 : un état retenu est un bouton plein. `--cinnamon` s'éclaircit en sombre pour se lire *sur* le chocolat — sous une encre claire il va donc dans le mauvais sens (2,19:1 mesuré). */ #screen-foodsearch .fs-multi[aria-pressed="true"] { background: var(--bouton-fond); border-color: var(--bouton-fond); color: var(--bouton-texte); } #screen-foodsearch .fs-multi[aria-pressed="true"] .icon { color: var(--bouton-texte); } /* Le titre et la marmite — la même mesure que P25 et P26 : le titre prend la ligne, le décor se pose à côté de la phrase. */ #screen-foodsearch .fs-titre { position: relative; margin-bottom: 14px; } #screen-foodsearch .fs-heading { margin: 0 0 6px; font-family: var(--ecriture); font-weight: 400; font-size: 30.5px; line-height: 1.12; } #screen-foodsearch .fs-sous { margin: 0; padding-right: 108px; min-height: 42px; color: var(--muted); font-size: 22.5px; line-height: 1.4; } #screen-foodsearch .fs-decor { --decor-w: 110px; position: absolute; top: 22px; right: -16px; width: var(--decor-w); height: calc(var(--decor-w) * .82); pointer-events: none; } #screen-foodsearch .fs-decor img { position: absolute; display: block; } #screen-foodsearch .fs-decor-marmite { right: 6px; bottom: 0; width: 86%; } #screen-foodsearch .fs-decor-tomate { left: -4px; bottom: -4px; width: 30%; } #screen-foodsearch .fs-decor-basilic { right: 10px; top: 0; width: 32%; transform: rotate(18deg); } @media (max-width: 389px) { #screen-foodsearch .fs-heading { font-size: 29.5px; } #screen-foodsearch .fs-decor { --decor-w: 96px; } #screen-foodsearch .fs-sous { padding-right: 88px; } } @media (max-width: 359px) { #screen-foodsearch .fs-heading { font-size: 27.5px; } #screen-foodsearch .fs-decor { --decor-w: 76px; top: 20px; } #screen-foodsearch .fs-sous { padding-right: 66px; font-size: 21px; } } /* La barre en carte arrondie, et la photo carrée à côté d'elle. */ #screen-foodsearch .fs-recherche { display: flex; align-items: stretch; gap: 10px; margin-bottom: 14px; } #screen-foodsearch .fs-bar { flex: 1; min-width: 0; margin: 0; border-radius: 16px; padding: 3px 6px 3px 14px; box-shadow: 0 1px 2px rgb(46 36 29 / 5%); } #screen-foodsearch .fs-bar:focus-within { border-color: var(--terra); } #screen-foodsearch .fs-photo { flex: none; width: 52px; min-height: 52px; border-radius: 16px; padding: 0; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--line); background: var(--card); color: var(--cinnamon); } #screen-foodsearch .fs-photo .icon { width: 24px; height: 24px; } /* Les puces de nature, avec leur pictogramme ; la choisie en terre cuite. Elles défilent sur une ligne plutôt que de passer à la suivante. */ /* ⚠️ Mesuré au banc : quatre puces à pictogramme demandent 425 px pour 350 — « Recettes » passait à la ligne. Un choix exclusif ne défile pas (voir `.meal-groups`) : quatre colonnes égales, et le pictogramme ne se montre que là où il tient. */ #screen-foodsearch .fs-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 6px; margin-bottom: 18px; overflow: visible; } #screen-foodsearch .fs-kinds .chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 6px; border-radius: 12px; font-size: 22px; white-space: nowrap; min-width: 0; } #screen-foodsearch .fs-kinds .chip[hidden] { display: none; } @media (max-width: 429px) { #screen-foodsearch .fs-kinds .chip .icon { display: none; } } @media (max-width: 359px) { #screen-foodsearch .fs-kinds .chip { font-size: 20px; padding: 8px 2px; } } #screen-foodsearch .fs-kinds .chip .icon { width: 17px; height: 17px; color: var(--cinnamon); } #screen-foodsearch .fs-kinds .chip.on { background: var(--bouton-fond); border-color: var(--bouton-fond); color: var(--bouton-texte); } #screen-foodsearch .fs-kinds .chip.on .icon { color: #fff; } /* Récents et fréquents : un titre serif avec son pictogramme, puis une rangée de cartes illustrées qui défile au doigt — cinq cartes, la sixième coupée au bord dit qu'il y a une suite. */ #screen-foodsearch .fs-block { margin-bottom: 20px; } #screen-foodsearch .fs-block-title { display: flex; align-items: center; gap: 8px; font-family: var(--ecriture); font-weight: 400; font-size: 27px; margin: 0 0 10px; } #screen-foodsearch .fs-block-title .icon { width: 22px; height: 22px; color: var(--cinnamon); } #screen-foodsearch .fs-pills { margin: 0 -20px; padding: 2px 20px 6px; /* L'aimantation se cale sur le bord du conteneur, pas sur son rembourrage : sans ceci la première carte collait au bord de l'écran. */ scroll-padding-inline: 20px; scroll-snap-type: x proximity; } #screen-foodsearch .fs-pills::-webkit-scrollbar { display: none; } #screen-foodsearch .fs-pill { flex: none; width: 96px; min-height: 0; max-width: none; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 6px 6px 8px; border-radius: 14px; text-align: center; scroll-snap-align: start; } #screen-foodsearch .fs-pill .diary-thumb { width: 100%; height: 72px; border-radius: 10px; background: color-mix(in srgb, var(--terra) 7%, var(--card)); } #screen-foodsearch .fs-pill .diary-thumb img { object-fit: contain; padding: 6px; } #screen-foodsearch .fs-pill .diary-thumb-empty .icon { width: 30px; height: 30px; } #screen-foodsearch .fs-pill .fs-pill-nom { font-size: 19.5px; line-height: 1.25; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #screen-foodsearch .fs-repos-vide { color: var(--muted); font-size: 22px; margin: 4px 0 18px; } @media (hover: hover) and (pointer: fine) { #screen-foodsearch .fs-pill:hover { border-color: var(--terra); } } /* Les deux replis, côte à côte ; empilés sous 360 px. */ #screen-foodsearch .fs-cartes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; } #screen-foodsearch .fs-cartes .fs-card[hidden] + .fs-card { grid-column: 1 / -1; } #screen-foodsearch .fs-card { margin: 0; padding: 12px; gap: 10px; align-items: flex-start; background: color-mix(in srgb, var(--terra) 6%, var(--card)); border-color: color-mix(in srgb, var(--terra) 20%, var(--line)); } #screen-foodsearch .fs-card-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--card); } #screen-foodsearch .fs-card-icon .icon { width: 20px; height: 20px; } #screen-foodsearch .fs-card-lines strong { color: var(--cinnamon); font-size: 22.5px; } #screen-foodsearch .fs-card-lines small { font-size: 19.5px; line-height: 1.3; } #screen-foodsearch .fs-card-go { align-self: center; } @media (max-width: 359px) { #screen-foodsearch .fs-cartes { grid-template-columns: 1fr; } } /* Les résultats : le premier en carte, les sections en listes-cartes à vignettes, kcal à droite et chevron — la ligne ouvre la quantité. */ #screen-foodsearch .fs-top { border-radius: 16px; } #screen-foodsearch .fs-section-head h2 { font-family: var(--ecriture); font-weight: 400; font-size: 26.5px; } #screen-foodsearch #fs-results .recall-list { max-height: none; overflow: visible; border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 0 12px; } #screen-foodsearch #fs-results .recall { gap: 12px; padding: 10px 0; } #screen-foodsearch #fs-results .recall .diary-thumb { width: 44px; height: 44px; border-radius: 10px; flex: none; } #screen-foodsearch #fs-results .recall .diary-thumb img { object-fit: contain; } #screen-foodsearch #fs-results .recall::after { content: "›"; flex: none; color: var(--muted); font-size: 26.5px; line-height: 1; margin-left: -2px; } #screen-foodsearch #fs-results .recall b { text-align: right; white-space: nowrap; } /* La section dit déjà « Aliments » ou « Produits » : l'étiquette répétée sur chaque ligne mangeait la place du nom, coupé à quatre lettres à 390 px. */ #screen-foodsearch #fs-results .fs-tag { display: none; } /* Le dernier recours de la cascade des portions. Discret par défaut — c'est un manque de la fiche, pas une étape de la saisie : la feuille sert d'abord à dire une quantité. Il ne se déploie que si on le demande. */ .food-portion { margin: -6px 0 14px; } .food-portion .link-btn { padding: 0; font-size: 20px; } .food-portion-form .hint { margin: 2px 0 8px; } .qty-row { display: flex; align-items: center; gap: 8px; } #meal-sheet .qty-row input, #weightedit-sheet .qty-row input { width: 6.5rem; margin-bottom: 0; text-align: center; } /* ⛔ **Plus de `width: 100%` sur le primaire** : « Enregistrer » a reçu son « Annuler », et une largeur pleine sur le premier renvoie le second à la ligne suivante — le pied commun (`flex: 1 1 auto`) n'a plus rien à partager. Même défaut que celui corrigé sur `#qs-sheet`. */ /* Le champ et son erreur suivent le retrait du titre (14 px) ; le pied porte déjà le sien. */ #weightedit-sheet .weightedit-row, #weightedit-sheet .form-error { margin-inline: 14px; } #weightedit-sheet .weightedit-row { margin-top: 4px; } /* L'aperçu à droite du champ : c'est le chiffre qu'on vient corriger, il se lit sur la même ligne que la masse plutôt qu'en dessous. */ #weightedit-apercu { color: var(--cinnamon); font-size: 22px; } .emenu-lead { margin: 14px 0 8px; } /* Les quatre repas suivent le retrait du titre et de l'amorce : trois bords différents dans une feuille de quatre lignes se voient tout de suite. */ #emenu-sheet .meal-groups { padding-inline: 14px; } .qty-unit { font-size: 22.5px; } .qty-grams { margin-left: auto; color: var(--muted); font-size: 19.5px; } /* ── Les molettes de quantité ──────────────────────────────────────────────── Elles remplacent un champ où l'on tapait un décimal, et où « 0,5 » devenait « 05 » sans le moindre signe (§ « la virgule décimale » des tests). Ce n'est donc pas de la décoration, et **la refonte du 13/08 ne devait pas ramener un champ de saisie** : elle change la forme, pas le principe. `scroll-snap-type: y mandatory` fait tout le travail d'aimantation, sans une ligne de JavaScript : le navigateur cale la molette sur un cran, et on se contente de lire lequel. Un glissement au doigt donne donc le même résultat qu'un appui, ce qui n'aurait pas été vrai avec une position calculée à la main. Le rembourrage haut et bas vaut exactement la moitié de la hauteur visible moins un cran : sans lui, le premier et le dernier cran ne peuvent jamais atteindre le centre, donc « 0 » et la dernière valeur seraient inatteignables. D'où le couple `--roue-h` / `.roue-pad`, qui ne doit **jamais** se dénouer. */ .roues { display: grid; /* Une seule colonne par défaut : la quantité. L'unité se choisit sur des puces au-dessus, sauf dans la feuille de relecture (`.roues-2`). */ grid-template-columns: 1fr; gap: 10px; } /* Deux colonnes — quantité, unité — dans la feuille de relecture. Elles sont **égales** : il y en avait trois (`1fr 1fr 1.6fr`), et c'est la colonne des fractions qui a disparu en fusionnant avec celle des entiers. Sur 390 px, trois colonnes ne montraient rien de lisible. */ /* La colonne d'unité est **un peu plus large** : elle porte à nouveau la masse (« portion · 30 g »), qui est la question qu'on se pose en choisissant entre « portion » et « tasse ». Un chiffre tient partout, ce libellé non. */ .roues-2 { grid-template-columns: 1fr 1.3fr; } /* Un cran plus petit dans la colonne d'unité, pour que « c. à soupe · 15 g » tienne sans se tronquer — et pas en dessous de 16 px, le plancher du § 1. */ .roue-unite .cran { font-size: 24px; } .roue { /* Cinq crans de 44 px. Il y en avait trois : on lisait trois valeurs et on devinait le reste, ce qui était la deuxième critique de la maquette. La place vient de la colonne de fractions supprimée — rien n'a été pris ailleurs. */ --roue-h: 220px; height: var(--roue-h); overflow-y: auto; scroll-snap-type: y mandatory; /* Aimantation nette au doigt sur iOS, où le défilement par inertie continue sinon bien après le geste. */ -webkit-overflow-scrolling: touch; scrollbar-width: none; background: var(--cream); border-radius: 18px; border: 1px solid var(--line); position: relative; } .roue::-webkit-scrollbar { display: none; } /* (220 − 44) / 2. Lié à `--roue-h` par le calcul et non recopié : les deux valeurs se sont déjà retrouvées à devoir changer ensemble. */ .roue-pad { height: calc((var(--roue-h) - 44px) / 2); } .cran { display: block; width: 100%; height: 44px; line-height: 44px; scroll-snap-align: center; border: none; background: none; padding: 0; /* 16 px est le plancher du § 1 des conventions : en dessous, iOS agrandit la page à la mise au point et la laisse décalée. Ici on est à 19, et le cran retenu monte à 22 — un sélecteur se lit d'un coup d'œil. */ font: inherit; font-size: 26px; color: var(--muted); text-align: center; cursor: pointer; /* ⛔ **`font-size` n'est pas dans la liste, et ne doit pas y revenir.** Il y était, et c'était la moitié des saccades de la molette : une transition sur `font-size` relayoute le cran **à chaque image** pendant 120 ms, et un glissement un peu vif en franchit vingt — donc vingt relayouts qui se chevauchent, sur le fil qui doit faire défiler. La taille change toujours, mais d'un coup : un relayout par cran franchi au lieu de sept. `color` et `background-color` ne peignent que, elles peuvent s'animer. */ transition: color .12s, background-color .12s; } /* Le cran retenu porte une **pastille**, et c'est ce qui a remplacé la bande centrale décorative posée en `::before` sur `.roues`. Deux raisons : la bande traversait toutes les colonnes d'un seul trait, donc elle soulignait autant les crans voisins que le bon ; et sa teinte annoncée était `var(--ink)`, un jeton **qui n'existe pas dans la palette** — le cran retenu n'a donc jamais eu sa couleur, il n'était que plus gros. `color-mix` sur `--terra` suit les deux thèmes tout seul, l'accent étant redéfini en sombre. */ .cran[aria-selected="true"] { color: var(--terra); font-size: 27.5px; font-weight: 600; background: color-mix(in srgb, var(--terra) 12%, transparent); border-radius: 12px; } /* La relecture de ce qui vient d'être choisi, sortie de la grille des molettes : elle y était posée en `grid-column: 1 / -1`, ce qui la liait à un nombre de colonnes dont elle n'a que faire. */ .roue-lecture { display: flex; align-items: center; gap: 8px; margin-top: 12px; /* Elle ouvre la saisie exacte : c'est là qu'on appuie pour corriger un chiffre, et une valeur encadrée a tout d'une case de saisie. Le bouton nommé juste en dessous reste le contrôle accessible ; ceci est le raccourci. */ cursor: pointer; } .roue-lecture b { font-size: 26.5px; } /* Quand la relecture est seule à porter le résultat — la feuille de relecture n'a ni total ni macros en dessous — elle devient l'encadré central de la maquette plutôt qu'une ligne de texte au fil de l'eau. */ .roue-lecture-seule { justify-content: center; border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 14px; background: var(--cream); } .roue-lecture-seule b { color: var(--terra); font-size: 27px; } /* L'identité de l'ingrédient en tête de feuille : vignette, nom, nature. La vignette est monochrome comme partout — une couleur par famille se lirait comme un jugement, ce que le § 10 interdit jusque dans une pastille. */ .qs-identite { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .qs-vignette { flex: none; } .qs-vignette .diary-thumb { width: 40px; height: 40px; } .qs-lignes { min-width: 0; } .qs-lignes .sheet-title { margin: 0; } .qs-nature { display: block; color: var(--muted); font-size: 19.5px; } /* **L'action principale prend toute la largeur, le recours passe dessous.** `.btn-primary` n'est pas large par défaut, et `width: 100%` n'était posé que sur `#meal-sheet` : ici « Valider » et « Je ne sais pas » se retrouvaient côte à côte sur la même ligne, à se disputer le regard comme deux options de même rang. Or elles ne le sont pas — l'une valide, l'autre renonce à répondre. Les 44 px sur le lien sont la cible tactile minimale (§ 11) : `.link-btn` pose `min-height: 0`, ce qui convient dans un paragraphe et pas sous un bouton. */ /* `#conv-sheet` a rejoint le pied commun le 20/09 : « Annuler » et « Ajouter à ma liste » s'y partagent la ligne, et un `width: 100%` sur le second les aurait empilés. ⚠️ **`#qs-sheet .btn-primary { width: 100% }` a été retiré pour la même raison** : « Valider » y a reçu son « Annuler », et une largeur pleine sur le premier renvoyait le second à la ligne suivante. Le pied commun pose déjà les 44 px ; ce qui reste ici est le lien de recours, qui garde sa ligne entière et l'écart qui le détache des boutons de rang. */ #qs-sheet .link-btn, #conv-sheet .link-btn { display: block; width: 100%; margin-top: 8px; min-height: 44px; } /* ── C23 dans le carnet — DA01, 21/09, étendu en 03d-2 ─────────────────────── ⛔ **Le moteur ne bouge pas.** `FRACTIONS`, `cransQuantite`, `peindreRoue`, `poserMolettes`, l'aimantation et le couple `--roue-h` / `.roue-pad` sont ceux du 13/08 : ce qui suit est une peau. ⚠️ **Le porteur est passé de `#qs-sheet` à `.carnet` — 03d-2.** C14 partage exactement ce moteur (`food-roues`, `recipe-roues`) et sa feuille est entrée au carnet : laisser la peau sur le seul identifiant de C23 aurait mis des molettes crème bordées de gris au milieu d'un papier ivoire, dans la feuille la plus ouverte de l'application. ⛔ **Et `goal-roue-*` (P25) ne bouge toujours pas** : son écran n'est pas une feuille du carnet, donc aucun de ces sélecteurs ne l'atteint — c'est pour ça que rien ici n'est écrit sur `.roues` ou `.cran` nus. Le rendu de C23 est **inchangé**, `#qs-sheet` portant déjà `.carnet` depuis les pilotes. */ /* Les deux molettes vivent dans **un** cadre ivoire, avec leurs étiquettes en première rangée de la grille. */ .carnet .roues { gap: 4px 10px; padding: 10px 14px 6px; } /* ⚠️ **L'étiquette d'unité disparaît avec sa molette.** `poserMolettesUnite` masque la colonne d'unité quand l'aliment n'en propose qu'une et rend la grille à une colonne (C14) ; les deux étiquettes se retrouvaient alors empilées au-dessus des seules quantités. C23 déclare `.roues-2` en dur et n'est pas concernée. */ .carnet .roues:not(.roues-2) .carnet-etiquette + .carnet-etiquette { display: none; } .carnet .roue { background: none; border: none; border-radius: 14px; } /* Le cran retenu est la valeur qu'on vient lire : bande sauge, encre du carnet, et le degré « nombre » de l'échelle. Les voisins restent lisibles, plus discrets — l'encre douce, pas le gris des écrans (3,84:1 sur cet ivoire). */ .carnet .cran { color: var(--carnet-encre-douce); } .carnet .cran[aria-selected="true"] { background: var(--carnet-sauge); color: var(--carnet-encre); border: 1px solid var(--carnet-sauge-filet); border-radius: 12px; font-size: 34px; font-weight: var(--g-titre); } /* L'unité garde un cran plus petit : « c. à soupe · 15 g » doit tenir. */ .carnet .roue-unite .cran[aria-selected="true"] { font-size: 26px; } /* La relecture — c'est elle qui ouvre la saisie exacte — devient une ligne calme sous le cadre, et non un second encadré qui concurrencerait la molette. */ .carnet .roue-lecture-seule { margin-top: 12px; background: none; border: 1px dashed var(--carnet-filet); color: var(--carnet-encre); } /* ⚠️ **`--cinnamon` et non `--bouton-fond` — corrigé le 22/09, mesuré.** `--bouton-fond` est le **remplissage** d'un bouton (règle de couleur du lot 03a) ; employé comme encre sur le papier sombre il rend **3,09:1**, sous le seuil d'un libellé comme sous celui d'un objet. `--cinnamon` est la terre cuite *d'encre* de l'application — celle de `.food-total b` depuis le 13/08 — et rend 5,43:1 en clair, 7,06:1 en sombre. ⛔ **En clair les deux jetons valent le même #A94A2A** : le rendu de C23 ne change qu'en thème sombre, et seulement pour s'y lire. Le banc composants ne l'avait pas vu : il mesure les **commandes**, et un nombre relu n'en est pas une. */ .carnet .roue-lecture-seule b { color: var(--cinnamon); } /* La ligne de relecture de C14 : même encre, et le nombre à la teinte d'action. */ .carnet .roue-lecture { color: var(--carnet-encre); } .carnet .roue-lecture b { color: var(--cinnamon); font-weight: var(--g-titre); } .carnet .qty-unit { color: var(--carnet-encre); font-size: var(--t-unite); } .carnet .qty-grams { color: var(--carnet-encre-douce); font-size: var(--t-appoint); } #qs-sheet .qs-nature { color: var(--carnet-encre-douce); } /* La vignette de l'aliment est la seule illustration de cette feuille : elle vient du serveur (famille ou dessin d'ingrédient), pas du décor. */ #qs-sheet .qs-vignette .diary-thumb { width: 44px; height: 44px; } /* Le total est ce qu'on vient chercher : il porte la taille et la teinte du chiffre, les macros restent en appui derrière. */ /* ⚠️ **La hauteur est réservée, pleine ou vide.** `renderFoodTotal` vide cette ligne quand la quantité est nulle : elle apparaissait donc en passant de 0 à 1, la feuille grandissait d'autant, et comme elle est ancrée en bas, **tout le contenu sautait vers le haut** au premier tour de molette. Signalé le 13/08. Réserver la place rend l'apparition sans effet sur la mise en page. */ .food-total { margin: 12px 0 10px; color: var(--muted); font-size: 20px; /* 33 px et non 30 : la ligne remplie mesure 32,5 px, le `` des kcal étant en serif 21 px. Mesuré, pas estimé — 30 px laissaient 3 px de saut résiduel, ce qui suffit à se voir sur une feuille ancrée en bas. */ min-height: 33px; } .food-total b { font-family: var(--ecriture); font-size: 27px; color: var(--cinnamon); margin-right: 3px; } #meal-sheet .link-btn { display: block; margin: 12px auto 0; } /* ── Scanner mon assiette (§ 8) — P26, refonte du 15/09 ─────────────────── */ /* ⚠️ **Toutes les règles P26 sont scopées sur `#screen-plate`** — § *une règle qui ne gagne que par sa place se perd*. `.plate-screen` reste le nom que la règle de recadrage des couches fixes connaît, en tête de la feuille. */ .plate-screen { /* Largeur et centrage : recadrage des couches fixes, en haut de la feuille. */ /* M01 : sous la bande « Pas de connexion » (z 70), jamais dessous. */ position: fixed; top: var(--hors-reseau-h, 0px); bottom: 0; z-index: 45; overflow-y: auto; background: var(--cream); padding: 14px 20px calc(24px + env(safe-area-inset-bottom)); } /* ⚠️ **Au-delà de 820 px, la colonne se décalait à droite** — relevé le 22/09, très visible sur l'écran caméra (05C). Deux causes. (1) La règle commune des couches fixes centre sur la colonne **à droite du rail** (`--rail-w`) ; or cet écran masque la barre d'onglets, donc le rail : il se centre sur la fenêtre. (2) La gouttière commune des paliers larges, `(100 % - --lecture-w) / 2`, prend ses 100 % sur le bloc conteneur — la **fenêtre** pour une couche fixe, pas l'écran : elle rognait la colonne de lecture (424 px au lieu de 700 à 1 280 px). Ici, la largeur de l'écran est écrite en toutes lettres. Les autres couches fixes gardent la règle commune. */ #screen-plate { left: 50%; width: min(var(--app-w), 100%); } @media (min-width: 820px) { #screen-plate { padding-inline: max(20px, calc((min(var(--app-w), 100vw) - var(--lecture-w)) / 2)); } } #screen-plate .plate-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } /* « Conseils photo » : une pilule qui replie et déplie les quatre tuiles. Un bouton qui ne change rien est pire qu'un bouton absent (§ *où c'est rangé*). */ #screen-plate .plate-conseils { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--espresso); font: inherit; font-size: 22.5px; cursor: pointer; } #screen-plate .plate-conseils .icon { width: 20px; height: 20px; color: var(--terra); } #screen-plate .plate-conseils[aria-expanded="true"] { border-color: color-mix(in srgb, var(--terra) 40%, var(--line)); background: color-mix(in srgb, var(--terra) 9%, var(--card)); } /* Le titre et sa phrase, la marmite à droite — le même décor que P25, avec la même mesure : le titre réserve sa largeur au dessin. */ #screen-plate .plate-titre { position: relative; margin-bottom: 14px; } /* ⚠️ Mesuré au banc : « Photographie ton repas » fait 290 px en 28 px et passait sur deux lignes à côté de la marmite. Le titre prend donc toute la ligne, en 27 px, et le décor se pose à côté de la phrase — comme sur la maquette, où la marmite descend sous le haut du titre. */ #screen-plate .plate-heading { margin: 0 0 6px; font-family: var(--ecriture); font-weight: 400; font-size: 30.5px; line-height: 1.12; } #screen-plate .plate-sous { margin: 0; padding-right: 108px; color: var(--muted); font-size: 22.5px; line-height: 1.4; } #screen-plate .plate-decor { --decor-w: 118px; position: absolute; top: 26px; right: -16px; width: var(--decor-w); height: calc(var(--decor-w) * .82); pointer-events: none; } #screen-plate .plate-decor img { position: absolute; display: block; } #screen-plate .plate-decor-marmite { right: 6px; bottom: 0; width: 86%; } #screen-plate .plate-decor-tomate { left: -4px; bottom: -4px; width: 30%; } #screen-plate .plate-decor-basilic { right: 10px; top: 0; width: 32%; transform: rotate(18deg); } /* Sur le résultat, la place du décor est celle de la photo : le titre reprend toute la ligne. */ #screen-plate.resultat .plate-decor, #screen-plate.lecture .plate-decor { display: none; } #screen-plate.resultat .plate-sous { padding-right: 0; } #screen-plate .plate-sous { min-height: 64px; } #screen-plate.resultat .plate-sous, #screen-plate.lecture .plate-sous { min-height: 0; padding-right: 0; } @media (max-width: 389px) { #screen-plate .plate-heading { font-size: 29.5px; } #screen-plate .plate-decor { --decor-w: 104px; top: 24px; } #screen-plate .plate-sous { padding-right: 92px; } } @media (max-width: 359px) { #screen-plate .plate-heading { font-size: 27.5px; } #screen-plate .plate-decor { --decor-w: 80px; top: 22px; } #screen-plate .plate-sous { padding-right: 70px; font-size: 21px; } } /* Les quatre conseils : un pictogramme dans un rond pâle, le titre, la phrase. Quatre colonnes, qui passent à deux sous 360 px — c'est la même grille. */ /* ⚠️ Retour de Luca du 15/09 : « les boutons prennent énormément de place ». Pictogramme de 40 px et une phrase courte : les conseils se lisent en un coup d'œil, ils ne repoussent pas le cadre sous le pli. */ #screen-plate .plate-tips { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; text-align: center; } #screen-plate .plate-tips li { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; } #screen-plate .plate-tips b { font-size: 19.5px; font-weight: 600; line-height: 1.2; } #screen-plate .plate-tips small { color: var(--muted); font-size: 18px; line-height: 1.25; } #screen-plate .plate-tips .plate-tip-icone { width: 40px; height: 40px; } #screen-plate .plate-tips .plate-tip-icone .icon { width: 21px; height: 21px; } #screen-plate .plate-tip-icone { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--terra) 20%, var(--cream)); color: var(--cinnamon); } #screen-plate .plate-tip-icone .icon { width: 26px; height: 26px; } @media (max-width: 359px) { #screen-plate .plate-tips { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ── L'écran de capture — R11, 22/09 ; plein cadre, 05C ──────────────────────── Retour de Luca sur iPhone du 22/09 (L02/L03) : « le cadre est joli mais beaucoup trop petit ». Le flux prenait la moitié de la hauteur : en-tête, titre, barre et « Saisir un code-barres à la main » mangeaient le reste. → À l'étape caméra, **le cadre est l'écran** : `.plate-capture` prend la hauteur visible (rembourrages et zones sûres déduits) et le cadre la remplit. Retour et « Conseils photo » flottent sur son bord haut, la barre (galerie, déclencheur, recherche) sur son bord bas, sur un dégradé. Les quatre se posent dans **la même case de grille** que le cadre : aucun calcul de hauteur, et une carte ajoutée au-dessus — le suivi refusé — prend sa rangée sans pousser la barre sous le pli. Le titre reste le titre de la page pour les lecteurs d'écran ; à l'œil, la pastille d'état du cadre en tient lieu. Conseils, diamètre, astuce, code à la main et « Déjà mangé » suivent **sous** le cadre, au défilement ; « Conseils photo » y conduit. Plancher de 440 px : sur un écran très bas (paysage), la page défile plutôt que d'écraser le cadre. Hors étape caméra, la hauteur redevient naturelle. */ #screen-plate.camera .plate-capture { --barre-h: 118px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 100%; min-height: 440px; } /* ⚠️ Le rembourrage de `.plate-screen` perdait déjà contre `.screen:not(.pane)` (28 px en haut, la réserve de la barre d'onglets en bas) — une barre que cet écran masque. À l'étape caméra, l'identifiant le reprend : le cadre touche presque les bords, sous la barre d'état et au-dessus de l'indicateur d'accueil (`env(safe-area-inset-*)`). Les autres étapes gardent le rembourrage commun. */ #screen-plate.camera { padding: calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom)); } /* Au-delà de 820 px, la gouttière large (voir `#screen-plate` plus haut) : le cadre garde la colonne de lecture, les conseils dessous aussi. */ @media (min-width: 820px) { #screen-plate.camera { padding-inline: max(20px, calc((min(var(--app-w), 100vw) - var(--lecture-w)) / 2)); } } #screen-plate.camera .plate-refus { grid-row: 1; margin: 0 0 8px; } #screen-plate.camera .plate-head, #screen-plate.camera .plate-view, #screen-plate.camera .plate-barre { grid-row: 2; grid-column: 1; } #screen-plate.camera .plate-titre { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Retour et « Conseils photo » posés sur le flux : fond sombre opaque à 70 %, texte ivoire — lisibles sur n'importe quelle image comme sur le cadre pâle de l'attente. La bande elle-même laisse passer les touches. */ #screen-plate.camera .plate-head { align-self: start; position: relative; z-index: 2; margin: 0; padding: 10px; pointer-events: none; } #screen-plate.camera .plate-head > * { pointer-events: auto; } #screen-plate.camera #plate-close, #screen-plate.camera .plate-conseils { min-height: 44px; border: 1px solid rgb(255 248 239 / 30%); background: rgb(33 25 20 / 70%); color: #fff8ef; } #screen-plate.camera #plate-close { width: 44px; height: 44px; } #screen-plate.camera .plate-conseils { padding: 6px 14px; font-size: 21px; } #screen-plate.camera .plate-conseils .icon { color: #ffc9a3; } #screen-plate.camera .plate-conseils[aria-expanded="true"] { border-color: rgb(255 201 163 / 60%); background: rgb(33 25 20 / 78%); } /* Le cadre : le flux vivant, puis la photo prise. Hors caméra (attente, refus, pas de caméra), un fond pâle au bord pointillé et l'appareil dessiné ; flux ou photo, un fond noir sans bord. */ #screen-plate .plate-view { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border-radius: 22px; aspect-ratio: 4 / 3; margin: 0 0 12px; border: 2px dashed color-mix(in srgb, var(--terra) 45%, var(--line)); background: color-mix(in srgb, var(--terra) 6%, var(--card)); color: var(--cinnamon); } #screen-plate.camera .plate-view { align-self: stretch; min-height: 0; aspect-ratio: auto; margin: 0; } #screen-plate .plate-view.vivante, #screen-plate .plate-view.pleine { border: none; background: #1c1612; } #screen-plate .plate-view video, #screen-plate .plate-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #screen-plate .plate-view video { opacity: 0; transition: opacity .2s ease; } #screen-plate .plate-view.vivante video { opacity: 1; } #screen-plate .plate-cadre-invite { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; } #screen-plate .plate-cadre-invite .icon { width: 48px; height: 48px; opacity: .75; } #screen-plate .plate-cadre-invite[hidden], #screen-plate .plate-view.vivante .plate-cadre-invite, #screen-plate .plate-view.pleine .plate-cadre-invite { display: none; } /* Les quatre angles de visée, seulement sur le flux vivant. À l'étape caméra, ils bornent le **centre** du cadre : c'est la zone que le lecteur des iPhone décode (`ZONE_LECTURE`, 70 % × 50 % de l'image, 05C) — viser là, c'est viser ce qui se lit. */ #screen-plate .plate-visee { position: absolute; inset: 18px 18px 72px; pointer-events: none; display: none; } #screen-plate.camera .plate-visee { inset: 25% 12%; } #screen-plate .plate-view.vivante:not(.pleine) .plate-visee { display: block; } #screen-plate .plate-visee i { position: absolute; width: 34px; height: 34px; border: 3px solid rgb(255 255 255 / 88%); border-radius: 4px; } #screen-plate .plate-visee i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 14px; } #screen-plate .plate-visee i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 14px; } #screen-plate .plate-visee i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 14px; } #screen-plate .plate-visee i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 14px; } /* Ce que fait la caméra, en bas du cadre : une pastille sombre lisible sur n'importe quelle image (texte clair sur fond opaque, jamais sur la vidéo). */ #screen-plate .plate-etat { position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0 auto; width: fit-content; max-width: calc(100% - 24px); padding: 7px 14px; border-radius: 16px; background: rgb(33 25 20 / 78%); color: #fff8ef; font-size: 19px; line-height: 1.3; text-align: center; } #screen-plate .plate-view:not(.vivante):not(.pleine) .plate-etat { background: var(--card); color: var(--espresso); border: 1px solid var(--line); } /* La barre flotte sur le bas du cadre : état et avis se posent au-dessus. */ #screen-plate.camera .plate-etat, #screen-plate.camera .plate-avis { bottom: calc(var(--barre-h) + 6px); } /* Ce qui demande un geste : une carte posée sur le bas du cadre. */ #screen-plate .plate-avis { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 12px 14px; border-radius: 18px; background: var(--card); color: var(--espresso); border: 1px solid var(--line); box-shadow: 0 6px 18px rgb(0 0 0 / 18%); font-size: 20px; line-height: 1.35; } #screen-plate .plate-avis p { margin: 0 0 8px; } #screen-plate .plate-avis-actions { display: flex; flex-wrap: wrap; gap: 8px; } #screen-plate .plate-avis-actions button { flex: 1 1 auto; min-height: 44px; margin: 0; padding: 0 14px; font-size: 20px; } /* Pendant la lecture, la photo se voile : un calque de `background` sur une couche immobile, pas un flou (§ 6). */ #screen-plate.lecture .plate-view::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgb(46 36 29 / 45%)); } /* La barre de la maquette : Galerie, déclencheur rond, recherche. Trois colonnes, le déclencheur toujours centré ; les deux côtés se partagent le reste et leurs libellés passent sur deux lignes plutôt que de déborder. */ #screen-plate .plate-barre { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 12px 0 2px; } /* Sur le flux : un dégradé sombre porte la barre, les coins suivent le cadre. « Galerie » passe en ivoire ; la pilule de recherche garde sa surface. */ #screen-plate.camera .plate-barre { align-self: end; position: relative; z-index: 2; box-sizing: border-box; min-height: var(--barre-h); padding: 26px 12px 10px; border-radius: 0 0 22px 22px; background: linear-gradient(rgb(20 15 12 / 0%), rgb(20 15 12 / 72%) 45%); } #screen-plate.camera .plate-pellicule { color: #fff8ef; } #screen-plate .plate-pellicule { justify-self: start; display: inline-flex; flex-direction: column; align-items: center; gap: 3px; min-width: 64px; min-height: 44px; padding: 2px 4px; border: none; background: none; color: var(--espresso); font: inherit; font-size: 19px; cursor: pointer; } #screen-plate .plate-pellicule-icone { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--card); color: var(--cinnamon); } #screen-plate .plate-pellicule-icone .icon { width: 24px; height: 24px; } /* Le déclencheur : un disque terre cuite dans son anneau, 72 px. */ #screen-plate .plate-shoot { width: 74px; height: 74px; padding: 5px; border-radius: 50%; border: 3px solid var(--terra); background: var(--cream); cursor: pointer; } #screen-plate .plate-shoot-disque { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--terra); } #screen-plate .plate-shoot:active .plate-shoot-disque { transform: scale(.94); } #screen-plate .plate-rechercher { justify-self: end; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; max-width: 100%; padding: 6px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--terra) 35%, var(--line)); background: color-mix(in srgb, var(--terra) 10%, var(--card)); color: var(--espresso); font: inherit; font-size: 19px; line-height: 1.15; text-align: left; cursor: pointer; } #screen-plate .plate-rechercher .icon { width: 20px; height: 20px; flex: none; color: var(--terra); } /* Filet de sécurité du texte agrandi : un mot trop long se coupe plutôt que de faire défiler l'écran en largeur. */ #screen-plate .plate-rechercher span { min-width: 0; overflow-wrap: anywhere; } /* 320 px : 93 px par côté. La loupe cède sa place au libellé, le déclencheur perd 8 px — mesuré au banc, « Rechercher » débordait de 4 px. */ @media (max-width: 359px) { #screen-plate .plate-shoot { width: 66px; height: 66px; } #screen-plate .plate-rechercher { padding: 6px 10px; font-size: 18.5px; } #screen-plate .plate-rechercher .icon { display: none; } } #screen-plate .plate-pellicule:focus-visible, #screen-plate .plate-shoot:focus-visible, #screen-plate .plate-rechercher:focus-visible { outline: 3px solid var(--terra); outline-offset: 3px; } #screen-plate .plate-code { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin: 8px 0 10px; padding: 0; border: none; background: none; color: var(--cinnamon); font: inherit; font-size: 22px; cursor: pointer; } #screen-plate .plate-code .icon { width: 18px; height: 18px; } #screen-plate > .form-error { margin: 10px 0 0; } /* Le suivi refusé : une carte qui dit ce qui va se passer, avant de payer une lecture pour rien. */ #screen-plate .plate-refus { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--danger) 8%, var(--card)); border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--line)); font-size: 21px; line-height: 1.45; } #screen-plate .plate-refus p { margin: 0 0 4px; } /* L'impasse : ce que le modèle n'a pas su lire, et la porte du dessous. Encadrée parce qu'elle porte deux choses qui vont ensemble — la raison et le geste — et qu'elle apparaît entre le déclencheur et « Déjà mangé », où rien ne les relierait. */ #screen-plate .plate-impasse { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); text-align: center; } #screen-plate .plate-impasse .form-error { margin: 0 0 6px; } /* Le diamètre d'assiette : une carte, le pictogramme à gauche, le champ à droite — la forme des cartes de mesure de P25. ⚠️ Le champ garde ses 16 px (§ 1) : ce sont le libellé et les gouttières qui cèdent, jamais le texte. */ #screen-plate .plate-scale { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; border: 1.5px solid var(--line); background: var(--card); border-radius: 16px; padding: 12px 14px; } #screen-plate .plate-scale:focus-within { border-color: var(--terra); } #screen-plate .plate-scale .plate-tip-icone { width: 44px; height: 44px; } #screen-plate .plate-scale .plate-tip-icone .icon { width: 22px; height: 22px; } #screen-plate .plate-scale-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } #screen-plate .plate-scale label { font-size: 22.5px; font-weight: 600; } #screen-plate .plate-scale small { color: var(--muted); font-size: 19px; line-height: 1.35; } #screen-plate .plate-scale .scan-qty { flex: none; } #screen-plate .plate-scale input { margin-bottom: 0; width: 4.4rem; font-size: 24px; background: var(--cream); color: var(--espresso); border: 1px solid var(--line); border-radius: 10px; } @media (max-width: 359px) { #screen-plate .plate-scale { flex-wrap: wrap; } #screen-plate .plate-scale .scan-qty { margin-left: 56px; } } /* L'astuce, comme sur la maquette : la marmite, un titre serif, une phrase. */ #screen-plate .plate-astuce { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); } #screen-plate .plate-astuce img { flex: none; width: 64px; height: 64px; object-fit: contain; } #screen-plate .plate-astuce b { display: block; font-family: var(--ecriture); font-weight: 400; font-size: 25px; margin-bottom: 2px; } #screen-plate .plate-astuce p { margin: 0; color: var(--muted); font-size: 21px; line-height: 1.4; } /* ── Rappeler ce qui a déjà été enregistré ─────────────────────────────────── Le repas photographié (§ 14) et le produit scanné (§ 13 bis) posent la même question — « c'est encore la même chose qu'hier » — et méritent donc le même objet : une liste sous le geste principal, jamais au-dessus. Rappeler est un raccourci ; scanner reste le geste. */ .recall-block { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; } .recall-block h2 { font-size: 21px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; } /* Bornée : la feuille de scan s'ouvre déjà avec un aperçu caméra, et une liste qui pousse le tout hors de l'écran sur un petit téléphone ne rappelle rien. */ .recall-list { max-height: 38vh; overflow-y: auto; } /* En **tête** d'une feuille, et non en pied : le filet et la marge du dessus ne séparent alors plus rien — ils décollent le bloc du titre. On les déplace en dessous, où ils font ce qu'on leur demande : séparer les propositions des quatre sources qui suivent. */ #meal-recurring-block { margin-top: 0; margin-bottom: 6px; border-top: none; border-bottom: 1px solid var(--line); padding-top: 0; padding-bottom: 8px; } .recall { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 0; border: none; border-top: 1px solid var(--line); background: none; color: inherit; text-align: left; font: inherit; min-height: 52px; cursor: pointer; } .recall:first-child { border-top: none; } .recall-text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .recall-name { font-size: 22.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .recall-note { color: var(--muted); font-size: 18px; } .recall b { font-size: 21px; font-weight: 600; color: var(--cinnamon); } /* L'attente : la marmite souriante qui se balance doucement — un `transform`, jamais une propriété de mise en page (§ 6), et l'échappatoire plus bas. */ #screen-plate .plate-loading { text-align: center; padding: 6px 0 30px; } #screen-plate .plate-loading-marmite { width: 96px; max-width: 40%; display: block; margin: 0 auto; animation: plate-mijote 2.4s ease-in-out infinite; } @keyframes plate-mijote { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-6px) rotate(1.5deg); } } @media (prefers-reduced-motion: reduce) { #screen-plate .plate-loading-marmite { animation: none; } } #screen-plate .plate-loading p { font-family: var(--ecriture); font-size: 27px; margin: 18px 0 4px; } #screen-plate .plate-loading small { color: var(--muted); } /* Le résultat : la photo, puis la carte du total en serif. */ #screen-plate .plate-total { text-align: center; display: grid; gap: 4px; border-radius: 16px; } #screen-plate .plate-label { margin: 0; color: var(--muted); font-size: 20px; } #screen-plate .plate-total strong { font-family: var(--ecriture); font-size: 34.5px; font-weight: 400; } #screen-plate .plate-total span { color: var(--muted); font-size: 20px; } #screen-plate .plate-label.warn { color: var(--danger); font-weight: 600; } /* ⚠️ Mesuré au banc à 390 px : cinq colonnes sur une rangée laissaient 120 px au nom, et « Saumon, cru, élevage — pavé standard… » tenait sur six lignes. Le nom et sa base prennent la première rangée, la masse et les kcal la seconde, alignées à droite sous la poubelle. */ #screen-plate .plate-item { display: grid; align-items: center; column-gap: 10px; row-gap: 6px; grid-template-columns: 28px minmax(0, 1fr) auto 44px; grid-template-areas: "vignette texte texte retirer" ". saisie kcal ."; padding: 12px 0; border-top: 1px solid var(--line); } #screen-plate .plate-item > .diary-thumb { grid-area: vignette; align-self: start; margin-top: 2px; } #screen-plate .plate-item > .plate-item-text { grid-area: texte; } #screen-plate .plate-item > .plate-amount { grid-area: saisie; justify-self: end; } #screen-plate .plate-item > .plate-kcal { grid-area: kcal; } #screen-plate .plate-item > .shop-del { grid-area: retirer; align-self: start; } #screen-plate .plate-item:first-child { border-top: none; } /* La vignette d'une ligne d'assiette — mêmes dimensions que celle d'un ingrédient (`.ing .diary-thumb`), parce que c'est le même objet vu sur un autre écran et que deux tailles se remarqueraient en passant de l'un à l'autre. `flex: none` : elle ne se comprime pas quand le libellé est long. */ #screen-plate .plate-item .diary-thumb { width: 28px; height: 28px; border-radius: 9px; flex: none; } #screen-plate .plate-item .diary-thumb-empty .icon { width: 17px; height: 17px; } #screen-plate .plate-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* Le nom est un bouton, mais il ne doit pas en avoir l'air : c'est d'abord un libellé, et une ligne de résultat couverte de boutons se lit mal. Le crayon discret suffit à dire qu'on peut y toucher. */ #screen-plate .plate-item-name { display: flex; align-items: center; gap: 6px; border: none; background: none; padding: 0; margin: 0; color: inherit; font: inherit; font-size: 22.5px; text-align: left; cursor: pointer; } #screen-plate .plate-item-pencil { display: flex; color: var(--sand); flex: none; } #screen-plate .plate-item-pencil .icon { width: 13px; height: 13px; } #screen-plate .plate-item-name:hover .plate-item-pencil { color: var(--terra); } #screen-plate .plate-item-basis { color: var(--muted); font-size: 18px; } #screen-plate .plate-candidates { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } #screen-plate .plate-candidates .chip { padding: 8px 12px; font-size: 20px; min-height: 44px; } /* Le champ portait un nombre nu : l'unité ne vivait que dans l'`aria-label`, donc nulle part pour qui regarde l'écran. « 80 » ne dit pas s'il faut penser en grammes ou en millilitres, et une boisson se saisissait en grammes. */ #screen-plate .plate-amount { display: flex; align-items: center; gap: 5px; flex: none; } #screen-plate .plate-item input { width: 5rem; text-align: center; border: 1px solid var(--line); border-radius: 10px; padding: 8px 6px; background: var(--card); color: inherit; font-size: 24px; min-height: 42px; } #screen-plate .plate-unit { color: var(--muted); font-size: 19.5px; width: 1.6rem; } /* Bascule g ↔ ml : soulignée en pointillé, le signe conventionnel d'« il y a quelque chose à faire ici », et dotée d'une cible tactile décente. */ #screen-plate .plate-unit.switchable { cursor: pointer; color: var(--terra); border-bottom: 1px dotted currentColor; padding: 6px 2px; margin: -6px 0; } #screen-plate .plate-item .plate-kcal { font-size: 21px; font-weight: 600; color: var(--cinnamon); width: 4.6rem; text-align: right; } #screen-plate .plate-item .shop-del { flex: none; } /* Au-delà du palier du § 10, l'écran garde une largeur de lecture — il est inscrit au registre des écrans qui ne s'étirent pas : une caméra de 940 px de large n'aide personne à cadrer une assiette. */ /* ── Mode cuisine (§ 4) — P05, refonte du 10/09 ──────────────────────────── */ /* Plein écran, par-dessus tout, barre d'onglets comprise : on cuisine avec le téléphone posé à 60 cm, pas en naviguant. */ /* ⚠️ **Trois déclarations sur quatre étaient perdantes, et rien ne le disait.** `.screen:not(.pane)` vaut (0,2,0) et `.cook-screen` (0,1,0) : le mode cuisine héritait donc, **depuis toujours**, du rembourrage des écrans ordinaires (`padding-bottom: var(--tabbar-h) + 32px`) et de leur `overflow-y: auto`. Mesuré au banc à 390 × 844 : le pied s'arrêtait à **744 px pour 844**, c'est-à-dire 100 px réservés à une barre d'onglets que ce mode **masque** ; et l'écran entier pouvait défiler, ce qui est exactement ce que sa disposition en trois bandes existe pour empêcher. C'est le § *une règle qui ne gagne que par sa place se perd*, à ceci près qu'ici elle ne perdait pas par sa place mais par sa **spécificité** — et le remède est le même : la règle se scope sur son contexte, donc elle gagne où qu'on la déplace. ⛔ Et surtout pas `!important`, qui gagne aussi et gagne contre tout, y compris contre la règle qu'on écrira demain. */ .cook-screen { /* Largeur et centrage : recadrage des couches fixes, en haut de la feuille. ⚠️ **`position: fixed` reste ici**, et pas dans la règle scopée ci-dessous : c'est ce sélecteur-là que la règle de recadrage nomme, et le garde-fou des couches fixes compare les sélecteurs mot pour mot. Une couche qui se déclarerait fixe sous un autre nom serait une couche de plus à recadrer. */ /* M01 : la bande hors connexion (z 70) couvrait la moitié de « Fermer ». L'écran commence sous elle ; `--hors-reseau-h` vaut 0 en ligne. */ position: fixed; top: var(--hors-reseau-h, 0px); bottom: 0; z-index: 45; display: flex; flex-direction: column; gap: 12px; background: var(--cream); } /* Les deux seules propriétés que `.screen:not(.pane)` redéclare, et donc les deux seules qui aient besoin de gagner par spécificité. */ .screen.cook-screen:not(.pane) { padding: calc(14px + env(safe-area-inset-top)) 20px calc(14px + env(safe-area-inset-bottom)); overflow: hidden; } /* ⚠️ **Et le rythme vertical des écrans n'est pas celui d'un mode.** `.screen > * + *` pose 24 px entre les blocs — juste sur une page qui défile, ruineux ici : cinq bandes en portaient 96 px, sur l'écran dont chaque pixel est un pixel d'instruction. Le `gap` de 12 px suffit et se lit au même endroit que la disposition. */ /* ⚠️ **Écrite `.cook-screen > * + *`, elle perdait** — même spécificité que `.screen > * + *`, qui vit mille deux cents lignes plus bas et gagne donc par l'ordre du fichier. C'est le § *une règle qui ne gagne que par sa place se perd*, et il s'est refermé à l'écriture de sa propre correction : mesuré, les quatre bandes gardaient leurs 24 px, soit **96 px** pris à l'instruction. */ .cook-screen.screen > * + * { margin-top: 0; } .cook-head { display: flex; align-items: center; gap: 8px; flex: none; } /* ⚠️ **Un seul objet, pas une flèche et un mot.** Deux cibles pour un geste, c'est deux définitions du même retour — et c'est celle qu'on emprunte le moins qui garderait l'ancien comportement. Le libellé fait donc partie du bouton. */ .cook-quitter { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; min-height: 44px; padding: 8px 14px 8px 12px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); color: var(--espresso); font-size: 21px; font-weight: 600; white-space: nowrap; cursor: pointer; } .cook-quitter .icon { width: 17px; height: 17px; color: var(--muted); } /* ⛔ **Ce qui cède est la queue de la phrase, jamais un mot coupé** — l'arbitrage des temps de P04 transposé à un libellé. Mesuré : l'entête demande 362 px pour 350 à 390 px de large, et 362 pour 280 à 320. Retirer la croix n'en rendait que 25, donc elle reste : c'est « le mode cuisine » qui s'en va, et « Quitter » est un libellé entier, pas un mot coupé. La phrase complète vit dans `aria-label`, à toutes les largeurs. ⚠️ **Et la classe est posée par la mesure, pas par un palier.** Un `@media (max-width: …)` aurait été un nombre à défendre, puis à réajuster le jour où « Ingrédients » devient un mot plus long. */ .cook-head.serre .cook-quitter-suite { display: none; } /* Icône dessus, mot dessous : c'est la forme de la maquette, et elle tient dans 44 px de cible tout en nommant ce qu'elle fait. */ .cook-outil { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; min-width: 52px; min-height: 46px; padding: 4px 6px; border: none; background: none; color: var(--muted); font-size: 16.5px; font-weight: 600; cursor: pointer; } .cook-outil .icon { width: 21px; height: 21px; } .cook-outil.on { color: var(--terra); } /* ── Le rappel du plat ────────────────────────────────────────────────────── */ .cook-rappel { display: flex; align-items: center; gap: 12px; flex: none; } /* ⚠️ **La vignette est un `.diary-thumb`**, celui du journal et des cartes du planning : c'est le corps qui porte la cascade photo → dessin → casserole et qui **se dimensionne**. On l'agrandit ici de 40 à 52 px — un rappel de plat se regarde de plus loin qu'une ligne de journal — sans rien réécrire d'autre. */ .cook-vignette { display: flex; flex: none; } .cook-vignette .diary-thumb { width: 52px; height: 52px; } .cook-rappel-texte { min-width: 0; } /* Deux lignes au plus : un titre long est un titre, pas la moitié de l'écran — et ce qu'on lit ici est l'étape, pas le nom du plat. */ .cook-recette { margin: 0; font-family: var(--ecriture); font-size: 25px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cook-meta { margin: 3px 0 0; color: var(--muted); font-size: 19.5px; } .cook-progression { display: flex; align-items: center; gap: 12px; flex: none; } .cook-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--line); } .cook-bar > div { height: 100%; border-radius: 999px; background: var(--terra); transition: width .3s ease; } .cook-count { margin: 0; color: var(--muted); font-size: 19.5px; white-space: nowrap; } .cook-timers { display: flex; flex-wrap: wrap; gap: 8px; flex: none; } .cook-timer { display: inline-flex; align-items: center; gap: 7px; background: var(--card); border: 1.5px solid var(--line); border-radius: 999px; padding: 7px 12px; font-size: 21px; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; } .cook-timer .icon { width: 15px; height: 15px; color: var(--muted); } .cook-timer small { font-weight: 400; color: var(--muted); } /* Un minuteur fini ne disparaît pas tout seul : on a les mains occupées, et rater la fin d'une cuisson coûte plus cher qu'une pastille de trop. */ .cook-timer.done { background: var(--terra); border-color: var(--terra); color: #FFFFFF; animation: timer-done 1s ease-in-out infinite; } .cook-timer.done .icon, .cook-timer.done small { color: #FFFFFF; } @keyframes timer-done { 50% { opacity: .55; } } @media (prefers-reduced-motion: reduce) { .cook-timer.done { animation: none; } } /* ── L'étape, et rien qu'elle ─────────────────────────────────────────────── */ /* ⛔ **Le corps ne centre plus son contenu.** Un conteneur qui défile et qui centre **coupe le haut** de ce qui dépasse : la première ligne d'une longue instruction partait au-dessus du bord, hors d'atteinte du défilement. C'est le § 2 dans sa version la plus discrète — la ligne est peinte, elle est seulement inatteignable — et il ne se voit que sur les instructions longues, c'est-à-dire celles qu'on a le plus besoin de lire. */ /* ⛔ **C'est la carte qui défile, pas la bande qui la porte** — et ce n'est pas un rangement. Un fond se peint **derrière** le contenu : les quatre dégradés de l'indice de suite, posés d'abord sur `.cook-body`, passaient sous une carte **opaque** qui occupe toute la largeur. Ils étaient là, ils étaient servis, et ils ne pouvaient rien montrer — le § *un garde-fou qui ne garde plus rien*, obtenu en recopiant un mécanisme juste au mauvais étage. La bande ne fait donc plus que donner une hauteur ; c'est la carte qui la remplit **au plus**, et qui défile en dedans. Une étape courte reste courte. */ /* ⚠️ **`flex-start`, sinon la carte s'étire.** Un enfant flex s'étend par défaut à la hauteur de sa bande : une étape de trois lignes rendait une carte de 500 px avec 300 de blanc dedans, ce qui se lit comme un contenu manquant. Elle fait donc la hauteur de son texte, et `max-height: 100%` la borne. */ .cook-body { flex: 1; min-height: 0; display: flex; align-items: flex-start; } .cook-etape { background: var(--card); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); width: 100%; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; } /* ⚠️ **Et une instruction qui continue le dit** — le § *une feuille qui défile le dit*, à un conteneur de plus. iOS ne montre sa barre qu'*une fois qu'on a défilé : à l'ouverture, une étape entière et une étape coupée se ressemblent trait pour trait, et le geste qui les distingue est justement celui qu'on ne fait pas si on croit tout voir. Ici on cuisine les mains occupées, donc ce qu'on perdrait est la moitié d'une consigne. Deux couvercles couleur `--card` ancrés au **contenu** et deux ombres ancrées au **conteneur** : en haut de course le couvercle masque l'ombre, dès qu'on défile il s'en va et l'ombre paraît. ⚠️ **Rien n'est mesuré** — une étape qui tient garde ses couvercles en place et n'affiche aucune ombre, donc l'indice ne peut ni mentir ni se désynchroniser d'un contenu qui change. */ .cook-etape { background-image: linear-gradient(to bottom, var(--card) 55%, rgba(0, 0, 0, 0)), linear-gradient(to top, var(--card) 55%, rgba(0, 0, 0, 0)), linear-gradient(to bottom, rgba(30, 24, 20, .13), rgba(30, 24, 20, 0)), linear-gradient(to top, rgba(30, 24, 20, .13), rgba(30, 24, 20, 0)); background-position: top, bottom, top, bottom; background-size: 100% 20px, 100% 20px, 100% 11px, 100% 11px; background-repeat: no-repeat; background-attachment: local, local, scroll, scroll; } .cook-etape-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .cook-puce { width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--terra); color: #FFFFFF; display: grid; place-items: center; font-family: var(--ecriture); font-size: 26px; font-weight: 700; } .cook-title { font-family: var(--ecriture); font-size: 27.5px; margin: 0; flex: 1; line-height: 1.2; } /* La durée de l'étape se lit, elle ne se règle pas : c'est ce que la recette dit. Le geste, lui, est le bouton du minuteur en dessous. */ .cook-duree { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; /* ⚠️ **`--espresso`, et c'est une mesure qui l'a décidé.** `--cinnamon` sur `--sand` rend 2,99 de contraste en thème sombre — les deux tokens y bougent dans le même sens, et une pastille qui se lit le jour disparaît la nuit. Le token de texte, lui, suit son fond : 9,5 en clair, 6,3 en sombre. */ background: var(--sand); color: var(--espresso); font-size: 20px; font-weight: 600; white-space: nowrap; } /* Lisible à 60 cm : c'est la contrainte du § 4, pas une préférence. */ .cook-text { font-size: 26px; line-height: 1.55; margin: 0; } .cook-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } /* ⚠️ **En colonne, et c'est la mesure qui l'a décidé.** Côte à côte, le bouton recevait 207 px pour un libellé qui en demande 230 : « Démarrer le minuteur » passait sur deux lignes et le bloc montait à 102 px. La maquette l'empile déjà — la durée au-dessus, la commande sous elle, pleine largeur —, et c'est la seule disposition qui tienne le libellé entier à 320 px. */ .cook-minuteur { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 16px; padding: 14px; border-radius: 14px; background: var(--cream); border: 1px solid var(--line); } .cook-minuteur-duree { font-family: var(--ecriture); font-size: 32.5px; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; } .cook-lancer { gap: 9px; } .cook-lancer .icon { width: 18px; height: 18px; } /* ── Le bloc qui décompte — 12/09 ──────────────────────────────────────────── ⚠️ **Ce qui change d'aspect est le nombre, pas le cadre.** Un fond coloré sur tout le bloc ferait crier une cuisson en cours pendant qu'on lit l'étape suivante — c'est un état, pas une alerte. Le décompte passe en `--terra` et grandit ; le reste ne bouge pas. ⛔ **Et la commande s'efface quand elle n'est plus le geste.** « Arrêter » pleine couleur au-dessus de « Suivante » donnerait deux boutons pleins sur le même écran, dont le plus visible est celui qu'on ne veut pas presser. */ .cook-minuteur.tourne .cook-minuteur-duree, .cook-minuteur.fini .cook-minuteur-duree { color: var(--terra); font-size: 43px; } .cook-minuteur.tourne .cook-lancer, .cook-minuteur.fini .cook-lancer { background: transparent; color: var(--muted); border: 1.5px solid var(--line); } .cook-minuteur.tourne .cook-lancer .icon, .cook-minuteur.fini .cook-lancer .icon { color: var(--muted); } /* Un minuteur fini ne disparaît pas tout seul — même règle que la pastille : on a les mains occupées, et rater la fin d'une cuisson coûte plus cher qu'un bloc de trop. */ .cook-minuteur.fini .cook-minuteur-duree { animation: timer-done 1s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .cook-minuteur.fini .cook-minuteur-duree { animation: none; } } /* ── Le pied : avancer, ou aller à une étape ──────────────────────────────── */ .cook-foot { display: flex; flex-direction: column; gap: 10px; flex: none; } .cook-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cook-nav .btn-primary, .cook-nav .btn-ghost { min-height: 52px; font-size: 24px; padding-inline: 12px; } .cook-nav .btn-ghost { gap: 6px; } /* Le chevron du sprite descend ; ici il désigne l'arrière. */ .cook-nav .btn-ghost .icon { width: 17px; height: 17px; transform: rotate(90deg); } .cook-nav .btn-ghost:disabled { background: none; } /* ⚠️ **Centrée, mais pas par `justify-content: center`** — demandé le 11/09. Sur une rangée qui défile, centrer rogne des **deux** côtés dès qu'elle déborde : la pastille 1 partirait à gauche, hors d'atteinte du défilement. C'est le piège que P04 a nommé sur ses temps. Des marges automatiques sur la première et la dernière pastille centrent tant que tout tient, et valent zéro dès que ça déborde — le début reste alors là où on le cherche. */ .cook-etapes { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-block: 3px; } .cook-etapes::-webkit-scrollbar { display: none; } .cook-etape-lien:first-child { margin-left: auto; } .cook-etape-lien:last-child { margin-right: auto; } /* ⚠️ **`min-height`, sinon la pastille est un ovale.** `button { min-height: 44px }` bat `height: 38px` : elles faisaient 38 × 44, vu sur la capture. Le dessin reste à 38 et la cible à 44, par la zone tactile commune plus haut. */ .cook-etape-lien { position: relative; width: 38px; height: 38px; min-height: 38px; flex: none; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); color: var(--muted); font-size: 22.5px; font-weight: 700; cursor: pointer; } /* Ce qui est fait s'éteint, ce qu'on lit s'allume : deux états, et le troisième — ce qui reste — est l'absence des deux. */ .cook-etape-lien.faite { color: var(--sage); border-color: var(--sage); } .cook-etape-lien.on { background: var(--bouton-fond); border-color: var(--bouton-fond); color: var(--bouton-texte); } /* ⚠️ **La barre d'onglets absente rend la hauteur qu'elle prenait.** `.sheet` se pose au-dessus d'elle — `bottom: var(--tabbar-h) + 12px` —, et le mode cuisine la masque : la feuille des ingrédients flottait donc 60 px au-dessus du bord, et perdait d'autant sur son plafond, c'est-à-dire trois lignes de liste. C'est le § 10 pris à l'envers : ce qui se dégage d'une voisine se remet en place quand elle n'est plus là. */ body:has(#screen-cook:not([hidden])) #cooking-sheet { bottom: calc(12px + env(safe-area-inset-bottom)); max-height: min(88vh, calc(100dvh - 24px - env(safe-area-inset-bottom) - var(--hors-reseau-h, 0px))); } .cooking-ing { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-top: 1px solid var(--line); cursor: pointer; } .cooking-ing:first-child { border-top: none; } .cooking-ing.done { opacity: .5; } .cooking-ing.done .cooking-label { text-decoration: line-through; } .cooking-label { flex: 1; font-size: 23px; } .cooking-qty { font-weight: 600; color: var(--cinnamon); white-space: nowrap; } /* ⚠️ **Plus petite qu'ailleurs, et c'est la ligne qui l'impose.** Quatre colonnes — la case de 44 px, le dessin, le nom, la quantité — demandent 324 px à 320 d'écran avec la vignette de 40 des autres listes. Ce qui cède est le dessin, jamais le nom ni la quantité : il redit ce que le libellé nomme déjà. */ .cooking-ing .diary-thumb { width: 32px; height: 32px; border-radius: 9px; } .cooking-ing .diary-thumb-empty .icon { width: 18px; height: 18px; } /* ── Ce que l'étape demande, sous l'étape — 12/09 ───────────────────────────── ⚠️ **Un filet au-dessus, pas une carte dans la carte.** Le bloc vit déjà dans `.cook-etape` : lui donner un fond et une ombre ferait deux cadres imbriqués à trois pixels l'un de l'autre, et la carte de l'étape cesserait de se lire comme un tout. Ce qu'on sépare est une **suite** de l'instruction, pas un objet à côté d'elle. */ .cook-ing-etape { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; } .cook-ing-titre { margin: 0 0 4px; font-size: 19.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } /* Lisible à 60 cm comme l'instruction au-dessus : c'est la contrainte du § 4. ⚠️ Et la ligne garde ses 44 px de cible — on coche les doigts gras. */ .cook-ing-etape .cooking-label { font-size: 24.5px; } .cook-ing-etape .cooking-qty { font-size: 24px; } /* ── Panneau de filtres ──────────────────────────────────────────────────── */ /* Trois bandes empilées : l'en-tête et les actions restent, le milieu défile. La feuille entière défilait, en-tête et actions compris — « Voir les N résultats » se trouvait donc 158 px sous le bord visible à l'ouverture, sans rien pour dire qu'il existait. Le bouton qui valide un panneau ne doit jamais demander qu'on aille le chercher. */ .filters-sheet { display: flex; flex-direction: column; max-height: min(82vh, calc(100dvh - var(--tabbar-h) - 48px - var(--hors-reseau-h, 0px))); overflow: hidden; padding: 16px; } .filters-sheet .sheet-head { flex: none; } .filters-scroll { flex: 1; min-height: 0; overflow-y: auto; /* Le défilement s'arrête dans la feuille : sans ça, arriver en bas fait repartir la page dessous, et la feuille a l'air de glisser toute seule. */ overscroll-behavior: contain; } .sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .sheet-head .sheet-title { margin: 0; } .sheet-head .icon-btn { width: 36px; height: 36px; min-height: 36px; } .sheet-head .icon-btn .icon { width: 16px; height: 16px; } .filter-block { padding: 16px 4px; border-bottom: 1px solid var(--line); } .filter-block:last-of-type { border-bottom: none; } .filter-block h3 { font-family: var(--ecriture); font-size: 21px; font-weight: 600; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; } .filter-value { margin: -4px 0 10px; color: var(--cinnamon); font-weight: 600; font-size: 21px; } /* ── Les blocs du panneau sont ceux des réglages — C16, 20/09 ────────────── Même dessin qu'une feuille de réglages (`.settings-block` + `.settings-sous-titre`), à deux retraits près : la feuille porte déjà 16 px, et les 14 px du bloc les décaleraient du titre. Le trait de séparation vient de `.filter-block`, qui sert encore au filtre de « ce que j'ai cuisiné ». */ .filters-sheet .settings-block { padding: 14px 4px; border-bottom: 1px solid var(--line); } .filters-sheet .settings-block:last-of-type { border-bottom: none; } .filters-sheet .settings-sous-titre { margin: 0 0 10px; } /* La ligne de la bascule s'aligne sur le bloc, pas sur le retrait des feuilles de réglages. */ .filters-sheet .reglage-ligne { padding: 2px 0; } .filters-sheet .reglage-ligne small { color: var(--muted); } /* (La seconde règle `.info-dot` vivait ici, muette et gagnante — voir la règle unique en tête de feuille, avec ce que cette copie a coûté.) */ /* Curseur à deux poignées : deux `input[range]` superposés. Le second ne capte le pointeur que sur sa poignée, sinon il masquerait le premier sur toute la largeur et la borne basse deviendrait inatteignable. */ /* ⚠️ **La plage choisie se colore — Luca, 21/09 (« jauge couleur »).** Le rail entier était sable, poignées comprises : rien ne disait où l'on avait réglé. Le rail est dessiné par la boîte (`::before` le fond, `::after` la plage en terre cuite, entre `--lo` et `--hi` que `renderFilters` pose en fractions) et les pistes natives sont transparentes — deux `input` superposés ont deux pistes, et une piste opaque cacherait la couleur. Les 11 px des bords sont le demi-rayon d'une poignée : le centre d'une poignée ne va jamais au bord. */ .range-pair { position: relative; height: 34px; --lo: 0; --hi: 1; } .range-pair::before, .range-pair::after { content: ""; position: absolute; top: 15px; height: 4px; border-radius: 999px; pointer-events: none; } .range-pair::before { left: 0; right: 0; background: var(--line); } /* Victoria, 21/09 : « du vert à gauche au rouge graduel ». ⚠️ Le dégradé couvre **tout le rail** et la plage choisie en est découpée (`clip-path`) : étiré sur la plage seule, il ferait rouge un « jusqu'à 300 kcal ». Ici une couleur dit toujours la même quantité de calories. */ .range-pair::after { left: 11px; right: 11px; background: linear-gradient(90deg, var(--sage), var(--amber) 50%, var(--danger)); clip-path: inset(0 calc((1 - var(--hi)) * 100%) 0 calc(var(--lo) * 100%) round 999px); } .range-pair input { position: absolute; inset: 0; width: 100%; margin: 0; z-index: 1; -webkit-appearance: none; appearance: none; background: none; pointer-events: none; } .range-pair input::-webkit-slider-runnable-track { height: 4px; background: transparent; border-radius: 999px; } .range-pair input::-moz-range-track { height: 4px; background: transparent; border-radius: 999px; } .range-pair input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 22px; height: 22px; border-radius: 50%; margin-top: -9px; background: var(--card); border: 2px solid var(--terra); cursor: pointer; } .range-pair input::-moz-range-thumb { pointer-events: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--card); border: 2px solid var(--terra); cursor: pointer; } /* ⚠️ **`.dish-grid` est partie avec la section « Type de plat », le 10/09.** Elle doublait les étiquettes — `dish` filtre le même champ qu'un tag — et ne portait que six des quatorze valeurs du groupe « Type ». */ /* `align-items: center` posait la case à mi-hauteur d'un libellé sur deux lignes, donc en travers du texte dès qu'il repliait. Alignée en haut, elle se range en face du titre, qui est ce qu'elle commande. */ /* La pastille du bouton « Filtrer » : le même dessin que celle du bouton « Filtrer » de la recherche communautaire, sur un rond déjà `relative`. */ .filtres-nombre { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--coeur); color: #FFFFFF; font-size: 16.5px; font-weight: 700; display: grid; place-items: center; } .switch-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; cursor: pointer; } .switch-row > span { min-width: 0; } .switch-row strong { display: block; font-size: 22px; } .switch-row small { display: block; color: var(--muted); font-size: 19px; line-height: 1.4; } .switch-row input { width: 46px; height: 27px; flex: none; accent-color: var(--terra); margin-top: 2px; } /* ⚠️ **Deux boutons côte à côte, comme le pied commun des feuilles** — C16, 20/09. `auto-fit` laisse le bouton seul du signalement (`#report-sheet`) occuper toute la largeur, comme avant : la grille sert les deux pieds. */ .filters-actions { flex: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); background: var(--card); } .filters-actions .btn-primary, .filters-actions .btn-ghost { width: 100%; min-height: 50px; } /* ── Vignette de recette ─────────────────────────────────────────────────── */ .card-fav { position: absolute; top: 8px; right: 8px; z-index: 2; width: 32px; height: 32px; min-height: 32px; border-radius: 50%; /* Le cœur est terre cuite sur une pastille blanche, et s'inverse allumé — 12/09 : la pastille sombre translucide le rendait gris sur toute photo. */ border: none; background: rgba(255, 255, 255, .92); color: var(--coeur); display: grid; place-items: center; cursor: pointer; padding: 0; } .card-fav .icon { width: 16px; height: 16px; } .card-fav.on { background: var(--coeur); color: #FFFFFF; } /* Le marque-page d'une publication d'autrui — P33 : sous le cœur, même dessin. */ .card-save { position: absolute; top: 46px; right: 8px; z-index: 2; width: 32px; height: 32px; min-height: 32px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .92); color: var(--coeur); display: grid; place-items: center; cursor: pointer; padding: 0; } .card-save .icon { width: 15px; height: 15px; } .card-save.on { background: var(--coeur); color: #FFFFFF; } .card-avis { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 18px; color: var(--cinnamon); font-weight: 600; } .card-avis .icon { width: 13px; height: 13px; color: #C08A2E; } /* ── Le ⋮ de la carte, au bout de sa ligne du bas — corrigé le 10/09 ───────── **Il vivait dans le coin supérieur gauche de la photo**, en miroir du cœur, et la raison écrite alors était juste sur le fond : le bas de la carte porte un texte de longueur inconnue — le temps et les calories, la raison du classement, la provenance —, donc un bouton posé là l'aurait recouvert. ⚠️ **Ce qui manquait n'était pas la place, c'était de la réserver.** Les deux maquettes du 10/09 le posent en bas à droite, et c'est là qu'on le cherche : un coin d'image porte ce qui parle de l'image, une fin de ligne porte ce qui parle de la fiche. Les deux lignes du pied lui rendent donc 38 px à droite — ⛔ toutes les deux, sinon la provenance passe dessous sur les seules fiches qui en portent une. ⚠️ **Et il perd sa pastille sombre.** Elle existait pour tenir sur une photo ; sur le papier de la carte, elle serait une tache — le cœur, lui, reste sur l'image et la garde. */ .card-menu { position: absolute; right: 4px; bottom: 5px; z-index: 2; width: 32px; height: 32px; min-height: 32px; border-radius: 50%; border: none; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; padding: 0; } .card-menu .icon { width: 16px; height: 16px; } /* ── Scanner un produit ──────────────────────────────────────────────────── */ .scan-sheet input, .scan-sheet select { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; background: var(--cream); color: inherit; font-size: 24px; min-height: 46px; margin-bottom: 8px; } .scan-sheet .btn-primary, .scan-sheet .btn-ghost { width: 100%; min-height: 48px; } /* Dans une feuille, l'espace vertical est compté : le bloc de rappel s'y serre plus que sur l'écran de scan d'assiette, qui a toute la page. */ .scan-sheet .recall-block { margin-top: 12px; padding-top: 10px; } /* ── C19, 20/09 — la feuille à bandes ──────────────────────────────────────── Le titre porte l'icône du code-barres à sa gauche, au retrait du socle (14 px) ; `.sheet-head` écarte ses enfants aux deux bords, ici ils se suivent. */ .scan-head { justify-content: flex-start; padding: 6px 14px 4px; } .scan-head .icon { width: 22px; height: 22px; color: var(--cinnamon); } .scan-head .sheet-title { padding: 0; } /* ⚠️ **« Déjà scannés » défile avec la bande du milieu.** `.recall-list` se borne à 38 vh parce que, dans une feuille qui défilait en entier, une longue liste emportait la caméra hors de vue ; ici la caméra est épinglée et c'est la bande qui défile — le plafond ne ferait plus qu'un second défileur dans le premier. La règle générale reste pour les autres listes de rappel. */ #scan-recent .recall-list { max-height: none; overflow-y: visible; } /* Le résultat d'une estimation. **`min-height` et non un bloc qui apparaît** (§ 5, troisième corollaire) : les deux lignes sont vides tant qu'aucun poids n'est saisi, et sans réserve elles pousseraient le bouton de validation vers le bas au premier chiffre tapé — sous le doigt qui vient de le viser. La réserve est **mesurée, pas estimée**, et il a fallu deux relevés : 62 px paraissaient suffire, le bloc vide en fait 77,9 et le bloc rempli 94,8 — puis 111,6 dès qu'un exemple porte un nom long (« Cookie Chocolat saveur noisette Sans sucres »). Une réserve fixe ne pouvait donc pas suivre : **c'est la justification qu'il faut borner**, pas la réserve qu'il faut agrandir. Trois lignes exactement, et la hauteur cesse de dépendre du contenu. Ce qui est tronqué est la fin des exemples, jamais le début : la fourchette et l'effectif de la cohorte — ce qui porte la justification — sont en tête. */ .estimate-out { display: flex; flex-direction: column; gap: 4px; min-height: 103px; margin: 4px 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--cream); border: 1px solid var(--line); } .estimate-kcal { font-size: 26.5px; font-weight: 600; font-family: var(--ecriture); } /* Le gris de `--muted` : la justification se lit après le chiffre, jamais à sa place. C'est elle qui empêche l'estimation de passer pour une mesure. */ .estimate-why { color: var(--muted); font-size: 19px; line-height: 1.35; /* Trois lignes, ni plus ni moins : `min-height` tient le bloc vide, le clamp tient le bloc bavard. Les deux valeurs sont le même calcul — 3 × 1,35 × 12,5 px — et doivent le rester. */ min-height: 50.6px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .scan-view { position: relative; border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 4 / 3; margin-bottom: 12px; } .scan-view video { width: 100%; height: 100%; object-fit: cover; } /* Le cadre de visée : quatre angles plutôt qu'un rectangle plein, pour ne pas masquer ce qu'on vise. */ .scan-frame { position: absolute; inset: 18% 12%; border: 2px solid rgba(255, 247, 241, .9); border-radius: 10px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35); clip-path: polygon(0 0, 26% 0, 26% 4%, 4% 4%, 4% 26%, 0 26%, 0 74%, 4% 74%, 4% 96%, 26% 96%, 26% 100%, 0 100%, 100% 100%, 74% 100%, 74% 96%, 96% 96%, 96% 74%, 100% 74%, 100% 26%, 96% 26%, 96% 4%, 74% 4%, 74% 0, 100% 0); } /* La vignette entre dans la carte : c'est le même objet qu'on vient de toucher dans la liste, et le revoir confirme qu'on a tapé sur la bonne ligne. */ .product-card { background: var(--cream); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; display: flex; align-items: center; gap: 12px; } .product-lines { flex: 1; min-width: 0; display: grid; gap: 2px; } .product-thumb { flex: none; display: flex; } .product-thumb .diary-thumb { width: 48px; height: 48px; } .product-thumb .diary-thumb-empty .icon { width: 26px; height: 26px; } .product-card strong { font-size: 24px; } .product-card span { color: var(--muted); font-size: 20px; } .product-card small { color: var(--cinnamon); font-size: 20px; font-weight: 600; } .scan-qty { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .scan-qty input { width: 6rem; margin-bottom: 0; text-align: center; } .scan-qty span { color: var(--muted); } .scan-actions { display: grid; gap: 8px; } .btn-scan { background: var(--sand); } .btn-scan .icon { width: 20px; height: 20px; } /* ── Liste de courses ────────────────────────────────────────────────────── */ /* ⚠️ **`minmax(0, 1fr)` et non la colonne implicite.** Signalé le 22/08 sur une vraie liste : le bandeau des recettes **débordait de l'écran** — « Pâtes crémeuses à l'ail et au parmesan » demandait 588 px pour les 350 disponibles, et l'on faisait défiler la page horizontalement pour atteindre le pas à pas. La colonne implicite d'une grille se dimensionne sur le `min-content` de ses items, et **une colonne est partagée** : il suffit d'un titre long pour que toutes les lignes s'élargissent. `min-width: 0` sur le titre ne suffisait pas — il était déjà là, et bien appliqué : ce n'est pas le titre qui refusait de rétrécir, c'est la **piste** qui refusait de descendre sous son min-content. ⛔ **Et ce n'est pas la vignette qui l'a créé** : sans elle la ligne demandait encore 534 px. Elle a coûté 54 px sur un débordement de 184 — le défaut attendait un titre assez long, et la bibliothèque en a. */ .list-recipes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 16px; } /* **Deux rangs, aux deux emplacements.** La version sur un rang laissait **86 px au titre** des 350 : « Pâtes crémeuses à l'ail et au parmesan » se lisait « Pâtes cr… ». Le pas à pas prend 130 px et ne peut pas maigrir sans passer sous les 44 px de cible, la vignette 44, la croix 34 — il n'y a pas de largeur à reprendre. Le titre prend donc le premier rang, le pas à pas et la croix descendent au second. ⚠️ **Et c'est la même règle pour le bandeau et pour l'en-tête de groupe.** Elle vivait sous `.shop-group-recette` : le bandeau, resté sur un rang, tronquait exactement ce que l'en-tête savait déjà afficher. Un composant partagé qui se met en page différemment selon l'endroit est deux composants qui s'ignorent — la puce de pliage, elle, n'existe qu'à un seul des deux, et sa colonne se ferme toute seule quand elle manque. */ .list-recipe { display: grid; align-items: center; grid-template-columns: auto 1fr auto; grid-template-areas: "vignette titre puce" "vignette portions retrait"; column-gap: 10px; row-gap: 6px; background: var(--card); border-radius: 16px; padding: 10px 12px; box-shadow: var(--shadow); } /* L'ordre que `listRecipeRow` produit : vignette, titre, pas à pas, croix — et la puce de pliage en cinquième, ajoutée par `groupBlock` au seul en-tête. */ .list-recipe > :nth-child(1) { grid-area: vignette; align-self: start; } .list-recipe > :nth-child(2) { grid-area: titre; } .list-recipe > :nth-child(3) { grid-area: portions; justify-self: start; } /* La croix à l'autre bout de son rang, loin du « − » du pas à pas : deux cibles voisines dont l'une retire une portion et l'autre la recette entière est un voisinage qu'on paie une fois. */ .list-recipe > :nth-child(4) { grid-area: retrait; justify-self: end; } .list-recipe > :nth-child(5) { grid-area: puce; } /* Deux lignes plutôt qu'une coupe : tronquer un nom de recette fait perdre exactement ce qu'on cherchait — c'est lui qui identifie la ligne. */ .list-recipe-title { min-width: 0; font-size: 22px; font-weight: 600; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; } .list-recipe-del { width: 34px; height: 34px; min-height: 34px; font-size: 25px; } .list-recipe-del .icon { width: 15px; height: 15px; } .stepper-sm button { width: 32px; height: 32px; min-height: 32px; font-size: 24.5px; border-radius: 10px; } .stepper-sm output { min-width: 22px; font-size: 22.5px; } /* ⛔ **Pas `opacity: .35` — revue de 03b.** Elle délavait le « − » *et* son fond : le signe tombait à 1,9:1 sur la carte, sur le bouton qui dit qu'on ne peut pas descendre plus bas. Le couple inactif est celui de tout le fichier (R05) : franchement plus pâle que l'actif, et lisible. */ .stepper-sm button:disabled { background: var(--bouton-inactif-fond); color: var(--bouton-inactif-texte); border-color: var(--line); cursor: default; } /* ── P13, la liste de courses — 13/09 ──────────────────────────────────────── */ .sl-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; } .sl-titres { flex: 1; min-width: 0; } /* ⚠️ **Le titre tient sur une ligne, et c'est mesuré.** « Liste de courses » en serif 30 px demande 231 px ; avec « Partager » (118) et le ⋮ (40) il en faudrait 409 pour les 350 d'un iPhone 14 — le titre passait donc à deux lignes et la maquette n'en a qu'une. `clamp` plutôt qu'une requête de média : la coupe ne tombe pas à une largeur d'appareil mais là où le titre cesse d'entrer. */ .sl-titre { margin: 0 0 4px; font-family: var(--ecriture); font-weight: 400; font-size: clamp(27.5px, 7.23vw, 32.5px); line-height: 1.1; } .sl-intro { margin: 0; color: var(--muted); font-size: 22.5px; } /* « Partager » se lit comme une commande, pas comme un titre : le trait, la terre cuite, et le mot à côté du dessin. */ .sl-partage { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 44px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--terra) 35%, var(--line)); border-radius: 999px; background: var(--card); color: var(--terra); font: inherit; font-size: 22px; font-weight: 600; cursor: pointer; } .sl-partage .icon { width: 17px; height: 17px; } .sl-partage { font-size: 21px; } /* Trois axes : la grille du composant commun en porte deux, celle-ci en compte trois — c'est la seule différence. */ .sl-axes { grid-template-columns: repeat(3, 1fr); } .sl-axes .chip { border: none; background: none; color: var(--bouton-second-texte); border-radius: 10px; padding: 9px 8px; min-height: 40px; font-size: 21px; white-space: nowrap; } .sl-axes .chip.on { background: var(--bouton-fond); color: var(--bouton-texte); font-weight: 600; } .sl-resume { margin: -6px 0 14px; color: var(--muted); font-size: 21px; } /* ── Les deux tuiles — P13, 13/09 ──────────────────────────────────────────── */ .sl-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; } .sl-tuile { display: flex; align-items: center; gap: 8px; padding: 12px 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: inherit; font: inherit; text-align: left; cursor: pointer; } .sl-tuile:disabled { cursor: default; } .sl-tuile-icone { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; } .sl-tuile-icone .icon { width: 19px; height: 19px; } .sl-tuile-frigo .sl-tuile-icone { background: color-mix(in srgb, var(--sage) 18%, var(--card)); color: var(--sage); } .sl-tuile-recettes .sl-tuile-icone { background: color-mix(in srgb, var(--terra) 14%, var(--card)); color: var(--terra); } .sl-tuile-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .sl-tuile-texte b { font-size: 21px; line-height: 1.2; } .sl-tuile-texte small { font-size: 18px; color: var(--muted); line-height: 1.25; } .sl-tuile-chevron { width: 15px; height: 15px; flex: none; color: var(--muted); transform: rotate(-90deg); } /* Sous 360 px les deux tuiles s'empilent : à 320, deux colonnes leur laissent 136 px, où « 3 recettes » passe sur deux lignes et l'icône prend le tiers. */ @media (max-width: 359px) { .sl-tuiles { grid-template-columns: 1fr; } } /* ── La barre d'ajout — P13, 13/09 ─────────────────────────────────────────── */ .sl-barre { display: flex; gap: 8px; margin-bottom: 16px; } .sl-barre-champ { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; color: var(--muted); font: inherit; font-size: 24px; text-align: left; cursor: pointer; } .sl-barre-champ .icon { width: 20px; height: 20px; flex: none; color: var(--terra); } .sl-barre-scan { flex: none; width: 52px; min-height: 52px; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; color: var(--terra); cursor: pointer; display: grid; place-items: center; } .sl-barre-scan .icon { width: 22px; height: 22px; } /* Dans la feuille : plus de carte ni d'ombre, c'est la feuille qui les porte. */ .add-item { background: none; padding: 0; margin-bottom: 0; display: grid; gap: 10px; /* ⚠️ **La boîte de suggestions est en `absolute`** : sans ancêtre positionné, elle se calerait sur le premier qu'elle trouve en remontant — ou sur le volet, donc n'importe où. Peinte, trouvable par un test de présence, et à côté du champ : le § 2 dans sa version la plus discrète. */ position: relative; } .add-item input, .add-item select { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--cream); color: inherit; font-size: 24px; min-height: 44px; min-width: 0; } .add-item input:focus, .add-item select:focus { outline: none; border-color: var(--terra); box-shadow: 0 0 0 3px color-mix(in srgb, var(--terra) 18%, transparent); } /* Quantité et unité restent étroites : ce sont « 500 » et « g », pas des phrases. La famille prend la place qui reste. */ /* ⚠️ **Trois champs, deux rangs.** Le formulaire vit dans une feuille depuis P13 : il a toute la largeur, et la famille n'a plus à se battre pour sa place — le § du 14/08 mesurait 174 px pour « Famille — devinée », qui ne tenaient pas sur la même ligne que la quantité et l'unité à 390 px. */ .add-detail { display: grid; grid-template-columns: 4.5rem 1fr; gap: 8px; align-items: center; } .add-detail > select { grid-column: 1 / -1; } .shop-group { margin-bottom: 22px; } /* Un groupe replié ne garde pas la marge d'un groupe ouvert : dix familles repliées laissaient 220 px de blanc, et l'écran avait l'air vide alors qu'il était rangé. */ .shop-group-plie { margin-bottom: 6px; } /* ⛔ **Plus de capitales forcées.** `text-transform: uppercase` tenait sur « CRÉMERIE » ; sur l'axe des familles les noms font jusqu'à vingt-huit caractères — « ÉPICES, HERBES & CONDIMENTS » avec un interlettrage de .06em demande 268 px pour les 350 disponibles, et une capitale accentuée perd son accent dans plusieurs polices système. Le nom s'écrit comme il est stocké. */ .shop-group .block-title { margin-bottom: 8px; } /* La carte du groupe garde sa place quand elle est repliée : c'est la même commande, et elle ne doit pas sauter sous le doigt. */ .shop-group-plie .shop-group-btn { margin-bottom: 0; } /* L'en-tête d'un groupe est une **carte**, comme la maquette : le dessin du rayon, son nom en serif, le compte en pastille et la puce de pliage. */ .shop-group-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); cursor: pointer; font: inherit; color: inherit; text-align: left; } .shop-group-icone { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--cream); color: var(--terra); } .shop-group-icone .icon { width: 19px; height: 19px; } .shop-group-nom { font-family: var(--ecriture); font-weight: 400; font-size: 26px; } /* Le compte, en retrait du nom : il informe, il ne titre pas. */ /* Le compte, en pastille : il informe, il ne titre pas. */ .shop-group-count { font-size: 19px; font-variant-numeric: tabular-nums; color: var(--muted); background: var(--cream); border-radius: 999px; padding: 2px 9px; margin-left: 2px; } /* `margin-left: auto` pousse la puce au bord : c'est la cible qu'on vise pour replier, et elle doit être là où le pouce la cherche. */ .shop-caret { margin-left: auto; flex: none; font-size: 22.5px; line-height: 1; color: var(--muted); /* Une rotation, jamais un second glyphe : `transform` se compose sans recalculer la disposition, là où changer le texte de la puce redemande une mesure — le § *ce qu'on anime ne relayoute pas*. */ transition: transform .18s ease; } .shop-group-plie .shop-caret { transform: rotate(-90deg); } /* En-tête d'un groupe de l'axe « par recette » : la ligne de recette, et la puce de pliage au bout. La ligne prend toute la place restante — c'est elle qui porte le titre, donc c'est elle qui doit céder, jamais la puce. */ .shop-group-recette { margin-bottom: 8px; } /* Ce qui appartient en propre à l'en-tête de groupe : rien de la mise en page, qui est désormais celle du composant (voir `.list-recipe`). */ /* Seule, la puce n'a pas de nom à pousser : `margin-left` n'a plus d'objet et la largeur se ferme sur son contenu. */ .shop-group-btn-seul { width: auto; flex: none; gap: 5px; padding: 6px 4px; } .shop-group-btn-seul .shop-caret { margin-left: 0; } /* Une recette dont tout est coché. La phrase remplace un blanc, qui se lirait comme un chargement qui n'a pas fini. */ .shop-group-vide { font-size: 20px; color: var(--muted); padding: 4px 12px 10px; margin: 0; } /* La couverture de la recette versée. Plus petite que la vignette d'un article — 34 px contre 40 — et rectangulaire : c'est un plat, pas un ingrédient, et la différence de forme évite de lire un titre de groupe comme une ligne. */ .list-recipe .diary-thumb { width: 44px; height: 34px; border-radius: 8px; } /* La mention d'une ligne partagée passe à la ligne : collée derrière le nom, elle se lisait comme la suite du libellé (« farine aussi pour une autre recette »). */ .shop-partage { flex-basis: 100%; font-style: italic; } /* ⚠️ **Les écarts sont serrés parce que c'est le nom qui manque de place.** Mesuré à 390 px : case 44 + vignette 40 + quantité + ⋯ laissaient **129 px** au libellé, où « Lait demi-écrémé » passe à la ligne. Huit pixels repris sur les gouttières et le rembourrage lui en rendent douze, sans toucher à la cible de la case — c'est le § *ce sont le rembourrage et les colonnes voisines qui cèdent, jamais le texte*. */ .shop-item { display: flex; align-items: center; gap: 8px; padding: 9px 10px; background: var(--card); border-radius: 14px; margin-bottom: 6px; } /* La vignette de la ligne de courses : le même objet que dans le journal, à la même taille. Ce qui change est le coin — une liste qu'on parcourt en marchant gagne à ce que ses vignettes se distinguent des cases à cocher, qui sont les seules autres boîtes de la ligne. */ .shop-item .diary-thumb { width: 40px; height: 40px; border-radius: 10px; } /* **La cible fait 44 px, le dessin en fait 26.** Et il fallait les séparer : `height: 26px` était écrasé par le plancher de 44 px que le § 11 pose sur tout bouton, si bien que la case se peignait en **26 × 44** — un rectangle vertical arrondi, mesuré, qui ne se lit plus comme une case à cocher. ⛔ **Et surtout pas rabaisser la cible.** C'est la correction qui vient d'abord, et elle échange un défaut d'aspect contre un défaut d'usage : on coche cette case en marchant, d'une main, sur la plus petite cible de l'écran. Le bouton reste donc grand et transparent, et c'est un pseudo-élément qui porte le carré — les deux vivent dans la même cellule de grille, donc restent centrés l'un sur l'autre sans calcul. */ .shop-check { width: 44px; height: 44px; flex: none; cursor: pointer; padding: 0; border: none; background: none; color: transparent; display: grid; place-items: center; } .shop-check::before { content: ""; grid-area: 1 / 1; width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--cream); } .shop-check .icon { grid-area: 1 / 1; width: 16px; height: 16px; } /* ⚠️ **Deux sélecteurs, une seule déclaration de ce qu'est une case cochée.** La liste de courses porte l'état sur la **ligne** — c'est elle qui se barre ; la feuille du mode cuisine le porte sur la **case**. Une seconde règle écrite à côté aurait divergé, et c'est exactement ce qui s'était produit : la feuille posait son fond en style à la main, sous le `::before`, donc rien ne se cochait à l'écran. */ .shop-item.done .shop-check, .shop-check.on { color: #FFFFFF; } .shop-item.done .shop-check::before, .shop-check.on::before { background: var(--sage); border-color: var(--sage); } .shop-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; } /* La quantité ferme la ligne et s'aligne en colonne : les nombres se lisent d'un balayage, et le nom garde le début de la rangée. */ .shop-qty { flex: none; color: var(--muted); font-size: 21px; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Le ⋯ d'une ligne : discret, et à la cible commune de 44 px par son `::after`. */ .shop-more { flex: none; width: 26px; height: 30px; padding: 0; border: none; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; } .shop-more .icon { width: 18px; height: 18px; } /* ⚠️ **Sous 360 px, ce sont encore les voisines qui cèdent.** Mesuré sur un iPhone SE de 1ʳᵉ génération : le libellé tombait à **75 px**. La vignette et les gouttières rendent 18 px ; la case garde ses 44, et le texte se replie plutôt que de se couper — § *ni le nom ni le chiffre ne se tronquent*. */ @media (max-width: 359px) { .shop-item { gap: 6px; padding: 9px 8px; } .shop-item .diary-thumb { width: 34px; height: 34px; border-radius: 9px; } } /* Le nom porte la reconnaissance : c'est lui qu'on cherche dans la liste, donc lui qui garde le contraste plein. */ .shop-name { font-size: 23px; } /* La quantité passe devant et s'efface d'un ton. `tabular-nums` est ce qui rend l'alignement en colonne réel : sans lui, le « 1 » d'une police proportionnelle est deux fois plus étroit que le « 0 », et « 140 g » et « 100 g » ne finissent pas à la même abscisse. */ .shop-qty { font-size: 22.5px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; } .shop-note { font-size: 19px; color: var(--muted); flex-basis: 100%; } /* Coché ne veut pas dire disparu : on revient souvent sur ses pas dans un magasin, et une ligne qui s'efface emporte l'information avec elle. */ .shop-item.done { opacity: .55; } .shop-item.done .shop-name, .shop-item.done .shop-qty { text-decoration: line-through; } /* ⛔ **La vignette ne se barre pas, elle se décolore.** Un trait en travers d'une image de 40 px la rend illisible sans rien annoncer, alors que c'est elle qui sert à retrouver la ligne quand on revient sur ses pas. */ .shop-item.done .diary-thumb { filter: grayscale(1); } .shop-del { width: 32px; height: 32px; flex: none; border: none; background: none; color: var(--muted); cursor: pointer; padding: 0; } .shop-del .icon { width: 17px; height: 17px; } /* En-tête d'onglet en trois parts. Les deux flancs sont des colonnes `1fr` : ils prennent la même largeur quoi qu'ils contiennent, donc le titre tombe au centre de l'écran et non au centre de ce qui reste. Un titre décalé de la largeur d'un bouton se voit immédiatement. */ .pane-head { display: grid; /* ⚠️ **`auto` au milieu laissait le titre recouvrir les boutons.** Mesuré le 22/08 : « Liste de courses » demande 188 px, les deux flancs en réservent 160 des 350, et le titre débordait de **9 px à 390 px** — davantage à 320, où l'on lisait « Liste de cou⋯s ». La colonne du milieu prenait sa largeur de contenu (`max-content`) et les flancs, posés à `min-width: 0`, cédaient en laissant leurs boutons ressortir **par la gauche**, donc sur le titre. `minmax(0, auto)` autorise le titre à se replier ; `min-content` sur les flancs leur interdit de passer sous leurs boutons. Un titre long tient alors sur deux lignes au lieu d'en recouvrir un. */ grid-template-columns: 1fr minmax(0, auto) 1fr; align-items: start; gap: 10px; margin-bottom: 22px; } /* ⛔ **Et les deux flancs gardent la même largeur minimale.** Premier essai : `min-content` sur les flancs — l'aplomb revenait, mais le flanc **gauche**, vide, tombait à 0 pendant que le droit tenait ses 76 px, et le titre se retrouvait **45 px à gauche du centre**. C'est le défaut que le commentaire ci-dessus interdit, repris par l'autre bout : « un titre décalé de la largeur d'un bouton se voit immédiatement », et 45 px en font davantage. Une valeur partagée est ce qui garde les deux colonnes égales quoi qu'elles portent. */ .pane-head > .head-side { min-width: 76px; } /* ⚠️ **Et il fallait aussi que le titre maigrisse.** Mesuré : « Liste de courses » demande 188 px à 30 px, et la colonne du milieu n'en a que 178 à 390 px — 108 à 320. Le titre ne peut donc **pas** tenir sur une ligne à 30 px avec deux boutons en regard, à aucune largeur de téléphone : ou il maigrit, ou il se replie, ou il recouvre. À 22 px il fait 138 px et tient d'une ligne à 390, de deux à 320, toujours centré et jamais au-dessus d'un bouton. `clamp` et non une requête de média : la coupure ne tombe pas à une largeur d'appareil mais là où le titre cesse d'entrer, ce qui dépend du titre. ⛔ Le `.greeting` de l'accueil garde ses 30 px — il occupe toute la largeur et n'a aucun bouton à côté de lui, donc rien de ce paragraphe ne le concerne. */ .pane-head .page-title { font-size: clamp(27.5px, 6.53vw, 32.5px); line-height: 1.12; text-wrap: balance; } .head-title { text-align: center; min-width: 0; } .head-side { display: flex; align-items: center; gap: 8px; min-width: 0; } .head-right { justify-content: flex-end; } /* Même traitement pour les écrans de détail : retour à gauche, titre centré. ⚠️ **La règle vit plus bas, et une seule fois** — voir `.detail-head` dans la section des écrans de détail. Elle était déclarée ici *et* là-bas, avec deux dispositions différentes ; les deux ont la même spécificité, donc c'est l'ordre du fichier qui tranchait et celle d'en bas gagnait en silence. Le `align-items: start` écrit ici n'a jamais rien aligné. */ /* La série de jours saisis. Discrète à dessein : elle compte le fait de tenir son journal, pas la conformité à une cible — et elle ne doit pas prendre le pas sur ce qu'on est venu lire. */ .streak { display: inline-flex; align-items: center; gap: 5px; font-size: 20px; font-weight: 600; color: var(--terra); background: color-mix(in srgb, var(--terra) 12%, transparent); border-radius: 999px; padding: 5px 11px; white-space: nowrap; } .streak .icon { width: 15px; height: 15px; } /* L'avatar qui a remplacé l'onglet Profil : initiale par défaut, photo dès qu'il y en a une. */ .avatar-btn { width: 42px; height: 42px; min-height: 42px; flex: none; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; background: var(--card); color: var(--cinnamon); font-size: 24px; font-weight: 600; padding: 0; overflow: hidden; display: grid; place-items: center; } .avatar-btn img { width: 100%; height: 100%; object-fit: cover; } /* ── La carte d'identité du profil — § 16 ──────────────────────────────────── Le portrait est plus grand qu'en en-tête (56 contre 42) : c'est l'écran où l'on vient voir son compte, et une vignette de barre d'onglets y ferait figure de miniature égarée. Il n'est pas cliquable — on est déjà sur le profil. ⚠️ **`flex: none` sur le portrait, et `min-width: 0` sur le texte.** Sans le premier, une adresse longue comprime le rond en ovale ; sans le second, elle déborde de la carte au lieu de se couper — les deux se voient sur `luca.corona1405@gmail.com`, qui fait 25 caractères. */ .identity-card { display: flex; align-items: center; gap: 14px; } /* ── L'écran « Importer » — § 10 ───────────────────────────────────────────── Les portes réutilisent `.sheet-item`, qui est le dessin d'une entrée de menu : même hauteur, même icône, même paire titre/détail. Les rhabiller aurait donné deux apparences au même geste selon la porte par laquelle on l'atteint. */ /* ── Les fournisseurs reliés, dans la feuille de réglages — § 15 bis ───────── */ .settings-block { padding: 4px 14px 10px; } .settings-sous-titre { padding: 0; margin: 10px 0 6px; color: var(--muted); font-size: 19.5px; } .identite-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); } .identite-texte { display: flex; flex-direction: column; min-width: 0; } .identite-texte strong { font-size: 22.5px; font-weight: 600; } .identite-texte small { color: var(--muted); font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Un bouton grisé garde son libellé lisible : il dit ce qu'on ne peut pas faire, et son `title` dit pourquoi. ⛔ Donc par une encre, pas par `opacity`. */ .identite-ligne .link-btn:disabled { cursor: not-allowed; } /* ── La feuille « demander » — celle qui remplace prompt() et confirm() ────── */ /* ⚠️ **Un seul endroit pour le champ du carnet** — DA01, 21/09. `#ask-champ` est un identifiant : une règle de classe posée à côté ne l'aurait jamais emporté, et on se serait retrouvé avec un champ crème dans une feuille ivoire. Les deux sélecteurs partagent donc la même déclaration, et `.carnet-champ` reste la classe que les autres menus emploieront (03d). Le plancher de 16 px du § 1 n'est pas touché : `--t-champ` vaut 24 px. */ #ask-champ, .carnet .carnet-champ { display: block; width: auto; border: 1px solid var(--carnet-filet); border-radius: 16px; padding: 12px 14px; background: var(--carnet-carte); color: var(--carnet-encre); font-size: var(--t-champ); min-height: 48px; margin: 10px 2px 4px; } /* Une option se touche : c'est une entrée de menu (`.sheet-item`), et elle en garde le dessin — socle des feuilles, 20/09. `.ask-option` ne porte plus que ce qui lui est propre : la cible tactile du § 11, que `test_demander` garde. */ /* ⚠️ **Le retrait vient de l'entrée, pas de la liste.** `.sheet-item` porte déjà ses 14 px : les cumuler posait le libellé d'une option 14 px plus à droite que le titre de la question, et le survol s'arrêtait avant le bord comme aucune autre entrée de feuille. */ .ask-liste { display: grid; gap: 2px; margin: 6px 0 4px; max-height: 46vh; overflow-y: auto; } .ask-option { min-height: 44px; font-size: 22.5px; } /* Dans le carnet, une option est une carte comme les autres — mais **sans chevron ni illustration** : elle choisit, elle n'ouvre pas une étape de plus, et le cadre interdit le chevron trompeur sur une sélection. L'état courant prend la sauge, avec la coche que pose `_askOuvrir`. */ .carnet .ask-liste { gap: 8px; margin: 4px 0; } .carnet .ask-option { min-height: 56px; padding: 12px 14px; border: 1px solid var(--carnet-filet); border-radius: 18px; background: var(--carnet-carte); color: var(--carnet-encre); font-size: var(--t-carte); font-weight: var(--g-accent); } .carnet .ask-option:hover:not(:disabled) { background: var(--carnet-carte); border-color: var(--carnet-filet-vif); } /* Le texte et le champ suivent le retrait du titre (14 px), comme les feuilles de réglages : quatre bords différents dans une feuille de trois lignes. Les menus du socle (C02, C03) ont la même amorce sous leur titre. */ :is(#ask-sheet, #pick-sheet, #cmenu-sheet, #rmenu-sheet, #prefs-sheet, #emenu-sheet) > .hint { margin-inline: 14px; } /* Le pied vient du socle (`.sheet-actions`). Le bouton qui détruit porte la couleur de ce qu'il fait — et il reste à droite, là où l'œil finit : on lit la question avant l'action. */ .ask-actions .btn-primary.danger { background: var(--danger); border-color: var(--danger); } /* ── Créer une recette — § 15 ──────────────────────────────────────────────── ⚠️ **Les champs héritent du plancher de 16 px** posé au § 1 : iOS agrandit la page dès qu'on met au point un champ dont le texte est plus petit, puis la laisse zoomée *et décalée* quand le clavier se referme. On ne redéclare donc aucune taille ici — la contrainte se tient en ne l'écrasant pas. */ #create-recipe-form { display: block; } .field-label { display: block; font-size: 19.5px; color: var(--muted); margin: 10px 0 4px; font-weight: 600; } /* ── Nouvelle recette — P16 de la refonte, 13/09 ─────────────────────────── */ .nr-head { position: relative; } /* Le statut, en haut à droite comme la maquette — une étiquette, pas un bouton. */ .nr-statut { position: absolute; right: 0; top: 4px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 19.5px; color: var(--muted); } .nr-statut .icon { width: 16px; height: 16px; } .nr-decor { margin-top: 40px; } .nr-decor-cuillere { right: 10px; bottom: 4px; width: 80px; transform: rotate(-30deg); } .nr-section { margin: 20px 0 2px; font-family: var(--ecriture); font-weight: 400; font-size: 28px; line-height: 1.2; } .nr-section-sous { margin: 0 0 10px; color: var(--muted); font-size: 21px; } h2.nr-section + .nr-champ { margin-top: 10px; } /* La photo : la grande zone pointillée à gauche, les portes à droite. Sous 360 px les portes passent dessous plutôt que d'écraser la zone. */ .nr-photo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; } .nr-photo-zone { min-height: 150px; padding: 0; border: 1.5px dashed var(--sand); border-radius: 18px; background: var(--card); color: inherit; font: inherit; cursor: pointer; overflow: hidden; } .nr-photo-vide { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; text-align: center; } .nr-photo-rond { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; margin-bottom: 6px; background: color-mix(in srgb, var(--terra) 12%, var(--card)); color: var(--terra); } .nr-photo-rond .icon { width: 26px; height: 26px; } .nr-photo-vide strong { font-size: 22.5px; font-weight: 600; } .nr-photo-vide small { color: var(--muted); font-size: 19px; line-height: 1.3; } .nr-photo-apercu { display: block; width: 100%; height: 100%; } .nr-photo-apercu img { display: block; width: 100%; height: 100%; min-height: 150px; object-fit: cover; } .nr-photo-portes { display: grid; gap: 8px; align-content: start; } .nr-porte { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; color: inherit; font: inherit; font-size: 21px; line-height: 1.2; text-align: left; cursor: pointer; } .nr-porte .icon { flex: none; width: 22px; height: 22px; color: var(--terra); } @media (max-width: 359px) { .nr-photo { grid-template-columns: 1fr; } } /* Les champs de la maquette : une icône, le champ, la flèche du menu. */ .nr-champ { position: relative; display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; } .nr-champ:focus-within { border-color: var(--terra); } .nr-champ > .icon { flex: none; width: 20px; height: 20px; color: var(--terra); pointer-events: none; } /* ⚠️ **16 px, le plancher du § 1** — les champs n'en déclarent pas moins. ⛔ **Et pas les radios** : mesuré au banc, `input` tout court donnait aux deux boutons de confidentialité 50 px de haut et toute la largeur — deux grands ronds posés sur leur propre texte. */ #create-recipe-form input:not([type="radio"]), #create-recipe-form select { flex: 1; min-width: 0; width: 100%; min-height: 50px; padding: 0 4px; border: none; background: none; color: inherit; font: inherit; font-size: 24px; outline: none; } #create-recipe-form select { appearance: none; -webkit-appearance: none; padding-right: 14px; cursor: pointer; text-overflow: ellipsis; } .nr-grille .nr-champ::after { content: ""; position: absolute; right: 11px; top: 50%; width: 7px; height: 7px; border-right: 1.8px solid var(--muted); border-bottom: 1.8px solid var(--muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; } .nr-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; } /* Les libellés du menu tiennent sur une ligne à 390 ; sous 375 px, une colonne. */ @media (max-width: 374px) { .nr-grille { grid-template-columns: 1fr; } } /* La confidentialité : deux cartes-radios, la choisie en terre cuite. */ .nr-choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; } .nr-option { position: relative; display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 10px 34px 10px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; cursor: pointer; } .nr-option input { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; margin: 0; accent-color: var(--terra); } .nr-option > .icon { flex: none; width: 22px; height: 22px; color: var(--muted); } .nr-option strong { display: block; font-size: 22.5px; font-weight: 600; white-space: nowrap; } .nr-option small { color: var(--muted); font-size: 19px; } .nr-option:has(input:checked) { border-color: var(--terra); background: color-mix(in srgb, var(--terra) 8%, var(--card)); } .nr-option:has(input:checked) > .icon, .nr-option:has(input:checked) strong { color: var(--cinnamon); } .nr-option:has(input:focus-visible) { outline: 2px solid var(--terra); outline-offset: 2px; } @media (max-width: 359px) { .nr-choix { grid-template-columns: 1fr; } } .nr-note { margin: 8px 0 0; } .nr-continuer { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; margin-top: 22px; font-size: 24px; } .nr-fleche { width: 20px; height: 20px; transform: rotate(-90deg); } #create-recipe-error { margin-top: 14px; } /* ── L'écran de bienvenue — le premier d'un compte neuf ───────────────────── */ .welcome-lead { color: var(--muted); font-size: 24px; line-height: 1.55; margin: 4px 0 22px; max-width: 34ch; } /* Mêmes cartes que l'écran « Importer » : un chemin se dessine pareil partout, sinon le même geste paraît différent selon la porte par laquelle on l'atteint. */ .welcome-portes { display: grid; gap: 10px; } .welcome-portes .sheet-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 14px; } /* ── La dernière question — § 15 ter ────────────────────────────────────────── Elle réemploie les cartes des portes : c'est une liste de choix, comme celle d'au-dessus, et lui inventer une forme à elle ferait croire qu'on change d'écran. Le choix retenu se marque, il ne valide pas tout seul — on peut se tromper de ligne au pouce, et « Autrement » ouvre un champ. */ .welcome-q { font-family: var(--ecriture); font-size: 27.5px; line-height: 1.3; margin: 4px 0 8px; } .welcome-portes .sheet-item.on { border-color: var(--terra); box-shadow: inset 0 0 0 1px var(--terra); } .welcome-autre { display: block; margin-top: 14px; } .welcome-autre span { display: block; font-size: 21px; margin-bottom: 6px; } .welcome-autre small { color: var(--muted); font-weight: 400; } /* 16 px minimum — § 1, verrou n° 4 : en dessous, iOS agrandit la page à la mise au point et la laisse décalée quand le clavier se referme. */ .welcome-autre input { width: 100%; font-size: 24px; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--card); color: inherit; } #screen-welcome .btn-primary { margin-top: 18px; } /* ── Réglages — C05, 17/09 — et ce que la P30 du 16/09 avait de listes ────── ⚠️ Scopé sur `#screen-reglages` (la page) — § *une règle qui ne gagne que par sa place se perd*. Les listes de réglages ont quitté le profil ; les règles suivent. */ #screen-reglages .profil-rubrique { margin: 28px 0 10px; font-family: var(--ecriture); font-weight: 700; font-size: 27.5px; color: var(--espresso); } #screen-reglages .profil-liste { list-style: none; margin: 0; padding: 0 16px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; } #screen-reglages .profil-liste > li + li { border-top: 1px solid var(--line); } #screen-reglages .profil-rubrique + .profil-liste { margin-top: 0; } #screen-reglages .profil-ligne { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 10px 0; border: none; background: none; font: inherit; color: var(--espresso); text-align: left; text-decoration: none; cursor: pointer; } #screen-reglages .profil-ligne > .icon { flex: none; width: 24px; height: 24px; color: var(--espresso); } #screen-reglages .profil-ligne > .icone-sauge { color: var(--sage); } #screen-reglages .profil-ligne > span:not(.pastille) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } #screen-reglages .profil-ligne strong { font-size: 24px; font-weight: 500; } #screen-reglages .profil-ligne small { font-size: 20px; color: var(--muted); line-height: 1.35; } #screen-reglages .profil-ligne > i { flex: none; font-style: normal; font-size: 27.5px; color: var(--muted); } #screen-reglages .profil-ligne .bar { margin: 6px 0 0; } #screen-reglages .profil-ligne .corrections-lead.warn { color: var(--cinnamon); font-weight: 600; } /* R04, 21/09 — la panne d'une ligne se dit en couleur d'alerte, et se reprend sous la ligne, alignée sur son texte (24 px d'icône + 14 px d'écart). */ #screen-reglages .profil-ligne small.warn { color: var(--cinnamon); font-weight: 600; } #screen-reglages .profil-reessayer { margin: 0 0 12px 38px; min-height: 44px; } #screen-reglages .profil-bascule .interrupteur { margin: 0 2px 0 0; } #screen-reglages .profil-apparence { flex-wrap: wrap; cursor: default; } #screen-reglages .profil-apparence .theme-picker { flex: 1 1 100%; flex-wrap: wrap; } #screen-reglages .profil-apparence .theme-picker button { min-width: 0; } #screen-reglages .profil-apparence .theme-picker button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; font-size: 21px; } /* ── Comptes bloqués — P35, 18/09 ───────────────────────────────────────────── ⚠️ Scopé sur `#screen-bloques` — § *une règle qui ne gagne que par sa place se perd*. La maquette : une intro, une carte d'aide rosée, un titre compté, une carte de lignes (initiale · nom · @pseudo · date · Débloquer en pastille), un état vide avec la marmite. Ce qu'elle montrait en plus — un ⋮ sans geste, « Comptes suggérés », des portraits — n'est pas là, et c'est la fiche. */ #screen-bloques .bloques-intro { margin: -6px 0 18px; color: var(--muted); font-size: 22.5px; line-height: 1.45; } #screen-bloques .bloques-aide { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--terra) 9%, var(--card)); border: 1px solid color-mix(in srgb, var(--terra) 22%, var(--line)); } #screen-bloques .bloques-aide-icone { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--cinnamon); background: color-mix(in srgb, var(--terra) 16%, var(--card)); } #screen-bloques .bloques-aide-icone .icon { width: 24px; height: 24px; } #screen-bloques .bloques-aide-texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; } #screen-bloques .bloques-aide-texte strong { font-size: 24px; font-weight: 600; color: var(--espresso); } #screen-bloques .bloques-aide-texte small { font-size: 21px; color: var(--muted); line-height: 1.4; } #screen-bloques .bloques-titre { margin: 26px 0 10px; font-family: var(--ecriture); font-weight: 700; font-size: 27.5px; color: var(--espresso); } #screen-bloques .bloques-carte { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 0 16px; } #screen-bloques .bloque-ligne { display: flex; align-items: center; gap: 10px; padding: 12px 0; } #screen-bloques .bloque-ligne + .bloque-ligne { border-top: 1px solid var(--line); } #screen-bloques .bloque-portrait { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--sand); color: var(--espresso); font-size: 26px; font-weight: 600; } #screen-bloques .bloque-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } #screen-bloques .bloque-texte strong { font-size: 24px; font-weight: 600; color: var(--espresso); } #screen-bloques .bloque-texte small { font-size: 20px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ⚠️ **La date se replie, elle ne se coupe pas** — mesuré au banc à 390 px : « Bloqué le 18 septembre 2026 » sortait « Bloqué le 18… » derrière la pastille. Un pseudo tronqué reste un pseudo ; une date tronquée n'est plus une date. */ #screen-bloques .bloque-texte .bloque-depuis { white-space: normal; line-height: 1.3; } /* La pastille « Débloquer » : 44 px de haut (AA), en terre cuite sur rosé — c'est une commande, pas une étiquette. Le libellé disparaît sous 360 px et l'icône reste, avec l'`aria-label` qui nomme le compte. */ #screen-bloques .bloque-debloquer { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 12px; border-radius: 999px; cursor: pointer; border: 1px solid color-mix(in srgb, var(--terra) 22%, var(--line)); background: color-mix(in srgb, var(--terra) 10%, var(--card)); color: var(--cinnamon); font: inherit; font-size: 22px; font-weight: 600; } #screen-bloques .bloque-debloquer .icon { width: 18px; height: 18px; } #screen-bloques .bloque-debloquer:disabled { cursor: progress; } #screen-bloques .bloque-ligne-envoi .bloque-texte { opacity: .55; } @media (max-width: 359px) { #screen-bloques .bloque-debloquer { padding: 0 12px; } #screen-bloques .bloque-debloquer span { display: none; } } #screen-bloques .bloques-attente { color: var(--muted); padding: 24px 0; text-align: center; } #screen-bloques .bloques-vide { text-align: center; padding: 26px 16px 8px; color: var(--muted); font-size: 22.5px; line-height: 1.45; } #screen-bloques .bloques-vide-marmite { width: 150px; height: auto; display: block; margin: 0 auto 6px; } #screen-bloques .bloques-vide-titre { margin: 0 0 8px; font-family: var(--ecriture); font-weight: 700; font-size: 29px; color: var(--espresso); } #screen-bloques .bloques-vide p { margin: 0; } #screen-bloques .bloques-erreur { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 16px; text-align: center; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 18px; } #screen-bloques .bloques-erreur p { margin: 0; } #screen-reglages .profil-apparence .theme-picker .icon { width: 17px; height: 17px; } /* Retour du 16/09 : les vidéos prennent la forme des autres rubriques — titre serif dehors, lignes dans la même carte — au lieu de l'ancienne `.card`. */ #screen-reglages .profil-videos, #screen-reglages .profil-signalements { margin-top: 0; } #screen-reglages .profil-rubrique-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } #screen-reglages .profil-rubrique-tete .link-btn { min-height: 44px; font-size: 22.5px; } #screen-reglages .profil-videos .video-row { border-bottom: none; padding: 12px 0; } #screen-reglages .profil-videos .video-thumb { width: 56px; height: 42px; } #screen-reglages .profil-videos .video-row { grid-template-columns: 56px 1fr; gap: 14px; } /* Tes signalements — retour du 16/09 : la forme des autres lignes, texte sur deux lignes au plus, statut en pastille discrète sous le texte. */ #screen-reglages .profil-signalement { cursor: default; } #screen-reglages .profil-signalement strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 23px; line-height: 1.35; } #screen-reglages .profil-signalement small { display: flex; align-items: center; gap: 8px; margin-top: 3px; } #screen-reglages .profil-statut { font-style: normal; font-size: 19px; font-weight: 600; line-height: 1; padding: 4px 9px; border-radius: 999px; background: var(--tuile-sable); color: var(--tuile-sable-i); } #screen-reglages .profil-statut.statut-vu { background: var(--tuile-rose); color: var(--tuile-rose-i); } #screen-reglages .profil-statut.statut-traite { background: var(--tuile-sauge); color: var(--tuile-sauge-i); } #screen-reglages .profil-source { margin: 22px 2px 0; font-size: 19.5px; color: var(--muted); line-height: 1.45; } /* La déconnexion ferme le profil : en bas, là où on la cherche (signalé par Luca le 15/09), à gauche comme sur la maquette, le mot de la maison à droite. */ #screen-reglages .profil-pied { display: flex; align-items: center; gap: 12px; margin: 22px 0 28px; } #screen-reglages .profil-deconnexion { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; margin: 0; padding: 0 14px; white-space: nowrap; color: var(--deconnexion-texte); background: var(--deconnexion-fond); border-color: transparent; font-weight: 600; } #screen-reglages .profil-deconnexion .icon { width: 21px; height: 21px; } #screen-reglages .profil-merci { flex: 1 1 0; min-width: 0; margin: 0; text-align: center; transform: rotate(-7deg); font-family: var(--ecriture); font-size: clamp(20px, 6.4vw, 25px); line-height: 1.05; color: var(--coeur); } #screen-reglages .profil-merci .icon { display: block; margin: 2px auto 0; width: 22px; height: 22px; } @media (max-width: 359px) { #screen-reglages .profil-merci { font-size: 26px; white-space: normal; } #screen-reglages .profil-deconnexion { padding: 0 12px; gap: 7px; } #screen-reglages .profil-apparence .theme-picker { gap: 6px; } #screen-reglages .profil-apparence .theme-picker button { padding: 8px 4px; font-size: 19.5px; gap: 4px; } } /* ⚠️ **Un champ ne descend jamais sous 16 px** (§ 1). */ #profil-sheet textarea { width: 100%; font: inherit; font-size: 24px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--cream); color: var(--espresso); resize: vertical; } #profil-sheet #pp-bio-champ label { display: block; margin: 8px 0 6px; } /* ── Les feuilles du compte — P30, 16/09 ───────────────────────────────────── ⚠️ **Tout champ à 16 px** (§ 1) ; commandes à 44 px. */ #profil-sheet .compte-portrait { display: flex; align-items: center; gap: 16px; } #profil-sheet .compte-portrait .identity-portrait { width: 72px; height: 72px; font-size: 31px; } #profil-sheet .compte-portrait-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } #profil-sheet .compte-fichier { position: relative; display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; } #profil-sheet .compte-fichier input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } #profil-sheet .compte-fichier:focus-within { outline: 2px solid var(--terra); outline-offset: 2px; } #profil-sheet .compte-ligne, #profil-sheet .compte-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; } #profil-sheet .compte-ligne > span { display: flex; flex-direction: column; min-width: 0; } #profil-sheet .compte-ligne small { color: var(--muted); overflow-wrap: anywhere; } #profil-sheet .compte-ligne .link-btn { min-height: 44px; } #profil-sheet .compte-actions > * { flex: 1; } #profil-sheet .compte-champ, #securite-sheet .compte-champ { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: 21px; color: var(--muted); } #profil-sheet .compte-champ input, #securite-sheet .compte-champ input { font: inherit; font-size: 24px; min-height: 48px; padding: 10px 14px; color: var(--espresso); border: 1px solid var(--line); border-radius: 14px; background: var(--cream); } #profil-sheet .compte-formulaire .hint, #securite-sheet .compte-formulaire .hint { margin: 10px 0 0; } #profil-sheet .compte-formulaire .compte-actions { margin-top: 12px; } #profil-sheet .compte-etat { margin: 6px 0 0; min-height: 1.3em; } #profil-sheet .compte-etat.warn { color: var(--danger); } #profil-sheet .reglage-ligne select { font-size: 24px; min-height: 44px; } #securite-sheet .compte-formulaire .btn-primary { width: 100%; margin-top: 14px; } #securite-sheet .compte-large { width: 100%; min-height: 48px; margin-top: 10px; } #donnees-sheet .donnees-liste { margin: 4px 0 14px; } #donnees-sheet .donnees-liste li { font-size: 22.5px; } /* Un seul retrait pour tout ce que ces feuilles portent — vu au banc : titres de section, langue, pseudo et liste des données tombaient sur quatre bords différents. Celui du titre de la feuille (14 px) fait foi. */ :is(#profil-sheet, #securite-sheet, #donnees-sheet) > :is(.hint, .stats, .sheet-item, .form-error) { margin-inline: 14px; width: auto; } :is(#profil-sheet, #securite-sheet, #donnees-sheet) .settings-block { padding: 2px 14px 12px; } :is(#profil-sheet, #securite-sheet, #donnees-sheet) .settings-block + .settings-block { border-top: 1px solid var(--line); padding-top: 6px; } :is(#profil-sheet, #securite-sheet, #donnees-sheet) .settings-sous-titre { margin: 12px 0 4px; padding: 0; font-family: var(--ecriture); font-size: 19px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } :is(#profil-sheet, #securite-sheet, #donnees-sheet) .settings-block :is(.reglage-ligne, .sheet-item) { padding-inline: 0; } :is(#profil-sheet, #securite-sheet, #donnees-sheet) .reglage-ligne small { color: var(--muted); } #donnees-sheet > .sheet-item { padding-inline: 0; } #securite-sheet .identite-ligne .link-btn { min-height: 44px; } /* Le pied de ces feuilles (retrait de 14 px, bouton seul en pleine largeur) est celui du socle `.sheet-actions` depuis le 20/09 : plus de surcharge ici. */ #donnees-sheet .donnees-liste { margin-bottom: 8px; } /* Les deux étapes de la suppression écrivent sur plusieurs lignes. */ #ask-texte { white-space: pre-line; } #notif-sheet .notif-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* ── P29 — la bienvenue de la maquette, 15/09 ──────────────────────────────── ⚠️ Toutes les règles nouvelles sont scopées sur `#screen-welcome`. */ /* La scène : bord à bord, sous la zone sûre, les pièces posées en pourcentages d'une boîte à hauteur fixe — un seul nombre (`--scene-h`) règle tout. Aucune pièce n'est une information : `aria-hidden` sur la scène entière. */ #screen-welcome { position: relative; } #screen-welcome .welcome-scene { --scene-h: 320px; position: relative; height: var(--scene-h); overflow: hidden; margin: -28px -20px 0; background: radial-gradient(120% 70% at 50% 100%, var(--cream) 58%, transparent 59%) bottom / 100% 60px no-repeat, radial-gradient(90% 80% at 70% 20%, #FFF8EF 0%, #F6E3CF 60%, #EBCBAE 100%); } #screen-welcome .welcome-scene img { position: absolute; display: block; pointer-events: none; } #screen-welcome .ws-logo { left: 18px; top: calc(20px + env(safe-area-inset-top, 0px)); width: 30%; max-width: 160px; z-index: 3; } /* ⚠️ Mesuré au banc : les dessins n'ont pas les mêmes proportions (la cuillère fait 319 × 1400) — dimensionnés tous en largeur, la cuillère montait à 377 px et passait devant la marmite. Chaque pièce se règle sur la dimension qui la borne, et la marmite reste au centre, la plus grande. */ #screen-welcome .ws-marmite { left: 50%; bottom: 34px; width: 58%; max-width: 310px; transform: translateX(-50%); z-index: 2; } #screen-welcome .ws-couvercle { left: 50%; bottom: calc(34px + min(58vw, 310px) * .56); width: 40%; max-width: 215px; transform: translateX(-2%) rotate(-24deg); transform-origin: left bottom; z-index: 2; } #screen-welcome .ws-vapeur { left: 50%; bottom: calc(40px + min(58vw, 310px) * .5); height: 44%; transform: translateX(-80%); opacity: .6; z-index: 1; } #screen-welcome .ws-basilic { left: 3%; bottom: 40px; width: 20%; max-width: 104px; z-index: 3; } #screen-welcome .ws-tomate-1 { left: 0; bottom: 26px; width: 15%; max-width: 80px; z-index: 4; } #screen-welcome .ws-tomate-2 { left: 13%; bottom: 18px; width: 12%; max-width: 62px; z-index: 4; } #screen-welcome .ws-ail { right: 15%; bottom: 26px; width: 12%; max-width: 62px; z-index: 3; } #screen-welcome .ws-cuillere { right: 6%; bottom: 20px; height: 46%; transform: rotate(52deg); transform-origin: 50% 90%; z-index: 1; } @media (max-width: 359px) { #screen-welcome .welcome-scene { --scene-h: 260px; } } /* « Passer » : une pilule sur la scène, en haut à droite, comme sur la maquette. */ #screen-welcome .welcome-passer { position: absolute; top: calc(18px + env(safe-area-inset-top, 0px)); right: 16px; z-index: 2; min-height: 44px; padding: 8px 18px; border-radius: 999px; border: none; /* La pilule vit sur la scène, qui reste claire en sombre : ses couleurs sont fixes, sinon le texte du thème sombre disparaît sur son fond (vu au banc). */ background: rgb(255 252 246 / 90%); color: #2E241D; font: inherit; font-size: 22.5px; cursor: pointer; box-shadow: 0 1px 4px rgb(46 36 29 / 10%); } #screen-welcome .welcome-titre { margin: 4px 0 6px; text-align: center; font-family: var(--ecriture); font-weight: 400; font-size: 41px; line-height: 1.1; } #screen-welcome .welcome-sous { margin: 0 0 6px; text-align: center; font-size: 25px; color: var(--espresso); } #screen-welcome [data-welcome-step="portes"] .welcome-lead { margin: 0 auto 18px; text-align: center; max-width: 38ch; font-size: 23px; } /* Les quatre cartes : deux colonnes, pastel, pictogramme teinté au-dessus. La choisie est bordée de terre cuite ; `aria-pressed` le dit sans la couleur. */ :is(#screen-welcome, #auth-welcome) .welcome-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } :is(#screen-welcome, #auth-welcome) .welcome-carte { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 14px 10px; border-radius: 18px; text-align: center; cursor: pointer; border: 1.5px solid transparent; color: var(--espresso); font: inherit; } :is(#screen-welcome, #auth-welcome) .welcome-carte-terra { background: color-mix(in srgb, var(--terra) 8%, var(--card)); } :is(#screen-welcome, #auth-welcome) .welcome-carte-sauge { background: color-mix(in srgb, var(--sage) 10%, var(--card)); } :is(#screen-welcome, #auth-welcome) .welcome-carte-icone { display: grid; place-items: center; width: 44px; height: 44px; } :is(#screen-welcome, #auth-welcome) .welcome-carte-terra .welcome-carte-icone { color: var(--danger); } :is(#screen-welcome, #auth-welcome) .welcome-carte-sauge .welcome-carte-icone { color: color-mix(in srgb, var(--sage) 70%, var(--espresso)); } :is(#screen-welcome, #auth-welcome) .welcome-carte-icone .icon { width: 34px; height: 34px; } :is(#screen-welcome, #auth-welcome) .welcome-carte-icone img { width: 44px; height: 44px; object-fit: contain; } :is(#screen-welcome, #auth-welcome) .welcome-carte strong { font-family: var(--ecriture); font-weight: 400; font-size: 25px; line-height: 1.2; } :is(#screen-welcome, #auth-welcome) .welcome-carte small { color: var(--muted); font-size: 20px; line-height: 1.35; } #screen-welcome .welcome-carte[aria-pressed="true"] { border-color: var(--terra); box-shadow: 0 2px 10px color-mix(in srgb, var(--terra) 18%, transparent); } @media (max-width: 339px) { :is(#screen-welcome, #auth-welcome) .welcome-cartes { grid-template-columns: minmax(0, 1fr); } } /* Le choix du suivi : une carte, l'interrupteur à droite, non coché par défaut. */ #screen-welcome .welcome-suivi { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); cursor: pointer; } #screen-welcome .welcome-suivi-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } #screen-welcome .welcome-suivi-texte strong { font-size: 23px; font-weight: 600; } #screen-welcome .welcome-suivi-texte small { color: var(--muted); font-size: 20px; } #screen-welcome .welcome-commencer { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; font-size: 24.5px; } #screen-welcome .welcome-commencer .icon { width: 22px; height: 22px; } #screen-welcome .welcome-compte { display: block; min-height: 44px; margin: 8px auto 0; padding: 0 16px; color: var(--cinnamon); font-size: 23px; font-weight: 600; } /* Les cartes de présentation (sur le welcome de P38) ne sont pas des commandes — même forme, sans curseur ni état choisi. */ :is(#screen-welcome, #auth-welcome) div.welcome-carte { cursor: default; } #welcome-source-skip { display: block; margin: 14px auto 0; } /* ── Le champ d'import — § 10 quater ──────────────────────────────────────── ⚠️ **Le champ prend toute la largeur, et le bouton passe dessous.** Mesuré au banc à 390 px : côte à côte, il ne restait **180 px** au champ — trois mots par ligne dès qu'on y colle une recette, et une adresse coupée au vingtième caractère. C'est déjà la forme de l'import en masse, deux cartes plus bas, et rien ne justifiait que les deux diffèrent. ⛔ **Et la règle se scope sur `.card`, pas sur l'ordre du fichier.** `.card textarea` existe **plus bas** avec la même spécificité : elle gagnait donc au départage, et le champ héritait de `resize: vertical`, d'un fond `--cream` et d'une marge basse que personne n'avait demandés. Mesuré au banc, pas relu — `getComputedStyle` disait `vertical` alors que la feuille servie portait bien `none`. Une règle qui ne gagne que par sa **place** se perd au premier déplacement, et rien ne le dit. */ .import-row { display: flex; flex-wrap: wrap; gap: 10px; } .import-row input, .card .import-row textarea { flex: 1 1 100%; min-width: 0; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--card); color: inherit; } /* Le champ grandit avec ce qu'on y colle, **jusqu'à un plafond** — au-delà il défile de lui-même. Sans plafond, une recette de quarante lignes pousserait le bouton « Importer » hors de l'écran : le § 5, obtenu par un champ de saisie. ⛔ `resize: none` parce qu'un champ qui grandit tout seul n'a personne à qui offrir ce geste, et que la poignée native se pose par-dessus le coin arrondi. */ .card .import-row textarea { resize: none; overflow-y: auto; margin-bottom: 0; line-height: 1.45; max-height: 220px; } .import-row .btn-primary { flex: 1 1 100%; } .import-note { margin-top: 12px; } /* ── Importer — P14 de la refonte, 13/09 ───────────────────────────────── La maquette : un grand titre serif avec un décor culinaire à droite, le champ en tête, une rangée de plateformes *dites*, des tuiles pour les autres portes, une carte d'idées sur fond sauge, et des accès en pied. Ce qu'elle dessinait en « Derniers imports » n'existe pas côté serveur — voir la fiche. ⚠️ **Le décor cède la place au texte, jamais l'inverse.** Il est en `flex: none` avec une largeur fixe : c'est le titre qui passe sur deux lignes à 390 px (« Importer une / recette »), et sous 360 px c'est le décor qui rétrécit. Un titre coupé à un mot par ligne serait le § 10 — un écran étiré — obtenu en sens inverse. */ .ip-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "retour decor" "texte decor"; column-gap: 12px; margin-bottom: 14px; } .ip-head > .icon-btn { grid-area: retour; align-self: start; } .ip-head-texte { grid-area: texte; min-width: 0; padding-top: 6px; } .ip-titre { margin: 0 0 6px; font-family: var(--ecriture); font-weight: 400; font-size: clamp(30px, 8.48vw, 34.5px); line-height: 1.1; } .ip-intro { margin: 0; color: var(--muted); font-size: 22.5px; line-height: 1.35; } .ip-decor { grid-area: decor; position: relative; width: 136px; height: 118px; align-self: end; } .ip-decor img { position: absolute; display: block; pointer-events: none; } .ip-decor-marmite { right: 0; bottom: 0; width: 122px; } .ip-decor-aliment { width: 36px; } .ip-decor-tomate { left: 0; bottom: 0; } .ip-decor-ail { left: 24px; bottom: -6px; width: 30px; } .ip-decor-basilic { right: -2px; top: 4px; width: 40px; transform: rotate(16deg); } @media (max-width: 359px) { .ip-decor { width: 100px; height: 88px; } .ip-decor-marmite { width: 90px; } .ip-decor-aliment { width: 26px; } .ip-decor-ail { width: 22px; left: 18px; } .ip-decor-basilic { width: 30px; } } /* Le champ : l'icône de lien à gauche et la croix à droite vivent **dans** le cadre du champ, donc c'est le champ qui leur fait de la place. ⚠️ La règle qui décide de ce champ reste `.card .import-row textarea` (voir plus haut) : celle-ci ne touche qu'au rembourrage, et gagne par spécificité (0,3,1), pas par sa place dans le fichier. */ /* « Analyser » à côté du champ, comme la maquette : le champ prend le reste et le bouton garde sa largeur, aligné en haut pour qu'un collage de quarante lignes grandisse *sous* lui. ⚠️ **Sous 375 px le bouton passe dessous** : 122 px de bouton dans 292 px de carte laissaient 106 px de texte au champ, soit un libellé de substitution sur deux lignes dans un champ d'une. */ .ip-saisie .import-row { flex-wrap: nowrap; align-items: flex-start; } .ip-champ { position: relative; flex: 1 1 auto; min-width: 0; } .ip-saisie .import-row .ip-analyser { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 49px; padding: 0 12px; white-space: nowrap; } .ip-analyser .icon { width: 18px; height: 18px; } @media (max-width: 374px) { .ip-saisie .import-row { flex-wrap: wrap; } .ip-saisie .import-row .ip-analyser { flex: 1 1 100%; justify-content: center; } } .card .import-row .ip-champ textarea { display: block; width: 100%; padding-left: 40px; padding-right: 10px; } /* La place de la croix ne se réserve que quand la croix est là : à 320 px, le champ n'a que 150 px de texte avec les deux rembourrages, et le libellé de substitution y passait sur deux lignes. */ .card .import-row .ip-champ:has(.ip-effacer:not([hidden])) textarea { padding-right: 44px; } .ip-champ-icone { position: absolute; left: 12px; top: 13px; width: 22px; height: 22px; color: var(--muted); pointer-events: none; } .ip-effacer { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; display: grid; place-items: center; border: none; background: none; color: var(--muted); cursor: pointer; border-radius: 12px; } .ip-effacer .icon { width: 20px; height: 20px; } .ip-effacer:hover { color: var(--espresso); } /* Les plateformes, **dites** : une liste, pas des boutons. Cinq colonnes égales sur 322 px de carte à 390 : « Instagram » en 12,5 px y tient sans se couper. */ .ip-sources { list-style: none; margin: 14px auto 0; padding: 0; max-width: 480px; display: flex; justify-content: space-between; gap: 2px; } /* ⚠️ **Six sources depuis Pinterest (13/09), et chacune garde son mot entier.** Des colonnes égales coupaient « Instagram » ; `nowrap` à 12,5 px débordait de la carte de 20 px à 390. Chaque mot prend sa largeur à 11,5 px — 295 px pour 310 —, et **sous 375 px la rangée devient deux rangs de trois** plutôt que de rogner un nom. */ .ip-sources li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 17px; color: var(--muted); text-align: center; white-space: nowrap; } .ip-sources .icon { width: 24px; height: 24px; color: var(--espresso); } @media (max-width: 374px) { .ip-sources { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 12px; } .ip-sources li { font-size: 19px; } } .ip-saisie .import-note { margin-top: 12px; margin-bottom: 0; } .ip-separateur { display: flex; align-items: center; gap: 12px; margin: 18px 0 12px; color: var(--muted); font-size: 21px; } .ip-separateur::before, .ip-separateur::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* Les trois cartes de la maquette, sur une rangée. 100 px par carte à 390 : le titre passe sur deux lignes, c'est ce que la maquette dessine aussi. */ .import-portes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .ip-tuile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 16px 8px 14px; min-height: 44px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; color: inherit; font: inherit; cursor: pointer; } .ip-tuile:hover { background: var(--cream); } .ip-tuile-icone { display: flex; color: var(--terra); } .ip-tuile-icone .icon { width: 30px; height: 30px; } .ip-tuile strong { font-size: 22.5px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; } .ip-tuile small { color: var(--muted); font-size: 19px; line-height: 1.3; } @media (max-width: 359px) { .import-portes { gap: 6px; } .ip-tuile { padding: 12px 4px 10px; } .ip-tuile strong { font-size: 20px; } .ip-tuile small { font-size: 17px; } } .ip-ligne { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 12px 14px; min-height: 56px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; color: inherit; font: inherit; text-align: left; cursor: pointer; } .ip-ligne:hover { background: var(--cream); } .ip-ligne-icone { flex: none; display: flex; color: var(--terra); } .ip-ligne-icone .icon { width: 26px; height: 26px; } .ip-ligne-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ip-ligne-texte strong { font-size: 23px; font-weight: 600; } .ip-ligne-texte small { color: var(--muted); font-size: 19.5px; line-height: 1.3; } .ip-ligne-chevron { flex: none; width: 18px; height: 18px; color: var(--muted); transform: rotate(-90deg); } .ip-acces .ip-ligne { margin-top: 0; } .ip-acces { display: grid; gap: 10px; margin-top: 10px; } /* Les derniers imports : vignette avec le logo de sa plateforme, titre, date, et « Recette créée » en sauge — la ligne de la maquette. */ .ip-recents { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } .ip-recent { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px 10px 10px; min-height: 64px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; color: inherit; font: inherit; text-align: left; cursor: pointer; } .ip-recent:hover { background: var(--cream); } .ip-recent-vignette { position: relative; flex: none; width: 54px; height: 54px; } /* ⚠️ **Le cadre dimensionne ses enfants, pas une classe posée sur l'image** : `replierSiCassee` remplace une photo morte par un dessin neuf, qui n'emporte pas les classes de l'image qu'il remplace — mesuré au banc, un blanc de poulet de 400 px posé en travers de la liste. */ .ip-recent-img, .ip-recent-vignette > img, .ip-recent-vignette > div { display: block; width: 54px; height: 54px; border-radius: 12px; object-fit: cover; background: var(--cream); } .ip-recent-vignette .thumb-fallback { display: grid; place-items: center; color: var(--sand); } .ip-recent-vignette .thumb-fallback .icon { width: 26px; height: 26px; } .ip-recent-badge { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--card); color: var(--espresso); border: 1px solid var(--line); } .ip-recent-badge .icon { width: 13px; height: 13px; } .ip-recent-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ip-recent-texte strong { font-size: 22.5px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ip-recent-texte small { color: var(--muted); font-size: 19px; } .ip-recent-etat { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 19px; color: var(--sage); white-space: nowrap; } .ip-recent-etat .icon { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--sage); color: #fff; } /* L'état reste sur la ligne du titre, comme la maquette, tant qu'il reste au titre de quoi tenir sur deux lignes ; sous 375 px il passe sous la date. */ @media (max-width: 374px) { .ip-recent { flex-wrap: wrap; } .ip-recent-etat { order: 3; width: 100%; padding-left: 66px; margin-top: -4px; } } .ip-recents-vide { margin: 0; } .ip-voir-tout { margin-top: 10px; } /* La carte d'idées : un fond sauge pâle, dérivé du jeton pour suivre le sombre — un hex posé ici serait une seconde définition de la sauge. */ .ip-idees { display: flex; gap: 14px; align-items: flex-start; margin-top: 16px; padding: 16px; border-radius: 18px; background: color-mix(in srgb, var(--sage) 16%, var(--card)); } .ip-idees-icone { flex: none; width: 30px; height: 30px; color: var(--sage); margin-top: 2px; } .ip-idees b { display: block; font-size: 23px; margin-bottom: 4px; } .ip-idees p { margin: 0; color: var(--muted); font-size: 20px; line-height: 1.4; } .identity-portrait { flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--sand); color: var(--espresso); font-size: 27.5px; font-weight: 600; line-height: 1; } .identity-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; } .identity-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .identity-text b { font-size: 24.5px; font-weight: 600; } .identity-text small { color: var(--muted); font-size: 19.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Retour d'un écran de détail ─────────────────────────────────────────── */ /* Les onglets glissent nativement dans le carrousel ; seuls les écrans de détail, qui vivent hors de lui, gardent une transition. */ @keyframes slide-from-right { from { opacity: .4; transform: translateX(-22px); } } .screen.slide-right { animation: slide-from-right .24s ease-out; } @media (prefers-reduced-motion: reduce) { .screen.slide-right { animation: none; } } /* ── Navigation ──────────────────────────────────────────────────────────── */ .tabbar { /* Bord bas seulement : la largeur et le centrage viennent du recadrage des couches fixes, en haut de cette feuille. */ position: fixed; bottom: 0; z-index: 40; height: var(--tabbar-h); /* Quatre onglets plus le ➕ : cinq cellules, et le ➕ occupe la troisième — donc exactement le milieu. C'est ce qui a fait sortir Profil de la barre : à six cellules, aucun réglage de largeur ne peut centrer un bouton placé en troisième position sur deux groupes de 2 et 3. */ display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; /* ⛔ **Pas de `backdrop-filter` ici, et c'est la règle la plus chère du fichier.** La barre est *fixe*, *pleine largeur* et présente sur **tous** les écrans : un flou d'arrière-plan oblige le navigateur à re-flouter la bande qu'elle couvre **à chaque image de chaque défilement**, sur toute l'application. Le défilement vertical quitte alors le fil compositeur — le même mode d'échec qu'un `touchmove` non passif (voir en tête d'`app.js`), obtenu par une seule ligne de décoration. Le fond est donc **opaque**. Une barre translucide sans flou serait pire encore : on verrait le contenu glisser dessous en clair. */ background: var(--barre); /* Pas de filet : le fichier « footer Navbar » n'en a pas — la bande se distingue du fond des pages par sa seule couleur, et c'est le couvercle de la cocotte qui marque son bord. */ padding-bottom: env(safe-area-inset-bottom); } .tab { border: none; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; /* Rembourrage dissymétrique : centrés dans la barre, les onglets se lisaient « un rien trop haut » (Luca, 12/09) — ils descendent de 5 px. */ font-size: 16px; color: var(--bouton-second-texte); padding: 12px 2px 2px; overflow: hidden; white-space: nowrap; /* ⛔ Pas de surlignage natif au toucher : iOS et Android peignent un rectangle gris sur la boîte du bouton pendant le tap — sur la cocotte, dont la boîte est transparente, c'est un « vieux carré » qui apparaît une fraction de seconde (signalé le 12/09). Le retour du geste est le `:active` ci-dessous, sur le dessin lui-même. */ -webkit-tap-highlight-color: transparent; } .tab .icon { width: 23px; height: 23px; opacity: .62; } .tab.active { color: var(--cinnamon); font-weight: 600; } .tab.active .icon { opacity: 1; color: var(--cinnamon); } /* ⚠️ **« Communaut » — mesuré au banc, revue de 03b.** Cinq cellules de 61 px à 320 px : le plus long des cinq libellés demande 67 px à 16 px de Caveat, et `overflow: hidden` le coupait **sans ellipse**, donc sans rien dire. Le libellé d'un onglet ne s'abrège pas : c'est le nom de la destination. Il passe donc à 13,5 px sous 360 px — la même exception que les vingt autres règles `max-width: 359px` de ce fichier —, ce qui ramène le besoin à 57 px. ⛔ Pas de `letter-spacing` négatif : sur une manuscrite, les lettres sont dessinées liées, et les resserrer les fait se chevaucher. */ @media (max-width: 359px) { .tab { font-size: 13.5px; padding-left: 0; padding-right: 0; } .tab .icon { width: 21px; height: 21px; } } /* ── Le ➕ est une cocotte — 12/09 ──────────────────────────────────────── Fichier « footer Navbar » : plus de disque terra, un dessin. Il n'a ni fond ni ombre — le dessin porte son propre contour, découpé avec lui — et il **dépasse de la barre** par le couvercle, comme sur le fichier. Trois choses que le disque n'avait pas à savoir : - `.tab` coupe ce qui dépasse (`overflow: hidden`) : le couvercle serait rasé net au bord de la barre, sans un mot. Le ➕ rouvre le débordement. - la géométrie se dérive du fichier, à l'échelle 1320 → 390 (× 3,385) : la découpe fait 255 × 212 → 75 × 63 px, et sa tête est 89 px au-dessus de la bande → 26 px. Un test relit le fichier livré. - le bouton reste un `.tab` de la grille (troisième cellule de cinq), donc `tabOrder()` et le carrousel ne changent pas. */ .tab-add { justify-self: center; align-self: start; width: 75px; height: 63px; margin-top: -26px; padding: 0; overflow: visible; transition: transform .18s ease; } .tab-add-cocotte { width: 75px; height: 63px; display: block; } .tab-add:hover { transform: translateY(-2px) scale(1.04); } .tab-add:active { transform: scale(.94); } /* Les deux pièces qui n'existent que dans le rail (§ « tablette et bureau ») : la marque en tête de colonne, et le mot que le ➕ n'a pas la place de porter sur une barre de cinq cellules. Elles vivent dans le HTML de la barre plutôt que dans un second balisage — un rail écrit à part serait une seconde navigation à tenir, et c'est `tabOrder()` qui ordonne le carrousel. */ .tab-add-mot, .rail-marque { display: none; } .rail-marque { align-items: center; padding: 4px 10px 16px; } .rail-marque img { width: 132px; height: auto; } /* ── Feuille du bouton central ───────────────────────────────────────────── */ .sheet-backdrop { position: fixed; inset: 0; z-index: 50; /* Même famille que la barre d'onglets : un `backdrop-filter` couvrant tout l'écran reste à re-composer à chaque image tant qu'une couche bouge au-dessus — et les molettes défilent précisément au-dessus. Deux pixels de flou ne se voient pas derrière un voile à 45 % ; ils se sentent. */ background: rgba(30, 24, 20, .45); } /* ⚠️ **Une feuille est bornée en hauteur.** Elle est ancrée en bas et grandit vers le haut : sans plafond, elle sort de l'écran par le haut dès que son contenu dépasse, et son titre part avec. Constaté le 13/08 — la feuille de quantité est passée à 702 px en gagnant des molettes plus hautes, pour 752 px disponibles à 844 pt de haut. Elle tenait de justesse sur un grand téléphone et débordait de 127 px sur un iPhone SE. Le plafond n'est donc pas une précaution : c'est ce qui rend la hauteur du contenu **sans conséquence**. Ce qui dépasse défile dans `.sheet-scroll`, et `.sheet-actions` garde l'action principale dans le cadre (§ 5 des conventions — c'est le même motif que `.filters-sheet`). */ .sheet { position: fixed; z-index: 51; display: flex; flex-direction: column; /* `--hors-reseau-h` : la bande du haut prend sa part du plafond (M01). */ max-height: min(88vh, calc(100dvh - var(--tabbar-h) - 24px - var(--hors-reseau-h, 0px))); /* ⚠️ **Le centre de la fenêtre n'est pas celui de la colonne — M02, 21/09.** `left: 50%` a suffi tant qu'il n'y avait que la colonne ; avec le rail de 252 px à gauche (≥ 1 180 px), la feuille se posait 126 px à gauche du contenu qu'elle commente — mesuré à 1 280 px : la zone de contenu va de 252 à 1 280, son centre est donc à **766** px, et la feuille de 440 px se posait à 420–860 au lieu de 546–986. ⚠️ Les deux bornes de la première version de ce commentaire (« la colonne va de 504 à 1 268 ») étaient fausses : elles décrivaient une colonne centrée sur la fenêtre entière, ce que la règle voisine ne fait précisément plus. C'est la formule du § 2, celle de la barre d'onglets et de la bande hors connexion, et `--rail-w` vaut zéro sur téléphone : la règle reste unique. ⛔ **Sans la largeur de la règle commune** — une feuille est bornée à 440 px, pas à la colonne entière. Le voile, lui, garde la fenêtre : il neutralise aussi le rail. */ left: calc(50% + var(--rail-w) / 2); transform: translateX(-50%); bottom: calc(var(--tabbar-h) + 12px); width: min(440px, calc(100% - 28px)); background: var(--card); border-radius: var(--radius); box-shadow: 0 18px 50px rgba(30, 24, 20, .28); padding: 8px; /* ⚠️ **Le plafond découpait au lieu de faire défiler**, et c'est la moitié du § 5 qui manquait. `overflow: hidden` rendait la hauteur du contenu sans conséquence *pour la mise en page* — la feuille ne sortait plus de l'écran — mais ce qui dépassait **disparaissait sans un signe** : le menu du ➕ a gagné « Importer en masse » le 15/08, et « Scanner un repas » a cessé d'exister sur un petit téléphone. Rien à l'écran ne dit qu'il y a une suite, puisqu'il n'y a pas de barre de défilement à voir. Le défilement est donc le **défaut**, et non plus une option qu'une feuille doit penser à demander : une feuille de menu n'a aucune raison de déclarer trois bandes pour six boutons, et c'est justement celle qui oublie. */ overflow-y: auto; /* Arriver au bout ne fait pas repartir la page dessous — même raison que `.sheet-scroll`, qui garde la sienne pour les feuilles à bandes. */ overscroll-behavior: contain; animation: sheet-in .22s ease; } /* Une feuille qui gère elle-même ses bandes reprend la main : son plafond est déjà réparti entre `.sheet-fixed`, `.sheet-scroll` et `.sheet-actions`, et la laisser défiler **en plus** ferait sortir l'en-tête et le bouton de validation par les deux bouts — le défaut exact que ces bandes évitent. Le `:has()` traite le cas dynamique : `#meal-sheet` est un simple menu à l'étape « source » et une feuille à bandes à l'étape « quantité », selon celle des deux qui est démasquée. Une classe posée en JavaScript ferait la même chose, avec un endroit de plus où l'oublier. */ .sheet.sheet-tall, .sheet.filters-sheet, .sheet.report-sheet, .sheet:has(> .sheet-tall:not([hidden])) { overflow: hidden; } /* ⚠️ **Et `overflow-y: auto` ne suffisait pas — c'est la seconde moitié, et sans elle la première ne fait rien.** `.sheet` est un conteneur flex en colonne : ses enfants ont `flex-shrink: 1` par défaut, donc sous le plafond ils se **compriment** au lieu de déborder. Il n'y a alors rien à faire défiler, et la feuille écrase son contenu en silence — mesuré le 16/08 : le menu du ➕ demandait 632 px pour 476 disponibles sur un iPhone SE de 1ʳᵉ génération, et `scrollHeight` valait exactement `clientHeight`. C'est le pendant exact du `min-height: 0` de `.sheet-tall`, noté juste en dessous : là-bas il **autorise** un enfant à devenir plus petit que son contenu, ici on le lui **interdit**. Les deux réglages disent la même chose — un enfant flex ne se dimensionne pas tout seul, il faut trancher. ⛔ **Les deux listes d'exception doivent rester identiques**, et un test le vérifie : une feuille qui reprend la main sur le défilement (au-dessus) est exactement celle dont les bandes doivent pouvoir se comprimre (ici). Les laisser diverger rendrait une feuille qui ne défile ni ne comprime. */ .sheet:not(.sheet-tall):not(.filters-sheet):not(.report-sheet) > *:not(.sheet-tall) { flex: none; } @keyframes sheet-in { from { opacity: 0; transform: translateX(-50%) translateY(14px); } } /* La même entrée pour une feuille ancrée au centre (§ « tablette et bureau »). ⛔ **Et déclarée ici, pas dans le palier qui s'en sert** : une règle imbriquée dans un `@media` porte deux niveaux d'accolades, ce que les tests qui lisent la feuille de style découpent à un seul — le garde-fou des dispositions déclarées deux fois a signalé deux classes parfaitement saines. Une animation n'a de toute façon aucune raison d'être conditionnelle : c'est son emploi qui l'est. */ @keyframes sheet-in-centre { from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); } } /* Une étape haute de feuille : la bande centrale défile, l'action reste dans le cadre. Même motif que `.filters-sheet`, et pour la même raison — sinon un contenu long emporte le titre hors de l'écran par le haut et le bouton de validation par le bas. `min-height: 0` est ce qui autorise un enfant flex à devenir plus petit que son contenu : sans lui, `overflow-y: auto` n'a jamais d'occasion de s'appliquer et la feuille repousse son plafond. */ .sheet-tall { display: flex; flex-direction: column; min-height: 0; } /* Épinglé au-dessus de la bande qui défile : ce qui dit **à quoi** la quantité s'applique ne doit pas pouvoir sortir du cadre. */ .sheet-fixed { flex: none; } /* La valeur exacte, second recours. Discrète par construction : la molette est le geste par défaut, et un champ mis en avant réinviterait à taper — ce qui est exactement ce que les molettes ont supprimé. */ .valeur-exacte { margin: 2px 0 10px; } .valeur-exacte-form { display: flex; align-items: center; gap: 8px; } .valeur-exacte-form input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--espresso); padding: 9px 12px; min-height: 44px; /* 16 px, jamais moins : sous ce plancher iOS agrandit la page à la mise au point du champ et la laisse décalée (§ 1 des conventions). C'est la cause la plus fréquente des « fenêtres décentrées », et un champ ouvert exprès y expose. */ font: inherit; font-size: 24px; } .valeur-exacte-form .link-btn { flex: none; min-height: 44px; } /* ── Le champ prend la place du nombre — 05/09 ─────────────────────────────── La ligne de lecture **est** l'endroit où l'on corrige : le formulaire s'y déplie à la place de la valeur, et le « ✓ » vient contre lui. ⚠️ **`flex: 1` sur le formulaire** : sans lui il ne prend que sa largeur de contenu et le champ se retrouve étroit au milieu d'une ligne large — le défaut qu'on vient de corriger, obtenu autrement. */ .roue-lecture .valeur-exacte-form { flex: 1; min-width: 0; } /* Un bouton d'icône contre le champ : carré, même hauteur, et sa cible fait les 44 px du § 1 par sa taille même. ⛔ **Pas un `.link-btn`** — « Appliquer » en toutes lettres reprenait la moitié de la ligne, et c'est ce que le geste vient de remplacer. */ .btn-check { flex: none; width: 44px; height: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--terra); border-radius: 12px; background: var(--terra); color: #FFFFFF; cursor: pointer; } .btn-check .icon { width: 20px; height: 20px; } /* ⛔ **« Appliquer » n'est pas « Je ne sais pas » — signalé le 05/09.** `#qs-sheet .link-btn` pose `width: 100%` pour les liens **du pied** de la feuille, qui sont des actions de page ; il attrapait aussi celui-ci, à l'intérieur d'une ligne. Mesuré au banc : le bouton prenait 312 px des 346, et le champ tombait à **26** — moins que son propre rembourrage. La valeur s'écrivait *(`value` valait bien « 237 »)* et n'avait nulle part où s'afficher : le § *la couche est peinte, elle est seulement inatteignable*, appliqué à un texte. ⚠️ **L'identifiant bat deux classes**, toujours : c'est le piège déjà écrit trois fois ici *(`.pane-head.today-head`, l'anneau du journal, le « i » de la carte du jour)*. Deux règles qui nomment le même composant se départagent par la spécificité, jamais par l'intention — d'où un sélecteur qui porte lui aussi l'identifiant de la feuille. */ #qs-sheet .valeur-exacte-form .link-btn, #conv-sheet .valeur-exacte-form .link-btn, #meal-sheet .valeur-exacte-form .link-btn { display: inline-flex; align-items: center; width: auto; margin: 0; } .sheet-scroll { flex: 1; min-height: 0; overflow-y: auto; /* Le défilement s'arrête dans la feuille : arriver en bas ne doit pas faire repartir la page dessous, qui donnerait l'impression d'une feuille qui glisse. */ overscroll-behavior: contain; } /* ── Le pied d'une feuille — socle des menus, 20/09 ───────────────────────── Une disposition commune : les boutons se partagent la largeur à parts égales (Annuler/Fermer en `btn-ghost` à gauche, l'action nommée en `btn-primary` à droite ; un seul bouton prend toute la largeur). Ce qui n'est pas un bouton de rang — un `.link-btn` secondaire (« Je ne sais pas », « Voir la fiche »), un champ, une phrase — prend sa propre ligne, sous ou au-dessus. Même retrait que le titre (14 px). */ .sheet-actions { flex: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 14px 6px; } .sheet-actions > * { flex: 1 1 100%; min-width: 0; } /* ⚠️ **44 px, y compris seul sur sa ligne.** `.btn-primary` n'a pas de plancher à lui : à deux, l'étirement du pied le rattrape ; seul, il retombait à 41 px — sous la cible tactile du § 11, sur le bouton qui valide (#corr-save, #recipe-add, les pieds à bouton unique des réglages). */ /* ⚠️ **`1 1 auto`, pas `1 1 0`.** À parts strictement égales, chaque bouton d'un pied à deux vaut 154 px à 390 px — dont ~114 px de texte : « Enregistrer mon avis personnel » passait à trois lignes, et « Voir 186 recettes » gardait sa moitié de ligne pendant que son voisin débordait. La base `auto` part de la largeur du libellé, puis la place restante se partage : les pieds à deux boutons courts restent équilibrés, un libellé long prend ce qu'il lui faut. */ .sheet-actions > .btn-primary, .sheet-actions > .btn-ghost { flex: 1 1 auto; min-height: 44px; } /* Un lien du pied garde la cible tactile du § 11 : `.link-btn` pose `min-height: 0`, ce qui convient dans un paragraphe et pas sous un bouton. */ .sheet-actions > .link-btn { min-height: 44px; } /* « Voir la recette » est le secondaire de C13 : sur sa ligne, au-dessus des deux boutons de rang — à trois par ligne, il se coupait en deux à 390 px. */ #plan-sheet .sheet-actions > #plan-voir { flex-basis: 100%; } /* ⚠️ **Le pied de la feuille d'ajout vit dans le formulaire**, et non contre le bord de la feuille : le retrait de 14 px l'aurait rendu plus étroit que les champs juste au-dessus, qui n'en ont pas (`.add-item { padding: 0 }`). Le bouton d'envoi doit rester **dans** `
` pour que la touche Entrée du clavier mobile continue d'ajouter l'article. */ #ai-sheet .add-item > .sheet-actions { padding-inline: 0; } /* ⚠️ **Une feuille défile, mais rien ne le disait.** iOS ne montre sa barre qu'*une fois qu'on a défilé* : à l'ouverture, une feuille pleine et une feuille coupée se ressemblent trait pour trait. C'est la moitié qui restait du § 5 — le contenu ne disparaît plus en silence, mais on ne sait toujours pas qu'il y a une suite tant qu'on n'a pas tenté le geste. Une ombre douce apparaît donc au bord par lequel il reste quelque chose. ⛔ **Et surtout pas une couche, ni une mesure en JavaScript.** Les deux corrections évidentes tombent chacune dans un piège déjà documenté : - un élément posé par-dessus le contenu est une couche qui recouvre pendant que ça glisse — le mode d'échec du § 6, celui du `backdrop-filter` ; - poser un drapeau depuis un écouteur `scroll` demande de lire `scrollTop`, `scrollHeight` et `clientHeight` **à chaque image du geste**, soit la disposition forcée qu'on venait de retirer du `touchstart`. Ici il n'y a **rien sur le chemin** : ce sont quatre fonds sur l'élément qui défile déjà. Deux couvercles couleur `--card` sont ancrés au **contenu** (`local`) et glissent avec lui ; deux ombres sont ancrées au **conteneur** (`scroll`) et ne bougent pas. En haut de course, le couvercle du haut est pile sur l'ombre du haut et la masque ; dès qu'on défile, il s'en va et l'ombre paraît. ⚠️ **Ce qui le rend juste est qu'il ne mesure rien.** Une feuille qui ne déborde pas garde ses deux couvercles en place : elle n'affiche aucune ombre sans qu'un test de hauteur ait eu lieu, donc l'indice ne peut pas mentir ni se désynchroniser d'un contenu qui change. C'est le seul point du dépôt où « ne pas savoir » et « la bonne réponse » coïncident gratuitement. */ .sheet, .sheet-scroll, .filters-scroll, .ask-liste { background-image: linear-gradient(to bottom, var(--card) 55%, rgba(0, 0, 0, 0)), linear-gradient(to top, var(--card) 55%, rgba(0, 0, 0, 0)), linear-gradient(to bottom, rgba(30, 24, 20, .13), rgba(30, 24, 20, 0)), linear-gradient(to top, rgba(30, 24, 20, .13), rgba(30, 24, 20, 0)); /* ⚠️ Le palier à 55 % n'est pas un réglage esthétique : 55 % de 20 px = 11 px, la hauteur exacte de l'ombre. Un couvercle qui fond dès son bord la laisse transparaître, et la feuille annonce une suite en haut de course alors qu'elle est à son début. Mesuré : 244,4 contre 248 sur une liste courte. */ background-position: top, bottom, top, bottom; background-size: 100% 20px, 100% 20px, 100% 11px, 100% 11px; background-repeat: no-repeat; background-attachment: local, local, scroll, scroll; background-color: var(--card); } .sheet-item { display: flex; align-items: center; gap: 14px; width: 100%; border: none; background: none; cursor: pointer; text-align: left; padding: 13px 14px; border-radius: 16px; color: inherit; } /* ⚠️ **Une entrée de feuille peut être un lien.** `.sheet-item` a été écrite pour des `