/* Les scènes d'attente (showcase.js) et leurs maquettes (vignettes.js). La vitrine de l'arrivée a son propre fichier (story.css).
   Tout tient dans un plateau de hauteur fixe (220 px, 200 px sur téléphone) : rien ne saute d'une étape à l'autre.
   Pas de libellés en capitales, pas de trame décorative : du texte lisible et de vrais morceaux d'interface (data-ui).
   Animations : transform et opacité seulement, décalées par --d ; l'état final est le style normal (reduced-motion le montre). */

/* Scène : sous la barre d'avancement, pendant une tâche */
.scene { display: grid; gap: 10px; margin-bottom: 20px; }
.scene-text { min-height: calc(2 * 1.5em); font-size: var(--fs-small); color: var(--body); line-height: 1.5; animation: fade-in var(--slow) var(--ease-out); }

/* Le plateau : un fond un ton plus sombre, l'exemple posé dessus. Hauteur fixe, identique pour toutes les maquettes. */
.vg-stage { display: grid; align-items: center; height: 220px; padding: 10px; border-radius: var(--radius-card); background: var(--raised); overflow: hidden; }

.vg { display: grid; gap: 8px; width: 100%; min-width: 0; font-size: 13.5px; color: var(--text); animation: fade-in var(--medium) var(--ease-out); }
.vg strong { font-weight: 600; }
.vg-panel { padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.vg-label { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.vg-ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.vg-sub { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.vg-pending { display: inline-block; width: var(--w); max-width: 100%; height: 9px; border-radius: 4px; background: var(--active); vertical-align: middle; }
.vg-chips { display: flex; align-items: center; gap: 6px; min-width: 0; }
.vg-chips .vg-label { flex: none; }
.vg-chip { display: inline-flex; align-items: center; min-width: 0; 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; overflow: hidden; text-overflow: ellipsis; }
.vg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vg-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 6px 12px; background: var(--surface); border-radius: 8px; }
.vg-row-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.vg-row strong, .vg-row-main > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-row.is-trap strong { color: var(--muted); }
.vg-struck { position: relative; justify-self: start; display: inline-block; max-width: 100%; vertical-align: bottom; }
.vg-strike { position: absolute; left: -2px; right: -2px; top: 52%; height: 1.5px; background: var(--muted); transform-origin: left; }
.vg-ok { flex: none; width: 18px; height: 18px; }
.vg-check { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--accent-on); }

/* 2. L'analyse Google : cinq pages lues, ce qu'elles couvrent, ce qu'elles oublient, une barre de comparaison */
.vg-brief { gap: 8px; }
.vg-pages { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; overflow: hidden; border-radius: 6px; }
.vg-page { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 30px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12.5px; font-weight: 600; }
.vg-scan { position: absolute; inset: 0; border-right: 2px solid var(--accent); opacity: 0; transform-origin: left; animation: scan 2.2s linear 0.3s both; }
.vg-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.vg-point { position: relative; display: flex; align-items: center; gap: 8px; min-height: 26px; padding: 0 8px; isolation: isolate; }
.vg-point-mark { flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--active); color: var(--muted); }
.vg-point-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-point .num, .vg-cmp-row .num { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.vg-point.is-gap { font-weight: 600; color: var(--accent-ink); }
.vg-point.is-gap::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 6px; background: var(--accent-soft); animation: fade-in 0.6s var(--ease-out) calc(var(--d, 0ms) + 250ms) both; }
.vg-point.is-gap .vg-point-mark { background: var(--accent); color: var(--accent-on); }
.vg-point.is-gap .num { color: var(--accent-ink); }
.vg-compare { display: grid; gap: 4px; }
.vg-cmp-row { display: grid; grid-template-columns: 88px minmax(0, 1fr) 42px; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.vg-cmp-row.is-you { color: var(--text); font-weight: 600; }
.vg-cmp-row .num { text-align: right; margin-left: 0; }
.vg-meter { display: block; height: 8px; border-radius: 99px; background: var(--active); overflow: hidden; }
.vg-meter > span { display: block; width: var(--w); height: 100%; border-radius: 99px; background: var(--control-hover); transform-origin: left; }
.vg-cmp-row.is-you .vg-meter > span { background: var(--accent); }

/* 3. L'article : les lignes s'écrivent (un voile glisse de gauche à droite), puis le lien se pose */
.vg-write { gap: 8px; }
.vg-write .vg-h1, .vg-write .vg-p { font-family: var(--serif); }
.vg-line { position: relative; }
.vg-line::after { content: ''; position: absolute; inset: 0; background: var(--surface); transform: scaleX(0); transform-origin: right; animation: unveil 0.9s var(--ease-gentle) var(--d, 0ms) both; }
.vg-h1 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.vg-p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--body); font-size: 14.5px; line-height: 1.45; }
.vg-anchor { position: relative; display: inline-block; color: var(--accent-ink); font-weight: 600; }
.vg-underline { position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--accent); transform-origin: left; }

/* 4. Les contrôles : la jauge monte jusqu'à la note, puis trois coches */
.vg-gauge-track .vg-meter { height: 10px; }
.vg-gauge-track .vg-meter > .vg-gauge-fill { background: var(--accent); animation: grow 1.9s cubic-bezier(0.33, 1, 0.68, 1) var(--d, 0ms) both; }

/* 5. La publication : l'article part au créneau d'un petit calendrier, relu ou en pilote automatique */

/* 6. Le suivi : la courbe des places monte, de nouveaux sujets arrivent */
.vg-place { font-weight: 600; }
.vg-place .swap > span { justify-content: flex-end; }
.vg-chart { position: relative; }
.vg-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.vg-band { fill: var(--accent-soft); }
.vg-band-label { position: absolute; top: 5px; left: 8px; font-size: 11.5px; font-weight: 500; color: var(--accent-ink); }
.vg-seg { stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.vg-point-dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.vg-point-dot.is-now { fill: var(--accent); }
.vg-ring { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; animation: ring 0.9s var(--ease-out) var(--d, 0ms) forwards; }
.vg-follow svg .vg-point-dot, .vg-follow svg .vg-ring { transform-box: fill-box; transform-origin: center; }
.vg-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Libellé qui roule : l'ancien monte et sort, le nouveau arrive par en dessous */
.swap { display: inline-grid; overflow: hidden; vertical-align: middle; }
.swap > span { grid-area: 1 / 1; display: inline-flex; justify-content: flex-end; }
.swap-from { opacity: 0; animation: roll-out 0.32s var(--ease-gentle) var(--d, 0ms) both; }
.swap-to { animation: roll-in 0.32s var(--ease-gentle) var(--d, 0ms) both; }

/* Entrées des maquettes, décalées par --d */
.a-rise { animation: rise var(--slow) var(--ease-out) var(--d, 0ms) both; }
.a-pop { animation: pop-in 0.42s var(--ease-back) var(--d, 0ms) both; }
.a-grow { transform-origin: left; animation: grow 0.6s var(--ease-out) var(--d, 0ms) both; }
.a-fade { animation: fade-in 0.5s var(--ease-out) var(--d, 0ms) both; }
.a-read { animation: read 0.45s var(--ease-back) var(--d, 0ms) both; }
.a-fly { animation: fly 0.8s var(--ease-out) var(--d, 0ms) both; }

@keyframes grow { from { transform: scaleX(0); } }
@keyframes unveil { from { transform: scaleX(1); } }
@keyframes read { from { opacity: 0.2; transform: translateY(5px) scale(0.9); } }
@keyframes scan { from { opacity: 1; transform: translateX(-100%); } 90% { opacity: 1; } to { opacity: 0; transform: none; } }
@keyframes fly { from { opacity: 0; transform: translateY(46px) scale(0.7); } 55% { opacity: 1; } }
@keyframes ring { from { opacity: 0.8; transform: scale(0.4); } to { opacity: 0; transform: scale(1.7); } }

@media (max-width: 640px) {
  .vg-stage { height: 200px; }
  .scene-text { min-height: calc(3 * 1.5em); }
  .vg { font-size: 13px; }
  .vg-panel { padding: 10px; }
  .vg-chips .vg-label { display: none; }
  .vg-row { min-height: 38px; padding: 5px 10px; gap: 8px; }
  .vg-page { min-height: 26px; }
  .vg-brief { gap: 6px; }
  .vg-point { min-height: 23px; }
  .vg-cmp-row { grid-template-columns: 80px minmax(0, 1fr) 40px; }
  .vg-foot-note { display: none; }
  .vg-foot { justify-content: flex-end; }
  .vg-write { gap: 6px; }
  .vg-h1 { font-size: 15px; }
  .vg-p { font-size: 13px; }
}