/* ========================================================================= * BAZA-S239 — Recette Philippe (captures IMG_2280/2281/2245) : * 1. MENU « + » : polices alignées sur le menu SYSTÈME iOS (celui du bouton * appareil photo, à droite) — nettement plus grandes que le 16px d'avant ; * libellés d'album sur DEUX lignes, équilibrés. * 2. GLISSEMENT DROIT « répondre » : retour plus ÉLASTIQUE et FLUIDE. * 3. GLISSEMENT GAUCHE des cartes Profils : tiroir révélé PROGRESSIVEMENT * (fin du « blanc » : les actions n'apparaissaient qu'à la fin du geste). * * Fichier PUBLIC séparé, chargé par dans index.html : Vite ne le fusionne * PAS dans `index-*.css` ⇒ le hash CSS GELÉ S141 reste byte-identique (aucun * re-pin des gates s141/s145/s147/s149/s155 + méta-verrou s164). * * Toutes les surcharges ci-dessous gagnent par SPÉCIFICITÉ (jamais par simple * ordre source) : elles restent correctes quel que soit l'ordre d'injection des * feuilles. Catégories « typographie » et « animation/visibilité » seulement — * AUCUNE hauteur de coque, AUCUNE unité de viewport, AUCUNE safe-area (coque * gelée S141 / bande grise S173G / tabbar S173F STRICTEMENT intactes). * ========================================================================= */ /* ------------------------------------------------------------------------- * 1) MENU « + » — parité de lisibilité avec le menu système iOS. * Le menu natif de l'appareil photo (Photothèque / Prendre une photo / * Choisir les fichiers) rend ses libellés en 17px SF ; notre menu ancré * S173H était à 16px, visiblement plus petit sur la même capture. * ------------------------------------------------------------------------- */ .s173h-attach-panel .s173h-attach-item { font-size: 1.0625rem; /* 17px — taille des menus contextuels iOS (règle S173B) */ line-height: 1.3; padding-top: 13px; padding-bottom: 13px; /* Les libellés longs passent à la ligne au lieu d'être tronqués. */ align-items: center; } .s173h-attach-panel .s173h-attach-item-label { white-space: normal; overflow-wrap: break-word; /* Répartition ÉQUILIBRÉE des lignes quand le libellé passe sur 2 lignes (« Partager mon / album privé ») — dégradation propre si non supporté. */ text-wrap: balance; } /* Panneau légèrement resserré : « Partager mon album privé » passe sur DEUX lignes comme « Demander l'accès à son album privé » (demande Philippe : « au mieux, tu passes partager album photos sur 2 lignes pour que ce soit équilibré »). Le plafond `max-width` responsive S173H est conservé. */ .s173h-attach-overlay .s173h-attach-panel { width: 236px; } /* ------------------------------------------------------------------------- * 2) GLISSEMENT DROIT « répondre » (privé + groupes) — plus d'élasticité. * Le retour en place utilisait `transform 0.18s ease` (sec). Courbe de * DÉCÉLÉRATION longue (easeOutQuint) : la bulle « revient » en douceur, * jamais un claquement. Le suivi du doigt reste piloté en JS (transition * neutralisée pendant le geste : `style.transition = 'none'`). * ------------------------------------------------------------------------- */ .thread .bubble-row { transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1); } /* Accessibilité : aucune animation si l'utilisateur la refuse (le geste et l'action « répondre » restent parfaitement fonctionnels). */ @media (prefers-reduced-motion: reduce) { .thread .bubble-row { transition: none; } } /* ------------------------------------------------------------------------- * 3) CARTES PROFILS — tiroir « Masquer » / « Bloquer » révélé PROGRESSIVEMENT. * * Défaut prouvé (capture IMG_2245) : la règle S199D masque le tiroir * (`visibility: hidden`) au repos ET pendant tout le glissement, et ne le * révèle qu'à l'état OUVERT (`.is-swiped`, posé au RELÂCHEMENT) ⇒ pendant * le geste on voyait du BLANC, puis les actions surgissaient d'un coup. * * Règle S239 : le moteur du geste pose `.s239-swipe-dragging` + la variable * `--s239-swipe-progress` (0→1) sur la rangée ; le tiroir devient visible dès * le premier pixel du glissement, son opacité et l'échelle de ses actions * SUIVENT le doigt. L'invariant S199D est PRÉSERVÉ : au repos (aucune classe, * aucun geste) le tiroir reste `visibility: hidden` — plus jamais de liseré * rouge au zoom fractionnaire (cause racine S199D). * ------------------------------------------------------------------------- */ .real-nearby-item.s173b-swipe-row.s239-swipe-dragging .s173b-swipe-actions { visibility: visible; opacity: var(--s239-swipe-progress, 0); } .real-nearby-item.s173b-swipe-row.is-swiped .s173b-swipe-actions { visibility: visible; opacity: 1; } .real-nearby-item.s173b-swipe-row .s173b-swipe-actions { /* Opacité de REPOS explicitement NULLE : sans elle, la valeur initiale (1) servait de point de départ au fondu ⇒ un FLASH du tiroir (bleu + rouge) à pleine opacité au premier pixel du geste, avant de redescendre vers l'avancement réel. Le fondu part désormais TOUJOURS de 0 (montée seule). Double sécurité avec `visibility: hidden` (S199D) : rien n'est peint au repos. */ opacity: 0; /* Fondu court : accompagne le doigt sans « traîner » derrière lui. */ transition: opacity 0.12s linear; } /* Les deux actions montent en échelle avec l'avancement du geste (elles « arrivent » au lieu d'apparaître). Jamais de déplacement de mise en page : `transform` seul. */ .real-nearby-item.s173b-swipe-row.s239-swipe-dragging .s173b-swipe-action { transform: scale(calc(0.88 + 0.12 * var(--s239-swipe-progress, 0))); transition: transform 0.12s ease-out; } .real-nearby-item.s173b-swipe-row.is-swiped .s173b-swipe-action { transform: none; } /* Retour/ouverture du rail : même courbe de décélération élastique que les bulles (le seuil franc et la géométrie 176px du moteur S67A/S151 sont INCHANGÉS — seule la courbe de l'animation de fin change). */ .real-nearby-item.s173b-swipe-row .s173b-swipe-content { transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); } @media (prefers-reduced-motion: reduce) { .real-nearby-item.s173b-swipe-row .s173b-swipe-content, .real-nearby-item.s173b-swipe-row .s173b-swipe-actions, .real-nearby-item.s173b-swipe-row.s239-swipe-dragging .s173b-swipe-action { transition: none; } }