/* Correctifs Safari iPhone/iPad — 2026-07-21 */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom);
}

.topbar {
  box-sizing: border-box;
  height: auto;
  min-height: 88px;
  padding-top: env(safe-area-inset-top);
  padding-left: max(clamp(28px, 4vw, 68px), env(safe-area-inset-left));
  padding-right: max(clamp(28px, 4vw, 68px), env(safe-area-inset-right));
}

main,
.screen {
  min-height: calc(100vh - 88px);
  min-height: calc(100dvh - 88px - env(safe-area-inset-top));
}

dialog,
.charter-dialog,
.modal-card {
  max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

@media (max-width: 700px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

@media (max-width: 600px) {
  .topbar {
    min-height: 68px;
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }

  main,
  .screen {
    min-height: calc(100vh - 68px);
    min-height: calc(100dvh - 68px - env(safe-area-inset-top));
  }

  .screen {
    padding-bottom: max(38px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 380px) {
  .topbar {
    gap: 6px;
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }

  .brand {
    flex: 1 1 auto;
    min-width: 0;
    gap: 6px;
    font-size: 12px;
  }

  .brand-mark {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }

  .bar-link {
    width: 34px;
    min-width: 34px;
    flex: 0 0 34px;
  }

  .admin-hub-link {
    width: 36px;
    min-width: 36px;
    flex: 0 0 36px;
    padding: 0;
    font-size: 0;
  }

  .admin-hub-link::before {
    content: "⚙";
    font-size: 15px;
    line-height: 1;
  }

  .landing h1 {
    font-size: clamp(44px, 16vw, 54px);
  }
}