/**
 * Quiz d'orientation 23 Juin — styles autonomes, scopés sous .vtjoffers-quiz / .vtjoffers-quiz-modal.
 *
 * Les couleurs et la typo consomment directement les tokens de la charte 23 Juin exposés en
 * variables globales (`:root, :host`) par le thème (vtj/assets/dist/css/main.css) : --color-primary,
 * --color-foreground, etc. Le quiz suit donc automatiquement un rebranding du thème. Chaque var()
 * a en repli la valeur réelle de la charte, pour rester correct si le quiz est rendu hors thème.
 * Pour forcer une couleur d'accent spécifique au quiz, surcharger --vtjoffers-quiz-accent.
 */

.vtjoffers-quiz {
  --vtjoffers-quiz-accent: var(--color-primary, hsl(18 55% 50%));
  --vtjoffers-quiz-accent-contrast: var(--color-primary-fg, hsl(36 100% 98%));
  --vtjoffers-quiz-bg: var(--color-background, hsl(36 100% 98%));
  --vtjoffers-quiz-border: var(--color-border, hsl(192 10% 85%));
  --vtjoffers-quiz-text: var(--color-foreground, hsl(214 39% 28%));
  --vtjoffers-quiz-muted: var(--color-muted-fg, hsl(219 25% 38%));
  --vtjoffers-quiz-radius: 14px;

  box-sizing: border-box;
  max-width: 640px;
  margin: 0 auto;
  color: var(--vtjoffers-quiz-text);
  font-family: inherit;
  line-height: 1.5;
}

.vtjoffers-quiz *,
.vtjoffers-quiz *::before,
.vtjoffers-quiz *::after {
  box-sizing: border-box;
}

/* Progression -------------------------------------------------------------- */

.vtjoffers-quiz__progress {
  height: 6px;
  width: 100%;
  background: var(--vtjoffers-quiz-border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.vtjoffers-quiz__progress-bar {
  height: 100%;
  width: 0;
  background: var(--vtjoffers-quiz-accent);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.vtjoffers-quiz__step {
  margin: 0 0 0.6rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--vtjoffers-quiz-muted);
}

.vtjoffers-quiz__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-family-serif, 'Fraunces', Georgia, serif);
  font-size: 1.4rem;
  line-height: 1.25;
}

.vtjoffers-quiz__help {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: var(--vtjoffers-quiz-muted);
}

/* Options ------------------------------------------------------------------ */

.vtjoffers-quiz__options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1.25rem 0;
}

.vtjoffers-quiz__option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--vtjoffers-quiz-border);
  border-radius: var(--vtjoffers-quiz-radius);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.vtjoffers-quiz__option:hover {
  border-color: var(--vtjoffers-quiz-accent);
}

.vtjoffers-quiz__option.is-selected {
  border-color: var(--vtjoffers-quiz-accent);
  background: color-mix(in srgb, var(--vtjoffers-quiz-accent) 7%, transparent);
}

.vtjoffers-quiz__option input {
  margin: 0.2rem 0 0;
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--vtjoffers-quiz-accent);
}

.vtjoffers-quiz__option-label {
  flex: 1;
}

/* Navigation --------------------------------------------------------------- */

.vtjoffers-quiz__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1.5rem;
}

/* Boutons : on réutilise les boutons du thème (btn-hero / btn-hero-outline). Le quiz ne gère
   par-dessus que le calage dans la nav et l'état désactivé du bouton « Suivant ». NB : le quiz
   dépend donc du thème pour le style des boutons (acceptable : il ne tourne que sur le site). */
.vtjoffers-quiz__nav .btn-hero-outline {
  margin-right: auto; /* repousse le CTA primaire à droite quand le secondaire est avant */
}

.vtjoffers-quiz__nav .btn-hero[disabled],
.vtjoffers-quiz__nav .btn-hero.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* Résultat ----------------------------------------------------------------- */

.vtjoffers-quiz__result-intro {
  margin: 0 0 0.6rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--vtjoffers-quiz-accent);
}

.vtjoffers-quiz__result-text {
  margin: 0.25rem 0 0;
  color: var(--vtjoffers-quiz-muted);
  white-space: pre-line; /* respecte les retours à la ligne (\n) des descriptions de résultat */
}

.vtjoffers-quiz__noscript a {
  color: var(--vtjoffers-quiz-accent);
}

/* Demande de rappel intégrée ----------------------------------------------- */

.vtjoffers-quiz__recall-link {
  display: block;
  width: fit-content;
  margin: 1rem auto 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--vtjoffers-quiz-muted);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.vtjoffers-quiz__recall-link:hover {
  color: var(--vtjoffers-quiz-accent);
}

.vtjoffers-quiz-recall__back {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0.75rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--vtjoffers-quiz-muted);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.vtjoffers-quiz-recall__back::before {
  content: "\2190"; /* flèche gauche */
  margin-right: 0.4rem;
}

.vtjoffers-quiz-recall__back:hover {
  color: var(--vtjoffers-quiz-accent);
}

/* Écran de confirmation après envoi du rappel ------------------------------ */

.vtjoffers-quiz-recall__done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.1rem;
  padding: 2.5rem 1rem 2rem;
}

.vtjoffers-quiz-recall__done-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--vtjoffers-quiz-accent) 14%, transparent);
  color: var(--vtjoffers-quiz-accent);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}

.vtjoffers-quiz-recall__done-text {
  margin: 0;
  max-width: 32ch;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--vtjoffers-quiz-text);
}

/* CTA bouton (mode="button") ----------------------------------------------- */

.vtjoffers-quiz-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.6rem;
  border: none;
  border-radius: 999px;
  background: var(--color-primary, hsl(18 55% 50%));
  color: var(--color-primary-fg, hsl(36 100% 98%));
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.vtjoffers-quiz-cta:hover {
  opacity: 0.9;
}

/* Modale -------------------------------------------------------------------- */

body.vtjoffers-quiz-locked {
  overflow: hidden;
}

.vtjoffers-quiz-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.vtjoffers-quiz-modal[hidden] {
  display: none;
}

.vtjoffers-quiz-modal__overlay {
  position: absolute;
  inset: 0;
  background: hsl(214 39% 14% / 0.55);
}

.vtjoffers-quiz-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-background, hsl(36 100% 98%));
  border-radius: 18px;
  /* Top réduit pour que le libellé d'étape (1er élément du contenu) s'aligne avec le bouton
     de fermeture (positionné à top: 0.75rem). */
  padding: 1.5rem 2rem 2rem;
  box-shadow: 0 25px 60px hsl(214 39% 14% / 0.25);
}

.vtjoffers-quiz-modal__dialog:focus {
  outline: none;
}

.vtjoffers-quiz-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  width: 2.2rem;
  height: 2.2rem;
  border: none;
  background: transparent;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--color-muted-fg, hsl(219 25% 38%));
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 0.15s ease;
}

.vtjoffers-quiz-modal__close:hover {
  background: hsl(214 39% 28% / 0.08);
}

@media (max-width: 600px) {
  .vtjoffers-quiz-modal__dialog {
    padding: 1.5rem 1.25rem 1.5rem;
  }

  .vtjoffers-quiz__nav .btn-hero,
  .vtjoffers-quiz__nav .btn-hero-outline {
    flex: 1;
  }

  .vtjoffers-quiz__nav .btn-hero-outline {
    margin-right: 0;
  }
}