/* ============================================================================ LEONIO Sport : garde-fou mobile "app-like". Objectif : AUCUN defilement horizontal, sur aucune page, sur tous les ecrans. A charger sur toutes les pages, APRES les styles de la page (donc en dernier dans le ) pour que ces regles l'emportent. ============================================================================ */ /* 1) La page ne defile jamais horizontalement. overflow-x: clip (quand supporte) ne casse pas position:sticky, contrairement a hidden ; on garde hidden en repli pour les vieux navigateurs. */ html, body { overflow-x: hidden; max-width: 100%; } @supports (overflow-x: clip) { html, body { overflow-x: clip; } } /* 2) Aucun media / tableau ne depasse la largeur de l'ecran. */ img, svg, video, canvas, iframe, table { max-width: 100%; } /* 3) Les longs titres / mots ne forcent pas la largeur de la page. */ h1, h2, h3 { overflow-wrap: break-word; word-break: break-word; } /* 4) Headers communs : sur mobile, la barre d'actions passe a la ligne plutot que de deborder a droite (pattern .topbar / .topbar-inner / .topbar-actions). */ @media (max-width: 640px) { .topbar-inner { flex-wrap: wrap; gap: 8px; row-gap: 8px; } .topbar-actions { flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .topbar-actions .btn, .topbar-actions .btn-sm { padding: 7px 11px; font-size: 0.78rem; } .brand-pill { white-space: nowrap; } /* La marque club au centre du header est secondaire sur mobile : on la masque pour laisser respirer la barre (l'identite club reste via le theme). */ .club-brand { display: none; } } /* 5) iOS : empeche le ZOOM AUTOMATIQUE au focus d'un champ. iOS Safari zoome des qu'un champ a une police < 16px, ce qui "dezoome" et fait sauter la page. On force 16px sur tous les champs en mobile (le !important couvre les regles par-element plus specifiques). Le pinch-to-zoom reste possible. */ @media (max-width: 640px) { input, select, textarea { font-size: 16px !important; } } /* 6) Barres d'actions de modale : sur petit ecran, les boutons s'empilent (action principale en haut, Annuler en dessous) et prennent toute la largeur, pour ne jamais deborder ni etre coupes. Couvre .modal-actions (tous les admins). */ @media (max-width: 480px) { .modal-actions { flex-direction: column-reverse; align-items: stretch; } .modal-actions .btn { width: 100%; } }