/* Pro : feuille de paiement (js/paywall.js), cadenas et badge. Mobile-first (360 px sans débordement). Chargé avant mobile.css. */
body.pw-open { overflow: hidden; }
.pw-ov { position: fixed; inset: 0; z-index: 400; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: pw-fade .2s ease both; }
.pw-sheet { position: relative; width: 100%; max-width: 100%; max-height: 94vh; max-height: 94dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--card); color: var(--tx); border: 1px solid var(--line); border-bottom: 0; border-radius: 24px 24px 0 0;
  padding: 22px 16px calc(18px + var(--safeB)); box-shadow: var(--shadow); animation: pw-up .34s var(--ease-sheet, cubic-bezier(.32,.72,0,1)) both; }
.pw-sheet, .pw-sheet * { min-width: 0; overflow-wrap: anywhere; }
.pw-grab { position: absolute; top: 8px; left: 50%; width: 42px; height: 4px; margin-left: -21px; border-radius: 2px; background: var(--line); }
.pw-x { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--tx2); }
.pw-x:hover { background: var(--card2); color: var(--tx); }
.pw-body { padding-top: 4px; }
.pw-head { display: flex; align-items: center; gap: 12px; padding-right: 44px; }
.pw-lock { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: rgba(var(--acc-rgb), .16); color: var(--acc); }
.pw-lock.is-ok { background: rgba(143,196,138,.18); color: var(--ok); }
.pw-eyebrow { margin: 0; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tx2); font-weight: 700; }
.pw-eyebrow small, .pw-pill small { font-size: .68rem; opacity: .75; letter-spacing: 0; text-transform: none; font-weight: 600; }
.pw-title { font-family: var(--fd); font-size: 1.3rem; line-height: 1.2; outline: none; }
.pw-lead { margin: 14px 0 12px; color: var(--tx2); }
.pw-second { width: 100%; justify-content: center; margin-bottom: 12px; min-height: 44px; }
.pw-benefits { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.pw-benefits li { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; }
.pw-ck { flex: none; margin-top: 3px; color: var(--ok); }
.pw-offers { display: grid; gap: 8px; margin: 6px 0 12px; }
.pw-offer { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r2, 12px);
  background: var(--bg2); cursor: pointer; }
.pw-offer input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pw-offer:has(input:checked) { border-color: var(--acc); background: rgba(var(--acc-rgb), .12); box-shadow: 0 0 0 1px var(--acc) inset; }
.pw-offer:has(input:focus-visible) { outline: 2px solid var(--focus, var(--acc)); outline-offset: 2px; }
.pw-offer.is-featured { border-color: rgba(var(--acc-rgb), .55); }
.pw-offer-main { flex: 1 1 auto; display: grid; gap: 2px; }
.pw-offer-name { font-weight: 700; }
.pw-offer-sub { font-size: .8rem; color: var(--tx2); }
.pw-price { flex: none; font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.pw-tag { display: inline-flex; align-items: center; gap: 3px; margin-left: 2px; padding: 1px 8px; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; background: var(--acc); color: var(--accTx); vertical-align: 1px; }
.pw-waiver { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; color: var(--tx2); margin: 4px 0 8px; cursor: pointer; }
.pw-waiver input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--acc); }
.pw-buy { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 8px; text-decoration: none; }
.pw-buy.is-off { opacity: .5; cursor: not-allowed; box-shadow: none; filter: grayscale(.4); }
.pw-note { margin: 8px 0 0; font-size: .82rem; color: var(--tx2); }
.pw-restore { margin-top: 12px; border-top: 1px solid var(--line2); padding-top: 8px; }
.pw-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; color: var(--accLink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pw-panel { display: grid; gap: 6px; padding: 4px 0 6px; }
.pw-label { font-weight: 700; font-size: .9rem; }
.pw-hint { margin: 0; font-size: .8rem; color: var(--tx2); }
.pw-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pw-input { flex: 1 1 180px; min-height: 48px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg2); color: var(--tx); font-size: 1rem; }
.pw-row .btn { flex: 1 1 100%; justify-content: center; min-height: 48px; }
.pw-err { margin: 0; min-height: 0; font-size: .85rem; color: var(--danger); }
.pw-err:empty { display: none; }
.pw-legal { margin: 10px 0 0; font-size: .74rem; line-height: 1.45; color: var(--tx3); }
.pw-legal a { text-decoration: underline; text-underline-offset: 2px; }
.pw-later { display: block; width: 100%; min-height: 44px; margin-top: 4px; color: var(--tx2); text-align: center; }
.pw-later:hover { color: var(--tx); }

/* états grisés avec cadenas : le bouton reste cliquable et mène au paywall */
.pw-locked { position: relative; opacity: .78; }
.pw-locked .pw-lock-ico { display: inline-block; vertical-align: -2px; margin-right: 5px; color: var(--acc); }
.pw-locked:not(.pw-keep) { filter: saturate(.7); }
.pw-lock-ico { flex: none; }

/* badge Pro (Réglages) */
.pw-pill { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card2);
  font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--tx2); }
.pw-pill.is-on { background: var(--acc); border-color: var(--acc); color: var(--accTx); }
.pw-card .pw-status { margin: 10px 0; }
.pw-card .btn-row .btn { flex: 1 1 100%; justify-content: center; min-height: 44px; }
.pw-card h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pw-gate-note { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--tx2); margin: 6px 0 0; }

@keyframes pw-fade { from { opacity: 0; } }
@keyframes pw-up { from { transform: translateY(100%); } }
@media (min-width: 480px) { .pw-card .btn-row .btn { flex: 0 1 auto; } .pw-row .btn { flex: 0 0 auto; } .pw-sheet { padding-left: 22px; padding-right: 22px; } }
@media (min-width: 720px) {
  .pw-ov { align-items: center; padding: 24px; }
  .pw-sheet { width: 560px; max-height: 90vh; border: 1px solid var(--line); border-radius: 26px; padding: 28px 28px 22px; animation: pw-pop .22s ease both; }
  .pw-grab { display: none; }
  .pw-title { font-size: 1.5rem; }
}
@keyframes pw-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .pw-ov, .pw-sheet { animation: none; } }
@media print { .pw-ov { display: none !important; } }

.pw-price { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.pw-promo-tag { font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 1px 7px; border-radius: 99px; background: #111; color: #fff; }
.pw-was { font-weight: 500; font-size: .85rem; opacity: .6; }
.pw-was-note { font-weight: 500; font-size: .72rem; opacity: .65; }