/* ==========================================================================
   FunkyBreslev — page de vente Pass Premium (FR + EN).
   Écrite en mobile-first : le socle décrit le téléphone, les media queries
   `min-width` élargissent ensuite. Réutilise les tokens de home-*.css
   (--bg/--panel/--ink/--muted/--gold/--line) — charger APRÈS home-*.css.

   Le hero réutilise volontairement `.hero-art` de home-*.css : le disque reste
   à droite du texte sur grand écran et devient un filigrane recadré sur
   téléphone, sans ajouter de hauteur au hero.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
/* --- Hero : la mosaïque du catalogue ------------------------------------
   Le premier écran de la page de vente EST le catalogue : 108 pochettes
   carrées uniques, dédoublonnées et réparties par teinte, aplaties hors ligne
   en UNE seule image (une requête, pas 108), posées en filigrane derrière le
   texte. Le voile radial garantit le contraste du titre par-dessus. */
.pm-hero { position: relative; overflow: hidden; padding: 30px 0 34px; border-bottom: 1px solid var(--line); }
.pm-hero-mosaic { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pm-hero-mosaic img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  filter: saturate(.72) brightness(1);
  opacity: .62;
}
.pm-hero-mosaic::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(110% 80% at 26% 46%, rgba(8,8,10,.62), rgba(8,8,10,.88) 66%),
    linear-gradient(180deg, rgba(8,8,10,.42), rgba(8,8,10,.4) 46%, var(--bg));
}
.pm-hero:before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(620px 460px at 82% -6%, rgba(232, 169, 59, .17), transparent 68%);
}
.pm-hero .wrap { position: relative; }
/* Même échelle typographique que le H1 de l'accueil : le hero de la page de
   vente n'a aucune raison d'être plus petit que celui de l'accueil. */
.pm-hero h1 { font-size: clamp(38px, 11.5vw, 54px); white-space: normal; margin-top: 14px; }
.pm-hero h1 em { font-style: normal; color: var(--gold); }
.pm-hero .lead { color: var(--muted); font-size: 15px; margin: 16px 0 0; max-width: 46ch; }
/* Badge sur une seule ligne, même sur un écran de 320 px. */
.pm-hero .hero-badge { margin-top: 0; white-space: nowrap; font-size: 11px; letter-spacing: .06em; padding: 6px 12px; }

/* Prix et action regroupés dans une seule barre compacte : sur mobile, ils
   occupent une ligne au lieu de former deux blocs successifs. */
/* Le CTA passe DEVANT le prix, qui devient sa légende. Avant, une pastille de
   prix et un bouton se disputaient la même ligne dans un encadré : deux
   messages tarifaires concurrents dans le premier écran. */
.pm-hero-action { margin-top: 24px; }
.pm-hero-price {
  display:grid; grid-template-columns:1fr; gap:3px;
  margin:12px 0 0; max-width:none; color:var(--muted); font-size:12px; line-height:1.3;
}
.pm-hero-price b { color:var(--ink); font-size:15px; font-weight:800; white-space:nowrap; }
.pm-hero-price span { min-width:0; white-space:nowrap; font-size:clamp(10px, 3.05vw, 12px); letter-spacing:-.01em; }

@media (max-width: 760px) {
  .pm-preview { padding-top: 30px; }
}

/* --- Preuve sociale (étoiles + membres) ---------------------------------- */
.pm-proof {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  margin: 18px 0 0; font-size: 12.5px; color: var(--muted);
}
.pm-proof .stars { color: var(--gold); font-size: 13px; letter-spacing: 1.5px; }
.pm-proof b { color: var(--ink); font-weight: 700; }
.pm-proof.center { justify-content: center; }
/* La note est un LIEN vers les avis de l'accueil : une note affirmée que le
   visiteur ne peut pas vérifier rassure moins qu'elle n'inquiète. Le soulignement
   ne porte que sur le « 5/5 » — les étoiles soulignées seraient illisibles. */
.members-rating { color:var(--gold); letter-spacing:1px; white-space:nowrap; text-decoration:none; }
.members-rating b { color:var(--muted); letter-spacing:0; margin-left:3px; text-decoration:underline; text-underline-offset:3px; }
a.members-rating:hover b { color:var(--ink); }
.pm-hero-cta { min-height:52px; padding:14px 26px; font-size:14px; white-space:nowrap; }
/* Pastille verte « en ce moment » devant le nombre de membres. */
.pm-proof .member-count { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.pm-proof .member-count:before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%; margin-right:8px;
  background: #52c76a; box-shadow: 0 0 0 3px rgba(82, 199, 106, .18);
}

/* --- Titres de section --------------------------------------------------- */
.section-head { max-width: 640px; margin: 0 0 24px; }
.section-head .eyebrow { margin-bottom: 10px; }
.section-head h2 { font-size: clamp(30px, 8vw, 42px); }
.section-head p { color: var(--muted); margin: 10px 0 0; font-size: 15px; }

/* --- Aperçu de l'espace membre : carrousel de captures réelles ------------ */
/* Aperçu de l'espace membre (2026-09-04, 2e passe).
   Ce n'est pas une galerie de captures : c'est l'argumentaire. UN téléphone en
   grand (l'espace est d'abord un objet de poche) et trois arguments qui
   VENDENT, chacun avec une découpe carrée de la capture correspondante.
   L'ordinateur est relégué à une note en bas : il rassure, il ne vend pas. */
.pm-show { display: grid; gap: 34px; margin-top: 30px; }
.pm-show-phone { position: relative; display: grid; justify-items: center; }
.pm-show-phone::before {
  content: ""; position: absolute; left: 50%; top: 6%; width: 86%; aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(232,169,59,.26), transparent 72%);
  pointer-events: none;
}
.pm-show-phone .phone-frame { position: relative; width: min(232px, 64%); }
/* Aucune carte, aucun cadre : les trois arguments respirent, séparés par un
   simple filet. Les vignettes flottent (ombre portée, pas de bordure) — le
   parcours doit être fluide, pas compartimenté. */
.pm-show-list { display: grid; margin: 0; padding: 0; list-style: none; }
.pm-show-list li {
  display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 18px; align-items: center;
  padding: 0;
}
.pm-show-list li + li {
  margin-top: 22px; padding-top: 22px;
  border-top: 1px solid rgba(245, 243, 238, .09);
}
.pm-show-thumb {
  display: block; width: 78px; height: 78px; overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 18px 34px rgba(0,0,0,.62), 0 0 0 1px rgba(245,243,238,.09);
}
.pm-show-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pm-thumb-library img { object-position: 50% 14%; }
.pm-thumb-home img { object-position: 50% 7%; }
.pm-thumb-playlists img { object-position: 50% 22%; }
.pm-show-list b {
  display: block; margin-bottom: 5px; color: var(--ink);
  font: 700 19px/1.05 'Plus Jakarta Sans', Impact, sans-serif;
  text-transform: uppercase; letter-spacing: .02em;
}
.pm-show-list span { display: block; color: var(--muted-strong); font-size: 12.5px; line-height: 1.5; }
.pm-desk { margin: 34px 0 0; }
.pm-desk figcaption { margin-top: 12px; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.pm-desk figcaption b {
  color: var(--ink); font-family: 'Plus Jakarta Sans', Impact, sans-serif;
  font-size: 17px; text-transform: uppercase; letter-spacing: .02em; margin-right: 6px;
}

/* Cadre téléphone : bordure sombre + reflet, l'image garde ses coins arrondis. */
.phone-frame {
  position: relative; width: 100%; margin: 0 auto;
  padding: 9px; border-radius: 40px;
  background: linear-gradient(160deg, #2a2a31, #0c0c0f 55%);
  box-shadow: 0 0 0 1px rgba(245, 243, 238, .1), 0 26px 60px rgba(0, 0, 0, .6);
}
.phone-frame img { width: 100%; height: auto; border-radius: 32px; display: block; }
/* Encoche */
.phone-frame:after {
  content: ""; position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 68px; height: 5px; border-radius: 99px; background: rgba(0, 0, 0, .55);
}

.mac-frame {
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: #0c0c0f; box-shadow: 0 22px 60px rgba(0, 0, 0, .55);
}
.mac-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #17171c; border-bottom: 1px solid var(--line); }
.mac-bar i { width: 9px; height: 9px; border-radius: 50%; background: #3a3a44; }
.mac-bar span { margin-left: 8px; font-size: 10.5px; color: var(--muted); letter-spacing: .04em; }
.mac-frame img { width: 100%; height: auto; display: block; }

/* --- Email « nouvelle sortie » ------------------------------------------- */
/* Section volontairement portée par l'image : la page enchaînait trop de blocs
   de texte. L'image est une VRAIE capture du template du Worker (voir
   tests/captures-email.mjs) ; l'en-tête « boîte mail » est dessiné ici, pas
   dans l'image, pour rester net et lisible à toutes les tailles. */
.pm-mail-shot { margin: 0 auto 22px; max-width: 250px; }
.mail-frame {
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: #0c0c0f; box-shadow: 0 22px 60px rgba(0, 0, 0, .55);
}
.mail-bar { display: grid; gap: 3px; padding: 12px 16px; background: #17171c; border-bottom: 1px solid var(--line); }
.mail-from { font-size: 11.5px; font-weight: 700; color: var(--ink); }
.mail-from span { color: var(--muted); font-weight: 500; }
.mail-subj { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-frame img { width: 100%; height: auto; display: block; background:linear-gradient(115deg,#17151a,#242018 48%,#17151a); }

.pm-mail-copy .eyebrow { display: block; margin-bottom: 10px; }
.pm-mail-copy h2 { font-size: clamp(30px, 8vw, 42px); }
.pm-mail-copy p { color: var(--muted); margin: 12px 0 0; font-size: 15px; }
/* La dernière sortie clôt la section email : elle en est la preuve, pas un
   nouveau chapitre — d'où une simple phrase d'intro (pas un 2e gros titre) et
   la même carte que sur l'accueil, sans surcharge dorée. */
.pm-latest-block { margin-top:36px; padding-top:28px; border-top:1px solid var(--line); }
.pm-latest-lead { max-width:52ch; margin:0 0 16px; color:var(--muted); font-size:15px; }
/* Adaptée à la page : ici la dernière sortie n'est pas un « drop » héros comme sur
   l'accueil, mais la PREUVE que la promesse est vivante, posée à la fin de la section
   email. D'où une carte-preuve compacte et horizontale (petite pochette + titre +
   date + écoute), qui rime avec le cadre email juste à côté. Layout autonome : ne
   dépend plus du grille partagé .latest-release-card (conçu pour un seul enfant). */
.pm-latest-card {
  display:flex; align-items:center; gap:18px;
  max-width:520px; padding:16px 18px;
  border:1px solid rgba(232,169,59,.26); border-radius:16px;
  background:
    radial-gradient(300px 190px at 9% 10%, rgba(232,169,59,.12), transparent 68%),
    linear-gradient(125deg, #17171b, #101014 62%, #15100a);
}
.pm-latest-cover { width:84px; height:84px; flex:0 0 84px; }
.pm-latest-cover img { width:100%; height:100%; object-fit:cover; border-radius:10px; background:#111; box-shadow:0 10px 24px rgba(0,0,0,.5), 0 0 0 1px rgba(232,169,59,.28); }
.pm-latest-copy { min-width:0; display:flex; flex-direction:column; gap:5px; }
.pm-latest-kind { color:var(--muted-strong); font-size:11px; letter-spacing:.05em; text-transform:uppercase; font-weight:650; font-variant-numeric:tabular-nums; }
.pm-latest-copy h3 { margin:0; font-family:'Plus Jakarta Sans',Impact,sans-serif; text-transform:uppercase; line-height:.95; letter-spacing:.02em; font-size:clamp(26px,7vw,34px); }
.pm-latest-controls { display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:6px; }
.pm-latest-controls[hidden] { display:none; }
.pm-latest-play { padding:11px 18px; font-size:12px; box-shadow:0 8px 20px rgba(232,169,59,.24); }
.pm-latest-card .latest-progress { margin-top:2px; max-width:240px; }
.pm-mail-list { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pm-mail-list li { position: relative; padding-left: 26px; color: #dfdbd0; font-size: 14px; }
.pm-mail-list li:before { content: "✓"; position: absolute; left: 0; color: var(--gold); font-weight: 800; }

/* --- Bénéfices en cartes ------------------------------------------------- */
.pm-grid { display: grid; gap: 12px; }
.pm-card {
  padding: 20px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 18px;
}
.pm-card .ico { width: 28px; height: 28px; color: var(--gold); }
.pm-card .ico svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pm-card h3 { font-family: 'Plus Jakarta Sans', Impact, sans-serif; font-size: 22px; text-transform: uppercase; letter-spacing: .02em; margin: 12px 0 5px; }
.pm-card p { color: var(--muted); font-size: 14px; margin: 0; }
/* Carte « exclusivités » : le seul avantage qu'aucune autre offre ne donne,
   donc traitée en accent ambré (et en pleine largeur sur grand écran). */
.pm-card.accent {
  background: linear-gradient(150deg, #1c1608, #121216 62%);
  border-color: rgba(232, 169, 59, .38);
}
.pm-card.accent h3 { color: var(--gold); }

/* --- Carte de prix (unique, dans le CTA final) --------------------------- */
.pm-offer {
  text-align: left;
  padding: 22px 18px 18px;
  background: linear-gradient(158deg, #1e1809, #0e0e12 64%);
  border: 1px solid rgba(232, 169, 59, .42); border-radius: 22px;
}
.pm-offer-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0; }
.pm-offer-price .big { font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -.01em; }
.pm-offer-price .per { font-size: 14px; color: var(--muted); font-weight: 500; }
.pm-offer-then { margin: 10px 0 0; color: var(--gold); font-weight: 700; font-size: 14px; }
.pm-offer-then span { display: block; color: var(--muted); font-weight: 500; font-size: 12.5px; margin-top: 3px; }
.pm-offer .btn { width: 100%; margin-top: 18px; font-size: 15px; min-height: 56px; }
.pm-offer-trust { margin: 12px 0 0; text-align: center; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.pm-offer-trust b { color: #cfcabd; font-weight: 600; }

/* Échec de la création de session Stripe. Remplace l'ancien alert() natif :
   le message reste dans la page, le bouton reste cliquable pour réessayer et
   l'adresse de contact sert de porte de sortie. Le paragraphe est inséré juste
   après le bouton par js/premium-checkout.js, qui pose aussi role="status". */
.pm-checkout-error {
  margin: 12px 0 0; padding: 11px 14px;
  border: 1px solid rgba(232, 169, 59, .45); border-radius: 12px;
  background: rgba(232, 169, 59, .08);
  color: #efe9db; font-size: 12.5px; line-height: 1.5; text-align: left;
}
.pm-checkout-error[hidden] { display: none; }
.pm-checkout-error a { color: var(--gold); font-weight: 650; }

/* Le libellé passe à « Un instant… » pendant l'appel : sans largeur plancher,
   le bouton rétrécissait sous le doigt. */
[data-checkout] { min-width: 11.5em; }

/* Rappel discret à mi-page (ancre vers #join, PAS un 2e bouton d'achat) : sur le
   long parcours mobile, un raccourci vers le tarif après la section « Ce que tu
   obtiens », sans réintroduire un [data-checkout] — un seul bouton d'achat reste
   la règle de la page. Lien texte souligné, jamais un bouton plein. */
.pm-jump { margin: 26px 0 0; text-align: center; }
.pm-jump a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--gold); font-weight: 700; font-size: 14px; text-decoration: none;
  border-bottom: 1px solid rgba(232, 169, 59, .35); padding-bottom: 2px;
  transition: border-color .18s var(--ease-out);
}
.pm-jump a span { transition: transform .2s var(--ease-out); }
.pm-jump a:hover { border-color: rgba(232, 169, 59, .7); }
.pm-jump a:hover span { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .pm-jump a span { transition: none; } }

/* --- Étapes -------------------------------------------------------------- */
.steps { display: grid; gap: 12px; }
.step { padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; }
.step-num { font-family: 'Plus Jakarta Sans', Impact, sans-serif; font-size: 34px; color: var(--gold); line-height: .8; }
.step h3 { font-family: 'Plus Jakarta Sans', Impact, sans-serif; font-size: 22px; text-transform: uppercase; letter-spacing: .02em; margin: 10px 0 5px; }
.step p { color: var(--muted); font-size: 14px; margin: 0; }

/* --- FAQ ----------------------------------------------------------------- */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 2px 18px; }
.faq summary {
  cursor: pointer; padding: 15px 0; font-weight: 700; font-size: 14.5px; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:after { content: "+"; color: var(--gold); font-size: 22px; line-height: 1; flex: none; }
.faq details[open] summary:after { content: "–"; }
.faq details p { color: var(--muted); font-size: 14px; margin: 0 0 16px; }
.faq details p a { color: var(--gold); }

/* --- Avis ---------------------------------------------------------------- */
.pm-reviews { border-top: 1px solid var(--line); }

/* --- CTA final = LE seul endroit où l'on peut acheter --------------------- */
/* Décision produit : un seul bouton de paiement sur toute la page, tout en bas
   (plus de bouton dans le hero, plus de barre collante). La page démontre,
   elle ne harcèle pas ; qui veut acheter descend. */
/* Le CTA final est posé sur un mur de pochettes (même composant que l'accueil,
   `.cover-wall` de home.css) : au moment de payer, on voit ce qu'on achète. */
.final-cta { position: relative; overflow: hidden; text-align: center; }
.final-cta > .cover-wall { opacity: .22; }
.final-cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--bg), rgba(8,8,10,.86) 34%, rgba(8,8,10,.94));
}
.final-cta > .wrap { position: relative; z-index: 1; }
.final-cta h2 { font-size: clamp(32px, 9vw, 50px); }
.final-cta > .wrap > p { color: var(--muted); margin: 12px auto 0; max-width: 480px; font-size: 15px; }
/* Respiration nette entre la preuve sociale (étoiles + membres) et la carte de
   prix : le bouton d'achat ne doit pas sembler collé aux avis. Sélecteur calé sur
   `.final-cta > .wrap > p` (home-*.css) pour le battre en spécificité — sinon son
   `margin: 12px auto 0` reprend le dessus et la carte remonte contre la preuve. */
.final-cta > .wrap > .pm-proof { margin: 18px auto 40px; }
.final-cta .btn { width: 100%; min-height: 56px; font-size: 15px; }
.final-cta .note { margin: 18px auto 0; max-width: 420px; font-size: 12.5px; }
/* Tarif préférentiel « déjà dans la famille ». Remonté du CTA final (il y
   apparaissait à 93 % de la page, APRÈS le bouton à 85 € : l'acheteur de La
   Collection lisait donc deux fois 85 € avant d'apprendre qu'il paye 39 €) vers
   le hero, sous le bouton. Petit encart ambré discret, plus visible depuis le
   2026-09-02 (la note « Pourquoi 85 € » qui le précédait est partie en FAQ) —
   il informe sans concurrencer l'offre principale. */
.pm-elig-inline {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  column-gap: 14px; margin: 22px 0 0; padding: 16px 0 2px; min-height: 66px;
  color: var(--ink); font-size: 13.5px; line-height: 1.45; text-align: left;
  text-decoration: none; border: 0; border-top: 1px solid rgba(232,169,59,.25);
  background: transparent;
}
.pm-elig-label {
  color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase;
}
.pm-elig-rate { margin-top: 3px; color: var(--muted); }
.pm-elig-rate b { color: var(--gold); font-weight: 750; }
.pm-elig-arrow { grid-column: 2; grid-row: 1 / span 2; color: var(--gold); font-size: 20px; transition: transform .2s var(--ease-out); }
.pm-elig-inline:hover .pm-elig-arrow { transform: translateX(4px); }
.pm-free-bridge { margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.pm-free-bridge a { color: var(--gold); font-weight: 750; text-underline-offset: 3px; }
.pm-free-bridge a:hover { color: var(--ink); }

/* --- Page « tarif préférentiel » (premium-eligibilite.html) -------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.elig {
  position: relative; overflow: hidden;
  min-height: calc(100svh - 72px);
  padding: 28px 0 56px;
  display: grid; align-items: center;
}
.elig::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(90% 72% at 50% 18%, rgba(232,169,59,.18), transparent 58%),
    linear-gradient(180deg, rgba(8,8,10,.18), rgba(8,8,10,.56) 42%, var(--bg)),
    radial-gradient(120% 90% at 50% 0%, #211707, #08080a 68%);
  opacity: 1;
}
.elig::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(520px 340px at 50% 8%, rgba(232,169,59,.18), transparent 72%);
}
.elig .wrap { position: relative; z-index: 1; width: min(100%, 1120px); }
.elig-box {
  position: relative; overflow: hidden;
  max-width: 500px; margin: 0 auto; text-align: left;
  padding: 30px 22px 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
    rgba(15,15,19,.87);
  border: 1px solid rgba(232, 169, 59, .34); border-radius: 22px;
  box-shadow: 0 26px 80px rgba(0,0,0,.46);
  backdrop-filter: blur(18px) saturate(135%);
}
.elig-box::before {
  content:""; position:absolute; left: 24px; right: 24px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,169,59,.72), transparent);
}
.elig-product {
  position: relative; width: min(68vw, 238px); aspect-ratio: 1;
  margin: -6px auto 16px;
}
.elig-product::before {
  content: ""; position: absolute; inset: 9%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,169,59,.22), transparent 70%);
  filter: blur(18px);
}
.elig-product img {
  position: relative; width: 100%; height: 100%; object-fit: contain;
  filter: saturate(.97) contrast(1.04) brightness(.94);
}
.elig-box .eyebrow {
  display: inline-flex; margin-bottom: 14px;
  padding: 6px 10px; border: 1px solid rgba(232,169,59,.3); border-radius: 999px;
  background: rgba(232,169,59,.08);
}
.elig-box h1 {
  max-width: 9ch;
  font-family: 'Plus Jakarta Sans', Impact, sans-serif;
  font-size: clamp(42px, 13vw, 58px);
  line-height: .88; letter-spacing: 0; text-transform: uppercase;
}
.elig-intro { color: var(--muted); font-size: 14px; line-height: 1.58; margin: 16px 0 0; }
.elig-intro b { color: var(--ink); font-weight: 700; }
.elig-products {
  display: grid; grid-template-columns: 1fr; gap: 8px;
  margin: 18px 0 0;
}
.elig-products span {
  min-height: 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 13px;
  border: 1px solid rgba(245,243,238,.11); border-radius: 12px;
  background: rgba(4,4,6,.34);
  color: var(--muted); font-size: 12px; line-height: 1.25;
}
.elig-products b {
  color: var(--ink); font-size: 12.5px; font-weight: 800;
}
.elig-form { display: grid; gap: 10px; margin: 24px 0 0; }
.elig-form input[type="email"] {
  width: 100%; min-height: 54px; padding: 14px 16px; font: inherit;
  color: var(--ink); background: rgba(4,4,6,.74);
  border: 1px solid rgba(245,243,238,.16); border-radius: 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
.elig-form input[type="email"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.elig-form .btn { width: 100%; min-height: 54px; }
.elig-msg { min-height: 20px; margin: 14px 0 0; font-size: 14px; font-weight: 600; }
.elig-msg.ok { color: #52c76a; }
.elig-msg.err { color: #e8794b; }
.elig-note {
  color: var(--muted); font-size: 12px; line-height: 1.45;
  margin: 18px 0 0; padding-top: 17px;
  border-top: 1px solid rgba(245,243,238,.1);
}
.elig-box .note {
  display: grid; gap: 8px;
  margin: 14px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.45;
}
.elig-box .note a {
  color: var(--gold); font-weight: 760; text-underline-offset: 3px;
}
.elig-box .note a:hover { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .elig-product img { animation: eligProductFloat 8s var(--ease-out) infinite alternate; }
}
@keyframes eligProductFloat {
  from { transform: translate3d(0, -2px, 0) rotate(-1deg) scale(.99); }
  to { transform: translate3d(0, 7px, 0) rotate(2deg) scale(1.03); }
}

/* ==========================================================================
   Tablette et plus
   ========================================================================== */
@media (min-width: 761px) {
  .pm-hero { padding: 48px 0 78px; }
  /* Colonne de texte plafonnée (~640 px) au lieu d'un 1fr qui l'étirait à 800 px :
     le titre et l'accroche flottaient dans une colonne trop large, laissant un
     grand vide ragréé avant le disque. La 2e piste reste `1fr` + `.hero-art`
     garde son `margin-left:auto` (home-*.css) → le disque reste EXACTEMENT à la
     même place et à la même taille que sur l'accueil. */
  /* Plus de colonne visuelle : la mosaïque occupe tout le fond, le discours
     tient dans une seule colonne de lecture. */
  .pm-hero-grid { display: block; }
  .pm-hero-copy { max-width: 660px; }
  /* Sur grand écran le texte n'occupe que la moitié gauche : le voile s'y
     concentre et laisse le catalogue respirer à droite. */
  .pm-hero-mosaic::after {
    background:
      linear-gradient(90deg, rgba(8,8,10,.93) 0%, rgba(8,8,10,.88) 38%, rgba(8,8,10,.6) 72%, rgba(8,8,10,.5) 100%),
      linear-gradient(180deg, rgba(8,8,10,.5), rgba(8,8,10,.3) 40%, var(--bg));
  }
  .pm-hero-copy { min-width: 0; }
  /* Plus de plafond `max-width` : le H1 occupe la colonne et tient sur 2 lignes
     (au lieu de 3 dans une colonne trop étroite). */
  .pm-hero h1 { font-size: clamp(40px, 5vw, 56px); max-width: none; margin-top: 14px; }
  .pm-hero .lead { font-size: 16px; }
  .pm-hero .hero-badge { font-size: 11px; letter-spacing: .2em; padding: 7px 13px; }
  .pm-hero-action { width:max-content; min-width:0; margin-top:28px; }
  .pm-hero-price { font-size:12px; }

  .section-head { margin: 0 auto 30px; text-align: center; }
  .section-head h2 { font-size: clamp(34px, 4vw, 48px); }

  /* Téléphone à gauche, arguments à droite : on lit l'argumentaire, l'appareil
     n'est qu'une preuve. */
  .pm-show { grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: 48px; align-items: center; margin-top: 34px; }
  .pm-show-phone .phone-frame { width: min(248px, 100%); }
  .pm-show-list li { grid-template-columns: 96px minmax(0, 1fr); gap: 24px; }
  .pm-show-list li + li { margin-top: 26px; padding-top: 26px; }
  .pm-show-thumb { width: 96px; height: 96px; border-radius: 24px; }
  .pm-show-list b { font-size: 23px; }
  .pm-show-list span { font-size: 13.5px; }
  .pm-desk { max-width: 780px; margin: 44px auto 0; }
  .pm-desk figcaption { text-align: center; font-size: 13px; }

  /* Image à gauche, texte à droite : le hero pose déjà texte-à-gauche /
     visuel-à-droite, et l'aperçu de l'espace est centré — on alterne. */
  .pm-mail-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 52px; align-items: center; }
  .pm-mail-shot { margin: 0; max-width: 330px; }
  /* Largeur de lecture plafonnée puis recentrée dans sa piste : sur un 1fr plein
     les lignes de paragraphe atteignaient ~90 caractères à côté de l'image. */
  .pm-mail-copy { max-width: 540px; margin-inline: auto; }

  .pm-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  /* La carte « exclusivités » barre toute la largeur et passe à l'horizontale :
     elle clôt la liste comme une bannière au lieu de laisser un vide à droite. */
  .pm-card.accent {
    grid-column: 1 / -1; padding: 22px 28px;
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 24px; align-items: center;
  }
  .pm-card.accent .ico { grid-row: 1 / span 2; width: 32px; height: 32px; }
  .pm-card.accent h3 { grid-column: 2; margin: 0 0 4px; }
  .pm-card.accent p { grid-column: 2; }

  .pm-offer { max-width: 680px; margin-inline: auto; padding: 26px 30px; }
  /* Deux colonnes plutôt qu'un flex qui repliait le bouton sur une 2e ligne :
     le tarif à gauche, la décision à droite, quelle que soit la longueur du
     libellé (le FR et l'EN n'ont pas la même). */
  .pm-offer-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: center; }
  .pm-offer-main { grid-column: 1; }
  .pm-offer-then { grid-column: 1; margin: 8px 0 0; }
  .pm-offer-cta { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
  .pm-offer-cta .btn { width: auto; margin-top: 0; white-space: nowrap; }
  .pm-offer-trust { text-align: center; max-width: 240px; }

  .steps { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .step { padding: 26px; }
  .step-num { font-size: 40px; }

  .faq { max-width: 760px; margin: 0 auto; gap: 12px; }
  .faq summary { padding: 16px 0; }
  .final-cta .btn { width: auto; }
}

@media (min-width: 1000px) {
  .pm-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ==========================================================================
   Direction visuelle — passe agence 2026
   ========================================================================== */
.pm-hero { overflow: clip; }
.pm-hero-copy { position: relative; z-index: 1; }
.pm-hero .lead { color: var(--muted-strong, #d7d3c8); }
.pm-preview {
  border-block: 1px solid rgba(245,243,238,.06);
  background:
    radial-gradient(circle at 50% 20%, rgba(232,169,59,.08), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 72%);
}
.pm-card {
  display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: start; gap: 14px;
  background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  box-shadow: 0 14px 34px rgba(0,0,0,.15);
}
.pm-card .ico { width: 30px; height: 30px; margin-top: 1px; }
.pm-card h3 { margin: 0 0 5px; }
.pm-card.accent { grid-template-columns: 34px minmax(0,1fr); }
.pm-mail {
  background:
    linear-gradient(105deg, rgba(232,169,59,.07), transparent 42%),
    rgba(255,255,255,.012);
  border-block: 1px solid rgba(232,169,59,.11);
}
.final-cta {
  border-top: 1px solid rgba(232,169,59,.16);
  background: radial-gradient(circle at 50% 24%, rgba(232,169,59,.10), transparent 42%);
}
.final-cta > .wrap > p + .pm-offer { margin-top: 32px; }
.pm-support-note {
  max-width: 520px !important;
  margin: 18px auto 0 !important;
  color: var(--muted-strong, var(--muted)) !important;
  font-size: 12.5px !important;
  line-height: 1.55;
}
.pm-support-note a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pm-support-note { display: block; }
.pm-support-question { display: inline; }
.pm-support-links { display: inline; margin-left: 6px; white-space: nowrap; }
.pm-support-links > span { margin-inline: 7px; }

@media (max-width: 760px) {
  .pm-hero { padding-bottom: 34px; }
  .pm-hero h1 { font-size: clamp(36px, 11.2vw, 50px); }
  .pm-hero-action { margin-top: 20px; }
  .pm-card { padding: 17px 16px; border-radius: 16px; }
  .pm-card h3 { font-size: 20px; }
  /* Ici la promesse introduit l'image : sur mobile, l'e-mail vient comme
     preuve juste après le texte, au lieu de repousser son explication. */
  .pm-mail-grid { display: flex; flex-direction: column; }
  .pm-mail-copy { order: -1; }
  .pm-mail-shot { margin: 22px auto 0; }
  .pm-mail-list { display: none; }
  .pm-mail-copy p { margin-top: 9px; }
  .final-cta > .wrap > p + .pm-offer { margin-top: 26px; }
}

@media (min-width: 761px) {
  .pm-card.accent { grid-template-columns: 38px minmax(0,1fr); }
  .pm-card.accent .ico { grid-row: auto; }
  .pm-card.accent h3, .pm-card.accent p { grid-column: auto; }
}

@media (min-width: 1000px) {
  .pm-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Audit du parcours Premium (2026-09-04) ----------------------------------
   Cette page doit se lire comme une succession de preuves, pas comme un mur
   de cartes. Les filets conservent le rythme et la hiérarchie sans redire que
   chaque argument est un bloc autonome. */
html { scroll-behavior: auto; }

/* La barre mobile reste réduite à Menu + logo + langues. Le CTA d'achat revient
   seulement quand la navigation inline a assez de place. */
.pm-nav-join {
  display: none; align-items: center; justify-content: center; min-height: 44px;
  padding: 0 8px; border: 0; border-radius: 0;
  color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .08em;
  text-decoration: none; text-transform: uppercase; white-space: nowrap;
  transition: color .18s var(--ease-out);
}
.pm-nav-join:hover { color: var(--ink); }

/* L'offre gratuite intervient avant l'argumentaire, jamais à l'instant du
   paiement. Le même `.wrap` que le reste de la page rétablit son alignement. */
.pm-free-wrap { padding-top: 4px; }
.pm-free-bridge { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.pm-free-bridge a,
.pm-support-note a,
.final-cta .note a,
.faq details p a {
  display: inline-flex; align-items: center; min-height: 44px;
}
.pm-free-bridge a { color: var(--gold); font-weight: 750; text-underline-offset: 3px; }
.pm-free-bridge a:hover { color: var(--ink); }

/* L'ordinateur reste une preuve complémentaire, mais pas sur un écran où sa
   grille devient illisible. */
@media (max-width: 760px) { .pm-desk { display: none; } }

/* Les quatre bénéfices usuels reprennent le motif de l'aperçu de l'espace :
   icône, texte, puis un simple filet. L'exclusivité conserve seule son cadre. */
.pm-grid { display: grid; gap: 0; max-width: 760px; margin-inline: auto; }
.pm-card:not(.accent) {
  position: relative; grid-template-columns: 34px minmax(0, 1fr); gap: 14px;
  padding: 20px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.pm-card:not(.accent) + .pm-card:not(.accent)::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: rgba(245,243,238,.10);
}
.pm-card.accent { margin-top: 18px; }

/* Un processus n'est pas une collection de cartes : le chiffre, le texte et
   un filet suffisent. L'étape « écouter tout » est déjà prouvée plus haut. */
.steps { display: grid; gap: 0; max-width: 760px; margin-inline: auto; }
.step {
  position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr);
  column-gap: 14px; padding: 22px 0; border: 0; border-radius: 0; background: transparent;
}
.step + .step::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: rgba(245,243,238,.10);
}
.step-num { grid-row: 1 / span 2; font-size: 36px; }
.step h3 { margin: 0 0 5px; }
.step p { margin: 0; }

/* La FAQ répond directement : le premier détail accueille, les suivants se
   présentent comme des lignes de lecture plutôt que sept boîtes fermées. */
.faq { display: grid; gap: 0; }
.faq details { padding: 0; border: 0; border-radius: 0; background: transparent; }
.faq details + details { border-top: 1px solid rgba(245,243,238,.10); }
.faq summary { min-height: 56px; padding: 14px 0; }
.faq details p { margin: 0 0 14px; }

/* La FAQ est une nouvelle étape de lecture, pas la continuité du parcours
   d'inscription. Le filet conserve la sobriété des séparateurs de la page. */
.pm-faq-section { padding-top: 0; }
.pm-faq-section > .wrap { padding-top: 24px; border-top: 1px solid rgba(232,169,59,.24); }

/* Le dernier écran ne mélange plus les trois décisions. Le paiement garde sa
   carte, le tarif Collection devient une passerelle identifiable, puis l'aide
   et l'accès membre forment une barre de service compacte. */
.pm-elig-inline {
  grid-template-columns: 30px minmax(0, 1fr) auto;
  column-gap: 12px;
  margin-top: 20px;
  padding: 15px 0 3px;
}
.pm-elig-disc {
  grid-column: 1; grid-row: 1 / span 2;
  width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at center, #101014 0 22%, transparent 23% 39%, #d8a94e 40% 43%, #2b2414 44% 60%, rgba(232,169,59,.35) 61% 63%, #15130d 64%);
  box-shadow: 0 0 0 1px rgba(232,169,59,.28);
}
.pm-elig-copy { display: grid; gap: 3px; min-width: 0; }
.pm-elig-label { display: block; }
.pm-elig-rate { display: block; margin: 0; }
.pm-elig-arrow { grid-column: 3; grid-row: 1 / span 2; }
.pm-support-note {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  max-width: 520px !important; margin: 22px auto 0 !important; padding-top: 0;
  border-top: 0; text-align: left;
}
.pm-support-note::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: rgba(245,243,238,.12); }
.pm-support-question {
  flex: 0 0 auto; color: var(--muted); font-size: 10px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
}
.pm-support-links { display: flex; align-items: center; gap: 5px; margin: 0; white-space: normal; }
.pm-support-links > span { display: none; }
.pm-support-note a {
  min-height: 44px; padding: 0 10px; border: 1px solid rgba(232,169,59,.32);
  color: var(--ink); font-size: 11px; font-weight: 750; text-decoration: none;
  text-underline-offset: 0;
}
.pm-support-note a:hover { border-color: var(--gold); color: var(--gold); }
.pm-member-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; margin: 10px auto 0 !important; padding: 0 2px;
  color: var(--muted) !important; border: 0; font-size: 12px !important; text-align: left;
}
.pm-member-link a { color: var(--gold); font-weight: 750; text-decoration: none; }
.pm-member-link a b { font-size: 16px; font-weight: 400; margin-left: 4px; }

@media (max-width: 360px) {
  .pm-support-note { gap: 6px; }
  .pm-support-question { font-size: 9px; letter-spacing: .06em; }
  .pm-support-note a { padding-inline: 8px; }
}

@media (min-width: 761px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .step + .step::before { inset: 0 auto 0 -16px; width: 1px; height: auto; }
}

@media (min-width: 1000px) {
  .pm-nav-join { display: inline-flex; padding-inline: 14px; }
  .pm-grid { grid-template-columns: 1fr; }
}

/* Dernier écran Premium : une décision, une seule pièce. Le prix, ce qu'il
   ouvre et l'alternative Collection sont réunis dans un ticket continu plutôt
   qu'en trois petits composants qui se disputent la fin de page. */
.pm-ticket {
  max-width: 560px;
  margin-inline: auto;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  border-color: rgba(232,169,59,.58);
  background:
    linear-gradient(112deg, rgba(232,169,59,.12), transparent 34%),
    linear-gradient(160deg, #171208, #0d0d10 68%);
  box-shadow: 0 22px 44px rgba(0,0,0,.3);
}
.pm-ticket .pm-offer-in { padding: 0; }
.pm-ticket-top {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 42px; padding: 0 18px;
  border-bottom: 1px solid rgba(232,169,59,.28);
  color: var(--gold); font-size: 10px; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
}
.pm-ticket-top span:last-child { color: var(--muted); font-size: 9px; letter-spacing: .1em; }
.pm-ticket .pm-offer-main { padding: 22px 18px 18px; }
.pm-ticket .pm-offer-price { gap: 7px 12px; }
.pm-ticket .pm-offer-price .big { color: var(--ink); font-size: clamp(48px, 12vw, 62px); letter-spacing: -.035em; }
.pm-ticket .pm-offer-price .per { color: var(--gold); font-size: 12px; font-weight: 750; line-height: 1.2; white-space: nowrap; }
.pm-ticket-includes { max-width: 36ch; margin: 13px 0 0; color: var(--muted-strong); font-size: 13px; line-height: 1.5; }
.pm-ticket .pm-offer-then {
  display: grid; gap: 4px; margin: 0; padding: 15px 18px 16px;
  border-block: 1px solid rgba(245,243,238,.11);
  color: var(--gold); font-size: 13px; letter-spacing: .01em;
}
.pm-ticket .pm-offer-then span { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.42; }
.pm-ticket .pm-offer-cta { padding: 18px 18px 16px; }
.pm-ticket .btn { margin-top: 0; }
.pm-ticket .pm-offer-trust {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 3px 10px;
  margin: 12px 0 0; font-size: 11px; line-height: 1.4;
}
.pm-ticket .pm-offer-trust span { color: var(--muted); }
.pm-ticket .pm-elig-inline {
  margin: 0; padding: 16px 18px;
  border-top: 1px solid rgba(232,169,59,.22);
  background: rgba(0,0,0,.15);
}
.pm-ticket .pm-elig-rate { color: var(--muted-strong); font-size: 12px; }
.pm-ticket .pm-elig-rate b { color: var(--ink); }
.pm-ticket .pm-elig-arrow { font-size: 18px; }

/* Les aides ne concurrencent pas la décision : elles deviennent un simple
   prolongement éditorial sous le ticket. */
.pm-service-row {
  max-width: 560px; margin: 20px auto 0;
  border-top: 1px solid rgba(245,243,238,.14);
}
.pm-service-row .pm-support-note {
  min-height: 44px; margin: 0 !important; padding: 0;
}
.pm-service-row .pm-support-note::before { content: none; }
.pm-support-mark {
  display: grid; flex: 0 0 auto; place-items: center;
  width: 22px; height: 22px; border: 1px solid rgba(232,169,59,.62); border-radius: 50%;
  color: var(--gold); font-family: Georgia, serif; font-size: 14px; font-weight: 700; line-height: 1;
}
.pm-service-row .pm-support-question {
  min-width: 0; color: var(--muted-strong); font-size: 10px; font-weight: 700; letter-spacing: .015em;
  text-transform: none;
}
.pm-service-row .pm-support-links { flex: 0 0 auto; gap: 12px; }
.pm-service-row .pm-support-note a {
  min-height: 44px; padding: 0; border: 0;
  color: var(--gold); font-size: 11px; font-weight: 800;
  letter-spacing: .03em; text-decoration: underline; text-decoration-color: rgba(232,169,59,.38);
  text-underline-offset: 4px;
}
.pm-service-row .pm-support-note a:hover { border: 0; color: var(--ink); text-decoration-color: var(--ink); }
.pm-service-row .pm-member-link {
  width: 100%; max-width: none; min-height: 0; margin: 7px 0 0 !important; padding: 0;
  border: 0; color: var(--muted-strong) !important;
}
.pm-service-row .pm-member-link a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; min-height: 58px; padding: 0 15px;
  border: 1px solid rgba(232,169,59,.28);
  border-radius: 12px;
  background: linear-gradient(100deg, rgba(232,169,59,.13), rgba(232,169,59,.025) 72%);
  color: var(--ink); text-decoration: none;
  transition: border-color .18s var(--ease-out), background .18s var(--ease-out);
}
.pm-member-copy { display: grid; gap: 3px; }
.pm-member-copy span { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .05em; }
.pm-member-copy b { color: var(--ink); font-size: 13px; font-weight: 800; }
.pm-member-arrow { flex: 0 0 auto; color: var(--gold); font-size: 22px; font-weight: 400; transition: transform .18s var(--ease-out); }
.pm-service-row .pm-member-link a:hover { border-color: var(--gold); background: rgba(232,169,59,.16); }
.pm-service-row .pm-member-link a:hover .pm-member-arrow { transform: translateX(4px); }

@media (max-width: 360px) {
  .pm-ticket-top { padding-inline: 15px; }
  .pm-ticket .pm-offer-main,
  .pm-ticket .pm-offer-then,
  .pm-ticket .pm-offer-cta,
  .pm-ticket .pm-elig-inline { padding-inline: 15px; }
  .pm-support-mark { width: 19px; height: 19px; font-size: 12px; }
  .pm-service-row .pm-support-question { font-size: 8px; letter-spacing: 0; }
  .pm-service-row .pm-support-links { gap: 8px; }
}

/* --- Desktop art direction ------------------------------------------------
   The phone layout remains the source of truth below 761px. On a wide screen,
   Premium becomes a listening-room page: larger type, stronger visual proof,
   and wider editorial rails replace the narrow mobile reading column. */
@media (min-width: 761px) {
  .pm-hero {
    min-height: 520px;
    display: grid;
    align-items: center;
    padding: 72px 0 84px;
  }
  .pm-hero-mosaic img {
    object-position: 64% 44%;
    filter: saturate(.84) contrast(1.05);
    opacity: .74;
  }
  .pm-hero-mosaic::after {
    background:
      linear-gradient(90deg, rgba(8,8,10,.96) 0%, rgba(8,8,10,.88) 36%, rgba(8,8,10,.35) 76%, rgba(8,8,10,.22) 100%),
      linear-gradient(180deg, rgba(8,8,10,.38), rgba(8,8,10,.18) 58%, var(--bg));
  }
  .pm-hero-copy { max-width: 720px; padding-block: 18px; }
  .pm-hero h1 {
    max-width: 10.5ch;
    margin-top: 22px;
    font-size: clamp(64px, 6.1vw, 88px);
    line-height: .9;
    letter-spacing: -.035em;
    text-wrap: balance;
  }
  .pm-hero .lead { max-width: 40ch; margin-top: 24px; font-size: 18px; line-height: 1.45; }
  .pm-proof { margin-top: 28px; font-size: 13px; }
  .pm-hero-action { display: flex; align-items: center; gap: 20px; margin-top: 34px; }
  .pm-hero-cta { min-height: 58px; padding-inline: 30px; border-radius: 6px; font-size: 15px; }
  .pm-hero-price { margin: 0; padding-left: 20px; border-left: 1px solid rgba(232,169,59,.32); }
  .pm-hero-price b { font-size: 18px; }
  .pm-hero-price span { font-size: 12px; }

  section { padding: 92px 0; }
  .pm-preview .section-head,
  .pm-mail-copy,
  .pm-faq-section .section-head { margin-left: 0; margin-right: auto; text-align: left; }
  .pm-preview .section-head { max-width: 760px; }
  .pm-preview .section-head h2,
  .pm-mail-copy h2 { font-size: clamp(44px, 4.6vw, 60px); line-height: .94; letter-spacing: -.035em; }
  .pm-preview .section-head p,
  .pm-mail-copy p { max-width: 58ch; font-size: 16px; line-height: 1.6; }

  .pm-show {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
    gap: clamp(48px, 8vw, 104px);
    align-items: start;
    margin-top: 56px;
  }
  .pm-show-phone .phone-frame { width: min(300px, 100%); transform: rotate(-2deg); }
  .pm-show-list { padding-top: 28px; }
  .pm-show-list li { grid-template-columns: 112px minmax(0, 1fr); gap: 26px; }
  .pm-show-list li + li { margin-top: 30px; padding-top: 30px; }
  .pm-show-thumb { width: 112px; height: 112px; border-radius: 26px; }
  .pm-show-list b { font-size: 24px; line-height: 1; }
  .pm-show-list span { max-width: 42ch; font-size: 14px; line-height: 1.55; }
  .pm-desk { max-width: 1000px; margin-top: 76px; }

  .pm-mail { padding: 108px 0 100px; }
  .pm-mail-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: clamp(52px, 8vw, 112px); }
  .pm-mail-shot { max-width: 380px; transform: rotate(-1.5deg); }
  .pm-mail-copy { max-width: 560px; margin-inline: 0; }
  .pm-mail-copy .eyebrow { margin-bottom: 16px; }
  .pm-mail-list { margin-top: 28px; gap: 14px; }
  .pm-mail-list li { font-size: 15px; }

  .pm-grid { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; }
  .pm-card:not(.accent) { padding: 28px 0; }
  .pm-card h3 { font-size: 24px; }
  .pm-card p { max-width: 46ch; font-size: 15px; line-height: 1.55; }
  .pm-card.accent { grid-column: 1 / -1; margin-top: 24px; padding: 28px 30px; }

  .steps { max-width: 900px; column-gap: 72px; }
  .step { padding: 28px 0; }
  .step h3 { font-size: 24px; }
  .step p { max-width: 32ch; font-size: 15px; line-height: 1.55; }

  .pm-faq-section .section-head { max-width: 620px; }
  .faq { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 72px; }
  .faq summary { min-height: 64px; font-size: 15px; }
  .faq details p { max-width: 48ch; font-size: 15px; line-height: 1.58; }

  .final-cta { padding: 128px 0 112px; }
  .final-cta h2 { font-size: clamp(48px, 5.2vw, 72px); line-height: .92; letter-spacing: -.035em; }
  .final-cta > .wrap > p { font-size: 16px; }
  .final-cta > .wrap > p + .pm-offer { margin-top: 42px; }
  .pm-ticket { max-width: 820px; }
  .pm-ticket .pm-ticket-top { grid-column: 1 / -1; }
  .pm-ticket .pm-offer-main { padding: 30px 30px 26px; }
  .pm-ticket .pm-offer-then { padding: 20px 30px; }
  .pm-ticket .pm-offer-cta { padding: 24px 30px 22px; }
  .pm-ticket .pm-offer-price .big { font-size: clamp(58px, 6vw, 78px); }
  .pm-ticket-includes { max-width: 42ch; font-size: 14px; }
  .pm-service-row { max-width: 820px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .pm-service-row .pm-support-note { grid-column: 1 / -1; }
}

/* --- Desktop refinements: release proof + purchase navigation -------------
   The mobile composition stays on its existing flow. On wide screens, the
   email and the live release proof become one intentional two-column story;
   the purchase action becomes the clear primary control in the nav. */
@media (min-width: 761px) {
  .pm-mail > .wrap {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
    column-gap: clamp(52px, 8vw, 112px);
    align-items: start;
  }
  .pm-mail-grid { display: contents; }
  .pm-mail-shot {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
  }
  .pm-mail-copy {
    grid-column: 2;
    grid-row: 1;
  }
  .pm-latest-block {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    margin-top: 34px;
    padding-top: 26px;
    border-top-color: rgba(232,169,59,.28);
  }
  .pm-latest-card { max-width: 560px; }
  .pm-latest-cover { width: 104px; height: 104px; flex-basis: 104px; }
}

@media (min-width: 1000px) {
  .nav-end { gap: 14px; }
  .pm-nav-join {
    display: inline-flex;
    min-height: 42px;
    padding: 0 17px;
    border: 1px solid var(--gold);
    border-radius: 6px;
    background: var(--gold);
    color: #08080a;
    box-shadow: 0 8px 20px rgba(232,169,59,.18);
    transition: background-color .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out), transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
  }
  .pm-nav-join:hover {
    background: #f2be57;
    border-color: #f2be57;
    color: #08080a;
    box-shadow: 0 10px 24px rgba(232,169,59,.26);
    transform: translateY(-1px);
  }
  .pm-nav-join:active { transform: translateY(1px) scale(.985); }
}

/* --- Desktop purchase module ---------------------------------------------
   The hero CTA is a purchase decision, not a mobile-sized pill: the action
   and its first-year price share one framed unit. The mobile label remains
   untouched through the two label spans. */
.pm-cta-desktop-label { display: none; }

@media (min-width: 761px) {
  .pm-hero-action {
    display: grid;
    grid-template-columns: minmax(220px, auto) minmax(190px, 1fr);
    align-items: stretch;
    width: min(100%, 560px);
    margin-top: 32px;
    padding: 8px;
    border: 1px solid rgba(232,169,59,.34);
    border-radius: 14px;
    background: linear-gradient(120deg, rgba(232,169,59,.13), rgba(255,255,255,.025) 62%);
    box-shadow: 0 18px 38px rgba(0,0,0,.24);
  }
  .pm-cta-mobile-label { display: none; }
  .pm-cta-desktop-label { display: inline; }
  .pm-hero-cta {
    width: 100%;
    min-width: 220px;
    min-height: 64px;
    padding-inline: 28px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .035em;
  }
  .pm-hero-price {
    align-self: center;
    margin: 0 0 0 16px;
    padding: 8px 18px;
    border-left: 1px solid rgba(232,169,59,.32);
    gap: 5px;
  }
  .pm-hero-price b { font-size: 20px; }
  .pm-hero-price span { max-width: 22ch; white-space: normal; line-height: 1.35; }
}

/* --- Desktop purchase ticket --------------------------------------------
   The closing offer is a horizontal decision module on desktop: price first,
   renewal detail second, action last. The mobile ticket keeps its existing
   stacked flow and copy. */
.pm-buy-desktop-label { display: none; }

@media (min-width: 761px) {
  .pm-buy-mobile-label { display: none; }
  .pm-buy-desktop-label { display: inline; }

  .pm-ticket {
    max-width: 1040px;
    border-radius: 16px;
    background:
      radial-gradient(700px 260px at 8% 100%, rgba(232,169,59,.14), transparent 70%),
      linear-gradient(120deg, #1c1609 0%, #121116 52%, #0f0f13 100%);
  }
  .pm-ticket .pm-offer-in {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .95fr) minmax(280px, .8fr);
    grid-template-areas:
      "top top top"
      "main then cta";
    align-items: stretch;
  }
  .pm-ticket .pm-ticket-top {
    grid-area: top;
    min-height: 48px;
    padding-inline: 30px;
  }
  .pm-ticket .pm-offer-main {
    grid-area: main;
    min-width: 0;
    padding: 34px 34px 32px;
  }
  .pm-ticket .pm-offer-price { align-items: baseline; gap: 12px; }
  .pm-ticket .pm-offer-price .big {
    font-size: clamp(64px, 6.2vw, 86px);
    letter-spacing: -.045em;
  }
  .pm-ticket .pm-offer-price .per {
    max-width: 12ch;
    font-size: 13px;
    line-height: 1.2;
    white-space: normal;
  }
  .pm-ticket-includes {
    max-width: 32ch;
    margin-top: 18px;
    font-size: 15px;
    line-height: 1.55;
  }
  .pm-ticket .pm-offer-then {
    grid-area: then;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    margin: 0;
    padding: 34px 30px;
    border-block: 0;
    border-inline-start: 1px solid rgba(245,243,238,.13);
    font-size: 16px;
  }
  .pm-ticket .pm-offer-then span {
    max-width: 25ch;
    margin-top: 8px;
    font-size: 12.5px;
    line-height: 1.45;
  }
  .pm-ticket .pm-offer-cta {
    grid-area: cta;
    justify-content: center;
    min-width: 0;
    padding: 26px 28px 24px;
    border-inline-start: 1px solid rgba(245,243,238,.13);
    background: rgba(232,169,59,.055);
  }
  .pm-ticket .pm-offer-cta .btn {
    width: 100%;
    min-height: 62px;
    padding-inline: 22px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.2;
    white-space: normal;
  }
  .pm-ticket .pm-offer-trust {
    justify-content: flex-start;
    max-width: none;
    margin-top: 12px;
    text-align: left;
  }
}

@media (min-width: 761px) and (max-width: 1023px) {
  .pm-ticket .pm-offer-in {
    grid-template-columns: minmax(0, 1fr) minmax(230px, .72fr);
    grid-template-areas:
      "top top"
      "main cta"
      "then then";
  }
  .pm-ticket .pm-offer-then {
    border-block-start: 1px solid rgba(245,243,238,.13);
    border-inline-start: 0;
    padding: 20px 30px;
  }
  .pm-ticket .pm-offer-cta { border-inline-start: 1px solid rgba(245,243,238,.13); }
}

@media (min-width: 1000px) {
  /* Les trois accès de service ferment le parcours sur une même ligne :
     deux raccourcis et l'aide restent ainsi au même niveau visuel. */
  .final-cta .pm-service-row {
    max-width: 1040px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    column-gap: 24px;
  }
  .final-cta .pm-service-row .pm-support-note {
    grid-column: auto;
    min-width: 0;
    min-height: 60px;
    margin: 0 !important;
    gap: 12px;
    border-bottom: 1px solid var(--line);
  }
  .final-cta .pm-service-row .pm-support-question {
    flex: 1 1 auto;
    font-size: 12px;
    line-height: 1.35;
  }
  .final-cta .pm-service-row .pm-support-links { gap: 12px; }
}