/* ------------------------------------------------------------
   view-landing-story.css — récit au scroll (landing, 05/11/2026)
   ------------------------------------------------------------
   Reprise complète après rejet de Ben : navigateur et téléphone côte à
   côte à la même échelle écrasaient l'un l'autre (un navigateur est large
   et court, un téléphone étroit et haut — rien ne justifie de les montrer
   au même poids visuel). UN SEUL grand cadre à la fois : le navigateur
   pour les étapes "studio" (01 à 04), le téléphone prend toute la scène
   pour sa propre étape (05) plutôt qu'un strapontin à côté du navigateur.
   Pas d'eyebrow répété comme les sections précédentes (déjà retirées) :
   un numéro d'étape (Funnel Display, violet) sert de repère — légitime
   ici, c'est une vraie séquence qu'on descend.
   Cadres dessinés en CSS, jamais cuits dans les captures (vraies captures
   de /app et de l'app mobile, jamais de contenu inventé).
   ------------------------------------------------------------ */

.platform-story { padding: clamp(70px, 9vw, 150px) 0 clamp(90px, 10vw, 160px); }
.platform-story__intro { max-width: 720px; margin-bottom: clamp(40px, 5vw, 80px); }
.platform-story__intro h2 { font-size: clamp(32px, 4vw, 48px); }

.platform-story__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 64px;
  align-items: start;
}

.platform-story__stage {
  position: sticky;
  top: 72px;
  height: 520px;
  display: grid;
}

/* Les deux cadres occupent la MÊME cellule de grille (superposés) : un seul
   est visible à la fois, via [data-active] posé par landing-story.js. */
.device-frame {
  grid-area: 1 / 1;
  align-self: center;
  justify-self: start;
  opacity: 0;
  transform: scale(.97);
  transition: opacity .45s ease, transform .45s ease;
}
.device-frame[data-active] { opacity: 1; transform: scale(1); }

/* ---------- Cadre navigateur : grand et confiant, pas une vignette ---------- */
.device-frame[data-frame="browser"] {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 40px 90px -30px rgba(82, 53, 232, .35), 0 10px 30px rgba(14, 20, 25, .12);
}
.device-frame__chrome {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.device-frame__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.device-frame[data-frame="browser"] .device-frame__screen { position: relative; height: calc(100% - 38px); overflow: hidden; background: var(--bg); }
.device-frame[data-frame="browser"] .device-frame__screen img { object-fit: contain; object-position: top; }

/* ---------- Cadre téléphone : châssis titane, pas une boîte noire ----------
   Repris des vraies proportions d'un iPhone 15 Pro (393×852 pt), portées de
   vagua-web/src/components/landing/CadreIphone.tsx — déjà la référence
   validée pour un cadre crédible. Rejeté le 05/11 : un rectangle noir avec
   une pilule en guise d'île n'a pas la présence d'un vrai appareil. */
.device-frame--phone {
  --tel-largeur: 240px;
  --tel-chassis: 2px;   /* 3/393 */
  --tel-bordure: 3px;   /* 4/393, arrondi pour rester visible à cette échelle */
  --tel-rayon: 34px;    /* 55/393 */
  position: relative;   /* les tranches et l'île se positionnent par rapport au châssis, pas à la scène */
  justify-self: center;
  width: var(--tel-largeur);
  aspect-ratio: 9 / 19.5;
  padding: var(--tel-chassis);
  border-radius: calc(var(--tel-rayon) + var(--tel-bordure) + var(--tel-chassis));
  background: linear-gradient(145deg, #e9e6e1 0%, #b9b3ab 18%, #8d867e 42%, #c9c4bd 62%, #8d867e 84%, #dedad4 100%);
  box-shadow: 0 40px 90px -30px rgba(82, 53, 232, .35), 0 10px 30px rgba(14, 20, 25, .12);
}
/* Tranches : sans les boutons, un châssis reste un rectangle arrondi. */
.device-frame--phone::before, .device-frame--phone::after {
  content: "";
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #8d867e, #c9c4bd);
}
.device-frame--phone::before { left: -2px; top: 19%; height: 7%; }
.device-frame--phone::after { right: -2px; top: 22%; height: 10%; background: linear-gradient(270deg, #8d867e, #c9c4bd); }
.device-frame--phone .device-frame__screen {
  position: relative;
  height: 100%;
  padding: var(--tel-bordure);
  border-radius: calc(var(--tel-rayon) + var(--tel-bordure));
  background: #0a0a0c;
}
.device-frame--phone .device-frame__screen img {
  position: absolute;
  inset: var(--tel-bordure);
  width: calc(100% - var(--tel-bordure) * 2);
  height: calc(100% - var(--tel-bordure) * 2);
  border-radius: var(--tel-rayon);
  object-fit: cover;
  object-position: top;
}
.device-frame__notch {
  position: absolute;
  top: calc(var(--tel-bordure) + 7px);
  left: 50%;
  transform: translateX(-50%);
  width: 76px;
  height: 22px;
  border-radius: var(--r-pill);
  background: #0a0a0c;
  z-index: 2;
}

/* ---------- Image de chaque étape, empilée et crossfadée dans son cadre ---------- */
.device-frame__screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .5s ease;
}
.device-frame__screen img[data-active] { opacity: 1; }

/* ---------- Colonne de texte ---------- */
.platform-story__steps { display: grid; gap: 0; }
.platform-story__step {
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 0;
  /* .3 restait parfaitement lisible sur un titre en gras — l'étape suivante
     se lisait en entier avant d'être active, "on voit ça !!!" (Ben,
     05/11/2026, capture à l'appui). Assez faible pour deviner qu'il y a
     quelque chose à venir, pas assez pour le lire. */
  opacity: .12;
  transition: opacity .4s ease;
}
.platform-story__step[data-active] { opacity: 1; }
.platform-story__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--accent);
  letter-spacing: .04em;
}
.platform-story__step h3 { font-size: clamp(22px, 2.6vw, 30px); margin-top: 10px; }
.platform-story__step p { color: var(--ink-2); margin-top: 12px; font-size: 16px; max-width: 420px; }
.platform-story__soon { font-size: 13px; color: var(--muted); margin-top: 20px; }

@media (max-width: 900px) {
  .platform-story__layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .platform-story__stage { position: static; height: 380px; margin-bottom: 8px; }
  .device-frame[data-frame="browser"] { max-width: 100%; }
  .platform-story__step { min-height: 0; opacity: 1; padding: 20px 0; }
}