/* Page d'atterrissage Quest.Dog — reprise fidèle de la maquette Claude Design
   « Landing Quest.Dog » (handoff d'août 2026). Les styles y étaient en
   attributs `style=` inline ; ils sont regroupés ici, et complétés par les
   points d'arrêt responsives que la maquette (pensée pour un écran large)
   n'avait pas. */

@font-face { font-family: 'Outfit'; src: url('fonts/Outfit-Regular.ttf') format('truetype');  font-weight: 400; font-display: swap }
@font-face { font-family: 'Outfit'; src: url('fonts/Outfit-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap }
@font-face { font-family: 'Outfit'; src: url('fonts/Outfit-Bold.ttf') format('truetype');     font-weight: 700; font-display: swap }

:root {
  --bg: #F4F7F0;
  --ink: #1C2B1C;
  --body: #4A5A4A;
  --muted: #7A887A;
  --green: #5C9B64;
  --green-dark: #4E8757;
  --green-deep: #3E6A44;
  --green-soft: #E3EFE0;
  --line: #D6E0D2;
  --line-soft: #E0E5DC;
  --night: #16261A;
  --night-soft: #20321F;
  --night-sel: #2C4429;
  --night-line: #33482F;
  --night-muted: #8FA48C;
  --orange: #F08C00;
  --orange-hover: #FFA524;
  --orange-soft: #FDEEDA;
  --shell: 1180px;
}

* { box-sizing: border-box }
html, body { margin: 0; padding: 0; background: var(--bg) }
body {
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* `height: auto` est indispensable : les <img> portent width/height pour
   réserver leur place (pas de saut de mise en page), et sans lui l'attribut
   height s'appliquerait tel quel une fois la largeur contrainte. */
img { max-width: 100%; height: auto }
a { color: var(--green-deep); text-decoration: none }
a:hover { color: var(--green) }
input, button { font-family: inherit }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px }

.shell { max-width: var(--shell); margin: 0 auto; padding-left: 32px; padding-right: 32px }

/* ------------------------------------------------------------------ entête */
.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-top: 28px; padding-bottom: 28px;
}
.brand { display: flex; align-items: center; gap: 12px }
.brand svg { display: block; height: 38px; width: auto }
.brand span { font-size: 22px; font-weight: 700; letter-spacing: -0.02em }
.top-right { display: flex; align-items: center; gap: 18px }
.langs { display: flex; gap: 4px; font-size: 14px; font-weight: 600 }
.langs a { color: var(--muted); padding: 6px 9px; border-radius: 11px; line-height: 1 }
.langs a:hover { background: var(--green-soft); color: var(--green-deep) }
.langs a[aria-current] { background: var(--green-soft); color: var(--green-deep) }

.btn-top {
  background: var(--green); color: #fff; font-weight: 600; font-size: 15px;
  padding: 12px 22px; border-radius: 16px;
  box-shadow: 0 6px 16px rgba(92, 155, 100, .35);
}
.btn-top:hover { background: var(--green-dark); color: #fff }

/* -------------------------------------------------------------------- héros */
.hero {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px;
  align-items: center; padding-top: 40px; position: relative;
}
.hero-copy { position: relative; z-index: 2 }
.pill {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--green-soft); color: var(--green-deep);
  font-weight: 600; font-size: 13.5px; padding: 8px 16px; border-radius: 15px;
  margin-bottom: 26px;
}
.pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); display: block; flex: none }
h1 { font-size: 64px; line-height: 1.02; letter-spacing: -.035em; font-weight: 700; margin: 0 0 22px }
.lead {
  font-size: 20px; line-height: 1.5; color: var(--green-deep);
  margin: 0 0 34px; max-width: 520px; text-wrap: pretty;
}
.fineprint { font-size: 13.5px; color: var(--muted); margin: 14px 0 0 }

/* Colonne de droite : téléphone posé sur un disque, chiens flottants. */
.stage { position: relative; display: flex; justify-content: center; z-index: 2 }
.stage .halo {
  position: absolute; border-radius: 50%; top: 50%; left: 50%;
  transform: translate(-50%, -50%); z-index: 0; background: var(--green-soft);
}
.hero .halo { width: 430px; height: 430px }
.phone {
  position: relative; z-index: 1; border-radius: 44px; padding: 9px;
  background: var(--night); box-shadow: 0 30px 60px rgba(22, 38, 26, .28);
  width: 296px;
}
.phone img { display: block; width: 100%; border-radius: 36px }
.phone.sm { width: 274px; border-radius: 42px; box-shadow: 0 24px 50px rgba(22, 38, 26, .24) }
.phone.sm img { border-radius: 34px }

.sticker {
  position: absolute; z-index: 2;
  filter: drop-shadow(0 12px 18px rgba(22, 38, 26, .18));
  animation: float 7s ease-in-out infinite;
}
.sticker.corgi    { width: 164px; left: -30px;  bottom: 8px;  --r: -8deg; animation-duration: 6s }
.sticker.cavalier { width: 132px; right: -4px;  top: -6px;    --r: 9deg;  animation-duration: 7.5s }
.sticker.shepherd { width: 146px; right: -16px; bottom: -4px; --r: 6deg;  animation-duration: 8s }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)) }
  50%      { transform: translateY(-14px) rotate(var(--r, 0deg)) }
}
@media (prefers-reduced-motion: reduce) {
  .sticker { animation: none; transform: rotate(var(--r, 0deg)) }
}

/* ---------------------------------------------------------------- formulaire */
.signup { max-width: 520px }
.signup-label { font-size: 14.5px; font-weight: 600; color: var(--green-deep); margin: 0 0 10px }
.platforms { display: flex; gap: 8px; margin-bottom: 14px }
.platforms button {
  cursor: pointer; font-weight: 600; font-size: 15px; padding: 11px 20px;
  border-radius: 15px; border: 1.5px solid var(--line);
  background: #fff; color: var(--muted);
}
.platforms button[aria-pressed="true"] {
  background: var(--green-soft); color: var(--green-deep); border-color: var(--green);
}
.fields { display: flex; gap: 10px; flex-wrap: wrap }
.fields input {
  flex: 1 1 240px; min-width: 0; border: 1.5px solid var(--line); background: #fff;
  border-radius: 16px; padding: 16px 18px; font-size: 16px; color: var(--ink); outline: none;
}
.fields input:focus { border-color: var(--green) }
.fields button {
  border: 0; cursor: pointer; background: var(--green); color: #fff;
  font-weight: 700; font-size: 16px; padding: 16px 26px; border-radius: 16px;
  box-shadow: 0 6px 16px rgba(92, 155, 100, .35);
}
.fields button:hover { background: var(--green-dark) }
.fields button[disabled] { opacity: .6; cursor: progress }
.done {
  background: var(--green-soft); border: 1.5px solid var(--green); border-radius: 16px;
  padding: 18px 20px; font-size: 16px; font-weight: 600; color: var(--green-deep);
}
.error { color: #B23A2F; font-size: 14.5px; font-weight: 600; margin: 10px 0 0 }
[hidden] { display: none !important }

/* ----------------------------------------------------------------- sections */
section { position: relative }
h2 { font-size: 42px; line-height: 1.1; letter-spacing: -.03em; font-weight: 700; margin: 0 0 14px }
.tag {
  display: inline-block; font-weight: 600; font-size: 13.5px;
  padding: 7px 15px; border-radius: 15px; margin-bottom: 20px;
}
.tag.o { background: var(--orange-soft); color: #B56A00 }   /* les Quests    */
.tag.s { background: #EFE7E1;            color: #7A5B50 }   /* le profil     */
.tag.r { background: #F6DCDC;            color: #9E3B3B }   /* en balade     */
.tag.g { background: var(--green-soft);  color: var(--green-deep) } /* parcours */

/* Argumentaire : trois cartes. */
.pitch { padding-top: 110px }
.pitch h2 { text-align: center }
.pitch-lead {
  font-size: 18px; color: var(--green-deep); margin: 0 auto 56px; max-width: 620px;
  text-align: center; line-height: 1.55; text-wrap: pretty;
}
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px }
.card {
  background: #fff; border-radius: 20px; padding: 32px 28px;
  box-shadow: 0 4px 16px rgba(30, 50, 30, .10);
}
.card h3 { font-size: 21px; font-weight: 700; margin: 0 0 10px; letter-spacing: -.01em }
.card p { font-size: 16px; line-height: 1.55; color: var(--body); margin: 0 }
/* Pin en goutte, comme les marqueurs de la carte dans l'app. */
.drop {
  width: 44px; height: 44px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg);
  margin-bottom: 26px; display: flex; align-items: center; justify-content: center;
}
.drop i { transform: rotate(45deg); display: block }
.drop.g { background: var(--green) }
.drop.g i { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 14px solid #fff }
.drop.b { background: #2A7FC9 }
.drop.b i { width: 15px; height: 15px; border-radius: 50%; background: #fff }
.drop.o { background: var(--orange) }
.drop.o i { width: 15px; height: 15px; border-radius: 50% 50% 45% 45%; background: #fff }

/* Sections en vis-à-vis : texte d'un côté, téléphone de l'autre. */
.split { display: grid; gap: 64px; align-items: center; margin-top: 120px }
.split.left  { grid-template-columns: .95fr 1.05fr }   /* visuel à gauche */
.split.right { grid-template-columns: 1.05fr .95fr }   /* visuel à droite */
.split .halo { width: 360px; height: 360px }
.split h2 { font-size: 40px; line-height: 1.08; margin: 0 0 18px }
.split p.lead { font-size: 18px; line-height: 1.55; margin-bottom: 26px; max-width: 480px }

.bullets { display: flex; flex-direction: column; gap: 14px; max-width: 470px; padding: 0; margin: 0 }
.bullets li { display: flex; gap: 12px; align-items: flex-start; list-style: none }
.bullets li::before {
  content: ''; width: 22px; height: 22px; border-radius: 50%;
  background: var(--green-soft); flex: none; margin-top: 2px;
}
.bullets p { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--ink) }
.bullets strong { font-weight: 600 }

/* Les sept familles du leveling — la couleur du texte est celle de la ruche. */
.families { display: flex; gap: 10px; flex-wrap: wrap }
.families span {
  background: #fff; border: 1.5px solid var(--line-soft); border-radius: 15px;
  padding: 9px 16px; font-size: 14.5px; font-weight: 600;
}

/* ------------------------------------------------------------ en balade */
.walk { margin-top: 120px }
.walk-head { max-width: 620px; margin: 0 auto 52px; text-align: center }
.walk-head h2 { font-size: 40px; line-height: 1.08; margin: 0 0 16px }
.walk-head p { font-size: 18px; line-height: 1.55; color: var(--green-deep); margin: 0; text-wrap: pretty }
.duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; align-items: start; justify-items: center }
.duo > div { display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 400px }
.duo figcaption, .duo .cap { text-align: center }
.duo h3 { font-size: 21px; font-weight: 700; margin: 0 0 8px; letter-spacing: -.01em }
.duo p { font-size: 16.5px; line-height: 1.55; color: var(--body); margin: 0 }

/* Carte souvenir : pas un téléphone, une image partageable — donc pas de
   bezel arrondi de 42 px mais un simple cadre. */
.souvenir {
  position: relative; z-index: 1; width: 262px; border-radius: 26px; overflow: hidden;
  background: var(--night); box-shadow: 0 24px 50px rgba(22, 38, 26, .24);
}
.souvenir img { display: block; width: 100% }
.split .halo.sm { width: 340px; height: 340px }

/* --------------------------------------------------------------- appel final */
.cta { margin-top: 130px }
.cta-box {
  background: var(--night); border-radius: 32px; padding: 72px 56px;
  position: relative; overflow: hidden; text-align: center;
}
.cta-inner { position: relative; z-index: 2; max-width: 620px; margin: 0 auto }
.cta h2 { font-size: 46px; line-height: 1.06; color: var(--bg) }
.cta p.lead { font-size: 18.5px; line-height: 1.55; color: #B9C9B6; margin: 0 0 34px; max-width: none }
.cta .signup { max-width: 540px; margin: 0 auto }
.cta .signup-label { color: var(--night-muted) }
.cta .platforms { justify-content: center }
.cta .platforms button { background: var(--night-soft); color: var(--night-muted); border-color: var(--night-line) }
.cta .platforms button[aria-pressed="true"] { background: var(--night-sel); color: var(--bg); border-color: var(--green) }
.cta .fields { justify-content: center }
.cta .fields input { flex-basis: 250px; background: var(--night-soft); border-color: var(--night-line); color: var(--bg); padding: 17px 19px }
.cta .fields input::placeholder { color: var(--night-muted) }
.cta .fields button { background: var(--orange); color: var(--night); padding: 17px 28px; box-shadow: none }
.cta .fields button:hover { background: var(--orange-hover) }
.cta .done { background: var(--night-soft); color: #C9DDC5; font-size: 17px; padding: 20px }
.cta .error { color: #FFB4A6 }

/* Les 19 pays de la bêta : trop long pour le paragraphe, trop utile pour
   être tu — servi en discret sous le formulaire, comme le « pas de spam »
   du héros. */
.countries {
  font-size: 14.5px; line-height: 1.5; color: var(--night-muted);
  max-width: 540px; margin: 18px auto 0;
}

.stores { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 34px }
.stores span { font-size: 14.5px; color: var(--night-muted) }
.stores div {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
  background: var(--bg); border-radius: 18px; padding: 12px 20px;
}
.stores img { height: 48px; width: auto; display: block }
.cta .sticker { animation: none; filter: none; z-index: 1 }
.cta .sticker.golden { width: 150px; left: 22px; bottom: 0 }
.cta .sticker.pom    { width: 130px; right: 28px; bottom: 0 }

/* ------------------------------------------------------------------- pied */
footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; padding-top: 44px; padding-bottom: 60px;
}
footer .brand svg { height: 28px }
footer .brand span { font-size: 15px; color: var(--muted); font-weight: 400; letter-spacing: 0 }
.foot-links { display: flex; gap: 22px; font-size: 15px; flex-wrap: wrap }

/* --------------------------------------------------------------- responsive */
@media (max-width: 940px) {
  .shell { padding-left: 22px; padding-right: 22px }
  h1 { font-size: 44px }
  h2, .split h2, .walk-head h2 { font-size: 32px }
  .cta h2 { font-size: 34px }
  .lead, .split p.lead { font-size: 18px }
  .hero { grid-template-columns: 1fr; gap: 56px; padding-top: 24px }
  /* En une colonne, la scène occuperait toute la largeur : le halo et les
     chiens, positionnés par rapport à elle, se détacheraient du téléphone.
     On la ramène à la largeur de son contenu. */
  .stage { width: fit-content; margin-left: auto; margin-right: auto }
  .split, .split.left, .split.right { grid-template-columns: 1fr; gap: 40px; margin-top: 84px }
  /* Le visuel repasse sous le texte dans les sections où il était à gauche. */
  .split.left .stage { order: 2 }
  .cards { grid-template-columns: 1fr }
  .pitch { padding-top: 84px }
  .pitch-lead { margin-bottom: 36px }
  .walk { margin-top: 84px }
  .walk-head { margin-bottom: 36px }
  .duo { grid-template-columns: 1fr; gap: 48px }
  .cta { margin-top: 90px }
  .cta-box { padding: 56px 24px }
  .signup, .cta .signup { max-width: none }
}
@media (max-width: 620px) {
  h1 { font-size: 36px }
  .lead { font-size: 17px }
  .top { flex-wrap: wrap; gap: 12px }
  .btn-top { display: none }              /* le formulaire est juste dessous */
  .phone { width: 250px }
  .phone.sm { width: 236px }
  .souvenir { width: 236px }
  .hero .halo { width: 320px; height: 320px }
  .split .halo { width: 290px; height: 290px }
  .split .halo.sm { width: 280px; height: 280px }
  .sticker.corgi { width: 118px; left: -6px }
  .sticker.cavalier { width: 96px; right: 4px }
  .sticker.shepherd { width: 104px; right: 0 }
  .cta .sticker.golden { width: 96px; left: 4px }
  .cta .sticker.pom { width: 84px; right: 6px }
  .cta-box { padding: 44px 18px 130px }   /* place pour les chiens en bas */
  .fields button { flex: 1 1 100% }
}