/* LP Black Month 2026 : styles propres à cette page (préfixe bm-). Page générée par tools/black_month_v2.py.
   Refonte 02.11.2026 (Marc : « trop noire ») : page claire (blanc + crème), noir pour le bandeau, les titres et les temps forts.
   Refonte CRO 05.11.2026 (audit, sections C et F) : mobile d'abord (~6 écrans), achat des calendriers dans le 1er écran,
   raccourcis collants, sélections en rangées défilantes (mobile) / grilles de 4 (desktop).
   Design v3 05.11.2026 (Marc : « on a régressé niveau design, pas très sexy ») : grand titre display « BLACK MONTH », CTA rouge
   plein, réassurance à icônes, calendriers en grand, cartes produits soignées (puits crème, remise en pastille noire), moment
   fort noir en bas de page. Deux variantes du premier écran : .bm-hero-a (clair) et .bm-hero-b (noir et or), le reste est commun.
   Rouge du site (#dc2626 / #b91c1c), or des calendriers (#c9a24a ; #8a5f1c lisible sur clair), crème #faf6f0, noir #0b0a09.
   Police Inter (celle du site). Points de rupture du site : 768 / 1280 px. Cibles tactiles >= 44 px, textes >= 11 px, contraste AA. */

.bm-hero, .bm-sec, .bm-final { position: relative; overflow: hidden; }
.bm-sec { padding: 32px 0; }
.bm-cal, .bm-white { background: #fff; }
.bm-light { background: #faf6f0; }
.bm-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* ancres : sous les raccourcis collants */
#calendriers, #meilleures-ventes, #pour-elle, #pour-lui, #a-deux, #petits-prix, #avis, #promos, #faq { scroll-margin-top: 68px; }

/* 0. bandeau défilant */
.bm-ticker { overflow: hidden; background: #0b0a09; color: #f5efe3; }
.bm-ticker-track { display: flex; width: max-content; animation: bm-tick 38s linear infinite; }
.bm-ticker-set { display: flex; flex: none; }
.bm-ticker-set span { display: inline-flex; align-items: center; gap: 24px; padding-right: 24px; height: 34px;
    font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.bm-ticker-set span::after { content: "\2726"; color: #c9a24a; font-size: 11px; }
.bm-ticker-set span:first-child { color: #d9b866; }
@keyframes bm-tick { to { transform: translateX(-50%); } }

/* textes communs */
.bm-crumbs { display: flex; gap: 8px; padding: 12px 0 0; font-size: 13px; line-height: 20px; color: #737373; }
.bm-crumbs a { color: #737373; min-height: 24px; }
.bm-crumbs a:hover { color: #171717; }
.bm-crumbs span:last-child { color: #171717; font-weight: 600; }
.bm-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #b91c1c; }
.bm-kicker-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #dc2626; box-shadow: 0 0 0 4px rgba(220, 38, 38, .18); animation: bm-pulse 2s ease-in-out infinite; }
@keyframes bm-pulse { 50% { box-shadow: 0 0 0 7px rgba(220, 38, 38, .06); } }
.bm-eyebrow, .bm-eyebrow-red { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8a5f1c; }
.bm-eyebrow::before, .bm-eyebrow::after { content: "\2726"; color: #c9a24a; font-size: 10px; letter-spacing: 0; }
.bm-eyebrow-red { color: #b91c1c; }
.bm-h1 { margin-top: 8px; color: #171717; }
.bm-h1-big { display: block; margin: 0 0 8px -2px; font-size: 58px; line-height: .9; font-weight: 900; letter-spacing: -.05em; text-transform: uppercase; color: #0b0a09; }
.bm-h1-sub { display: block; font-size: 21px; line-height: 26px; font-weight: 800; letter-spacing: -.02em; }
.bm-h1-pct { color: #dc2626; white-space: nowrap; }
.bm-lead { margin-top: 8px; font-size: 15px; line-height: 21px; color: #404040; max-width: 540px; }
.bm-h2, .bm-h2-ink { font-size: 26px; line-height: 30px; font-weight: 800; letter-spacing: -.03em; color: #0b0a09; }
.bm-sub { font-size: 15px; line-height: 22px; color: #525252; }
.bm-head { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 20px; text-align: center; }
.bm-head-l { align-items: flex-start; text-align: left; }

.bm-btn { white-space: nowrap; min-height: 48px; font-weight: 600 !important; font-size: 16px !important; }
.bm-btn div { color: inherit; }
.bm-arr { flex: none; width: 14px; height: 14px; }

/* 1. ouverture : structure commune */
.bm-hero-grid { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 14px 0 22px; }
.bm-trio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bm-duo { position: relative; width: 100%; max-width: 420px; margin: 0 auto; align-items: stretch; }
.bm-tile { display: flex; flex-direction: column; border-radius: 14px; padding: 6px 6px 8px; background: #fff; color: #171717;
    border: 1px solid #ece4d6; box-shadow: 0 24px 40px -26px rgba(80, 50, 10, .45); transition: transform .3s ease, box-shadow .3s ease; min-width: 0; }
.bm-tile:hover { transform: translateY(-4px); box-shadow: 0 30px 46px -26px rgba(80, 50, 10, .55); }
.bm-tile-link { display: flex; flex-direction: column; gap: 1px; flex: 1; color: inherit; padding: 0 2px; }
.bm-tile-img { display: block; border-radius: 9px; overflow: hidden; background: #fff; aspect-ratio: 16 / 11; margin-bottom: 6px; }
.bm-tile-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bm-tile-name { font-size: 14px; line-height: 18px; font-weight: 700; color: #171717; }
.bm-tile-prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.bm-tile-new { font-size: 20px; line-height: 24px; font-weight: 800; color: #dc2626; white-space: nowrap; letter-spacing: -.01em; }
.bm-tile-old { font-size: 13px; line-height: 16px; color: #525252; white-space: nowrap; }
.bm-tile-save { font-size: 12px; line-height: 16px; font-weight: 700; color: #15803d; }
.bm-tile-add { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 8px; border-radius: 8px; padding: 4px 6px;
  background: #dc2626; border: 1px solid #dc2626; color: #fff; font-size: 14px; line-height: 17px; font-weight: 600; text-align: center;
  transition: background .2s ease, color .2s ease; }
.bm-tile-add:hover { background: #fff; color: #dc2626; }
.bm-sticker { position: absolute; z-index: 2; top: -14px; right: -6px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 74px; height: 74px; border-radius: 50%; background: #dc2626; color: #fff; transform: rotate(-10deg);
    box-shadow: 0 10px 24px -8px rgba(185, 28, 28, .7), inset 0 0 0 3px rgba(255,255,255,.25); }
.bm-sticker b { font-size: 19px; line-height: 20px; font-weight: 900; letter-spacing: -.03em; white-space: nowrap; }
.bm-sticker small { max-width: 60px; font-size: 11px; line-height: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; text-align: center; }
.bm-hero-act { display: flex; flex-direction: column; gap: 12px; }
.bm-hero-cta { width: 100%; box-shadow: 0 14px 28px -16px rgba(185, 28, 28, .8); }
.bm-countdown { font-size: 14px; line-height: 20px; color: #525252; text-align: center; }
.bm-countdown strong { color: #171717; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bm-countdown [data-lp-cd] { display: inline-flex; justify-content: center; min-width: 32px; margin-left: 2px; padding: 3px 6px; border-radius: 6px; background: #0b0a09; color: #fff; font-weight: 800; }

/* 1A. variante claire */
.bm-hero-a { background:
    radial-gradient(55% 60% at 88% 30%, rgba(220, 38, 38, .09) 0%, rgba(220, 38, 38, 0) 70%),
    radial-gradient(50% 50% at 0% 100%, rgba(232, 195, 122, .22) 0%, rgba(232, 195, 122, 0) 70%),
    #faf6f0; }

/* 1B. variante noir et or (univers des bannières) : aplat noir, filets or, rouge pour les prix et les boutons */
.bm-hero-b { background: radial-gradient(60% 70% at 85% 20%, rgba(201, 162, 74, .10) 0%, rgba(201, 162, 74, 0) 70%), #0b0a09; color: #f5efe3; }
.bm-hero-b .bm-crumbs, .bm-hero-b .bm-crumbs a { color: #9b9284; }
.bm-hero-b .bm-crumbs a:hover { color: #f5efe3; }
.bm-hero-b .bm-crumbs span:last-child { color: #e9e1d2; }
.bm-hero-b .bm-kicker { color: #d9b866; }
.bm-hero-b .bm-kicker-dot { background: #c9a24a; box-shadow: 0 0 0 4px rgba(201, 162, 74, .2); animation: none; }
.bm-hero-b .bm-h1 { color: #fff; }
.bm-hero-b .bm-h1-big { color: #f5efe3; }
.bm-hero-b .bm-h1-pct { color: #d9b866; }
.bm-hero-b .bm-lead { color: #cbc3b5; }
.bm-hero-b .bm-tile { background: #16140f; border-color: rgba(201, 162, 74, .32); box-shadow: none; color: #f5efe3; }
.bm-hero-b .bm-tile:hover { box-shadow: 0 0 0 1px rgba(201, 162, 74, .5); }
.bm-hero-b .bm-tile-img { background: #f6f1e8; }
.bm-hero-b .bm-tile-img img { mix-blend-mode: multiply; }
.bm-hero-b .bm-tile-name { color: #f5efe3; }
.bm-hero-b .bm-tile-new { color: #f05252; }
.bm-hero-b .bm-tile-old { color: #a59d90; }
.bm-hero-b .bm-tile-save { color: #d9b866; }
.bm-hero-b .bm-tile-add:hover { background: #f5efe3; border-color: #f5efe3; color: #b91c1c; }
.bm-hero-b .bm-sticker { background: #c9a24a; color: #0b0a09; box-shadow: 0 0 0 4px #0b0a09; }
.bm-hero-b .bm-hero-cta { box-shadow: none; }
.bm-hero-b .bm-countdown { color: #cbc3b5; }
.bm-hero-b .bm-countdown strong { color: #f5efe3; }
.bm-hero-b .bm-countdown [data-lp-cd] { background: #1d1a15; box-shadow: inset 0 0 0 1px rgba(201, 162, 74, .5); color: #f5efe3; }

/* 1b. réassurance à icônes : 2 x 2 compact en mobile (titres seuls), 4 colonnes avec détail dès la tablette */
.bm-trust-sec { background: #fff; padding: 12px 0; border-bottom: 1px solid #eee7dc; }
.bm-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.bm-trust li { display: flex; align-items: center; gap: 9px; min-width: 0; }
.bm-trust-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #fdf0ef; }
.bm-trust-ic svg { width: 18px; height: 18px; fill: #dc2626; }
.bm-trust-ic svg * { fill: #dc2626; }
.bm-trust b { display: block; font-size: 13px; line-height: 17px; font-weight: 700; color: #171717; }
.bm-trust li span:not(.bm-trust-ic) { display: none; }
.bm-trust-b { background: #0b0a09; border-top: 1px solid rgba(201, 162, 74, .22); border-bottom: 0; }
.bm-trust-b .bm-trust-ic { background: #1d1a15; box-shadow: inset 0 0 0 1px rgba(201, 162, 74, .35); }
.bm-trust-b .bm-trust-ic svg, .bm-trust-b .bm-trust-ic svg * { fill: #d9b866; }
.bm-trust-b b { color: #f5efe3; }
.bm-trust-b li span:not(.bm-trust-ic) { color: #a59d90; }

/* 2. raccourcis collants : défilement horizontal en mobile */
.bm-chips { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .97); border-bottom: 1px solid #eee7dc; box-shadow: 0 8px 20px -18px rgba(0,0,0,.35); }
.bm-chips-in { display: flex; gap: 8px; overflow-x: auto; padding: 8px 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.bm-chips-in::-webkit-scrollbar { display: none; }
.bm-chip { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #e2d6c2;
    background: #fff; color: #171717; font-size: 14px; line-height: 18px; font-weight: 600; white-space: nowrap; transition: border-color .2s ease, color .2s ease; }
.bm-chip:hover { border-color: #0b0a09; color: #0b0a09; }
.bm-chip-all { background: #0b0a09; border-color: #0b0a09; color: #fff; }
.bm-chip-all:hover { background: #dc2626; border-color: #dc2626; color: #fff; }

/* 3. calendriers : grandes cartes (2 colonnes dès le mobile, pleine largeur en desktop) */
.bm-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bm-cmp { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 8px 8px 10px; border-radius: 16px; background: #faf6f0; border: 1px solid #efe6d8; }
.bm-cmp-img { border-radius: 10px; overflow: hidden; background: #fff; aspect-ratio: 4 / 3; }
.bm-cmp-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.bm-cmp:hover .bm-cmp-img img { transform: scale(1.03); }
.bm-soft { background: #f3ece1; }
.bm-soft img { object-fit: contain; mix-blend-mode: multiply; padding: 4% 0; }
.bm-persona { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8a5f1c; }
.bm-h3 { font-size: 16px; line-height: 20px; font-weight: 800; letter-spacing: -.01em; color: #0b0a09; }
.bm-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 12px; line-height: 16px; color: #525252; }
.bm-rating svg { width: 12px; height: 12px; }
.bm-rating .space-x-\[4px\] > :not([hidden]) ~ :not([hidden]) { margin-left: 2px; }
.bm-points { display: flex; flex-direction: column; gap: 4px; }
.bm-points li { position: relative; padding-left: 13px; font-size: 13px; line-height: 18px; color: #404040; }
.bm-points li::before { content: "\2726"; position: absolute; left: 0; top: 0; font-size: 9px; color: #c9a24a; }
.bm-price { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 8px; border-top: 1px dashed #e2d6c2; }
.bm-price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.bm-price-main { font-size: 22px; line-height: 26px; font-weight: 900; letter-spacing: -.03em; color: #dc2626; white-space: nowrap; }
.bm-price-old { font-size: 13px; line-height: 18px; color: #525252; white-space: nowrap; }
.bm-price-note { padding: 2px 8px; border-radius: 8px; background: #fdeceb; font-size: 11px; line-height: 15px; font-weight: 700; color: #b91c1c; }
.bm-cmp-btn { width: 100%; padding-left: 8px !important; padding-right: 8px !important; font-size: 14px !important; white-space: normal; text-align: center; line-height: 18px !important; }
.bm-deadline { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #0b0a09; }
.bm-deadline p { font-size: 14px; line-height: 20px; font-weight: 600; color: #f5efe3; }
.bm-deadline-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #1d1a15; box-shadow: inset 0 0 0 1px rgba(201, 162, 74, .4); }
.bm-deadline-ic svg, .bm-deadline-ic svg * { width: 20px; height: 20px; fill: #d9b866; }
.bm-cal .bm-review { margin-top: 14px; }

.bm-review { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid #eae3d8; box-shadow: 0 12px 30px -24px rgba(80, 50, 10, .35); }
.bm-review-stars svg { width: 14px; height: 14px; }
.bm-review blockquote p { font-size: 14px; line-height: 21px; color: #333; }
.bm-review .bm-review-title { font-weight: 700; color: #111; margin-bottom: 2px; }
.bm-review figcaption { font-size: 12px; line-height: 17px; color: #6b6b6b; }

/* 4. meilleures ventes par sélection + 5. compléments : rangée défilante en mobile, grille de 4 dès la tablette */
.bm-sel + .bm-sel { margin-top: 22px; }
.bm-sel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px; margin-bottom: 10px; border-bottom: 1px solid #e7dccb; }
.bm-sel-h { font-size: 20px; line-height: 24px; font-weight: 800; letter-spacing: -.02em; color: #0b0a09; }
.bm-sel-all { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 14px; line-height: 18px; font-weight: 700; color: #b91c1c; }
.bm-sel-all:hover { text-decoration: underline; }
.bm-row { display: grid; grid-auto-flow: column; grid-auto-columns: 44%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -20px; padding: 2px 20px 10px; scroll-padding: 0 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.bm-row::-webkit-scrollbar { display: none; }
.bm-row > * { scroll-snap-align: start; }
.bm-card { display: flex; flex-direction: column; gap: 8px; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid #eee6da; min-width: 0;
    box-shadow: 0 1px 2px rgba(23, 23, 23, .04), 0 14px 30px -24px rgba(60, 40, 10, .45); transition: transform .3s ease, box-shadow .3s ease; }
.bm-card:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(23, 23, 23, .04), 0 24px 40px -24px rgba(60, 40, 10, .55); }
.bm-card-media { position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1; background: #f4eee5; }
.bm-card-media img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 6%; mix-blend-mode: multiply; transition: transform .4s ease; }
.bm-card-media:hover img { transform: scale(1.05); }
.bm-off { position: absolute; top: 8px; left: 8px; padding: 2px 9px; border-radius: 999px; background: #0b0a09; color: #fff; font-size: 13px; line-height: 19px; font-weight: 800; letter-spacing: .01em; }
.bm-card-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; padding: 0 10px; }
.bm-card-brand { font-size: 11px; line-height: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a5f1c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-card-name { font-size: 13px; line-height: 18px; font-weight: 700; color: #171717; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.bm-card-name a:hover { color: #dc2626; }
.bm-card-stars { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: #525252; }
.bm-card-stars svg { width: 12px; height: 12px; }
.bm-card-stars .space-x-\[4px\] > :not([hidden]) ~ :not([hidden]) { margin-left: 2px; }
.bm-card-buy { display: flex; flex-direction: column; gap: 6px; padding: 0 10px 10px; }
.bm-card-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.bm-card-price b { font-size: 18px; line-height: 22px; font-weight: 800; letter-spacing: -.02em; color: #dc2626; white-space: nowrap; }
.bm-card-price s { font-size: 13px; line-height: 18px; color: #6b6b6b; white-space: nowrap; }
.bm-add { min-height: 44px; width: 100%; padding: 6px 8px !important; font-size: 14px !important; line-height: 17px !important; font-weight: 600; text-align: center; }
.bm-add div { color: inherit; }

/* 6. preuve */
.bm-proof { display: grid; gap: 10px; }
.bm-ts { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 16px; border-radius: 16px; background: #0b0a09; text-align: center; color: #f5efe3; }
.bm-ts-score { font-size: 38px; line-height: 40px; font-weight: 900; letter-spacing: -.04em; color: #f5efe3; }
.bm-ts-stars svg { width: 18px; height: 18px; }
.bm-ts-name { font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #d9b866; }
.bm-ts p { margin-top: 4px; font-size: 14px; line-height: 20px; color: #cbc3b5; max-width: 340px; }
.bm-proof-trust { display: grid; gap: 10px; margin-top: 14px; }
.bm-proof-trust li { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 20px; color: #262626; }
.bm-proof-trust .bm-trust-ic { width: 36px; height: 36px; }

/* 7. moment fort Black Month : bloc noir pleine largeur, photo du calendrier ouvert, compte à rebours, CTA rouge */
.bm-final { background: #0b0a09; color: #f5efe3; }
.bm-ticker-final { border-bottom: 1px solid rgba(201, 162, 74, .22); }
.bm-ticker-final .bm-ticker-track { animation-direction: reverse; }
.bm-final-in { display: grid; grid-template-columns: 1fr; }
.bm-final-img { position: relative; height: 190px; overflow: hidden; }
.bm-final-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.bm-final-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 10, 9, 0) 45%, #0b0a09 100%); }
.bm-final-copy { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 4px 20px 36px; text-align: center; }
.bm-final-copy .bm-kicker { color: #d9b866; }
.bm-final-copy .bm-kicker-dot { background: #c9a24a; box-shadow: 0 0 0 4px rgba(201, 162, 74, .2); animation: none; }
.bm-final-mark { font-size: 46px; line-height: .9; font-weight: 900; letter-spacing: -.05em; text-transform: uppercase; color: #f5efe3; white-space: nowrap; }
.bm-final-copy .bm-h2 { color: #f5efe3; font-size: 20px; line-height: 26px; letter-spacing: -.02em; max-width: 520px; }
.bm-final-copy .bm-countdown { color: #cbc3b5; }
.bm-final-copy .bm-countdown strong { color: #f5efe3; }
.bm-final-copy .bm-countdown [data-lp-cd] { background: #1d1a15; box-shadow: inset 0 0 0 1px rgba(201, 162, 74, .5); color: #f5efe3; }
.bm-final-copy .bm-btn { width: 100%; margin-top: 2px; }
.bm-final-copy .bm-btn:hover { background: #f5efe3 !important; border-color: #f5efe3 !important; color: #b91c1c !important; fill: #b91c1c !important; }

/* 8. FAQ */
.bm-faq { max-width: 820px; margin: 0 auto; }

/* 9. barre collante mobile contextuelle */
.bm-sticky { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .98);
    border-top: 1px solid #ece4d6; box-shadow: 0 -10px 28px -12px rgba(0,0,0,.2); transform: translateY(110%); transition: transform .3s ease; }
.bm-sticky.is-on { transform: none; }
.bm-sticky-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bm-sticky-in[hidden] { display: none; }
.bm-sticky a { flex: none; min-height: 48px; min-width: 120px; font-weight: 600; }
.bm-sticky-k { font-size: 12px; line-height: 16px; font-weight: 700; color: #b91c1c; }
.bm-sticky-p { font-size: 15px; line-height: 20px; font-weight: 700; color: #111; }

@media (min-width: 768px) {
  .bm-sec { padding: 64px 0; }
  .bm-h1-big { font-size: 96px; margin-bottom: 12px; }
  .bm-h1-sub { font-size: 32px; line-height: 38px; }
  .bm-lead { font-size: 17px; line-height: 26px; margin-top: 12px; }
  .bm-h2, .bm-h2-ink { font-size: 40px; line-height: 46px; }
  .bm-head { margin-bottom: 36px; gap: 10px; }
  .bm-hero-grid { padding: 24px 0 40px; gap: 22px; }
  .bm-duo { max-width: 480px; gap: 18px; }
  .bm-tile { padding: 10px 10px 12px; }
  .bm-tile-img { aspect-ratio: 1 / 1; }
  .bm-tile-new { font-size: 24px; line-height: 28px; }
  .bm-tile-save { font-size: 13px; }
  .bm-sticker { width: 92px; height: 92px; top: -22px; right: -18px; }
  .bm-sticker b { font-size: 26px; line-height: 26px; }
  .bm-hero-act { align-items: center; }
  .bm-hero-cta { width: auto; }
  .bm-trust-sec { padding: 22px 0; }
  .bm-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .bm-trust li { align-items: flex-start; gap: 12px; }
  .bm-trust-ic { width: 42px; height: 42px; }
  .bm-trust-ic svg { width: 20px; height: 20px; }
  .bm-trust b { font-size: 15px; line-height: 20px; }
  .bm-trust li span:not(.bm-trust-ic) { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: #6b6b6b; }
  .bm-trust-b li span:not(.bm-trust-ic) { color: #a59d90; }
  .bm-chips-in { justify-content: center; padding: 10px 24px; }
  .bm-compare { gap: 24px; }
  .bm-cmp { padding: 14px 14px 22px; gap: 12px; border-radius: 22px; }
  .bm-cmp > :not(.bm-cmp-img) { margin-left: 8px; margin-right: 8px; }
  .bm-cmp-img { aspect-ratio: 5 / 4; border-radius: 14px; }
  .bm-h3 { font-size: 26px; line-height: 31px; letter-spacing: -.02em; }
  .bm-persona { font-size: 12px; }
  .bm-rating { font-size: 14px; line-height: 20px; }
  .bm-rating svg { width: 15px; height: 15px; }
  .bm-points li { font-size: 15px; line-height: 22px; padding-left: 20px; }
  .bm-points li::before { font-size: 11px; top: 1px; }
  .bm-price-main { font-size: 34px; line-height: 38px; }
  .bm-price-old { font-size: 15px; }
  .bm-price-note { font-size: 13px; line-height: 18px; padding: 3px 10px; }
  .bm-cmp-btn { font-size: 16px !important; width: auto; align-self: flex-start; padding-left: 40px !important; padding-right: 40px !important; }
  .bm-deadline { margin-top: 24px; padding: 16px 22px; justify-content: center; }
  .bm-deadline p { font-size: 16px; line-height: 23px; }
  .bm-cal .bm-review { margin-top: 16px; }
  .bm-sel + .bm-sel { margin-top: 48px; }
  .bm-sel-head { margin-bottom: 18px; }
  .bm-sel-h { font-size: 26px; line-height: 32px; }
  .bm-row { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto; gap: 16px; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
  .bm-card { gap: 10px; }
  .bm-card-body { padding: 0 14px; }
  .bm-card-buy { padding: 0 14px 14px; }
  .bm-card-name { font-size: 15px; line-height: 20px; -webkit-line-clamp: 3; }
  .bm-card-price b { font-size: 20px; line-height: 24px; }
  .bm-proof { grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: stretch; }
  .bm-ts { justify-content: center; padding: 24px; }
  .bm-ts-score { font-size: 52px; line-height: 54px; }
  .bm-proof-trust { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
  .bm-review { padding: 20px; }
  .bm-review blockquote p { font-size: 15px; line-height: 23px; }
  .bm-final-img { height: 320px; }
  .bm-final-copy { gap: 16px; padding: 8px 40px 64px; }
  .bm-final-mark { font-size: 96px; }
  .bm-final-copy .bm-h2 { font-size: 28px; line-height: 34px; }
  .bm-final-copy .bm-btn { width: auto; }
}
@media (min-width: 1280px) {
  .bm-hero-grid { grid-template-columns: 1.1fr 1fr; grid-template-areas: "copy trio" "act trio"; column-gap: 64px; row-gap: 26px; padding: 34px 0 52px; align-items: center; }
  .bm-hero-copy { grid-area: copy; align-self: end; }
  .bm-trio { grid-area: trio; }
  .bm-hero-act { grid-area: act; align-self: start; align-items: flex-start; }
  .bm-countdown { text-align: left; }
  .bm-h1-big { font-size: 110px; }
  .bm-h1-sub { font-size: 34px; line-height: 40px; }
  .bm-duo { max-width: 540px; gap: 24px; }
  .bm-duo .bm-tile-new { font-size: 26px; line-height: 30px; }
  .bm-sticker { width: 104px; height: 104px; top: -40px; right: -26px; }
  .bm-sticker b { font-size: 30px; line-height: 30px; }
  .bm-sticker small { max-width: 80px; font-size: 12px; line-height: 13px; }
  .bm-compare { gap: 32px; }
  .bm-row { gap: 20px; }
  .bm-final-in { grid-template-columns: 1fr 1fr; min-height: 560px; }
  .bm-final-img { height: auto; }
  .bm-final-img::after { background: linear-gradient(90deg, rgba(11, 10, 9, 0) 55%, #0b0a09 100%); }
  .bm-final-copy { align-items: flex-start; justify-content: center; text-align: left; gap: 18px; padding: 64px max(20px, calc((100vw - 1224px) / 2)) 64px 56px; }
  .bm-final-mark { font-size: 112px; white-space: normal; }
  .bm-final-copy .bm-h2 { font-size: 32px; line-height: 38px; }
  .bm-final-copy .bm-countdown { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .bm-tile, .bm-card, .bm-card-media img, .bm-cmp-img img, .bm-sticky { transition: none; }
  .bm-ticker-track, .bm-kicker-dot { animation: none; }
}
/* mobile : bouton d'achat des calendriers dans le premier écran (390 x 844) */
@media (max-width: 767px) {
  .bm-crumbs { display: none; }
  /* réassurance déjà dans la barre à icônes du haut : pas de doublon en mobile */
  .bm-proof-trust { display: none; }
  /* moment fort : photo en fond du texte (pas de hauteur en plus) */
  .bm-final-in { position: relative; }
  .bm-final-img { position: absolute; inset: 0; height: auto; }
  .bm-final-img img { object-position: 50% 50%; }
  .bm-final-img::after { background: linear-gradient(180deg, rgba(11, 10, 9, .55) 0%, rgba(11, 10, 9, .82) 45%, rgba(11, 10, 9, .94) 100%); }
  .bm-final-copy { padding: 28px 20px 32px; }
  .bm-final-copy .bm-kicker { display: none; } /* même date dans le bandeau juste au-dessus */
  .bm-card-media { aspect-ratio: 6 / 5; }
  .bm-card-media img { padding: 5% 8%; }
}

/* ===== v4 (05.11.2026, Marc : « version b mais faut reprendre un peu ce style noir doré des baners ») =====
   Grammaire des bannières Black Month : fonds bokeh or (assets/img/blackmonth/fond-*.webp, passés par --bm-bg / --bm-bg-m
   dans le style de la section), « MONTH » en or métallique, eyebrow or très espacé, CTA or métallique (texte noir en
   capitales), pastilles de remise en pièce d'or, plaque de prix noire sous l'image des calendriers, réassurance à points.
   Les boutons « Ajouter au panier » restent rouges. Pas de verre dépoli, pas de didone, pas de violet. */
.bm-gold-txt { color: #d9b866; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .bm-gold-txt { background: linear-gradient(180deg, #f8e3a8 0%, #e8c574 36%, #c9a24a 62%, #a77f30 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
}
.bm-gold-btn { min-height: 50px; padding: 12px 28px; border: 0; border-radius: 6px; color: #0b0a09 !important; fill: #0b0a09;
    background: linear-gradient(180deg, #f3d58f 0%, #e3bc6c 48%, #c9a24a 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(120, 85, 25, .35), 0 10px 24px -12px rgba(201, 162, 74, .6);
    font-size: 15px !important; line-height: 19px; font-weight: 800 !important; letter-spacing: .08em; text-transform: uppercase; text-align: center; white-space: normal;
    transition: filter .2s ease, transform .2s ease; }
.bm-gold-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.bm-gold-btn svg, .bm-gold-btn svg * { fill: #0b0a09 !important; }
.bm-gold-btn > div:first-child { color: #0b0a09; }

/* pièce d'or : pastilles de remise des cartes (toutes) */
.bm-off { top: 7px; left: auto; right: 7px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #fdecbc 0%, #ebc977 30%, #c9a24a 64%, #95702a 100%); color: #0b0a09; font-size: 13px; line-height: 1; font-weight: 900; letter-spacing: -.02em;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), inset 0 -2px 3px rgba(90, 60, 15, .45), 0 3px 8px -2px rgba(0, 0, 0, .35); }

/* hero B : fond bokeh or des bannières, voile sombre sous le texte */
.bm-hero-b { background: #0b0a09; }
.bm-hero-b::before { content: ""; position: absolute; inset: 0; background: var(--bm-bg-m) 70% 100% / cover no-repeat; }
.bm-hero-b::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(11, 10, 9, .72) 0%, rgba(11, 10, 9, .45) 42%, rgba(11, 10, 9, .25) 70%, rgba(11, 10, 9, .55) 100%); }
.bm-hero-b > * { position: relative; z-index: 1; }
.bm-hero-b .bm-kicker { gap: 0; color: #d9b866; letter-spacing: .32em; font-size: 12px; }
.bm-hero-b .bm-kicker-dot { display: none; }
.bm-hero-b .bm-h1-big { color: #f5efe3; }
.bm-hero-b .bm-h1-sub { color: #fff; }
.bm-hero-b .bm-h1-pct { color: #e8c574; }
.bm-hero-b .bm-lead { color: #d6cec0; }
.bm-hero-b .bm-hero-cta { width: 100%; }
.bm-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 0; font-size: 12px; line-height: 18px; color: #b9b0a2; }
.bm-dots li:not(:last-child)::after { content: "\00b7"; margin: 0 8px; color: #8c8478; }
.bm-hero-b .bm-countdown { color: #d6cec0; }
/* tuiles : image sur crème, plaque de prix noire translucide, bouton panier rouge */
.bm-hero-b .bm-tile { padding: 0 0 8px; overflow: hidden; background: rgba(14, 12, 10, .82); border: 1px solid rgba(201, 162, 74, .35); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .8); }
.bm-hero-b .bm-tile-link { padding: 0; gap: 0; }
.bm-hero-b .bm-tile-img { margin: 0; border-radius: 0; background: #f4ede0; }
.bm-hero-b .bm-tile-plate { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 4px 2px; text-align: center; background: rgba(11, 10, 9, .9);
    border-top: 1px solid rgba(201, 162, 74, .35); }
.bm-hero-b .bm-tile-name { font-size: 11px; line-height: 15px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #efe7d8; }
.bm-hero-b .bm-tile-prices { justify-content: center; }
.bm-hero-b .bm-tile-new { font-weight: 900; letter-spacing: -.03em; }
.bm-hero-b .bm-tile-old { color: #9a9286; }
.bm-hero-b .bm-tile-save { font-weight: 600; color: #cfc6b7; }
.bm-hero-b .bm-tile-add { margin: 6px 8px 0; }
.bm-hero-b .bm-sticker { background: radial-gradient(circle at 34% 28%, #fdecbc 0%, #ebc977 30%, #c9a24a 64%, #95702a 100%); color: #0b0a09;
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, .55), inset 0 -3px 5px rgba(90, 60, 15, .45), 0 10px 22px -8px rgba(0, 0, 0, .7); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .bm-hero-b .bm-tile-new { background: linear-gradient(180deg, #f8e3a8 0%, #e8c574 40%, #c9a24a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.bm-hero-b .bm-tile-new { color: #e3bf6c; }
/* barre de réassurance B : noir, icônes or */
.bm-trust-b { border-top: 1px solid rgba(201, 162, 74, .28); }
.bm-trust-b b { letter-spacing: .02em; }

/* bandeau d'échéance : noir, filet or, icône or */
.bm-deadline { border: 1px solid rgba(201, 162, 74, .4); background: #0b0a09 var(--bm-none, none); }
.bm-deadline p { color: #efe7d8; }

/* carte Trusted Shops : fond bokeh, note en or */
.bm-ts { position: relative; overflow: hidden; border: 1px solid rgba(201, 162, 74, .35); }
.bm-ts::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 10, 9, .35), rgba(11, 10, 9, .7)), var(--bm-bg) 100% 100% / cover no-repeat; opacity: .6; }
.bm-ts > * { position: relative; }
.bm-ts-name { letter-spacing: .32em; }

/* bloc du bas : fond bokeh or, BLACK ivoire / MONTH or, CTA or */
.bm-final { background: #0b0a09; }
.bm-final-copy::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bm-bg-m) 80% 100% / cover no-repeat; }
.bm-final-copy::after { content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(11, 10, 9, .55) 0%, rgba(11, 10, 9, .4) 55%, rgba(11, 10, 9, .62) 100%); }
.bm-final-copy { z-index: 0; isolation: isolate; }
.bm-final-copy .bm-kicker { gap: 0; letter-spacing: .32em; }
.bm-final-copy .bm-kicker-dot { display: none; }
.bm-final-copy .bm-gold-btn { width: 100%; }

@media (max-width: 767px) {
  .bm-final-img { display: none; }
  .bm-gold-btn { padding: 12px 16px; font-size: 14px !important; letter-spacing: .04em; }
  /* mobile : la barre à icônes juste sous le hero porte déjà ces 3 promesses */
  .bm-dots { display: none; }
}
@media (min-width: 768px) {
  .bm-hero-b::before { background-image: var(--bm-bg); background-position: 50% 100%; }
  .bm-hero-b::after { background: linear-gradient(90deg, rgba(11, 10, 9, .78) 0%, rgba(11, 10, 9, .5) 38%, rgba(11, 10, 9, .1) 62%, rgba(11, 10, 9, 0) 100%),
      linear-gradient(180deg, rgba(11, 10, 9, .35) 0%, rgba(11, 10, 9, 0) 40%); }
  .bm-hero-b .bm-hero-cta, .bm-final-copy .bm-gold-btn { width: auto; }
  .bm-gold-btn { font-size: 16px !important; padding: 14px 34px; }
  .bm-off { width: 50px; height: 50px; font-size: 14px; top: 10px; right: 10px; }
  .bm-hero-b .bm-tile { padding: 0 0 10px; }
  .bm-hero-b .bm-tile-plate { padding: 10px 6px 4px; }
  .bm-hero-b .bm-tile-name { font-size: 12px; letter-spacing: .14em; }
  .bm-hero-b .bm-tile-add { margin: 8px 10px 0; }
  .bm-dots { font-size: 13px; }
  .bm-final-copy::before { background-image: var(--bm-bg); background-position: 85% 100%; }
}
@media (min-width: 1280px) {
  .bm-dots { justify-content: flex-start; }
  .bm-hero-b .bm-kicker { font-size: 13px; }
  .bm-final-copy::after { background: linear-gradient(90deg, rgba(11, 10, 9, .62) 0%, rgba(11, 10, 9, .32) 60%, rgba(11, 10, 9, .18) 100%), linear-gradient(180deg, rgba(11, 10, 9, 0) 55%, rgba(11, 10, 9, .45) 100%); }
}

/* sceau : « -20 % » seul (Marc, 05.11.2026 : plus de « sans code ») */
.bm-sticker b { font-size: 22px; line-height: 22px; }
@media (min-width: 768px) { .bm-sticker b { font-size: 28px; line-height: 28px; } }
@media (min-width: 1280px) { .bm-sticker b { font-size: 32px; line-height: 32px; } }

/* ===== « jusqu'à -90 % sur nos promos » (Marc, 05.11.2026) : remise maximale du rayon Promotions, lien vers les promos ===== */
/* pièce d'or du hero : rattachée au grand titre (à droite de BLACK en mobile, dans le vide entre titre et calendriers en desktop),
   plus grande que la pièce « -20 % » des calendriers ; positionnée en absolu, n'ajoute aucune hauteur */
.bm-hero-copy { position: relative; }
.bm-coin90 { position: absolute; z-index: 2; top: 14px; right: -12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    width: 112px; height: 112px; padding: 10px; border-radius: 50%; text-align: center; color: #0b0a09;
    background: radial-gradient(circle at 34% 28%, #fdecbc 0%, #ebc977 30%, #c9a24a 64%, #95702a 100%);
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, .55), inset 0 -4px 6px rgba(90, 60, 15, .45), inset 0 0 0 4px rgba(255, 236, 190, .28),
        0 14px 30px -10px rgba(0, 0, 0, .75); transition: transform .25s ease; }
.bm-coin90:hover { transform: scale(1.04); }
.bm-coin90 b { display: block; font-size: 30px; line-height: 30px; font-weight: 900; letter-spacing: -.045em; white-space: nowrap; }
.bm-coin90 span { display: block; max-width: 92px; font-size: 11px; line-height: 12px; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; }
/* rappels : pastille or (meilleures ventes, bloc du bas) */
.bm-pill90 { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 999px; color: #0b0a09;
    background: linear-gradient(180deg, #f3d58f 0%, #e3bc6c 48%, #c9a24a 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(120, 85, 25, .3), 0 8px 18px -10px rgba(120, 85, 25, .7);
    font-size: 13px; line-height: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transition: filter .2s ease; }
.bm-pill90:hover { filter: brightness(1.07); }
.bm-pill90 .bm-arr { width: 12px; height: 12px; }
.bm-head .bm-pill90 { margin-top: 4px; }
@media (min-width: 768px) {
  .bm-coin90 { width: 150px; height: 150px; top: 6px; right: 0; }
  .bm-coin90 b { font-size: 42px; line-height: 42px; }
  .bm-coin90 span { max-width: 120px; font-size: 13px; line-height: 14px; }
  .bm-pill90 { font-size: 14px; }
}
@media (min-width: 1280px) {
  .bm-coin90 { width: 176px; height: 176px; top: -8px; right: -44px; }
  .bm-coin90 b { font-size: 50px; line-height: 50px; }
  .bm-coin90 span { max-width: 140px; font-size: 14px; line-height: 16px; }
}
@media (prefers-reduced-motion: reduce) { .bm-coin90 { transition: none; } }
@media (max-width: 767px) {
  /* meilleures ventes : la pastille -90 % tient lieu d'eyebrow en mobile (pas de hauteur en plus) */
  #meilleures-ventes .bm-head .bm-eyebrow { display: none; }
  #meilleures-ventes .bm-head .bm-pill90 { order: -1; margin: 0 0 2px; }
  .bm-final-copy { gap: 10px; }
}
/* pièce -90 % : mot très long (ex. « Aktionsartikel ») en casse normale pour tenir dans le disque */
.bm-coin90 .bm-coin90-long { text-transform: none; letter-spacing: -.01em; font-size: 12px; }
@media (min-width: 768px) { .bm-coin90 .bm-coin90-long { font-size: 14px; } }
/* bloc du bas : rappel -90 % en contour or, pour ne pas doubler le CTA or plein juste dessous */
.bm-final-copy .bm-pill90 { background: rgba(11, 10, 9, .35); color: #ecd08a; box-shadow: inset 0 0 0 1px rgba(217, 184, 102, .7); }
.bm-final-copy .bm-pill90:hover { filter: none; background: rgba(201, 162, 74, .15); }

/* ===== Pièces d'or frappées (Marc, 05.11.2026 : « ça fait texte posé dessus, faut intégrer mieux, plus joli, plus d'effet ») =====
   Pièce -90 % du hero, sceau -20 % des calendriers (hero B) et pastilles de remise des cartes : même métal, en CSS pur.
   Couches du fond (de haut en bas) : point de lumière en haut à gauche, reflets brossés (conic), volume (radial clair au centre, sombre en bas à droite). Bord biseauté et ombre portée en box-shadow,
   passage de lumière en ::after (lent, toutes les 6 s, coupé si prefers-reduced-motion).
   Texte gravé : brun très foncé, liseré clair dessous et sombre dessus (effet frappé). */
.bm-coin90, .bm-hero-b .bm-sticker, .bm-off {
    --gold-hi: #fff4d2; --gold-lt: #f1d79c; --gold-md: #dcb86e; --gold-mx: #c49a4c; --gold-dk: #8a6420; --gold-dp: #5c4210;
    overflow: hidden; isolation: isolate; color: #2b1d05;
    background:
      radial-gradient(circle at 30% 24%, rgba(255, 243, 196, .95) 0%, rgba(255, 243, 196, .35) 16%, rgba(255, 243, 196, 0) 34%),
      repeating-conic-gradient(from 0deg, rgba(255, 250, 225, .035) 0deg 1deg, rgba(92, 66, 16, .025) 1deg 2deg),
      conic-gradient(from 210deg, var(--gold-mx), var(--gold-lt) 45deg, var(--gold-md) 90deg, var(--gold-hi) 140deg, var(--gold-md) 185deg,
        var(--gold-dk) 245deg, var(--gold-md) 300deg, var(--gold-lt) 335deg, var(--gold-mx)),
      radial-gradient(circle at 38% 34%, var(--gold-lt) 0%, var(--gold-md) 45%, var(--gold-mx) 70%, var(--gold-dk) 100%);
    background-blend-mode: normal, normal, soft-light, normal;
    box-shadow:
      inset 0 3px 2px -1px rgba(255, 248, 222, .95), inset 0 -4px 5px -1px rgba(92, 66, 16, .85),
      inset 3px 0 3px -2px rgba(255, 243, 196, .5), inset -3px 0 4px -2px rgba(92, 66, 16, .5), inset -8px -10px 18px -6px rgba(92, 66, 16, .45),
      0 0 0 1.5px var(--gold-dk), 0 0 0 2.5px rgba(255, 228, 150, .35),
      0 16px 28px -10px rgba(30, 18, 2, .85), 0 0 30px -8px rgba(217, 174, 79, .35);
}
/* pas de couronne de perles ni de filet intérieur (Marc, 05.11.2026 : « faut juste retirer sur truc à l'intérieur des cercles ») */
.bm-coin90::before, .bm-hero-b .bm-sticker::before, .bm-off::before { content: none; }
/* passage de lumière */
.bm-coin90::after, .bm-hero-b .bm-sticker::after, .bm-off::after {
    content: ""; position: absolute; z-index: 2; inset: 0; border-radius: 50%; pointer-events: none;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(255, 252, 235, .55) 48%, rgba(255, 255, 255, 0) 58%) no-repeat;
    background-size: 260% 100%; background-position: 140% 0; mix-blend-mode: soft-light; }
.bm-coin90::after, .bm-hero-b .bm-sticker::after { animation: bm-shine 6s ease-in-out 1.2s infinite; }
@keyframes bm-shine { 0% { background-position: 140% 0; } 22%, 100% { background-position: -40% 0; } }
/* texte gravé */
.bm-coin90 > *, .bm-hero-b .bm-sticker > * { position: relative; z-index: 1; }
.bm-coin90 b, .bm-coin90 span, .bm-hero-b .bm-sticker b, .bm-off {
    color: #2b1d05; text-shadow: 0 1px 0 rgba(255, 240, 190, .75), 0 -1px 0 rgba(70, 48, 8, .35); }

/* pièce -90 % : hiérarchie, le chiffre domine */
.bm-coin90 { transform: rotate(-10deg); gap: 2px; padding: 12px; transition: transform .3s ease, box-shadow .3s ease; }
.bm-coin90:hover { transform: rotate(-6deg) scale(1.04); }
.bm-coin90 b { font-size: 31px; line-height: 29px; font-weight: 800; letter-spacing: -.045em; font-variant-numeric: lining-nums; }
.bm-coin90 span { max-width: 84px; font-size: 11px; line-height: 12px; font-weight: 700; letter-spacing: .035em; }
.bm-coin90 .bm-coin90-long { letter-spacing: -.01em; font-size: 11.5px; font-weight: 700; }
/* sceau -20 % (hero B) */
.bm-hero-b .bm-sticker { transform: rotate(-8deg); }
.bm-hero-b .bm-sticker b { font-weight: 800; letter-spacing: -.06em; }
/* pastilles des cartes : version simplifiée (pas de passage de lumière, ombre plus courte) */
.bm-off { transform: rotate(-8deg); font-weight: 800; letter-spacing: -.04em;
    box-shadow: inset 0 2px 1px -1px rgba(255, 248, 222, .95), inset 0 -3px 3px -1px rgba(92, 66, 16, .8),
      0 0 0 1px var(--gold-dk), 0 6px 12px -5px rgba(30, 18, 2, .6); }
@media (min-width: 768px) {
  .bm-coin90 { padding: 16px; gap: 3px; }
  .bm-coin90 b { font-size: 44px; line-height: 42px; }
  .bm-coin90 span { max-width: 112px; font-size: 13px; line-height: 15px; letter-spacing: .05em; }
  .bm-coin90 .bm-coin90-long { font-size: 14px; }
}
@media (min-width: 1280px) {
  .bm-coin90 b { font-size: 52px; line-height: 50px; }
  .bm-coin90 span { max-width: 132px; font-size: 15px; line-height: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .bm-coin90::after, .bm-hero-b .bm-sticker::after { animation: none; }
  .bm-coin90 { transition: none; }
}