@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/inter-latin-var.woff2") format("woff2");
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/outfit-latin-var.woff2") format("woff2");
}

:root {
  --bg: #050605;
  --fg: #f4f7f5;
  --muted: #8a948f;
  --line: rgba(255, 255, 255, 0.14);
  /* Trait sous les champs : 3:1 au moins sur le fond (WCAG 1.4.11), pour
     qu'on voie où écrire avant d'avoir cliqué */
  --field-line: rgba(255, 255, 255, 0.4);
  /* Fond des boutons verts : texte blanc à 5:1, le vert de la marque
     (#20a765) n'atteint que 3,1:1 */
  --green-button: #15804c;
  /* Vert de la marque, et sa version claire pour le texte sur fond noir */
  --green: #20a765;
  --green-light: #4fd897;
  --danger: #ff8a7a;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}

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

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

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Halo vert qui respire derrière la page */
.glow {
  position: fixed;
  inset: -20vmax;
  pointer-events: none;
  background: radial-gradient(closest-side at 50% 42%, rgba(32, 167, 101, 0.22), transparent 70%);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 1.6s var(--ease), transform 2.4s var(--ease);
}

body:not(.is-loading) .glow {
  opacity: 1;
  transform: scale(1);
  animation: breathe 9s ease-in-out 2.4s infinite;
}

@keyframes breathe {
  50% { transform: scale(1.08); opacity: 0.75; }
}

/* ---------- Logo ---------- */

/* Absolu, pas fixe : au chargement la page est en haut, le rendu est le
   même ; ensuite le logo défile avec la page au lieu de recouvrir les
   réponses sur les petits écrans. */
.brand {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 50%;
  display: flex;
  transform: translate(-50%, -50%) scale(1.9);
  transition: top 1s var(--ease), transform 1s var(--ease);
}

body.is-ready .brand {
  top: 28px;
  transform: translate(-50%, 0) scale(1);
}

/* La goutte : le PNG sert de masque, un fond sombre dessous et le vert qui
   monte par-dessus. */
.drop {
  position: relative;
  display: block;
  width: 26px;
  height: 36px;
  background: #1b211e;
  -webkit-mask: url("/logo.png") center / contain no-repeat;
  mask: url("/logo.png") center / contain no-repeat;
}

.drop-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--green) 0%, var(--green-light) 100%);
  clip-path: inset(100% 0 0 0);
  animation: fill 1.3s var(--ease) 0.25s forwards;
}

@keyframes fill {
  to { clip-path: inset(0 0 0 0); }
}

/* ---------- Scène ---------- */

/* Calé en haut, pas centré : chaque question a sa hauteur, un bloc centré
   se replacerait à chaque réponse. */
.stage {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  justify-items: center;
  align-items: start;
  padding: clamp(110px, 17vh, 170px) 16px 48px;
}

.quiz,
.load-error {
  position: relative;
  width: 100%;
  max-width: 600px;
}

.quiz {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(8px);
  pointer-events: none;
  transition: opacity 0.9s var(--ease) 0.35s, transform 0.9s var(--ease) 0.35s, filter 0.9s var(--ease) 0.35s;
}

body.is-ready .quiz {
  opacity: 1;
  transform: none;
  filter: none;
  pointer-events: auto;
}

.quiz.is-leaving {
  opacity: 0;
  transform: translateY(-24px) scale(0.98);
  filter: blur(8px);
  transition-delay: 0s;
}

.quiz-head {
  text-align: center;
  margin-bottom: 12px;
}

.counter {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.progress {
  width: 120px;
  margin-left: auto;
  margin-right: auto;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 44px;
}

.progress span {
  display: block;
  height: 100%;
  width: 25%;
  background: linear-gradient(90deg, var(--green), var(--green-light));
  box-shadow: 0 0 12px rgba(79, 216, 151, 0.6);
  transition: width 0.7s var(--ease);
}

.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Questions ---------- */

/* Les étapes se croisent au même endroit ; celle qui part sort du flux,
   pour que la hauteur ne suive que celle qui arrive. */
.steps {
  position: relative;
  display: grid;
}

.step {
  grid-area: 1 / 1;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  opacity: 0;
  filter: blur(6px);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), filter 0.5s var(--ease);
}

.step.from-below,
.step.to-below {
  transform: translateY(36px);
}

.step.from-above,
.step.to-above {
  transform: translateY(-36px);
}

.step.from-below,
.step.from-above {
  transition: none;
}

.step.to-above,
.step.to-below {
  position: absolute;
  inset: 0 0 auto 0;
  pointer-events: none;
}

.step.is-active {
  opacity: 1;
  transform: none;
  filter: none;
  transition-delay: 0.1s;
}

.step:focus {
  outline: none;
}

.hint-line {
  margin: -14px 0 18px;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
}

/* ---------- Réponses à choisir ---------- */

.options {
  display: grid;
  gap: 10px;
}

.option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 54px;
  padding: 12px 16px;
  border: 1px solid var(--field-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--fg);
  font: inherit;
  font-size: 15.5px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: border-color 0.2s, background 0.2s;
  animation: option-in 0.5s var(--ease) forwards;
  animation-delay: calc(0.15s + var(--i) * 0.05s);
}

@keyframes option-in {
  to { opacity: 1; transform: none; }
}

.option:hover {
  border-color: rgba(79, 216, 151, 0.7);
  background: rgba(79, 216, 151, 0.06);
}

.option:focus-visible {
  outline: 2px solid var(--green-light);
  outline-offset: 2px;
}

.option[aria-checked="true"] {
  border-color: var(--green-light);
  background: rgba(79, 216, 151, 0.12);
}

.key {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid var(--field-line);
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.option[aria-checked="true"] .key {
  border-color: var(--green-light);
  background: var(--green-light);
  color: #05140c;
}

.option-label {
  flex: 1;
}

/* Champ libre sous « Autre », replié tant qu'elle n'est pas choisie */
.other-field {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.45s var(--ease), opacity 0.35s var(--ease), margin 0.45s var(--ease);
}

.other-field.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 10px;
}

.step .other-field input {
  min-height: 0;
  overflow: hidden;
  padding: 0 16px;
  border: 1px solid var(--green-light);
  border-radius: 14px;
  background: rgba(79, 216, 151, 0.06);
  background-image: none;
  color: var(--fg);
  font: inherit;
  font-size: 15.5px;
  text-align: left;
  outline: none;
  transition: padding 0.45s var(--ease);
}

.step .other-field.is-open input {
  padding: 14px 16px;
}

.step .other-field input:focus {
  box-shadow: 0 0 0 3px rgba(79, 216, 151, 0.25);
}

/* Coche dessinée à droite de la réponse choisie */
.tick {
  flex: none;
  width: 16px;
  height: 9px;
  margin: 0 4px 4px 0;
  border-left: 2px solid var(--green-light);
  border-bottom: 2px solid var(--green-light);
  transform: rotate(-45deg) scale(0);
  transition: transform 0.35s var(--ease);
}

.option[aria-checked="true"] .tick {
  transform: rotate(-45deg) scale(1);
}

.question {
  display: block;
  padding: 0;
  margin-bottom: 26px;
  font-family: "Outfit", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(23px, 5.6vw, 31px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
  text-align: center;
  width: 100%;
}

.echo-name {
  color: var(--green-light);
}

.optional {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}

.step input {
  width: 100%;
  padding: 10px 0 14px;
  border: 0;
  border-bottom: 1px solid var(--field-line);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: clamp(20px, 5vw, 24px);
  caret-color: var(--green-light);
  text-align: center;
  outline: none;
  /* Le trait vert se dessine sous le champ au focus */
  background-image: linear-gradient(90deg, var(--green), var(--green-light));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 0.6s var(--ease), border-color 0.3s;
}

.step input::placeholder {
  color: #737c77;
}

.step input:focus {
  background-size: 100% 2px;
}

.step.has-error input {
  border-bottom-color: var(--danger);
  animation: shake 0.4s var(--ease);
}

@keyframes shake {
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}

.error {
  min-height: 20px;
  text-align: center;
  margin: 12px 0 0;
  font-size: 13.5px;
  color: var(--danger);
}

/* ---------- Boutons ---------- */

.actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.back {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), border-color 0.2s;
}

.back:hover {
  border-color: rgba(255, 255, 255, 0.35);
}

.back:disabled {
  opacity: 0;
  transform: translateX(-8px);
  pointer-events: none;
}

.next {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  height: 46px;
  padding: 0 20px 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--green-button);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 8px 28px -8px rgba(32, 167, 101, 0.7);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s;
}

.next:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 34px -8px rgba(32, 167, 101, 0.85);
}

.next:active {
  transform: translateY(0) scale(0.98);
}

.next svg {
  transition: transform 0.3s var(--ease);
}

.next:hover svg {
  transform: translateX(3px);
}

/* Reflet qui balaie le bouton */
.next::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transform: translateX(-120%);
}

.next:hover::after {
  transition: transform 0.8s var(--ease);
  transform: translateX(120%);
}

.next.is-hidden {
  visibility: hidden;
  opacity: 0;
}

.next.is-busy {
  pointer-events: none;
  background: #106a3e;
}

.next.is-busy svg {
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.back:focus-visible,
.next:focus-visible,
.home:focus-visible {
  outline: 2px solid var(--green-light);
  outline-offset: 3px;
}

.home {
  color: var(--fg);
  font-size: 14.5px;
  text-underline-offset: 4px;
  text-decoration-color: var(--green);
}

@media (max-width: 480px) {
  .progress {
    margin-bottom: 34px;
  }
}

/* ---------- Chargement raté ---------- */

.load-error {
  text-align: center;
  color: var(--muted);
}

.load-error button {
  display: block;
  margin: 16px auto 0;
  padding: 10px 18px;
  border: 1px solid var(--field-line);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  cursor: pointer;
}

/* ---------- Diagnostic ---------- */

.result {
  width: 100%;
  max-width: 560px;
  text-align: center;
}

.result h1 {
  margin: 0 0 12px;
  font-family: "Outfit", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(30px, 7vw, 42px);
  letter-spacing: -0.01em;
  animation: rise 0.8s var(--ease) both;
}

.result-intro {
  max-width: 460px;
  margin: 0 auto 36px;
  line-height: 1.6;
  color: var(--muted);
  animation: rise 0.8s var(--ease) 0.1s both;
}

.result-intro strong {
  color: var(--fg);
  font-weight: 500;
  overflow-wrap: anywhere;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(20px); filter: blur(8px); }
}

.check {
  width: 76px;
  height: 76px;
  margin-bottom: 24px;
  stroke: var(--green-light);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 18px rgba(79, 216, 151, 0.45));
}

.check circle {
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: draw 0.9s var(--ease) 0.2s forwards;
}

.check path {
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: draw 0.5s var(--ease) 0.9s forwards;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

.result .home {
  animation: rise 0.8s var(--ease) 0.4s both;
}


/* Écrans peu hauts (petits téléphones, paysage) : tout se resserre pour
   que les questions à six réponses tiennent sans défiler, ou presque. */
@media (max-height: 700px) {
  body.is-ready .brand {
    top: 18px;
  }

  .stage {
    padding-top: 78px;
  }

  .progress {
    margin-bottom: 22px;
  }

  .question {
    margin-bottom: 16px;
    font-size: clamp(20px, 5.2vw, 26px);
  }

  .hint-line {
    margin: -8px 0 12px;
  }

  .options {
    gap: 7px;
  }

  .option {
    min-height: 44px;
    padding: 8px 14px;
    font-size: 14.5px;
  }

  .actions {
    margin-top: 10px;
  }
}

/* Mouvement réduit : tout apparaît sans déplacement */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

.result h1:focus {
  outline: none;
}