@font-face {
  font-family: "Luma Inter";
  src: url("/assets/concept/inter-semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

.premium-page {
  --premium-night: #08090c;
  --premium-paper: #f3f3f5;
  --premium-ink: #17171b;
  --premium-muted: #a4a4af;
  --premium-violet: #6550d8;
  --premium-rule: rgba(255, 255, 255, .16);
  min-height: 100vh;
  overflow-x: clip;
  background: var(--premium-night);
  color: #fff;
}
.premium-page .bg-halos { display: none; }
.premium-page .premium-main { width: 100%; max-width: none; margin: 0; padding: clamp(150px, 14vw, 250px) 0 100px; isolation: isolate; }
.premium-page .premium-main::before { display: none; }
.premium-page .premium-main h1,
.premium-page .premium-main h2,
.premium-page .premium-main h3,
.premium-page .premium-main .price { font-family: "Luma Inter", Inter, Arial, sans-serif; font-weight: 600; }
.premium-page .premium-main h1,
.premium-page .premium-main h2 { text-wrap: balance; letter-spacing: -.065em; }
.premium-page .premium-main p { text-wrap: pretty; }
.premium-page .premium-hero,
.premium-page .public-pricing,
.premium-page .premium-benefits,
.premium-page .comparison,
.premium-page .premium-panel,
.premium-page .status,
.premium-page .premium-legal { width: min(1320px, calc(100% - 10vw)); margin-inline: auto; }

.premium-page .premium-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .38fr); grid-template-rows: 1fr auto; align-items: end; max-width: none; min-height: calc(100svh - clamp(150px, 14vw, 250px)); margin-bottom: clamp(120px, 14vw, 230px); text-align: start; }
.premium-page .premium-hero-copy { position: relative; z-index: 2; align-self: center; }
.premium-page .premium-eyebrow { margin: 0 0 24px !important; color: #a99dff !important; font-size: 15px !important; font-weight: 400; line-height: 1.4 !important; letter-spacing: 0; text-transform: none; }
.premium-page .premium-hero .premium-eyebrow { display: none; }
.premium-page .premium-hero h1 { max-width: 1250px; margin: 0; font-size: clamp(72px, 8.3vw, 178px); line-height: .9; }
.premium-page .premium-hero h1 .gradient-text { display: block; color: #c3baff; background: none; -webkit-text-fill-color: currentColor; }
.premium-page .premium-hero-copy > p:last-child { max-width: 620px; margin: 40px 0 0; color: #b7b7c1; font-size: clamp(18px, 1.4vw, 24px); line-height: 1.55; }
.premium-page .premium-hero-mark { position: absolute; z-index: -1; inset-inline-end: -2vw; top: 42%; width: clamp(360px, 34vw, 660px); aspect-ratio: 1; transform: translateY(-50%); }
.premium-page .premium-hero-mark::before,
.premium-page .premium-hero-mark::after { display: none; }
.premium-page .premium-hero-mark span { position: absolute; inset: 0; background: url("/assets/brand/monogram-app.webp") center / contain no-repeat; opacity: .3; }
.premium-page .trust-row { grid-column: 1 / -1; display: flex; justify-content: flex-start; gap: 0; margin-top: clamp(70px, 8vw, 120px); border-top: 1px solid var(--premium-rule); border-bottom: 1px solid var(--premium-rule); }
.premium-page .trust-row span { flex: 1; padding: 22px 24px 22px 0; border: 0; border-radius: 0; color: #d8d8de; background: none; font-size: 13px; }
.premium-page .trust-row span + span { padding-inline-start: 24px; border-inline-start: 1px solid var(--premium-rule); }
.premium-page .trust-row span::before { content: ""; margin: 0; }

.premium-page .public-pricing { width: 100%; padding: clamp(100px, 10vw, 180px) max(5vw, calc((100vw - 1320px) / 2)); color: var(--premium-ink); background: var(--premium-paper); }
.premium-page .premium-section-heading { max-width: 1040px; margin: 0; text-align: start; }
.premium-page .premium-section-heading h2,
.premium-page .comparison-head h2 { margin: 0; font-size: clamp(52px, 6.8vw, 132px); line-height: .96; overflow-wrap: anywhere; hyphens: auto; }
.premium-page .premium-section-heading > p:last-child { max-width: 610px; margin: 28px 0 0; color: #696970; font-size: 18px; line-height: 1.55; }
.premium-page .public-pricing .premium-eyebrow,
.premium-page .comparison .premium-eyebrow { color: #6752d4 !important; }
.premium-page .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: clamp(65px, 7vw, 110px); border-top: 1px solid #bcbcc2; border-bottom: 1px solid #bcbcc2; }
.premium-page .plan { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 390px; padding: 34px clamp(20px, 3vw, 46px) 38px; border: 0; border-radius: 0; color: var(--premium-ink); background: transparent; box-shadow: none; text-align: start; }
.premium-page .plan + .plan { border-inline-start: 1px solid #bcbcc2; }
.premium-page .plan.featured { color: #fff; background: var(--premium-violet); border-color: transparent; box-shadow: none; }
.premium-page .plan.is-selected { box-shadow: inset 0 0 0 3px #17171b; }
.premium-page .plan-kicker { min-height: 0; margin: 0 0 36px; color: #66666e; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.premium-page .featured .plan-kicker { color: #f3f1ff; }
.premium-page .plan h3 { margin: 0; font-size: clamp(24px, 2vw, 34px); letter-spacing: -.045em; }
.premium-page .price { margin: 32px 0 5px; font-size: clamp(43px, 4.2vw, 72px); line-height: 1; letter-spacing: -.06em; }
.premium-page .plan-suffix { min-height: 42px; margin: 0; color: #696970; font-size: 13px; line-height: 1.5; }
.premium-page .featured .plan-suffix { color: #f3f1ff; }
.premium-page .saving { min-height: 20px; margin: 8px 0 28px; color: #5b46c8; font-size: 12px; font-weight: 600; }
.premium-page .featured .saving { color: #fff; }
.premium-page .plan-badge { display: none; }
.premium-page .plan .btn,
.premium-page .login-card .btn { width: 100%; min-height: 52px; margin-top: auto; padding: 14px 18px; border: 1px solid var(--premium-ink); border-radius: 999px; color: #fff; background: var(--premium-ink); font-size: 14px; font-weight: 600; transition: transform .2s ease, background .2s ease, color .2s ease; }
.premium-page .featured .btn { border-color: #fff; color: var(--premium-ink); background: #fff; }
.premium-page .plan .btn:hover:not(:disabled),
.premium-page .login-card .btn:hover:not(:disabled) { transform: translateY(-2px); }
.premium-page .pricing-note { margin: 20px 0 0; color: #73737b; font-size: 12px; text-align: end; }

.premium-page .premium-benefits { padding-block: clamp(120px, 13vw, 230px); }
.premium-page .premium-benefits .premium-section-heading { max-width: 900px; }
.premium-page .premium-benefits .premium-section-heading > p:last-child { color: var(--premium-muted); }
.premium-page .benefit-grid { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: clamp(65px, 7vw, 110px); border-top: 1px solid var(--premium-rule); }
.premium-page .benefit { display: grid; grid-template-columns: minmax(240px, .85fr) minmax(300px, 1.15fr); align-items: baseline; gap: 7vw; padding: 35px 0; border: 0; border-bottom: 1px solid var(--premium-rule); border-radius: 0; background: none; box-shadow: none; }
.premium-page .benefit h3 { margin: 0; font-size: clamp(26px, 3vw, 46px); letter-spacing: -.05em; }
.premium-page .benefit p { max-width: 680px; margin: 0; color: var(--premium-muted); font-size: clamp(16px, 1.25vw, 20px); line-height: 1.55; }

.premium-page .comparison { width: 100%; padding: clamp(100px, 10vw, 180px) max(5vw, calc((100vw - 1320px) / 2)); border: 0; border-radius: 0; color: var(--premium-ink); background: var(--premium-paper); box-shadow: none; }
.premium-page .comparison-head { max-width: 1050px; margin-bottom: clamp(55px, 6vw, 90px); }
.premium-page .comparison-shared { max-width: 820px; margin: 30px 0 0; color: #65656d; font-size: 17px; line-height: 1.6; }
.premium-page .comparison-table { border-top: 1px solid #bcbcc2; }
.premium-page .comparison-row { display: grid; grid-template-columns: minmax(230px, .9fr) minmax(180px, .8fr) minmax(280px, 1.25fr); align-items: start; gap: 28px; padding: 25px 0; border-bottom: 1px solid #cfcfd3; color: #6d6d74; font-size: 15px; line-height: 1.5; }
.premium-page .comparison-row > :first-child { color: var(--premium-ink); }
.premium-page .comparison-row strong { color: #5e49cc; font-weight: 600; }
.premium-page .comparison-labels { padding-block: 14px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.premium-page .comparison-labels strong { color: #6d6d74; }
.premium-page .comparison-compatibility { max-width: 980px; margin: 30px 0 0; color: #717179; font-size: 12px; line-height: 1.65; }

.premium-page .premium-panel { max-width: 1100px; margin-top: clamp(90px, 10vw, 150px); padding: clamp(28px, 5vw, 72px); border: 1px solid rgba(255, 255, 255, .15); border-radius: 20px; color: #fff; background: #111217; box-shadow: 0 35px 100px rgba(0, 0, 0, .28); scroll-margin-top: 110px; }
.premium-page .login-card { max-width: 500px; padding: 40px 42px; }
.premium-page .login-card h2,
.premium-page .offers-head h2 { margin: 0 0 14px; font-size: clamp(38px, 4vw, 62px); line-height: 1; letter-spacing: -.06em; }
.premium-page .login-card > p,
.premium-page .offers-head p { color: var(--premium-muted); line-height: 1.55; }
.premium-page .login-card > .premium-eyebrow { margin-bottom: 14px !important; font-size: 10px !important; }
.premium-page .login-card h2 { margin-bottom: 10px; font-size: clamp(32px, 2.4vw, 40px); line-height: 1.04; }
.premium-page .login-card > p:not(.premium-eyebrow):not(.fineprint),
.premium-page .login-card > .auth-mode-switch,
.premium-page .login-card > .social-login,
.premium-page .login-card > form,
.premium-page .login-card > .fineprint { width: min(100%, 400px); margin-inline: auto; }
.premium-page .login-card > p:not(.premium-eyebrow):not(.fineprint) { font-size: 14px; line-height: 1.5; }
.premium-page .auth-mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 30px; padding: 4px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: #08090c; }
.premium-page .auth-mode-switch button { min-height: 42px; padding: 9px 12px; border: 0; border-radius: 999px; color: #a4a4af; background: transparent; font: inherit; font-size: 13px; font-weight: 600; }
.premium-page .auth-mode-switch button.is-active { color: #fff; background: var(--premium-violet); }
.premium-page .login-card .auth-mode-switch { margin-top: 20px; }
.premium-page .login-card form { margin-top: 16px; }
.premium-page .login-card form label { display: block; margin: 13px 0 6px; color: #d6d6dc; font-size: 12px; }
.premium-page .login-card form input { width: 100%; min-width: 0; min-height: 46px; padding: 10px 13px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px; color: #fff; background: #08090c; font: inherit; }
.premium-page .login-card form input:focus { border-color: var(--premium-violet); outline: 2px solid rgba(130, 113, 255, .3); }
.premium-page .login-card .btn { min-height: 46px; margin-top: 20px; padding-block: 11px; border-color: var(--premium-violet); background: var(--premium-violet); }
.premium-page .auth-secondary { color: #bcb3ff; }
.premium-page .passkey-signin { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 40px; margin-top: 10px; padding: 9px 12px; border: 1px solid rgba(197, 186, 255, .4); border-radius: 10px; color: #ddd6ff; background: rgba(130, 113, 255, .07); font: inherit; font-size: 13px; line-height: 1.4; cursor: pointer; }
.premium-page .passkey-signin:hover:not(:disabled) { border-color: #bcb3ff; background: rgba(130, 113, 255, .14); }
.premium-page .passkey-signin:focus-visible { outline: 2px solid #bcb3ff; outline-offset: 3px; }
.premium-page .passkey-signin:disabled { opacity: .6; cursor: wait; }
.premium-page .passkey-signin svg { flex: 0 0 20px; width: 20px; height: 20px; }
.premium-page .fineprint { color: #85858f; }
.premium-page .fineprint a { color: #bcb3ff; }
.premium-page .social-login { width: 100%; min-width: 0; max-width: 400px; margin-top: 16px; gap: 8px; }
.premium-page .social-provider-row,
.premium-page #google-signin,
.premium-page #google-signin > div { min-width: 0; max-width: 100%; }
.premium-page .social-provider-row,
.premium-page #google-signin,
.premium-page #google-signin > div,
.premium-page #google-signin iframe,
.premium-page .social-provider { height: 40px !important; min-height: 40px; }
.premium-page #google-signin { overflow: hidden; }
.premium-page #google-signin > div,
.premium-page #google-signin iframe { width: 100% !important; max-width: 100% !important; margin: 0 !important; }
/* Même typographie que le bouton officiel Google ; préciser la police ici
   empêche le font: inherit des contrôles du site de rétablir Arial en 16 px. */
.premium-page .social-provider { width: 100%; font-family: "Google Sans", arial, sans-serif; font-size: 14px; font-weight: 500; line-height: normal; }
.premium-page .social-divider { color: #85858f; }
.premium-page .social-divider::before,
.premium-page .social-divider::after { background: rgba(255, 255, 255, .14); }
.premium-page .login-card .social-divider { margin-block: 3px 0; }

.premium-page .offers-head { align-items: start; }
.premium-page .account-logout { border-color: rgba(255, 255, 255, .22); color: #dddde3; background: transparent; }
.premium-page .account-logout:hover { border-color: var(--premium-violet); background: rgba(130, 113, 255, .12); }
.premium-page .account-overview { gap: 1px; margin-top: 44px; background: rgba(255, 255, 255, .14); }
.premium-page .account-card { padding: 28px; border: 0; border-radius: 0; background: #18191f; }
.premium-page .account-card > span { color: #85858f; font-weight: 600; }
.premium-page .account-card strong { margin-top: 12px; color: #fff; font-size: clamp(17px, 1.6vw, 23px); font-weight: 600; }
.premium-page .account-plan-card strong[data-active="true"] { color: #bcb3ff; }
.premium-page .account-card small { color: #8f8f99; }
.premium-page .account-notice { border-color: rgba(130, 113, 255, .35); color: #ded9ff; background: rgba(130, 113, 255, .1); }
.premium-page .manage { border-color: rgba(130, 113, 255, .55); background: rgba(130, 113, 255, .13); }
.premium-page .manage:hover { border-color: var(--premium-violet); background: rgba(130, 113, 255, .22); }
.premium-page .subscription-choices { margin-top: 54px; padding-top: 45px; border-color: rgba(255, 255, 255, .14); }
.premium-page .account-plans-heading h3 { font-size: clamp(34px, 4vw, 58px); line-height: 1; letter-spacing: -.055em; }
.premium-page .account-plans-heading > p:last-child { color: var(--premium-muted); }
.premium-page .subscription-choices .plans { border-color: rgba(255, 255, 255, .16); }
.premium-page .subscription-choices .plan { min-height: 320px; color: #fff; }
.premium-page .subscription-choices .plan + .plan { border-color: rgba(255, 255, 255, .16); }
.premium-page .subscription-choices .plan-kicker,
.premium-page .subscription-choices .plan-suffix { color: #90909a; }
.premium-page .subscription-choices .saving { color: #bcb3ff; }
.premium-page .subscription-choices .plan .btn { border-color: #fff; color: var(--premium-ink); background: #fff; }
.premium-page .subscription-choices .plan.featured { background: var(--premium-violet); }
.premium-page .subscription-choices .featured .plan-kicker,
.premium-page .subscription-choices .featured .plan-suffix { color: rgba(255, 255, 255, .76); }
.premium-page .subscription-choices .featured .saving { color: #fff; }
.premium-page .status { min-height: 24px; margin-top: 24px; color: var(--premium-muted); text-align: center; }
.premium-page .status[data-kind="error"] { color: #ff9d9d; }
.premium-page .status[data-kind="success"] { color: #bcb3ff; }
.premium-page .login-card .status { width: 100%; max-width: none; min-height: 0; margin: 16px 0; text-align: start; font-size: 13px; line-height: 1.6; }
.premium-page .login-card .status:empty { display: none; }
.premium-page #request-password-reset { display: block; margin: 8px 0 0 auto; padding: 5px 0; min-height: 32px; color: #c5baff; }
.premium-page #social-login #totp-row label { display: block; margin-bottom: 8px; color: #d6d6dc; font-size: 13px; }
.premium-page #social-login #totp-row input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #ffffff40; border-radius: 8px; color: #fff; background: #08090c; font: inherit; letter-spacing: .2em; }
.premium-page #social-login.awaiting-otp .social-divider { display: none; }
.premium-page .premium-legal { max-width: 850px; margin-top: 34px; color: #7f7f89; font-size: 12px; line-height: 1.7; text-align: center; }
.premium-page .premium-legal a { color: #aaa1ee; text-decoration: underline; text-underline-offset: 3px; }
.premium-page [hidden] { display: none !important; }

@media (min-width: 1800px) {
  .premium-page .premium-hero,
  .premium-page .premium-benefits { width: min(1680px, calc(100% - 10vw)); }
  .premium-page .public-pricing,
  .premium-page .comparison { padding-inline: max(5vw, calc((100vw - 1680px) / 2)); }
  .premium-page .premium-panel { max-width: 1320px; }
  .premium-page .premium-panel.login-card { max-width: 500px; }
}

@media (max-width: 900px) {
  .premium-page .premium-hero { grid-template-columns: 1fr; min-height: calc(100svh - clamp(150px, 14vw, 250px)); }
  .premium-page .premium-hero-mark { inset-inline-end: -15vw; top: 40%; opacity: .75; }
  .premium-page .plans { grid-template-columns: 1fr; }
  .premium-page .plan { min-height: 0; }
  .premium-page .plan + .plan { border-inline-start: 0; border-top: 1px solid #bcbcc2; }
  .premium-page .plan .btn { margin-top: 32px; }
  .premium-page .subscription-choices .plan + .plan { border-top-color: rgba(255, 255, 255, .16); }
}

@media (max-width: 700px) {
  .premium-page .premium-main { padding-top: calc(140px + env(safe-area-inset-top)); }
  .premium-page .premium-hero,
  .premium-page .premium-benefits,
  .premium-page .premium-panel,
  .premium-page .status,
  .premium-page .premium-legal { width: calc(100% - 40px); }
  .premium-page .premium-hero { min-height: calc(100svh - 140px - env(safe-area-inset-top)); margin-bottom: 100px; }
  .premium-page .premium-hero h1 { font-size: clamp(58px, 19vw, 96px); overflow-wrap: normal; }
  .premium-page .premium-hero-copy > p:last-child { margin-top: 28px; font-size: 17px; }
  .premium-page .premium-hero-mark { width: 82vw; inset-inline-end: -34vw; top: 39%; }
  .premium-page .trust-row { display: grid; margin-top: 56px; }
  .premium-page .trust-row span { padding: 15px 0; }
  .premium-page .trust-row span + span { padding-inline-start: 0; border-inline-start: 0; border-top: 1px solid var(--premium-rule); }
  .premium-page .public-pricing,
  .premium-page .comparison { padding: 90px 20px; }
  .premium-page .premium-section-heading h2,
  .premium-page .comparison-head h2 { font-size: clamp(45px, 14vw, 72px); }
  .premium-page .premium-section-heading > p:last-child { font-size: 16px; }
  .premium-page .plans { margin-top: 52px; }
  .premium-page .plan { padding: 28px 22px 30px; }
  .premium-page .plan-kicker { margin-bottom: 24px; }
  .premium-page .price { font-size: 48px; }
  .premium-page .pricing-note { text-align: start; line-height: 1.5; }
  .premium-page .premium-benefits { padding-block: 100px; }
  .premium-page .benefit-grid { margin-top: 55px; }
  .premium-page .benefit { grid-template-columns: 1fr; gap: 14px; padding: 28px 0; }
  .premium-page .benefit h3 { font-size: 29px; }
  .premium-page .benefit p { font-size: 16px; }
  .premium-page .comparison { margin-inline: 0; }
  .premium-page .comparison-head { margin-bottom: 48px; }
  .premium-page .comparison-shared { margin-top: 22px; font-size: 15px; line-height: 1.55; }
  .premium-page .comparison-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; padding: 22px 0; font-size: 13px; overflow-wrap: anywhere; }
  .premium-page .comparison-row > :first-child { grid-column: 1 / -1; font-size: 15px; font-weight: 600; }
  .premium-page .comparison-labels { padding-block: 12px; font-size: 9px; letter-spacing: .08em; }
  .premium-page .comparison-labels > :first-child { font-size: 9px; }
  .premium-page .comparison-compatibility { margin-top: 25px; font-size: 11px; line-height: 1.65; }
  .premium-page .premium-panel { margin-top: 80px; padding: 28px 20px; border-radius: 14px; }
  .premium-page .premium-panel.login-card { padding: 24px 20px; }
  .premium-page .login-card > .premium-eyebrow { margin-bottom: 11px !important; }
  .premium-page .login-card h2 { font-size: 32px; }
  .premium-page .login-card .auth-mode-switch { margin-top: 17px; }
  .premium-page .login-card .social-login { margin-top: 14px; }
  .premium-page .login-card form { margin-top: 13px; }
  .premium-page .login-card .fineprint { margin-top: 12px; }
  .premium-page .offers-head { display: block; }
  .premium-page .account-logout { margin-top: 18px; }
  .premium-page .account-overview { grid-template-columns: 1fr; }
  .premium-page .account-card { padding: 22px 18px; }
  .premium-page .subscription-choices { margin-top: 40px; padding-top: 35px; }
  .premium-page .social-divider span { white-space: normal; text-align: center; }
}

@media (max-width: 360px) {
  .premium-page .premium-hero,
  .premium-page .premium-benefits,
  .premium-page .premium-panel,
  .premium-page .status,
  .premium-page .premium-legal { width: calc(100% - 28px); }
  .premium-page .public-pricing,
  .premium-page .comparison { padding-inline: 14px; }
  .premium-page .premium-hero h1 { font-size: 54px; }
  .premium-page .comparison-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; font-size: 12px; }
  .premium-page .premium-panel { padding-inline: 16px; }
  .premium-page .auth-mode-switch button { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .premium-page *,
  .premium-page *::before,
  .premium-page *::after { transition-duration: .01ms !important; }
}