* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;

  font-family: "Manrope", sans-serif;

  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(201, 158, 82, 0.08),
      transparent 28%
    ),
    #f4eee4;

  color: #102238;
}


/* ==========================
   NAVBAR
========================== */

.questionnaire-navbar {
  height: 92px;

  padding: 0 6%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: #071a2d;

  border-bottom:
    1px solid rgba(199, 155, 75, 0.65);
}

.questionnaire-logo {
  width: 225px;
  height: auto;
  display: block;
}

.close-questionnaire {
  display: flex;
  align-items: center;

  gap: 10px;

  font-size: 12px;
  letter-spacing: 1px;

  color: rgba(255, 255, 255, 0.72);

  text-decoration: none;

  transition: 0.25s ease;
}

.close-questionnaire span {
  font-size: 24px;

  color: #c69a4a;
}

.close-questionnaire:hover {
  color: white;
}


/* ==========================
   PAGE
========================== */

.questionnaire-page {
  padding: 42px 20px 55px;
}

.questionnaire-wrapper {
  width: 100%;
  max-width: 1000px;

  margin: 0 auto;
}


/* ==========================
   PROGRESSION
========================== */

.progress-top {
  margin-bottom: 25px;

  padding: 0 5px;
}

.progress-info {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 11px;

  font-size: 11px;

  letter-spacing: 0.8px;

  color: #796e5e;
}

#step-text {
  font-weight: 600;

  color: #a47731;
}

.progress-track {
  width: 100%;
  height: 3px;

  overflow: hidden;

  border-radius: 20px;

  background: rgba(17, 39, 61, 0.12);
}

.progress-fill {
  width: 16.66%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      #a7772f,
      #d6af62
    );

  transition: width 0.45s ease;
}

.progress-labels {
  display: grid;
  grid-template-columns: repeat(6, 1fr);

  margin-top: 10px;
}

.progress-label {
  text-align: center;

  font-size: 9px;
  letter-spacing: 0.7px;

  color: #a6a095;

  transition: 0.3s ease;
}

.progress-label:first-child {
  text-align: left;
}

.progress-label:last-child {
  text-align: right;
}

.progress-label.active {
  color: #a97b34;
}


/* ==========================
   GRANDE CARTE
========================== */

.question-card {
  min-height: 600px;

  padding: 55px 68px 40px;

  background:
    rgba(250, 247, 240, 0.93);

  border:
    1px solid rgba(185, 140, 65, 0.2);

  border-radius: 18px;

  box-shadow:
    0 20px 55px rgba(29, 32, 34, 0.08);
}


/* ==========================
   QUESTIONS
========================== */

.question-step {
  display: none;

  animation:
    questionFade 0.35s ease;
}

.question-step.active {
  display: block;
}

@keyframes questionFade {

  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}

.question-kicker {
  display: block;

  margin-bottom: 16px;

  font-size: 11px;
  font-weight: 500;

  letter-spacing: 2.8px;

  color: #af8034;
}

.question-step h1 {
  max-width: 700px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 54px;
  font-weight: 500;

  line-height: 1;

  letter-spacing: -0.7px;

  color: #102238;
}

.question-description {
  max-width: 620px;

  margin-top: 18px;

  font-size: 14px;

  line-height: 1.65;

  color: #69717a;
}


/* ==========================
   RÉPONSES
========================== */

.choices-grid {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 13px;

  margin-top: 35px;
}

.choice-card {
  min-height: 72px;

  padding: 16px 19px;

  display: flex;
  align-items: center;

  gap: 16px;

  text-align: left;

  cursor: pointer;

  border:
    1px solid rgba(154, 126, 80, 0.22);

  border-radius: 7px;

  background:
    rgba(255, 255, 255, 0.62);

  font-family: "Manrope", sans-serif;

  color: #233448;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border 0.2s ease,
    box-shadow 0.2s ease;
}

.choice-card:hover {
  transform: translateY(-2px);

  border-color:
    rgba(174, 126, 48, 0.5);

  box-shadow:
    0 9px 22px rgba(30, 33, 36, 0.06);
}

.choice-number {
  width: 34px;
  height: 34px;

  flex-shrink: 0;

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

  border:
    1px solid rgba(178, 131, 53, 0.55);

  border-radius: 50%;

  font-family:
    "Cormorant Garamond",
    serif;

  color: #9d722d;
}

.choice-title {
  font-size: 14px;

  font-weight: 500;
}


/* SÉLECTION */

.choice-card.selected {
  background: #0a2037;

  border-color: #b8893c;

  color: #d7b365;

  box-shadow:
    0 10px 26px rgba(7, 26, 45, 0.12);
}

.choice-card.selected
.choice-number {
  border-color:
    rgba(215, 179, 101, 0.85);

  color: #d7b365;
}


/* ==========================
   CONTACT
========================== */

.contact-form {
  max-width: 650px;

  margin-top: 35px;
}

.input-group {
  margin-bottom: 20px;
}

.input-group label {
  display: block;

  margin-bottom: 8px;

  font-size: 11px;
  font-weight: 500;

  letter-spacing: 0.8px;

  color: #8b6730;
}

.input-group input {
  width: 100%;

  padding: 15px 16px;

  outline: none;

  border:
    1px solid rgba(154, 126, 80, 0.3);

  border-radius: 6px;

  background:
    rgba(255, 255, 255, 0.75);

  font-family: "Manrope", sans-serif;

  font-size: 14px;

  color: #16283c;

  transition: 0.2s ease;
}

.input-group input:focus {
  border-color: #b5873b;

  box-shadow:
    0 0 0 3px
    rgba(181, 135, 59, 0.08);
}


/* ==========================
   BOUTONS BAS
========================== */

.question-navigation {
  margin-top: 44px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-top:
    1px solid rgba(164, 135, 88, 0.13);

  padding-top: 24px;
}

.back-btn,
.next-btn {
  border: none;
  cursor: pointer;

  font-family:
    "Manrope",
    sans-serif;
}

.back-btn {
  padding: 12px 0;

  background: transparent;

  font-size: 12px;

  color: #7d756b;
}

.back-btn:hover {
  color: #172a3e;
}

.next-btn {
  min-width: 185px;

  padding: 15px 21px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 25px;

  border:
    1px solid #b98b40;

  border-radius: 4px;

  background: #071a2d;

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

  letter-spacing: 1.1px;

  color: #c99d50;

  transition: 0.25s ease;
}

.next-btn:hover {
  transform: translateY(-2px);

  background: #0b243d;
}


/* ==========================
   FOOTER
========================== */

.questionnaire-footer {
  padding-top: 20px;

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

  gap: 12px;

  font-size: 9px;
  letter-spacing: 0.7px;

  color: #948b7f;
}


/* ==========================
   MOBILE
========================== */

@media (max-width: 700px) {

  .questionnaire-navbar {
    height: 76px;

    padding: 0 20px;
  }

  .questionnaire-logo {
    width: 170px;
  }

  .questionnaire-page {
    padding:
      25px 12px
      35px;
  }

  .progress-labels {
    display: none;
  }

  .question-card {
    min-height: 0;

    padding:
      38px 24px
      28px;
  }

  .question-step h1 {
    font-size: 43px;
  }

  .choices-grid {
    grid-template-columns:
      1fr;
  }

  .question-navigation {
    gap: 20px;
  }

  .next-btn {
    min-width: 155px;
  }

  .questionnaire-footer {
    flex-wrap: wrap;

    line-height: 1.7;
  }

}