/* Kreative Monster · la page qui vend.
 *
 * Chargee APRES landing.css et mouvement.css par les pages de vente
 * (body.page-vente). Elle ne redefinit aucun composant de landing.css : elle
 * ajoute les blocs propres a la vente et les pose dans la DA (rouge #AE0000,
 * Benzin / Clash / Satoshi, filet rouge, surfaces franches).
 *
 * Concept : la feuille de service. Une page de vente se lit comme le document
 * d'un jour de tournage : ce qu'on fait, combien de temps, avec qui, ce qui
 * sort du plateau. D'ou les fiches etiquetees, les numeros de plan et la frise.
 *
 * Mouvement, selon la charte (docs/croissance/MOUVEMENT.md) :
 *   - seuls transform, opacity et clip-path s'animent ;
 *   - tout ce qui depend du defilement vit sous @supports (animation-timeline:
 *     view()) ; ailleurs la page est immobile et complete ;
 *   - tout vit sous prefers-reduced-motion: no-preference ;
 *   - aucune boucle, aucun contenu cache en attendant une animation qui ne
 *     viendrait pas, aucun bouton retarde.
 */
.page-vente { --vt-courbe: var(--mv-courbe, cubic-bezier(.2, .7, .2, 1)); --vt-rouge-clair: #FF6B6B; }
.page-vente .wrap { max-width: 1080px; }
/* Borné par la largeur : à 320 px, « accompagnement » (Growth) sortait de 29 px.
 * Au-dessus de 380 px, la taille est celle du clamp. */
.page-vente h2 { font-size: min(clamp(1.65rem, 3.9vw, 2.7rem), 7vw); line-height: 1.04; letter-spacing: -.01em; }

/* Le filet devant chaque intitule de section : l'element signature, trace a
 * l'entree de la section (voir plus bas). */
.page-vente .kick { display: flex; align-items: flex-start; gap: 12px; }
.page-vente .kick::before { content: ''; flex: 0 0 32px; height: 2px; margin-top: .62em; background: currentColor; transform-origin: left center; }

/* Retour d'etat : le bouton s'enfonce sous le doigt. */
.page-vente .btn { transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s var(--vt-courbe); }
.page-vente .btn:active { transform: translateY(1px) scale(.985); }

/* ── Le heros ──────────────────────────────────────────────────────────── */
.cm-hero--vente .cm-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 60px; }
.cm-hero--vente h1 { letter-spacing: -.015em; }
.vt-cta { margin-top: 4px; }
.vt-lien { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; font-weight: 700; font-size: .92rem; color: var(--black); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.vt-lien:hover { color: var(--red); }
.vt-lieu { margin-top: 8px; font-size: .86rem; color: var(--gray-txt); max-width: 520px; padding-left: 12px; border-left: 2px solid var(--red); }
.vt-lieu b { color: var(--black); font-weight: 700; }
.vt-rassure { margin-top: 14px; font-size: .86rem; color: var(--gray-txt); max-width: 520px; }

/* La photo : un bloc rouge plein, decale derriere, comme une epreuve posee
 * sur la table. La photo elle-meme ne s'anime pas : elle porte le nom de
 * transition qui la fait grandir depuis la carte /school (M7). */
.cm-hero-media.vt-media { border-top: 0; margin: 0 18px 18px 0; }
.vt-media::before { content: ''; position: absolute; inset: 18px -18px -18px 18px; background: var(--red); }
.vt-media picture { position: relative; display: block; }
.cm-hero-media.vt-media img { position: relative; width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: min(600px, calc(100vh - 150px)); object-fit: cover; object-position: center 30%; }

/* Les fiches posees sur la photo : les cases de la feuille de service. */
.vt-fiche { position: absolute; z-index: 2; display: grid; gap: 3px; max-width: 72%; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--red); padding: 10px 16px 12px; line-height: 1.25; box-shadow: 0 18px 36px -20px rgba(17, 17, 17, .55); }
.vt-fiche small { font-family: var(--fa); font-weight: 600; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.vt-fiche b { font-family: var(--fh); font-weight: 800; font-size: .95rem; color: var(--black); }
.vt-fiche--a { left: -26px; bottom: 54px; }
.vt-fiche--b { right: -6px; top: 28px; }

/* Sans photo : la feuille elle-meme, en typographie. */
.vt-type { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; aspect-ratio: 4 / 5; max-height: min(600px, calc(100vh - 150px)); background: var(--black); color: #fff; padding: clamp(24px, 4vw, 40px); line-height: 1.1; }
.vt-type-seances { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 auto; order: -1; }
.vt-type-seances li { border: 1px solid #3A3A3A; border-top: 3px solid var(--red); padding: 10px 12px; font-family: var(--fh); font-weight: 800; font-size: 1.3rem; line-height: 1; }
.vt-type-seances span { display: block; margin-bottom: 6px; font-family: var(--fa); font-weight: 600; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: #9A9A9A; }
.vt-type-grand { font-family: var(--fh); font-weight: 800; font-size: clamp(3.6rem, 10vw, 7.5rem); line-height: .9; letter-spacing: -.02em; }
.vt-type b { font-family: var(--fh); font-weight: 800; font-size: 1.1rem; }
.vt-type small { font-family: var(--fa); font-weight: 600; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--vt-rouge-clair); }

@media (max-width: 820px) {
  .cm-hero--vente .cm-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .cm-hero-media.vt-media { max-width: 560px; }
  .cm-hero-media.vt-media img, .vt-type { aspect-ratio: 4 / 3; max-height: none; }
  .vt-fiche--a { left: 12px; bottom: 14px; }
  .vt-fiche--b { right: 12px; top: 14px; }
}

/* ── Le duel : seul avec des tutos / avec la formation ──────────────────── */
.vt-duel-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 18px; margin-top: 34px; align-items: stretch; }
.vt-duel-col { padding: 28px 28px 30px; border: 1px solid #D6D6D6; }
.vt-duel-avec { background: #fff; border-color: var(--line); border-top: 4px solid var(--red); }
.vt-duel-col h3 { font-family: var(--fa); font-weight: 600; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-txt); margin-bottom: 18px; }
.vt-duel-avec h3 { color: var(--red); }
.vt-duel-col ul { list-style: none; display: grid; gap: 16px; }
.vt-duel-col li { position: relative; padding-left: 34px; font-family: var(--fh); font-weight: 800; font-size: clamp(1rem, 1.9vw, 1.28rem); line-height: 1.2; }
.vt-duel-seul li { color: #666; }
.vt-duel-seul li::before { content: '\00D7'; position: absolute; left: 4px; top: -1px; font-family: var(--fb); font-weight: 700; color: #999; }
.vt-duel-seul li span { position: relative; display: inline-block; }
.vt-duel-seul li span::after { content: ''; position: absolute; left: -3px; right: -3px; top: 54%; height: 2px; background: var(--red); transform-origin: left center; }
.vt-duel-avec li::before { content: ''; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; background: var(--red); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ── Ce qui sort du plateau : les livrables numerotes ──────────────────── */
.vt-livrables-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
.vt-livrables-tete { position: sticky; top: 96px; }
.vt-livrables-tete .vt-lien { margin-top: 14px; }
.vt-objets { list-style: none; display: grid; gap: 12px; position: relative; padding-left: 22px; }
.vt-objets::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red); transform-origin: top center; }
.vt-objet { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 16px; align-items: start; background: #fff; border: 1px solid var(--line); padding: 20px 22px; }
.vt-objet-n { font-family: var(--fh); font-weight: 800; font-size: 1.9rem; line-height: 1; color: var(--red); }
.vt-objet b { display: block; font-family: var(--fh); font-weight: 800; font-size: 1.02rem; line-height: 1.25; }
/* :not(.vt-objet-n) : sans lui, cette règle battait celle du numéro (un span
 * lui aussi), qui s'affichait petit et gris au lieu de grand et rouge. */
.vt-objet span:not(.vt-objet-n) { display: block; margin-top: 5px; font-size: .9rem; color: var(--gray-txt); }

/* ── Le deroule : la frise du parcours reel ────────────────────────────── */
.vt-frise { background: var(--black); color: #fff; }
.vt-frise .kick { color: var(--vt-rouge-clair); }
.vt-frise h2 { color: #fff; }
.vt-frise .lead { color: #B8B8B8; }
.vt-etapes { --n: 5; list-style: none; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 24px; margin-top: 46px; padding-top: 38px; }
.vt-etapes::before, .vt-etapes::after { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: #3A3A3A; }
.vt-etapes::after { background: var(--red); transform-origin: left center; }
.vt-etape { position: relative; }
.vt-etape::before { content: ''; position: absolute; left: 0; top: -38px; width: 16px; height: 16px; background: var(--red); transform-origin: center; }
.vt-etape-n { font-family: var(--fa); font-weight: 600; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: #9A9A9A; }
.vt-etape h3 { font-family: var(--fh); font-weight: 800; font-size: 1.04rem; line-height: 1.2; margin: 8px 0; color: #fff; }
.vt-etape p { font-size: .9rem; color: #B8B8B8; }
@media (max-width: 860px) {
  .vt-etapes { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-top: 0; padding-left: 38px; }
  .vt-etapes::before, .vt-etapes::after { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .vt-etapes::after { transform-origin: center top; }
  .vt-etape::before { top: 3px; left: -38px; }
}

/* ── Avec qui tu travailles ────────────────────────────────────────────── */
.vt-auteur-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px 60px; align-items: center; }
.vt-auteur-grid .vt-auteur-photo { grid-row: span 2; }
.vt-auteur-grid--seul { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; border-top: 1px solid var(--line); padding-top: 8px; }
.vt-auteur-grid--seul .vt-roles { margin-bottom: 0; }
.vt-auteur-texte p { font-size: 1.05rem; }
.vt-auteur-photo { position: relative; margin: 0 16px 16px 0; line-height: 0; }
.vt-auteur-photo::before { content: ''; position: absolute; inset: 16px -16px -16px 16px; border: 3px solid var(--red); }
.vt-auteur-photo img { position: relative; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; }
.vt-roles { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 20px; }
.vt-roles li { font-family: var(--fa); font-weight: 600; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--line); padding: 7px 11px; background: #fff; }
.vt-auteur-texte p { color: var(--gray-txt); max-width: 600px; }
.vt-auteur-texte p + p { margin-top: 12px; }
.vt-auteur-liens { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 18px; }

/* ── L'offre ───────────────────────────────────────────────────────────── */
.cm-offer.vt-offre { background: var(--gray-bg); text-align: left; }
.vt-offre-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 56px; align-items: center; }
.vt-garanties { list-style: none; display: grid; gap: 14px; margin: 24px 0 20px; }
.vt-garanties li { position: relative; padding-left: 30px; font-size: .96rem; }
.vt-garanties li::before { content: ''; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; background: var(--red); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat; }
.vt-garanties a { color: var(--black); font-weight: 600; }
.cm-offer-card.vt-offre-carte { margin: 0; max-width: none; box-shadow: 0 24px 50px -30px rgba(17, 17, 17, .45); }
.vt-offre-nom { font-family: var(--fa); font-weight: 600; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-txt); margin-bottom: 12px; }
.vt-offre-carte .cm-actions .btn { margin-top: 12px; }
.vt-offre-carte .cm-actions .btn:first-child { margin-top: 24px; }

/* ── La barre d'achat : apparait quand le bouton du heros est sorti de
 * l'ecran, disparait quand la carte d'offre est visible (vente.js). Sans
 * JavaScript elle reste cachee : le heros et l'offre portent deja le bouton. */
.vt-barre { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff; border-top: 3px solid var(--red); box-shadow: 0 -12px 30px -18px rgba(17, 17, 17, .35); padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); transform: translateY(110%); visibility: hidden; transition: transform .3s var(--vt-courbe), visibility 0s linear .3s; }
.vt-barre.est-visible { transform: none; visibility: visible; transition: transform .3s var(--vt-courbe), visibility 0s; }
.vt-barre-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.vt-barre-nom { min-width: 0; font-family: var(--fh, 'Benzin', 'Arial Narrow', sans-serif); font-weight: 800; font-size: .92rem; line-height: 1.2; }
.vt-barre-nom small { display: block; font-family: var(--fb, 'Satoshi', system-ui, sans-serif); font-weight: 500; font-size: .8rem; color: var(--gray-txt); }
.vt-barre .btn { flex: 0 0 auto; padding: 13px 22px; }
@media (max-width: 560px) {
  .vt-barre-nom b { display: none; }
  .vt-barre-nom small { font-family: var(--fh, 'Benzin', 'Arial Narrow', sans-serif); font-weight: 800; font-size: 1.05rem; color: var(--red); }
  .vt-barre .btn { padding: 13px 16px; font-size: .74rem; }
}
/* La barre ne doit jamais recouvrir le pied de page ni le dernier lien. */
.page-vente, .vt-avec-barre { padding-bottom: 76px; }
.vt-barre .ac-btn { flex: 0 0 auto; margin: 0; }

/* Classes Academy : le prix lisible dès le haut de page, écrit par
 * scripts/build-classes.mjs depuis la même source que la carte d'offre. */
.vt-prix-heros { margin-top: 14px; font-size: .9rem; color: #555; }
.vt-prix-heros b { font-family: 'Benzin', 'Arial Narrow', sans-serif; font-weight: 800; font-size: 1.05rem; color: #111; }

/* ── Mise en page etroite ──────────────────────────────────────────────── */
@media (max-width: 860px) {
  .vt-livrables-grid, .vt-offre-grid, .vt-auteur-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .vt-livrables-tete { position: static; }
  .vt-auteur-photo { max-width: 280px; }
}
@media (max-width: 720px) {
  .vt-duel-grid { grid-template-columns: minmax(0, 1fr); }
  .vt-duel-col { padding: 22px 20px 24px; }
  .vt-objet { grid-template-columns: 44px minmax(0, 1fr); padding: 18px 16px; }
  .vt-objet-n { font-size: 1.5rem; }
  .vt-offre-carte { padding: 30px 22px; }
}

/* ── Les photos de mise en situation (Envato) ──────────────────────────── */
.vt-geste { position: relative; margin: 26px 0 0; line-height: 0; border-top: 4px solid var(--red); }
.vt-geste img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.vt-bande { padding: 0; background: var(--gray-bg); }
.vt-bande-fig { position: relative; margin: 0; line-height: 0; transform: translateY(-1px); }
.vt-bande-fig::after { content: ''; position: absolute; left: 0; bottom: 0; width: min(38%, 320px); height: 6px; background: var(--red); transform-origin: left center; }
.vt-bande-fig img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
@media (max-width: 720px) { .vt-bande-fig img { aspect-ratio: 4 / 3; } }

/* ── Les pages de vente ecrites a la main (Monster System, Pro, Shorts,
 * Audit, Check Materiel, Growth, Studio) et, depuis le 2026-09-29, les pages
 * AI Studio, Monster Media, WebCare et Hebergement ─────────────────────────
 * Elles gardent leurs composants de landing.css ; seule leur mise en scene
 * change, et seulement sous .page-vente. Deux exceptions, toutes deux vues a
 * l'ecran : la liste d'une carte d'offre (.cm-tier) garde ses coches, les
 * cartes numerotees y debordaient ; et les etapes d'une section sombre
 * (.ai-sombre) gardent leur grille, la frise ne tient pas sur plusieurs rangs. */

/* Les etapes deviennent une frise : un filet qui se trace et un point par etape. */
.page-vente .cm-steps { position: relative; gap: 24px; padding-top: 34px; }
.page-vente .cm-steps::before, .page-vente .cm-steps::after { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: #D6D6D6; }
.page-vente .cm-steps::after { background: var(--red); transform-origin: left center; }
.page-vente .cm-step { position: relative; border-left: 0; padding: 0; }
.page-vente .cm-step::before { content: ''; position: absolute; left: 0; top: -34px; width: 16px; height: 16px; background: var(--red); }
.page-vente .cm-step-n { font-family: var(--fa); font-weight: 600; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-txt); }
.page-vente .cm-step-n::before { content: 'Étape '; }
.page-vente .cm-step h3 { font-size: 1.1rem; }
@media (max-width: 720px) {
  .page-vente .cm-steps { padding-top: 0; padding-left: 34px; }
  .page-vente .cm-steps::before, .page-vente .cm-steps::after { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .page-vente .cm-steps::after { transform-origin: center top; }
  .page-vente .cm-step::before { top: 3px; left: -34px; }
}

/* Les cartes du constat : numerotees, filet qui se trace sur le haut. */
.page-vente .cm-pain-grid { counter-reset: vt-carte; }
.page-vente .cm-pain-card { position: relative; counter-increment: vt-carte; border-top: 1px solid var(--line); padding: 28px 22px 24px; transition: transform .2s var(--vt-courbe), box-shadow .2s var(--vt-courbe); }
.page-vente .cm-pain-card::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 4px; background: var(--red); transform-origin: left center; }
.page-vente .cm-pain-card::after { content: counter(vt-carte, decimal-leading-zero); position: absolute; right: 18px; top: 16px; font-family: var(--fh); font-weight: 800; font-size: 1.5rem; line-height: 1; color: #E2E2E2; }
.page-vente .cm-pain-card h3 { padding-right: 44px; }
@media (hover: hover) { .page-vente .cm-pain-card:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -24px rgba(17, 17, 17, .5); } }

/* La liste de ce qui est inclus : des fiches numerotees, comme les livrables. */
.page-vente :not(.cm-tier) > .cm-list { counter-reset: vt-inclus; gap: 12px; }
.page-vente :not(.cm-tier) > .cm-list li { counter-increment: vt-inclus; background: #fff; border: 1px solid var(--line); padding: 18px 18px 18px 62px; }
.page-vente :not(.cm-tier) > .cm-list li::before { content: counter(vt-inclus, decimal-leading-zero); -webkit-mask: none; mask: none; background: none; width: auto; height: auto; left: 18px; top: 17px; font-family: var(--fh); font-weight: 800; font-size: 1.25rem; line-height: 1; color: var(--red); }
/* Sous 420 px, le numéro se resserre pour laisser la place aux mots longs en
 * Benzin (« réactualisé ») ; le texte garde sa taille. Précaution : le
 * débordement mesuré sur /monster-growth venait du titre, borné plus haut. */
@media (max-width: 420px) {
  .page-vente :not(.cm-tier) > .cm-list li { padding: 16px 14px 16px 46px; }
  .page-vente :not(.cm-tier) > .cm-list li::before { left: 12px; top: 16px; font-size: 1.05rem; }
}

/* La carte de prix et l'avis gagnent de la profondeur et leur signe. */
.page-vente .cm-offer-card { box-shadow: 0 24px 50px -30px rgba(17, 17, 17, .45); }
.page-vente .cm-quote blockquote { position: relative; padding-top: 34px; }
.page-vente .cm-quote blockquote::before { content: '\00AB'; position: absolute; left: -4px; top: -18px; font-family: var(--fh); font-size: 4rem; line-height: 1; color: var(--red); }

/* ── Le mouvement ──────────────────────────────────────────────────────── */
@keyframes vt-bloc { from { transform: translate(-18px, -18px); } to { transform: none; } }
@keyframes vt-coupe-g { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes vt-coupe-b { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes vt-trace { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vt-trace-v { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes vt-point { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes vt-case { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
/* Le titre : une coupe du haut vers le bas, rien d'autre. Pas de transform ni
 * d'inline-block : sur un titre long, la partie rouge changerait de ligne. */
@keyframes vt-titre { from { clip-path: inset(-25% -4% 100% -4%); } to { clip-path: inset(-25% -4% -25% -4%); } }

/* Le heros entre en scene, une fois, en moins d'une demi-seconde. Le texte et
 * les boutons ne bougent pas : le bouton est cliquable des la premiere image. */
@media (prefers-reduced-motion: no-preference) {
  .cm-hero--vente h1 span { animation: vt-titre .45s var(--vt-courbe) .12s both; }
  .vt-media::before { animation: vt-bloc .45s var(--vt-courbe) .08s both; }
  .vt-fiche--b { animation: vt-coupe-g .4s var(--vt-courbe) .3s both; }
  .vt-fiche--a { animation: vt-coupe-g .4s var(--vt-courbe) .42s both; }
  .vt-type-seances li { animation: vt-case .3s var(--vt-courbe) both; }
  .vt-type-seances li:nth-child(1) { animation-delay: .15s; } .vt-type-seances li:nth-child(2) { animation-delay: .21s; }
  .vt-type-seances li:nth-child(3) { animation-delay: .27s; } .vt-type-seances li:nth-child(4) { animation-delay: .33s; }
  .vt-type-seances li:nth-child(5) { animation-delay: .39s; } .vt-type-seances li:nth-child(6) { animation-delay: .45s; }
}

/* Au defilement : chaque geste se joue quand son element entre a l'ecran, et
 * revient si on remonte. Aucune duree : c'est le doigt qui pilote. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .page-vente .kick { view-timeline: --vt-kick block; }
    .page-vente .kick::before { animation: vt-trace linear both; animation-timeline: --vt-kick; animation-range: entry 20% entry 90%; }

    .vt-duel-seul li { view-timeline: --vt-li block; }
    .vt-duel-seul li span::after { animation: vt-trace linear both; animation-timeline: --vt-li; animation-range: entry 60% cover 40%; }
    .vt-duel-avec li { animation: vt-coupe-g linear both; animation-timeline: view(); animation-range: entry 40% cover 35%; }

    .vt-objets { view-timeline: --vt-objets block; }
    .vt-objets::before { animation: vt-trace-v linear both; animation-timeline: --vt-objets; animation-range: entry 10% cover 60%; }
    .vt-objet { animation: vt-coupe-g linear both; animation-timeline: view(); animation-range: entry 15% cover 30%; }

    .vt-etapes { view-timeline: --vt-frise block; }
    .vt-etapes::after { animation: vt-trace linear both; animation-timeline: --vt-frise; animation-range: entry 55% cover 60%; }
    .vt-etape { view-timeline: --vt-etape block; }
    .vt-etape::before { animation: vt-point linear both; animation-timeline: --vt-etape; animation-range: entry 55% entry 100%; }
    @media (max-width: 860px) {
      .vt-etapes::after { animation-name: vt-trace-v; animation-range: entry 20% exit 40%; }
    }

    .vt-auteur-photo img { animation: vt-coupe-b linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }

    .vt-geste img { animation: vt-coupe-b linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
    .vt-bande-fig img { animation: vt-coupe-g linear both; animation-timeline: view(); animation-range: entry 5% cover 35%; }
    .vt-bande-fig { view-timeline: --vt-bande block; }
    .vt-bande-fig::after { animation: vt-trace linear both; animation-timeline: --vt-bande; animation-range: entry 40% cover 50%; }
    .page-vente .cm-steps { view-timeline: --vt-steps block; }
    .page-vente .cm-steps::after { animation: vt-trace linear both; animation-timeline: --vt-steps; animation-range: entry 55% cover 55%; }
    .page-vente .cm-step { view-timeline: --vt-step block; }
    .page-vente .cm-step::before { animation: vt-point linear both; animation-timeline: --vt-step; animation-range: entry 55% entry 100%; }
    @media (max-width: 720px) { .page-vente .cm-steps::after { animation-name: vt-trace-v; animation-range: entry 20% exit 40%; } }
    .page-vente .cm-pain-card { view-timeline: --vt-carte block; }
    .page-vente .cm-pain-card::before { animation: vt-trace linear both; animation-timeline: --vt-carte; animation-range: entry 40% cover 35%; }
    .page-vente :not(.cm-tier) > .cm-list li { animation: vt-coupe-g linear both; animation-timeline: view(); animation-range: entry 15% cover 30%; }
    .page-vente .cm-offer-price { animation: vt-coupe-b linear both; animation-timeline: view(); animation-range: entry 30% cover 30%; }
  }
}
.page-vente .cm-offer:not(.vt-offre) .kick { justify-content: center; }

/* Etapes des sections sombres : on retablit la grille de landing.css, sur fond
 * sombre, sans frise ni pastilles. */
.page-vente .ai-sombre .cm-steps { padding-top: 0; gap: 18px; }
.page-vente .ai-sombre .cm-steps::before, .page-vente .ai-sombre .cm-steps::after,
.page-vente .ai-sombre .cm-step::before, .page-vente .ai-sombre .cm-step-n::before { content: none; }
.page-vente .ai-sombre .cm-step { border-left: 3px solid #2E2E2E; padding: 4px 0 4px 18px; }
.page-vente .ai-sombre .cm-step-n { font-family: var(--fh); font-weight: 800; font-size: 1.4rem; letter-spacing: 0; text-transform: none; color: #fff; }
.page-vente .ai-sombre .cm-step h3 { font-size: 1.02rem; }

/* WebCare et Hebergement : les listes « + » et « · » posees directement (hors
 * .cm-forwho-col) n'avaient aucun positionnement, leurs « + » se posaient au bord gauche de la page. Defaut
 * anterieur, vu a l'ecran le 2026-09-29. */
.page-vente ul.cm-yes > li, .page-vente ul.cm-no > li { position: relative; padding: 5px 0 5px 22px; font-size: .92rem; }
/* .page-vente .wrap elargit les sections a 1080 px ; le formulaire WebCare et
 * Hebergement garde sa largeur de lecture, et le chapeau de la derniere section
 * se centre sous son titre (il etait decale avant, vu le meme jour). */
.page-vente .wrap.wc-form-wrap { max-width: 760px; }
.page-vente .wc-final .lead { margin-inline: auto; }
/* Une liste numerotee rangee dans une demi-colonne (.wc-two) n'a plus la place
 * de deux cartes cote a cote avant que la demi-colonne ne passe pleine largeur :
 * /webcare debordait de 53 px a 768 px (npm run gabarit). Une colonne, et des
 * pistes qui savent retrecir partout ailleurs. */
@media (min-width: 721px) {
  .page-vente :not(.cm-tier) > .cm-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-vente .wc-two .cm-list { grid-template-columns: minmax(0, 1fr); }
}

/* Pont de jetons (2026-09-29) : /site ne charge pas landing.css, ses variables
 * s'appellent --font-h, --font-accent, --font-b. Le bloc formateur y porte
 * .vt-jetons pour retrouver les siennes. /site a aussi un mode sombre, ou
 * --black devient clair : le fond blanc des roles y rendrait le texte invisible. */
.vt-jetons { --fh: var(--font-h); --fa: var(--font-accent); --fb: var(--font-b); --line: #E6E6E6; }
body.dark-mode .vt-jetons { --line: #2E2E2E; }
body.dark-mode .vt-roles li { background: transparent; }