/* ===================================================================== * app-mode.css - Ajustements quand le site tourne « en application » * --------------------------------------------------------------------- * Deux contextes, un seul jeu de règles : * - PWA installée depuis le navigateur -> @media (display-mode: standalone) * - coque Capacitor (APK / iOS) -> * - choix explicite du visiteur -> * * Le troisième cas répond à une demande simple : consulter le site dans * Firefox ou Safari sur téléphone, sans l'installer, et obtenir quand * même la présentation adaptée. La bascule est dans le pied de page, * le choix est mémorisé, et il est appliqué AVANT le premier rendu * (petit script dans ) pour éviter que la page ne s'affiche une * fraction de seconde dans l'autre présentation. * * Une différence assumée entre `app-mode-force` et les deux autres : le * pied de page reste visible. C'est lui qui porte la bascule — le * masquer enfermerait le visiteur dans un affichage qu'il ne pourrait * plus quitter. * * Rien ici ne s'applique au site consulté normalement dans un * navigateur : le rendu du site reste inchangé pour tout le monde. * * Trois corrections : * 1. la bannière photo décorative disparaît — 25 % de la hauteur * d'écran d'un téléphone pour une image sans information ; * 2. les encoches et barres système sont respectées (safe-area) ; * 3. les zones tactiles atteignent 44 px, seuil au-dessous duquel on * vise mal en tenant son téléphone d'une main dans la salle. * ===================================================================== */ /* --- 1. Bannière : masquée en mode application --- */ @media (display-mode: standalone), (display-mode: fullscreen) { header.banner { display: none !important; } } html.app-native header.banner, html.app-mode-force header.banner { display: none !important; } /* --- 2. Encoches et barres système --- */ @media (display-mode: standalone), (display-mode: fullscreen) { .main-nav { padding-top: calc(8px + env(safe-area-inset-top)) !important; padding-left: calc(12px + env(safe-area-inset-left)); padding-right: calc(12px + env(safe-area-inset-right)); } .footer { padding-bottom: calc(24px + env(safe-area-inset-bottom)); } } html.app-native .main-nav { padding-top: calc(8px + env(safe-area-inset-top)) !important; padding-left: calc(12px + env(safe-area-inset-left)); padding-right: calc(12px + env(safe-area-inset-right)); } html.app-native .footer { padding-bottom: calc(24px + env(safe-area-inset-bottom)); } /* La barre d'état iOS est translucide : sans ce fond, le contenu défile sous l'heure et le niveau de batterie. */ html.app-native-ios body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top); background: #003d7a; z-index: 2000; } /* --- 3. Confort tactile, en application comme sur petit écran --- */ @media (display-mode: standalone), (display-mode: fullscreen) { .btn, .btn-primary, button.btn, a.btn { min-height: 44px; } .table td, .table th { padding-top: 10px; padding-bottom: 10px; } } html.app-native .btn, html.app-native .btn-primary, html.app-native button.btn, html.app-native a.btn, html.app-mode-force .btn, html.app-mode-force .btn-primary, html.app-mode-force button.btn, html.app-mode-force a.btn { min-height: 44px; } /* --- Sélection de texte : dans une application, un appui long qui surligne un mot au lieu d'ouvrir un menu fait « page web ». Les champs de saisie et les zones de contenu restent sélectionnables, pour copier une adresse ou un numéro. --- */ html.app-native body { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 61, 122, .12); -webkit-touch-callout: none; overscroll-behavior-y: contain; } html.app-native input, html.app-native textarea, html.app-native select, html.app-native .table, html.app-native address, html.app-native .article-content, html.app-native [data-selectable] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } /* ===================================================================== * Barre d'onglets * --------------------------------------------------------------------- * Le marqueur d'une application, plus que n'importe quelle animation : * des destinations fixes en bas de l'écran, sous le pouce, au lieu d'un * menu déroulant en haut qu'il faut ouvrir pour savoir ce qu'il contient. * * La barre est présente dans le HTML de toutes les pages mais masquée * ici par défaut. Elle n'apparaît que dans la PWA installée ou dans la * coque Capacitor : le site au navigateur ne change pas d'un pixel. * ===================================================================== */ .app-tabs { display: none; } @media (display-mode: standalone), (display-mode: fullscreen) { .app-tabs { display: flex; } } html.app-native .app-tabs, html.app-mode-force .app-tabs { display: flex; } .app-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; align-items: stretch; background: #ffffff; border-top: 1px solid #dfe4ec; padding-bottom: env(safe-area-inset-bottom); /* Ombre portée vers le haut : détache la barre du contenu qui défile dessous, sans trait épais. */ box-shadow: 0 -2px 12px rgba(0, 0, 0, .06); } .app-tabs a { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; padding: 7px 2px 6px; text-decoration: none; color: #77808f; font-size: 11px; line-height: 1.15; text-align: center; -webkit-tap-highlight-color: transparent; } .app-tabs a i { font-size: 21px; line-height: 1; } .app-tabs a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-tabs a.actif { color: #003d7a; font-weight: 600; } .app-tabs a.actif i { transform: translateY(-1px); } .app-tabs a:active { background: #eef3f9; } /* Le contenu doit pouvoir défiler au-dessus de la barre, sinon la dernière ligne de chaque page reste inaccessible. */ @media (display-mode: standalone), (display-mode: fullscreen) { body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); } } html.app-native body, html.app-mode-force body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); } /* ===================================================================== * Pied de page et typographie en mode application * ===================================================================== */ /* Le pied de page — adresse, carte Google, lien Facebook — est le marqueur « site vitrine » par excellence, et il double la hauteur de chaque page sur un téléphone. Ces informations restent accessibles depuis l'onglet Profil et la page d'accueil du club. */ @media (display-mode: standalone), (display-mode: fullscreen) { .footer { display: none !important; } } html.app-native .footer { display: none !important; } /* Police du système : San Francisco sur iPhone, Roboto sur Android. Un texte qui ressemble à celui des autres applications du téléphone se lit comme natif, sans qu'on sache dire pourquoi. */ @media (display-mode: standalone), (display-mode: fullscreen) { body, .btn, .form-control, .table { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } } html.app-native body, html.app-native .btn, html.app-native .form-control, html.app-native .table, html.app-mode-force body, html.app-mode-force .btn, html.app-mode-force .form-control, html.app-mode-force .table { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* --- Impression : ni menu, ni bannière, ni pied de page, ni barre d'onglets sur les convocations et les feuilles de match. --- */ @media print { .rmcf-install, .main-nav, header.banner, .footer, .app-tabs { display: none !important; } body { padding-bottom: 0 !important; } }