/* ==========================================================================
   MonVoyage — page questionnaire (complément de style.css)
   ========================================================================== */

/* --- Hero de la page ----------------------------------------------------- */
.hero--quiz{min-height:clamp(320px,24vw,420px);padding-bottom:70px}
.hero--quiz .hero__inner{padding:44px 0 56px}
.hero--quiz .eyebrow{color:var(--gold)}
.hero__script--quiz{right:2.5%;top:24%;max-width:230px;text-align:right;font-size:1.35rem}

/* --- Carte du questionnaire ---------------------------------------------- */
.quiz-shell{background:linear-gradient(180deg,#eaf5fb 0%,#f6fbfd 100%);padding:0 0 54px}
.quiz-card{
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  padding:30px 34px 34px;margin-top:-56px;position:relative;z-index:5;
}

.quiz-progress{display:flex;align-items:center;gap:16px;font-size:.84rem;color:var(--muted)}
.quiz-progress__label{font-weight:500;color:var(--navy);white-space:nowrap}
.quiz-progress__bar{flex:1;height:9px;background:#e4eef5;border-radius:999px;overflow:hidden}
.quiz-progress__bar span{display:block;height:100%;width:5%;border-radius:999px;background:linear-gradient(90deg,var(--blue),#3ba0dc);transition:width .28s ease}
.quiz-progress__pct{font-weight:600;color:var(--navy);white-space:nowrap}

.quiz-head{display:flex;gap:18px;align-items:flex-start;margin:28px 0 24px}
.quiz-head__icon{
  width:62px;height:62px;border-radius:var(--r);background:var(--sky-2);color:var(--navy);
  display:grid;place-items:center;flex:none;
}
.quiz-head__icon svg{width:29px;height:29px}
.quiz-head .eyebrow{color:var(--blue);letter-spacing:.2em;margin-bottom:4px}
.quiz-question{margin:0 0 6px;font-size:clamp(1.4rem,2.2vw,1.9rem)}
.quiz-question__num{color:var(--navy)}
.quiz-hint{color:var(--muted);font-size:.93rem;margin:0}

.options{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.options--plain{grid-template-columns:repeat(2,1fr);max-width:900px;margin:0 auto}

.option{
  position:relative;display:flex;flex-direction:column;text-align:left;
  background:#fff;border:1.5px solid var(--border);border-radius:var(--r);
  padding:0 0 16px;cursor:pointer;transition:.18s;overflow:hidden;font:inherit;color:inherit;
}
.option:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#a8cfe6}
.option[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,184,94,.28)}
.option__media{aspect-ratio:6/5;overflow:hidden;background:var(--sky)}
.option__media img{width:100%;height:100%;object-fit:cover;transition:.4s}
.option:hover .option__media img{transform:scale(1.05)}
.option__body{display:flex;gap:11px;align-items:flex-start;padding:16px 16px 0;flex:1}
.option--plain .option__body{padding:18px 16px 0}
.option__pick{
  display:flex;align-items:center;gap:10px;padding:14px 16px 0;margin-top:auto;
  font-size:.85rem;color:var(--muted);
}
.option[aria-pressed="true"] .option__pick{color:var(--navy);font-weight:500}
.option__dot{
  width:22px;height:22px;border-radius:50%;border:2px solid #c2d6e4;flex:none;
  display:grid;place-items:center;transition:.18s;
}
.option__dot::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--gold);transform:scale(0);transition:.18s}
.option[aria-pressed="true"] .option__dot{border-color:var(--gold)}
.option[aria-pressed="true"] .option__dot::after{transform:scale(1)}

.option__sub{display:block;font-weight:600}
.option strong{display:block;font-size:.95rem;font-weight:600;color:var(--navy);line-height:1.3}
.option p{font-size:.8rem;color:var(--muted);margin:6px 0 0;line-height:1.45}

.quiz-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:30px}
.quiz-skip{
  margin-left:auto;margin-right:14px;border:0;background:transparent;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;font-size:.88rem;font-weight:500;color:var(--navy);
}
.quiz-skip svg{width:16px;height:16px}
.quiz-skip:hover{color:var(--blue)}

.didyouknow{
  display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  background:var(--sky);border-radius:var(--r-lg);padding:22px 26px;margin-top:22px;
}
.didyouknow__disc{width:52px;height:52px;border-radius:50%;background:#fff;color:var(--gold-600);display:grid;place-items:center;flex:none}
.didyouknow__disc svg{width:26px;height:26px}
.didyouknow h3{margin:0 0 4px;font-size:1.08rem}
.didyouknow p{margin:0;font-size:.85rem;color:var(--muted);line-height:1.5}
.didyouknow__script{color:var(--blue);font-size:1.35rem;text-align:center;max-width:230px;transform:rotate(-3deg);margin:0}
.quiz-nav .btn[disabled]{opacity:.4;pointer-events:none}

/* --- Bande de réassurance ------------------------------------------------ */
.trust{background:var(--sky);padding:24px 0}
.trust__grid{display:flex;align-items:center;justify-content:space-between;gap:20px}
.trust__item{display:flex;gap:12px;align-items:center;padding-right:20px;flex:1;min-width:0}
.trust__item+.trust__item{border-left:1px solid #cfe2ee;padding-left:20px}
.trust__item svg{width:30px;height:30px;color:var(--navy);flex:none}
.trust__item strong{display:block;font-size:.85rem;color:var(--navy);line-height:1.3;white-space:nowrap}
.trust__script{color:var(--blue);font-size:1.3rem;text-align:center;margin:0;padding-left:24px;border-left:1px solid #cfe2ee;flex:none;transform:rotate(-3deg)}
.trust__item span{font-size:.77rem;color:var(--muted);white-space:nowrap}

/* --- Bande « chaque voyageur est unique » -------------------------------- */
.unique{position:relative;background:var(--navy-900);color:#fff;overflow:hidden;isolation:isolate}
.unique__media{position:absolute;right:0;top:0;bottom:0;width:70%;z-index:-2}
.unique__media img{width:100%;height:100%;object-fit:cover;object-position:50% 74%}
.unique::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(95deg,var(--navy-900) 0%,var(--navy-900) 26%,rgba(8,44,73,.85) 38%,rgba(9,50,80,.25) 56%,rgba(9,50,80,.2) 74%,rgba(8,44,73,.6) 100%);
}
.unique__inner{padding:52px 0;display:grid;grid-template-columns:1.25fr .75fr;gap:24px;align-items:center}
.unique h2{color:#fff;font-style:italic;margin-bottom:14px}
.unique p{color:rgba(255,255,255,.9);font-size:.95rem;max-width:520px;margin:0}
.unique__script{text-align:right;font-size:1.45rem;transform:rotate(-4deg)}

/* --- Résultat ------------------------------------------------------------ */
.result{display:none}
.result.is-visible{display:block}
.result__badge{
  display:inline-block;padding:7px 15px;border-radius:999px;background:var(--sky-2);
  color:var(--navy);font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
.result h2{margin:16px 0 10px}
.result__lead{font-size:1.02rem;color:var(--text);max-width:720px}
.result h3{font-size:1.02rem;margin:28px 0 14px;color:var(--navy)}
.result__scores{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.score{background:var(--sky);border-radius:var(--r);padding:16px;text-align:center}
.score b{display:block;font-size:1.6rem;color:var(--navy);line-height:1.1}
.score span{font-size:.82rem;color:var(--muted)}
.result__recs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rec{border:1px solid var(--border);border-radius:var(--r);padding:16px}
.rec h4{margin:0 0 6px;font-size:.95rem;color:var(--navy)}
.rec p{margin:0;font-size:.82rem;color:var(--muted)}
.result__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

@media (max-width:1020px){
  .options{grid-template-columns:repeat(2,1fr)}
  .didyouknow{grid-template-columns:auto 1fr}
  .didyouknow__script{display:none}
  .trust__script{display:none}
  .quiz-skip{order:3;margin:0}
  .quiz-nav{flex-wrap:wrap}
  .unique__inner{grid-template-columns:1fr;padding:44px 0}
  .unique__script{text-align:left}
  .trust__grid{flex-wrap:wrap;gap:16px}
  .trust__item{flex:0 0 auto}
  .trust__item+.trust__item{border-left:0;padding-left:0}
  .hero__script--quiz{display:none}
}

@media (max-width:680px){
  .quiz-card{padding:22px 18px 26px;margin-top:-40px}
  .options,.options--plain{grid-template-columns:1fr}
  .result__scores,.result__recs{grid-template-columns:1fr}
  .quiz-nav .btn{flex:1;justify-content:center}
}