/* VECC 360 V22.2.1 — Correctif scroll modales mobile / iPhone */

.modal{
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  align-items:flex-start !important;
  padding:
    max(12px, env(safe-area-inset-top))
    12px
    max(12px, env(safe-area-inset-bottom)) !important;
}

.dialog{
  width:min(100%, 760px) !important;
  max-height:calc(100dvh - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom))) !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  margin:auto !important;
}

.dialog-head{
  flex:0 0 auto !important;
  position:sticky !important;
  top:0 !important;
  z-index:10 !important;
}

/* Le formulaire devient la vraie zone scrollable */
.dialog > form{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
  padding-bottom:0 !important;
}

/* Cas des modales sans formulaire direct */
.dialog > .modal-body,
.dialog > .dialog-body,
.dialog > [data-modal-scroll]{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
}

/* Les boutons restent accessibles mais ne masquent pas les champs */
.dialog .form-actions{
  position:sticky !important;
  bottom:0 !important;
  z-index:12 !important;
  flex:0 0 auto !important;
  margin-top:18px !important;
  padding:
    14px
    0
    max(14px, env(safe-area-inset-bottom)) !important;
  background:
    linear-gradient(
      to top,
      #fff 78%,
      rgba(255,255,255,.96) 88%,
      rgba(255,255,255,0)
    ) !important;
  border-top:1px solid rgba(217,229,239,.9) !important;
}

/* Évite que le dernier champ soit caché derrière la barre d'actions */
.dialog > form .form-grid,
.dialog > form > .field,
.dialog > form > .alert{
  scroll-margin-bottom:110px;
}

.dialog > form::after{
  content:"";
  display:block;
  height:18px;
  flex:0 0 auto;
}

/* iPhone / petits écrans */
@media(max-width:860px){
  .modal{
    padding:
      max(8px, env(safe-area-inset-top))
      8px
      max(8px, env(safe-area-inset-bottom)) !important;
  }

  .dialog{
    width:100% !important;
    max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    border-radius:20px !important;
  }

  .dialog-head{
    padding:14px !important;
  }

  .dialog > form{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .dialog .form-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  .dialog .form-actions .btn{
    width:100% !important;
    min-width:0 !important;
  }
}

/* Très petit écran : évite les boutons trop larges */
@media(max-width:430px){
  .dialog .form-actions{
    grid-template-columns:1fr 1fr !important;
  }
  .dialog .form-actions .btn{
    padding-left:10px !important;
    padding-right:10px !important;
    font-size:.92rem !important;
  }
}