/**
* Mobile UX overrides — Session 42 audit mobile (90% utilisateurs sur téléphone)
*
* Règles globales mobile-first :
* - Touch targets ≥ 44px (Apple HIG / Material Design)
* - Form controls ≥ 44px hauteur + font-size ≥ 16px (anti-zoom iOS)
* - Tables responsive (scroll horizontal géré par .table-responsive)
* - Modals fullscreen-sm-down par défaut sur ≤ 575px
*
* Chargé après tous les autres CSS pour override Bootstrap defaults.
*/
/* =========================================================================
* CONS-107 — touch-action: manipulation sur les éléments interactifs.
* Élimine le délai 300ms du double-tap-zoom sur certains navigateurs mobiles
* tout en préservant le scroll et le pinch-zoom (contrairement à `none`).
* Règle GLOBALE (hors media query) — bénéfique sur tous les viewports tactiles.
* ========================================================================= */
button,
.btn,
a,
[role="button"],
.nav-link,
.dropdown-item,
.form-check-input,
.page-link {
touch-action: manipulation;
}
@media (max-width: 767px) {
/* =========================================================================
* FORM CONTROLS — anti-zoom iOS + touch target 44px
* ========================================================================= */
/* Override Bootstrap form-control-sm / form-select-sm en mobile */
.form-control,
.form-select,
.form-control-sm,
.form-select-sm {
min-height: 44px;
font-size: 16px !important; /* iOS : empêche zoom auto sur focus */
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
/* Vehicle selector dans header (présent partout) */
/* Session 51 — CONS-092 : font-size 16px obligatoire (anti-zoom iOS strict) */
#vehicleSelector,
.vehicle-selector .form-select {
min-height: 40px; /* dans header donc un peu plus compact */
font-size: 16px !important; /* iOS : empêche zoom auto sur focus */
padding: 0.4rem 1.75rem 0.4rem 0.75rem;
}
/* Form-switch agrandi pour mobile */
.form-switch .form-check-input {
width: 3em;
height: 1.6em;
margin-top: 0.15em;
}
/* Labels checkbox/radio plus tappables */
.form-check-label {
line-height: 1.5;
padding-left: 4px;
}
/* =========================================================================
* BOUTONS — touch target 44px sauf icon-only (.btn-link, .btn-close)
* ========================================================================= */
.btn:not(.btn-close):not(.btn-link):not(.btn-sm) {
min-height: 44px;
}
.btn.btn-sm {
min-height: 38px;
padding: 0.5rem 0.85rem;
font-size: 14px;
}
/* btn-link icon-only (chevrons, action discrets) — au moins 36px */
.btn-link {
min-height: 36px;
min-width: 36px;
}
/* Session 51 — CONS-090 : dropdowns header doivent respecter Apple HIG 44px */
header .nav-link,
header .btn-link,
header .dropdown-toggle.btn-link,
.dropdown-toggle.btn-link {
min-width: 44px;
min-height: 44px;
padding: 0.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* =========================================================================
* TABLES — wrapper responsive automatique
* ========================================================================= */
.table:not(.table-borderless) {
margin-bottom: 0;
}
/* Si table sans .table-responsive parent, force overflow scroll */
main table:not(.table-no-scroll) {
display: block;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
/* =========================================================================
* MODALS — Pattern scrollable UNIVERSEL (Session 62 — fix définitif)
*
* Le bug (signalé 3×) venait de :
* 1. un footer `position: sticky` qui FLOTTAIT par-dessus les derniers champs
* (catastrophique en paysage ~250-360px de haut) ;
* 2. un conflit avec app.css (`.modal-dialog { position: fixed }` +
* `.modal-content { overflow-y: auto; max-height: 85vh }`) → double scroll
* bancal + contenu coupé.
*
* Solution robuste : header + footer en FLUX FLEX NORMAL (flex: 0 0 auto,
* position: static — JAMAIS sticky/absolute/fixed). Seul le `.modal-body`
* scrolle. Header et footer restent toujours visibles sans recouvrir le
* contenu. Appliqué à TOUS les modals (sélecteur universel).
*
* Ordre dvh : on déclare `vh` PUIS `dvh` → le navigateur garde la dernière
* valeur qu'il comprend (dvh s'il est supporté, sinon il ignore dvh et
* conserve vh comme fallback).
* ========================================================================= */
/* Le modal redevient un conteneur flex normal (annule le bottom-sheet
`position: fixed` d'app.css qui cassait le pattern flex). */
.modal-dialog {
display: flex;
align-items: stretch;
position: relative; /* annule app.css .modal-dialog { position: fixed } */
bottom: auto;
left: auto;
right: auto;
margin: 8px;
max-width: calc(100vw - 16px);
width: auto;
}
.modal-dialog.modal-fullscreen-sm-down,
.modal-dialog.modal-fullscreen {
margin: 0;
max-width: 100%;
width: 100%;
}
.modal-content {
display: flex;
flex-direction: column;
width: 100%;
max-height: 88vh; /* fallback */
max-height: 88dvh; /* gagne si supporté */
overflow: visible; /* annule app.css overflow-y:auto (le scroll est porté par .modal-body) */
}
.modal-fullscreen-sm-down .modal-content,
.modal-fullscreen .modal-content {
height: 100vh;
height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
}
/* Modals dont le