/* ============================================================
   partners.html, calquee sur attio.com/partners : titre centre avec pastille,
   sections numerotees (01 / Creator partners...) en deux colonnes, phrase en
   deux tons, panneau de chiffres a droite, comparatif, etapes, FAQ, depot.
   Nav, pied de page, jetons, pastille et boutons viennent de help.css.
   ============================================================ */
.pt { max-width: 1440px; margin: 0 auto; padding: 0 24px; }
.pt-label { font: 600 12px/14px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.pt-statement { max-width: 560px; margin-top: 16px; font-family: var(--font-display); font-weight: 500; font-size: 32px; line-height: 36px; letter-spacing: -.02em; color: #8f99a8; }
.pt-statement span { font-weight: 600; color: var(--ink); }
.feat-check { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: #f1f2f4; color: #6f7988; }
.feat-check svg { width: 12px; height: 12px; }
.pt .btn-navy svg, .pt .btn-white svg { width: 16px; height: 16px; flex: none; }

/* Titre */
.pt-hero { padding: 116px 0 88px; text-align: center; }
.pt-hero .pill { display: inline-flex; }
.pt-hero h1 { max-width: 860px; margin: 24px auto 0; font-family: var(--font-display); font-weight: 600; font-size: 56px; line-height: 60px; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.pt-hero > p { max-width: 580px; margin: 16px auto 0; font: 500 20px/26px var(--font-body); letter-spacing: -.01em; color: var(--text); }
.pt-hero-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.pt-trust { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 24px; margin: 24px 0 0; padding: 0; font: 500 13px/18px var(--font-body); color: var(--muted); }
.pt-trust li { display: inline-flex; align-items: center; gap: 8px; }
.pt-trust li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--faint); }

/* Programmes */
.pt-prog { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; max-width: 1180px; margin: 0 auto; padding: 96px 0; border-top: 1px solid var(--line-2); scroll-margin-top: calc(var(--nav-h) + 16px); }
.pt-prog-text h3 { margin-top: 32px; font: 600 12px/14px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
/* Seuils : trois chiffres separes par des filets, comme les stats d'attio */
.pt-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 32px 0 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.pt-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 18px 20px 18px 0; }
.pt-stats > div + div { padding-left: 20px; border-left: 1px solid var(--line-2); }
.pt-stats dd { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 32px; letter-spacing: -.02em; color: var(--ink); }
.pt-stats dt { font: 500 13px/18px var(--font-body); color: var(--muted); }
.pt-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 14px 0 0; padding: 0; }
.pt-list li { display: flex; align-items: flex-start; gap: 10px; font: 500 15px/20px var(--font-body); color: var(--text); }
.pt-ask { margin: 12px 0 0; padding-left: 18px; }
.pt-ask li { margin-top: 6px; font: 400 14px/22px var(--font-body); color: var(--muted); }
.pt-ask li::marker { color: var(--faint); }
.pt-apply { margin-top: 32px; }

/* Panneau compose : cartes d'interface posees sur une grille de construction */
.pt-prog-art { position: sticky; top: calc(var(--nav-h) + 32px); align-self: start; display: grid; place-items: center; min-height: 550px; padding: 40px; border: 1px solid var(--line-2); border-radius: 20px; overflow: hidden;
  background-color: var(--fill); background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px); background-size: 44px 44px; background-position: -1px -1px; }
/* 470px et non 420 : a 420, la carte du chiffre recouvrait l'en-tete « Earnings » (et la ligne
   « Support » du roster), ou vivent maintenant le total et la commission animes. */
.pt-stack { position: relative; width: 100%; max-width: 420px; height: 470px; }
.pt-card { position: absolute; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 32px rgba(16,24,40,.07); }
.pt-card-label { font: 600 11px/14px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.pt-metric { left: 50%; top: 50%; width: 280px; padding: 24px 24px 22px; transform: translate(-50%, -50%); z-index: 2; box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 24px 48px rgba(16,24,40,.12); }
.pt-metric-tag { display: inline-flex; height: 24px; align-items: center; padding: 0 8px; border: 1px solid #c9d8fb; border-radius: 8px; background: #eef3ff; font: 500 12px/18px var(--font-body); color: #2f5fe3; }
.pt-metric-big { margin-top: 14px; font-family: var(--font-display); font-weight: 600; font-size: 64px; line-height: 64px; letter-spacing: -.03em; color: var(--navy); }
.pt-metric-label { margin-top: 8px; font: 500 13px/19px var(--font-body); color: var(--muted); }
.pt-code-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--fill);
  font: 500 13px/18px var(--font-mono); color: var(--ink); }
.pt-code-field svg { width: 14px; height: 14px; color: var(--faint); flex: none; }
.pt-code-note { display: flex; align-items: center; gap: 8px; margin-top: 10px; font: 500 12px/16px var(--font-body); color: var(--text); }
.pt-code-note .feat-check { width: 18px; height: 18px; }
/* Createur : code en haut a gauche, gains en bas a droite */
.pt-code { left: 0; top: 0; width: 230px; padding: 16px; transform: rotate(-2deg); }
.pt-payout { right: 0; bottom: 0; width: 210px; padding: 16px; transform: rotate(2deg); }
.pt-payout-head { display: flex; align-items: center; min-height: 18px; }
.pt-payout-total { margin-left: auto; font: 600 13px/14px var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--ink); }
.pt-bars { display: flex; align-items: flex-end; gap: 6px; height: 56px; margin-top: 12px; }
.pt-bars span { flex: 1; border-radius: 3px 3px 0 0; background: #dbe3f7; transition: height .7s cubic-bezier(.22,1,.36,1), background-color .4s ease; }
.pt-bars span:last-child { background: var(--navy); }
.pt-payout-foot { margin-top: 10px; font: 500 12px/16px var(--font-body); color: var(--muted); }

/* ------------------------------------------------------------
   Motion design des scenes « Creator partners » et « Team partners »
   (script en bas de partners.html)
   Une vente raconte le programme : le code est tape puis copie, un viewer
   l'utilise (notification), la commission tombe dans les gains. Langage repris
   de lp-alt-1 : entree par le bas avec flou (8px, blur 2px), sortie par le haut,
   halo « ping », pastille verte des etats « Completed », memes courbes.
   Le HTML servi est l'etat FINAL : .is-motion (pose par le script) est la seule
   porte vers les etats animes, donc sans JS la composition reste complete.
   ------------------------------------------------------------ */
.pt-stack--creator { --pt-r: -1deg; }
.pt-stack--team { --pt-r: 1deg; }
/* Carte de vente : notification seule (equipe, coin en haut a droite) ou fil de ventes
   (createur, coin en bas a gauche). */
.pt-sale, .pt-feed-item { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 32px rgba(16,24,40,.08); }
.pt-sale { position: absolute; left: 0; bottom: 26px; z-index: 3; width: 204px; transform: rotate(var(--pt-r)); }
.pt-sale .pt-av, .pt-feed-item .pt-av { flex: none; }
/* Fil de ventes : la plus recente en bas (0), la precedente au-dessus (1), la plus
   ancienne s'efface sur place (2). data-pos est une PLACE, servie dans le HTML : sans
   JS, deux ventes restent affichees. Trois cartes tournent, rien n'est cree. */
.pt-feed { position: absolute; left: 0; bottom: 14px; z-index: 3; width: 204px; height: 116px; }
.pt-feed-item { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; transform: rotate(var(--pt-r)); }
.pt-feed-item[data-pos="1"] { z-index: 2; transform: translateY(-62px) rotate(var(--pt-r)); }
.pt-feed-item[data-pos="2"] { z-index: 1; opacity: 0; filter: blur(2px); transform: translateY(-62px) scale(.96) rotate(var(--pt-r)); }
.pt-feed-item[data-pos="in"] { opacity: 0; filter: blur(2px); transform: translateY(10px) rotate(var(--pt-r)); }
.pt-stack.is-motion .pt-feed-item { transition: opacity .45s cubic-bezier(.33,1,.68,1), transform .6s cubic-bezier(.22,1,.36,1), filter .45s cubic-bezier(.33,1,.68,1); }
.pt-stack.is-motion .pt-feed-item.is-resetting { transition: none; }
.pt-sale-txt { min-width: 0; }
.pt-sale-txt p { font: 500 12px/16px var(--font-body); color: var(--text); white-space: nowrap; }
.pt-sale-txt b { font-weight: 600; color: var(--ink); }
.pt-sale-code { padding: 1px 4px; border-radius: 5px; background: #e8f0ff; font: 500 11px/1 var(--font-mono); color: #245bc2; }
.pt-sale-txt .pt-sale-sub { margin-top: 2px; font-size: 11px; line-height: 14px; color: var(--muted); }
.pt-stack.is-motion .pt-sale { opacity: 0; transform: translateY(8px) rotate(var(--pt-r)); filter: blur(2px);
  transition: opacity .5s cubic-bezier(.33,1,.68,1), transform .55s cubic-bezier(.22,1,.36,1), filter .5s cubic-bezier(.33,1,.68,1); }
.pt-stack.is-motion .pt-sale.is-shown { opacity: 1; transform: rotate(var(--pt-r)); filter: none; }
.pt-stack.is-motion .pt-sale.is-leaving { opacity: 0; transform: translateY(-8px) rotate(var(--pt-r)); filter: blur(2px); transition-duration: .45s, .5s, .45s; }
.pt-stack.is-motion .pt-sale.is-resetting { transition: none; }
/* Code : curseur de frappe, selection franche (bleu marque, texte blanc), champ qui
   passe au vert avec une pastille « Copied » au clic. Le geste doit se VOIR : la
   premiere version (selection bleu pale, coche de 14px, info-bulle de 11px) passait
   inapercue (retour du 2026-09-30). */
.pt-code-field { position: relative; transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease; }
.pt-code-text { display: inline-flex; align-items: center; min-height: 18px; border-radius: 3px; transition: background-color .2s ease, box-shadow .2s ease, color .2s ease, opacity .35s ease, filter .35s ease; }
/* Champ vide : placeholder, et le curseur de saisie passe AVANT lui comme dans un vrai champ */
.pt-code-text:empty::before { content: attr(data-placeholder); color: var(--faint); }
.pt-code-text:empty::after { order: -1; }
.pt-code-text.is-clearing { opacity: 0; filter: blur(2px); }
.pt-code-field.is-focused { border-color: #2f5fe3; background-color: #fff; box-shadow: 0 0 0 3px rgba(47,95,227,.14); }
.pt-code-text.is-selected { background: #2f5fe3; box-shadow: 0 0 0 2px #2f5fe3; color: #fff; }
.pt-code-text.is-typing::after { content: ""; width: 1.5px; height: 14px; margin-left: 1px; border-radius: 1px; background: var(--ink); animation: pt-caret 1s steps(1) infinite; }
@keyframes pt-caret { 50% { opacity: 0; } }
.pt-copy { position: relative; display: grid; place-items: center; flex: none; width: 14px; height: 14px; transition: opacity .2s ease; }
.pt-copy::before { content: ""; position: absolute; inset: -5px; border-radius: 6px; background: rgba(47,95,227,.14); opacity: 0; transition: opacity .15s ease; }
.pt-copy.is-pressed::before { opacity: 1; }
.pt-code-field .pt-copy.is-pressed svg { color: #2f5fe3; }
.pt-code-field.is-copied { border-color: #8fd9b3; background-color: #f2fcf6; box-shadow: 0 0 0 3px rgba(0,125,83,.1); }
.pt-code-field.is-copied .pt-copy { opacity: 0; }
.pt-copied { position: absolute; right: 5px; top: 50%; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px 0 6px; border: 1px solid #bfeed5; border-radius: 7px; background: #e0fced;
  font: 600 11.5px/1 var(--font-body); color: #007d53; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(6px, -50%); filter: blur(2px); transition: opacity .25s ease, transform .4s cubic-bezier(.22,1,.36,1), filter .25s ease; }
.pt-code-field .pt-copied svg { width: 10px; height: 10px; color: currentColor; }
.pt-code-field.is-copied .pt-copied { opacity: 1; transform: translate(0, -50%); filter: none; }
/* Curseur « You » (facon curseur multijoueur) : sa pointe arrive sur l'icone copier,
   par le bas a gauche (par la droite, son etiquette sortait de l'ecran sur mobile).
   Masque par defaut : sans JS il n'existe pas visuellement. */
.pt-cursor { position: absolute; left: calc(100% - 35px); top: 57px; z-index: 5; width: 16px; height: 18px; pointer-events: none; transform-origin: 1.5px 1.2px;
  filter: drop-shadow(0 1px 1.5px rgba(16,24,40,.25)); opacity: 0; transform: translate(-44px, 40px);
  transition: opacity .35s ease, transform .75s cubic-bezier(.22,1,.36,1), left .75s cubic-bezier(.65,0,.35,1); }
/* Clic dans le champ (placeholder) : la pointe vise le debut du texte ; en retirant la
   classe, le curseur glisse le long du champ jusqu'a l'icone copier. */
.pt-cursor.is-at-field { left: 62px; }
.pt-cursor svg { display: block; width: 16px; height: 18px; }
.pt-cursor-tag { position: absolute; left: 12px; top: 15px; padding: 2px 6px; border-radius: 2px 7px 7px 7px; background: #2f5fe3; font: 600 11px/14px var(--font-body); color: #fff; white-space: nowrap; }
.pt-cursor.is-in { opacity: 1; transform: none; }
.pt-cursor.is-down { transform: scale(.84); transition-duration: .35s, .12s, .75s; }
.pt-cursor.is-out { opacity: 0; transform: translate(-18px, 24px); transition-duration: .4s, .6s, .75s; }
.pt-cursor.is-resetting { transition: none; }
/* Halo sur le code quand un viewer l'utilise (help-ping de la landing, en bleu lien) */
.pt-code-field.is-ping { animation: pt-ping 1.1s cubic-bezier(.33,1,.68,1); }
@keyframes pt-ping { 0% { border-color: #9dbcf6; box-shadow: 0 0 0 0 rgba(38,109,240,.35); } 100% { border-color: var(--line-2); box-shadow: 0 0 0 6px rgba(38,109,240,0); } }
@keyframes pt-ping-fade { 0% { border-color: #9dbcf6; } 100% { border-color: var(--line-2); } }
.pt-metric-tag.is-ping { animation: pt-tag-ping 1.1s cubic-bezier(.33,1,.68,1); }
@keyframes pt-tag-ping { 0% { box-shadow: 0 0 0 0 rgba(47,95,227,.35); background: #dbe6ff; } 100% { box-shadow: 0 0 0 6px rgba(47,95,227,0); background: #eef3ff; } }
@keyframes pt-tag-fade { 0% { background: #dbe6ff; } 100% { background: #eef3ff; } }
.pt-stack--creator.is-motion .pt-code-note { transition: opacity .4s ease, transform .5s cubic-bezier(.22,1,.36,1); }
.pt-stack--creator.is-motion .pt-code-note .feat-check { transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.pt-code-note.is-hidden { opacity: 0; transform: translateY(4px); }
.pt-code-note.is-hidden .feat-check { transform: scale(.6); }
.pt-metric-big { font-variant-numeric: tabular-nums; }
/* Commission qui arrive contre le total. L'en-tete a une hauteur fixe (18px) et
   le total garde sa marge auto : la pastille n'y decale rien. */
.pt-chip { flex: none; display: inline-flex; align-items: center; height: 18px; margin-left: auto; padding: 0 5px; border: 1px solid #cbf7e1; border-radius: 6px; background: #e0fced;
  font: 600 11px/1 var(--font-body); font-variant-numeric: tabular-nums; color: #007d53; white-space: nowrap; pointer-events: none;
  animation: pt-chip 1.9s cubic-bezier(.33,1,.68,1) both; }
.pt-chip + .pt-payout-total { margin-left: 6px; }
@keyframes pt-chip {
  0% { opacity: 0; transform: translateY(5px); filter: blur(2px); }
  20% { opacity: 1; transform: none; filter: none; }
  75% { opacity: 1; transform: none; filter: none; }
  100% { opacity: 0; transform: translateY(-5px); filter: blur(2px); }
}
@keyframes pt-chip-fade { 0%, 100% { opacity: 0; } 18%, 72% { opacity: 1; } }
/* ---- Scene « Team partners » : lien d'invitation copie, joueur qui rejoint le roster
   (ligne qui entre en haut, « Joined » puis sa variante qui se peint), ventes avec le
   code d'equipe (notification en haut a droite, halo sur « Team code », +70 %). */
.pt-stack--team .pt-sale { left: auto; right: 0; top: 34px; bottom: auto; width: 196px; }
.pt-roster-head { display: flex; align-items: center; min-height: 18px; }
.pt-roster-count { margin-left: auto; font: 500 12px/14px var(--font-body); font-variant-numeric: tabular-nums; color: var(--muted); }
.pt-chip + .pt-roster-count { margin-left: 6px; }
/* Lignes : hauteur plafonnee pour qu'une ligne qui entre (0 -> 26px) et celle qui sort
   (26px -> 0) s'echangent sans que la carte change de taille ; les marges -8px
   annulent l'ecart du flex pendant l'echange. */
.pt-roster-card li { position: relative; max-height: 26px; overflow: hidden; }
.pt-stack--team.is-motion .pt-roster-card li { transition: max-height .5s cubic-bezier(.22,1,.36,1), margin .5s cubic-bezier(.22,1,.36,1), opacity .4s ease, transform .5s cubic-bezier(.22,1,.36,1), filter .4s ease; }
.pt-roster-card li.is-entering { max-height: 0; margin-bottom: -8px; opacity: 0; transform: translateY(-6px); filter: blur(2px); }
.pt-roster-card li.is-leaving { max-height: 0; margin-top: -8px; opacity: 0; filter: blur(2px); }
.pt-roster-card li.is-pending { opacity: 0; transform: translateY(6px); filter: blur(2px); }
.pt-stack--team.is-motion .pt-var { transform-origin: left center; transition: transform .6s cubic-bezier(.22,1,.36,1) .15s; }
.pt-roster-card li.is-pending .pt-var, .pt-roster-card li.is-new .pt-var { transform: scaleX(0); }
.pt-joined { position: absolute; right: 0; top: 50%; display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border: 1px solid #cbf7e1; border-radius: 6px; background: #e0fced;
  font: 600 11px/1 var(--font-body); color: #007d53; opacity: 0; transform: translateY(-50%); transition: opacity .3s ease; pointer-events: none; }
.pt-roster-card li.is-new .pt-joined { opacity: 1; }
/* Lien d'invitation : trop long pour loger « Copied » dans le champ, la pastille monte
   sur la ligne du libelle ; l'icone reste, en vert. */
.pt-invite .pt-copied { top: auto; bottom: calc(100% + 7px); right: -1px; transform: translateY(4px); }
.pt-invite .pt-code-field.is-copied .pt-copied { transform: none; }
.pt-invite .pt-code-field.is-copied .pt-copy { opacity: 1; }
.pt-invite .pt-code-field.is-copied .pt-copy svg { color: #007d53; }
/* Part d'equipe d'une vente : pastille dans le coin de la carte du chiffre */
.pt-metric > .pt-chip { position: absolute; top: 24px; right: 24px; margin: 0; }
/* Animations reduites : tout continue, en simples fondus (regle du projet : ralentir, jamais couper) */
@media (prefers-reduced-motion: reduce) {
  .pt-stack.is-motion .pt-sale, .pt-stack.is-motion .pt-sale.is-shown, .pt-stack.is-motion .pt-sale.is-leaving { transform: rotate(var(--pt-r)); filter: none; }
  .pt-code-text.is-typing::after { animation: none; }
  .pt-code-field.is-ping { animation-name: pt-ping-fade; }
  .pt-metric-tag.is-ping { animation-name: pt-tag-fade; }
  .pt-cursor, .pt-cursor.is-in, .pt-cursor.is-down, .pt-cursor.is-out { transform: none; }
  /* le curseur glisse quand meme vers l'icone, plus lentement (ralentir, jamais couper) */
  .pt-cursor, .pt-cursor.is-down, .pt-cursor.is-out { transition-duration: .35s, .35s, 1.1s; }
  .pt-copied, .pt-code-field.is-copied .pt-copied { transform: translate(0, -50%); filter: none; }
  .pt-code-note.is-hidden, .pt-code-note.is-hidden .feat-check { transform: none; }
  .pt-chip { animation-name: pt-chip-fade; }
  .pt-stack.is-motion .pt-feed-item { transition-property: opacity, filter; }
  .pt-feed-item[data-pos="in"] { transform: rotate(var(--pt-r)); }
  .pt-feed-item[data-pos="2"] { transform: translateY(-62px) rotate(var(--pt-r)); }
  .pt-roster-card li.is-entering, .pt-roster-card li.is-leaving, .pt-roster-card li.is-pending { transform: none; filter: none; }
  .pt-invite .pt-copied { transform: none; }
}
/* Equipe : effectif en haut a gauche, lien d'invitation en bas a droite */
.pt-roster-card { left: 0; top: 0; width: 230px; padding: 16px; transform: rotate(-2deg); }
.pt-roster-card ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pt-roster-card li { display: flex; align-items: center; gap: 10px; font: 500 13px/18px var(--font-body); color: var(--ink); }
.pt-av { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--c) 14%, #fff); font: 600 10px/1 var(--font-body); color: var(--c); }
.pt-var { width: 28px; height: 8px; margin-left: auto; border-radius: 4px; background: var(--c); opacity: .75; }
.pt-invite { left: 0; bottom: 0; width: 250px; padding: 16px; transform: rotate(1.5deg); }
.pt-stack--team .pt-metric { left: auto; right: 0; top: 50%; transform: translateY(-40%); }

/* Comparatif */
.pt-compare, .pt-steps-sec { max-width: 1180px; margin: 0 auto; padding: 96px 0; border-top: 1px solid var(--line-2); scroll-margin-top: calc(var(--nav-h) + 16px); }
.pt-cmp { margin-top: 40px; }
.pt-cmp-row { display: grid; grid-template-columns: 240px minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; border-bottom: 1px solid #edeff3; }
.pt-cmp-row > div { padding: 16px 0; font: 500 14px/20px var(--font-body); color: var(--text); }
.pt-cmp-row > div:first-child { color: var(--ink); }
.pt-cmp-head > div { padding: 0 0 14px; font: 500 20px/26px var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.pt-note { max-width: 720px; margin-top: 24px; font: 500 14px/22px var(--font-body); color: var(--muted); }

/* Etapes */
.pt-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 48px 0 0; padding: 0; }
.pt-steps li { padding-top: 20px; border-top: 1px solid var(--line); }
.pt-step-n { font: 600 12px/14px var(--font-mono); color: var(--faint); }
.pt-steps h3 { margin-top: 14px; font: 600 16px/22px var(--font-body); color: var(--ink); }
.pt-steps p { margin-top: 6px; font: 500 14px/20px var(--font-body); color: var(--muted); }

/* FAQ (meme style que pricing) */
.pt-faq { max-width: 672px; margin: 0 auto; padding: 120px 0 40px; }
.pt-faq h2 { margin-bottom: 24px; font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 44px; letter-spacing: -.015em; color: var(--ink); }
.pt-faq details { border-bottom: 1px solid #edeff3; }
.pt-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; list-style: none; cursor: pointer; font: 500 16px/22px var(--font-body); color: var(--ink); }
.pt-faq summary::-webkit-details-marker { display: none; }
.pt-faq summary::after { content: "[+]"; flex: none; font: 400 13px/1 var(--font-mono); color: var(--faint); }
.pt-faq details[open] summary::after { content: "[-]"; }
.pt-faq summary:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: 4px; border-radius: 4px; }
.pt-faq details p { padding: 0 0 22px; font: 400 15px/24px var(--font-body); color: var(--muted); }

/* Depot */
.pt-final { max-width: 1180px; margin: 0 auto; padding: 96px 0 140px; text-align: center; }
.pt-final h2 { font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 44px; letter-spacing: -.015em; color: var(--ink); }
.pt-final > p { max-width: 560px; margin: 14px auto 0; font: 500 16px/24px var(--font-body); color: var(--muted); }
.pt-tickets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 900px; margin: 40px auto 0; text-align: left; }
.pt-ticket { display: flex; flex-direction: column; padding: 24px; border: 1px solid #e9ebef; border-radius: 20px; background: #fff; }
.pt-ticket h3 { font: 500 24px/30px var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.pt-ticket > p { margin-top: 6px; font: 500 14px/20px var(--font-body); color: var(--muted); }
.pt-ticket .pt-list { margin-bottom: 24px; }
.pt-ticket .pt-list li { font-size: 14px; }
.pt-ticket > a { margin-top: auto; align-self: flex-start; }

@media (max-width: 1000px) {
  .pt-prog { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 72px 0; }
  .pt-prog-art { position: static; min-height: 0; padding: 28px 16px; }
  .pt-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pt { padding: 0 16px; }
  .pt-hero { padding: 72px 0 56px; }
  .pt-hero h1 { font-size: 40px; line-height: 44px; }
  .pt-hero > p { font-size: 18px; line-height: 24px; }
  .pt-statement { font-size: 26px; line-height: 30px; }
  .pt-stats > div { padding-right: 10px; }
  .pt-stats > div + div { padding-left: 10px; }
  .pt-stats dd { font-size: 22px; line-height: 26px; }
  .pt-stack { height: auto; display: flex; flex-direction: column; gap: 12px; }
  .pt-card, .pt-stack--team .pt-metric { position: static; width: auto; transform: none; }
  .pt-stack--creator, .pt-stack--team { --pt-r: 0deg; }
  .pt-sale, .pt-stack--team .pt-sale { position: static; width: auto; }
  .pt-feed { position: relative; left: auto; bottom: auto; width: auto; }
  .pt-stack--creator .pt-code, .pt-stack--team .pt-invite, .pt-stack--team .pt-metric { position: relative; }
  .pt-cmp-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pt-cmp-row > div:first-child { grid-column: 1 / -1; padding-bottom: 0; font-weight: 600; }
  .pt-cmp-head > div:first-child { display: none; }
  .pt-steps, .pt-tickets { grid-template-columns: minmax(0, 1fr); }
  .pt-faq h2, .pt-final h2 { font-size: 32px; line-height: 36px; }
}