/* ── VARIABLES SCINDÉES POUR LE QUIZ ── */
.quiz-wrapper {
  --quiz-card:       #FDFAF6;
  --quiz-ink:        #005074;
  --quiz-ink-soft:   #5A4A3E;
  --quiz-ink-light:  #7C6A5E;
  --quiz-border:     #D9CFC4;
  --quiz-muted:      #B0A090;
  --quiz-accent:     #F0A61F;
  --quiz-accent2:    #C4956A;
  --quiz-teal:       #8FA89E;
  --quiz-highlight:  #F0A61F;

  font-family: 'Lato', sans-serif;
  color: var(--quiz-ink);
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 2rem 1rem;
}

/* Isolation du CSS pour éviter les conflits avec ton site */
.quiz-wrapper * {
  box-sizing: border-box;
  margin: 0; 
  padding: 0;
}

/* ── CARD ── */
.quiz-card {
  background: var(--quiz-card);
  border-radius: 8px; /* Légèrement plus arrondi pour un look moderne */
  box-shadow: 0 4px 40px rgba(80,60,40,.08), 0 1px 4px rgba(80,60,40,.04);
  width: 100%;
  max-width: 680px;
  padding: 3rem 3.5rem;
  position: relative;
  overflow: hidden;
}

.quiz-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--quiz-accent), var(--quiz-accent2), var(--quiz-teal));
}

/* ── TYPOGRAPHY ── */
.quiz-wrapper .eyebrow {
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--quiz-accent);
  margin-bottom: 1.5rem;
  display: block;
  font-weight: 700;
}
.quiz-wrapper h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  color: var(--quiz-ink);
  line-height: 1.25;
  margin-bottom: .75rem;
}
.quiz-wrapper h2.subtitle {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.1rem, 2.5vw, 1.25rem);
  color: var(--quiz-ink-light);
  font-weight: 400;
  font-style: italic;
  line-height: 1.55;
  margin-bottom: 2rem;
}
.quiz-wrapper h2.question-text {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  color: var(--quiz-ink);
  line-height: 1.4;
  margin-bottom: 2rem;
  font-weight: 600;
}
.quiz-wrapper p { font-size: 1rem; color: var(--quiz-ink-soft); line-height: 1.7; margin-bottom: 1rem; }
.quiz-wrapper .ornament { color: var(--quiz-accent2); font-size: 1.1rem; letter-spacing: .3em; display: block; margin: 1rem 0; opacity: .6; text-align: center; }

/* ── PROGRESS ── */
.quiz-wrapper .progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
.quiz-wrapper .q-label { font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; color: var(--quiz-accent); font-weight: 700; }
.quiz-wrapper .q-pct { font-size: .75rem; color: var(--quiz-muted); font-weight: 700; }
.quiz-wrapper .progress-bar { width: 100%; height: 4px; background: #E8DDD4; border-radius: 4px; margin-bottom: 2.5rem; overflow: hidden; }
.quiz-wrapper .progress-fill { height: 100%; background: linear-gradient(90deg, var(--quiz-accent), var(--quiz-accent2)); border-radius: 4px; transition: width .4s ease; }

/* ── ANSWERS ── */
.quiz-wrapper .answers { display: flex; flex-direction: column; gap: 1rem; }
.quiz-wrapper .answer-btn {
  background: transparent;
  border: 1.5px solid var(--quiz-border);
  border-radius: 6px;
  padding: 1.2rem 1.4rem;
  text-align: left;
  cursor: pointer;
  font-family: 'Lato', sans-serif;
  font-size: 0.95rem;
  color: var(--quiz-ink);
  line-height: 1.5;
  transition: all .2s ease;
  display: flex;
}
.quiz-wrapper .answer-btn:hover { border-color: var(--quiz-accent); background: var(--quiz-highlight); transform: translateX(4px); }
.quiz-wrapper .answer-btn.selected { border-color: var(--quiz-accent); background: var(--quiz-highlight); color: #7A3A1A; font-weight: 700; border-width: 2px; }
.quiz-wrapper .answer-letter { color: var(--quiz-accent); font-weight: 700; margin-right: .8rem; }

/* ── BUTTONS ── */
.quiz-wrapper .btn-primary, .quiz-wrapper .btn-cta {
  font-family: 'Lato', sans-serif;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px;
  border: none;
  font-weight: 700;
  transition: all .2s ease;
}
.quiz-wrapper .btn-primary {
  background: var(--quiz-ink);
  color: var(--quiz-card);
  padding: 1rem 2.5rem;
  font-size: .85rem;
  letter-spacing: .1em;
}
.quiz-wrapper .btn-primary:hover:not(:disabled) { background: var(--quiz-accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1);}
.quiz-wrapper .btn-primary:disabled { opacity: .4; cursor: not-allowed; }

.quiz-wrapper .btn-cta {
  background: var(--quiz-accent);
  color: var(--quiz-card);
  padding: 1.2rem 2.8rem;
  font-size: .9rem;
  letter-spacing: .1em;
  display: inline-block;
  text-decoration: none;
}
.quiz-wrapper .btn-cta:hover { background: #A85C38; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(196,113,74,.3); }
.quiz-wrapper .btn-row { display: flex; justify-content: flex-end; margin-top: 2rem; }

/* ── INPUTS ── */
.quiz-wrapper .field {
  width: 100%;
  border: 1.5px solid var(--quiz-border);
  border-radius: 4px;
  padding: 1rem 1.2rem;
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  color: var(--quiz-ink);
  background: var(--quiz-card);
  margin-bottom: 1rem;
  outline: none;
  transition: border-color .2s;
}
.quiz-wrapper .field:focus { border-color: var(--quiz-accent); }

/* ── RESULT CARD ── */
.quiz-wrapper .result-icon { font-size: 3rem; display: block; margin-bottom: .75rem; }
.quiz-wrapper h2.profile-name { font-family: 'Playfair Display', serif; font-size: clamp(1.6rem, 4vw, 2rem); color: var(--quiz-ink); line-height: 1.2; margin-bottom: .5rem; }
.quiz-wrapper .profile-tagline { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-style: italic; margin-bottom: 1.5rem; }
.quiz-wrapper .insight-box { border-left: 4px solid var(--quiz-accent2); padding: 1.5rem; margin: 2rem 0; border-radius: 0 4px 4px 0; background: #F5EDE3; }
.quiz-wrapper .insight-box p { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.05rem; color: var(--quiz-ink); margin: 0; }
.quiz-wrapper .divider { border: none; border-top: 1px solid #E0D4C8; margin: 2.5rem 0; }
.quiz-wrapper .cta-section h3 { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: var(--quiz-ink); margin-bottom: .75rem; }
.quiz-wrapper .footnote { font-size: .8rem; color: var(--quiz-muted); text-align: center; margin-top: 1.5rem; line-height: 1.6; }

/* ── ANIMATIONS ── */
.quiz-wrapper .fade-in { animation: fadeSlide .4s ease forwards; }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

/* ── NOTICES ── */
.quiz-wrapper .sending-notice, .quiz-wrapper .success-notice, .quiz-wrapper .error-notice { text-align: center; padding: 1rem; font-size: .9rem; border-radius: 4px; margin-top: 1rem; font-weight: 600;}
.quiz-wrapper .sending-notice { color: var(--quiz-ink-light); background: #F0EAE2; }
.quiz-wrapper .success-notice { color: #2D5A3C; background: #EAF2EC; }
.quiz-wrapper .error-notice { color: #8B3A2A; background: #F5EAE8; }

/* ── RESPONSIVE MOBILE ── */
@media (max-width: 600px) {
  .quiz-wrapper { padding: 1rem 0.5rem; }
  .quiz-card { padding: 2rem 1.5rem; border-radius: 6px; }
  .quiz-wrapper .btn-row { justify-content: center; }
  .quiz-wrapper .btn-primary { width: 100%; }
}