/* ==========================================================================
   Base & Fonts
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  --im-bg-modal: #fbfaf9;
  --im-bg-contrast: #f0f2f5;

  --im-text: #2b2f36;
  --im-placeholder: #9aa3ad;

  --im-border: #e1e4ea;

  --im-primary: #1f86cc;
  --im-primary-hover: #1874b2;
  --im-primary-shadow: rgba(24, 116, 178, 0.28);

  --im-danger: #e35d5d;
  --im-danger-hover: #cc4e4e;
  --im-danger-shadow: rgba(204, 78, 78, 0.28);

  --im-focus: #218fd4;

  --im-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  --im-card-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 1px 8px rgba(0, 0, 0, 0.06);

  --im-radius: 10px;

  --im-font: "Inter", "Segoe UI", "Open Sans", system-ui, -apple-system,
    sans-serif;
  --im-font-size: 16px;
}

/* ==========================================================================
   Remodal – nécessaire
   ========================================================================== */
html.remodal_lock,
body.remodal_lock {
  overflow: hidden;
}

.remodal,
[data-remodal-id] {
  visibility: hidden;
}

/* Overlay avec centrage vertical */
.remodal-overlay {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: none;
  overflow: auto;
  text-align: center; /* horizontal */
  -webkit-overflow-scrolling: touch;
  -webkit-backface-visibility: hidden;
  transition: opacity 0.2s linear;
  background: rgba(33, 36, 46, 0.95);
}
.remodal-overlay:after {
  display: inline-block;
  vertical-align: middle; /* centrage vertical */
  height: 100%;
  content: "";
}
body.remodal_active .remodal-overlay {
  opacity: 1;
}

/* Blur du fond */
.remodal-bg {
  transition: filter 0.2s linear;
}
body.remodal_active .remodal-bg {
  filter: blur(3px);
}

/* Fenêtre modale */
.remodal {
  position: relative;
  display: inline-block; /* nécessaire pour le centrage */
  vertical-align: middle;
  box-sizing: border-box;

  width: 100%;
  max-width: 700px;
  margin: 20px auto;

  font-family: var(--im-font);
  font-size: var(--im-font-size);
  color: var(--im-text);

  background: var(--im-bg-modal);
  border-radius: var(--im-radius);
  box-shadow: var(--im-shadow);

  transform: scale(0.96);
  transition: transform 0.2s linear;
  padding: 0;
}
body.remodal_active .remodal {
  transform: scale(1);
}

/* ==========================================================================
   En-tête / Corps / Pied
   ========================================================================== */
.remodal .im-simple-header {
  margin: 0;
  padding: 14px 20px;
  background: var(--im-bg-contrast);
  color: var(--im-text);
  font-weight: 600;
  font-size: 16px;
  text-align: left;
  border-top-left-radius: var(--im-radius);
  border-top-right-radius: var(--im-radius);
  border-bottom: 1px solid var(--im-border);
}

.remodal .grid,
.remodal .im-modal__body {
  background: var(--im-bg-modal);
  padding: 20px;
}

.remodal .buttons,
.remodal .im-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px;
  background: var(--im-bg-contrast);
  border-top: 1px solid var(--im-border);
  border-bottom-left-radius: var(--im-radius);
  border-bottom-right-radius: var(--im-radius);
}

.remodal hr {
  border: 0;
  height: 1px;
  background: var(--im-border);
  margin: 14px 0;
}

/* ==========================================================================
   Champs de formulaire – style plat
   ========================================================================== */
.remodal input,
.remodal select,
.remodal textarea {
  background: var(--im-bg-modal) !important;
  border: none;
  border-bottom: 1px solid var(--im-border);
  border-radius: 0;
  padding: 6px 4px;
  width: 100%;
  font-size: 14px;
  color: var(--im-text);
  outline: none;
  transition: border-color 0.15s ease;
}

.remodal input::placeholder,
.remodal select::placeholder,
.remodal textarea::placeholder {
  color: var(--im-placeholder);
  opacity: 1;
}

.remodal input:focus,
.remodal select:focus,
.remodal textarea:focus {
  border-bottom: 1px solid var(--im-focus);
  background: var(--im-bg-modal) !important;
  box-shadow: none;
}

.remodal input[disabled],
.remodal select[disabled],
.remodal textarea[disabled] {
  color: var(--im-placeholder);
  border-bottom: 1px dashed var(--im-border);
  background: var(--im-bg-modal) !important;
  cursor: not-allowed;
}

/* ==========================================================================
   Boutons
   ========================================================================== */
.remodal .btn,
.remodal .remodal-confirm,
.remodal .remodal-cancel,
.remodal .button-confirm,
.remodal .button-delete {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 112px;
  padding: 10px 16px;

  font-weight: 600;
  font-size: 14px;

  border: 1px solid transparent;
  border-radius: 6px;
  box-shadow: var(--im-card-shadow);

  cursor: pointer;
  transition: transform 0.04s ease, box-shadow 0.15s ease,
    background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Primaire */
.remodal .remodal-confirm,
.remodal .button-confirm {
  background: var(--im-primary);
  color: #fff;
  border-color: var(--im-primary);
}
.remodal .remodal-confirm:hover,
.remodal .button-confirm:hover {
  background: var(--im-primary-hover);
  border-color: var(--im-primary-hover);
  box-shadow: 0 2px 10px var(--im-primary-shadow);
}
.remodal .remodal-confirm:active,
.remodal .button-confirm:active {
  transform: translateY(1px);
}

/* Secondaire */
.remodal .remodal-cancel {
  background: #eef1f5;
  color: var(--im-text);
  border: 1px solid var(--im-border);
}
.remodal .remodal-cancel:hover {
  background: #e6eaf0;
  border-color: #d6dae2;
}
.remodal .remodal-cancel:active {
  transform: translateY(1px);
}

/* Danger */
.remodal .button-delete {
  background: var(--im-danger);
  color: #fff;
  border-color: var(--im-danger);
}
.remodal .button-delete:hover {
  background: var(--im-danger-hover);
  border-color: var(--im-danger-hover);
  box-shadow: 0 2px 10px var(--im-danger-shadow);
}
.remodal .button-delete:active {
  transform: translateY(1px);
}

/* ==========================================================================
   Bouton de fermeture (X)
   ========================================================================== */
.remodal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 30px;
  height: 30px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;

  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}
.remodal-close:after {
  font-family: Arial, sans-serif !important;
  font-size: 22px;
  line-height: 1;
  content: "×";
  color: #3e5368;
}
.remodal-close:hover {
  background: #e8ebf0;
  border-color: #e1e4ea;
}
.remodal-close:hover:after {
  color: #253144;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 640px) {
  .remodal {
    margin: 12px auto;
  }
  .remodal .im-simple-header {
    padding: 12px 14px;
  }
  .remodal .grid,
  .remodal .im-modal__body {
    padding: 14px;
  }
  .remodal .buttons,
  .remodal .im-modal__footer {
    padding: 10px 14px;
    gap: 8px;
  }
  .remodal .btn,
  .remodal .remodal-confirm,
  .remodal .remodal-cancel {
    min-width: 96px;
    padding: 10px 12px;
  }
}