/* =========================================================
   participer.css — Tunnel de participation « Journey Pass »
   Split-screen éditorial : rail immersif (le lot + progression)
   à gauche, formulaire raffiné à droite. S'appuie sur les
   tokens de style.css. Chargé UNIQUEMENT par participer.html.
   ========================================================= */

body.funnel-page { background: var(--teal-deep); }
body.funnel-page .site-header { display: none; }   /* le rail porte la marque */

/* ----------------------------------------------- grille split (carte centrée) */
.funnel {
  display: grid;
  grid-template-columns: minmax(320px, 40%) 1fr;
  min-height: 100dvh;
  max-width: 1240px;
  margin-inline: auto;
  box-shadow: 0 0 140px -50px rgba(0,0,0,.65);
}

/* ================================================ RAIL IMMERSIF */
.funnel-aside {
  position: sticky; top: 0;
  height: 100dvh;
  overflow: hidden;
  color: #fff;
  display: flex; flex-direction: column;
  isolation: isolate;
}
.funnel-aside .aside-bg {
  position: absolute; inset: 0; z-index: -2;
  background: var(--teal) center/cover no-repeat;
  transform: scale(1.06);
}
.funnel-aside::after {                 /* voile de lisibilité */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(7,30,28,.8) 0%, rgba(7,30,28,.62) 32%, rgba(6,24,22,.96) 100%),
    linear-gradient(90deg, rgba(6,24,22,.55), rgba(6,24,22,0) 72%);
}
.funnel-aside::before {                /* halo doré */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(58% 46% at 82% -4%, rgba(214,162,83,.26), transparent 60%);
}

.aside-inner {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column;
  gap: clamp(1.3rem, 3.2vh, 2.3rem);
  padding: clamp(1.7rem, 2.6vw, 2.6rem) clamp(1.7rem, 2.6vw, 2.9rem);
  overflow: auto;
}

/* -- en-tête du rail : marque + langue + quitter -- */
.aside-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.aside-top .brand { color: #fff; }
.aside-top .brand .name { color: #fff; font-size: 1.12rem; }
.aside-top .brand .name em { color: var(--gold-2); }
.aside-top .brand .mark { color: var(--gold-2); }
.aside-tools { display: flex; align-items: center; gap: 1rem; }
.aside-tools .lang-switch { color: #fff; }
.aside-tools .lang-switch button.active { color: var(--gold-2); }
.aside-tools .header-quit { color: rgba(255,255,255,.78); }
.aside-tools .header-quit:hover { color: var(--gold-2); }

/* -- bloc « le lot » -- */
.aside-prize .eyebrow { color: var(--gold-2); }
.aside-prize h2 {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: clamp(1.7rem, 2.7vw, 2.5rem); line-height: 1.04;
  margin: .7rem 0 0; max-width: 15ch;
  text-shadow: 0 6px 34px rgba(0,0,0,.35);
}
.aside-prize h2 em { color: var(--gold-2); }

.prize-rail { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.prize-rail li {
  display: grid; grid-template-columns: 1fr auto;
  gap: .2rem 1rem; padding: .8rem 0;
  border-top: 1px solid var(--line-light);
}
.prize-rail li:first-child { border-top: 0; padding-top: .2rem; }
.prize-rail .pr-t { grid-column: 1; grid-row: 1; font-family: 'Hanken Grotesk', sans-serif; font-weight: 600; font-size: 1rem; text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.prize-rail .pr-d { grid-column: 1; grid-row: 2; color: rgba(247,241,230,.72); font-size: .85rem; line-height: 1.45; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.prize-rail .pr-idx { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: 'Fragment Mono', monospace; font-size: .82rem; letter-spacing: .04em; color: var(--gold-2); white-space: nowrap; text-shadow: 0 2px 14px rgba(0,0,0,.5); }

/* -- compte à rebours -- */
.aside-count {
  display: inline-flex; align-items: baseline; gap: .55rem;
  font-family: 'Fragment Mono', monospace; font-size: .66rem;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.72);
}
.aside-count b { font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.55rem; color: var(--gold-2); letter-spacing: 0; }

/* -- progression : la timeline verticale (réutilise #stepper) -- */
.funnel .stepper {
  display: flex; flex-direction: column; gap: 0;
  justify-content: flex-start; margin: 0; flex-wrap: nowrap;
  position: relative;
}
.funnel .stepper::before {
  content: ""; position: absolute; left: .82rem; top: 1.3rem; bottom: 1.3rem;
  width: 1px; background: var(--line-light);
}
.funnel .stepper-item {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .9rem;
  padding: .5rem 0; border: 0; position: relative; z-index: 1; cursor: pointer;
  color: rgba(247,241,230,.55);
  font-family: 'Fragment Mono', monospace; font-size: .73rem; letter-spacing: .12em; text-transform: uppercase;
  transition: color .25s var(--ease);
}
.funnel .stepper-item:hover { color: rgba(247,241,230,.85); }
.funnel .stepper-item span {
  width: 1.65rem; height: 1.65rem; flex: none;
  border: 1px solid var(--line-light); background: var(--teal-deep);
  color: rgba(247,241,230,.6); font-size: .72rem;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.funnel .stepper-item.active { color: #fff; border-bottom: 0; }
.funnel .stepper-item.active span { background: var(--gold); border-color: var(--gold); color: #fff; box-shadow: 0 0 0 4px rgba(187,129,50,.22); }
.funnel .stepper-item.done span { background: var(--gold-2); border-color: var(--gold-2); color: var(--teal-deep); }
.funnel .st-label { font-style: normal; }

/* -- réassurance bas de rail -- */
.aside-trust { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .3rem; }
.aside-trust span {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: 'Fragment Mono', monospace; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(247,241,230,.82); border: 1px solid var(--line-light);
  padding: .4rem .72rem; border-radius: 100px; background: rgba(255,255,255,.05);
}
.aside-trust svg { width: 12px; height: 12px; color: var(--gold-2); }

/* ================================================ PANNEAU FORMULAIRE */
.funnel-main { background: var(--paper); position: relative; min-width: 0; }
.funnel-main-inner {
  max-width: 620px; margin: 0 auto;
  padding: clamp(2.6rem, 6vh, 4.8rem) clamp(1.4rem, 4vw, 3.4rem) 4rem;
}

/* indicateur d'étape éditorial */
.step-eyebrow {
  display: flex; align-items: center; gap: .85rem;
  font-family: 'Fragment Mono', monospace; font-size: .7rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 1.3rem;
}
.step-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.funnel .step-title { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.funnel .step-sub { font-size: 1.02rem; max-width: 46ch; }

/* champs : un cran plus raffinés sur fond crème */
.funnel .fields { margin-top: 1.9rem; }
.funnel input, .funnel select, .funnel textarea {
  background: #fffefb; border-color: rgba(20,32,28,.16); padding: .95rem 1rem;
}
.funnel input:focus, .funnel select:focus, .funnel textarea:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(187,129,50,.16);
}

/* barre de navigation : posée sur une hairline */
.funnel .wizard-nav { margin-top: 2.8rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }

/* récap : carte crème */
.funnel .recap {
  background: #fffefb; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.6rem; margin-top: 1.8rem;
}

/* confirmation : centrée dans le panneau */
.funnel .confirmation { padding: clamp(3rem, 10vh, 7rem) 1rem; }
.funnel .confirm-check { box-shadow: 0 18px 40px -22px rgba(187,129,50,.8); }

/* ================================================ RESPONSIVE */
@media (max-width: 1024px) {
  .funnel { grid-template-columns: 1fr; }
  .funnel-aside { position: relative; height: auto; min-height: 0; }
  .aside-inner { gap: 1.2rem; padding: 1.4rem clamp(1.2rem, 5vw, 2rem) 1.5rem; }
  .aside-prize h2 { font-size: clamp(1.5rem, 6vw, 2.1rem); max-width: none; }
  .prize-rail, .aside-trust { display: none; }   /* bannière compacte sur mobile */
  /* timeline horizontale */
  .funnel .stepper { flex-direction: row; gap: .3rem; overflow-x: auto; padding-bottom: .2rem; }
  .funnel .stepper::before { display: none; }
  .funnel .stepper-item { flex-direction: column; gap: .4rem; text-align: center; grid-template-columns: none; min-width: 4.2rem; }
  .funnel .stepper-item span { margin: 0 auto; }
  .funnel .st-label { font-size: .58rem; }
}
@media (max-width: 560px) {
  .funnel-main-inner { padding-top: 2rem; }
  .funnel .st-label { display: none; }   /* ne garde que les pastilles numérotées */
  .funnel .stepper-item { min-width: 0; flex: 1; }
}