/* Takoori — menu mobile "app-like" (15/08/2026). Barre d'onglets fixe en bas + feuilles plein ecran (sheets) qui montent depuis le bas, comme une app native. Uniquement visible < 900px. Utilise les tokens partages tk-tokens.r2.css. */ .tk-mobapp{display:none;color:var(--tk-ink)} .tk-mobapp *{border-color:transparent} @media (max-width:900px){ .tk-mobapp{display:block;font-family:var(--tk-body)} /* Masque UNIQUEMENT le bouton hamburger + le tiroir off-canvas natifs Astra (pas #ast-mobile-header entier — il contient aussi logo/recherche/panier/compte qu'on garde). Verifie DOM reel (15/08) : bouton = .menu-toggle.main-header-menu-toggle tiroir = .ast-mobile-popup-drawer */ .menu-toggle.main-header-menu-toggle, .ast-mobile-popup-drawer{ display:none !important } /* Barre d'onglets fixe en bas, style app */ .tk-mobapp-tabbar{ position:fixed;left:0;right:0;z-index:998; display:flex;background:var(--tk-bg);border-top:1px solid var(--tk-line); box-shadow:0 -4px 16px rgba(0,0,0,.06); /* 18/08 (4e tentative double-tap iOS) -- CAUSE ENFIN IDENTIFIEE. Safari iOS reserve les ~44 DERNIERS PIXELS du viewport comme zone de declenchement de sa propre barre d'outils : tout element qui s'y trouve (meme un simple lien) exige DEUX taps, le 1er etant absorbe par Safari (documente par Ben Frain + plusieurs fils developpeurs Apple ; un dev rapporte avoir eu besoin de jusqu'a 72px de marge pour en sortir). Nos icones etaient a ~31px du bas -> en plein dedans. Ca explique pourquoi les 3 correctifs precedents ont echoue : ce n'est ni un delai (touchstart/touchend), ni une couche de composition (translate3d), ni touch-action -- c'est une ZONE GEOGRAPHIQUE. Correctif : marge basse qui remonte les zones cliquables au-dessus de la bande. 38px = compromis (sort de la bande sans trop manger l'ecran) ; si le double-tap persiste, AUGMENTER cette valeur (44 -> 56 -> 72). */ /* 18/08 (5e tentative) -- CORRECTION DE L'APPROCHE PRECEDENTE. Le fil developpeurs Apple #685481 est explicite : la combinaison position:fixed + bottom:0 + padding-bottom:env(safe-area-inset-bottom) EST la configuration buguee -- Safari peint le pied de page au-dessus de l'endroit ou il situe reellement sa zone de clic, ce qui le rend non-tapable. Augmenter le padding (tentative 4 : 48px) ne sort donc PAS du piege : c'est le padding lui-meme qui cree le decalage rendu/hit-test, donc plus on en met, plus l'ecart grandit. Correctif documente (Samuel Kraft, "Bottom tab bars on Safari iOS") : decaler via `bottom: calc(... + env(safe-area-inset-bottom))` au lieu de padding -- l'element entier se deplace, rendu et zone de clic ensemble, plus de desynchronisation. Le ::after prolonge le fond sous la barre pour qu'aucun contenu ne transparaisse dans l'espace libere. */ bottom:calc(env(safe-area-inset-bottom, 0px) + 16px); padding-bottom:0; /* 18/08 -- masquage au scroll (JS ajoute/retire .tk-hidden). transform plutot que display/visibility : reste dans le flux de composition, transition fluide, pas de reflow. */ transition:transform .25s ease; /* 18/08 (3e tentative sur le double-tap iOS) -- DIAGNOSTIC AFFINE : le correctif "tap rapide" JS (touchstart/touchend) n'a RIEN change chez Joffrey. C'est l'info decisive : si touchstart ne suffit pas, c'est que les evenements tactiles n'atteignent meme pas le bouton -- donc PAS un probleme de delai (hypothese 1 et 2, fausses), mais bien une ZONE DE CLIC mal placee. Sur iOS, un element position:fixed garde une hit-test region calculee par le thread principal, qui ne se resynchronise pas avec la position visuelle (geree par le compositeur) tant que le scroll / la barre Safari n'est pas stabilise -> le 1er tap tombe a cote. Correctif standard documente (Safari z-index/fixed/hit-test) : forcer l'element dans sa PROPRE couche de composition, ce qui aligne la zone de clic sur le rendu reel. translate3d au lieu de translateY pour que la couche existe aussi a l'etat visible, pas seulement pendant l'animation. CSS pur, additif, aucun JS -- contrairement a la tentative visualViewport qui avait casse la tabbar. */ transform:translate3d(0,0,0); -webkit-backface-visibility:hidden; backface-visibility:hidden; } .tk-mobapp-tabbar.tk-hidden{transform:translate3d(0,calc(100% + env(safe-area-inset-bottom, 0px) + 16px),0)} /* Prolonge le fond sous la barre (espace libere par le decalage `bottom`) pour qu'aucun contenu de page ne transparaisse. pointer-events:none : purement decoratif, ne recree PAS de zone cliquable dans la bande reservee par Safari. */ .tk-mobapp-tabbar::after{ content:'';position:absolute;left:0;right:0;top:100%; height:calc(env(safe-area-inset-bottom, 0px) + 16px); background:var(--tk-bg);pointer-events:none; } .tk-mobapp-tab{ flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; padding:8px 4px 7px;color:var(--tk-muted);text-decoration:none;font-size:10.5px;font-weight:500; background:none;border:0;position:relative;-webkit-tap-highlight-color:transparent; /* 18/08 -- Astra applique text-transform:uppercase a tout