/*****************************************************************************/
/* Module « Suppression de compte » — Figma node 367:5173                    */
/*                                                                           */
/* La page reprend le hero de la landing (main.css) en toile de fond, voilé,  */
/* avec la carte modale par-dessus. Toutes les valeurs viennent de la         */
/* maquette 1920x1150 : carte 554x341 à (683, 397), gouttières internes 92px. */
/*****************************************************************************/

/* Le fond est décoratif : ni cliquable, ni atteignable au clavier. */
.backdrop {
  pointer-events: none;
}

.modalScrim {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background-color: rgba(0, 0, 0, 0.415);
}

.modalCard {
  position: relative;
  width: min(34.625rem, 100%);                                                  /* 554px */
  max-height: 100%;
  overflow-y: auto;
  padding: 2.5625rem 5.75rem 3.125rem;                                          /* 41px / 92px / 50px */
  border-radius: 1.125rem;                                                      /* 18px */
  background-color: #fff;
  box-shadow: 0 3px 30px 0 rgba(0, 0, 0, 0.16);
  text-align: center;
}

/* Boîte de 27px ; le SVG déborde à 67px à cause de son ombre portée. */
.modalClose {
  position: absolute;
  top: 1.0625rem;                                                               /* 17px */
  right: 1.125rem;                                                              /* 18px */
  width: 1.6875rem;                                                             /* 27px */
  height: 1.6875rem;
  text-decoration: none;
}

.modalClose img {
  position: absolute;
  left: -74.07%;
  top: -62.96%;
  width: 248.15%;
  height: 248.15%;
}

.modalTitle {
  font-family: var(--ff-display);
  font-size: 1.125rem;                                                          /* 18px */
  font-weight: 700;
  line-height: 1.26;
  color: #021C36;
}

.modalText {
  max-width: 21.625rem;                                                         /* 346px */
  margin: 1.0625rem auto 0;                                                     /* 17px */
  font-size: 0.9375rem;                                                         /* 15px */
  font-weight: 400;
  line-height: 1.2;                                                             /* 18px */
  color: rgba(65, 78, 96, 0.59);
}

#supportform {
  margin-top: 1.625rem;                                                         /* 26px */
  text-align: left;
}

.modalLabel {
  display: block;
  font-size: 0.8125rem;                                                         /* 13px */
  font-weight: 500;
  line-height: 1.54;                                                            /* 20px */
  color: #021C36;
}

.modalInput {
  display: block;
  width: 100%;
  height: 3.375rem;                                                             /* 54px */
  margin-top: 0.3125rem;                                                        /* 5px  */
  padding: 0 1.375rem;                                                          /* 22px */
  border: none;
  outline: none;
  border-radius: 0.4375rem;                                                     /* 7px  */
  background-color: rgba(2, 28, 54, 0.04);
  font-family: var(--ff-global, 'Poppins', sans-serif);
  font-size: 0.875rem;                                                          /* 14px */
  font-weight: 500;
  color: #021C36;
}

.modalInput::placeholder {
  color: rgba(2, 28, 54, 0.25);
}

.modalInput:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(71, 101, 37, 0.45);
}

/* Absent de la maquette, mais requis par le script (grecaptcha.getResponse). */
#recaptcha {
  margin-top: 1.6875rem;                                                        /* 27px */
}

.modalBtn {
  display: block;
  width: 100%;
  height: 2.6106rem;                                                            /* 41.768px */
  margin-top: 1.6875rem;                                                        /* 27px */
  border: none;
  border-radius: 0.375rem;                                                      /* 6px  */
  background-color: var(--green, #476525);
  cursor: pointer;
  font-family: var(--ff-global, 'Poppins', sans-serif);
  font-size: 0.875rem;                                                          /* 14px */
  font-weight: 600;
  letter-spacing: -0.015em;                                                      /* -0.21px */
  color: #fff;
}

.modalBtn:hover {
  background-color: #3B5420;
}

/**********************************/
/*********** MediaQuery ***********/
/**********************************/
/* Sous 640px les 92px de gouttière ne laissent plus la place au reCAPTCHA
   (304px de large) : on les réduit à 20px. */
@media screen and (max-width: 640px) {
  .modalScrim {
    padding: 1rem;
  }

  .modalCard {
    padding: 2rem 1.25rem 2.25rem;
  }
}