/* =========================================================================== zzzzzz-header-mobile-fix.css — 24/08/2026 « Sur mobile, les éléments du haut se chevauchent » (capture Julien, 18h42). CE QUI SE PASSAIT, MESURÉ EN PRODUCTION (Notifications, 412 px) : · le bloc d'en-tête .ar-nt-head fait 346 px de large ; · zzzzz-menu-fab-fix.css lui réserve 52→64 px à DROITE pour le ☰ flottant ; · bouton-retour.php lui pose padding-left:96px à GAUCHE (largeur du bouton « ‹ Retour » + 12 px), en JavaScript, après mesure ; · il reste donc 186 px utiles… pour un titre de 172 px (30 px Cormorant, qui NE rétrécit pas) + 12 px d'écart + un bouton rond de 46 px = 230 px. → La rangée flex DÉBORDE de 44 px vers la droite, et le bouton ⚙️ finit SOUS le ☰. C'est très exactement ce qu'on voit sur la capture. Même cause ailleurs (mesuré à 360 px) : Compagnons (☰ sur la cloche, 11 px), Autour de moi (☰ sur les boutons de droite, 30 px), Bons coups (☰ sur le titre, 42 px), Carnet de route (44 px). CE QU'ON FAIT — trois gestes, aucun autre : 1. Sous 430 px, le bouton Retour ne montre que sa flèche (le mot « Retour » reste lu par les lecteurs d'écran). 99 px → 44 px : 55 px rendus au titre. C'est ce que demandait Julien : « réduire si besoin la largeur du bouton ». 2. Les rangées d'en-tête ne peuvent plus déborder : le titre rétrécit (min-width:0 + clamp) au lieu de pousser ses voisins hors de l'écran. 3. Les boutons de droite gardent leur taille et ne passent plus jamais sous le ☰ ; les deux boutons flottants respectent la safe-area. 100 % ADDITIF. Chargé en dernier (6 « z » : le glob de header.php trie par nom). Scopé html.apprefonte + écrans tactiles. Ne touche ni au Gardien, ni à Étincelles, ni au PC au-delà de 768 px. RETOUR ARRIÈRE : supprimer ce seul fichier. =========================================================================== */ @media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (display-mode: standalone) and (max-width: 1366px) { /* ---------------------------------------------------------------- 1) SAFE-AREA Les deux boutons flottants sont en position:fixed avec des valeurs sèches (top:10px / left:12px / right:12px). Sur un écran à encoche ou à coins arrondis, ils peuvent tomber sous la barre d'état. On ajoute l'inset. */ html.apprefonte .fdcn-retour { top: calc(10px + env(safe-area-inset-top, 0px)) !important; left: calc(12px + env(safe-area-inset-left, 0px)) !important; } html.apprefonte .ar-menu-fab { top: calc(10px + env(safe-area-inset-top, 0px)) !important; right: calc(12px + env(safe-area-inset-right, 0px)) !important; } /* ---------------------------------------------------------------- 2) LES RANGÉES NE DÉBORDENT PLUS `min-width:0` est le geste clé : sans lui, un enfant flex refuse de passer sous sa largeur de contenu, et c'est le conteneur qui déborde. */ html.apprefonte .ar-cg-head, html.apprefonte .ar-ck-head, html.apprefonte .ar-cr-head, html.apprefonte .ar-dm-head, html.apprefonte .ar-gd-head, html.apprefonte .ar-msg-head, html.apprefonte .ar-nt-head, html.apprefonte .ar-pp-head, html.apprefonte .ar-rd-head, html.apprefonte .ar-rd-head-r, html.apprefonte .ar-secu-head, html.apprefonte .ar-so-head, html.apprefonte .ar-souv-head, html.apprefonte .ar-vy-head, html.apprefonte .pub-pagehead { min-width: 0 !important; flex-wrap: nowrap !important; overflow: visible; } /* Le TITRE rétrécit — il ne pousse plus ses voisins hors de l'écran. clamp() garde un minimum lisible (19 px) et ne dépasse jamais la taille d'origine (30 px). L'ellipsis n'est qu'un filet de sécurité : avec le bouton Retour réduit (bloc 3), les titres du site tiennent en entier. */ html.apprefonte .ar-cg-head > h1, html.apprefonte .ar-ck-head > h1, html.apprefonte .ar-cr-head > h1, html.apprefonte .ar-dm-head > h1, html.apprefonte .ar-gd-head > h1, html.apprefonte .ar-msg-head > h1, html.apprefonte .ar-nt-head > h1, html.apprefonte .ar-pp-head > h1, html.apprefonte .ar-rd-head > h1, html.apprefonte .ar-secu-head > h1, html.apprefonte .ar-so-head > h1, html.apprefonte .ar-souv-head > h1, html.apprefonte .ar-vy-head > h1, html.apprefonte .pub-pagehead > h1, html.apprefonte .ar-cg-title { min-width: 0 !important; flex: 1 1 auto !important; font-size: clamp(19px, 5.4vw, 30px) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Les boutons ronds du haut ne se compriment jamais : on veut qu'ils restent cliquables (44 px, taille de cible tactile), c'est le titre qui cède. */ html.apprefonte .ar-nt-head > .ar-ic, html.apprefonte .ar-cg-head > .ar-ic, html.apprefonte .ar-cg-bell, html.apprefonte .ar-rd-head > .ar-ic, html.apprefonte .ar-rd-head-r > .ar-ic, html.apprefonte .ar-vy-head > .ar-ic, html.apprefonte .ar-so-head > .ar-ic, html.apprefonte .ar-msg-head > .ar-ic, html.apprefonte .ar-pp-head > .ar-ic { flex: 0 0 auto !important; } /* Écrans dont le titre n'est PAS dans une rangée flex : on leur réserve simplement la place du ☰ à droite, comme le fait zzzzz-menu-fab-fix.css pour les autres. (Bons coups : le ☰ mordait le titre de 42 px.) */ html.apprefonte h1.page-title, html.apprefonte h1.pub-pagetitle, html.apprefonte h1.bp-title, html.apprefonte .bc-wrap > h1 { padding-right: calc(56px + env(safe-area-inset-right, 0px)) !important; min-width: 0 !important; } /* ---------------------------------------------------------------- 3) LE BOUTON RETOUR RÉTRÉCIT Sous 430 px (donc 360 / 375 / 390 / 412), la flèche suffit : le mot « Retour » est masqué à l'œil mais RESTE dans le DOM, donc lu par les lecteurs d'écran et par la recherche vocale. 99 px → 44 px. bouton-retour.php recalcule seul le retrait du titre après cette mesure : 96 px de réservation tombent à ~40 px, et la rangée tient. */ @media (max-width: 430px) { html.apprefonte .fdcn-retour { width: 44px !important; min-width: 0 !important; padding-left: 0 !important; padding-right: 0 !important; justify-content: center !important; gap: 0 !important; } html.apprefonte .fdcn-retour .fdcn-retour-txt { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } } }