/* Page Tarifs — checkout Paddle. Thème sombre cohérent avec le produit. */
:root { --acc: #4ae183; --acc-rgb: 74,225,131; --mono: 'JetBrains Mono', monospace; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: #120d0b; color: #ece7e2; font-family: 'Geist', system-ui, sans-serif; overflow: hidden;
  background-image: radial-gradient(rgba(250,242,232,.035) 1.1px, transparent 1.7px); background-size: 15px 15px; }

/* ── décor de fond : pointillés (body) + radars sur les côtés + halos + particules ── */
.pr-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.pr-glow { position: absolute; border-radius: 50%; filter: blur(60px); }
.pr-glow.g1 { right: -7%; top: 44%; width: 640px; height: 640px; transform: translateY(-50%); background: radial-gradient(circle, rgba(var(--acc-rgb),.11), transparent 60%); }
.pr-glow.g2 { left: -12%; bottom: -16%; width: 520px; height: 520px; background: radial-gradient(circle, rgba(160,122,86,.09), transparent 62%); }

.pr-radar { position: absolute; right: -210px; top: 50%; transform: translateY(-50%); width: 760px; height: 760px; opacity: .4; }
.pr-radar--sm { left: -140px; right: auto; top: auto; bottom: -140px; transform: none; width: 400px; height: 400px; opacity: .3; }
.pr-radar .r { position: absolute; border-radius: 50%; border: 1px solid rgba(250,242,232,.05); }
.pr-radar .r.acc { border-color: rgba(var(--acc-rgb),.16); }
.pr-radar .sweep { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(var(--acc-rgb),.14), rgba(var(--acc-rgb),.02) 18%, transparent 32%);
  animation: prSpin 13s linear infinite; }
.pr-radar--sm .sweep { animation-duration: 17s; animation-direction: reverse; }
.pr-radar .dot { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%;
  background: var(--acc); box-shadow: 0 0 12px 2px rgba(var(--acc-rgb),.7); animation: prPulse 2.6s ease-in-out infinite; }

.pr-particles { position: absolute; inset: 0; }
.pr-p { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px var(--acc); animation: prPulse 5s ease-in-out infinite; }
.pr-p.p1 { left: 12%; top: 20%; opacity: .5; }
.pr-p.p2 { left: 29%; top: 74%; opacity: .35; animation-delay: 1.2s; }
.pr-p.p3 { left: 68%; top: 17%; opacity: .4; animation-delay: 2.1s; }
.pr-p.p4 { left: 85%; top: 60%; opacity: .3; animation-delay: .6s; }
.pr-p.p5 { left: 19%; top: 46%; opacity: .3; animation-delay: 3s; }
.pr-p.p6 { left: 74%; top: 85%; opacity: .35; animation-delay: 1.8s; }
.pr-p.p7 { left: 50%; top: 7%; opacity: .28; animation-delay: 2.6s; }
.pr-p.p8 { left: 91%; top: 28%; opacity: .4; animation-delay: .3s; }
@keyframes prSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pr-radar .sweep, .pr-radar .dot, .pr-p { animation: none; } }

.pr-page { position: relative; z-index: 1; height: calc(100dvh - 56px); display: flex; align-items: center; justify-content: center; padding: 20px 30px; overflow: auto; }
#prRoot { width: 100%; max-width: 1160px; }
.pr-loading { padding: 40px 0; text-align: center; color: #8f8379; font-family: var(--mono); font-size: 13px; }

/* ── Split plein écran : buy box (gauche) + outils (droite) ── */
.pr-split { display: grid; grid-template-columns: minmax(330px, 400px) 1fr; gap: 46px; align-items: center; width: 100%; }
.pr-left { display: flex; flex-direction: column; }
.pr-right { min-width: 0; }

/* ── Carte d'offre CENTRALE (le sujet de la page) ── */
.pr-offer {
  max-width: 580px; margin: 0 auto; text-align: center;
  border: 1px solid rgba(var(--acc-rgb), .45); border-radius: 22px; padding: 30px 42px 26px;
  background: radial-gradient(120% 90% at 50% -8%, rgba(var(--acc-rgb), .14), transparent 58%), linear-gradient(180deg, rgba(30,25,21,.6), rgba(18,13,11,.72));
  box-shadow: 0 0 90px -22px rgba(var(--acc-rgb), .42), 0 40px 90px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
}
.pr-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--acc); }
.pr-offer .pr-eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.pr-offer .pr-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px var(--acc); animation: prPulse 1.8s ease-in-out infinite; }
@keyframes prPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.pr-offer h1 { margin: 14px 0 0; font-size: clamp(26px, 3vw, 34px); font-weight: 600; letter-spacing: -.02em; line-height: 1.14; color: #f6f1ec; }
.pr-lead { margin: 12px auto 0; color: #9a8d83; font-size: 14px; max-width: 400px; line-height: 1.5; }

.pr-toggle { display: inline-flex; gap: 4px; margin: 22px auto 0; padding: 4px; border-radius: 9px;
  background: #1a1512; border: 1px solid #2c2421; }
.pr-toggle button { font-family: var(--mono); font-size: 12px; font-weight: 600; padding: 8px 16px;
  border-radius: 6px; border: none; background: transparent; color: #8f8379; cursor: pointer; }
.pr-toggle button.on { background: rgba(var(--acc-rgb), .14); color: var(--acc); }
.pr-save { font-family: var(--mono); font-size: 10px; color: var(--acc); margin-left: 6px; }

/* ── Contenu de la carte d'offre : toggle, prix, CTA, outils inclus ── */
.pr-offer h1 { margin: 12px 0 0; }
.pr-lead { margin: 10px auto 0; }
.pr-offer .pr-toggle { margin: 18px auto 0; }
.pr-price { margin: 16px 0 0; }
.pr-price .amt { font-size: 48px; font-weight: 700; letter-spacing: -.02em; }
.pr-price .per { font-size: 15px; color: #8f8379; }
.pr-billed { font-size: 12px; color: #8f8379; margin: 3px 0 0; }
.pr-cta { margin-top: 18px; height: 50px; font-size: 15px; box-shadow: 0 10px 30px -8px rgba(var(--acc-rgb), .5); }
.pr-reassure { margin-top: 11px; font-size: 11.5px; color: #8a7f75; }

/* Renonciation au droit de rétractation (art. L.221-28, 13°) : recueillie AVANT l'ouverture du
   checkout, donc visible sans avoir à faire défiler. Bloquante — le CTA reste inerte sans elle. */
.pr-waiver { display: flex; align-items: flex-start; gap: 9px; margin: 18px 0 0; padding: 12px 13px;
  text-align: left; border-radius: 9px; background: #17120f; border: 1px solid #2c2421; }
.pr-waiver input { flex: none; margin: 1px 0 0; width: 15px; height: 15px; accent-color: var(--acc); cursor: pointer; }
.pr-waiver span { font-size: 11.5px; line-height: 1.55; color: #9a8d83; }
.pr-waiver a { color: #cdbfb4; text-decoration: underline; }
.pr-waiver.miss { border-color: #7d4038; }

.pr-inclhead { margin: 20px 0 13px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); }
.pr-inclhead span { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: #8f8379; }
.pr-incl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px 14px; text-align: left; }
.pr-inc { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #cdbfb4; min-width: 0; }
.pr-inc svg { flex: none; width: 12px; height: 12px; color: var(--acc); }
.pr-note { font-size: 12.5px; color: #8f8379; }

.pr-btn { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .02em;
  padding: 13px 18px; border-radius: 9px; border: none; cursor: pointer; width: 100%; }
.pr-btn.solid { background: var(--acc); color: #0b1710; }
.pr-btn.solid:hover { filter: brightness(1.06); }
.pr-btn.ghost { background: transparent; border: 1px solid #3a322c; color: #cdbfb4; }
.pr-btn:disabled { opacity: .6; cursor: default; }

.pr-current { text-align: center; max-width: 460px; margin: 0 auto; background: rgba(var(--acc-rgb), .08); border: 1px solid rgba(var(--acc-rgb), .3);
  border-radius: 16px; padding: 34px 30px; }
.pr-current .pr-eyebrow { display: block; margin-bottom: 10px; }
.pr-current h2 { margin: 0 0 6px; color: var(--acc); }
.pr-current-btns { display: flex; flex-direction: column; gap: 10px; max-width: 280px; margin: 20px auto 0; }
.pr-btn { width: 100%; }
.pr-msg { text-align: center; color: #9a8d83; font-size: 13px; margin-top: 24px; }
.pr-msg.err { color: #ff9b8f; }
.pr-legal { text-align: left; font-family: var(--mono); font-size: 10px; line-height: 1.5; color: #5f564e; margin: 16px 0 0; }

/* Repli : écran étroit → 1 colonne d'outils ; écran court → scroll autorisé (jamais tronqué) */
@media (max-width: 600px) {
  .pr-page { padding: 16px 16px; }
  .pr-offer { padding: 30px 22px 26px; }
  .pr-incl-grid { grid-template-columns: 1fr; }
}
@media (max-height: 810px) {
  body { overflow: auto; }
  .pr-page { height: auto; min-height: calc(100dvh - 56px); align-items: flex-start; padding-top: 22px; padding-bottom: 22px; }
}