/* Accueil — « journey » : la section reste épinglée pendant le défilement et l'appli se construit
   dans le téléphone au fil de la progression (--p, de 0 à 1, posée par js/journey.js).
   Chaque pièce (.k) a une fenêtre [--a, --b] et calcule sa progression locale --l en CSS pur. */

.journey { --p: 1; --jh: 340vh; position: relative; min-height: var(--jh); padding: 0; }
.journey.is-js { --p: 0; }
.journey-pin {
  position: sticky; top: 4.25rem; height: calc(100vh - 4.25rem); height: calc(100dvh - 4.25rem);
  display: flex; flex-direction: column; overflow: hidden;
}
.journey-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: .75rem; align-items: start; padding-top: .75rem; }

/* Entrée au chargement */
.j-in { animation: j-rise .8s var(--ease) both; }
.j-in.d1 { animation-delay: .1s; }
.j-in.d2 { animation-delay: .2s; }
.j-in.d3 { animation-delay: .3s; }
@keyframes j-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.journey-text h1 { margin-bottom: .6rem; font-size: clamp(2rem, 7.4vw, 4.4rem); }
.journey-text .lead { margin-bottom: 1rem; font-size: 1.05rem; }

/* Étapes du récit : la ligne active s'allume, les autres s'éteignent */
.j-steps { position: relative; display: grid; gap: .55rem; margin: .2rem 0 1rem; }
.j-step { position: relative; margin: 0; padding-left: 1.4rem; opacity: .3; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.j-step::before { content: ""; position: absolute; left: 0; top: .55em; width: .6rem; height: .6rem; border-radius: 50%; background: var(--line); transition: background .3s, transform .3s var(--ease); }
.j-step strong { display: block; font-weight: 700; font-size: 1.12rem; letter-spacing: -.01em; }
.j-step span { display: block; color: var(--muted); font-size: .98rem; }
.journey[data-step="0"] .j-step[data-i="0"], .journey[data-step="1"] .j-step[data-i="1"],
.journey[data-step="2"] .j-step[data-i="2"], .journey[data-step="3"] .j-step[data-i="3"] { opacity: 1; }
.journey[data-step="0"] .j-step[data-i="0"]::before, .journey[data-step="1"] .j-step[data-i="1"]::before,
.journey[data-step="2"] .j-step[data-i="2"]::before, .journey[data-step="3"] .j-step[data-i="3"]::before { background: var(--blue); transform: scale(1.25); }
.journey:not(.is-js) .j-step { opacity: 1; }

.journey .cta-group { margin-top: .25rem; }
.journey .cta-note { margin-top: .7rem; }

/* Barre de progression + indication de défilement */
.j-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--line); }
.j-progress i { display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--blue); }
.j-hint { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); font-size: .82rem; color: var(--muted); opacity: calc(1 - var(--p) * 12); pointer-events: none; white-space: nowrap; }
.j-hint::after { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-left: .45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); animation: j-nudge 1.6s ease-in-out infinite; }
@keyframes j-nudge { 0%, 100% { transform: rotate(45deg) translateY(-2px); } 50% { transform: rotate(45deg) translateY(2px); } }
.journey:not(.is-js) .j-hint, .journey:not(.is-js) .j-progress { display: none; }

/* Téléphone : se redresse au fil du défilement (pas de suivi du pointeur ici) */
.journey-visual { align-self: center; justify-self: center; }
.journey .phone-scene { --pw: min(200px, 23.5vh); }
.journey .phone {
  transform: rotateX(calc(8deg - var(--p) * 4deg)) rotateY(calc(-28deg + var(--p) * 20deg)) rotateZ(calc(-2deg + var(--p) * 1deg)) scale(calc(.94 + var(--p) * .06));
  transition: none;
}

/* ---------- Pièces animées ---------- */
.k { --a: 0; --b: 1; --l: clamp(0, calc((var(--p) - var(--a)) / (var(--b) - var(--a))), 1); }
.k-rise { opacity: var(--l); transform: translateY(calc((1 - var(--l)) * 14px)); }
.k-pop { opacity: var(--l); transform: scale(calc(.6 + var(--l) * .4)); }
.k-drop { opacity: var(--l); transform: translateY(calc((var(--l) - 1) * 28px)); }
.k-out { opacity: calc(1 - var(--l)); transform: translateY(calc(var(--l) * -10px)); }

.ps-build { opacity: 1; animation: none; padding-top: 44px; }
.ps-build .ps-bar { --a: .03; --b: .12; }
.ps-build .ps-bar .ps-avatar { --a: .05; --b: .14; }
.ps-build .ps-bar .ps-name { --a: .10; --b: .20; display: inline-block; }

/* Phases : A (RDV + rappel) puis B (fidélité), superposées sous la barre */
.j-pa, .j-pb { position: absolute; left: 16px; right: 16px; top: 78px; bottom: 18px; display: flex; flex-direction: column; gap: 10px; }
.j-pa { --a: .84; --b: .89; }
.j-pb { --a: .86; --b: .92; }

.j-pa .ps-title { --a: .22; --b: .30; }
.j-pa .ps-sub { --a: .26; --b: .34; }
.j-pa .ps-cal > .h { --a: .28; --b: .35; }
.j-pa .ps-cal > span:nth-child(8)  { --a: .31; --b: .37; }
.j-pa .ps-cal > span:nth-child(9)  { --a: .32; --b: .38; }
.j-pa .ps-cal > span:nth-child(10) { --a: .33; --b: .39; }
.j-pa .ps-cal > span:nth-child(11) { --a: .34; --b: .40; }
.j-pa .ps-cal > span:nth-child(12) { --a: .35; --b: .41; }
.j-pa .ps-cal > span:nth-child(13) { --a: .36; --b: .42; }
.j-pa .ps-cal > span:nth-child(14) { --a: .37; --b: .43; }
.j-pa .ps-cal > span:nth-child(15) { --a: .38; --b: .44; }
.j-pa .ps-cal > span:nth-child(16) { --a: .39; --b: .45; }
.j-pa .ps-cal > span:nth-child(17) { --a: .40; --b: .46; }
.j-pa .ps-cal > span:nth-child(18) { --a: .41; --b: .47; }
.j-pa .ps-cal > span:nth-child(19) { --a: .42; --b: .48; }
.j-pa .ps-cal > span:nth-child(20) { --a: .43; --b: .49; }
.j-pa .ps-cal > span:nth-child(21) { --a: .44; --b: .50; }
.j-pa .ps-cal > .sel { --s: clamp(0, calc((var(--p) - .48) / .04), 1); background: rgb(58 87 232 / var(--s)); color: color-mix(in srgb, #fff calc(var(--s) * 100%), var(--ink)); }
.j-pa .ps-slots > span:nth-child(1) { --a: .50; --b: .56; }
.j-pa .ps-slots > span:nth-child(2) { --a: .52; --b: .58; }
.j-pa .ps-slots > span:nth-child(3) { --a: .54; --b: .60; }
.j-pa .ps-slots > .sel { --s: clamp(0, calc((var(--p) - .58) / .04), 1); background: color-mix(in srgb, var(--ink) calc(var(--s) * 100%), var(--grey)); color: color-mix(in srgb, #fff calc(var(--s) * 100%), var(--ink)); }
.j-pa .ps-btn { --a: .61; --b: .67; }

/* Rappel : la notification tombe sur l'écran, puis « confirmé » */
.j-notif { position: absolute; left: 0; right: 0; top: 34px; --a: .69; --b: .76; box-shadow: 0 18px 30px -16px rgb(11 11 15 / .45); background: #fff; border: 1px solid var(--line); z-index: 2; }
.j-notif .ps-row { --a: .75; --b: .80; margin-top: 6px; }
.j-notif .ps-ok { --a: .80; --b: .84; position: absolute; right: 10px; top: 10px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--blue); color: #fff; }
.j-notif .ps-ok svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* Fidélité */
.j-pb .ps-title { --a: .88; --b: .93; }
.j-pb .ps-card { --a: .89; --b: .94; }
.j-pb .ps-stamps > span:nth-child(1) { --a: .90; --b: .93; }
.j-pb .ps-stamps > span:nth-child(2) { --a: .91; --b: .94; }
.j-pb .ps-stamps > span:nth-child(3) { --a: .92; --b: .95; }
.j-pb .ps-stamps > span:nth-child(4) { --a: .93; --b: .96; }
.j-pb .ps-stamps > span:nth-child(5) { --a: .94; --b: .97; }
.j-pb .ps-stamps > span:nth-child(6) { --a: .95; --b: .98; }
.j-pb .ps-stamps > span.on { background: rgb(58 87 232 / var(--l)); border-color: color-mix(in srgb, var(--blue) calc(var(--l) * 100%), rgb(255 255 255 / .3)); }
.j-pb .ps-sub { --a: .95; --b: .99; }
.j-pb .ps-btn { --a: .96; --b: 1; }

/* ---------- Tablette / bureau ---------- */
@media (min-width: 768px) {
  .journey { --jh: 380vh; }
  .journey-grid { grid-template-columns: 1.05fr .95fr; grid-template-rows: none; align-items: center; gap: 2rem; padding-top: 0; }
  .journey-text h1 { margin-bottom: .9rem; font-size: clamp(2.2rem, 4.4vw, 3.7rem); }
  .journey-text .lead { font-size: 1.15rem; margin-bottom: 1.25rem; }
  .j-steps { gap: .8rem; margin-bottom: 1.75rem; }
  .j-step { padding-left: 1.6rem; }
  .j-step strong { font-size: 1.25rem; }
  .journey .phone-scene { --pw: min(280px, 34vh); }
  .journey .cta-group { margin-top: .5rem; }
}
@media (min-width: 1024px) {
  .journey .phone-scene { --pw: min(300px, 36vh); }
}

/* ---------- Téléphone : une seule étape visible à la fois, sous le titre ---------- */
@media (max-width: 767.98px) {
  .journey-text .lead { display: none; }
  .j-steps { height: 4.4rem; margin: .25rem 0 .4rem; }
  .j-step { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); pointer-events: none; }
  .journey[data-step="0"] .j-step[data-i="0"], .journey[data-step="1"] .j-step[data-i="1"],
  .journey[data-step="2"] .j-step[data-i="2"], .journey[data-step="3"] .j-step[data-i="3"] { opacity: 1; transform: none; }
  .journey:not(.is-js) .j-steps { height: auto; }
  .journey:not(.is-js) .j-step { position: static; opacity: 1; transform: none; }
  .journey .cta-group .btn-ghost { display: none; }
  .journey .cta-note { display: none; }
  .journey-visual { padding-bottom: 1.5rem; }
}

/* ---------- Mouvement réduit : tout est en place, pas d'épinglage ---------- */
@media (prefers-reduced-motion: reduce) {
  .journey, .journey.is-js { --p: .66; min-height: 0; }
  .journey-pin { position: static; height: auto; }
  .j-in { animation: none; }
  .j-hint::after { animation: none; }
  .j-hint, .j-progress { display: none; }
  .j-step { opacity: 1 !important; }
  .journey .phone { transform: rotateX(6deg) rotateY(-16deg) rotateZ(-1.5deg); }
}