/** * Styles Mobile - Mortel Dîner * Mobile-first responsive design */ /* === VIEWPORT META === */ /* Assurez-vous d'avoir dans : */ /* */ /* === BASE MOBILE === */ html { /* Smooth scrolling */ scroll-behavior: smooth; /* Empêche le zoom sur focus input iOS */ -webkit-text-size-adjust: 100%; } body { /* Empêche le bounce scroll iOS */ overflow-x: hidden; position: relative; min-height: 100vh; } /* === SCREENS === */ .screen { display: none; min-height: 100vh; min-height: 100dvh; /* Dynamic viewport height (mobile) */ padding: 1rem; } .screen.active { display: flex; flex-direction: column; align-items: center; justify-content: center; } /* === CONTAINER === */ .container { width: 100%; max-width: 100%; padding: 0; margin: 0 auto; } /* === MENU (ÉCRAN PRINCIPAL) === */ .menu { width: 100%; max-width: 500px; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; } .menu__logo { margin-bottom: 2rem; } .logo { width: 120px; height: auto; margin: 0 auto 1rem; } .menu__title { font-size: 2rem; margin-bottom: 0.5rem; text-align: center; } .menu__subtitle { font-size: 1rem; margin-bottom: 2rem; text-align: center; } .menu__buttons { width: 100%; display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; } .menu__buttons .btn { width: 100%; min-height: 56px; /* Touch target minimum */ font-size: 1.125rem; padding: 1rem; } .menu__footer { text-align: center; opacity: 0.6; } /* === BOUTONS === */ .btn { /* Touch target minimum */ min-height: 48px; padding: 0.75rem 1.5rem; font-size: 1rem; /* Empêche le highlight bleu au tap sur iOS */ -webkit-tap-highlight-color: transparent; /* Empêche la sélection du texte */ user-select: none; -webkit-user-select: none; } .btn--lg { min-height: 56px; font-size: 1.125rem; } .btn:active:not(:disabled) { transform: scale(0.98); } /* === FORMULAIRES === */ .form-card { width: 100%; max-width: 500px; padding: 1.5rem; margin: 0 auto; } .form__input, .form__textarea, .form__select { min-height: 48px; font-size: 16px; /* Empêche le zoom auto iOS */ padding: 0.75rem; /* Empêche le highlight au tap */ -webkit-tap-highlight-color: transparent; } .form__input--code { font-size: 1.25rem; letter-spacing: 0.1em; } .form__textarea { min-height: 100px; resize: vertical; } /* === DIALOGS === */ .dialog__content { width: 90vw; max-width: 500px; max-height: 90vh; max-height: 90dvh; overflow-y: auto; padding: 1.5rem; /* Smooth scroll dans les dialogs */ -webkit-overflow-scrolling: touch; } .dialog__actions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; } .dialog__actions button { width: 100%; } /* === LOBBY === */ .lobby { width: 100%; max-width: 600px; } .lobby__header { margin-bottom: 1.5rem; } .lobby__code { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-top: 1rem; } .lobby__code-value { font-size: 1.5rem; word-break: break-all; text-align: center; padding: 0.5rem; } /* === PLAYER CARDS === */ .player-card { padding: 1rem; margin-bottom: 0.75rem; } .player-card__name { font-size: 1.125rem; margin-bottom: 0.5rem; } /* === TOAST NOTIFICATIONS === */ .toast-container { position: fixed; top: env(safe-area-inset-top, 1rem); left: 1rem; right: 1rem; z-index: 9999; max-width: none; } .toast { font-size: 0.875rem; padding: 1rem; margin-bottom: 0.5rem; } /* === SAFE AREAS (iPhone X+) === */ .screen { padding-top: env(safe-area-inset-top, 1rem); padding-bottom: env(safe-area-inset-bottom, 1rem); padding-left: env(safe-area-inset-left, 1rem); padding-right: env(safe-area-inset-right, 1rem); } /* === RESPONSIVE BREAKPOINTS === */ /* Small phones (< 375px) */ @media (max-width: 374px) { .menu__title { font-size: 1.75rem; } .logo { width: 100px; } .btn { font-size: 0.875rem; padding: 0.625rem 1rem; } } /* Phones (375px - 767px) */ @media (min-width: 375px) and (max-width: 767px) { .menu { max-width: 400px; } .logo { width: 140px; } } /* Tablets (768px - 1023px) */ @media (min-width: 768px) { .container { padding: 2rem; } .screen { padding: 2rem; } .menu { max-width: 500px; } .logo { width: 160px; } .menu__title { font-size: 2.5rem; } .form-card { padding: 2rem; max-width: 600px; } .dialog__content { max-width: 600px; padding: 2rem; } .dialog__actions { flex-direction: row; } .dialog__actions button { width: auto; flex: 1; } .lobby__code { flex-direction: row; justify-content: center; } } /* Desktop (1024px+) */ @media (min-width: 1024px) { .menu { max-width: 600px; } .logo { width: 200px; } .menu__title { font-size: 3rem; } .form-card { max-width: 700px; } .toast-container { left: auto; right: 1rem; max-width: 400px; } } /* === LANDSCAPE MODE === */ @media (orientation: landscape) and (max-height: 500px) { .screen { padding: 0.5rem; justify-content: flex-start; } .menu__logo { margin-bottom: 1rem; } .logo { width: 80px; } .menu__title { font-size: 1.5rem; } .menu__buttons { gap: 0.75rem; margin-bottom: 1rem; } .dialog__content { max-height: 85vh; } } /* === HOVER INTERACTIONS (Non-touch devices) === */ @media (hover: hover) and (pointer: fine) { .btn:hover:not(:disabled) { transform: translateY(-2px); } .btn:active:not(:disabled) { transform: translateY(0); } } /* === DARK MODE SUPPORT === */ @media (prefers-color-scheme: dark) { /* Les variables sont déjà définies dans variables.css */ } /* === ACCESSIBILITY === */ /* High contrast mode */ @media (prefers-contrast: high) { .btn { border-width: 2px; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* === UTILITIES === */ .mobile-only { display: block; } .desktop-only { display: none; } @media (min-width: 768px) { .mobile-only { display: none; } .desktop-only { display: block; } } /* Empêche le texte d'être sélectionné (pour les boutons, etc.) */ .no-select { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } /* Touch feedback */ .touch-feedback { -webkit-tap-highlight-color: rgba(244, 196, 48, 0.2); }