/* Mobile pass (01/10): phones first. Loaded by the staff and client layouts, after Tailwind's classes. */

/* iPhone zooms into any field under 16 px when it gets focus: fields are 16 px on phones. */
@media (max-width: 640px) {
  input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { font-size: 16px !important; }
}

/* Touch screens: every button, field and stand-alone link is at least 40 px high (Apple asks 44, Google 48). */
@media (pointer: coarse) {
  button, select, input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), .btn { min-height: 40px; }
  summary { min-height: 40px; display: flex; align-items: center; }
  summary::-webkit-details-marker { display: none; }
  a.underline, a.block, nav a { min-height: 40px; }
  a.underline { display: inline-flex; align-items: center; }
  a.block { display: flex; flex-direction: column; justify-content: center; }
  p a.underline, li a.underline, span a.underline { min-height: 0; display: inline; }  /* links inside a sentence */
  p > a:only-child, td a, a[class*="rounded"], a.inline-block { min-height: 40px; display: inline-flex; align-items: center; }
  input[type=file] { min-height: 40px; }
  input[type=checkbox], input[type=radio] { min-width: 20px; min-height: 20px; }
}

/* Wide tables scroll inside their box, never the page. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Long words (emails, links, references) never push the page wider. */
main { overflow-wrap: anywhere; }

/* Safe areas (02/10): the pages use the whole screen (viewport-fit=cover, status bar « black-translucent » on the installed
   app), so nothing may sit under the iPhone's Dynamic Island, its rounded corners or the home bar. The insets are 0 in a
   normal browser tab, so these rules change nothing there. A navy strip fills the status bar area; the page starts below
   it; sticky bars stop below it; fixed bars at the bottom keep clear of the home bar. */
body { padding-top: env(safe-area-inset-top, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.safe-top-fill { position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: #0E3A5D; z-index: 60; pointer-events: none; }
.top-safe { top: env(safe-area-inset-top, 0px); }
.pb-safe { padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)) !important; }
@media (display-mode: standalone) {
  body { padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); }
}

/* 01/10: one-thumb buttons of the partner flow (« J'accepte », « J'ai lu la fiche de chantier »): big even when Tailwind
   has not loaded (bad network), so the size is set here, in the app's own file kept offline. */
.btn-thumb { display: block; width: 100%; min-height: 56px; font-size: 18px; font-weight: 600; border-radius: 12px; }