/* ============================================================
   DESIGN SYSTEM (maquette Figma)
   Fond crème #faffdb · Carte #deedc7 · Texte #134c36
   Titre rouge #930012 · Bouton #930012 · Succès #295135
   ============================================================ */

/* Polices Figma locales → décommentez si vous avez les .woff2
@font-face {
  font-family: 'Eugusto';
  src: url('fonts/Eugusto.woff2') format('woff2');
  font-weight: 400;
}
@font-face {
  font-family: 'Chiron Hei HK';
  src: url('fonts/ChironHeiHK.woff2') format('woff2');
  font-weight: 300;
}
*/

* { box-sizing: border-box; }

html, body {
  min-height: 100%;
  margin: 0;
  background: #faffdb;
}

.page {
  min-height: 100dvh;
  overflow: hidden;
  background: #faffdb;
  color: #134c36;
}

.content {
  position: relative;
  width: min(100%, 1440px);
  min-height: 100dvh;
  margin: 0 auto;
  padding-top: 16.1vh;
}

/* ================= EN-TÊTE ================= */
header {
  position: relative;
  z-index: 2;
  width: 634px;
  margin-left: calc(50% - 515px);
}

h1, button, .status {
  font-family: 'Eugusto', Georgia, serif;
  font-weight: 400;
}

h1 {
  width: 595px;
  margin: 0;
  color: #930012;
  font-size: 48px;
  line-height: 0.835;
  letter-spacing: 0.48px;
}

header > p {
  margin-top: 38px;
  font: 300 24px/1.2 'Chiron Hei HK', 'Segoe UI', sans-serif;
  letter-spacing: 0.24px;
  color: #134c36;
}

/* ================= CARTE FORMULAIRE ================= */
.mail-card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 634px;
  height: 456px;
  margin: 41px 0 0 calc(50% - 515px);
  padding: 46px 74px;
  background: #deedc7;
  border-radius: 12px;
  font-family: 'Chiron Hei HK', 'Segoe UI', sans-serif;
  font-weight: 300;
}

.mail-card > label:first-child {
  font-size: 20px;
  line-height: 0.918;
  letter-spacing: 0.2px;
}

.mail-card > input {
  width: 426px;
  height: 71px;
  margin: 11px 0 23px;
  border: 9px solid #faffdb;
  border-radius: 6px;
  outline: none;
  background: transparent;
  color: #134c36;
  padding: 4px 10px;
  font: 300 18px 'Chiron Hei HK', 'Segoe UI', sans-serif;
}

.mail-card > input::placeholder { color: rgba(19, 76, 54, 0.6); }

.mail-card > input:focus {
  box-shadow: inset 0 0 0 2px #134c36;
}

/* Case RGPD personnalisée */
.consent {
  display: flex;
  width: 385px;
  gap: 14px;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.16px;
}

.consent input {
  flex: 0 0 auto;
  width: 25px;
  height: 26px;
  margin: 0;
  appearance: none;
  background: #faffdb;
  border-radius: 4px;
  cursor: pointer;
}

.consent input:checked::after {
  display: block;
  content: '✓';
  color: #134c36;
  font: bold 21px/25px sans-serif;
  text-align: center;
}

/* ================= BOUTON & STATUT ================= */
button, .status {
  width: 271px;
  height: 67px;
  border: 0;
  border-radius: 9px;
  color: #faffdb;
  text-align: center;
}

button {
  margin: 27px auto 0;
  background: #930012;
  font-size: 24px;
  line-height: 0.835;
  letter-spacing: 0.24px;
  cursor: pointer;
  transition: filter 0.15s;
}

button:hover:not(:disabled) { filter: brightness(1.15); }
button:disabled { cursor: wait; opacity: 0.8; }

.status {
  display: none;
  margin: auto;
  padding-top: 13px;
  background: #295135;
  font-size: 18px;
  letter-spacing: 0.16px;
  text-align: center;

}

.status.visible { display: block; }
.status.error { background: #930012; }

/* ================= ILLUSTRATION ================= */
.illustration {
  position: absolute;
  z-index: 3;
  top: 15.8vh;
  left: calc(50% - 152px);
  width: 748px;
  height: 862px;
  pointer-events: none;
}

.illustration img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ================= MOBILE ================= */
@media (max-width: 800px) {
  .content { min-height: 1000px; padding-top: 84px; }

  header { width: 308px; margin-left: calc(50% - 154px); }

  h1 { width: 290px; font-size: 40px; letter-spacing: 0.4px; }

  header > p {
    width: 237px;
    margin-top: 14px;
    font-size: 15px;
    letter-spacing: 0.15px;
  }

  .mail-card {
    width: 308px;
    height: 491px;
    margin: 15px 0 0 calc(50% - 154px);
    padding: 26px 16px;
  }

  .mail-card > label:first-child { font-size: 15px; letter-spacing: 0.15px; }

  .mail-card > input {
    width: 276px;
    height: 43px;
    margin: 7px 0 22px;
    border-width: 5px;
  }

  .consent { width: 252px; gap: 10px; font-size: 11px; letter-spacing: 0.11px; }
  .consent input { width: 16px; height: 16px; }
  .consent input:checked::after { font-size: 14px; line-height: 16px; }

  button { width: 176px; height: 41px; margin-top: 21px; font-size: 16px; }

  .status {
    width: 176px;
    height: 43px;
    margin: 10px 0 0 calc(50% - 154px + (308px - 176px) / 2);
    padding-top: 10px;
    font-size: 13px;
  }

  /* Illustration visible aussi sur mobile, en plus petit */
  .illustration {
    top: auto;
    bottom: 0;
    left: 45%;
    transform: translateX(-50%);
    width: 550px;
    height: 550px;
  }
}