/* ==========================================================================
   Accueil : une page courte, inspirée des pages « une image, une carte ».
   Ciel avec Plucky et le logo, carte du jeu, promesses, feuille de route
   courte, pied de page minimal. Aucune animation au défilement, aucun JS.
   ========================================================================== */

/* ---------------------------------------------------------------- Ciel */
.hero {
  position: relative;
  min-height: min(86vh, 820px);
  display: flex; flex-direction: column; align-items: center;
  overflow: hidden;
  background: linear-gradient(180deg, #3b8bd4 0%, #67ade6 38%, #a9d4f4 70%, #cfe5fa 100%);
}
.hero-scene { position: absolute; inset: 0; pointer-events: none; }
.hero-scene::before {  /* soleil derrière Plucky */
  content: ""; position: absolute; left: 50%; top: 62%;
  width: 110vmax; height: 110vmax; margin: -55vmax 0 0 -55vmax;
  background: radial-gradient(circle, rgba(255, 244, 214, .9) 0, rgba(255, 222, 160, .45) 12%, rgba(255, 222, 160, 0) 34%);
}
.cloud { position: absolute; max-width: none; user-select: none; }
.cloud.big-l { left: 0; top: 14%; height: clamp(150px, 38vh, 400px); width: auto; }
.cloud.big-r { right: 0; top: 26%; height: clamp(140px, 34vh, 360px); width: auto; }
.cloud.puff { left: 18%; top: 44%; width: clamp(70px, 9vw, 140px); height: auto; }
.cloud.bank {
  --bank-w: max(1400px, 118vw);
  left: 50%; bottom: -1px;
  width: var(--bank-w); height: clamp(150px, 28vh, 300px);
  margin-left: calc(var(--bank-w) / -2);
  object-fit: cover; object-position: 50% 0;
  /* le bas du banc se fond dans le ciel, qui continue sous la carte */
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}
.plucky {
  position: absolute; left: 50%; bottom: 13%;
  width: clamp(220px, 30vw, 440px); height: auto;
  translate: -42% 0;
  filter: drop-shadow(0 18px 18px rgba(23, 70, 120, .22));
}
@media (prefers-reduced-motion: no-preference) {
  .plucky { animation: glide 6s ease-in-out infinite alternate; }
  @keyframes glide { to { transform: translateY(-14px) rotate(-2deg); } }
}

.hero-head {
  position: relative; z-index: 1;
  padding-top: clamp(40px, 9vh, 96px);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.hero-logo { margin: 0; width: clamp(270px, 52vw, 640px); line-height: 0; }
.hero-logo img { width: 100%; height: auto; filter: drop-shadow(0 6px 0 rgba(23, 70, 120, .25)); }
.hero-tagline {
  margin: 16px 0 0;
  padding: 8px 18px 9px;
  background: rgba(255, 248, 234, .92);
  border-radius: 999px;
  box-shadow: 0 4px 0 rgba(23, 98, 154, .25);
  font: clamp(1rem, 1.9vw, 1.3rem)/1.2 var(--font-title);
  color: var(--ink);
}

/* ---------------------------------------------------------------- Carte du jeu */
.pitch {
  position: relative; z-index: 1;
  display: flow-root;  /* la marge négative de la carte ne remonte pas le fond de la section */
  padding: 0 0 72px;
  background: linear-gradient(180deg, #cfe5fa 0, var(--cream) 320px);  /* reprend le bas du ciel */
}
.pitch-card {
  max-width: 760px;
  margin: clamp(-140px, -12vw, -60px) auto 0;
  text-align: center;
}
.pitch-card h2 { font-size: clamp(1.9rem, 4.2vw, 2.8rem); }
.pitch-card p { font-size: 1.1rem; max-width: 56ch; margin-inline: auto; }
.pitch-card .launch { color: var(--ink-soft); }
.pitch-card .launch strong { color: var(--ink); }

.stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 22px; }
.store { cursor: default; min-height: 56px; padding-inline: 1.1em 1.4em; }
.store:hover, .store:active { transform: none; filter: none; }

/* ---------------------------------------------------------------- Promesses */
.promises {
  list-style: none; margin: 56px auto 0; padding: 0;
  max-width: 980px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  text-align: center;
}
.promises img { height: 72px; width: auto; margin-bottom: 8px; filter: drop-shadow(0 4px 4px rgba(42, 32, 23, .15)); }
.promises h3 { font-size: 1.2rem; margin-bottom: .25em; }
.promises p { margin: 0; color: var(--ink-soft); font-size: .98rem; }

/* ---------------------------------------------------------------- La ferme */
.farm { padding: 40px 0 96px; background: linear-gradient(180deg, var(--cream), #eef5dc); overflow: hidden; }
.farm-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.farm-text h2 { font-size: clamp(1.9rem, 4.2vw, 2.8rem); }
.farm-text > p { font-size: 1.1rem; max-width: 52ch; }

.road {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.road li {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--paper);
  border: 3px solid #e4ecc8;
  border-radius: 20px;
  padding: 12px 8px 10px;
  text-align: center;
}
.road img { height: 62px; width: auto; filter: drop-shadow(0 4px 3px rgba(42, 32, 23, .15)); }
.road span { font-size: .9rem; line-height: 1.25; color: var(--ink-soft); }
.road b { display: block; font: .8rem/1.1 var(--font-title); letter-spacing: .06em; text-transform: uppercase; color: var(--honey-deep); }

.farm-art { position: relative; max-width: 440px; justify-self: center; width: 100%; }
.farm-frame { padding: 0; overflow: hidden; line-height: 0; transform: rotate(1.5deg); }
.farm-frame::before { z-index: 1; }
.farm-frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%; border-radius: 20px; }
.farm-folks {
  position: absolute; left: -12%; bottom: -10%;
  width: 58%; height: auto;
  filter: drop-shadow(0 10px 12px rgba(42, 32, 23, .25));
  /* l'image est coupée en bas et à gauche : on fond ces deux bords */
  -webkit-mask-image: linear-gradient(#000 72%, transparent 98%), linear-gradient(90deg, transparent 2%, #000 16%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(#000 72%, transparent 98%), linear-gradient(90deg, transparent 2%, #000 16%);
  mask-composite: intersect;
}
.farm-deco {
  position: absolute; right: -8%; bottom: -6%;
  width: 26%; height: auto;
  filter: drop-shadow(0 8px 8px rgba(42, 32, 23, .2));
}

/* ---------------------------------------------------------------- Feuille de route */
.roadmap { padding: 72px 0 96px; background: var(--cream-2); }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.section-head h2 { font-size: clamp(1.9rem, 4.2vw, 2.8rem); }

.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  counter-reset: step;
}
.steps li {
  position: relative;
  background: var(--paper);
  border: 3px solid #f3e2c2;
  border-radius: 24px;
  padding: 22px 20px 18px;
}
.steps li::after {  /* petit chemin pointillé entre les étapes */
  content: ""; position: absolute; top: 34px; left: 100%;
  width: 20px; border-top: 3px dashed var(--honey-edge);
}
.steps li:last-child::after { display: none; }
.steps .when {
  display: inline-block;
  font: .85rem/1 var(--font-title); letter-spacing: .06em; text-transform: uppercase;
  color: var(--honey-deep);
  margin-bottom: 10px;
}
.steps h3 { font-size: 1.35rem; margin-bottom: .3em; }
.steps p { margin: 0; color: var(--ink-soft); font-size: .98rem; }
.steps .goal { background: #fff4d9; border-color: var(--honey); }

.more { text-align: center; margin: 36px 0 0; }
.text-link { font: 1.2rem/1.2 var(--font-title); color: var(--grass-deep); text-decoration: none; }
.text-link:hover, .text-link:focus-visible { text-decoration: underline; color: var(--ink); }

/* ---------------------------------------------------------------- Pied de page */
.home-footer {
  background: var(--bark);
  color: #d9c9ae;
  padding: 48px 0 32px;
  text-align: center;
  font-size: .95rem;
}
.home-footer .studio-logo { width: 150px; height: auto; margin-bottom: 8px; }
.home-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 18px 0 24px; }
.home-footer a { color: #ffe3a6; }
.home-footer a:hover, .home-footer a:focus-visible { color: #fff; }
.home-footer .copy { margin: 0; color: #cbb99c; font-size: .88rem; }

/* ---------------------------------------------------------------- Petits écrans */
@media (max-width: 900px) {
  .promises, .steps { grid-template-columns: repeat(2, 1fr); }
  .steps li::after { display: none; }
  .farm-grid { grid-template-columns: 1fr; gap: 64px; }
  .farm-art { max-width: 380px; }
}
@media (max-width: 560px) {
  .hero { min-height: 640px; }
  .cloud.big-l, .cloud.big-r { height: 150px; }
  .plucky { width: 240px; bottom: 16%; }
  .steps { grid-template-columns: 1fr; }
  .road { grid-template-columns: repeat(2, 1fr); }
  .farm-art { width: 82%; }
  .stores .store { flex: 1 1 100%; }
}

/* Bouton FR / EN (style .nav-lang de site.css), en haut à droite du ciel */
.hero-lang { position: absolute; top: 16px; right: 16px; z-index: 2; margin: 0; }