/* ==========================================================================
   PROTOTYPE A — LES TROIS VITRINES (11/10/2026, ?proto=1 seulement)
   Gabarit : tpl/v2/proto-paliers.php ; script : proto-paliers.js.
   ÉTAT DE BASE = LE REPLI : sans script, sans animation-timeline ou au
   téléphone, les trois vitrines posées, lisibles, à plat. La scène (bureau)
   n'existe que sous html.js .pv.pv-scene, classe posée par le script après
   mesure.
   ========================================================================== */

/* La progression de la scène, 0 → 1. VALEUR INITIALE = 1 : l'état posé. */
@property --pvk { syntax: "<number>"; inherits: true; initial-value: 1; }
@keyframes pv-k { from { --pvk: 0; } to { --pvk: 1; } }

.pv {
  --pv-acc: #992CFF;          /* l'accent provisoire (violet de la V2) : seulement l'avance des chapitres */
  --pv-ressort: cubic-bezier(.22, 1, .36, 1);
  padding: clamp(72px, 10vh, 128px) 0 clamp(80px, 12vh, 140px);
}

/* ---- L'en-tête : titre à gauche, la comparaison à droite (à la Apple) ---- */
.pv-tete, .pv-jeu { max-width: calc(1080px + 2 * var(--pad)); }
.pv-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vh, 48px); }
.pv-tete-g { max-width: 760px; }
.pv-sous { margin-top: 16px; color: var(--gris-f); max-width: 600px; text-wrap: pretty; }
.pv-comparer {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px;
  font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid currentColor;
}
.pv-comparer:hover { color: var(--gris-f); }

/* ---- Le jeu : STUDIO | CORE, GRID couché dessous --------------------------- */
.pv-jeu { display: grid; gap: 16px; grid-template-columns: 1fr; }
.pv-carte {
  --fond: var(--blanc); --encre-c: var(--noir); --doux-c: var(--gris-f); --trait-c: rgba(0,0,0,.12);
  --chrome: #E9E9E9; --point: #C9C9C9; --adresse: #FFFFFF;
  position: relative; container-type: inline-size;
  display: flex; flex-direction: column; gap: 20px;
  padding: 14px 14px 22px; border-radius: 16px;
  background: var(--fond); color: var(--encre-c);
  /* Les liens de la barre du téléphone (#palier-…) : la vitrine se pose sous la nav (48 px au téléphone). */
  scroll-margin-top: 64px;
}
.pv-carte--grid-studio {
  --fond: var(--noir); --encre-c: var(--blanc); --doux-c: #A8A8A8; --trait-c: rgba(255,255,255,.16);
  --chrome: #1C1C1C; --point: #3A3A3A; --adresse: #2A2A2A;
}
.pv-carte--grid-core { --fond: #F2F2F0; --trait-c: rgba(0,0,0,.11); --chrome: #E2E2DF; --point: #C4C4C0; }
.pv-carte--grid { box-shadow: inset 0 0 0 1px var(--filet); }

/* Le voile : la photo commune, découpée en trois. Il n'existe que dans la scène. */
.pv-voile { display: none; }

/* ---- La fenêtre de navigateur et sa boucle -------------------------------- */
.pv-media { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pv-fenetre { position: relative; border-radius: 10px; overflow: hidden; background: var(--chrome); isolation: isolate; }
.pv-chrome { position: relative; height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.pv-chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--point); }
.pv-adresse {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 3px 12px; border-radius: 999px; background: var(--adresse);
  font: 500 11px/1.3 var(--font-body); color: var(--doux-c); letter-spacing: .01em;
  transition: opacity .3s;
}
/* Pause / Lecture : en haut à droite de la fenêtre, dans la barre du navigateur
   (posé visible par le script quand la boucle est lisible). Zone de toucher
   élargie à 44 px par ::before. */
.pv-pause {
  all: unset; box-sizing: border-box; position: absolute; top: 4px; right: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px;
  background: var(--adresse); color: var(--doux-c); font: 500 11px/1 var(--font-body); cursor: pointer;
  transition: color .25s;
}
.pv-pause[hidden] { display: none; }
.pv-pause::before { content: ""; position: absolute; inset: -11px -4px; }
.pv-pause:hover { color: var(--encre-c); }
.pv-pause:focus-visible { outline: 2px solid var(--encre-c); outline-offset: 2px; }
.pv-pause-i { width: 8px; height: 8px; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }
.pv-pause[data-arret] .pv-pause-i { background: currentColor; clip-path: polygon(10% 0, 100% 50%, 10% 100%); }
/* La pastille d'adresse laisse la place au bouton sur les fenêtres étroites. */
@container (max-width: 420px) { .pv-adresse { max-width: 48%; } }
.pv-ecran { position: relative; aspect-ratio: 16 / 10; background: #DDD; }
.pv-ecran img, .pv-ecran video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-ecran video { opacity: 0; transition: opacity .6s var(--ease); }
.pv-fenetre.pv-joue video { opacity: 1; }

/* Les chapitres de la boucle : un trait par fonction filmée, qui se remplit. */
.pv-chapitres { list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; }
.pv-chapitres li { flex: 1 1 0; min-width: 0; }
.pv-chap {
  all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; width: 100%;
  min-height: 44px; padding: 6px 0 4px; cursor: pointer; color: inherit;
}
.pv-trait { display: block; height: 2px; border-radius: 2px; background: var(--trait-c); overflow: hidden; }
.pv-trait i { display: block; height: 100%; width: 100%; background: var(--pv-acc); transform-origin: 0 50%; transform: scaleX(var(--av, 0)); }
.pv-chap[aria-pressed="true"] .pv-trait i { background: var(--pv-acc); }
.pv-carte--grid-studio .pv-trait i { background: #B57BFF; }
.pv-chap-t { font-size: 12.5px; line-height: 1.3; color: var(--doux-c); transition: color .25s; text-wrap: balance; }
.pv-chap[aria-pressed="true"] .pv-chap-t, .pv-chap:hover .pv-chap-t { color: var(--encre-c); }
.pv-chap:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
/* Sans boucle lisible (pas de script, pas de WebM) : les chapitres restent un index, pleins. */
html:not(.js) .pv-trait i, .pv-sans-video .pv-trait i { transform: scaleX(1); background: var(--trait-c); }
.pv-legende { font-size: 12px; line-height: 1.4; color: var(--doux-c); }

/* ---- Le texte -------------------------------------------------------------- */
.pv-texte { display: flex; flex-direction: column; gap: 18px; padding: 0; flex: 1; }
.pv-nom-l { display: grid; gap: 6px; }
.pv-nom {
  font-family: var(--f-titre); font-weight: var(--titre-w); font-stretch: 125%;
  font-size: clamp(26px, 2.5vw, 36px); line-height: 1; letter-spacing: -.025em; text-transform: uppercase; color: inherit;
}
.pv-titre {
  font-family: "Libre Caslon Text", "Libre Caslon repli", Georgia, serif; font-style: italic;
  font-size: clamp(19px, 1.6vw, 23px); line-height: 1.2; letter-spacing: -.01em;
}
.pv-label { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--doux-c); margin-bottom: -8px; }
.pv-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--trait-c); border-bottom: 1px solid var(--trait-c); }
.pv-chiffres > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: 14px 12px 14px 0; }
.pv-chiffres > div + div { padding-left: 14px; border-left: 1px solid var(--trait-c); }
.pv-chiffres dd { margin: 0; font-family: var(--f-titre); font-weight: 800; font-stretch: 125%; font-size: clamp(26px, 2.4vw, 34px); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pv-chiffres dt { font-size: 12.5px; line-height: 1.3; color: var(--doux-c); }
/* Sous 360 px, « +189 » débordait de sa cellule (6 px à 320). */
@media (max-width: 359px) {
  .pv-chiffres dd { font-size: 22px; }
  .pv-chiffres > div + div { padding-left: 10px; }
  .pv-chiffres > div { padding-right: 8px; }
}

.pv-liste-t { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--doux-c); margin-bottom: 4px; }
.pv-liste ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; column-gap: 24px; }
.pv-liste li { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--trait-c); }
.pv-l-t { font-size: 14.5px; font-weight: 500; line-height: 1.3; }
.pv-l-d { font-size: 13px; line-height: 1.35; color: var(--doux-c); }
.pv-encore summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none;
  font-size: 14px; font-weight: 500; border-top: 1px solid var(--trait-c); width: 100%;
}
.pv-encore summary::-webkit-details-marker { display: none; }
.pv-encore summary::before {
  content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1px solid currentColor;
  background: linear-gradient(currentColor, currentColor) center / 8px 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 8px no-repeat;
  transition: rotate .3s var(--pv-ressort);
}
.pv-encore[open] summary::before { rotate: 45deg; }
.pv-encore summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.pv-sans { margin-top: 12px; font-size: 13.5px; line-height: 1.45; color: var(--doux-c); }
.pv-sans-t { color: var(--encre-c); font-weight: 500; }

/* ---- Le pied : prix, appel, liens ------------------------------------------ */
.pv-pied { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--trait-c); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 24px; }
.pv-prix { display: grid; gap: 4px; }
.pv-prix-t { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--doux-c); }
.pv-prix-l { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pv-montant { display: inline-flex; font-family: var(--f-titre); font-weight: 800; font-stretch: 125%; font-size: clamp(40px, 3.6vw, 52px); line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.pv-sym { font-size: .5em; align-self: flex-start; margin: .12em .06em 0 0; letter-spacing: 0; }
.pv-col { position: relative; display: inline-block; height: 1em; overflow: hidden; }
.pv-fixe { display: inline-block; }
.pv-rouleau { position: absolute; left: 0; top: 0; display: none; flex-direction: column; }
.pv-rouleau i { font-style: normal; display: block; height: 1em; line-height: 1; }
.pv-une { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--trait-c); white-space: nowrap; align-self: center; }
.pv-prix-r { font-size: 13px; line-height: 1.4; color: var(--doux-c); max-width: 34ch; }
.pv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.pv-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px;
  border-radius: 999px; background: var(--encre-c); color: var(--fond);
  font: 500 15px/1 var(--font-body); text-decoration: none; white-space: nowrap;
  transition: background-color .3s var(--ease), transform .3s var(--pv-ressort);
}
.pv-carte--grid .pv-bouton, .pv-carte--grid-core .pv-bouton { color: var(--blanc); }
.pv-bouton:hover { background: #2B2B2B; }
.pv-carte--grid-studio .pv-bouton:hover { background: #DADADA; }
.pv-bouton:active { transform: scale(.97); }
.pv-bouton:focus-visible, .pv-lien:focus-visible, .pv-comparer:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.pv-carte--grid-studio .pv-bouton:focus-visible { outline-color: var(--blanc); }
.pv-lien { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 14px; font-weight: 500; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.pv-mdp { font-size: 12px; color: var(--doux-c); }

/* ---- Les chiffres du prix qui roulent (script seulement) ------------------- */
html.js .pv-prep .pv-fixe { visibility: hidden; }
html.js .pv-prep .pv-rouleau { display: flex; transform: translateY(0); }
html.js .pv-prep.pv-roule .pv-rouleau {
  transform: translateY(calc(var(--d) * -1em));
  /* Un ressort précalculé (léger dépassement puis retour), comme le compteur d'UI Arc. */
  transition: transform .9s linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 20.9%, 1.035 24.6%, 1.024 30.4%, 1.001 40%, .997 49.5%, 1);
}
html.js .pv-prep.pv-roule .pv-col:nth-child(3) .pv-rouleau { transition-delay: .06s; }
html.js .pv-prep.pv-roule .pv-col:nth-child(4) .pv-rouleau { transition-delay: .12s; }
html.js .pv-prep.pv-roule .pv-col:nth-child(5) .pv-rouleau { transition-delay: .18s; }

/* ---- Bureau : la composition de l'ancienne page, refaite ------------------- */
@media (min-width: 1000px) {
  .pv-jeu { grid-template-columns: 1fr 1fr; }
  .pv-carte { padding: 16px 16px 26px; }
  .pv-texte { padding: 0; }
  /* Les deux vitrines du haut : la légende tient deux lignes, les titres restent alignés. */
  .pv-carte:not(.pv-carte--grid) .pv-legende { min-height: 2.8em; }
  /* Les intitulés des chapitres aussi : ceux de CORE passent sur deux
     lignes, ceux de STUDIO non, et le nom et les chiffres de CORE tombaient
     9 px plus bas. (Pas de subgrid ici : container-type, dont la scène a
     besoin pour cqw, pose une containment de mise en page qui l'interdit.) */
  .pv-carte:not(.pv-carte--grid) .pv-chap-t { min-height: 2.6em; }
  .pv-carte--grid {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: 46% minmax(0, 1fr); column-gap: 36px; align-items: start;
    padding: 16px 26px 16px 16px;
  }
  .pv-carte--grid .pv-texte { padding: 10px 0 10px; height: 100%; }
  .pv-liste ul { grid-template-columns: 1fr 1fr; }
  /* GRID : le même pied que STUDIO et CORE (pastille à côté du prix, appel dessous). */
  .pv-carte--grid .pv-pied { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
  .pv-carte { scroll-margin-top: 92px; }
}
@media (min-width: 1000px) and (max-width: 1180px) {
  .pv-chiffres dt { font-size: 11.5px; }
}

/* ---- Téléphone et tablette ------------------------------------------------- */
@media (max-width: 999px) {
  .pv-jeu { gap: 14px; }
  .pv-carte { padding: 10px 12px 22px; gap: 18px; border-radius: 14px; }
  .pv-media { margin-inline: -2px; }
  .pv-chap-t { font-size: 12px; }
  .pv-actions { width: 100%; }
  .pv-bouton { flex: 1 1 100%; }
  .pv-pied { flex-direction: column; align-items: stretch; }
  /* L'arrivée de chaque fenêtre, au défilement (CSS seul, rien sans timeline). */
  @supports (animation-timeline: view()) {
    html.js .pv-fenetre { animation: pv-entree linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
  }
}
@media (min-width: 600px) and (max-width: 999px) {
  .pv-liste ul { grid-template-columns: 1fr 1fr; }
}
@keyframes pv-entree {
  from { clip-path: inset(7% 7% 7% 7% round 18px); scale: .97; }
  to   { clip-path: inset(0 0 0 0 round 10px); scale: 1; }
}

/* ---- La barre du téléphone (collante dans la section seulement) ------------ */
.pv-barre {
  position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 30;
  margin: 18px auto 0; width: min(100% - 20px, 560px);
}
.pv-barre-in {
  display: flex; align-items: center; gap: 6px; padding: 5px;
  border-radius: 999px; background: rgba(255,255,255,.93);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.09);
}
.pv-seg { list-style: none; margin: 0; padding: 0; display: flex; flex: 1; min-width: 0; position: relative; }
.pv-seg li { flex: 1 1 0; min-width: 0; }
.pv-seg a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 46px; padding: 0 4px;
  border-radius: 999px; text-decoration: none; color: var(--gris-f);
  transition: background-color .35s var(--pv-ressort), color .35s var(--pv-ressort);
}
.pv-seg a[aria-current="true"] { background: var(--noir); color: var(--blanc); }
.pv-seg-n { font-size: 12px; font-weight: 700; letter-spacing: .06em; line-height: 1.15; }
.pv-seg-p { font-size: 12px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pv-seg a:focus-visible, .pv-barre-bt:focus-visible { outline: 2px solid var(--noir); outline-offset: 2px; }
.pv-barre-bt {
  flex: none; display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 999px;
  /* Noir comme toutes les actions principales du site (.bt--plein) : l'accent reste aux chapitres. */
  background: var(--noir); color: var(--blanc); font: 500 14px/1 var(--font-body); text-decoration: none; white-space: nowrap;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .pv-barre-in { background: rgba(255,255,255,.97); } }
html.js .pv-barre { transition: opacity .35s var(--ease), translate .45s var(--pv-ressort), visibility 0s linear .45s; }
html.js .pv:not([data-barre]) .pv-barre { opacity: 0; translate: 0 16px; visibility: hidden; }
html.js .pv[data-barre] .pv-barre { transition-delay: 0s; }
@media (min-width: 1000px) { .pv-barre { display: none; } }

/* ==========================================================================
   LA SCÈNE (script présent, au défilement, sans épinglage)
   Une photo unique couvre les vitrines, jointes (chacune avance de la
   moitié de l'écart). Quand une vitrine monte dans l'écran, son morceau de
   photo se rétracte dans sa fenêtre de navigateur et se fond dans la démo,
   les vitrines se décollent ; à la pose, le texte monte en cascade et le
   prix roule. --pvk est propre à chaque vitrine (sa view-timeline), écrit
   par le script dans les moteurs sans timeline.
   ========================================================================== */
html.js .pv.pv-scene .pv-carte {
  --sep: clamp(0, calc((var(--pvk) - .05) / .4), 1);
  --rt: clamp(0, calc((var(--pvk) - .25) / .45), 1);
  --fon: clamp(0, calc((var(--pvk) - .7) / .18), 1);
}
@supports (animation-timeline: view()) {
  /* De la vitrine qui arrive à mi-écran jusqu'à son haut à 15 % de l'écran. */
  html.js .pv.pv-scene:not(.pv-driver) .pv-carte { animation: pv-k linear both; animation-timeline: view(); animation-range: cover 50vh cover 85vh; }
}
html.js .pv.pv-scene .pv-carte { border-radius: calc(4px + var(--sep) * 12px); }
@media (min-width: 1000px) {
  html.js .pv.pv-scene .pv-carte--grid-studio { translate: calc((1 - var(--sep)) * 8px) 0; }
  html.js .pv.pv-scene .pv-carte--grid-core   { translate: calc((1 - var(--sep)) * -8px) 0; }
}
/* Le voile : la photo commune (--ox, --pv-mw, --pv-mh posés par le
   script), qui se rétracte vers la fenêtre puis s'efface. */
html.js .pv.pv-scene .pv-voile {
  display: block; position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden;
  border-radius: inherit; background: #1B1714;
  /* cqw : la boîte de contenu de la vitrine (le conteneur), où se pose la fenêtre. */
  --pl: 10px; --pt: 10px;
  --winw: 100cqw;
  --winh: calc(100cqw / 1.6 + 30px);
  clip-path: inset(
    calc(var(--rt) * var(--pt))
    calc(var(--rt) * (100% - var(--pl) - var(--winw)))
    calc((1 - var(--rt)) * var(--vb0) + var(--rt) * (100% - var(--pt) - var(--winh)))
    calc(var(--rt) * var(--pl))
    round calc(4px + var(--sep) * 12px - var(--rt) * 6px));
  opacity: calc(1 - var(--fon));
  /* Au départ, la photo ne couvre que le haut des vitrines (sa hauteur, posée par le script). */
  --vb0: calc(100% - var(--pv-mh, 100%));
}
@media (min-width: 1000px) {
  html.js .pv.pv-scene .pv-voile { --pl: 16px; --pt: 16px; }
  html.js .pv.pv-scene .pv-carte--grid .pv-voile { --vb0: 0px; --winw: calc((100cqw - 36px) * .46); --winh: calc((100cqw - 36px) * .46 / 1.6 + 30px); }
}
html.js .pv.pv-scene .pv-voile img {
  position: absolute; max-width: none; object-fit: cover; object-position: 50% 30%;
  width: var(--pv-mw, 100%); height: var(--pv-mh, 100%);
  left: calc(-1 * var(--ox, 0px)); top: 0;
  /* Un lent travelling dans la photo pendant qu'elle se rétracte. */
  scale: calc(1.1 - .1 * var(--rt)); transform-origin: 50% 50%;
}
/* GRID n'a pas de morceau de photo (elle est toute aux deux vitrines du
   haut) : sa fenêtre s'ouvre seule, comme au téléphone. */
html.js .pv.pv-scene .pv-carte--grid .pv-voile { display: none; }
@supports (animation-timeline: view()) {
  html.js .pv.pv-scene .pv-carte--grid .pv-fenetre { animation: pv-entree linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
}

/* Avant la pose : le texte attend. À la pose : cascade (60 ms d'écart,
   500 ms, sortie douce). Le focus clavier pose la vitrine. */
html.js .pv.pv-scene .pv-carte :is(.pv-texte > *, .pv-chapitres, .pv-legende) {
  transition: opacity .55s var(--pv-ressort), translate .7s var(--pv-ressort);
  transition-delay: calc(var(--j, 0) * 60ms);
}
html.js .pv.pv-scene .pv-carte:not([data-pose]):not(:focus-within) :is(.pv-texte > *, .pv-chapitres, .pv-legende) { opacity: 0; translate: 0 22px; transition-duration: .25s; transition-delay: 0s; }
html.js .pv.pv-scene .pv-carte:focus-within .pv-voile { opacity: 0; }
.pv-texte > :nth-child(1) { --j: 1; } .pv-texte > :nth-child(2) { --j: 2; } .pv-texte > :nth-child(3) { --j: 3; }
.pv-texte > :nth-child(4) { --j: 4; } .pv-texte > :nth-child(5) { --j: 5; } .pv-texte > :nth-child(6) { --j: 6; }
.pv-chapitres { --j: 0; } .pv-legende { --j: 1; }

/* ---- 11/10 : la carte concise (défaut ; ?paliers=detail pour l'ancienne) ----
   Théo : « on ne sait pas quoi lire ». Une seule hiérarchie, comme les cartes
   « Which iPhone is right for you? » : le nom, la promesse, LE PRIX en grand,
   l'appel, puis trois raisons. L'œil va du nom au prix au bouton. */
.pv-titre-c { max-width: 16em; }
.pv-sous-c { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; color: var(--noir); max-width: 34em; }
.pv-texte--c { gap: 0; padding-top: 8px; }
.pv-texte--c .pv-nom { font-size: clamp(30px, 2.9vw, 42px); }
.pv-texte--c .pv-titre { margin-top: 8px; color: var(--doux-c); }
.pv-carte--grid-studio .pv-texte--c .pv-titre { color: #CFCFCF; }
.pv-prix-c { margin-top: 22px; }
.pv-prix-c .pv-montant { font-size: clamp(52px, 5vw, 76px); letter-spacing: -.045em; }
.pv-texte--c .pv-prix-r { margin-top: 6px; }
.pv-actions--c { margin-top: 22px; gap: 6px 22px; }
.pv-plus {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--trait-c);
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--doux-c);
}
.pv-raisons { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.pv-raisons li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; }
.pv-r-i { display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--accent, #992CFF); color: #FFFFFF; }
.pv-r-i svg { width: 12px; height: 12px; }
.pv-r-t { display: block; font-size: 16px; line-height: 1.3; font-weight: 600; color: inherit; }
.pv-r-d { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--doux-c); }
.pv-mdp-c { margin-top: 18px; font-size: 12px; color: var(--doux-c); }
@media (min-width: 1000px) {
  /* GRID, couché : les raisons sur trois colonnes, sous l'appel. */
  .pv-carte--grid .pv-raisons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .pv-carte--grid .pv-raisons li { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 999px) {
  .pv-actions--c .pv-lien { flex: 1 1 100%; justify-content: center; }
}