/* ==========================================================================
   FunkyBreslev — accueil (FR + EN, feuille partagée)
   Refonte 2026, cascade aplatie (septembre 2026).
   Deux familles : Playfair Display (titres) + Plus Jakarta Sans (le reste).

   STRUCTURE (mobile-first strict, une seule source par propriété/palier) :
     1. Tokens (:root unique)          4. @media (min-width: 761px)  → desktop
     2. Socle + composants (mobile)    5. @media (min-width: 901px)  → nav pleine
     3. Keyframes + reduced-motion
   Le socle décrit le téléphone ; les paliers `min-width` n'AJOUTENT que ce
   qu'un grand écran se permet. Aucune règle desktop ne vit hors des `min-width`.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  /* Couleurs */
  --bg: #08080a;
  --panel: #131318;
  --panel-raised: #18181e;
  --panel-warm: #17130d;
  --ink: #f5f3ee;
  --muted: #aaa69c;
  --muted-strong: #c9c4b9;
  --gold: #e8a93b;
  --line: rgba(245, 243, 238, .12);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, .42);
  /* Échelle de rayons — tokens sémantiques réutilisés. */
  --r-xs: 12px;
  --r-sm: 16px;
  --r-md: 18px;
  --radius: 22px;   /* rayon par défaut des panneaux */
  --r-lg: 24px;
  --r-xl: 28px;
  --r-pill: 99px;
  /* Diamètre du disque du hero au-dessus de 760 px (accueil ET page premium,
     qui réutilise `.hero-art`). En dessous, le disque est un filigrane de
     230 px posé en absolu et cette variable ne sert pas. */
  --disc-size: clamp(300px, 34vw, 520px);
  /* Les trois disques du site (hero, section « Choisis comment… », footer) sont
     un seul et même objet qui traverse la page : même image et même bord.
     Seule l'opacité change selon le rôle — filigrane hors cadre
     (hero mobile, footer) ou illustration posée dans la page (hero desktop,
     section des offres). Ne pas redéfinir ces valeurs ailleurs. */
  /* Échelle des titres de l'accueil — une seule, ordonnée par importance.
     h1 hero > section majeure (les offres) > sections d'appui (dernière
     sortie, avis, pied de page) > porte d'entrée secondaire (pack 5 titres).
     Avant, « Dernière sortie » montait à 48 px et écrasait la section des
     offres à 44 px : la page ne disait plus ce qui compte. */
  --t-major: clamp(32px, 9.2vw, 50px);
  --t-mid:   clamp(28px, 8vw, 38px);
  --t-minor: clamp(25px, 7.2vw, 32px);
  --disc-spin: 12s;
  --disc-edge: 6px solid #000;
  --disc-glow: 0 0 0 1px rgba(232, 169, 59, .5), 0 26px 60px rgba(0, 0, 0, .55);
  /* Ease-out « fort » (Emil / animations.dev) : plus de punch que le ease natif. */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}

/* --- 2. Socle + reset ---------------------------------------------------- */
* { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* La barre fixe mesure 77 px sur téléphone et 85 px dès 761 px. Les arrivées
   d’ancrage sont posées exactement à son bord inférieur : pas de marge
   artificielle, donc le maximum de contenu est immédiatement visible. */
:root { --anchor-offset: 77px; }
html { scroll-padding-top: var(--anchor-offset); }
.anchor-target { scroll-margin-top: 0; }
@media (min-width: 761px) { :root { --anchor-offset: 85px; } }
body {
  margin: 0;
  background:
    radial-gradient(900px 520px at 92% -140px, rgba(232, 169, 59, .055), transparent 66%),
    var(--bg);
  color: var(--ink);
  font: 440 16px/1.6 'Plus Jakarta Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a[href], button, [role="button"] {
  -webkit-tap-highlight-color: rgba(232, 169, 59, .24);
  touch-action: manipulation;
}
img { display: block; max-width: 100%; }
.gold { color: var(--gold); font-weight: 700; }
.hl { color: var(--ink); font-weight: 700; }
/* Le <br> qui empile « Sorties / semaine » n'existe que sur téléphone. */
.stat-br { display: inline; }

.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;
}
.wrap { width: min(100% - 36px, 1120px); margin: auto; }
.skip { position: absolute; left: -10000px; }
.skip:focus { left: 16px; top: 16px; z-index: 20; background: #fff; color: #000; padding: 8px 12px; }

/* Anneau de focus clavier, homogène sur tout le site : le contour par défaut du
   navigateur se lit mal sur fond sombre, et pas du tout sur un bouton ambré. */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn.primary:focus-visible, .btn.light:focus-visible { outline-color: var(--ink); }

/* --- Navigation (mobile : burger jusqu'à 900 px) ------------------------- */
.nav {
  position: sticky; top: 0; z-index: 10;
  /* Le fond ne doit PAS compter sur `backdrop-filter` seul : iOS le désactive
     en mode économie d'énergie, et le titre de la section passait alors en
     clair à travers la barre. L'opacité seule suffit ; le flou reste un bonus. */
  background: rgba(8, 8, 10, .94);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
}
.navin {
  height: 76px;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 20px;
}
.brand { grid-column: 2; }
.brand img { height: 62px; width: auto; transition: transform .25s var(--ease-out), opacity .2s ease; }
.brand:hover img { transform: scale(1.025); }

/* Les liens inline n'apparaissent qu'à partir de 901 px (cf. palier dédié) :
   entre 761 et 900 px, ils ne tenaient pas à côté du logo → burger. */
.links { display: none; }
.links a {
  position: relative; display: inline-flex; align-items: center; min-height: 40px;
  text-decoration: none; color: var(--muted); transition: color .15s ease;
}
.links a:hover { color: var(--ink); }
.links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 5px; height: 1px;
  background: var(--gold); transition: right .24s var(--ease-out);
}
.links a:hover::after, .links a:focus-visible::after { right: 0; }

/* « Espace membre » est une connexion client, pas une rubrique éditoriale :
   il sort de la liste et rejoint FR/EN à droite, en pastille. Sous 1000 px il
   retourne dans le burger (il n'y a pas la place). */
.nav-end { grid-area: 1 / 3; justify-self: end; display: flex; align-items: center; gap: 10px; }
.nav-space {
  display: none; align-items: center; min-height: 40px; padding: 0 15px;
  border: 1px solid rgba(232, 169, 59, .42); border-radius: var(--r-pill);
  color: var(--gold); font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background-color .18s var(--ease-out), border-color .18s var(--ease-out);
}
.nav-space:hover { background: rgba(232, 169, 59, .14); border-color: var(--gold); }

.languages {
  grid-area: auto; justify-self: auto;
  display: flex; gap: 0; align-items: center;
  padding: 0; border: 0; font-size: 11px; font-weight: 700; letter-spacing: .1em;
}
.languages a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; min-height: 44px; padding: 0 4px; border-radius: var(--r-pill);
  text-decoration: none; color: var(--muted); transition: color .15s ease; font-size: 11px;
}
.languages a.active { background: rgba(232, 169, 59, .08); }
.languages a.active, .languages a:hover { color: var(--gold); }

.menu-toggle {
  grid-column: 1; display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 8px 8px 8px 0; border: 0; background: none; color: var(--ink);
  font: 700 10px 'Plus Jakarta Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase;
}
.menu-toggle i, .menu-toggle i:before, .menu-toggle i:after { display: block; width: 17px; height: 1px; background: currentColor; content: ""; }
.menu-toggle i { position: relative; }
.menu-toggle i:before { position: absolute; top: -5px; }
.menu-toggle i:after { position: absolute; top: 5px; }
.mobile-menu {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  padding: 10px 18px 18px; background: #0a0a0e;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 22px 42px rgba(0, 0, 0, .42);
}
.mobile-menu.open { display: grid; gap: 4px; }
.mobile-menu a {
  min-height: 48px; display: flex; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--line);
  text-decoration: none; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
}

/* --- Hero (mobile : disque en filigrane recadré) ------------------------- */
.hero {
  position: relative; overflow: hidden;
  padding: 30px 0 38px;
  border-bottom: 1px solid var(--line);
}
.hero:before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(650px 440px at 84% 2%, rgba(232, 169, 59, .15), transparent 68%),
    radial-gradient(520px 340px at 3% 100%, rgba(232, 169, 59, .045), transparent 66%);
}
.hero-grid {
  position: relative;
  display: grid; grid-template-columns: 1fr;
  gap: 40px; align-items: center;
}
/* La colonne de texte passe devant le disque filigrane. */
.hero-grid > div:first-child { position: relative; z-index: 1; }

.badge, .eyebrow {
  display: inline-flex;
  align-items: center;
  color: var(--gold);
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
.badge {
  min-height: 32px;
  border: 1px solid rgba(232, 169, 59, .4);
  padding: 7px 13px; border-radius: var(--r-pill);
  background: rgba(232, 169, 59, .06);
}
.hero-badge { margin-top: 0; }

h1, h2 {
  font-family: 'Plus Jakarta Sans', Impact, sans-serif;
  text-transform: uppercase; line-height: .98; letter-spacing: .015em; margin: 0;
}
h1 { font-size: clamp(41px, 12vw, 55px); margin-top: 14px; white-space: normal; }
h1 em { font-style: normal; color: var(--gold); }
.hero-copy { font-size: 15px; color: var(--muted-strong); max-width: 61ch; margin: 18px 0 0; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 51px; border-radius: var(--r-pill); padding: 12px 25px;
  font: 700 14px 'Plus Jakarta Sans', sans-serif; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out);
}
.btn.primary { background: var(--gold); color: #0a0a0a; }
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(232, 169, 59, .26); }
.btn.secondary { border-color: var(--line); color: var(--ink); }
.btn.secondary:hover { border-color: var(--ink); }
/* Retour tactile à l'appui : la pression est confirmée par une légère réduction. */
.btn:active, .btn.primary:active, .btn.secondary:active { transform: scale(.97); }
.btn.light { background: var(--ink); color: #090909; }
.btn.light:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(245, 243, 238, .18); }

@media (hover: none), (pointer: coarse) {
  .brand:active img { transform: scale(.985); opacity: .82; }
  .links a:active,
  .nav-space:active,
  .languages a:active,
  .menu-toggle:active,
  .mobile-menu a:active,
  .radio-platforms a:active,
  .story-proof-link:active,
  .text-link:active,
  .offer-route-action:active,
  .collection-format-actions a:active,
  .footer-email:active,
  .footer-row a:active,
  .foot-legal a:active,
  .pm-nav-join:active,
  .members-rating:active,
  .pm-jump a:active,
  .pm-elig-inline:active,
  .pm-free-bridge a:active,
  .pm-support-note a:active,
  .pm-member-link a:active,
  .ll-text-link:active,
  .ll-listen-links a:active,
  .ll-section p a:active {
    transform: translateY(1px) scale(.98);
    opacity: .78;
  }
  .nav-space:active,
  .mobile-menu a:active,
  .pm-support-note a:active,
  .pm-member-link a:active {
    background: rgba(232, 169, 59, .14);
    border-color: rgba(232, 169, 59, .58);
  }
  .menu-toggle:active { color: var(--gold); }
}

.stats {
  display: flex; gap: 12px; margin-top: 30px;
  padding-top: 20px; border-top: 1px solid var(--line);
}
.stats > div { flex: 1; }
.stats b { display: block; font-size: 21px; color: var(--ink); }
.stats span { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

/* Disque du hero. Sur mobile : filigrane absolu, effacé, débordant à droite
   (le `overflow: hidden` de `.hero` le recadre) — coût vertical nul. Il ne
   tourne plus en boucle au chargement : la rotation ne démarre qu'au premier
   défilement. Le visuel reste fixe pour préserver la lecture du logo. */
.hero-art {
  display: block; position: absolute; top: -30px; right: -96px;
  width: 230px; margin: 0; z-index: 0; pointer-events: none;
}
.hero-art img { width: 230px; height: 230px; opacity: .13; box-shadow: none; }

/* Géométrie et rotation communes aux trois disques — cf. --disc-* dans :root. */
.hero-art img, .offers-disc img, .footer-disc img {
  aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: var(--disc-edge);
}
body.hero-spin :is(.hero-art, .offers-disc, .footer-disc) img { animation: var(--disc-spin) linear infinite spin; }

/* --- Sections génériques ------------------------------------------------- */
section { padding: 51px 0; }
/* Sur mobile, la carte Premium se cale juste sous la radio (12 px) au lieu du
   pas de section : radio.pb + disque + 12 = l'espacement d'origine. */
#premium { padding-top: 12px; }

/* --- Comparatif compact Premium / Collection ------------------------------ */
.offer-compare {
  padding: 24px 0 10px;
  border-block: 1px solid var(--line);
  background: #0b0b0e;
}
.compare-head { display: grid; gap: 6px; max-width: 620px; margin-bottom: 16px; }
.compare-head h2 { font-size: clamp(32px, 5vw, 48px); }
.compare-head p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.compare-table-wrap { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(245,243,238,.025); }
.offer-compare-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
.offer-compare-table th, .offer-compare-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.offer-compare-table thead th { color: var(--ink); font-size: 11px; line-height: 1.2; text-transform: uppercase; letter-spacing: .08em; }
.offer-compare-table thead th:not(:first-child) { color: var(--gold); }
.offer-compare-table tbody th { width: 30%; color: var(--muted); font-size: 11px; font-weight: 700; }
.offer-compare-table td { color: var(--muted-strong); line-height: 1.35; }
.offer-compare-table td:nth-child(2) { color: var(--ink); }
.offer-compare-table tr:last-child th, .offer-compare-table tr:last-child td { border-bottom: 0; }
.offer-compare-table td:where(:nth-child(2), :nth-child(3)) { overflow-wrap: anywhere; }

/* --- Premium (carte sur l'accueil) -------------------------------------- */
.premium-card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr; gap: 20px;
  padding: 27px 22px;
  background:
    radial-gradient(520px 340px at 92% 4%, rgba(232, 169, 59, .15), transparent 65%),
    linear-gradient(150deg, #1d1709, #101014 62%);
  border: 1px solid rgba(232, 169, 59, .42); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(245, 243, 238, .045);
}
.premium-card::after {
  content: ""; position: absolute; width: 260px; height: 260px; right: -150px; bottom: -170px;
  border: 1px solid rgba(232, 169, 59, .17); border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 34px rgba(232, 169, 59, .025), 0 0 0 68px rgba(232, 169, 59, .018);
}
.premium-card > * { position: relative; z-index: 1; }
.premium-card h2 { font-size: clamp(42px, 5vw, 63px); margin-top: 16px; }
.premium-card h2 em { font-style: normal; color: var(--gold); }
.price { margin-top: 24px; font-size: 45px; font-weight: 800; line-height: 1.05; }
.price span { font-size: 16px; font-weight: 500; color: var(--muted); }
.renew { display: block; margin-top: 8px; color: var(--gold) !important; font-size: 16px !important; font-weight: 700 !important; }
.price-explainer {
  max-width: 59ch; margin: 16px 0 0; padding-left: 14px;
  border-left: 2px solid var(--gold); color: var(--muted-strong); font-size: 12.5px; line-height: 1.55;
}
.benefits { padding: 0; margin: 27px 0 0; list-style: none; display: grid; gap: 14px; }
.benefits li { position: relative; padding-left: 29px; color: var(--muted-strong); }
.benefits li:before { content: "✓"; position: absolute; left: 0; color: var(--gold); font-weight: 800; }
.premium-side { padding-top: 9px; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 14px; }
/* Disque filigrane à droite de la carte : masqué sur mobile, présent en desktop. */
.premium-disc { display: none; }
.premium-disc img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
body.hero-spin .premium-disc { animation: none; }
.members-line { margin: 0; display: flex; justify-content: flex-start; align-items: center; gap: 12px; text-align: center; color: var(--muted); font-size: 12px; }
.members-line b { color: var(--ink); font-weight: 700; }
.members-rating { color: var(--gold); letter-spacing: 1px; white-space: nowrap; }
.members-rating b { color: var(--muted); letter-spacing: 0; margin-left: 3px; }
.premium-side .btn { width: 100%; }
.note { margin: 0; color: var(--muted); font-size: 12px; text-align: center; }
.note a { color: var(--gold); }

/* --- Dernière sortie ----------------------------------------------------
   Bloc masqué tant que le catalogue n'a rien (data-latest-release[hidden]),
   révélé et piloté par latest-release.js. Présentation « colonne éditoriale »
   hl-* — laissée intacte, réutilisée telle quelle par premium.html. */
.latest-release { padding: 28px 0; }
.latest-progress { margin-top: 14px; max-width: 320px; }
.latest-progress-track { height: 3px; overflow: hidden; border-radius: 4px; background: rgba(245,243,238,.14); }
.latest-progress-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg,var(--gold),#f0c66d); transition: width .2s linear; }
.latest-progress-time { display: flex; justify-content: space-between; margin-top: 6px; color: var(--muted-strong); font-size: 11px; font-variant-numeric: tabular-nums; }
.latest-status { margin: 8px 0 0; color: var(--muted-strong); font-size: 12px; line-height: 1.4; }
.latest-status:empty { display: none; }
.latest-status.is-error { color: #f1b5a9; }

.hl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding: 0 4px; }
.hl-head-l { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.hl-head-r { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.hl-head-r strong { color: var(--gold); font-weight: 800; }
.hl-card { display: grid; grid-template-columns: 3px minmax(0,1fr); gap: 18px; }
.hl-rule { border-radius: 3px; background: linear-gradient(180deg, var(--gold), rgba(232,169,59,.12)); }
.hl-copy { min-width: 0; }
.hl-top { display: flex; align-items: center; gap: 14px; }
.hl-cover { position: relative; width: 88px; height: 88px; flex: 0 0 88px; }
.hl-cover img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-xs, 12px); background: #111; box-shadow: 0 12px 26px rgba(0,0,0,.5), 0 0 0 1px rgba(232,169,59,.3); }
.hl-cover::after { content: ""; position: absolute; inset: -12px; z-index: -1; border-radius: 20px; background: radial-gradient(circle, rgba(232,169,59,.32), transparent 70%); filter: blur(20px); opacity: .5; }
.hl-kind { color: var(--muted-strong); font: 650 11px/1.3 'Plus Jakarta Sans',sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.hl-card h2 { margin: 12px 0 12px; font-size: var(--t-mid); line-height: .96; }
.hl-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hl-controls { display: inline-flex; align-items: center; }
.hl-controls[hidden] { display: none; }
.hl-play { display: inline-flex; align-items: center; gap: 9px; border: 0; cursor: pointer; background: var(--gold); color: #0a0a0a; font: 700 13px/1 'Plus Jakarta Sans',sans-serif; letter-spacing: .03em; padding: 14px 22px; border-radius: 100px; box-shadow: 0 12px 26px rgba(232,169,59,.26); transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.hl-play:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(232,169,59,.34); }
.hl-play:active { transform: scale(.97); }
.hl-play-icon { display: inline-grid; place-items: center; width: 15px; height: 15px; }
.hl-play-icon svg { width: 15px; height: 15px; fill: currentColor; }
.hl-date { margin: 0; color: var(--muted-strong); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 650; font-variant-numeric: tabular-nums; }
.hl-bridge { margin: 16px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; max-width: 60ch; }
.hl-bridge b { color: var(--ink); font-weight: 700; }
.hl-bridge a { color: var(--gold); font-weight: 700; }

/* --- Collection ---------------------------------------------------------- */
.collection { padding-top: 0; }
.head { max-width: 580px; margin-bottom: 28px; }
.head h2 { font-size: clamp(42px, 5vw, 60px); margin-top: 10px; }
.head p { color: var(--muted); margin: 10px 0 0; }
.collection-intro {
  display: grid; grid-template-columns: 1fr;
  gap: 22px; align-items: center; margin-bottom: 28px;
}
.collection-head { margin-bottom: 0; }
.collection-visual {
  position: relative; padding: 16px; overflow: hidden; border-radius: 20px;
  background:
    radial-gradient(360px 250px at 72% 16%, rgba(236, 75, 181, .22), transparent 66%),
    radial-gradient(320px 220px at 10% 82%, rgba(72, 207, 255, .13), transparent 66%),
    linear-gradient(145deg, #181820, #0f0f13 68%);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(245, 243, 238, .06);
}
.collection-visual::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, transparent 72%, rgba(8, 8, 10, .64));
  pointer-events: none;
}
.cover-tile {
  display: block; width: 100%; height: auto; aspect-ratio: 1; min-height: 0;
  object-fit: cover; border-radius: var(--r-xs, 12px); border: 1px solid rgba(245, 243, 238, .14);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .38);
}
.cover-main { grid-area: 1 / 1 / 3 / 3; }
.cover-tile:nth-child(2) { grid-area: 1 / 3 / 2 / 4; }
.cover-tile:nth-child(3) { grid-area: 1 / 4 / 2 / 5; }
.cover-tile:nth-child(4) { grid-area: 2 / 3 / 3 / 4; }
.cover-tile:nth-child(5) { grid-area: 2 / 4 / 3 / 5; }

/* Les formats de livraison se lisent comme un choix éditorial, pas comme deux
   cartes concurrentes : promesse, condition pratique, puis décision. */
.offers { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.offer { padding: 26px 0; }
.offer + .offer { border-top: 1px solid var(--line); }
.offer-summary { min-width: 0; }
.offer-kicker { display: block; margin-bottom: 7px; color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.offer h3 { margin: 0; font-family: 'Plus Jakarta Sans', Impact, sans-serif; font-size: clamp(31px, 8vw, 39px); text-transform: uppercase; letter-spacing: .02em; line-height: .95; }
.offer-summary p { max-width: 48ch; margin: 11px 0 0; color: var(--muted-strong); font-size: 14px; line-height: 1.55; }
.offer-detail { display: grid; gap: 3px; margin: 17px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.offer-detail b { color: var(--ink); font-size: 12px; }
.offer-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 20px; }
.offer-price { flex: 0 0 auto; font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.offer .btn { min-width: 0; padding: 11px 17px; }
.offer-usb { background: linear-gradient(90deg, rgba(232,169,59,.075), transparent 68%); }
.offer-usb .offer-summary, .offer-usb .offer-detail, .offer-usb .offer-foot { margin-inline: 16px; }
.trust { text-align: center; color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 18px 0 0; }
.trust b { color: var(--ink); font-weight: 600; }

/* --- Origine / label ----------------------------------------------------- */
.origin { padding: 4px 0 54px; }
.origin-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; min-height: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(145deg, #181818, #111116);
  box-shadow: var(--shadow-lg);
}
.origin-image { position: relative; min-height: 220px; margin: 0; overflow: hidden; }
.origin-image::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,8,10,.04), var(--panel) 78%);
}
.origin-image img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.62) saturate(.88) contrast(1.04) brightness(.82);
  transition: transform 1s var(--ease-out), filter .5s ease;
}
.origin-card:hover .origin-image img { transform: scale(1.025); filter: grayscale(.35) saturate(1) contrast(1.04) brightness(.88); }
.origin-copy { align-self: center; margin-top: -30px; z-index: 1; padding: 18px 22px 30px; }
.origin-copy h2 { max-width: 10ch; margin-top: 12px; font-size: clamp(38px, 11vw, 50px); }
.origin-copy p { max-width: 45ch; margin: 18px 0 0; color: var(--muted-strong); font-size: 14px; }
.text-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 24px; color: var(--gold); font-weight: 750; text-decoration: none; }
.text-link span { transition: transform .2s var(--ease-out); }
.text-link:hover span { transform: translateX(4px); }

/* --- Avis ---------------------------------------------------------------- */
.reviews { border-block: 1px solid var(--line); padding-block: 40px; }
.review-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 20px; }
.review-head h2 { font-size: var(--t-mid); }
.review-context { max-width: 46ch; margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.stars { color: var(--gold); letter-spacing: 2px; font-size: 14px; }
.stars-note { color: var(--muted); letter-spacing: 0; }
.review-row { display: flex; gap: 16px; overflow: auto; padding: 3px; scrollbar-width: none; }
.review-row::-webkit-scrollbar { display: none; }
.review { flex: 0 0 280px; padding: 21px; background: linear-gradient(145deg, var(--panel-raised), var(--panel)); border: 1px solid var(--line); border-radius: var(--r-sm); }
.review p { margin: 10px 0; color: #dedbd2; font-size: 14px; }
.review small { color: var(--muted); }
.swipe-hint {
  display: block; width: min(118px, 42vw); height: 2px; margin-top: 18px;
  border-radius: 999px; background: linear-gradient(90deg, var(--gold) 0 48%, rgba(245,243,238,.18) 48% 100%);
}

/* --- Newsletter ---------------------------------------------------------- */
.newsletter { text-align: center; }
.newsletter h2 { font-size: clamp(42px, 5vw, 60px); margin-top: 12px; }
.newsletter p { color: var(--muted); margin: 11px auto 0; max-width: 480px; }
.form { display: flex; flex-direction: column; max-width: 560px; margin: 25px auto 0; gap: 10px; }
.form-label { position: absolute; left: -10000px; }
.form input { flex: 1; min-width: 0; padding: 13px 20px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--panel); color: var(--ink); font: inherit; }
.form button { white-space: nowrap; }
.form .btn { width: 100%; }
.form-msg { min-height: 20px; font-size: 12px; color: var(--gold); }
/* Honeypot anti-bot : masqué visuellement, jamais rempli par un humain. */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* `.newsletter .form-privacy` (et non `.form-privacy`) pour battre
   `.newsletter p{max-width:480px;margin:11px auto 0}`. */
.newsletter .form-privacy { max-width: 600px; margin-top: 13px; padding-inline: 8px; font-size: 12.5px; line-height: 1.55; color: #9f9a90; }
.form-privacy a { color: var(--muted-strong); text-underline-offset: 3px; }

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--line);
  padding: 44px 0 calc(30px + env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, rgba(245,243,238,.03), transparent 34%),
    radial-gradient(520px 260px at 88% 100%, rgba(232,169,59,.08), transparent 68%),
    #0a0a0d;
  color: var(--muted-strong); font-size: 13px; line-height: 1.55;
}
.site-footer a { text-decoration: none; }
.footer-disc { position: absolute; z-index: 0; right: -100px; bottom: -170px; width: 300px; height: 300px; margin: 0; pointer-events: none; }
.footer-disc img { width: 300px; height: 300px; opacity: .08; filter: saturate(.78) contrast(1.05); }
.footer-in { position: relative; z-index: 1; display: grid; gap: 24px; }
.footer-eyebrow { display: block; color: var(--gold); font-size: 10.5px; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 12px; }
.footer-lyon { color: var(--gold); }
.footer-say h2 { max-width: 14ch; color: var(--ink); font-size: clamp(32px, 9.4vw, 46px); line-height: .98; text-wrap: balance; }
.footer-say > p { max-width: 58ch; margin: 15px 0 0; color: var(--muted-strong); font-size: 14px; line-height: 1.65; text-wrap: pretty; }
.footer-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 22px; }
.footer-whatsapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 11px 20px; border-radius: var(--r-pill);
  background: var(--ink); color: #0a0a0a; font-weight: 750; font-size: 13.5px;
  transition: transform .18s var(--ease-out), background .18s ease, box-shadow .18s var(--ease-out);
}
.footer-whatsapp:hover { transform: translateY(-2px); background: var(--gold); box-shadow: 0 12px 28px rgba(232,169,59,.18); }
.footer-whatsapp:active { transform: scale(.97); }
.footer-whatsapp svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.footer-email {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 2px;
  color: var(--ink); font-weight: 700; font-size: 13.5px;
  border-bottom: 1px solid rgba(245,243,238,.22);
  transition: color .18s ease, border-color .18s ease;
}
.footer-email:hover { color: var(--gold); border-color: rgba(232,169,59,.58); }
.footer-minimal-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding-top: 2px; }
.footer-minimal-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--muted-strong); font-weight: 700; font-size: 12.5px;
  transition: color .15s ease;
}
.footer-minimal-links a:hover { color: var(--gold); }
.footer-bottom { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid rgba(245,243,238,.10); }
.foot-legal { display: flex; flex-wrap: wrap; gap: 2px 16px; }
.foot-legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 12.5px; transition: color .15s ease; }
.foot-legal a:hover { color: var(--ink); }
.foot-copy { color: var(--muted); font-size: 12.5px; line-height: 1.5; }

/* --- 3. Keyframes + reduced-motion --------------------------------------- */
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .hero-art img, .offers-disc img, .footer-disc img, .premium-disc,
  body.hero-spin :is(.hero-art, .offers-disc, .footer-disc) img { animation: none; }
  .btn { transition: none; }
  .btn.primary:hover, .btn:active, .btn.primary:active, .btn.secondary:active { transform: none; }
  .hl-play { transition: none; }
  .hl-play:hover, .hl-play:active { transform: none; }
  .swipe-hint i { animation: none; }
}

/* ========================================================================== */
/* --- 4. Desktop (min-width: 761px) --------------------------------------- */
/* ========================================================================== */
@media (min-width: 761px) {
  .wrap { width: min(1120px, 100% - 48px); }

  /* Nav */
  .navin { height: 84px; }
  .brand img { height: 74px; }
  .languages { gap: 2px; padding-left: 20px; border-left: 1px solid var(--line); font-size: 12px; }
  .languages a { padding: 0 6px; min-width: 44px; font-size: inherit; }

  /* Hero — le disque redevient l'illustration pleine à droite du texte. */
  .hero { padding: 48px 0 52px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) var(--disc-size); gap: 48px; }
  .hero-art { position: relative; inset: auto; width: var(--disc-size); margin: 0 0 0 auto; z-index: auto; pointer-events: auto; }
  .hero-art img { width: 100%; height: auto; opacity: 1; box-shadow: var(--disc-glow); }
  h1 { font-size: clamp(40px, 4vw, 54px); margin-top: 21px; white-space: nowrap; }
  .hero-copy { font-size: 16px; }
  .stats { gap: 26px; }
  .stats > div { flex: 0 1 auto; }
  .stat-br { display: none; }

  section { padding: 64px 0; }


  .offer-compare { padding: 34px 0 20px; }
  .compare-head { grid-template-columns: auto minmax(0, 1fr); align-items: end; max-width: none; column-gap: 18px; }
  .compare-head .eyebrow { grid-column: 1 / -1; }
  .compare-head h2 { grid-column: 1; }
  .compare-head p { grid-column: 2; max-width: 38ch; justify-self: end; text-align: right; }
  .offer-compare-table { font-size: 13px; }
  .offer-compare-table th, .offer-compare-table td { padding: 13px 16px; }
  .offer-compare-table tbody th { width: 25%; }

  /* Premium */
  #premium { padding-top: 64px; }
  .premium-card { grid-template-columns: 1.2fr .8fr; gap: 48px; padding: clamp(30px, 5vw, 54px); border-radius: var(--r-xl); }
  .premium-disc {
    display: block; align-self: center; width: 168px; height: 168px; margin-bottom: 4px;
    opacity: .15; pointer-events: none;
    -webkit-mask-image: radial-gradient(circle, #000 52%, transparent 78%);
    mask-image: radial-gradient(circle, #000 52%, transparent 78%);
  }
  .members-line { justify-content: center; }
  .price-explainer { font-size: 13px; }

  /* Dernière sortie */
  .latest-release { padding: 12px 0; }
  .hl-head { padding: 0 6px; }
  .hl-card { gap: 24px; }
  .hl-cover { width: 104px; height: 104px; flex-basis: 104px; }

  /* Collection */
  .collection-intro { grid-template-columns: minmax(0, .86fr) minmax(420px, 1fr); gap: clamp(26px, 5vw, 58px); margin-bottom: 30px; }
  .collection-visual { padding: 22px; border-radius: var(--r-lg); }
  .offer { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(200px, .65fr) auto; gap: 28px; align-items: end; padding: 30px 0; }
  .offer-detail { margin: 0 0 3px; }
  .offer-foot { margin: 0; justify-content: flex-end; }
  .offer-usb .offer-summary, .offer-usb .offer-detail, .offer-usb .offer-foot { margin-inline: 22px; }
  .offer .btn { white-space: nowrap; padding: 11px 20px; }

  /* Origine */
  .origin { padding: 28px 0 72px; }
  .origin-card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); min-height: 390px; border-radius: var(--r-xl); flex-direction: row; }
  .origin-image { min-height: 390px; }
  .origin-image::after { background: linear-gradient(90deg, rgba(8,8,10,.06), rgba(19,19,24,.78) 62%, var(--panel)); }
  .origin-copy { padding: clamp(34px, 5vw, 62px) clamp(34px, 5vw, 62px) clamp(34px, 5vw, 62px) clamp(26px, 3.5vw, 44px); margin-top: 0; z-index: auto; }
  .origin-copy h2 { max-width: 9ch; font-size: clamp(40px, 4.7vw, 62px); }
  .origin-copy p { font-size: 15px; }

  /* Avis */
  .reviews { padding-block: 48px; }
  .review-head { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 25px; }

  .swipe-hint { display: none; }

  /* Newsletter */
  .form { flex-direction: row; }
  .form .btn { width: auto; }
  .newsletter .form-privacy { padding-inline: 0; }

  /* Footer */
  .site-footer { padding: 62px 0 42px; }
  .footer-disc { width: 360px; height: 360px; right: -82px; bottom: -168px; }
  .footer-disc img { width: 360px; height: 360px; opacity: .09; }
  .footer-in { grid-template-columns: minmax(0,1fr) auto; gap: 24px 56px; align-items: end; }
  .footer-say { grid-column: 1; }
  .footer-say h2 { max-width: none; font-size: clamp(42px, 4.2vw, 58px); }
  .footer-act { margin-top: 24px; }
  .footer-minimal-links { grid-column: 2; justify-content: flex-end; gap: 4px 22px; padding-bottom: 2px; }
  .footer-bottom { grid-column: 1 / -1; }
  .foot-legal { justify-content: flex-start; }
}

/* ========================================================================== */
/* --- 5. Nav pleine (min-width: 901px) ------------------------------------ */
  /* Entre 761 et 900 px, les cinq entrées ne tiennent pas à côté du logo :
   le burger prend le relais jusqu'à 900 px. */
/* ========================================================================== */
@media (min-width: 1000px) {
  /* Grille `1fr auto 1fr` abandonnée ici : elle imposait aux liens la même
     largeur qu'au bloc de droite, et « PASS PREMIUM » passait à la ligne. En
     flex, chaque bloc prend sa largeur naturelle et le logo reste centré à
     l'absolu. Les libellés du menu inline sont volontairement courts
     (Premium / Collection / 5 titres) ; le burger et le pied de page, eux,
     gardent les noms complets. */
  .navin { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .links { grid-area: auto; display: flex; align-items: center; gap: 15px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .links a { white-space: nowrap; }
  .links a[aria-current="page"] { color: var(--ink); }
  .links a[aria-current="page"]::after { right: 0; }
  .nav-end { grid-area: auto; justify-self: auto; }
  .nav-space { display: inline-flex; }
  .menu-toggle { display: none; }
  .mobile-menu, .mobile-menu.open { display: none; }
}

.offer-compare { padding: 30px 0 18px; background: #0b0b0e; }
.compare-head { max-width: 760px; margin-bottom: 14px; }
.compare-table-wrap { border-inline: 0; border-radius: 0; background: transparent; }
.offer-compare-table th, .offer-compare-table td { padding: 10px 12px; }

@media (max-width: 760px) {
  .radio-catalogue { display: inline; font-size: 9px; letter-spacing: .08em; }
  .choose-path { padding: 34px 0 24px; }
  .choose-head { margin-bottom: 18px; }
  .choose-head p { font-size: 13px; }
  .path-grid { grid-template-columns: 1fr; }
  .path-card, .path-card + .path-card { grid-template-columns: 30px minmax(0, 1fr) 12px; min-height: 98px; padding: 16px 4px 15px 0; border-left: 0; }
  .path-card:hover, .path-card + .path-card:hover { padding-left: 0; }
  .path-number { font-size: 22px; }
  .path-card strong { font-size: 27px; }
  .path-card > span:last-child { font-size: 12px; }
  .path-card::after { right: 4px; bottom: 22px; }
  .offer-compare { padding: 26px 0 12px; }
  .compare-head h2 { font-size: clamp(32px, 9vw, 44px); }
  .offer-compare-table { font-size: 11px; }
  .offer-compare-table th, .offer-compare-table td { padding: 9px 8px; }
  .offer-compare-table thead th { font-size: 9px; letter-spacing: .05em; }
  .offer-compare-table tbody th { font-size: 10px; }
}

/* Parcours validé : orientation éditoriale + passerelle explicative. */
.choose-path { padding: 48px 0 43px; background: #0b0b0e; border-block: 1px solid var(--line); }
.choose-head { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 28px; max-width: none; }
.choose-head h2 { margin-top: 8px; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: clamp(29px, 3.5vw, 43px); font-weight: 650; letter-spacing: -.045em; }
.choose-head h2 em { color: var(--gold); font-family: 'Plus Jakarta Sans', Impact, sans-serif; font-style: normal; text-transform: uppercase; letter-spacing: .015em; }
.choose-head p { max-width: none; margin: 0 0 2px; color: var(--muted); font-size: 12px; line-height: 1.45; white-space: nowrap; }
.path-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.path-card { position: relative; min-height: 145px; padding: 18px 40px 17px 17px; display: grid; grid-template-columns: 1fr; gap: 5px; border: 0; border-radius: 0; background: transparent; color: var(--ink); transition: background .18s ease; }
.path-card + .path-card { border-left: 1px solid var(--line); padding-left: 17px; }
.path-card:hover, .path-card + .path-card:hover { transform: none; padding-left: 17px; border-color: var(--line); background: rgba(245, 243, 238, .04); }
.path-card .path-kicker { grid-column: 1; color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.path-card strong { grid-column: 1; margin-top: -1px; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 14px; font-weight: 720; line-height: 1.2; letter-spacing: .01em; text-transform: none; }
.path-card > span:last-child { grid-column: 1; max-width: 31ch; color: var(--muted); font-size: 11px; line-height: 1.4; }
.path-card::after { content: '↗'; position: absolute; right: 18px; bottom: 17px; width: auto; height: auto; border: 0; color: var(--gold); font-size: 17px; opacity: 1; transform: none; }
.path-card.path-collection, .path-card.path-premium { background: transparent; color: var(--ink); border-color: transparent; }
.path-card.path-collection .path-kicker, .path-card.path-premium .path-kicker { color: var(--gold); }
.path-card.path-collection > span:last-child, .path-card.path-premium > span:last-child { color: var(--muted); }

@media (max-width: 700px) {
  .choose-path { padding: 35px 0 31px; }
  .choose-head { display: block; margin-bottom: 19px; }
  .choose-head h2 { font-size: 31px; }
  .choose-head p { max-width: none; margin-top: 9px; font-size: 11px; white-space: normal; }
  .path-grid { display: block; }
  .path-card, .path-card + .path-card { min-height: 82px; padding: 12px 32px 12px 10px; grid-template-columns: 1fr; gap: 3px; border-left: 0; }
  .path-card + .path-card { border-top: 1px solid var(--line); }
  .path-card:hover, .path-card + .path-card:hover { padding-left: 10px; }
  .path-card strong { font-size: 13px; }
  .path-card > span:last-child { font-size: 10px; }
  .path-card::after { right: 10px; top: 50%; bottom: auto; transform: translateY(-50%); }
}

/* Rythme validé : rapprocher l'orientation du Premium, laisser respirer la Collection. */
@media (min-width: 761px) {
  #premium { padding-top: 28px; }
}
.collection { padding-top: 30px; }
@media (max-width: 760px) {
  .collection { padding-top: 24px; }
}

/* Collection : un objet musical complet, avec deux formats comme choix internes. */
.collection { padding: 28px 0 44px; }
.collection-card {
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid rgba(245,243,238,.14);
  border-radius: var(--r-lg);
  background:
    radial-gradient(560px 360px at 92% 5%, rgba(133,69,168,.18), transparent 64%),
    linear-gradient(145deg,#15141b,#0e0e12 68%);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(245,243,238,.05);
}
.collection-art {
  position: relative;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(420px 360px at 35% 32%, rgba(236,75,181,.16), transparent 66%),
    radial-gradient(320px 260px at 82% 84%, rgba(72,207,255,.14), transparent 66%),
    #12121a;
}
.collection-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(14,14,18,.72));
  pointer-events: none;
}
.collection-art .cover-tile { border-radius: var(--r-xs); border-color: rgba(245,243,238,.16); }
.collection-copy { position: relative; z-index: 1; padding: 28px 22px 25px; }
.collection-copy h2 { margin-top: 11px; font-size: 51px; }
.collection-lede { max-width: 32ch; margin: 16px 0 0; color: var(--muted-strong); font-size: 15px; line-height: 1.5; }
.collection-lede b { color: var(--ink); }
.collection-choice { margin: 28px 0 10px; color: var(--gold); font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.collection-options { border-top: 1px solid var(--line); }
.collection-option {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto 16px;
  align-items: center;
  column-gap: 10px;
  min-height: 104px;
  padding: 16px 2px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: padding .2s var(--ease-out), background .2s ease;
}
.collection-option:hover { padding-left: 12px; background: rgba(245,243,238,.035); }
.option-copy { min-width: 0; }
.option-copy strong { display: block; font: 700 25px/.96 'Plus Jakarta Sans', Impact, sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.option-copy small { display: block; max-width: 23ch; margin-top: 6px; color: var(--muted); font: 500 11px/1.35 'Plus Jakarta Sans', sans-serif; }
.collection-option b { font-size: 22px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.collection-option i { color: var(--gold); font-size: 21px; font-style: normal; text-align: right; }
.collection-trust { margin: 16px 0 0; color: var(--muted); font-size: 11px; }

/* Les deux voies se lisent comme une phrase continue sur petit écran. */
.path-card > .path-text { display: grid; grid-column: 1; gap: 5px; max-width: 31ch; color: var(--ink); font-size: inherit; line-height: inherit; }
.path-heading { display: grid; gap: 3px; }
.path-heading .path-kicker { color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.path-heading strong { margin: 0; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 14px; font-weight: 720; line-height: 1.2; letter-spacing: .01em; text-transform: none; }
.path-copy { color: var(--muted); font-size: 11px; line-height: 1.4; }

@media (max-width: 700px) {
  .path-card > .path-text { display: block; max-width: none; line-height: 1.45; }
  .path-heading, .path-copy { display: inline; }
  .path-heading .path-kicker { margin-right: 6px; }
  .path-heading strong { font-size: 13px; }
  .path-copy { margin-left: 6px; font-size: 10px; }
}

@media (min-width: 761px) {
  .collection { padding: 42px 0 58px; }
  .collection-card { grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); min-height: 465px; border-radius: var(--r-xl); }
  .collection-art { padding: clamp(24px,4vw,48px); }
  .collection-art::after { background: linear-gradient(90deg, transparent 62%, rgba(14,14,18,.72)); }
  .collection-copy { align-self: center; padding: clamp(34px,5vw,62px) clamp(28px,5vw,58px); }
  .collection-copy h2 { font-size: clamp(51px,5.2vw,68px); }
  .collection-option { grid-template-columns: minmax(0,1fr) auto 22px; column-gap: 18px; min-height: 86px; }
  .option-copy strong { font-size: 27px; }
  .option-copy small { max-width: none; font-size: 12px; }
  .collection-option b { font-size: 26px; }
}

/* Choisir une offre : une respiration entre la radio et les deux offres.
   L'ancien format transformait les choix en micro-lignes sur mobile. */
.choose-path {
  position: relative;
  padding: 52px 0 48px;
  border-block: 1px solid var(--line);
  background: #0b0b0e;
}
.choose-head {
  display: block;
  max-width: 37rem;
  margin-bottom: 30px;
}
.choose-head h2 {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(42px, 7.5vw, 64px);
  font-weight: 700;
  letter-spacing: .015em;
  line-height: .9;
  text-transform: uppercase;
}
.choose-head p {
  max-width: 31ch;
  margin: 15px 0 0;
  color: var(--muted-strong);
  font-size: 14px;
  line-height: 1.48;
  white-space: normal;
}
.path-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  border: 0;
}
.path-card,
.path-card + .path-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  min-height: 174px;
  padding: 25px 22px 22px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #111115;
  transition: transform .2s var(--ease-out), background-color .2s ease, border-color .2s ease;
}
.path-card.path-premium {
  background: linear-gradient(135deg, rgba(232,169,59,.13), transparent 62%), #14120d;
  border-color: rgba(232,169,59,.35);
}
.path-card:hover,
.path-card + .path-card:hover {
  padding-left: 22px;
  transform: translateY(-3px);
  background-color: #19191d;
  border-color: rgba(245,243,238,.35);
}
.path-card.path-premium:hover { border-color: var(--gold); }
.path-card::after { display: none; }
.path-card > .path-text {
  display: grid;
  gap: 10px;
  max-width: 27ch;
}
.path-card .path-text strong {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(31px, 3vw, 42px);
  font-weight: 700;
  letter-spacing: .015em;
  line-height: .92;
  text-transform: uppercase;
}
.path-card .path-copy {
  margin: 0;
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.45;
}
.path-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 2px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .03em;
  white-space: nowrap;
}
.path-action svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }

@media (max-width: 700px) {
  .choose-path { padding: 44px 0 40px; }
  .choose-head { margin-bottom: 23px; }
  .choose-head h2 { font-size: 48px; }
  .choose-head p { margin-top: 13px; font-size: 14px; }
  .path-grid { grid-template-columns: 1fr; gap: 10px; }
  .path-card,
  .path-card + .path-card {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 150px;
    padding: 22px 18px 19px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
  }
  .path-card + .path-card { border-top: 1px solid rgba(232,169,59,.35); }
  .path-card:hover,
  .path-card + .path-card:hover { padding-left: 18px; transform: none; }
  .path-card > .path-text { display: grid; gap: 8px; max-width: 25ch; }
  .path-card .path-text strong { font-size: 35px; }
  .path-card .path-copy { font-size: 12px; }
  .path-action { align-self: end; font-size: 10px; }
  .path-action svg { width: 16px; height: 16px; }
}

/* --- Pack découverte + offres : la suite de l'accueil ------------------ */
.gift {
  position: relative;
  overflow: hidden;
  padding: 64px 0;
  background: #11100d;
  border-block: 1px solid rgba(232,169,59,.25);
}
.gift::before {
  content: "";
  position: absolute;
  inset: -30% 42% -34% -20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,169,59,.18), transparent 66%);
  pointer-events: none;
}
.gift::after {
  content: "";
  position: absolute;
  right: max(-84px, calc((100vw - 1120px) / 2 - 138px));
  top: 50%;
  width: clamp(220px, 30vw, 430px);
  aspect-ratio: 1;
  transform: translateY(-50%) rotate(5deg);
  background: url("../covers/i-believe.webp") center / cover no-repeat;
  border-radius: 14px;
  opacity: .105;
  filter: saturate(.8) contrast(1.08);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  pointer-events: none;
}
.gift-grid { position: relative; z-index: 1; display: grid; gap: 34px; }
.gift-copy { max-width: 590px; }
.gift-mark { margin: 0 0 8px; color: var(--gold); font: 700 clamp(64px,14vw,112px)/.72 'Plus Jakarta Sans', sans-serif; letter-spacing: -.03em; }
.gift-copy h2 { font-size: clamp(44px,8vw,72px); }
.gift-copy h2 em { color: var(--gold); font-style: normal; }
.gift-copy > p:not(.gift-mark) { max-width: 46ch; margin: 19px 0 0; color: var(--muted-strong); font-size: 15px; line-height: 1.58; }
.gift-steps { display: flex; flex-wrap: wrap; gap: 7px 20px; margin: 26px 0 0; padding: 0; list-style-position: inside; color: var(--ink); font-size: 12px; font-weight: 700; }
.gift-steps li::marker { color: var(--gold); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; }
.gift-form-wrap { align-self: end; max-width: 540px; }
.gift-form { display: grid; gap: 12px; padding: 24px; background: #17171b; border-radius: var(--r-md); box-shadow: 0 22px 50px rgba(0,0,0,.25); }
.gift-form > label:first-child { color: var(--ink); font-size: 13px; font-weight: 750; }
.gift-form input[type="email"] { width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid rgba(245,243,238,.18); border-radius: 12px; background: #0c0c0f; color: var(--ink); font: inherit; }
.gift-form input[type="email"]::placeholder { color: #9e998f; }
.gift-form .btn { width: 100%; }
.consent { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 10px; align-items: start; color: var(--muted-strong); font-size: 11.5px; line-height: 1.5; }
.consent input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--gold); }
.gift-note, .form-msg { margin: 12px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.gift-note a, .offers-reassurance a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--ink);
  text-underline-offset: 3px;
}
.form-msg:not(:empty) { color: var(--gold); font-weight: 650; }

.offers-overview { padding: 68px 0 58px; }
.offers-heading { max-width: 650px; }
.offers-heading h2 { font-size: clamp(46px,8vw,76px); }
.offers-heading h2 em { color: var(--gold); font-style: normal; }
.offers-heading p { max-width: 48ch; margin: 18px 0 0; color: var(--muted-strong); font-size: 15px; line-height: 1.55; }
/* Une seule composition pour les quatre accès. La lecture est celle d'une
   sélection musicale : une progression nette, pas quatre cartes commerciales. */
.offers-board { margin-top: 38px; border-top: 1px solid var(--line); }
/* Les quatre points partagent le même gabarit : même bloc image, mêmes
   colonnes, mêmes espacements. `grid-auto-rows: 1fr` (posé au palier ≥ 761 px)
   leur donne en plus une hauteur strictement identique. */
.offers-route-list { display: grid; grid-auto-rows: 1fr; margin: 0; padding: 0; list-style: none; }
.offer-route {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) minmax(110px, .34fr) minmax(170px, .62fr);
  gap: 20px;
  align-items: center;
  min-height: 144px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  transition: background-color .22s var(--ease-out), padding-inline .22s var(--ease-out);
}
.offer-route:hover { background: rgba(245,243,238,.025); padding-inline: 12px; }
.offer-route-index { align-self: stretch; display: grid; align-content: center; gap: 5px; border-right: 1px solid rgba(232,169,59,.3); }
.offer-route-index b { color: var(--gold); font: 700 26px/.85 'Plus Jakarta Sans', sans-serif; letter-spacing: .03em; }
.offer-route-index span { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.offer-route-main h3 { margin: 0; font: 700 clamp(27px,3vw,40px)/.92 'Plus Jakarta Sans', sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.offer-route-main p { max-width: 44ch; margin: 9px 0 0; color: var(--muted-strong); font-size: 12.5px; line-height: 1.5; }
.offer-route-meta { margin: 0; text-align: right; font-size: 11px; line-height: 1.4; }
.offer-route-meta b, .offer-route-meta span { display: block; }
.offer-route-meta b { color: var(--ink); font-size: 13px; white-space: nowrap; }
.offer-route-meta span { margin-top: 4px; color: var(--muted); }
.offer-route-action {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid rgba(245,243,238,.25);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s var(--ease-out), border-color .18s var(--ease-out), background-color .18s var(--ease-out), transform .18s var(--ease-out);
}
.offer-route-action:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-1px); }
.offer-route-action:active { transform: scale(.98); }
.collection-format-actions { justify-self: end; display: grid; gap: 7px; width: 100%; }
.collection-format-actions a {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  column-gap: 10px;
  align-items: baseline;
  min-height: 38px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(245,243,238,.22);
  color: var(--ink);
  text-decoration: none;
  transition: color .18s var(--ease-out), border-color .18s var(--ease-out), transform .18s var(--ease-out);
}
.collection-format-actions a:hover { color: var(--gold); border-color: var(--gold); transform: translateX(3px); }
.collection-format-actions b { font-size: 11px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.collection-format-actions span { color: var(--muted); font-size: 10px; text-align: right; white-space: nowrap; }
.offer-route-premium { background: linear-gradient(90deg, rgba(232,169,59,.1), transparent 58%); }
.offer-route-premium:hover { background: linear-gradient(90deg, rgba(232,169,59,.15), transparent 62%); }
.offer-route-premium .offer-route-action { border-color: var(--gold); background: var(--gold); color: #0a0a0a; }
.offer-route-premium .offer-route-action:hover { background: #f0bf61; color: #0a0a0a; }
.offers-reassurance { margin: 16px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }

@media (min-width: 761px) {
  .gift { padding: 82px 0; }
  .gift-grid { grid-template-columns: minmax(0,1.1fr) minmax(390px,.9fr); gap: clamp(44px,8vw,120px); align-items: center; }
  .gift-form { padding: 28px; }
  .offers-overview { padding: 86px 0 70px; }
}

@media (max-width: 760px) {
  .gift { padding: 54px 0; }
  .gift::after {
    right: -112px;
    top: 110px;
    width: 240px;
    opacity: .08;
  }
  .gift-form { padding: 20px; }
  .gift-steps { display: grid; gap: 8px; }
  .offers-overview { padding: 56px 0 50px; }
  .offers-board { margin-top: 29px; }
  .offer-route { grid-template-columns: 43px minmax(0,1fr); gap: 13px; min-height: 0; padding: 23px 0; }
  .offer-route:hover { padding-inline: 0; background: transparent; }
  .offer-route-index { grid-row: 1 / span 3; align-self: stretch; align-content: start; padding-top: 3px; }
  .offer-route-index b { font-size: 23px; }
  .offer-route-main, .offer-route-meta, .offer-route-action, .collection-format-actions { grid-column: 2; }
  .offer-route-main h3 { font-size: 31px; }
  .offer-route-main p { max-width: 33ch; margin-top: 8px; font-size: 12px; }
  .offer-route-meta { margin-top: 12px; text-align: left; }
  .offer-route-meta b, .offer-route-meta span { display: inline; }
  .offer-route-meta span { margin: 0 0 0 8px; }
  .offer-route-action { justify-self: start; margin-top: 14px; min-height: 39px; }
  .collection-format-actions { justify-self: stretch; margin-top: 15px; }
  .collection-format-actions a { min-height: 42px; }
  .collection-format-actions b { font-size: 10.5px; }
  .collection-format-actions span { font-size: 9.5px; }
}

/* Ajustements accueil mobile — septembre 2026.
   Le pack de 5 titres est une porte d'entrée, pas l'argument principal : il est
   calibré comme une section SECONDAIRE (titre au niveau des sous-sections, pas
   au niveau du hero) pour ne pas peser autant que « Choisis comment la musique
   reste » qui la suit. Toucher à ces valeurs, c'est rejouer cette hiérarchie. */
.gift { padding: 24px 0 28px; }
.gift::before {
  z-index: 0;
  width: 300px;
  height: 300px;
  inset: 64px auto auto -168px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,169,59,.2), transparent 68%);
}
.gift-grid { position: relative; z-index: 1; gap: 17px; }
.gift-form-wrap { max-width: none; }
.gift-pack-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 15px;
  padding-inline: 1px;
}
.gift-pack-strip img {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(245,243,238,.18);
  box-shadow: 0 10px 22px rgba(0,0,0,.42);
}
.gift-mark {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--gold);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .16em;
  line-height: 1.1;
  text-transform: uppercase;
}
.gift-mark b {
  font: 700 34px/.72 'Plus Jakarta Sans', Impact, sans-serif;
  letter-spacing: -.01em;
}
.gift-copy h2 {
  max-width: 14ch;
  font-size: clamp(31px, 9vw, 39px);
  line-height: .9;
  text-wrap: balance;
}
.gift-copy > p:not(.gift-mark) {
  max-width: 34ch;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.46;
}
.gift-tracklist {
  display: grid;
  gap: 0;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.gift-track {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 37px;
  padding: 5px 0;
  border-top: 1px solid rgba(245,243,238,.1);
}
.gift-track:last-child { border-bottom: 1px solid rgba(245,243,238,.1); }
.gift-track img {
  width: 31px;
  height: 31px;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid rgba(245,243,238,.16);
}
.gift-track strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.gift-track small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.15;
}
.gift-track > b {
  color: var(--gold);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}
/* Version « mini-set » validée : le pack offert montre d'abord le contenu réel
   du ZIP Cloudflare, puis le formulaire garde le geste rapide. */
.gift-form {
  position: relative;
  gap: 9px;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.gift-form > label:first-child {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.gift-form input[type="email"] {
  min-height: 51px;
  transition: border-color .18s var(--ease-out), background-color .18s var(--ease-out);
}
.gift-form input[type="email"]:focus {
  border-color: rgba(232,169,59,.65);
  background: #101014;
}
.gift-form .btn {
  min-height: 53px;
  box-shadow: 0 13px 28px rgba(232,169,59,.25);
}
.consent {
  font-size: 10.5px;
  line-height: 1.38;
}
.gift-note {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 9px;
  margin-top: 11px;
  padding-inline: 3px;
  font-size: 10.5px;
  line-height: 1.35;
  text-align: left;
}
.gift-note span + span::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 8px 2px 0;
  border-radius: 50%;
  background: rgba(232,169,59,.7);
}

.offers-overview {
  padding: 0 0 40px;
}

/* --- Mur de pochettes : décor partagé (accueil + CTA de la page Premium) ----
   De vraies pochettes du catalogue, inclinées, assombries et masquées en
   dégradé. C'est le catalogue lui-même qui sert de fond — pas une texture
   décorative. Toujours `aria-hidden`, toujours en `loading="lazy"`. */
.cover-wall {
  position: absolute;
  z-index: 0;
  inset: -14% -12% auto -12%;
  height: 132%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
  transform: rotate(-5deg);
  opacity: .22;
  pointer-events: none;
  /* Un seul dégradé de masque : le mur traverse toute la largeur et s'éteint en
     haut et en bas, sinon `overflow: hidden` coupe les pochettes net. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 17%, #000 70%, transparent 99%);
          mask-image: linear-gradient(180deg, transparent 0, #000 17%, #000 70%, transparent 99%);
}
.cover-wall img {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  /* Désaturées : le mur doit se lire comme une texture, pas comme une galerie
     qui se dispute l'attention avec le titre posé devant. */
  filter: saturate(.7) brightness(.92);
}

/* Le bandeau qui ouvre « Choisis comment la musique reste ». Avant, cette
   section commençait sur du noir plat : un titre, un paragraphe, rien d'autre.
   Le bandeau porte le mur de pochettes, la lueur ambrée et le disque. */
.offers-band {
  position: relative;
  overflow: hidden;
  padding: 34px 0 30px;
  background:
    radial-gradient(140% 100% at 14% 0%, rgba(232,169,59,.17), transparent 58%),
    linear-gradient(180deg, #131318, var(--bg) 88%);
  border-block: 1px solid var(--line);
}
/* Voile de contraste : posé APRÈS le mur mais avant le texte (qui porte un
   z-index). Sans lui, les pochettes passent devant les lettres. */
.offers-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,8,10,.7), rgba(8,8,10,.88) 62%, var(--bg));
  pointer-events: none;
}
/* Le disque est traité comme celui du hero et celui du footer : un FILIGRANE
   hors cadre, jamais un objet net. Il déborde ici du bord GAUCHE de l'écran —
   miroir du hero (haut-droite) et du footer (bas-droite). Il est donc enfant
   direct de `.offers-band` (pleine largeur) et non de `.wrap` : dans `.wrap`
   il ne pourrait déborder que de la colonne de contenu.
   Le texte, lui, est calé complètement À DROITE : c'est ce contraste avec la
   section du dessus (texte à gauche, formulaire à droite) qui donne son rythme
   à l'enchaînement.
   z-index: 1 → le disque passe DEVANT le voile de contraste (sinon il était
   noyé sous les 70-88 % de noir et ne se voyait presque pas) ; le texte, lui,
   monte à z-index: 2 pour rester au-dessus. */
.offers-disc {
  position: absolute;
  z-index: 1;
  left: -110px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 320px;
  height: 320px;
  margin: 0;
  pointer-events: none;
  /* Halo ambré derrière le disque : il est ÉCLAIRÉ, il ne se lit plus comme
     une gommette plate posée sur du noir. La lueur reste douce et large. */
  border-radius: 50%;
  box-shadow: 0 0 70px 6px rgba(232, 169, 59, .22);
}
.offers-disc img {
  display: block;
  width: 320px;
  height: 320px;
  opacity: .26;
  box-shadow: none;
}
.offers-heading {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: end;
  text-align: right;
  max-width: none;
}
.offers-heading .eyebrow {
  margin-bottom: 7px;
  font-size: 10px;
  letter-spacing: .18em;
}
.offers-heading h2 {
  max-width: 11ch;
  font-size: var(--t-major);
  text-wrap: balance;
}
.offers-heading p {
  max-width: 24ch;
  margin-top: 14px;
  font-size: 13.5px;
}
.offers-board {
  margin-top: 24px;
  border-top: 0;
}
.offer-route {
  position: relative;
  grid-template-columns: 42px 74px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  align-content: start;
  min-height: 0;
  padding: 18px 0;
}
.offer-route-index {
  grid-row: 1 / span 3;
  align-content: start;
  padding-top: 2px;
}
.offer-route-index b {
  font-size: 23px;
}
.offer-route-index span {
  max-width: 42px;
  overflow-wrap: anywhere;
  font-size: 8px;
  line-height: 1.15;
}
/* Les pochettes ne sont plus posées dans une boîte grise : elles se détachent
   du fond noir (halo ambré diffus + ombre portée franche + léger éventail).
   `grid-row: 1 / -1` + `align-self: center` avec `align-content: center` sur la
   ligne : le bloc image tombe EXACTEMENT à la même hauteur pour les 4 points,
   quelle que soit la longueur du texte à droite. */
.offer-route-visual {
  position: absolute;
  left: 54px;            /* colonne d'index (42) + gouttière (12) */
  top: 18px;             /* = padding haut de la ligne : les quatre pochettes
                            sont alignées sur le haut du titre, pas centrées */
  width: 74px;
  height: 74px;
  margin: 0;
  background: none;
}
.offer-route-visual::before {
  content: "";
  position: absolute;
  inset: -26% -30%;
  background: radial-gradient(closest-side, rgba(232,169,59,.22), transparent 74%);
  pointer-events: none;
}
.offer-route-visual img {
  position: absolute;
  inset: 0;
  width: 74px;
  height: 74px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(245,243,238,.24);
  box-shadow: 0 12px 22px rgba(0,0,0,.62), 0 2px 5px rgba(0,0,0,.5);
}
.offer-route-visual img:first-child { transform: rotate(-4deg); }
.offer-route-visual img:only-child { transform: none; }
.offer-route-visual img:nth-child(2) {
  inset: 7px auto auto 13px;
  width: 61px;
  height: 61px;
  transform: rotate(5deg);
}
.offer-route-visual img:nth-child(3) {
  inset: 15px auto auto 25px;
  width: 51px;
  height: 51px;
  transform: rotate(12deg);
}
.offer-route-main,
.offer-route-meta,
.offer-route-action,
.collection-format-actions {
  grid-column: 3;
}
.offer-route-main h3 {
  font-size: 29px;
}
.offer-route-main p {
  max-width: 28ch;
  font-size: 11.5px;
}
.offer-route-meta {
  margin-top: 6px;
}
.offer-route-action {
  min-height: 38px;
  margin-top: 10px;
}
.offer-route-premium {
  margin-inline: calc((100vw - 100%) / -2);
  padding-inline: calc((100vw - 100%) / 2);
  background:
    radial-gradient(220px 130px at 0% 50%, rgba(232,169,59,.22), transparent 72%),
    linear-gradient(90deg, rgba(232,169,59,.1), transparent 65%);
}
.offer-route-premium:hover {
  background:
    radial-gradient(220px 130px at 0% 50%, rgba(232,169,59,.24), transparent 72%),
    linear-gradient(90deg, rgba(232,169,59,.12), transparent 65%);
}
/* Mobile : les deux formats deviennent deux pastilles côte à côte, à la même
   hauteur que le bouton unique des trois autres points — c'est ce qui permet
   aux quatre lignes d'occuper exactement la même place. Le détail (`small`)
   n'apparaît qu'à partir de 761 px, où la ligne a la place de le porter. */
.collection-format-actions {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.collection-format-actions a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3px 6px;
  min-width: 0;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(232,169,59,.45);
  border-radius: var(--r-pill);
  background: rgba(232,169,59,.09);
  text-align: center;
}
.collection-format-actions a:hover {
  border-color: var(--gold);
  background: rgba(232,169,59,.17);
  color: var(--ink);
}
.collection-format-actions a:hover {
  transform: none;
  background: rgba(245,243,238,.055);
}
.collection-format-actions b {
  font-size: 11px;
  line-height: 1.2;
  white-space: normal;
}
.collection-format-actions span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
}
/* Sous 350 px (iPhone SE 1re gén.), deux pastilles côte à côte ne tiennent plus
   la ligne « ZIP instantané » : elles repassent l'une sous l'autre. */
@media (max-width: 349px) {
  .collection-format-actions { grid-template-columns: minmax(0, 1fr); gap: 7px; }
}
.collection-format-actions small {
  display: none;
  max-width: none;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
}
.offers-reassurance {
  margin-top: 14px;
  font-size: 10.5px;
}

@media (min-width: 761px) {
  .gift { padding: 54px 0 50px; }
  .gift-form {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 11px;
    margin-top: 0;
  }
  .gift-form input[type="email"] { min-height: 54px; }
  .gift-form .btn { width: 100%; min-height: 54px; padding-inline: 26px; }
  .consent { max-width: 54ch; }
  .gift-grid { grid-template-columns: minmax(0, .96fr) minmax(360px, .72fr); gap: clamp(44px, 7vw, 96px); align-items: end; }
  .gift-copy { max-width: 590px; }
  .gift-pack-strip { max-width: 440px; }
  .gift-copy h2 {
    max-width: 12ch;
    font-size: clamp(44px, 5.1vw, 62px);
  }
  .gift-mark { font-size: 10px; }
  .gift-mark b { font-size: 34px; }
  .gift-note { max-width: 54ch; }
  .offers-disc { left: -120px; width: 470px; height: 470px; box-shadow: 0 0 96px 10px rgba(232, 169, 59, .2); }
  .offers-disc img { width: 470px; height: 470px; }
  .offers-heading .eyebrow {
    font-size: 11px;
    letter-spacing: .2em;
    margin-bottom: 10px;
  }
  .offers-heading h2 { max-width: 15ch; }
  .offers-heading p {
    max-width: 44ch;
    margin-top: 14px;
    font-size: 15px;
  }
  .collection-format-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    margin-top: 0;
  }
  .collection-format-actions a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    row-gap: 2px;
    min-height: 46px;
    padding: 9px 14px;
    border-radius: 12px;
    text-align: left;
  }
  .collection-format-actions b {
    font-size: 12px;
  }
  .collection-format-actions span {
    font-size: 13px;
    text-align: right;
  }
  .collection-format-actions small {
    display: block;
    grid-column: 1 / -1;
    max-width: 32ch;
  }
  .offers-overview {
    padding: 0 0 62px;
  }
  .offers-band {
    padding: 62px 0 52px;
  }
  .cover-wall {
    grid-template-columns: repeat(10, 1fr);
    gap: 12px;
    opacity: .38;
  }
  .offer-route {
    grid-template-columns: 62px 112px minmax(0, 1fr) minmax(110px, .34fr) minmax(170px, .62fr);
    gap: 20px;
    min-height: 144px;
  }
  .offer-route-index {
    grid-row: auto;
    align-content: center;
  }
  .offer-route-index span {
    max-width: none;
    font-size: 9px;
  }
  .offer-route-visual {
    position: relative;
    left: auto;
    top: auto;
    align-self: start;
    grid-column: auto;
    grid-row: auto;
    width: 112px;
    height: 96px;
  }
  .offer-route-visual img {
    width: 86px;
    height: 86px;
  }
  .offer-route-visual img:nth-child(2) {
    left: 24px;
    top: 5px;
    width: 78px;
    height: 78px;
  }
  .offer-route-visual img:nth-child(3) {
    left: 48px;
    top: 16px;
    width: 66px;
    height: 66px;
  }
  .offer-route-main,
  .offer-route-meta,
  .offer-route-action,
  .collection-format-actions {
    grid-column: auto;
  }
  .offer-route-premium {
    margin-inline: calc((100vw - 100%) / -2);
    padding-inline: calc((100vw - 100%) / 2);
  }
}

/* --- Accueil : deux parcours distincts, pensé mobile d’abord ------------ */
/* Les nouveaux blocs réutilisent les variables, les pochettes et les matières
   du site. Leur ordre dans le HTML est l'ordre de lecture mobile : découvrir,
   preuves, puis soutien. */
.hero .actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
.hero .actions .btn { width: 100%; }
.hero .actions .btn span { font-size: 12px; font-weight: 600; }

.radio-platforms {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  margin-top: 14px;
}
.radio-platforms a {
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 8px 6px; border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--muted-strong); font-size: 11px; font-weight: 700; text-align: center;
  text-decoration: none; transition: background-color .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out);
}
.radio-platforms a:active { transform: scale(.97); }

.gift-form #firstName {
  width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid rgba(245,243,238,.18);
  border-radius: 12px; background: #0c0c0f; color: var(--ink); font: inherit;
}
.gift-form #firstName::placeholder { color: #9e998f; }
.gift-form #firstName:focus { border-color: var(--gold); outline: 0; }

.story-proof { padding: 52px 0; border-top: 1px solid var(--line); background: var(--panel-warm); }
.story-proof-grid { display: grid; gap: 28px; }
.story-proof h2 { max-width: 11ch; font-size: var(--t-mid); }
.story-proof p { max-width: 47ch; margin: 16px 0 0; color: var(--muted-strong); font-size: 14px; line-height: 1.65; }
.story-proof-link {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 18px;
  color: var(--gold); font-size: 13px; font-weight: 800; text-underline-offset: 4px;
}
.story-proof-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.story-proof-facts div { min-width: 0; padding-top: 13px; border-top: 1px solid rgba(232,169,59,.34); }
.story-proof-facts dt { font-family: 'Plus Jakarta Sans', Impact, sans-serif; font-size: clamp(24px, 7vw, 34px); line-height: .95; text-transform: uppercase; }
.story-proof-facts dd { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.28; text-transform: uppercase; letter-spacing: .06em; }

.offers-heading { justify-items: start; text-align: left; }
.offers-heading h2 { max-width: 12ch; }
.offers-heading p { max-width: 28ch; }
.support-offer-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.support-offer {
  display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 16px;
  padding: 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel);
}
.support-offer-usb {
  grid-template-columns: 1fr; gap: 18px; padding: 22px;
  border-color: rgba(232,169,59,.55);
  background: radial-gradient(330px 180px at 100% 0, rgba(232,169,59,.16), transparent 70%), var(--panel-warm);
  box-shadow: 0 20px 48px rgba(0,0,0,.28);
}
.support-offer-visual { position: relative; width: 82px; height: 82px; margin: 0; }
.support-offer-visual::before { content: ""; position: absolute; inset: -18px; border-radius: 50%; background: radial-gradient(circle, rgba(232,169,59,.18), transparent 70%); }
.support-offer-visual img { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; box-shadow: 0 10px 24px rgba(0,0,0,.42); }
.support-offer-usb .support-offer-visual { width: 190px; height: 138px; }
.support-offer-usb-visual { overflow: visible; }
.support-offer-usb-visual::before {
  inset: -24px -30px; border-radius: 44%;
  background: radial-gradient(ellipse, rgba(232,169,59,.24), transparent 68%);
}
.usb-package {
  position: absolute; z-index: 1; left: 5px; top: 7px; width: 102px; aspect-ratio: .78;
  display: block; overflow: hidden; border: 1px solid rgba(232,169,59,.8); border-radius: 7px;
  background: #17111e; box-shadow: 10px 12px 18px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.13);
  transform: perspective(420px) rotateY(12deg) rotateZ(-6deg);
}
.usb-package::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.24), transparent 23% 68%, rgba(232,169,59,.18));
  mix-blend-mode: screen;
}
.usb-package img {
  width: 100%; height: 100%; object-fit: cover; object-position: 49% 48%; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; filter: saturate(.78) contrast(1.13) brightness(.82);
}
.usb-key {
  position: absolute !important; z-index: 2; top: 17px; right: -19px; width: 128px !important; height: auto !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  mix-blend-mode: multiply; filter: contrast(1.22) brightness(.89) drop-shadow(5px 10px 9px rgba(0,0,0,.55));
  transform: rotate(-24deg); transform-origin: center;
}
.support-offer-covers img { position: absolute; inset: 0; }
.support-offer-covers img:last-child { width: 68px; height: 68px; inset: auto -10px -7px auto; transform: rotate(7deg); }
.support-offer-copy h3 { margin: 0; font-family: 'Plus Jakarta Sans', Impact, sans-serif; font-size: 29px; line-height: .94; text-transform: uppercase; }
.support-offer-usb .support-offer-copy h3 { font-size: 38px; }
.support-offer-copy p { margin: 8px 0 0; color: var(--muted-strong); font-size: 12.5px; line-height: 1.5; }
.support-offer-price { grid-column: 2; display: flex; align-items: baseline; gap: 8px; margin: -7px 0 0; }
.support-offer-usb .support-offer-price { grid-column: auto; margin: 0; }
.support-offer-price b { color: var(--gold); font-family: 'Plus Jakarta Sans', Impact, sans-serif; font-size: 28px; line-height: 1; }
.support-offer-price span { color: var(--muted); font-size: 11px; }
.support-offer-action {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 11px 16px; border: 1px solid rgba(232,169,59,.55); border-radius: var(--r-pill);
  color: var(--ink); font-size: 13px; font-weight: 800; text-align: center; text-decoration: none;
  transition: background-color .18s var(--ease-out), color .18s var(--ease-out), transform .18s var(--ease-out);
}
.support-offer-usb .support-offer-action { background: var(--gold); border-color: var(--gold); color: #08080a; }
.support-offer-action:active { transform: scale(.97); }

@media (hover: hover) and (pointer: fine) {
  .radio-platforms a:hover { background: rgba(245,243,238,.06); border-color: rgba(232,169,59,.56); color: var(--ink); }
  .support-offer-action:hover { background: rgba(232,169,59,.14); border-color: var(--gold); }
  .support-offer-usb .support-offer-action:hover { background: #f0bb5d; }
}

@media (min-width: 761px) {
  .hero .actions { display: flex; flex-direction: row; }
  .hero .actions .btn { width: auto; }
  .radio-platforms { width: min(100%, 480px); grid-template-columns: repeat(3, 1fr); }
  .story-proof { padding: 76px 0; }
  .story-proof-grid { grid-template-columns: minmax(0, 1.1fr) minmax(330px, .9fr); align-items: end; gap: clamp(44px, 8vw, 120px); }
  .story-proof-facts { gap: 18px; }
  .offers-heading { justify-items: end; text-align: right; }
  .offers-heading h2 { max-width: 17ch; }
  .offers-heading p { max-width: 42ch; }
  .support-offer-list { grid-template-columns: 1.25fr .9fr .9fr; gap: 16px; align-items: stretch; }
  .support-offer { grid-template-columns: 1fr; align-content: start; padding: 24px; }
  .support-offer-usb { padding: 30px; }
  .support-offer-visual { width: 104px; height: 104px; }
  .support-offer-usb .support-offer-visual { width: 224px; height: 160px; }
  .usb-package { width: 120px; top: 10px; left: 8px; }
  .usb-key { top: 17px; right: -18px; width: 154px !important; }
  .support-offer-price { grid-column: auto; margin: 20px 0 0; }
.support-offer-action { margin-top: auto; }
}

/* --- Finition éditoriale : histoire et objets de collection ------------- */
/* Cette passe met les visuels produits au même format carré. La clé garde les
   deux photos fournies, mais devient un véritable objet dans une vitrine plutôt
   qu'une image qui flotte au-dessus de la carte. */
.story-proof {
  padding: 62px 0;
  background:
    radial-gradient(340px 240px at 100% 0, rgba(232,169,59,.11), transparent 76%),
    var(--panel-warm);
}
.story-proof-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
.story-proof h2 { max-width: 10ch; font-size: clamp(38px, 10.4vw, 48px); line-height: .92; }
.story-proof h2 em { color: var(--gold); font-style: normal; }
.story-proof p { max-width: 40ch; margin-top: 18px; font-size: 15px; line-height: 1.62; }
.story-proof-facts {
  grid-template-columns: 1fr; gap: 0; border-block: 1px solid rgba(232,169,59,.36);
}
.story-proof-facts div {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(72px, .68fr); align-items: center;
  gap: 12px; min-height: 72px; padding: 12px 0; border: 0;
}
.story-proof-facts div + div { border-top: 1px solid rgba(245,243,238,.1); }
.story-proof-facts dt { display: flex; align-items: baseline; gap: 8px; font-size: inherit; line-height: 1; }
.story-proof-facts dt b { color: var(--gold); font-family: 'Plus Jakarta Sans', Impact, sans-serif; font-size: 42px; font-weight: 400; letter-spacing: .02em; }
.story-proof-facts dt span { font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.story-proof-facts dd { margin: 0; color: var(--muted-strong); font-size: 10px; line-height: 1.28; text-align: right; }

.offers-heading { justify-items: end; text-align: right; }
.offers-heading h2, .offers-heading p { margin-left: auto; }
.offers-heading h2 { max-width: 13ch; }
.offers-heading p { max-width: 30ch; }
.offers-disc { left: -110px; width: 320px; height: 320px; border-radius: 50%; box-shadow: 0 0 70px 6px rgba(232,169,59,.22); transform: translateY(-50%); }
.offers-disc img { width: 320px; height: 320px; opacity: .26; border: var(--disc-edge); border-radius: 50%; }
body.hero-spin .offers-disc img { animation: none; }

.support-offer-list { gap: 16px; }
.support-offer,
.support-offer-usb {
  grid-template-columns: 106px minmax(0, 1fr); gap: 14px; padding: 16px;
  border-color: var(--line); background: var(--panel); box-shadow: none;
}
.support-offer-usb { border-color: rgba(232,169,59,.48); background: linear-gradient(135deg, rgba(232,169,59,.08), transparent 52%), var(--panel-warm); }
.support-offer-visual,
.support-offer-usb .support-offer-visual { width: 106px; height: 106px; overflow: hidden; border-radius: var(--r-sm); background: #0a0a0d; }
.support-offer-visual::before { inset: 0; border-radius: inherit; background: linear-gradient(140deg, rgba(255,255,255,.1), transparent 42%, rgba(232,169,59,.12)); z-index: 2; pointer-events: none; }
.support-offer-visual img { border-radius: inherit; box-shadow: none; }
.support-offer-usb-visual::before { inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(232,169,59,.14), transparent 52%, rgba(0,0,0,.16)); }
.support-offer-usb-visual::after { content: none; }
.support-offer-usb-visual img { filter: saturate(.96) contrast(1.04) brightness(.9); }
.support-offer-covers { display: grid; grid-template-columns: 1.14fr .86fr; grid-template-rows: 1fr 1fr; gap: 3px; padding: 3px; background: #09090d; }
.support-offer-covers::before { z-index: 3; }
.support-offer-covers img { position: relative; inset: auto; width: 100%; height: 100%; min-width: 0; object-fit: cover; filter: saturate(.92) contrast(1.06) brightness(.86); }
.support-offer-covers img:first-child { grid-row: 1 / -1; }
.support-offer-covers img:last-child { width: 100%; height: 100%; inset: auto; transform: none; }
.support-offer-cover img { filter: saturate(.92) contrast(1.06) brightness(.84); }
.support-offer-copy { align-self: center; }
.support-offer-copy h3, .support-offer-usb .support-offer-copy h3 { font-size: 30px; }
.support-offer-copy p { margin-top: 7px; font-size: 12px; }
.offer-flag { display: inline-block; margin-bottom: 7px; color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.support-offer-price, .support-offer-usb .support-offer-price { grid-column: 2; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "kicker kicker" "price note"; align-items: end; column-gap: 8px; row-gap: 3px; margin: -4px 0 0; }
.support-offer-price .price-kicker { grid-area: kicker; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.support-offer-price b { grid-area: price; font-size: 34px; }
.support-offer-price small { grid-area: note; align-self: center; padding-bottom: 0; color: var(--muted-strong); font-size: 10px; line-height: 1.15; }
.support-offer-details { grid-column: 1 / -1; border-top: 1px solid rgba(245,243,238,.1); border-bottom: 1px solid rgba(245,243,238,.1); }
.support-offer-details summary { display: flex; align-items: center; min-height: 44px; color: var(--muted-strong); font-size: 12px; font-weight: 750; cursor: pointer; list-style: none; }
.support-offer-details summary::-webkit-details-marker { display: none; }
.support-offer-details summary::after { content: "+"; margin-left: auto; color: var(--gold); font-size: 20px; font-weight: 400; }
.support-offer-details[open] summary::after { content: "−"; }
.support-offer-details ul { display: grid; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.support-offer-details li { display: flex; gap: 8px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.support-offer-details li::before { content: ""; flex: 0 0 5px; width: 5px; height: 5px; margin-top: .48em; border-radius: 50%; background: var(--gold); }
.support-offer-action { grid-column: 1 / -1; }
.support-offer-usb .support-offer-action { border-color: rgba(232,169,59,.55); background: transparent; color: var(--ink); }
.support-offer-premium { position: relative; border-color: rgba(232,169,59,.72); background: radial-gradient(160px 120px at 100% 0, rgba(232,169,59,.19), transparent 74%), linear-gradient(145deg, rgba(245,243,238,.045), transparent 60%), var(--panel-warm); box-shadow: 0 16px 34px rgba(0,0,0,.23); }
.support-offer-premium .support-offer-visual { border: 1px solid rgba(232,169,59,.35); }
.support-offer-premium .offer-flag { color: #f4ca78; }
.support-offer-premium .support-offer-price b { color: var(--ink); }
.support-offer-premium .support-offer-action { border-color: var(--gold); background: var(--gold); color: #09090b; }

@media (min-width: 761px) {
  .story-proof-grid { grid-template-columns: minmax(0, 1fr); }
  .offers-disc { left: -120px; width: 470px; height: 470px; }
  .offers-disc img { width: 470px; height: 470px; }
  .support-offer-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .support-offer,
  .support-offer-usb { grid-template-columns: 1fr; gap: 18px; padding: 22px; }
  .support-offer-visual,
  .support-offer-usb .support-offer-visual { width: 100%; height: auto; aspect-ratio: 1; }
  .support-offer-price, .support-offer-usb .support-offer-price { grid-column: auto; margin: 0; }
}

@media (hover: hover) and (pointer: fine) {
  .support-offer-usb .support-offer-action:hover { background: rgba(232,169,59,.14); }
  .support-offer-premium .support-offer-action:hover { background: #f0bb5d; border-color: #f0bb5d; }
}

/* --- Cadeau et transmission : deux respirations éditoriales ------------- */
.btn-gift-hero {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 55px; gap: 10px; padding-inline: 14px 22px;
}
.hero .actions .btn-gift-hero > span:last-child {
  font-size: 13.5px; font-weight: 750; line-height: 1.1; letter-spacing: .005em;
}
.hero .actions .btn-gift-hero .btn-gift-token {
  display: inline-flex; align-items: center; min-height: 25px; padding: 0 9px;
  border: 1px solid rgba(8,8,10,.28); border-radius: var(--r-pill); background: rgba(8,8,10,.13);
  color: #0b0b0e; font-size: 9.5px; font-weight: 800; line-height: 1; letter-spacing: .11em; text-transform: uppercase;
}

.gift-title-composition { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 15px; align-items: center; }
.gift-mark { display: grid; align-content: center; gap: 9px; min-height: 130px; margin: 0; padding: 12px 10px 10px; border: 1px solid rgba(232,169,59,.48); background: rgba(232,169,59,.07); color: var(--gold); font-family: 'Plus Jakarta Sans', Impact, sans-serif; line-height: 1; }
.gift-mark span { display: block; max-width: 10ch; font-family: inherit; font-size: 13px; font-weight: 800; letter-spacing: .08em; line-height: 1.1; text-transform: uppercase; }
.gift-mark b { font-size: clamp(74px, 18vw, 96px); font-weight: 400; letter-spacing: -.055em; line-height: .86; }
.gift-copy h2 { max-width: 9.5ch; margin: 0; font-size: clamp(38px, 9.5vw, 56px); line-height: .9; }
.gift-copy h2 em { display: block; margin-top: 4px; }
.gift-copy > p:not(.gift-mark) { margin-top: 24px; }

.story-proof {
  padding: 42px 0;
  border-top: 0;
  background: radial-gradient(460px 240px at 10% 100%, rgba(232,169,59,.11), transparent 74%), #111113;
}
.story-proof-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  overflow: hidden; border: 1px solid rgba(232,169,59,.32); border-radius: var(--r-md); background: #151519;
}
.story-proof-visual {
  position: relative; min-height: 154px; overflow: hidden;
  background: radial-gradient(260px 170px at 78% 25%, rgba(232,169,59,.16), transparent 72%), linear-gradient(130deg, #08080a, #1d1a16);
}
.story-proof-visual::before {
  content: ""; position: absolute; inset: 18px; border: 1px solid rgba(245,243,238,.08); border-radius: calc(var(--r-md) - 5px);
}
.story-proof-count {
  position: absolute; top: 16px; right: 20px; color: rgba(245,243,238,.08);
  font-family: 'Plus Jakarta Sans', Impact, sans-serif; font-size: 128px; font-weight: 700; letter-spacing: -.08em; line-height: .8;
}
.story-proof-signal { position: absolute; right: 28px; bottom: 30px; left: 28px; display: flex; align-items: center; justify-content: space-between; }
.story-proof-signal::before { content: ""; position: absolute; right: 8px; left: 8px; height: 1px; background: linear-gradient(90deg, rgba(232,169,59,.18), var(--gold), rgba(232,169,59,.18)); }
.story-proof-signal i { position: relative; z-index: 1; width: 16px; height: 16px; border: 1px solid var(--gold); border-radius: 50%; background: #151519; box-shadow: 0 0 0 6px rgba(232,169,59,.07); }
.story-proof-signal i:nth-child(2) { width: 22px; height: 22px; background: var(--gold); box-shadow: 0 0 0 7px rgba(232,169,59,.12); }
.story-proof-copy { padding: 26px 24px 28px; }
.story-proof-kicker { margin: 0 !important; color: var(--gold) !important; font-size: 10px !important; font-weight: 850; letter-spacing: .14em; line-height: 1.2 !important; text-transform: uppercase; }
.story-proof h2 { max-width: 11ch; margin-top: 11px; font-size: clamp(36px, 9vw, 48px); line-height: .92; }
.story-proof p:not(.story-proof-kicker) { max-width: 42ch; margin-top: 16px; color: var(--muted-strong); font-size: 13px; line-height: 1.58; }
.story-proof-link { margin-top: 18px; }

@media (min-width: 761px) {
  .gift-title-composition { grid-template-columns: 126px minmax(0, 1fr); gap: 25px; }
  .gift-mark { min-height: 160px; padding: 16px 14px 12px; }
  .gift-mark b { font-size: 126px; }
  .gift-copy h2 { max-width: 12ch; font-size: clamp(58px, 6vw, 82px); }
  .story-proof { padding: 64px 0; }
  .story-proof-grid { grid-template-columns: minmax(280px, .68fr) minmax(0, 1.32fr); min-height: 300px; }
  .story-proof-visual { min-height: 100%; }
  .story-proof-count { top: 34px; right: 38px; font-size: 195px; }
  .story-proof-signal { right: 42px; bottom: 46px; left: 42px; }
  .story-proof-copy { display: flex; flex-direction: column; justify-content: center; padding: 42px clamp(38px, 6vw, 76px); }
  .story-proof h2 { max-width: 13ch; font-size: clamp(48px, 4.6vw, 64px); }
  .story-proof p:not(.story-proof-kicker) { font-size: 14px; }
}