/* ===================================================================== * 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) -> * * 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 { 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 { 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; } /* --- Impression : ni menu, ni bannière, ni pied de page sur les convocations et les feuilles de match. --- */ @media print { .rmcf-install, .main-nav, header.banner, .footer { display: none !important; } }