/*
 * Vitrine de PodiVision : la palette et la typo du tirage taste-skill (start.mjs brand, couleurs de la marque, Geist),
 * puis le CSS de page, seulement à l'intérieur des visuels : la fenêtre d'analyse du héro, l'historique et le compte
 * rendu, le comparatif, la démonstration du tracé, la vue posturale. Chargé après layout.css, qui remet --ly-scale.
 * Comme le reste du kit, cette feuille ne s'applique qu'à la vitrine : l'application la désactive dès qu'elle s'affiche.
 */
:root {
  --p-bg: #ffffff; --p-surface: #f3f6f6; --p-ink: #142229; --p-muted: #45545b;
  --p-accent: #0e6b6b; --p-accent-ink: #ffffff; --p-action: #0e6b6b; --p-action-ink: #ffffff;
  --p-inv-bg: #142229; --p-inv-surface: #222f36; --p-inv-ink: #ffffff; --p-inv-muted: #9da3a7;
  --p-inv-accent: #ffffff; --p-inv-accent-ink: #142229; --p-inv-action: #ffffff; --p-inv-action-ink: #142229;
  --font-display: "Geist Variable", system-ui, sans-serif;
  --font-text: "Geist Variable", system-ui, sans-serif;
  --font-mono: "Geist Mono Variable", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --display-weight: 500;
  --display-tracking: -0.035em;
  --display-tracking-xl: -0.04em;
  /* l'orange des angles et des mesures, le même que dans l'application */
  --pv-measure: #c2410c;
  --pv-line: #e4eaec;
  --pv-soft: #f3f6f6;
  --pv-mint: #e3f1f0;
}

/* les surfaces que le navigateur dessine, aux couleurs de la page */
::selection { background: #cfe7e5; color: #142229; }
html { accent-color: #0e6b6b; caret-color: #0e6b6b; }
:focus-visible { outline-color: #0e6b6b; }
.mono, .pv-time, .pv-steps time, .pv-cmp__time, .pv-prop i { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ le héro : la fenêtre d'analyse de PodiVision */
.pv-win { background: #fff; border-radius: 14px; overflow: hidden; text-align: left; color: var(--p-ink);
  font: 400 13px/1.45 var(--font-text); box-shadow: 0 0 0 1px rgb(20 34 41 / .07), 0 2px 4px rgb(20 34 41 / .03), 0 24px 48px -30px rgb(20 34 41 / .3); }
.pv-win__bar { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--pv-line); color: var(--p-muted); white-space: nowrap; }
.pv-dots { display: flex; gap: 6px; }
.pv-dots i { width: 10px; height: 10px; border-radius: 50%; background: #d9e1e3; }
.pv-win__bar b { color: var(--p-ink); font-weight: 600; }
.pv-win__bar .sp { flex: 1; }
.pv-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 99px; background: var(--pv-soft); font-size: 12px; color: var(--p-muted); }
.pv-time { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1 var(--font-mono); color: var(--p-ink); }
.pv-time::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #0e6b6b; }
.pv-win__body { display: grid; grid-template-columns: minmax(0, 1fr); }
.pv-steps { display: grid; align-content: start; gap: 6px; padding: 14px; }
.pv-steps li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 9px 11px; border-radius: 9px; background: var(--pv-soft); }
.pv-steps time { font: 500 12px/1.45 var(--font-mono); color: #0a5050; }
.pv-steps li:last-child { background: var(--pv-mint); font-weight: 500; }
.pv-stage { display: none; }
/* la fenêtre est posée sur la page : pas de cadre éclairé, donc pas de bandes de couleur sur ses côtés */
.hero--centred .hero__window { background: none; border-radius: 0; }
/* le téléphone garde la fenêtre d'avant : les étapes seules, sur leur premier écran, sur toute la largeur du texte */
@media (max-width: 639px) {
  .hero--centred .hero__window > .ly-piece { top: 0; left: 0; width: 100%; }
  .pv-win__bar .pv-chip { display: none; }
  .pv-steps { padding: 10px; gap: 5px; }
  .pv-steps li { padding: 7px 9px; font-size: 12px; }
}

/* tablette et ordinateur. Le héro fait au moins le premier écran (exactement un à 1440x900). La fenêtre entière (1040 px
   au plus, --pv-h de haut) part 24 px sous le haut du cadre et finit 24 px au-dessus du bas du héro ; sur un écran bas, elle
   garde 300 px et descend dans le haut vide de la section suivante. À l'arrêt (mouvement réduit, navigateur sans animation
   liée au défilement), elle est entière */
@media (min-width: 640px) {
  main > .hero--centred { height: auto; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
  main > .hero--centred > .wrap { flex: 1 0 auto; height: auto; }
  .hero--centred > .wrap > .hero-text { flex: 1 0 auto; height: auto; }
  .hero--centred .hero__window { --pv-h: clamp(300px, 100% + 16px, 560px); overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .hero--centred .hero__window > .ly-piece { inset: var(--s-5) 0 auto; margin-inline: auto; transform: none; transform-origin: 50% 0;
    width: min(1040px, 100%); height: var(--pv-h); }
  /* le voile qui coupe le bas de la fenêtre en haut de page (l'animation le montre, puis le dissout) */
  .hero--centred .hero__window::after { content: ""; position: absolute; z-index: 2; left: -24px; right: -24px; pointer-events: none;
    top: calc(var(--pv-h) * .846 * .62); height: calc(var(--pv-h) * .846 * .38 + 80px); opacity: 0;
    background: linear-gradient(to bottom, rgb(255 255 255 / 0), #fff 50%); }
  .pv-win { display: flex; flex-direction: column; }
  .pv-win__bar { flex: none; }
  .pv-win__body { flex: 1 1 0; min-height: 0; grid-template-columns: minmax(232px, 31%) minmax(0, 1fr); }
  .pv-steps { align-content: center; }
  .pv-stage { display: block; position: relative; overflow: hidden; container: pv-stage / size; background: #f6f8f8; border-left: 1px solid var(--pv-line); }
}
/* ordinateur : le titre sur une ligne et l'accroche sur deux, pour laisser à la fenêtre sa hauteur */
@media (min-width: 1024px) {
  .hero--centred .hero__c { max-width: 1120px; }
  .hero--centred h1 { max-width: none; }
  .hero--centred .hero__lead { max-width: 62ch; }
}

/* au défilement : le moment de la page marqué data-scroll-moment. Sans animation liée au défilement (navigateur trop
   ancien, mouvement réduit), rien ne bouge : le héro tient sur un écran et la fenêtre y est entière (ci-dessus) */
@media (prefers-reduced-motion: no-preference) {
  @keyframes pv-fenetre-ouvre { from { transform: translateY(-24px) scale(.846); } to { transform: none; } }
  @keyframes pv-fenetre-grandit { from { transform: scale(.71); } to { transform: none; } }
  @keyframes pv-fenetre-voile { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
  @keyframes pv-souris {
    0% { opacity: 0; transform: translate(170px, 120px); }
    18% { opacity: 1; }
    62% { opacity: 1; transform: none; }
    72% { opacity: 1; transform: scale(.8); }
    84%, 100% { opacity: 1; transform: none; } }
  @keyframes pv-choisie { to { box-shadow: 0 0 0 3px #0e6b6b; } }
  @keyframes pv-ok { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
}
/* tablette : en haut de page, la fenêtre a son format d'avant et le voile coupe son bas ; pendant la première course de
   défilement, elle s'élargit, descend de 24 px et le voile se dissout */
@media (min-width: 640px) and (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .hero--centred .hero__window > .ly-piece { will-change: transform;
      animation: pv-fenetre-ouvre linear both; animation-timeline: scroll(root); animation-range: 0 min(40svh, 360px); }
    .hero--centred .hero__window::after {
      animation: pv-fenetre-voile linear both; animation-timeline: scroll(root); animation-range: 0 min(40svh, 360px); }
  }
}
/* ordinateur : le héro fait deux écrans (demande du développeur, 12 novembre). En haut de page, la fenêtre a son format
   d'avant (71 %, 880 px de large) et un voile, flou puis blanc, couvre plus de la moitié de son bas. En défilant, elle
   grandit jusqu'à 1240 x 740 px en montant vers le milieu de l'écran, où elle s'arrête entière (position: sticky) le temps
   d'environ deux tiers d'écran, puis repart avec la page. --pv-fin, la course jusqu'à cet arrêt, est mesurée par
   src/vitrine.ts (30svh sans script) */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    main > .hero--centred { height: 200vh; height: 200svh; min-height: 0; }
    .hero--centred .hero__window {
      --pv-hb: clamp(420px, 100svh - var(--nav, 72px) - 80px, 740px);
      --pv-haut: calc(var(--nav, 72px) + (100svh - var(--nav, 72px) - var(--pv-hb)) / 2); }
    .hero--centred .hero__window > .ly-piece { position: sticky; inset: auto; top: var(--pv-haut); margin: 0 auto;
      width: min(1240px, 100%); height: var(--pv-hb); will-change: transform;
      animation: pv-fenetre-grandit linear both; animation-timeline: scroll(root); animation-range: 0 var(--pv-fin, 30svh); }
    .hero--centred .hero__window::after { top: calc(var(--pv-hb) * .71 * .4); height: calc(var(--pv-hb) * .71 * .6 + 70px);
      background: linear-gradient(to bottom, rgb(255 255 255 / 0), rgb(255 255 255 / .55) 40%, #fff 78%);
      -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
      -webkit-mask-image: linear-gradient(to bottom, transparent, #000 38%); mask-image: linear-gradient(to bottom, transparent, #000 38%);
      animation: pv-fenetre-voile linear both; animation-timeline: scroll(root); animation-range: 0 var(--pv-fin, 30svh); }
  }
}

/* la barre : cinq mots, « Se connecter » et le bouton tiennent centrés à partir de 1440. Plus étroit, les mots se
   centrent entre le logo et les actions ; sous 1200 ils passent dans le menu, comme sur une tablette (system.css) */
@media (min-width: 1024px) and (max-width: 1439px) {
  .nav--centre .nav__bar { grid-template-columns: auto minmax(0, 1fr) auto; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .nav--centre .nav__bar { display: flex; gap: var(--s-3); }
  .nav--centre .nav__links { display: none; }
  .nav--centre:not(.is-open) .nav__actions { margin-left: auto; }
  .nav--centre:not(.is-open) .nav__actions > :not(.btn--primary) { display: none; }
  .nav--centre .nav__toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-btn);
    border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; flex: none; }
  .nav--centre.is-open .nav__toggle { margin-left: auto; }
  .nav--centre.is-open .nav__links { display: flex; flex-direction: column; justify-content: flex-start; position: fixed; top: var(--nav); left: 0; right: 0; bottom: 0;
    padding: var(--s-4) var(--gut) calc(var(--btn-h) * 2 + 56px); background: var(--bg); overflow-y: auto; gap: 0; }
  .nav--centre.is-open .nav__item { display: grid; grid-template-columns: 1fr auto; height: auto; border-bottom: 1px solid var(--line); }
  .nav--centre.is-open .nav__link { height: 56px; padding: 0; font-size: 20px; background: none; }
  .nav--centre.is-open .nav__link::before { display: none; }
  .nav--centre.is-open .nav__actions { display: grid; gap: var(--s-2); position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; justify-self: stretch;
    padding: var(--s-4) var(--gut) calc(var(--s-4) + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); }
  .nav--centre.is-open .nav__actions .btn { width: 100%; height: 48px; font-size: var(--t-body); }
  .nav--centre.is-open .nav__actions .nav__link { display: inline-flex; order: 2; justify-content: center; height: var(--btn-h); font-size: var(--t-body); }
  body.nav-locked { overflow: hidden; }
}

/* les scènes : une par étape, l'une sur l'autre ; la quatrième (le compte rendu) est l'image à l'arrêt */
.pv-scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: max(12px, 3cqw);
  padding: max(14px, 6cqh) max(16px, 4.5cqw); opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease, ease), visibility 0s linear .3s; }
.pv-scene--4 { opacity: 1; visibility: visible; transition-delay: 0s; }
.pv-scene i { font-style: normal; }

/* 1. les deux vidéos arrivent dans l'application */
.pv-drop { position: relative; display: flex; align-items: center; justify-content: center; gap: max(12px, 3.5cqw); width: 86%; height: 72%;
  border: 1.5px dashed #b4c2c5; border-radius: 12px; background: #fff; transition: border-color .3s var(--ease, ease), background-color .3s var(--ease, ease); }
.pv-drop__ico { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; fill: none; stroke: #6b7b81;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: opacity .25s var(--ease, ease); }
.pv-file { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 16px 11px 12px; border: 1px solid var(--pv-line); border-radius: 10px;
  background: #fff; box-shadow: 0 12px 24px -16px rgb(20 34 41 / .45); white-space: nowrap; }
.pv-file svg { flex: none; width: 28px; height: 34px; }
.pv-file b { display: block; font-weight: 600; }
.pv-file > span > span { color: var(--p-muted); font-size: 12px; }
@container pv-stage (max-width: 520px) { .pv-drop { flex-direction: column; gap: 10px; } }

/* 2. trois images d'appui proposées pour le pied */
.pv-scene--2 { flex-direction: column; gap: max(10px, 4cqh); }
.pv-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--pv-line); border-radius: 99px; background: #fff; font: 500 12px/1 var(--font-text); }
.pv-seg span { padding: 7px 12px; border-radius: 99px; color: var(--p-muted); }
.pv-seg span.is-on { background: var(--pv-mint); color: #0a5050; }
.pv-props { position: relative; display: flex; gap: max(10px, 2.4cqw); }
/* l'image retenue (coche) et la souris qui la choisit : cachées hors de leur animation (plus bas) */
.pv-prop__ok { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #0e6b6b; opacity: 0; }
.pv-prop__ok svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pv-souris { position: absolute; left: 50%; top: 52%; z-index: 2; width: 26px; height: 26px; margin: -4px 0 0 -6px; opacity: 0; pointer-events: none;
  transform-origin: 6px 4px; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .25)); }
.pv-souris svg { display: block; width: 100%; height: 100%; }
.pv-prop { position: relative; width: min(26cqw, 58cqh * .78); aspect-ratio: 280 / 360; border-radius: 10px; overflow: hidden; background: #e8eeef; box-shadow: 0 0 0 1px rgb(20 34 41 / .06); }
.pv-prop svg, .pv-trace svg { display: block; width: 100%; height: 100%; }
.pv-prop i, .pv-trace i { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 99px; background: #fff; font: 500 11px/1.3 var(--font-text); color: var(--p-ink); }
.pv-prop i { font-family: var(--font-mono); }

/* 3. les tracés vérifiés, les angles calculés */
.pv-trace { position: relative; width: min(34cqw, 80cqh); aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #e8eeef; box-shadow: 0 0 0 1px rgb(20 34 41 / .06); }
.pv-trace__line, .pv-doc__imgs path { fill: none; stroke: #0e6b6b; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.pv-trace__line { stroke-dasharray: 1; stroke-dashoffset: 0; }
.pv-trace circle, .pv-doc__imgs circle { fill: #fff; stroke: #0e6b6b; stroke-width: 5; transform-box: fill-box; transform-origin: center; }
.pv-trace__val rect, .pv-doc__imgs rect { fill: #fff; }
.pv-trace__val text, .pv-doc__imgs text { font: 700 22px var(--font-mono); fill: #c2410c; text-anchor: middle; }

/* 4. le compte rendu, à votre nom : une page A4 en vignette et son bouton */
.pv-scene--4 { gap: max(16px, 4.5cqw); }
.pv-doc { display: flex; flex-direction: column; gap: clamp(6px, 1.2cqh, 9px); height: min(86cqh, 44cqw * 1.414); aspect-ratio: 1 / 1.414;
  padding: clamp(12px, 2.6cqh, 18px); overflow: hidden; border-radius: 4px; background: #fff;
  box-shadow: 0 1px 2px rgb(20 34 41 / .08), 0 14px 30px -18px rgb(20 34 41 / .35); font: 400 clamp(10px, 1.9cqh, 13px)/1.35 var(--font-text); color: var(--p-ink); }
.pv-doc__cab { display: flex; align-items: center; gap: 7px; padding-bottom: 7px; border-bottom: 1px solid var(--pv-line); }
.pv-doc__cab i { flex: none; width: clamp(18px, 3.6cqh, 24px); aspect-ratio: 1; border-radius: 5px; background: #0e6b6b; }
.pv-doc__cab b { display: block; font-weight: 600; }
.pv-doc__cab span span { color: var(--p-muted); }
.pv-doc__title { font-weight: 600; text-align: center; }
.pv-doc__patient { margin-top: -5px; color: var(--p-muted); text-align: center; }
.pv-doc__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.pv-doc__imgs svg { display: block; width: 100%; height: auto; border-radius: 3px; background: #e8eeef; }
.pv-doc__imgs text { font-size: 40px; }
.pv-doc__sec { margin-top: 2px; font-size: clamp(9px, 1.7cqh, 12px); font-weight: 600; color: #0a5050; }
/* la course, sous la marche, quand la page a la place de l'afficher entière */
@container pv-stage (max-height: 300px) or (max-width: 520px) { .pv-doc__run { display: none; } }
.pv-done { display: grid; justify-items: start; gap: 12px; }
.pv-done__chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 99px; background: var(--pv-mint); color: #0a5050; font-weight: 500; font-size: 12px; }
.pv-pdf { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; border-radius: 8px; background: #0e6b6b; color: #fff; font-weight: 500; white-space: nowrap; }

/* la boucle : layout.js marque .is-off les étapes encore à venir. La scène montrée est celle de la dernière étape arrivée,
   l'étape en cours est surlignée, et chaque scène joue son entrée ; sans :has(), le compte rendu reste affiché */
@supports selector(:has(*)) {
  .pv-steps > li[data-step] { transition: opacity .35s var(--ease, ease), transform .35s var(--ease, ease), background-color .3s var(--ease, ease); }
  .pv-steps:has(> li.is-off) > li { background: var(--pv-soft); }
  .pv-steps > li:not(.is-off):has(+ li.is-off) { background: var(--pv-mint); }

  .pv-win:has(.pv-steps > li:nth-child(4).is-off) .pv-scene--4 { opacity: 0; visibility: hidden; transition-delay: 0s, .3s; }
  .pv-win:has(.pv-steps > li:nth-child(2).is-off) .pv-scene--1,
  .pv-win:has(.pv-steps > li:nth-child(3).is-off):not(:has(.pv-steps > li:nth-child(2).is-off)) .pv-scene--2,
  .pv-win:has(.pv-steps > li:nth-child(4).is-off):not(:has(.pv-steps > li:nth-child(3).is-off)) .pv-scene--3 { opacity: 1; visibility: visible; transition-delay: 0s; }

  /* au repos (scène cachée), chaque pièce attend hors de sa place ; elle y revient après le fondu de sa scène */
  .pv-file, .pv-prop, .pv-trace__val, .pv-trace circle { transition: opacity 0s .3s, transform 0s .3s; }
  .pv-trace__line { transition: stroke-dashoffset 0s .3s; }
  .pv-file { opacity: 0; transform: translateY(-64px); }
  .pv-prop { opacity: 0; transform: translateY(12px); }
  .pv-trace__line { stroke-dashoffset: 1; }
  .pv-trace circle { transform: scale(0); }
  .pv-trace__val { opacity: 0; }

  /* 1. les fichiers tombent dans la zone d'import quand la première étape arrive */
  .pv-win:has(.pv-steps > li:nth-child(2).is-off):not(:has(.pv-steps > li:nth-child(1).is-off)) .pv-file {
    opacity: 1; transform: none; transition: opacity .25s var(--ease, ease), transform .6s cubic-bezier(.2, .8, .2, 1); }
  .pv-win:has(.pv-steps > li:nth-child(2).is-off):not(:has(.pv-steps > li:nth-child(1).is-off)) .pv-file + .pv-file { transition-delay: .4s; }
  .pv-win:has(.pv-steps > li:nth-child(2).is-off):not(:has(.pv-steps > li:nth-child(1).is-off)) .pv-drop { border-color: #0e6b6b; background: #f4faf9; transition-delay: .45s; }
  .pv-win:has(.pv-steps > li:nth-child(2).is-off):not(:has(.pv-steps > li:nth-child(1).is-off)) .pv-drop__ico { opacity: 0; transition: opacity .15s var(--ease, ease); }

  /* 2. les trois images arrivent l'une après l'autre */
  .pv-win:has(.pv-steps > li:nth-child(3).is-off):not(:has(.pv-steps > li:nth-child(2).is-off)) .pv-prop {
    opacity: 1; transform: none; transition: opacity .3s var(--ease, ease) .05s, transform .45s cubic-bezier(.2, .8, .2, 1) .05s; }
  .pv-win:has(.pv-steps > li:nth-child(3).is-off):not(:has(.pv-steps > li:nth-child(2).is-off)) .pv-prop:nth-child(2) { transition-delay: .17s; }
  .pv-win:has(.pv-steps > li:nth-child(3).is-off):not(:has(.pv-steps > li:nth-child(2).is-off)) .pv-prop:nth-child(3) { transition-delay: .29s; }
  /* puis la souris arrive du bas à droite, se pose sur l'image du milieu et clique : l'image est retenue */
  .pv-win:has(.pv-steps > li:nth-child(3).is-off):not(:has(.pv-steps > li:nth-child(2).is-off)) .pv-souris { animation: pv-souris 1.1s cubic-bezier(.3, .7, .3, 1) .35s both; }
  .pv-win:has(.pv-steps > li:nth-child(3).is-off):not(:has(.pv-steps > li:nth-child(2).is-off)) .pv-prop--choisie { animation: pv-choisie .25s ease 1.12s both; }
  .pv-win:has(.pv-steps > li:nth-child(3).is-off):not(:has(.pv-steps > li:nth-child(2).is-off)) .pv-prop__ok { animation: pv-ok .3s cubic-bezier(.3, 1.4, .5, 1) 1.15s both; }

  /* 3. les points se posent, l'axe se trace, l'angle s'affiche ; le pied droit suit le gauche */
  .pv-win:has(.pv-steps > li:nth-child(4).is-off):not(:has(.pv-steps > li:nth-child(3).is-off)) .pv-trace circle {
    transform: none; transition: transform .3s cubic-bezier(.3, 1.4, .5, 1) .1s; }
  .pv-win:has(.pv-steps > li:nth-child(4).is-off):not(:has(.pv-steps > li:nth-child(3).is-off)) .pv-trace__line {
    stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--ease, ease) .3s; }
  .pv-win:has(.pv-steps > li:nth-child(4).is-off):not(:has(.pv-steps > li:nth-child(3).is-off)) .pv-trace__val {
    opacity: 1; transition: opacity .3s var(--ease, ease) .85s; }
  .pv-win:has(.pv-steps > li:nth-child(4).is-off):not(:has(.pv-steps > li:nth-child(3).is-off)) .pv-trace + .pv-trace circle { transition-delay: .45s; }
  .pv-win:has(.pv-steps > li:nth-child(4).is-off):not(:has(.pv-steps > li:nth-child(3).is-off)) .pv-trace + .pv-trace .pv-trace__line { transition-delay: .65s; }
  .pv-win:has(.pv-steps > li:nth-child(4).is-off):not(:has(.pv-steps > li:nth-child(3).is-off)) .pv-trace + .pv-trace .pv-trace__val { transition-delay: 1.2s; }

  /* 4. la page monte, puis « PDF prêt » et le bouton ; hors de sa scène, elle attend plus bas */
  .pv-doc, .pv-done > * { transition: opacity .35s var(--ease, ease), transform .5s cubic-bezier(.2, .8, .2, 1); }
  .pv-done__chip { transition-delay: .35s; }
  .pv-pdf { transition-delay: .5s; }
  .pv-win:has(.pv-steps > li:nth-child(4).is-off) :is(.pv-doc, .pv-done > *) { opacity: 0; transform: translateY(14px); transition: opacity 0s .3s, transform 0s .3s; }
}
@media (prefers-reduced-motion: reduce) {
  .pv-scene, .pv-scene *, .pv-steps > li[data-step] { transition: none !important; }
}

/* ------------------------------------------------------------ l'historique et le compte rendu : une image fixe et entière.
   Ordinateur : les mots à gauche, la fenêtre à droite (sur la ligne des autres splits, colonne 7), la page du compte rendu
   seule, dont les images s'ajustent à la place. Tablette : la page sous les mots. Téléphone : la section fait deux
   écrans, l'historique local (dix lignes) au-dessus de la page */
#historique > .wrap { align-content: stretch; grid-template-rows: auto minmax(0, 1fr); row-gap: var(--head-gap, 48px); }
.app.ui { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; background: var(--u-bg, #fff); border: 1px solid var(--u-border, var(--pv-line)); border-radius: var(--u-r, 14px); box-shadow: var(--u-shadow, 0 24px 48px -28px rgb(20 34 41 / .35)); overflow: hidden; }
.app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.app > .app__pane--list { display: none; }
@media (min-width: 1024px) {
  #historique > .wrap { grid-template-rows: minmax(0, 1fr); }
  #historique > .wrap > .stack-4 { align-self: start; }
  #historique .app.ui { align-self: start; height: min(100%, 540px); }
}
/* téléphone : la section fait deux écrans, l'historique au-dessus de la page du compte rendu */
@media (max-width: 639px) {
  #historique { --hm: 2; }
  #historique .app.ui { align-self: start; }
  .app.ui { grid-template-rows: auto auto; }
  .app > .app__pane--list { display: block; }
  .app > .app__pane + .app__pane { border-top: 1px solid var(--u-line, var(--pv-line)); }
  #historique .pv-list li:nth-child(n) { display: grid; }
}

.pv-list { font: 400 13px/1.4 var(--font-text); color: var(--p-ink); }
.pv-list__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--pv-line); }
.pv-list__head b { font-weight: 600; font-size: 14px; }
.pv-list__head span { color: var(--p-muted); font-size: 12px; }
.pv-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 11px 18px; border-bottom: 1px solid var(--pv-line); }
.pv-list li.is-on { background: var(--pv-mint); }
.pv-list li b { font-weight: 500; }
.pv-list li time { color: var(--p-muted); font-size: 12px; text-align: right; }
.pv-list li span { color: var(--p-muted); }
.pv-tag { justify-self: end; font-size: 12px; font-style: normal; color: #0a5050; }
.pv-tag--a { color: #8a4b00; font-weight: 500; }

.pv-report { height: 100%; display: flex; align-items: center; justify-content: center; padding: 14px 16px; background: #eef2f3; }
.pv-report__page { container-type: inline-size; display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: 100%; padding: 20px 24px; border-radius: 6px; background: #fff;
  box-shadow: 0 1px 2px rgb(20 34 41 / .08), 0 12px 28px -18px rgb(20 34 41 / .3); color: var(--p-ink); font: 400 13px/1.5 var(--font-text); }
.pv-report__page > * { flex: none; }
.pv-report__cab { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--pv-line); }
.pv-report__logo { width: 30px; height: 30px; border-radius: 8px; background: #0e6b6b; }
.pv-report__cab b { display: block; font-weight: 600; }
.pv-report__cab span { color: var(--p-muted); font-size: 12px; }
.pv-report__title { margin-top: 12px; font: 600 15px/1.3 var(--font-text); text-align: center; }
.pv-report__patient { margin-top: 2px; color: var(--p-muted); text-align: center; }
/* les images gardent les proportions du dessin (6 x 5) et raccourcissent seulement si la page manque de place : la page
   entière tient dans son cadre, les angles restent lisibles */
.pv-report__page > .pv-report__imgs { flex: 0 1 calc((100cqi - 10px) * .4167); min-height: 90px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); gap: 10px; margin-top: 14px; }
.pv-report__imgs svg { display: block; width: 100%; height: 100%; border-radius: 4px; background: #e8eeef; }
/* la légende, un champ que le podologue relit et modifie, comme dans l'application */
.pv-report__champ { display: grid; gap: 2px; margin-top: 12px; padding: 9px 12px; border: 1px solid var(--pv-line); border-radius: 6px; background: #fbfcfc; }
.pv-report__champ b { font-size: 11px; font-weight: 600; color: #0a5050; }
/* l'historique montre les lignes qui tiennent entières : sept, moins sur un écran bas */
.pv-list li:nth-child(n + 8) { display: none; }
@media (max-height: 667px) { .pv-list li:nth-child(n + 7) { display: none; } }
@media (max-height: 606px) { .pv-list li:nth-child(n + 6) { display: none; } }
@media (max-height: 545px) { .pv-list li:nth-child(n + 5) { display: none; } }

/* ------------------------------------------------------------ le comparatif, ligne à ligne */
.pv-cmp { width: 100%; margin-top: var(--s-7); border-collapse: collapse; text-align: left; }
.pv-cmp col { width: 33.333%; }
.pv-cmp th, .pv-cmp td { padding: var(--s-4) var(--s-5) var(--s-4) 0; vertical-align: top; border-bottom: 1px solid var(--line, var(--pv-line)); }
.pv-cmp thead th { padding-top: 0; font: 500 var(--t-lead, 20px)/1.3 var(--font-text); }
.pv-cmp__time { display: block; margin-top: var(--s-2); font: var(--display-weight) var(--t-h3, 32px)/1.1 var(--font-display); letter-spacing: var(--display-tracking); }
.pv-cmp thead th:last-child .pv-cmp__time { color: #0e6b6b; }
.pv-cmp tbody th { font-weight: 500; }
.pv-cmp td:first-of-type { color: var(--muted, #4f5f66); }
.pv-cmp__label { display: none; }
@media (max-width: 639px) {
  .pv-cmp thead { display: none; }
  .pv-cmp, .pv-cmp tbody, .pv-cmp tr, .pv-cmp th, .pv-cmp td { display: block; width: auto; }
  .pv-cmp tr { padding: var(--s-4) 0; border-bottom: 1px solid var(--line, var(--pv-line)); }
  .pv-cmp th, .pv-cmp td { padding: 0; border: 0; }
  .pv-cmp td { margin-top: var(--s-2); }
  .pv-cmp__label { display: inline; font-weight: 500; color: var(--p-ink); }
}

/* ------------------------------------------------------------ la démonstration du tracé (cadre du split) */
.frame > svg.pv-demo { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; max-width: none; touch-action: pan-y; }
#trace .frame--split { --ratio: 80%; }
.pv-demo [data-point] { cursor: grab; touch-action: none; }
.pv-demo [data-point]:focus-visible { stroke: var(--pv-measure); outline: 3px solid var(--pv-measure); outline-offset: 3px; }
.pv-facts { display: grid; gap: var(--s-2); }

/* ------------------------------------------------------------ l'analyse posturale, vue de dos */
.pv-post.ui { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); margin-top: var(--s-7); background: #fff; border: 1px solid var(--pv-line); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 48px -28px rgb(20 34 41 / .3); }
.pv-post__view { position: relative; background: #e8eeef; min-height: 0; }
.pv-post__view svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pv-post__tabs { display: flex; gap: 6px; padding: 14px 18px; border-bottom: 1px solid var(--pv-line); font: 500 13px/1 var(--font-text); }
.pv-post__tabs span { padding: 8px 12px; border-radius: 99px; color: var(--p-muted); }
.pv-post__tabs span.is-on { background: var(--pv-mint); color: #0a5050; }
.pv-post__measures { padding: 6px 18px 18px; font: 400 14px/1.45 var(--font-text); color: var(--p-ink); }
.pv-post__measures li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--pv-line); }
.pv-post__measures b { font: 600 14px/1.45 var(--font-mono); color: var(--pv-measure); white-space: nowrap; }
@media (max-width: 1023px) { .pv-post.ui { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 639px) {
  .pv-post.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .pv-post__tabs span:not(.is-on) { display: none; }
  .pv-post__measures li:nth-child(n + 4) { display: none; }
}

/* ------------------------------------------------------------ la clôture : le nom à la taille du titre du héro (72 px à
   1440), pas d'un bord à l'autre : le développeur le trouvait bien trop gros. Le téléphone garde sa taille d'avant */
.close--word .close__word { font-size: var(--ly-h1, 72px); line-height: 1; overflow: visible; white-space: nowrap; }
@media (max-width: 639px) {
  .closing__cta.close--word { container-type: inline-size; }
  .close--word .close__word { font-size: calc(100cqi / 5.4); }
}

/* « 13 minutes gagnées » : sur une ligne et plus petit qu'à l'origine, au milieu de son écran, accompagné des deux durées
   sur une même échelle (tablette et ordinateur ; le téléphone garde le titre et la phrase seuls) */
.pv-duree { display: none; }
@media (min-width: 640px) {
  #gain > .wrap { justify-content: center; }
  #gain .mo-la__type { font-size: clamp(56px, 7.4vw, 116px); max-width: none; }
  .pv-duree { display: grid; gap: 20px; max-width: 820px; margin-top: var(--s-8); padding: 30px 34px; border: 1px solid var(--pv-line); border-radius: 14px; background: #fff;
    box-shadow: 0 20px 40px -32px rgb(20 34 41 / .35); }
  .pv-duree__ligne { display: grid; grid-template-columns: 150px 64px minmax(0, 1fr); align-items: center; gap: 16px; font: 500 16px/1.3 var(--font-text); color: var(--p-ink); }
  .pv-duree__ligne b { font: 500 17px/1 var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
  .pv-duree__ligne i { display: block; height: 28px; width: calc(var(--d) / 15 * 100%); border-radius: 6px; background: #8a979c; }
  .pv-duree__ligne--vite b { color: #0e6b6b; }
  .pv-duree__ligne--vite i { background: #0e6b6b; }
  /* l'échelle en minutes, sous la piste des barres */
  .pv-duree__echelle { position: relative; height: 22px; margin: -6px 0 0 calc(150px + 64px + 32px); border-top: 1px solid var(--pv-line);
    font: 400 13px/1 var(--font-mono); color: var(--p-muted); font-variant-numeric: tabular-nums; }
  .pv-duree__echelle span { position: absolute; top: 8px; white-space: nowrap; }
  .pv-duree__echelle span:nth-child(1) { left: 0; }
  .pv-duree__echelle span:nth-child(2) { left: 33.333%; transform: translateX(-50%); }
  .pv-duree__echelle span:nth-child(3) { left: 66.667%; transform: translateX(-50%); }
  .pv-duree__echelle span:nth-child(4) { right: 0; }
}

/* la FAQ : six questions sur deux colonnes, sur les lignes de la grille (la seconde sur la ligne des splits) */
.pv-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gut-grid, 24px); margin-top: var(--s-6); }
.pv-faq > .faq__item:first-child { padding-top: var(--s-5); }
@media (max-width: 1023px) { .pv-faq { grid-template-columns: minmax(0, 1fr); } }

/* en tablette, le split du tracé s'empile : un cadre moins haut pour tenir sur son écran */
@media (min-width: 640px) and (max-width: 1023px) { #trace .frame--split { --ratio: 56%; } #questions { --h: 2; } }


/* ------------------------------------------------------------ tablette et téléphone : chaque section sur ses écrans */
@media (min-width: 640px) and (max-width: 1023px) { .pv-faq > .faq__item { padding-block: var(--s-6); } }
@media (max-width: 639px) {
  #comparatif, #questions { --hm: 2; }
  #trace .pv-facts { display: none; }
  #trace .frame--split { --ratio: 80%; }
  .pv-win__what { display: none; }
}

/* téléphone : le comparatif garde ses deux durées en tête et remplit ses deux écrans ; la phrase du moment remplit le sien */
@media (max-width: 639px) {
  .pv-cmp thead { display: block; }
  .pv-cmp thead tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); padding: 0 0 var(--s-4); }
  .pv-cmp thead th:first-child { display: none; }
  .pv-cmp thead th { font-size: var(--t-body); }
  .pv-cmp tbody tr { padding: var(--s-6) 0; }
  .pv-cmp td { margin-top: var(--s-3); }
  #gain .mo-la__type { font-size: 20vw; line-height: 1.02; }
  #questions .stack-4 > p { display: none; }
  .pv-faq > .faq__item { padding-block: var(--s-3); }
}
@media (max-width: 639px) {
  .pv-cmp tbody tr { padding: var(--s-7) 0; }
  #gain .mo-la__type { line-height: 1.1; }
  #gain .mo-la__sub { margin-top: var(--s-6); font-size: var(--t-lead); line-height: 1.5; }
}
@media (max-width: 639px) {
  .pv-cmp tbody tr { padding: calc(var(--s-7) + 16px) 0; }
  #gain .mo-la__type { font-size: 21vw; line-height: 1.16; }
  #gain .mo-la__sub { margin-top: var(--s-7); font-size: 21px; line-height: 1.6; }
}