/* Empêcher le scroll de la page derrière la modale */
body.kc-modal-open { overflow: hidden; }

/* --- MODAL --- */
.kc-modal[hidden]{display:none}
.kc-modal{
  position: fixed; inset: 0; z-index: 1000;
  /* évite l’élastique iOS qui fait défiler l’arrière-plan */
  overscroll-behavior: contain;
}
.kc-modal__backdrop{
  position: absolute; inset: 0;
  background: rgba(11,27,43,.55); backdrop-filter: blur(2px);
}

.kc-modal__dialog{
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: min(768px, 92%);
  margin: min(8vh, 48px) auto 0;
  /* hauteur max adaptative (fallback vh + unités modernes dvh) */
  max-height: min(90vh, 90dvh);
  background: #fff; border-radius: 16px; border: 1px solid #e7edf3;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  padding: 20px 20px 16px;
  /* important: cacher le débordement, le scroll se fait dans __content */
  overflow: hidden;
  /* zone sûre iOS */
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

/* Quand la hauteur d’écran est vraiment petite, tasse un peu la marge */
@media (max-height: 560px){
  .kc-modal__dialog{ margin: min(4vh, 24px) auto 0; max-height: min(94vh, 94dvh); }
}

/* Contenu scrollable */
.kc-modal__content{
  /* fait grandir/rapetisser et occuper l’espace restant */
  flex: 1 1 auto;
  min-height: 0;               /* nécessaire pour que flex+overflow fonctionne */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* inertie iOS */
  padding-right: 2px;          /* petit espace pour la scrollbar */
}

/* Footer actions en bas, non scrollable */
.kc-modal__actions{
  flex: 0 0 auto;
  margin-top: 16px;
  display: flex; justify-content: flex-end; gap: 10px;
  /* léger fondu pour séparer du contenu quand ça scrolle */
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 30%);
  padding-top: 6px;
}

/* Reste de ta mise en forme */
.kc-modal__close{
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid #e7edf3; background: #fff; cursor: pointer; font-size: 16px;
}
.kc-modal__title{ margin: 2px 0 10px; font-size: 1.4rem; font-weight: 800; color: #0e1f33; }
.kc-modal__content p{ margin: 8px 0; color: #5b6b7b; }
.kc-modal__bullets{ margin: 8px 0 0; padding-left: 18px; color: #334; }
.kc-modal__bullets li{ margin: 6px 0; }
.kc-btn-primary{
  background: var(--fulli-primary); color:#fff; border:none; height:44px; padding:0 16px;
  border-radius:12px; font-weight:700; cursor:pointer
}
.kc-btn-primary:hover{ background: var(--fulli-primary-600) }

@media (max-width:640px){ .kc-modal__dialog{} }

/* ===== Assist (modal help) ===== */
.kc-assist { font-size: 15px; line-height: 1.5; color: #0f172a; }
.kc-assist__lead { margin: 0 0 12px; color: #475569; }
.kc-assist__grid { display: grid; gap: 12px; }
@media (min-width: 640px) { .kc-assist__grid { grid-template-columns: 1fr 1fr; } }
.kc-assist__card {
display: flex; gap: 12px; align-items: flex-start;
background: #f5f7fb; border: 1px solid #e6ebf5; border-radius: 12px; padding: 14px;
}
.kc-assist__title { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.kc-assist__list { margin: 0; padding-left: 18px; list-style: circle; }
.kc-assist__list li { margin: 4px 0; }
.kc-assist__muted { color: #64748b; font-size: 13px; }
.kc-assist code {
background: #eef2ff; border: 1px solid #dce1ff; padding: 1px 5px; border-radius: 6px;
font-size: 13px;
}
.kc-assist__callouts { display: grid; gap: 10px; margin-top: 12px; }
.kc-assist__callout {
display: flex; gap: 10px; align-items: flex-start;
background: #f8fafc; border: 1px solid #e2e8f0; border-left: 4px solid #3b82f6;
border-radius: 10px; padding: 10px 12px;
}
.kc-assist__callout strong { display: block; margin-bottom: 2px; }
.kc-assist__footnote { margin-top: 12px; color: #64748b; font-size: 13px; }

/* Icônes inline */
.kc-icon { width: 22px; height: 22px; flex: 0 0 22px; color: #2563eb; }
.kc-icon--muted { color: #64748b; }