.pr-produit { scroll-margin-top: 96px; }
.pr-sommaire { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); margin-top: var(--e2); }
.pr-carte {
  position: relative; display: flex; flex-direction: column; gap: var(--e2);
  padding: var(--e5) var(--e6) var(--e6); border-radius: var(--r-xl);
  background: var(--verre-fort); box-shadow: var(--verre-bord), var(--om-1);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--ink); text-decoration: none;
  transition: translate .35s var(--ressort), box-shadow .3s var(--doux);
}
.pr-carte:hover { translate: 0 -3px; box-shadow: var(--verre-bord), var(--om-2); color: var(--ink); }
.pr-carte-tete { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e1); }
.pr-carte-tete .etiquette { color: var(--ink-2); }
.pr-carte-fl { margin-left: auto; font-size: 18px; color: var(--acc-fort); transition: translate .35s var(--ressort); }
.pr-carte:hover .pr-carte-fl { translate: 0 3px; }
.pr-carte-nom { font-size: 1.375rem; font-weight: 650; letter-spacing: -.03em; line-height: 1.15; }
.pr-carte-dit { font-size: var(--t-donnee); line-height: 1.55; color: var(--ink-2); }
.pr-prix {
  align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 var(--e3); border-radius: var(--pill);
  background: var(--acc-voile); box-shadow: inset 0 0 0 1px var(--acc-trait);
  font-size: .8125rem; font-weight: 650; color: var(--ink); white-space: nowrap;
}
.pr-carte .pr-prix { margin-top: var(--e3); }
.pr-etapes {
  counter-reset: pr-etape; list-style: none; margin: var(--e10) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e4);
}
.pr-etape {
  counter-increment: pr-etape; min-width: 0;
  display: flex; flex-direction: column; gap: var(--e3);
  padding: var(--e4) var(--e4) var(--e5); border-radius: var(--r-lg);
  background: var(--carte); box-shadow: var(--om-1);
}
.pr-moment::before { content: counter(pr-etape, decimal-leading-zero) " · "; color: var(--acc-fort); }
.pr-moment { padding: 0 var(--e1); }
.pr-etape h3 { padding: 0 var(--e1); font-size: 1.0625rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.3; }
.pr-etape p { padding: 0 var(--e1); font-size: var(--t-donnee); line-height: 1.6; color: var(--ink-2); }
.pr-etape p b { color: var(--ink); }
.pr-mini { min-height: 128px; display: grid; align-content: center; border-radius: 14px; box-shadow: 0 0 0 1px rgba(41,43,49,.08), 0 10px 24px -14px rgba(58,50,99,.35); }
:root[data-theme="nuit"] .pr-mini { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 10px 24px -14px rgba(0,0,0,.8); }
.pr-mini .e-page { padding: 14px; gap: 10px; }
.pr-mini .e-courbe { height: 44px; }
.pr-mini .e-somme { line-height: 1.1; }
.pr-ligne {
  display: flex; align-items: flex-start; gap: var(--e3); margin-top: var(--e5);
  padding: var(--e4) var(--e5); border-radius: var(--r-lg);
  background: var(--acc-voile); box-shadow: inset 0 0 0 1px var(--acc-trait);
}
.pr-ligne + .pr-ligne { margin-top: var(--e3); }
.fond-soutenu .pr-ligne { background: var(--carte); box-shadow: var(--om-1), inset 0 0 0 1px var(--acc-trait); }
.pr-ligne .tuile-ico { width: 32px; height: 32px; border-radius: 10px; font-size: 16px; flex: none; }
.pr-ligne p { font-size: var(--t-donnee); line-height: 1.6; color: var(--ink-2); padding-top: 5px; }
.pr-ligne p b { color: var(--ink); }
.pr-suite .actions { position: relative; }
.pr-suite p b { color: var(--ink); }
.pr-outils { margin-top: var(--e10); }
.pr-outils h3 { font-size: 1.0625rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.3; }
.pr-principes { margin-top: var(--e10); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e8) var(--e8); }
.pr-principe { display: flex; flex-direction: column; gap: var(--e3); padding-top: var(--e5); border-top: 2px solid var(--trait-nuit); }
.pr-principe .tuile-ico { background: rgba(192,166,255,.14); color: var(--lueur); }
.pr-principe h3 { font-size: 1.125rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.3; color: #fff; }
.pr-principe p { font-size: var(--t-donnee); line-height: 1.65; color: var(--ink-nuit); }
@media (max-width: 1100px) {
  .pr-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .pr-sommaire, .pr-principes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .pr-etapes { grid-template-columns: minmax(0, 1fr); }
  .pr-ligne { padding: var(--e4); }
}