:root {
  --mce-safe-top: env(safe-area-inset-top, 0px);
  --mce-safe-right: env(safe-area-inset-right, 0px);
  --mce-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mce-safe-left: env(safe-area-inset-left, 0px);
}

html, body { min-height: 100%; }
body { padding-bottom: max(var(--mce-safe-bottom), 0px); }
button, input, select, textarea, a { -webkit-tap-highlight-color: transparent; }
input, select, textarea { font-size: max(16px, 1em); }

.mce-pwa-install {
  position: fixed;
  z-index: 2147483000;
  right: calc(14px + var(--mce-safe-right));
  bottom: calc(14px + var(--mce-safe-bottom));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  border-radius: 999px;
  background: #0b5267;
  color: #fff;
  box-shadow: 0 12px 30px rgba(11, 82, 103, .28);
  font: 750 13px/1.2 Inter, Segoe UI, Arial, sans-serif;
  cursor: pointer;
}
.mce-pwa-install[hidden] { display: none !important; }
.mce-pwa-install span:first-child { font-size: 18px; line-height: 1; }

.mce-pwa-toast {
  position: fixed;
  z-index: 2147483001;
  left: 50%;
  bottom: calc(72px + var(--mce-safe-bottom));
  transform: translateX(-50%);
  width: min(520px, calc(100vw - 28px));
  padding: 12px 15px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  background: rgba(18, 50, 72, .96);
  color: #fff;
  box-shadow: 0 15px 40px rgba(12, 38, 56, .24);
  font: 650 13px/1.4 Inter, Segoe UI, Arial, sans-serif;
  text-align: center;
}
.mce-pwa-toast[hidden] { display: none !important; }

.mce-pwa-standalone body { padding-top: var(--mce-safe-top); }

/* Présentation plus lisible des résultats sur mobile. */
.quality-detail-card, .detail-card, .report-card {
  border-radius: 14px;
  overflow: hidden;
}
.quality-detail-card img, .detail-card img, .report-card img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

@media (max-width: 760px) {
  body { overflow-x: hidden; }
  .portal-shell, .app-shell, .page-shell, main { width: 100%; max-width: 100%; }
  .grid, .form-grid, .filters-grid, .details-grid, .cards-grid { grid-template-columns: 1fr !important; }
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .actions, .toolbar, .page-actions { flex-wrap: wrap; }
  button, .button, [role="button"] { min-height: 44px; }
  .mce-pwa-install { left: calc(12px + var(--mce-safe-left)); right: calc(12px + var(--mce-safe-right)); justify-content: center; }
}

@media print {
  .mce-pwa-install, .mce-pwa-toast { display: none !important; }
}

/* Fiche de rapport dans l'interface : hiérarchie visuelle plus professionnelle. */
.answer-item {
  min-height: 74px;
  padding: 12px 13px;
  border: 1px solid #d8e3e8;
  border-left: 4px solid #0d7581;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff, #f8fbfc);
}
.answer-item > small {
  display: block;
  margin-bottom: 7px;
  color: #667d8c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.answer-item > strong {
  display: block;
  color: #17324d;
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.answer-observation {
  display: block;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px dashed #d4e0e5;
  color: #5f7583;
  font-weight: 500;
  line-height: 1.45;
}
.signature-preview {
  display: block;
  max-height: 100px;
  padding: 6px;
  border: 1px solid #d8e3e8;
  background: #fff;
}

@media (max-width: 760px) {
  .answer-item { min-height: auto; }
  .modal, .modal-card, .dialog-card { max-width: calc(100vw - 16px) !important; max-height: calc(100dvh - 18px) !important; }
}