/* Le récit de l'arrivée (story.js) : une carte, une scène de hauteur fixe (248 px), une phrase, six points.
   Dans la scène, une seule fenêtre : sa barre (recherche Google, puis adresse de l'article) glisse par transform et change
   de texte ; le contenu de chaque moment entre en fondu, décalé par --d. L'état final de chaque élément est son style
   normal : c'est ce que montre reduced-motion, et ce que montre un point cliqué une fois l'entrée finie. */

.story {
  --story-travel: cubic-bezier(0.65, 0, 0.35, 1);
  --row: 36px;
  --row-gap: 4px;
  display: grid; gap: 12px; padding: 20px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); /* taste-skill-ignore : carte de l'arrivée, comme les autres cartes de l'application */
}
.story-title { font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -0.03em; text-wrap: balance; }
.story-sub { margin-top: 2px; font-size: var(--fs-small); color: var(--muted); line-height: 1.35; }

.story-stage { position: relative; height: 248px; border-radius: var(--radius-card); background: var(--raised); overflow: hidden; }
.story-text { min-height: calc(2 * 1.5em); color: var(--body); font-size: 14.5px; line-height: 1.5; text-wrap: pretty; animation: st-fade 420ms var(--ease-out) both; }

.story-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.story-nav .btn { flex: none; }
.story-dots { display: flex; margin-left: -8px; }
.story-dot { display: grid; place-items: center; width: 28px; height: 32px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.story-dot span { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--control-hover); transition: background-color var(--fast) ease, border-color var(--fast) ease; }
.story-dot:hover span { border-color: var(--text); }
.story-dot.is-on span { background: var(--text); border-color: var(--text); }

/* La fenêtre : la même d'un bout à l'autre du récit */
.sw { position: absolute; inset: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; font-size: 13.5px; color: var(--text); } /* taste-skill-ignore : la fenêtre du navigateur, une maquette d'interface */
.sw strong { font-weight: 600; }
.sw-body { position: absolute; left: 0; right: 0; top: 44px; bottom: 0; }

/* Les couches d'un moment : celle qui part s'efface vite, celle qui arrive entre juste après */
.sl { position: absolute; inset: 0; padding: 6px 12px 10px; opacity: 0; transition: opacity 200ms var(--ease-out); }
.sl.is-on { opacity: 1; transition: opacity 360ms var(--ease-out) 100ms; }

/* La barre : au centre pour la recherche, en haut ensuite */
.sb-field { position: absolute; left: 10px; right: 10px; top: 6px; height: 32px; display: flex; align-items: center; padding: 0 4px 0 12px; border-radius: 16px; background: var(--raised); transition: transform 700ms var(--story-travel); }
.story[data-m='0'] .sb-field { transform: translateY(71px); }
.sb-in { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; animation: st-fade 300ms var(--ease-out) both; }
.sb-in.is-same { animation: none; }
.sb-addr { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--muted); }
.sb-addr svg { flex: none; }
.sb-text { min-width: 0; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-addr.is-live svg { color: var(--accent); }
.sb-addr.is-live .sb-text { color: var(--body); }
.sb-query { position: relative; display: grid; min-width: 0; color: var(--text); }
.sb-query > span { grid-area: 1 / 1; white-space: nowrap; }
.sb-placeholder { color: var(--faint); opacity: 0; }
.sb-typed { justify-self: start; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sb-caret { justify-self: start; width: 1.5px; height: 17px; align-self: center; background: var(--text); opacity: 0; }
.sb-swap { flex: 1; min-width: 0; display: grid; }
.sb-swap > span { grid-area: 1 / 1; min-width: 0; display: flex; }
.sb-old { opacity: 0; }

/* 4. Le bouton Valider, enfoncé par le pointeur, devient « Publié » */
.sv { position: relative; flex: none; }
.sv-press { display: grid; }
.sv-press > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 24px; padding: 0 11px; border-radius: 12px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.sv-a { background: var(--primary); color: var(--primary-on); opacity: 0; }
.sv-b { background: var(--accent-soft); color: var(--accent-ink); }

/* Le pointeur : il arrive en diagonale puis appuie */
.sc { position: absolute; left: 55%; top: 45%; z-index: 2; pointer-events: none; opacity: 0; }
.sr .sc { left: auto; right: 14%; top: 50%; }
.sp .sc { left: 30px; top: 26px; }
.sc svg { display: block; }

/* 1. Une cliente cherche */
.s1-volume { position: absolute; left: 12px; right: 12px; top: 77px; margin: 0; display: flex; justify-content: center; }
.s1-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 11px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; font-weight: 500; white-space: nowrap; }

/* 2 et 5. Les résultats : les places restent, les lignes bougent */
.sr-list { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 6px; }
.sr-ranks, .sr-rows { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: var(--row); row-gap: var(--row-gap); align-content: start; }
.sr-ranks li { display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.sr { position: relative; display: grid; align-content: center; padding: 0 8px; border-radius: 7px; min-width: 0; }
.sr-site, .sr-title { position: relative; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-site { font-size: 12px; line-height: 15px; color: var(--muted); }
.sr-title { font-size: 13.5px; line-height: 18px; font-weight: 600; color: var(--text); }
.sr.is-absent { background: var(--raised); }
.sr.is-absent .sr-site { font-size: 13px; line-height: 18px; color: var(--body); }
.sr.is-absent strong { color: var(--text); }
.sr.is-you { z-index: 1; background: var(--surface); }
.sr.is-you::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--accent-soft); }
.sr.is-you .sr-site { color: var(--accent-ink); font-weight: 600; }
.s5-when { margin: 0 0 6px; height: 22px; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text); }
.s5-when svg { color: var(--muted); }

/* 3, 4 et 6. L'article sur votre boutique */
.sa { display: grid; gap: 6px; align-content: start; padding-top: 2px; }
.sa-title { font-family: var(--serif); font-size: 16px; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.sa-line { position: relative; justify-self: start; max-width: 100%; font-family: var(--serif); font-size: 13.5px; line-height: 19px; color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.sp { position: relative; display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 8px 0 6px; border-radius: 8px; background: var(--raised); min-width: 0; }
.sp-pic, .sp-txt { position: relative; }
.sp-pic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 6px; background: var(--surface); color: var(--accent-ink); }
.sp-txt { display: grid; min-width: 0; }
.sp-name { font-size: 12.5px; line-height: 15px; color: var(--body); }
.sp-price { font-size: 13.5px; line-height: 18px; font-variant-numeric: tabular-nums; }
.sp.is-picked::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--accent-soft); }

/* 6. La commande tombe, puis le partage des rôles */
.s6-order { position: absolute; left: 10px; right: 10px; top: 6px; z-index: 3; height: 32px; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 16px; background: var(--accent); color: var(--accent-on); font-weight: 600; white-space: nowrap; }
.s6-roles { position: absolute; left: 12px; right: 12px; bottom: 10px; margin: 0; padding: 7px 10px; border-radius: 8px; background: var(--raised); font-size: 13px; line-height: 1.4; color: var(--body); text-wrap: balance; }
.s6-roles strong { color: var(--text); }
.s6-roles > span { display: block; }

/* Entrées, décalées par --d. Aucune ne rebondit. Sans animation, chaque élément reste à son état final. */
@media (prefers-reduced-motion: no-preference) {
  .st-in { animation: st-in 420ms var(--ease-out) var(--d, 0ms) both; }
  .st-pop { animation: st-pop 380ms var(--ease-out) var(--d, 0ms) both; }
  .st-out { animation: st-out 220ms var(--ease-out) var(--d, 0ms) both; }
  .st-drop { animation: st-drop 480ms var(--ease-out) var(--d, 0ms) both; }

  .sb-placeholder { animation: st-hint 1500ms linear both; }
  .sb-typed { animation: st-type 1000ms steps(30, end) 450ms both; }
  .sb-caret { animation: st-caret-move 1000ms steps(30, end) 450ms both, st-caret-life 1800ms linear both; }

  .sc { animation: sc-move 800ms var(--story-travel) var(--d) both; }
  .sc svg { animation: sc-press 260ms var(--ease-out) var(--p) both; }
  .sv-press { animation: sc-press-btn 260ms var(--ease-out) var(--d) both; }

  .sa.is-writing .sa-title { animation: st-in 420ms var(--ease-out) 150ms both; }
  .sa.is-writing .sa-line::after { content: ''; position: absolute; inset: 0 -2px; background: var(--surface); transform-origin: right; animation: st-unveil 800ms var(--ease-gentle) var(--d) both; }
  .sa.is-writing .sp { animation: st-pop 380ms var(--ease-out) 1500ms both; }
  .sa.is-writing .sp + .sp { animation-delay: 1650ms; }

  .sr-climb { animation: sr-climb 2000ms var(--story-travel) var(--d) both; }
  .sr-yield { animation: sr-yield 2000ms var(--story-travel) var(--d) both; }
  .sr.is-you::before { animation: st-fade 500ms var(--ease-out) 2500ms both; }
  .sp.is-picked::before { animation: st-fade 300ms var(--ease-out) 1450ms both; }
}

@keyframes st-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes st-fade { from { opacity: 0; } }
@keyframes st-pop { from { opacity: 0; transform: scale(0.88); } }
@keyframes st-out { from { opacity: 1; } }
@keyframes st-drop { from { opacity: 0; transform: translateY(-12px); } }
@keyframes st-unveil { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes st-hint { from, 25% { opacity: 1; } 30%, to { opacity: 0; } }
@keyframes st-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes st-caret-move { from { transform: translateX(0); } to { transform: translateX(var(--tw, 200px)); } }
@keyframes st-caret-life { from, 88% { opacity: 1; } to { opacity: 0; } }
@keyframes sc-move { from { opacity: 0; transform: translate(64px, 56px); } 25% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes sc-press { 50% { transform: scale(0.8); } }
@keyframes sc-press-btn { 50% { transform: scale(0.92); } }
/* Votre ligne entre à la 3e place, puis passe devant le concurrent B */
@keyframes sr-climb {
  from { opacity: 0; transform: translateY(calc(var(--row) + var(--row-gap) + 8px)); }
  20%, 45% { opacity: 1; transform: translateY(calc(var(--row) + var(--row-gap))); }
}
@keyframes sr-yield { from, 45% { transform: translateY(calc(-1 * (var(--row) + var(--row-gap)))); } }

@media (max-width: 640px) {
  .story { padding: 16px; }
  .story-title { font-size: 18px; }
  .story-sub { font-size: var(--fs-meta); }
  .story-text { min-height: calc(3 * 1.5em); font-size: 14px; }
  .sa-title { font-size: 15px; }
  .sa-line { font-size: 13px; }
  .s1-chip { font-size: 12.5px; padding: 0 10px; }
  .sr-title { font-size: 13px; }
}

/* Moins d'animations : chaque moment s'affiche fini, les points mènent de l'un à l'autre ; pas de pointeur */
@media (prefers-reduced-motion: reduce) {
  .story *, .story *::before, .story *::after { animation: none !important; transition: none !important; }
  .sc { display: none; }
}