/*
 * Règles communes pour les WebViews Capacitor, les PWA et les navigateurs.
 * Les fallbacks à 0px gardent exactement le même rendu sur un appareil sans
 * encoche. Les unités dvh corrigent aussi la hauteur quand les barres mobiles
 * apparaissent/disparaissent.
 */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --app-height: 100vh;
}

@supports (height: 100dvh) {
  :root { --app-height: 100dvh; }
}

html {
  min-width: 100%;
  min-height: 100%;
  background: #0a0a14;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  width: 100%;
  min-height: var(--app-height) !important;
  padding-top: var(--safe-top) !important;
  padding-right: var(--safe-right) !important;
  padding-bottom: var(--safe-bottom) !important;
  padding-left: var(--safe-left) !important;
  overflow-x: clip;
  scroll-padding-top: calc(var(--safe-top) + 16px);
  scroll-padding-bottom: calc(var(--safe-bottom) + 16px);
}

/* Les contrôles collés aux bords restent cliquables en portrait et paysage. */
.back-btn,
.btn-back {
  top: calc(var(--safe-top) + 16px) !important;
  left: calc(var(--safe-left) + 16px) !important;
}

/* Les fonds doivent couvrir l'écran, y compris derrière les zones système. */
.background-overlay,
body::before,
body::after {
  margin-left: calc(-1 * var(--safe-left));
  margin-right: calc(-1 * var(--safe-right));
}

/* En paysage bas, le contenu centré doit pouvoir défiler depuis son début. */
@media (max-height: 600px) {
  body { align-items: flex-start !important; }
}

/* Tablettes : largeur lisible sans conserver les contraintes téléphone. */
@media (min-width: 768px) and (max-width: 1366px) {
  .container:not(.container-fluid) { max-width: min(92vw, 960px); }
  .form-wrapper { width: min(72vw, 560px); max-width: 560px; }
}