/* 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.
   Le téléphone montre quatre écrans, un par étape du récit ; les pièces de chaque écran entrent une à une.
   Hauteurs en svh (stables sur mobile : la barre d'adresse ne fait rien bouger), repli en vh.
   Les tailles de l'écran sont en --u (1 % de la largeur de l'écran, voir css/phone.css) : rien ne déborde. */

.journey { --p: 1; position: relative; min-height: 270vh; min-height: 270svh; padding: 0; }
.journey.is-js { --p: 0; }
.journey-pin {
  position: sticky; top: 4.25rem; height: calc(100vh - 4.25rem); height: calc(100svh - 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"], .journey[data-step="4"] .j-step[data-i="4"] { 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, .journey[data-step="4"] .j-step[data-i="4"]::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 (css/tel.css) : de face par défaut et sur mobile, trois-quarts sur écran large (js/tel.js).
   Il s'avance légèrement au fil du défilement. Tailles en svh (hauteur stable, barre d'adresse comprise), repli en vh. */
.journey-visual { align-self: center; justify-self: center; min-height: 0; }
.journey .tel { --tw: min(150px, 19vh); transform: scale(calc(.94 + var(--p) * .06)); }
@supports (height: 1svh) { .journey .tel { --tw: min(190px, calc((100svh - 22.5rem) / 2.06)); } }

/* ---------- Pièces animées ----------
   Chaque écran (.j-screen) a un départ --s ; chaque pièce (.k) un rang --n : elle entre à --s + --n × 0,02. */
.k { --n: 0; --a: calc(var(--s, 0) + var(--n) * .016); --b: calc(var(--a) + .05); --l: clamp(0, calc((var(--p) - var(--a)) / (var(--b) - var(--a))), 1); }
.n1 { --n: 1; } .n2 { --n: 2; } .n3 { --n: 3; } .n4 { --n: 4; } .n5 { --n: 5; } .n6 { --n: 6; } .n7 { --n: 7; } .n8 { --n: 8; } .n9 { --n: 9; }
.k-rise { opacity: var(--l); transform: translateY(calc((1 - var(--l)) * 14px)); }
.k-pop { opacity: var(--l); transform: scale(calc(.6 + var(--l) * .4)); }

/* ---------- Quatre écrans, un par étape : celui de l'étape en cours est affiché ---------- */
.ps-build {
  animation: none; gap: calc(var(--u) * 4); opacity: 0; transition: opacity .4s var(--ease);
  padding: calc(var(--u) * 17) calc(var(--u) * 7) calc(var(--u) * 9);
  font-size: calc(var(--u) * 5.2); line-height: 1.3;
}
.j-screen[data-i="0"] { --s: -.08; }
.j-screen[data-i="1"] { --s: .18; }
.j-screen[data-i="2"] { --s: .39; }
.j-screen[data-i="3"] { --s: .60; }
.j-screen[data-i="4"] { --s: .81; }
.journey:not(.is-js) .j-screen[data-i="0"],
.journey[data-step="0"] .j-screen[data-i="0"], .journey[data-step="1"] .j-screen[data-i="1"],
.journey[data-step="2"] .j-screen[data-i="2"], .journey[data-step="3"] .j-screen[data-i="3"],
.journey[data-step="4"] .j-screen[data-i="4"] { opacity: 1; }
.ps-build svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ps-build .ps-bar { margin: 0; font-size: calc(var(--u) * 5.6); }
.ps-build .ps-bar .ps-brand { gap: calc(var(--u) * 3); }
.ps-build .ps-bar .ps-avatar { width: calc(var(--u) * 10); height: calc(var(--u) * 10); font-size: calc(var(--u) * 5); }
.ps-build .ps-bar i { width: calc(var(--u) * 9); height: calc(var(--u) * 9); }
.j-lab { font-size: calc(var(--u) * 3.8); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgb(11 11 15 / .5); }
.j-h { margin: 0; font-size: calc(var(--u) * 8); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; }
.j-dark { margin-top: auto; padding: calc(var(--u) * 5.5); border-radius: calc(var(--u) * 6); background: var(--ink); color: #fff; font-size: calc(var(--u) * 6); font-weight: 600; line-height: 1.25; }
.j-dark small { display: block; margin-bottom: calc(var(--u) * 1.4); font-size: calc(var(--u) * 4.2); font-weight: 500; opacity: .7; }

/* 1. Ton nom, ton logo */
.j-id { display: grid; justify-items: center; gap: calc(var(--u) * 2.4); padding: calc(var(--u) * 9) calc(var(--u) * 5); border-radius: calc(var(--u) * 8); background: linear-gradient(160deg, #6F88FF, var(--blue) 60%, #2B41C4); color: #fff; text-align: center; }
.j-logo { display: grid; place-items: center; width: calc(var(--u) * 24); height: calc(var(--u) * 24); border-radius: 28%; background: #fff; color: var(--blue); font-size: calc(var(--u) * 13); font-weight: 800; box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 5) rgb(11 20 80 / .35); }
.j-id b { font-size: calc(var(--u) * 8.4); letter-spacing: -.02em; line-height: 1.1; }
.j-id b + span { font-size: calc(var(--u) * 4.4); opacity: .85; }
.j-sw { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 3); padding: calc(var(--u) * 4) calc(var(--u) * 5); border-radius: calc(var(--u) * 5); background: var(--grey); font-weight: 600; }
.j-sw span { display: flex; gap: calc(var(--u) * 1.8); }
.j-sw i { width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: var(--ink); }
.j-sw i:nth-child(2) { background: var(--blue); box-shadow: 0 0 0 calc(var(--u) * .9) #fff, 0 0 0 calc(var(--u) * 1.6) var(--blue); }
.j-sw i:nth-child(3) { background: #AEBBFF; }
.j-sw i:nth-child(4) { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.j-cta { margin-top: auto; display: grid; gap: calc(var(--u) * 2.4); }
.j-cta span { padding: calc(var(--u) * 4.4) 0; border-radius: 999px; background: var(--blue); color: #fff; text-align: center; font-weight: 600; font-size: calc(var(--u) * 5); line-height: 1.2; }
.j-cta span + span { background: var(--grey); color: var(--ink); }

/* 2. Un problème à régler ? L'appli s'en charge */
.j-todo { display: grid; gap: calc(var(--u) * 2.6); margin: 0; padding: 0; list-style: none; }
.j-todo li { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 3); padding: calc(var(--u) * 4.6) calc(var(--u) * 5.5); border-radius: calc(var(--u) * 5.5); background: var(--grey); font-weight: 600; line-height: 1.2; }
.j-chk { flex: none; display: grid; place-items: center; width: calc(var(--u) * 8.5); height: calc(var(--u) * 8.5); border-radius: 50%; background: rgb(58 87 232 / var(--l)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--blue) calc(var(--l) * 100%), rgb(11 11 15 / .2)); color: #fff; }
.j-chk svg { width: 60%; height: 60%; stroke-width: 2.8; opacity: var(--l); }

/* 3. Tout ce que tu as en tête */
.j-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 3); }
.j-tile { display: grid; justify-items: center; align-content: center; gap: calc(var(--u) * 2); aspect-ratio: 1; border-radius: calc(var(--u) * 6); background: var(--grey); font-size: calc(var(--u) * 4); font-weight: 600; text-align: center; }
.j-tile svg { width: calc(var(--u) * 10); height: calc(var(--u) * 10); color: var(--blue); }
.j-tile.is-add { background: none; color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue); }

/* 4. Ça tourne tout seul */
.j-live { align-self: flex-start; display: inline-flex; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 2) calc(var(--u) * 4); border-radius: 999px; background: #EEF1FF; color: var(--blue); font-size: calc(var(--u) * 4); font-weight: 600; }
.j-live::before { content: ""; width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); border-radius: 50%; background: currentColor; }
.j-feed { display: grid; gap: calc(var(--u) * 2.6); margin: 0; padding: 0; list-style: none; }
.j-feed li { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: calc(var(--u) * 3); padding: calc(var(--u) * 4.6) calc(var(--u) * 5); border-radius: calc(var(--u) * 5); background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; }
.j-feed small { grid-column: 1; font-size: calc(var(--u) * 4.2); font-weight: 500; color: rgb(11 11 15 / .55); }
.j-feed .j-chk { grid-column: 2; grid-row: 1 / span 2; background: var(--blue); box-shadow: none; }
.j-feed .j-chk svg { opacity: 1; }

/* 1 bis. Tout peut y être : envies, fonctions, agenda… */
.j-more { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2); }
.j-more span { padding: calc(var(--u) * 3) calc(var(--u) * 3.4); border-radius: calc(var(--u) * 4); background: var(--grey); font-weight: 600; font-size: calc(var(--u) * 4.4); text-align: center; }
.j-more .is-add { background: none; color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue); }

/* 5. Que pour toi, ou pour toute ton équipe */
.j-seg { display: grid; grid-template-columns: 1fr 1fr; padding: calc(var(--u) * 1.2); border-radius: 999px; background: var(--grey); font-weight: 600; text-align: center; }
.j-seg span { padding: calc(var(--u) * 2.6) 0; border-radius: 999px; }
.j-seg .on { background: var(--blue); color: #fff; }
.j-team { display: grid; gap: calc(var(--u) * 2.4); margin: 0; padding: 0; list-style: none; }
.j-team li { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: calc(var(--u) * 3.4); padding: calc(var(--u) * 3.6) calc(var(--u) * 4.4); border-radius: calc(var(--u) * 5); background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; }
.j-team i { grid-row: 1 / span 2; display: grid; place-items: center; width: calc(var(--u) * 10); height: calc(var(--u) * 10); border-radius: 50%; background: #EEF1FF; color: var(--blue); font-style: normal; font-weight: 700; }
.j-team small { font-size: calc(var(--u) * 4); font-weight: 500; color: rgb(11 11 15 / .55); }
.j-team .is-add { background: none; color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue); }
.j-team .is-add i { grid-row: auto; background: var(--blue); color: #fff; }

/* ---------- Tablette / bureau ---------- */
@media (min-width: 768px) {
  .journey { min-height: 305vh; min-height: 305svh; }
  .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 .tel { --tw: min(214px, 26vh); }
  @supports (height: 1svh) { .journey .tel { --tw: min(214px, 26svh); } }
  .journey .cta-group { margin-top: .5rem; }
}
@media (min-width: 1024px) {
  .journey .tel { --tw: min(230px, 27.6vh); }
  @supports (height: 1svh) { .journey .tel { --tw: min(230px, 27.6svh); } }
}

/* ---------- 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: 3.6rem; margin: .25rem 0 .4rem; }
  .j-step strong { font-size: min(1.12rem, 4.4vw); }
  .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"], .journey[data-step="4"] .j-step[data-i="4"] { 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; }
}
/* Très petit téléphone : l'étape passe sur trois lignes, le téléphone rétrécit d'autant */
@media (max-width: 359.98px) {
  .j-steps { height: 4.9rem; }
  @supports (height: 1svh) { .journey .tel { --tw: min(190px, calc((100svh - 24.5rem) / 2.06)); } }
}

/* ---------- Mouvement réduit : tout est en place, pas d'épinglage ---------- */
@media (prefers-reduced-motion: reduce) {
  .journey, .journey.is-js { --p: 1; min-height: 0; }
  .journey-pin { position: static; height: auto; }
  .journey-grid { padding-bottom: 2rem; }
  .j-in { animation: none; }
  .j-hint::after { animation: none; }
  .j-hint, .j-progress { display: none; }
  .j-step { opacity: 1 !important; }
  .journey .tel { transform: none; }
}