/* CML8 member app — mobile "native app" layer + PWA chrome.
 *
 * Loaded AFTER site.css, only in the member shell. Everything that changes
 * layout is gated to small screens (<=840px) so the desktop experience in
 * site.css is untouched. Uses the existing design tokens from site.css :root
 * (--red, --ink, --line, --paper, --muted, --radius, --shadow, --speed).
 *
 * Sections:
 *   1. Add-to-home-screen banner (global)
 *   2. Offline fallback screen (global)
 *   3. Bottom tab bar element (styled globally, shown only on mobile)
 *   4. Mobile app chrome  @media (max-width: 840px)
 *   5. Standalone / reduced-motion niceties
 */

/* ------------------------------------------------------------------ *
 * 1. Add-to-home-screen banner
 * ------------------------------------------------------------------ */
.a2hs-banner {
  position: fixed;
  z-index: 260;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  margin: 0 auto;
  max-width: 460px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(26, 26, 26, .22);
  animation: a2hs-in var(--speed) ease both;
}
@keyframes a2hs-in { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.a2hs-icon { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.a2hs-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.a2hs-text strong { font-size: .92rem; }
.a2hs-text span { font-size: .78rem; color: var(--muted); }
.a2hs-actions { display: flex; gap: 6px; margin-left: auto; flex: none; }

/* ------------------------------------------------------------------ *
 * 2. Offline fallback screen
 * ------------------------------------------------------------------ */
.offline-screen {
  max-width: 420px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  padding: 2rem 1.5rem;
}
.offline-logo { border-radius: 20px; box-shadow: var(--shadow); margin-bottom: .5rem; }
.offline-screen h1 { font-size: 1.4rem; }

/* ------------------------------------------------------------------ *
 * 3. Bottom tab bar (hidden until mobile; JS reveals via [hidden])
 * ------------------------------------------------------------------ */
.app-tabbar { display: none; }

.app-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px 5px;
  min-height: 54px;
  color: var(--muted);
  text-decoration: none;
  background: none;
  border: 0;
  font: inherit;
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--speed) ease;
}
.app-tab .app-tab-ico { width: 25px; height: 25px; display: block; stroke: currentColor; }
.app-tab-lbl { line-height: 1; }
.app-tab.is-active { color: var(--red); }
.app-tab:active { transform: translateY(1px); }

/* Nav overlay header (only meaningful in the mobile full-screen menu) */
.portal-nav-head { display: none; }

/* ------------------------------------------------------------------ *
 * 4. Mobile app chrome
 * ------------------------------------------------------------------ */
@media (max-width: 840px) {
  html, body { overscroll-behavior-y: contain; }

  /* Sticky, compact app top bar */
  body[data-page="portal"] .site-header {
    position: sticky;
    top: 0;
    z-index: 140;
    padding-top: env(safe-area-inset-top);
    box-shadow: 0 1px 0 var(--line), 0 2px 10px rgba(26, 26, 26, .04);
  }
  body[data-page="portal"] .site-header .container { min-height: 52px; flex-wrap: nowrap; }
  body[data-page="portal"] .brand img { height: 30px; }
  /* Keep the header to one tidy row: the dashboard already greets by name,
     so the header username is redundant on mobile. */
  body[data-page="portal"] #portal-user { display: none; }
  body[data-page="portal"] .site-nav { gap: 6px; flex: none; }
  body[data-page="portal"] .site-nav .btn { min-height: 38px; padding: 7px 11px; font-size: .82rem; }
  body[data-page="portal"] .site-nav .btn-lang { padding: 7px 9px; }

  /* The old top hamburger bar is replaced by the bottom tab bar's "More". */
  body[data-page="portal"] .nav-toggle { display: none !important; }
  /* Neutralise the sticky wrapper site.css adds around the toggle+nav. */
  body[data-page="portal"] .portal-top { display: contents; }

  /* Content: leave room for the fixed tab bar + home indicator. */
  body[data-page="portal"] .portal { display: block; }
  body[data-page="portal"] .portal-main {
    padding-bottom: calc(58px + env(safe-area-inset-bottom) + 1rem);
    -webkit-overflow-scrolling: touch;
  }

  /* Bottom tab bar */
  .app-tabbar:not([hidden]) {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    position: fixed;
    z-index: 150;
    left: 0;
    right: 0;
    bottom: 0;
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 14px rgba(26, 26, 26, .07);
  }

  /* "More" full-screen menu — slide-in from the right, above everything.
     :not([hidden]) so the onboarding wizard (which sets nav hidden) still
     hides it cleanly. */
  body[data-page="portal"] .portal-nav:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: block;
    margin: 0;
    max-height: none;   /* override site.css's dropdown max-height */
    background: var(--bg);
    padding: calc(env(safe-area-inset-top) + .5rem) 1rem calc(env(safe-area-inset-bottom) + 1.5rem);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--speed) ease;
    box-shadow: none;
  }
  /* Full-screen menu covers the tab bar; hide it to avoid any overlap. */
  body:has(.portal.nav-open) .app-tabbar:not([hidden]) { display: none; }
  body[data-page="portal"] .portal.nav-open .portal-nav:not([hidden]) {
    transform: none;
    max-height: none;   /* beats site.css .nav-open .portal-nav (0,4,1) */
    box-shadow: none;
  }

  .portal-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .25rem .25rem 1rem;
    font-weight: 700;
    font-size: 1.15rem;
  }
  .portal-nav-close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
  }
  /* Menu links as big, tappable rows */
  body[data-page="portal"] .portal-nav:not([hidden]) a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: .75rem 1rem;
    margin: 0;
    border: 0;
    border-radius: 12px;
    background: var(--paper);
    color: var(--ink);
    font-size: 1rem;
    font-weight: 600;
    box-shadow: 0 1px 0 var(--line);
    margin-bottom: 8px;
  }
  body[data-page="portal"] .portal-nav:not([hidden]) a.nav-sub { margin-left: 0; opacity: .9; }
  body[data-page="portal"] .portal-nav:not([hidden]) a.active {
    color: var(--red);
    box-shadow: 0 0 0 2px var(--red) inset;
  }

  /* Bigger default tap targets across the app */
  body[data-page="portal"] .btn { min-height: 44px; }
  body[data-page="portal"] .stat-cards,
  body[data-page="portal"] .stat-row { gap: 10px; }
}

/* ------------------------------------------------------------------ *
 * 5. Standalone / reduced motion
 * ------------------------------------------------------------------ */
@media (display-mode: standalone) {
  /* In the installed app, the header doubles as the OS status-bar backdrop. */
  body[data-page="portal"] .site-header { background: var(--paper); }
}
@media (prefers-reduced-motion: reduce) {
  .a2hs-banner,
  body[data-page="portal"] .portal-nav:not([hidden]) { animation: none; transition: none; }
  .fuel-line { animation: none; }
  .fl-dot-now { animation: none !important; }
}

/* ------------------------------------------------------------------ *
 * 5b. Logged-out auth pages, but ONLY inside the installed app.
 *     In a normal browser these pages keep the full marketing site;
 *     launched as the PWA they become focused, app-like screens (no
 *     marketing nav/footer, safe-area header, vertically-centred card).
 * ------------------------------------------------------------------ */
@media (display-mode: standalone) {
  body[data-page="login"] .site-nav a,
  body[data-page="register"] .site-nav a,
  body[data-page="forgot"] .site-nav a,
  body[data-page="reset"] .site-nav a,
  body[data-page="verify"] .site-nav a,
  body[data-page="login"] .site-footer,
  body[data-page="register"] .site-footer,
  body[data-page="forgot"] .site-footer,
  body[data-page="reset"] .site-footer,
  body[data-page="verify"] .site-footer { display: none; }

  body[data-page="login"] .site-header,
  body[data-page="register"] .site-header,
  body[data-page="forgot"] .site-header,
  body[data-page="reset"] .site-header,
  body[data-page="verify"] .site-header {
    position: sticky;
    top: 0;
    padding-top: env(safe-area-inset-top);
  }
  body[data-page="login"] main.section,
  body[data-page="register"] main.section,
  body[data-page="forgot"] main.section,
  body[data-page="reset"] main.section,
  body[data-page="verify"] main.section {
    min-height: 78vh;
    display: flex;
    align-items: center;
    padding-bottom: calc(env(safe-area-inset-bottom) + 1.5rem);
  }
  /* Give the auth card real presence on a phone-sized app window. */
  body[data-page="login"] .form-card,
  body[data-page="register"] .form-card,
  body[data-page="forgot"] .form-card,
  body[data-page="reset"] .form-card,
  body[data-page="verify"] .form-card { width: 100%; }
  body[data-page="login"] .btn[type="submit"],
  body[data-page="register"] .btn[type="submit"],
  body[data-page="forgot"] .btn[type="submit"],
  body[data-page="reset"] .btn[type="submit"] { width: 100%; min-height: 46px; }
}

/* ------------------------------------------------------------------ *
 * 5c. In-app login screen (rendered inside /membre/ when logged out,
 *     so the installed PWA never navigates out of scope to /connexion).
 * ------------------------------------------------------------------ */
.app-login { max-width: 420px; margin: 0 auto; padding: 1.5rem 0 2rem; }
.app-login-brand { text-align: center; margin: .5rem 0 1.5rem; }
.app-login-logo { border-radius: 18px; box-shadow: var(--shadow); }
.app-login-brand h1 { font-size: 1.5rem; margin: .8rem 0 .35rem; }
.app-login-brand p { margin: 0 auto; max-width: 34ch; }
.app-login .form-card { width: 100%; }
.app-login-links { text-align: center; margin-top: 1.25rem; font-size: .9rem; line-height: 2; }

/* ------------------------------------------------------------------ *
 * 5d. Onboarding wizard — make the document-capture step feel like an
 *     app control instead of a raw web file form.
 * ------------------------------------------------------------------ */
/* When the in-app camera is available, camera.js adds a "Prendre une photo"
   button and keeps the native <input type=file> as a fallback. Hide that raw
   input so the tile reads as one tappable control (native input stays when
   :has is unsupported or no camera — graceful). */
.cap-tile:has(.cam-field) input[type="file"] { display: none; }

.cap-tile { text-align: left; }
.cap-tile .cam-field { display: flex; flex-direction: column; gap: .6rem; margin-top: .1rem; }
/* Since the raw input is hidden above, the tile carries its own "choose a
   file" button — the only way in from a computer with no camera. */
.cap-tile .cam-pick { width: 100%; min-height: 44px; }
/* The capture affordance: a big, obviously-tappable dropzone-style button.
   With no camera on the device the picker inherits that prominence. */
.cap-tile .cam-take,
.cap-tile .cam-pick-solo {
  width: 100%;
  min-height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--red-dark);
  background: var(--paper);
  border: 0;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1.6px var(--line-strong);
}
.cap-tile .cam-take:active { transform: scale(.99); }
.cap-tile .cam-thumb { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.cap-tile .cam-thumb-img { border-radius: 10px; max-height: 190px; width: auto; box-shadow: var(--shadow); }
.cap-tile .cam-thumb-act { min-height: 40px; }

/* Phone layout: stack the wizard's side-by-side fields and capture columns. */
@media (max-width: 640px) {
  .wizard .field-row { flex-direction: column; gap: 0; }
  .wizard .field-row .field { flex: 1 1 auto; }
  .wizard .cap-row { grid-template-columns: 1fr; gap: 1.25rem; }
  /* Exit reads as a quiet link, not a heavy button, so the step header feels
     like an app screen. */
  .wizard-top { flex-wrap: wrap; gap: .35rem; align-items: flex-start; }
  .wizard-top .btn-sm {
    font-size: .82rem;
    padding: 2px 2px;
    border: 0;
    box-shadow: none;
    background: none;
    color: var(--muted);
    text-decoration: underline;
    min-height: 0;
  }
  .wizard-body > h1 { font-size: 1.35rem; }
  .wizard .card { padding: 1rem; }
  .wizard-nav .btn { min-height: 46px; }
}

/* ------------------------------------------------------------------ *
 * 6. Full-screen "on hold" fuel line (the phone-line experience)
 * ------------------------------------------------------------------ */
.btn-block { display: block; width: 100%; }
.btn-lg { padding: .9rem 1.4rem; font-size: 1.05rem; border-radius: 12px; }

.fuel-line {
  position: fixed;
  inset: 0;
  z-index: 280;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  color: #fff;
  background-color: #14100e;
  background-image: linear-gradient(180deg, #3a1416 0%, #1c1714 55%, #100e0c 100%);
  animation: fl-in var(--speed) ease both;
  -webkit-overflow-scrolling: touch;
}
@keyframes fl-in { from { opacity: 0; } to { opacity: 1; } }

.fl-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .5rem;
  padding: calc(env(safe-area-inset-top) + .7rem) 1rem .7rem;
}
.fl-close {
  justify-self: start;
  background: none;
  border: 0;
  color: #fff;
  font: inherit;
  font-weight: 600;
  opacity: .85;
  padding: 6px 8px;
  cursor: pointer;
}
.fl-title { justify-self: center; font-weight: 700; letter-spacing: .02em; opacity: .9; }

.fl-hero {
  flex: 1 0 auto;
  min-height: 44vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .7rem;
  padding: 1rem 1.5rem 1.5rem;
}
.fl-hero .fl-hint,
.fl-hero .fl-lead { max-width: 30ch; color: rgba(255, 255, 255, .72); font-size: .95rem; }
.fl-hero .fl-hint { font-size: .85rem; color: rgba(255, 255, 255, .55); }

.fl-badge {
  display: inline-block;
  padding: .35rem .8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.fl-badge-warn { background: rgba(240, 190, 60, .2); color: #ffdd8a; }
.fl-serving { color: rgba(255, 255, 255, .8); font-size: 1rem; }
.fl-serving .mono, .fl-count { font-variant-numeric: tabular-nums; }
.fl-serving .mono { color: #fff; font-weight: 700; }

.fl-poslabel { text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; color: rgba(255, 255, 255, .6); }
.fl-posnum { font-size: clamp(3.4rem, 22vw, 6rem); font-weight: 800; line-height: .95; }
.fl-posnum sup { font-size: .34em; font-weight: 700; top: -1.4em; }
.fl-ahead { font-size: 1.05rem; font-weight: 600; }
.fl-front-cd { color: rgba(255, 255, 255, .72); font-size: .95rem; }

.fl-dots { display: flex; gap: 8px; }
.fl-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.fl-dot-now { background: var(--red); box-shadow: 0 0 0 4px rgba(213, 35, 42, .25); animation: fl-pulse 1.6s ease-in-out infinite; }
.fl-dot-me { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); }
@keyframes fl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

.fl-turn-big {
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  background: linear-gradient(180deg, #fff, #ffd7d7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.fl-turn { gap: .9rem; }
.fl-cta { margin-top: .4rem; min-width: 260px; }

.fl-panel {
  flex: none;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 1rem calc(env(safe-area-inset-bottom) + 1.25rem);
  color: var(--ink);   /* the reused card is a normal light card — don't inherit the stage's white text */
}
/* The reused queue controls/list card sits on the dark stage. */
.fl-panel .fuel-queue-card { margin: 0; }

/* ------------------------------------------------------------------ *
 * 7. Mobile app: drop the web chrome, tappable pump cards, full-screen
 *    dispensing.  All @media (max-width: 840px) — desktop untouched.
 * ------------------------------------------------------------------ */
/* The logout link + language toggle live in the "Plus" menu on mobile
   (hidden on desktop, where the header carries them). */
.portal-nav-foot { display: none; }
/* The in-panel back bar for the full-screen pump (mobile only). */

@media (max-width: 840px) {
  /* (a) No persistent logo/logout bar on every screen — the bottom tabs are the
     nav, each view has its own <h1>, and logout moves into "Plus". */
  body[data-page="portal"] .site-header { display: none; }
  body[data-page="portal"] .portal-main { padding-top: calc(env(safe-area-inset-top) + .5rem); }

  /* Logout + language at the foot of the "Plus" full-screen menu. */
  body[data-page="portal"] .portal-nav:not([hidden]) .portal-nav-foot {
    display: block;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line-strong);
  }
  .portal-nav-foot .btn { width: 100%; margin-top: .6rem; min-height: 46px; }

  /* (b) Pump/station selection → full-width tappable cards, not chips. */
  .station-picker { flex-direction: column; gap: .6rem; margin-bottom: 1.1rem; }
  .station-picker .btn {
    width: 100%;
    min-height: 62px;
    justify-content: flex-start;
    text-align: left;
    font-size: 1.02rem;
    font-weight: 600;
    border-radius: 14px;
    padding: .85rem 1.1rem;
  }
  /* Selected station reads as a filled card; others as outlined cards. */
  .station-picker .btn-ghost { box-shadow: inset 0 0 0 1.5px var(--line-strong); }

  /* (c) Active dispensing takes over the whole screen (immersive instrument). */
  body:has(#fuel-dispense .fuel-pump) .app-tabbar:not([hidden]) { display: none; }
  #fuel-dispense .fuel-pump {
    position: fixed;
    inset: 0;
    z-index: 190;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: calc(env(safe-area-inset-top) + .5rem) 1.1rem calc(env(safe-area-inset-bottom) + 1.25rem);
    display: flex;
    flex-direction: column;
    gap: .25rem;
  }
  /* The register grows to use the extra room; the stop button is easy to reach. */
  #fuel-dispense .fuel-pump .odo-stack { width: 100%; }
  #fuel-dispense .fuel-pump #fuel-stop { min-height: 52px; font-size: 1.05rem; margin-top: auto; }
}

/* ------------------------------------------------------------------ *
 * 8. Onboarding wizard: aligned app header + sticky bottom Next/Back.
 * ------------------------------------------------------------------ */
/* Header row: step label on the left, a clean round close on the right —
   aligned, not a stray "Welcome" + long link. */
.wizard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: 0 0 .5rem;
}
.wizard-step { font-weight: 600; font-size: .9rem; color: var(--muted); }
.wizard-exit {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wizard-progress { margin: 0 0 .75rem; }

@media (max-width: 840px) {
  /* Sticky bottom Back / Continue bar — the app-style step nav. The wizard
     hides the tab bar while active, so this owns the bottom safely. */
  .wizard-body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .wizard-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    margin: 0;
    display: flex;
    gap: .75rem;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--line);
  }
  .wizard-nav > span:empty { display: none; }
  /* Compact "Back" that hugs its label (no 2-line wrap), a dominant primary
     "Continue" that fills the rest — an app-style step bar. */
  .wizard-nav .btn {
    flex: 0 0 auto;
    min-height: 46px;
    padding: .6rem 1rem;
    font-size: .95rem;
    white-space: nowrap;
  }
  .wizard-nav #wz-back { color: var(--muted); }
  .wizard-nav #wz-next { flex: 1 1 auto; }
}

/* ------------------------------------------------------------------ *
 * 9. Pump credit-cap slot (reserved height so the UI never resizes).
 * ------------------------------------------------------------------ */
.pump-credit-slot { min-height: 3.4rem; margin-top: .35rem; }
.pump-credit-warn { margin: 0; padding: .5rem .75rem; font-size: .85rem; }

/* ------------------------------------------------------------------ *
 * 10. In-app camera capture → full screen on phones, so the shutter is
 *     ALWAYS reachable (portrait AND landscape). Desktop keeps the modal.
 *     Triggers when either dimension is small (covers landscape phones,
 *     where width can exceed the normal mobile breakpoint).
 * ------------------------------------------------------------------ */
@media (max-width: 900px), (max-height: 600px) {
  .cam-overlay { padding: 0; align-items: stretch; justify-content: stretch; }
  .cam-overlay .cam-card {
    max-width: none;
    width: 100%;
    height: 100%;
    border-radius: 0;
    border-top: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background: #0b0b0c;
    color: #fff;
  }
  .cam-overlay .modal-title {
    flex: none;
    margin: 0;
    padding: calc(env(safe-area-inset-top) + .55rem) 1rem .5rem;
    font-size: 1rem;
    text-align: center;
    color: #fff;
  }
  /* Live preview / captured image fill the space between title and controls. */
  .cam-overlay .cam-stage,
  .cam-overlay .cam-review {
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: auto;
    height: auto;
    border-radius: 0;
  }
  .cam-overlay .cam-review { object-fit: contain; background: #000; }
  /* Controls pinned to the bottom — never off-screen, even in landscape. */
  .cam-overlay .cam-actions {
    flex: none;
    margin: 0;
    justify-content: center;
    gap: .5rem;
    padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
    background: #0b0b0c;
  }
  .cam-overlay .cam-actions .btn { flex: 1 1 auto; min-height: 50px; }
  .cam-overlay .cam-actions .btn-red { flex: 1 1 100%; order: -1; }   /* primary spans a full row on top */
  .cam-overlay .cam-filelink { order: 99; flex: none; text-align: center; color: #9fd0ff; margin: 0 0 .5rem; }
}

/* Landscape phone: controls on the RIGHT (thumb side), video fills the left. */
@media (orientation: landscape) and (max-height: 600px) {
  .cam-overlay .cam-card { flex-direction: row; align-items: stretch; }
  .cam-overlay .modal-title {
    position: absolute;
    top: 0;
    left: 0;
    padding: calc(env(safe-area-inset-top) + .4rem) .9rem .4rem;
    font-size: .85rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
    z-index: 3;
  }
  .cam-overlay .cam-stage,
  .cam-overlay .cam-review { flex: 1 1 auto; }
  /* Controls hug the right edge, vertically centred. */
  .cam-overlay .cam-actions {
    flex: 0 0 auto;
    width: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    padding: 1rem calc(1rem + env(safe-area-inset-right)) 1rem 1rem;
  }
  /* Shutter in the middle, flip/torch above, file below. */
  .cam-overlay .cam-flip,
  .cam-overlay .cam-torch { order: 1; }
  .cam-overlay .cam-filebtn { order: 3; }
  /* Round shutter, no text, a bit bigger than the icon buttons. The extra
     selector depth beats the global `.cam-actions .cam-capture { flex: 1 }`
     so it stays a fixed circle instead of stretching down the column. */
  .cam-overlay .cam-actions .cam-shutter {
    order: 2;
    width: 82px;
    height: 82px;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    flex: 0 0 auto;
    box-shadow: 0 0 0 4px #0b0b0c, 0 0 0 8px rgba(255, 255, 255, .85);
  }
  /* Review actions (Use / Retake) stay as text, sized to content. */
  .cam-overlay .cam-actions .btn:not(.cam-shutter) { flex: 0 0 auto; width: auto; white-space: nowrap; }
}

/* ------------------------------------------------------------------ *
 * 11. Camera controls: icon buttons (close ✕, flip, torch, file) on a
 *     dark card so they're legible in every layout. The camera is an
 *     immersive UI, so the card is dark on desktop too.
 * ------------------------------------------------------------------ */
.cam-card { background: #0b0b0c; color: #fff; }
.cam-card .modal-title { color: #fff; }

.cam-close {
  position: absolute;
  top: calc(env(safe-area-inset-top) + .5rem);
  right: calc(env(safe-area-inset-right) + .6rem);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  cursor: pointer;
  z-index: 6;
}
.cam-close svg { width: 22px; height: 22px; }

.cam-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: 50%;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cam-ico svg { width: 26px; height: 26px; }
.cam-ico:active { transform: scale(.94); }
.cam-torch.is-on { background: var(--warn); color: #1a1a1a; }

/* Capture / Use are the primary action; keep them prominent in the row. */
.cam-actions .cam-capture { flex: 1 1 auto; min-height: 50px; }
.cam-actions .cam-retake { flex: 0 0 auto; }
/* Ghost buttons (e.g. "Reprendre"/Retake) are dark-on-transparent by default —
   invisible on the dark camera card, so give them light text + a subtle fill. */
.cam-actions .btn-ghost {
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border-color: transparent;
}

/* Rotate-to-landscape prompt (opts.landscape). */
.cam-rotate {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
  background: rgba(0, 0, 0, .68);
  z-index: 4;
}

/* ------------------------------------------------------------------ *
 * 12. Aircraft-registration CCARCS lookup hint (under the tail number).
 * ------------------------------------------------------------------ */
.ac-lookup { margin: -.35rem 0 .85rem; line-height: 1.45; }
.ac-lookup-ok { color: var(--ok); font-weight: 700; }
.ac-lookup-foreign { color: var(--info); font-weight: 700; }