/* HexRank PRO — page d'offre.
   Une scène d'ouverture, trois avantages lisibles, des formules qui se
   comparent d'un coup d'œil, puis l'essayage d'avatars et d'auras.
   Animations : transform/opacity seulement ; tout s'arrête avec
   prefers-reduced-motion. Les règles d'affichage iOS/Android/PRO restent
   dans app.css et ne sont pas redéfinies ici. */

@property --hr-spin{syntax:'<angle>';inherits:false;initial-value:0deg}

#premium-overlay{background:#070708}
#premium-overlay .prem-close{width:44px;height:44px;z-index:5;background:rgba(18,18,22,.66);border:1px solid rgba(255,255,255,.14);color:#f4f0ea;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
#premium-overlay .prem-close:hover{background:rgba(40,40,46,.8)}
#premium-overlay .prem-close:focus-visible{outline:2px solid var(--accent-soft);outline-offset:3px}

.hr-offer{position:relative;isolation:isolate;max-width:1040px;margin:auto;padding:20px 20px 56px;color:var(--text);overflow-x:clip}
.hr-offer p{font-size:14px;line-height:1.6;color:#b9b5b3}
.hr-pro-kicker{display:inline-block;font:700 11px/1 'Barlow',sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--accent-soft)}

/* ── Ambiance : halo de marque et nid d'abeille qui dérive ── */
.hr-ambient{position:absolute;z-index:-1;left:0;right:0;top:0;height:820px;overflow:hidden;pointer-events:none}
.hr-ambient-glow{position:absolute;left:50%;top:-220px;width:980px;height:820px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(var(--accent-rgb),.32),rgba(var(--accent-rgb),.09) 52%,transparent 76%)}
.hr-ambient-grid{position:absolute;left:0;right:0;top:-50px;bottom:0;opacity:.11;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E");background-size:28px 50px;-webkit-mask-image:linear-gradient(to bottom,#000,transparent 82%);mask-image:linear-gradient(to bottom,#000,transparent 82%);animation:hrGridDrift 26s linear infinite}
@keyframes hrGridDrift{to{transform:translateY(50px)}}

/* ── En-tête ── */
.hr-offer-header{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 56px 0 0}
.hr-offer-header img{width:128px;height:auto}
.hr-pro-badge{position:relative;overflow:hidden;padding:6px 10px 6px 12px;border-radius:7px;font:800 12px/1 'Barlow',sans-serif;letter-spacing:2.4px;color:#1b0b03;background:linear-gradient(135deg,#ffe2cf,var(--accent-soft) 30%,var(--accent) 70%,var(--accent2));box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 18px rgba(var(--accent-rgb),.42)}
.hr-pro-badge::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);transform:translateX(-130%);animation:hrShine 3.8s cubic-bezier(.4,0,.2,1) infinite 1.2s}
@keyframes hrShine{0%{transform:translateX(-130%)}38%,100%{transform:translateX(130%)}}

/* ── Scène d'ouverture ── */
.hr-hero{display:grid;gap:4px;padding:6px 0 30px;text-align:center}
.hr-hero-stage{position:relative;height:318px;margin:0 -20px;pointer-events:none}
.hr-hero-beam{position:absolute;left:50%;top:0;width:300px;height:300px;transform:translateX(-50%);background:radial-gradient(ellipse 46% 64% at 50% 34%,rgba(var(--accent-rgb),.42),rgba(var(--accent-rgb),.1) 56%,transparent 74%);filter:blur(4px);animation:hrBeam 4.2s ease-in-out infinite}
@keyframes hrBeam{0%,100%{opacity:.72;transform:translateX(-50%) scale(.96)}50%{opacity:1;transform:translateX(-50%) scale(1.04)}}
.hr-hero-ring{position:absolute;left:50%;bottom:-118px;width:330px;height:330px;margin-left:-165px;border-radius:50%;transform:scaleY(.2);border:1.5px solid rgba(var(--accent-rgb),.55);box-shadow:0 0 22px rgba(var(--accent-rgb),.55),inset 0 0 30px rgba(var(--accent-rgb),.35)}
.hr-hero-ring::before{content:'';position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 62%,rgba(var(--accent-rgb),.95) 82%,#fff3e8 86%,transparent 87%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 5px));mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 5px));animation:hrRingSpin 5.5s linear infinite}
@keyframes hrRingSpin{to{transform:rotate(360deg)}}
.hr-hero-floor{position:absolute;left:50%;bottom:26px;width:340px;height:64px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(var(--accent-rgb),.42),rgba(var(--accent-rgb),.1) 52%,transparent 72%);filter:blur(6px)}
.hr-hero-side{position:absolute;z-index:1;bottom:46px;height:212px;width:auto;object-fit:contain;filter:brightness(.42) saturate(.7) drop-shadow(0 14px 18px rgba(0,0,0,.7));opacity:.95}
.hr-hero-left{left:50%;transform:translateX(-148%) scale(.9);animation:hrFloatL 6s ease-in-out infinite}
.hr-hero-right{left:50%;transform:translateX(48%) scale(.9);animation:hrFloatR 6.6s ease-in-out infinite .4s}
@keyframes hrFloatL{0%,100%{transform:translateX(-148%) translateY(0) scale(.9)}50%{transform:translateX(-148%) translateY(-6px) scale(.9)}}
@keyframes hrFloatR{0%,100%{transform:translateX(48%) translateY(0) scale(.9)}50%{transform:translateX(48%) translateY(-6px) scale(.9)}}
.hr-hero-center{position:absolute;z-index:2;left:50%;bottom:22px;width:240px;margin-left:-120px;animation:hrFloat 4.8s ease-in-out infinite}
@keyframes hrFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.hr-hero-center .av-stage{height:292px;min-height:0;margin:0;background:none;border:0;border-radius:0;overflow:visible;contain:none;clip-path:none;-webkit-clip-path:none}
.hr-hero-center .ff-lick,.hr-hero-center .ff-heat,.hr-hero-center .ff-inner{display:none}
.hr-hero-center .av-stage::before,.hr-hero-center .av-stage::after{display:none}
.hr-hero-center .av-stage.has-fx .char-fx{top:30px}
.hr-hero-center .hr-hero-portrait{width:auto;height:258px;object-fit:contain;border-radius:0;position:relative;z-index:2;filter:drop-shadow(0 16px 22px rgba(0,0,0,.75)) drop-shadow(0 0 26px rgba(var(--accent-rgb),.3))}

.hr-hero-copy{position:relative;z-index:3;margin-top:-6px}
.hr-hero h1{font:800 clamp(46px,13vw,66px)/.95 'Barlow Condensed',sans-serif;letter-spacing:-.5px;text-transform:uppercase;margin:12px 0 14px;color:#f7f3ee;text-wrap:balance}
.hr-hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--accent-soft) 0%,var(--accent) 38%,var(--accent2) 62%,var(--accent-soft) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:hrTitleSheen 6s ease-in-out infinite}
@keyframes hrTitleSheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hr-pro-lead{max-width:34ch;margin:0 auto 22px;font-size:15px!important;color:#cdc8c4!important}
.hr-hero-actions{display:flex;flex-direction:column;align-items:center;gap:6px}
.hr-hero-cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:52px;min-width:min(100%,280px);padding:0 28px;border-radius:999px;background:linear-gradient(135deg,var(--accent2),var(--accent) 60%);color:#fff;font:800 16px/1 'Barlow',sans-serif;letter-spacing:.4px;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 30px rgba(var(--accent-rgb),.45);transition:transform .2s cubic-bezier(.16,1,.3,1)}
.hr-hero-cta::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-130%);animation:hrShine 4.4s cubic-bezier(.4,0,.2,1) infinite 2s}
.hr-hero-cta:active{transform:scale(.97)}
.hr-hero-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--accent-soft);font-size:13px;font-weight:600;text-decoration:none}
.hr-hero-link:hover{text-decoration:underline;text-underline-offset:4px}

/* ── Avantages ── */
.hr-offer-main{display:grid;gap:26px;padding:4px 0 8px}
.hr-pro-benefits{display:grid;gap:12px}
.hr-perk{position:relative;overflow:hidden;display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;padding:18px;border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.065),rgba(255,255,255,.012) 58%),#0e0e11;border:1px solid rgba(255,255,255,.09);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.hr-perk::before{content:'';position:absolute;left:18px;right:18px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.7),transparent)}
.hr-perk::after{content:'';position:absolute;z-index:-1;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(var(--accent-rgb),.16),transparent 70%)}
.hr-perk-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:radial-gradient(circle at 30% 25%,rgba(var(--accent-rgb),.55),rgba(var(--accent-rgb),.14) 72%);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.5),0 10px 22px rgba(var(--accent-rgb),.22)}
.hr-perk-icon svg{width:23px;height:23px;fill:none;stroke:#fff6ee;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hr-pro-number{display:block;font:700 11px/1 'Barlow',sans-serif;letter-spacing:1.6px;color:var(--accent-soft);margin:2px 0 7px}
.hr-perk h2{font:800 21px/1.1 'Barlow Condensed',sans-serif;letter-spacing:.1px;margin:0 0 6px;color:#f6f2ec}
.hr-perk p{font-size:13px!important;margin:0}
.hr-perk-art{grid-column:1/-1;display:flex;gap:6px;margin-top:2px}
.hr-perk-weeks i{flex:1;height:8px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;position:relative}
.hr-perk-weeks i::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent2));transform-origin:0 50%;transform:scaleX(var(--w,1));box-shadow:0 0 12px rgba(var(--accent-rgb),.6)}
.hr-perk-weeks i:nth-child(3)::after{--w:.62}.hr-perk-weeks i:nth-child(4)::after{--w:.18;opacity:.75}
.hr-perk-bars{align-items:flex-end;height:48px}
.hr-perk-bars i{flex:1;height:var(--h);border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,rgba(var(--accent-rgb),.55),rgba(var(--accent-rgb),.12));transform-origin:50% 100%}
.hr-perk-bars i:nth-child(1){--h:38%}.hr-perk-bars i:nth-child(2){--h:52%}.hr-perk-bars i:nth-child(3){--h:34%}.hr-perk-bars i:nth-child(4){--h:66%}.hr-perk-bars i:nth-child(5){--h:58%}.hr-perk-bars i:nth-child(6){--h:80%}
.hr-perk-bars i:nth-child(7){--h:100%;background:linear-gradient(180deg,#fff1e6,var(--accent) 45%,rgba(var(--accent-rgb),.35));box-shadow:0 0 16px rgba(var(--accent-rgb),.55)}
.hr-perk-auras{gap:8px}
.hr-perk-auras span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:radial-gradient(circle,color-mix(in srgb,var(--a1,var(--accent)) 22%,#121216),#0d0d10 75%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a1,var(--accent)) 40%,transparent)}
.hr-perk-auras .aura-mark{width:21px;height:21px}

/* ── Formules ── */
.hr-offer .subscription{position:relative;isolation:isolate;padding:24px 18px 20px;border-radius:26px;background:radial-gradient(120% 60% at 50% 0%,rgba(var(--accent-rgb),.18),transparent 62%),linear-gradient(180deg,#141418,#0d0d10);box-shadow:0 30px 70px rgba(0,0,0,.5);scroll-margin-top:16px}
.hr-offer .subscription::before{content:'';position:absolute;z-index:-1;inset:0;padding:1px;border-radius:inherit;background:conic-gradient(from var(--hr-spin),rgba(255,255,255,.1),rgba(var(--accent-rgb),.85),rgba(255,255,255,.1) 30%,rgba(255,255,255,.1) 70%,rgba(var(--accent-rgb),.5),rgba(255,255,255,.1));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:hrBorderSpin 7s linear infinite}
@keyframes hrBorderSpin{to{--hr-spin:360deg}}
.hr-plan-heading{text-align:center}
.hr-plan-heading h2{font:800 32px/1.02 'Barlow Condensed',sans-serif;text-transform:uppercase;margin:10px 0 8px;color:#f7f3ee}
.hr-plan-heading p{font-size:13px!important;margin:0 0 4px}
.hr-trial-pill{display:inline-flex;align-items:center;gap:7px;margin:10px 0 0!important;padding:7px 13px;border-radius:999px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.38);color:#9df3bd!important;font-weight:600}
.hr-trial-pill::before{content:'';width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 10px #22c55e}
.hr-trial-pill[hidden]{display:none}

.hr-offer .prem-plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0 0}
.hr-offer .prem-plan{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;width:100%;min-width:0;min-height:138px;padding:34px 14px 14px;text-align:left;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:#111115;color:var(--text);cursor:pointer;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,border-color .25s}
.hr-offer .prem-plan:hover{border-color:rgba(255,255,255,.24)}
.hr-offer .prem-plan.on{border:2px solid transparent;padding:33px 13px 13px;background:linear-gradient(170deg,#1d1410,#120f0e) padding-box,linear-gradient(140deg,#ffe2cf,var(--accent) 45%,var(--accent2)) border-box;box-shadow:0 16px 36px rgba(var(--accent-rgb),.3);transform:translateY(-3px)}
.prem-plan-check{position:absolute;top:12px;right:12px;width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.28);transition:background .2s,border-color .2s}
.prem-plan.on .prem-plan-check{border-color:var(--accent);background:var(--accent);box-shadow:0 0 12px rgba(var(--accent-rgb),.7)}
.prem-plan.on .prem-plan-check::after{content:'';position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.prem-plan-ribbon{position:absolute;top:-11px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;padding:5px 11px;border-radius:999px;background:linear-gradient(135deg,#ffe2cf,var(--accent-soft) 40%,var(--accent));color:#1b0b03;font:800 10px/1 'Barlow',sans-serif;letter-spacing:.7px;text-transform:uppercase;white-space:nowrap;box-shadow:0 6px 16px rgba(var(--accent-rgb),.45)}
.prem-plan-save{display:inline-block;margin-left:4px;padding:3px 6px;border-radius:999px;background:rgba(34,197,94,.16);color:#9df3bd;font:800 10px/1 'Barlow',sans-serif;letter-spacing:.2px;vertical-align:1px}
.prem-plan-save[hidden]{display:none}
.hr-offer .prem-plan-name{font:700 12px/1 'Barlow',sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:#d9d4cf}
.hr-offer .prem-plan-price{margin-top:12px;display:flex;align-items:baseline;flex-wrap:wrap;gap:2px}
.hr-offer .prem-price-main{font:800 34px/1 'Barlow Condensed',sans-serif;color:#fff}
.hr-offer .prem-plan-price>span:not(.prem-price-main){font-size:12px;font-weight:600;color:#9e9a97}
.hr-offer .prem-plan-equiv{margin-top:6px;font-size:12px;font-weight:600;color:var(--accent-soft)}
.hr-offer .prem-plan-cadence{color:#9e9a97;font-weight:500}

.hr-offer .prem-cta{position:relative;overflow:hidden;width:100%;min-height:60px;margin-top:20px;padding:12px 18px;border:0;border-radius:18px;background:linear-gradient(135deg,var(--accent2),var(--accent) 55%,#c23b07);color:#fff;font:800 18px/1.1 'Barlow Condensed',sans-serif;letter-spacing:.7px;text-transform:uppercase;text-wrap:balance;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 14px 34px rgba(var(--accent-rgb),.45);animation:hrCtaPulse 2.8s ease-in-out infinite;transition:transform .2s cubic-bezier(.16,1,.3,1),filter .2s}
.hr-offer .prem-cta::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.42) 50%,transparent 70%);transform:translateX(-130%);animation:hrShine 3.6s cubic-bezier(.4,0,.2,1) infinite 1s;pointer-events:none}
.hr-offer .prem-cta:hover{filter:brightness(1.07)}
.hr-offer .prem-cta:active{transform:scale(.98)}
@keyframes hrCtaPulse{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 14px 34px rgba(var(--accent-rgb),.42)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 16px 46px rgba(var(--accent-rgb),.7)}}
.hr-offer .prem-fine{font-size:11px;line-height:1.6;color:#a29d9a;text-align:center;margin-top:14px}
.hr-offer .prem-fine a{color:#d0cbc7;text-underline-offset:3px}
.hr-offer .hr-plan-note{font-size:11px!important;line-height:1.5;margin:12px 0 0;color:#a29d9a!important;text-align:center}
.hr-offer .prem-account{border-radius:16px}

/* ── Essayage : avatars et auras ── */
.hr-gallery{display:grid;gap:18px;padding:44px 0 8px}
.hr-gallery-copy{text-align:center}
.hr-gallery h2,.hr-offer .faq h2{font:800 36px/1 'Barlow Condensed',sans-serif;text-transform:uppercase;margin:10px 0 10px;color:#f7f3ee}
.hr-gallery-copy>p{font-size:13px!important;max-width:40ch;margin:0 auto}
.hr-showcase{text-align:center;min-width:0}
.hr-showcase-stage{position:relative;overflow:hidden;height:316px;border-radius:28px;border:1px solid rgba(255,255,255,.09);background:radial-gradient(60% 50% at 50% 62%,rgba(var(--accent-rgb),.16),transparent 72%),linear-gradient(180deg,#121216,#09090b)}
.hr-showcase-stage::before{content:'';position:absolute;inset:0;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E");background-size:28px 50px;-webkit-mask-image:radial-gradient(ellipse at 50% 55%,#000,transparent 75%);mask-image:radial-gradient(ellipse at 50% 55%,#000,transparent 75%)}
.hr-showcase-floor{position:absolute;z-index:0;left:50%;bottom:18px;width:250px;height:44px;transform:translateX(-50%);border-radius:50%;border:1px solid rgba(255,255,255,.14);background:radial-gradient(ellipse,rgba(255,255,255,.1),transparent 70%)}
#hr-avatar-preview{position:relative;z-index:1;height:100%}
.hr-offer .hr-showcase .av-stage{height:100%;min-height:0;margin:0;background:transparent;border:0}
.hr-offer .hr-showcase .av-stage::before{display:none}
.hr-offer .hr-showcase .hr-portrait{width:auto;height:262px;margin-bottom:22px;object-fit:contain;border-radius:0;position:relative;z-index:1}
.hr-offer .hr-showcase .av-stage.has-fx .char-fx{top:44px}
.hr-preview-in .hr-portrait{animation:hrPop .5s cubic-bezier(.16,1,.3,1) both}
@keyframes hrPop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.hr-showcase>strong{display:block;font:800 32px/1 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.5px;margin:16px 0 6px;color:#f7f3ee}
.hr-showcase-caption{display:block;color:#a9a4a1;font-size:12px}

.hr-aura-options,.hr-avatar-options{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;touch-action:pan-x;scrollbar-width:none;margin:0 -20px;padding:6px 20px 10px}
.hr-aura-options::-webkit-scrollbar,.hr-avatar-options::-webkit-scrollbar{display:none}
.hr-aura-options{margin-top:14px}
.hr-aura-options button{flex:0 0 auto;scroll-snap-align:center;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:6px 14px 6px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.11);background:#121216;color:#d9d5d1;font:600 13px/1 'Barlow',sans-serif;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
.hr-aura-options .aura-mark{width:22px;height:22px}
.hr-aura-options button[aria-pressed=true]{border-color:var(--a1,var(--accent));background:color-mix(in srgb,var(--a1,var(--accent)) 16%,#121216);color:#fff;box-shadow:0 0 20px color-mix(in srgb,var(--a1,var(--accent)) 38%,transparent)}

.hr-avatar-options button{flex:0 0 96px;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:10px 6px 9px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,#17171c,#0e0e11);color:#d9d5d1;font:600 12px/1.1 'Barlow',sans-serif;cursor:pointer;transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .2s,box-shadow .2s}
.hr-avatar-options img{height:82px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.6)) saturate(.85);transition:transform .25s cubic-bezier(.16,1,.3,1),filter .25s}
.hr-av-name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hr-avatar-options button[aria-pressed=true]{border:1px solid transparent;background:linear-gradient(180deg,#22160f,#120e0c) padding-box,linear-gradient(150deg,#ffe2cf,var(--accent) 50%,var(--accent2)) border-box;color:#fff;box-shadow:0 10px 24px rgba(var(--accent-rgb),.3);transform:translateY(-2px)}
.hr-avatar-options button[aria-pressed=true] img{transform:scale(1.06);filter:drop-shadow(0 6px 10px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(var(--accent-rgb),.45))}

/* ── FAQ ── */
.hr-offer .faq{padding-top:40px}
.hr-offer .faq h2{text-align:center;margin-bottom:18px}
.hr-offer .faq details{margin:0 0 10px;padding:0;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:#0f0f12;transition:border-color .2s,background .2s}
.hr-offer .faq details[open]{border-color:rgba(var(--accent-rgb),.42);background:linear-gradient(180deg,rgba(var(--accent-rgb),.07),#0f0f12 60%)}
.hr-offer .faq summary{position:relative;display:block;list-style:none;min-height:56px;padding:18px 54px 18px 18px;cursor:pointer;font-size:14px;font-weight:600;color:#f1ede8}
.hr-offer .faq summary::-webkit-details-marker{display:none}
.hr-offer .faq summary::before,.hr-offer .faq summary::after{content:'';position:absolute;right:20px;top:50%;width:14px;height:2px;margin-top:-1px;border-radius:2px;background:var(--accent-soft);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.hr-offer .faq summary::after{transform:rotate(90deg)}
.hr-offer .faq details[open] summary::after{transform:rotate(0deg)}
.hr-offer .faq details p{font-size:13px!important;margin:0;padding:0 18px 18px;max-width:none}

.hr-offer button:focus-visible,.hr-offer a:focus-visible,.hr-offer summary:focus-visible{outline:2px solid var(--accent-soft);outline-offset:3px}
.hr-offer button:disabled{opacity:.5;cursor:wait}

/* Règles de plateforme héritées de l'ancienne mise en page. */
html.ios-shell.iap-on .hr-offer .prem-plans{display:grid!important}
html.is-pro .hr-plan-heading{display:none}
html.ios-shell.is-pro .hr-offer .prem-purchase{display:none!important}
/* Rien à acheter : le bouton du héros mènerait vers une section vide. */
html.is-pro .hr-hero-cta,html.billing-blocked .hr-hero-cta{display:none}

/* ── Entrée en scène ── */
#premium-overlay.show .hr-hero-stage{animation:hrStageIn .9s cubic-bezier(.16,1,.3,1) both}
#premium-overlay.show .hr-hero-copy>*{animation:hrRise .7s cubic-bezier(.16,1,.3,1) both}
#premium-overlay.show .hr-hero-copy>:nth-child(1){animation-delay:.12s}
#premium-overlay.show .hr-hero-copy>:nth-child(2){animation-delay:.2s}
#premium-overlay.show .hr-hero-copy>:nth-child(3){animation-delay:.28s}
#premium-overlay.show .hr-hero-copy>:nth-child(4){animation-delay:.36s}
#premium-overlay.show .hr-perk{animation:hrRise .7s cubic-bezier(.16,1,.3,1) both}
#premium-overlay.show .hr-perk:nth-child(1){animation-delay:.42s}
#premium-overlay.show .hr-perk:nth-child(2){animation-delay:.5s}
#premium-overlay.show .hr-perk:nth-child(3){animation-delay:.58s}
#premium-overlay.show .hr-perk-weeks i::after{animation:hrGrowX 1.1s cubic-bezier(.16,1,.3,1) both .7s}
#premium-overlay.show .hr-perk-bars i{animation:hrGrowY .9s cubic-bezier(.16,1,.3,1) both}
#premium-overlay.show .hr-perk-bars i:nth-child(n){animation-delay:calc(.7s + var(--i,0) * 70ms)}
.hr-perk-bars i:nth-child(2){--i:1}.hr-perk-bars i:nth-child(3){--i:2}.hr-perk-bars i:nth-child(4){--i:3}.hr-perk-bars i:nth-child(5){--i:4}.hr-perk-bars i:nth-child(6){--i:5}.hr-perk-bars i:nth-child(7){--i:6}
@keyframes hrStageIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes hrRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes hrGrowX{from{transform:scaleX(0)}}
@keyframes hrGrowY{from{transform:scaleY(0)}}

/* ── Grand écran ── */
@media(min-width:760px){
  .hr-offer{padding:28px 32px 72px}
  .hr-offer-header img{width:150px}
  .hr-hero{grid-template-columns:1fr 1fr;align-items:center;gap:20px;padding:20px 0 44px;text-align:left}
  .hr-hero-stage{order:2;height:400px;margin:0}
  .hr-hero-copy{order:1;margin:0}
  .hr-pro-lead{margin-left:0}
  .hr-hero-actions{flex-direction:row;align-items:center;gap:18px}
  .hr-hero-cta{min-width:0}
  .hr-hero-center{width:270px;margin-left:-135px;bottom:36px}
  .hr-hero-center .av-stage{height:330px}
  .hr-hero-center .hr-hero-portrait{height:300px}
  .hr-hero-side{height:250px;bottom:62px}
  .hr-hero-floor{bottom:40px}
  .hr-hero-ring{bottom:-62px}
  .hr-offer-main{grid-template-columns:1.05fr 1fr;gap:28px;align-items:start}
  .hr-gallery{grid-template-columns:1fr 1.1fr;grid-template-areas:"copy show" "list show";align-items:center;column-gap:36px;padding-top:64px}
  .hr-gallery-copy{grid-area:copy;text-align:left;align-self:end}
  .hr-gallery-copy>p{margin:0}
  .hr-showcase{grid-area:show}
  .hr-avatar-options{grid-area:list;align-self:start;flex-wrap:wrap;overflow:visible;margin:0;padding:0}
  .hr-avatar-options button{flex:0 0 calc(25% - 6px)}
  .hr-aura-options{flex-wrap:wrap;justify-content:center;overflow:visible;margin:14px 0 0;padding:0}
  .hr-offer .faq{max-width:760px;margin:0 auto}
}
@media(max-width:360px){
  .prem-plan-ribbon{padding:5px 8px;font-size:9px;letter-spacing:.3px}
  .hr-offer .prem-price-main{font-size:29px}
  .hr-hero-side{height:180px}
}
@media(prefers-reduced-motion:reduce){
  .hr-offer *,.hr-offer *::before,.hr-offer *::after{animation:none!important;transition:none!important}
}

/* Aperçus de la page PRO : l'aura reste derrière le personnage et n'a qu'un
   seul sol. L'éclair d'impact isolé de Foudre y passait pour un artefact. */
.hr-offer .av-stage.has-fx .char-fx{z-index:0}
.hr-offer .hr-portrait,.hr-offer .hr-hero-portrait{z-index:2}
.hr-offer .fx-bolt .fb-impact{display:none}
.hr-showcase-floor{display:none}