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

/* --- Hero ---------------------------------------------------------------- */
.hero--profil{min-height:clamp(360px,28vw,480px)}
.hero--profil .hero__media img{object-position:72% 40%}
.hero--profil .hero__inner{padding:48px 0;max-width:640px}
.hero--profil .eyebrow{color:#e6eef5;letter-spacing:.2em}
.hero--profil h1{font-size:clamp(2.3rem,4.4vw,3.6rem);margin-bottom:6px}
.hero__tagline{font-size:clamp(1.1rem,1.9vw,1.6rem);font-weight:500;color:#fff;margin:0 0 16px}
.hero--profil .hero__sub{max-width:560px;margin-bottom:22px}
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{
  border:1.5px solid rgba(255,255,255,.65);border-radius:999px;padding:7px 15px;
  font-size:.8rem;font-weight:500;color:#fff;white-space:nowrap;
}
.hero__script--profil{right:3%;top:24%;max-width:230px;text-align:right;font-size:1.5rem;line-height:1.35;text-shadow:0 2px 16px rgba(4,26,45,.75),0 0 30px rgba(4,26,45,.5)}
.hero__script--profil::after{
  content:"";display:block;height:24px;margin-top:4px;border-bottom:2.5px solid #fff;
  border-radius:0 0 60% 0;opacity:.9;
}

/* --- Bande des 8 services ------------------------------------------------ */
.services{background:linear-gradient(180deg,#eef7fc 0%,#f7fbfd 100%);padding:26px 0}
.services__grid{display:grid;grid-template-columns:repeat(8,1fr);gap:14px}
.service{text-align:center}
.service svg{width:30px;height:30px;color:var(--blue);margin-bottom:9px}
.service span{display:block;font-size:.8rem;font-weight:600;color:var(--navy);line-height:1.3}

/* --- Création du compte -------------------------------------------------- */
.signup{background:#fff}
.signup__row{display:grid;grid-template-columns:.82fr 1.18fr;gap:40px;align-items:center}
.signup h2{margin-bottom:8px}
.signup__lead{color:var(--muted);margin-bottom:24px;max-width:520px}
.signup__card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow)}
.signup__card h3{font-size:1.2rem;margin-bottom:6px}
.signup__card>p{font-size:.88rem;color:var(--muted);margin-bottom:20px}
.signup__steps{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.signup__step{display:flex;align-items:center;gap:9px;font-size:.85rem;color:var(--muted)}
.signup__step b{
  width:28px;height:28px;border-radius:50%;background:#e4eef6;color:var(--muted);
  display:grid;place-items:center;font-size:.85rem;
}
.signup__step--on{color:var(--navy);font-weight:500}
.signup__step--on b{background:var(--blue);color:#fff}
.signup__steps hr{flex:1;border:0;border-top:1px solid var(--border);margin:0}
.signup__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:.8rem;font-weight:500;color:var(--navy)}
.field label i{color:#d0453f;font-style:normal}
.field input{
  border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px;
  font-family:inherit;font-size:.92rem;color:var(--text);outline:0;transition:.15s;
}
.field input::placeholder{color:#9db2c2}
.field input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,122,192,.14)}
.signup__note{display:flex;gap:9px;align-items:center;font-size:.78rem;color:var(--muted);margin:14px 0 0}
.signup__note svg{width:15px;height:15px;flex:none}

/* --- Aperçu tablette + mobile -------------------------------------------- */
.devices{position:relative;padding:0 0 40px}
.tablet{
  background:#1d2b38;border-radius:26px;padding:12px;box-shadow:var(--shadow-lg);
  margin-right:13%;
}
.dash{background:#fff;border-radius:16px;overflow:hidden}

.phone{
  position:absolute;right:0;bottom:-18px;width:27%;max-width:196px;
  background:#1d2b38;border-radius:22px;padding:7px;box-shadow:var(--shadow-lg);
  color:var(--text);
}
.phone>*{background:#fff}
.phone__bar{display:flex;align-items:center;gap:6px;padding:8px 9px;border-radius:15px 15px 0 0}
.phone__bar img{width:18px}
.phone__bar b{font-size:.68rem;color:var(--navy)}
.phone__bar b em{font-style:normal;color:var(--blue)}
.phone__bar i{margin-left:auto;width:16px;height:16px;border-radius:50%;background:var(--sky-2)}
.phone__hero{position:relative;padding:12px 10px;color:#fff;isolation:isolate;overflow:hidden}
.phone__hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.phone__hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,42,70,.85),rgba(7,42,70,.55))}
.phone__hero b{display:block;font-size:.8rem}
.phone__hero span{font-size:.58rem;opacity:.9;display:block;line-height:1.3}
.phone__search{background:#fff;border-radius:7px;padding:6px 8px;font-size:.55rem;color:#9db2c2;margin-top:8px}
.phone__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:9px}
.phone__tiles span{
  border:1px solid var(--border);border-radius:8px;padding:7px 3px;text-align:center;
  font-size:.5rem;color:var(--navy);display:block;
}
.phone__tiles svg{width:12px;height:12px;color:var(--blue);display:block;margin:0 auto 3px}
.phone__alert{display:flex;gap:7px;padding:0 9px 9px}
.phone__alert svg{width:14px;height:14px;color:var(--blue);flex:none;margin-top:2px}
.phone__alert b{display:block;font-size:.55rem;color:var(--navy)}
.phone__alert span{font-size:.5rem;color:var(--muted);line-height:1.35}
.phone__shot{padding:0 9px 9px;border-radius:0 0 15px 15px}
.phone__shot img{width:100%;height:56px;object-fit:cover;border-radius:8px}

.dash__bar{display:flex;align-items:center;gap:9px;padding:10px 14px;border-bottom:1px solid var(--border);overflow:hidden}
.dash__bar img{width:26px;height:auto}
.dash__bar b{font-size:.82rem;color:var(--navy);white-space:nowrap}
.dash__bar b em{font-style:normal;color:var(--blue)}
.dash__nav{display:flex;gap:12px;margin-left:14px;font-size:.66rem;color:var(--muted);white-space:nowrap;overflow:hidden;min-width:0}
.dash__nav span:first-child{color:var(--blue);font-weight:600}
.dash__me{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:.62rem;color:var(--muted);white-space:nowrap}
.dash__me i{width:22px;height:22px;border-radius:50%;background:var(--sky-2);flex:none}
.dash__me em{font-style:normal;color:var(--navy);font-weight:600}

.dash__hero{position:relative;padding:20px 16px;color:#fff;isolation:isolate;overflow:hidden}
.dash__hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%;z-index:-2}
.dash__hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,42,70,.85),rgba(7,42,70,.3))}
.dash__hero b{display:block;font-size:1.05rem}
.dash__hero>span{font-size:.72rem;opacity:.92}
.dash__search{display:flex;gap:7px;margin-top:12px;max-width:60%}
.dash__search i{flex:1;background:#fff;border-radius:7px;padding:8px 10px;font-size:.66rem;color:#9db2c2;font-style:normal}
.dash__search em{background:var(--blue);color:#fff;border-radius:7px;padding:8px 12px;font-size:.66rem;font-style:normal;font-weight:600}

.dash__tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;padding:12px 14px}
.dash__tile{border:1px solid var(--border);border-radius:9px;padding:9px 4px;text-align:center;font-size:.55rem;color:var(--navy);line-height:1.25}
.dash__tile svg{width:15px;height:15px;color:var(--blue);margin-bottom:4px}
.dash__tile--fav svg{color:#e0453f}

.dash__offers{padding:0 14px 16px}
.dash__offers h4{display:flex;align-items:baseline;justify-content:space-between;font-size:.78rem;margin:0 0 9px;color:var(--navy)}
.dash__offers h4 span{font-size:.6rem;color:var(--blue);font-weight:500}
.dash__list{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.dash__offer{border:1px solid var(--border);border-radius:9px;overflow:hidden;padding-bottom:8px}
.dash__thumb{display:block;height:54px;overflow:hidden}
.dash__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.dash__offer strong{display:block;font-size:.66rem;color:var(--navy);padding:7px 8px 1px}
.dash__price{display:flex;justify-content:space-between;align-items:baseline;font-size:.58rem;color:var(--muted);padding:0 8px 5px}
.dash__price i{font-style:normal;color:var(--gold-600);font-weight:600}
.dash__tag{display:inline-block;margin:0 8px;background:var(--sky);color:var(--navy);border-radius:999px;padding:2px 7px;font-size:.52rem}

/* --- Ce que vous obtenez ------------------------------------------------- */
.perks{background:linear-gradient(180deg,#fff 0%,#f4fafd 100%)}
.perks h2{margin-bottom:6px}
.perks__lead{color:var(--muted);margin-bottom:28px}
.perks__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.perk__head{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.perk__head svg{width:24px;height:24px;color:var(--blue);flex:none}
.perk__head h3{font-size:.88rem;margin:0;line-height:1.25}
.perk p{font-size:.79rem;color:var(--muted);margin:0;line-height:1.5}
.perks__grid>.perk+.perk{border-left:1px solid var(--border);padding-left:18px}

/* --- Bande finale -------------------------------------------------------- */
.final{position:relative;background:var(--navy-900);color:#fff;overflow:hidden;isolation:isolate}
.final__media{position:absolute;inset:0;z-index:-2}
.final__media img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.final::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(95deg,rgba(6,38,64,.82) 0%,rgba(7,44,72,.55) 38%,rgba(8,48,78,.7) 62%,rgba(6,38,64,.9) 100%);
}
.final__inner{padding:46px 0;display:grid;grid-template-columns:.9fr 1.1fr auto;gap:28px;align-items:center}
.final__script{font-size:1.55rem;line-height:1.35;transform:rotate(-4deg);text-shadow:0 2px 14px rgba(4,26,45,.6)}
.final h2{color:#fff;font-family:'Poppins',sans-serif;font-size:1.32rem;margin-bottom:6px;border-left:1px solid rgba(255,255,255,.35);padding-left:28px}
.final p{font-size:.88rem;color:rgba(255,255,255,.85);margin:0;padding-left:26px}

@media (max-width:1180px){
  .services__grid{grid-template-columns:repeat(4,1fr);gap:20px}
  .perks__grid{grid-template-columns:repeat(3,1fr)}
  .perks__grid>.perk+.perk{border-left:0;padding-left:0}
  .signup__row{grid-template-columns:1fr}
  .dash__tiles{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:1020px){
  .hero__script--profil{display:none}
  .final__inner{grid-template-columns:1fr;padding:34px 0}
  .final__script{display:none}
  .final h2,.final p{border-left:0;padding-left:0}
}

@media (max-width:680px){
  .services__grid{grid-template-columns:1fr 1fr}
  .perks__grid{grid-template-columns:1fr}
  .signup__grid{grid-template-columns:1fr}
  .dash__nav,.dash__me{display:none}
  .dash__list{grid-template-columns:1fr}
  .dash__tiles{grid-template-columns:repeat(2,1fr)}
}

/* --- Résultat du questionnaire ------------------------------------------- */
.result-block{background:linear-gradient(180deg,#eaf5fb 0%,#f7fbfd 100%);padding:0 0 40px}
.result-card{
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  padding:30px 34px 34px;margin-top:-48px;position:relative;z-index:5;
}
.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-card h2{margin:16px 0 10px}
.result__lead{font-size:1rem;color:var(--text);max-width:760px;margin-bottom:0}
.result-card h3{font-size:1rem;margin:26px 0 14px;color:var(--navy)}
.result-card h3.result__first{margin-top:18px}
.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:680px){
  .result-card{padding:22px 18px 26px;margin-top:-34px}
  .result__scores,.result__recs{grid-template-columns:1fr}
}

/* bouton de la bande finale : bleu vif, comme la maquette */
.final .btn{background:var(--blue);color:#fff;box-shadow:0 8px 22px rgba(31,122,192,.35)}
.final .btn:hover{background:var(--blue-600)}

@media (max-width:1180px){
  .phone{position:static;width:100%;max-width:none;margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .phone__bar,.phone__hero{grid-column:1/-1}
  .phone__shot{grid-column:1/-1}
}