/* =========================================================================
   One Media · surfaces intégrées de l'abonnement (habillage 1.1.0), chargées sur toutes les pages publiques :
   carte de lecteur (objet autonome, identique en clair et en sombre), pastille d'en-tête, panneau d'accueil et du
   compte (configurateur : la formule choisie change la carte, le prix et les avantages, en CSS :has()), carte de fin
   d'article. Jetons du thème onemedia (--paper, --ink, --red, --band…), clair et sombre suivis automatiquement.
   ========================================================================= */
/* =========================================================================
   Carte de lecteur (objet autonome : mêmes couleurs en clair et en sombre)
   ========================================================================= */
.afom-card { --metal: linear-gradient(135deg, #8a5a2b 0%, #dcab73 26%, #8b5a2e 50%, #e6b884 72%, #6d4220 100%); container-type: inline-size; position: relative; inline-size: 100%; margin: 0; font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; }
.afom-card[data-tier="1"] { --metal: linear-gradient(135deg, #8c6514 0%, #f1d27e 26%, #a87d1e 50%, #f6dc92 72%, #7a5810 100%); }
.afom-card[data-tier="2"] { --metal: linear-gradient(135deg, #7c838b 0%, #eef1f4 26%, #9aa1a9 50%, #f7f9fb 72%, #6f767e 100%); }
.afom-card__frame { aspect-ratio: 1.586; padding: 1.9cqw; border-radius: 3.6cqw; background: var(--metal); box-shadow: 0 1.5cqw 5cqw -1.5cqw rgba(24, 16, 12, 0.55), 0 0.3cqw 0.8cqw rgba(24, 16, 12, 0.2); }
.afom-card__face { position: relative; display: grid; grid-template-columns: 40% minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); block-size: 100%; overflow: hidden; border-radius: 2.2cqw; background: #fbf6ee; color: #231d1b; }
.afom-card__band { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 2.1cqw 4cqw; background: #b30d10; color: #fff; }
.afom-card__band b { font-family: "Newsreader", Georgia, serif; font-size: 5cqw; font-weight: 750; line-height: 1; letter-spacing: -0.045em; }
.afom-card__band b span { color: #ffd9d2; }
.afom-card__band i { font-size: 2.1cqw; font-style: normal; font-weight: 700; letter-spacing: 0.2em; line-height: 1; text-transform: uppercase; }
.afom-card__art { position: relative; overflow: hidden; border-inline-end: 1px solid rgba(35, 29, 27, 0.16); background: #efe6d6; }
.afom-card__art img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: cover; }
.afom-card [data-for-tier] { display: none; }
.afom-card[data-tier="0"] [data-for-tier="0"], .afom-card[data-tier="1"] [data-for-tier="1"], .afom-card[data-tier="2"] [data-for-tier="2"] { display: block; }
.afom-card__body { display: flex; flex-direction: column; gap: 1.4cqw; min-inline-size: 0; padding: 3.6cqw 4cqw 3.4cqw; }
.afom-card__tier b { color: #8f1214; font-size: 2.35cqw; font-weight: 750; letter-spacing: 0.17em; text-transform: uppercase; }
.afom-card__holder { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; padding-inline-end: 14cqw; font-family: "Newsreader", Georgia, serif; font-size: 5.6cqw; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.afom-card__meta { display: flex; flex-wrap: wrap; gap: 1.2cqw 4cqw; margin-block-start: auto; padding-block-start: 1.6cqw; border-block-start: 1px solid rgba(35, 29, 27, 0.18); padding-inline-end: 15cqw; }
.afom-card__meta small { display: block; color: #6f625b; font-size: 1.75cqw; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
.afom-card__meta b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 2.9cqw; font-weight: 600; letter-spacing: 0.02em; }
.afom-card__seal { position: absolute; inset-inline-end: 2.6cqw; inset-block-end: 2.4cqw; inline-size: 15.5cqw; }
.afom-card__seal span { line-height: 0; }
.afom-card__seal svg, .afom-card__seal img { inline-size: 100%; block-size: auto; }
.afom-card__seal img { filter: drop-shadow(0 0.4cqw 0.6cqw rgba(35, 29, 27, 0.3)); }
.afom-card__seal .afom-seal--t0 { filter: sepia(.35) saturate(1.25) hue-rotate(-14deg) brightness(.92) drop-shadow(0 0.4cqw 0.6cqw rgba(35, 29, 27, 0.3)); }
.afom-card__seal .afom-seal--t2 { filter: grayscale(1) brightness(1.18) contrast(1.05) drop-shadow(0 0.4cqw 0.6cqw rgba(35, 29, 27, 0.3)); }
.afom-card.is-void .afom-card__holder { color: #6a5e57; font-style: italic; font-weight: 600; }
.afom-card.is-void .afom-card__seal, .afom-card.is-pending .afom-card__seal { opacity: 0.35; filter: grayscale(1); }
.afom-card.is-pending .afom-card__band { background: repeating-linear-gradient(135deg, #b30d10 0 3cqw, #9e0b0e 3cqw 6cqw); }
.afom-card.is-revealed { animation: afom-reveal 700ms var(--afom-ease, ease) both; }
@keyframes afom-reveal { from { transform: rotate(-2deg) scale(0.97); } to { transform: none; } }

/* Pastille de métal (finitions) */
.afom-swatch { display: inline-block; flex: none; inline-size: 0.8rem; block-size: 0.8rem; border-radius: 50%; background: linear-gradient(135deg, #8a5a2b, #dcab73 45%, #6d4220); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); vertical-align: -0.05em; }
.afom-swatch--t1 { background: linear-gradient(135deg, #8c6514, #f1d27e 45%, #7a5810); }
.afom-swatch--t2 { background: linear-gradient(135deg, #7c838b, #eef1f4 45%, #6f767e); }


/* Sceaux Codex (dorés) teintés selon la finition du palier. */
.afom-seal { display: block; flex: none; object-fit: contain; }
.afom-seal--t0 { filter: sepia(.35) saturate(1.25) hue-rotate(-14deg) brightness(.92); }
.afom-seal--t2 { filter: grayscale(1) brightness(1.18) contrast(1.05); }

/* Pastille d'en-tête : libellé dès 1280 px, icône de 1024 à 1279 px, absente dessous (le médaillon de la barre basse prend le relais). */
.afom-pill { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; background: var(--red); color: var(--on-red, #fff); font: 700 14.5px var(--sans); white-space: nowrap; flex: none; }
.afom-pill:hover { background: var(--red-ink); }
.afom-pill .afom-i { width: 20px; height: 20px; }
.afom-pill--member { background: var(--paper-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-2); padding-left: 8px; }
.afom-pill--member:hover { background: var(--paper-2); box-shadow: inset 0 0 0 1.5px var(--ink); }
@media (max-width: 1279px) { .afom-pill { width: 44px; padding: 0; justify-content: center; } .afom-pill span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
@media (max-width: 1023px) { .om-tools .afom-pill { display: none; } }

/* Panneau (accueil, compte) */
.afom-sec { container-type: inline-size; border-radius: var(--r-l, 18px); background: var(--band); color: var(--band-ink); }
.afom-sec__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px; align-items: center; }
@container (min-width: 620px) { .afom-sec__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding: 32px; gap: 32px; } }
.afom-sec__eyebrow { font: 700 12px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--band-red); margin: 0 0 10px; }
.afom-sec h2, .afom-sec__h { font: 700 clamp(24px, 2.2vw, 30px)/1.12 var(--serif); letter-spacing: -.01em; margin: 0 0 18px; text-wrap: balance; color: var(--band-ink); }
.afom-sec__tiers { border: 0; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.afom-sec__tier { position: relative; display: block; cursor: pointer; min-width: 0; }
.afom-sec__tier input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.afom-sec__tier span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--band-2); }
.afom-sec__tier b { font: 700 15px var(--sans); }
.afom-sec__tier em { font: 650 15px var(--sans); font-style: normal; color: var(--band-ink); white-space: nowrap; }
.afom-sec__tier em small { font-weight: 500; color: var(--band-ink-2); }
.afom-sec__tier i { display: flex; align-items: center; gap: 6px; font: 500 12px var(--sans); font-style: normal; color: var(--band-ink-2); margin-top: 4px; }
.afom-sec__tier input:checked + span { box-shadow: inset 0 0 0 2px var(--band-ink); background: var(--band-2); }
.afom-sec__tier input:focus-visible + span { outline: 2px solid var(--band-ref); outline-offset: 2px; }
.afom-sec__perks { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 6px; }
.afom-sec__perks li { display: flex; gap: 8px; align-items: flex-start; font: 500 14.5px/1.35 var(--sans); color: var(--band-ink); }
.afom-sec__perks .afom-i { width: 18px; height: 18px; color: var(--band-red); flex: none; margin-top: 1px; }
.afom-sec__perks li.for-t1, .afom-sec__perks li.for-t2 { display: none; }
.afom-sec:has(input[name="tier"][value="1"]:checked) li.for-t1, .afom-sec:has(input[name="tier"][value="2"]:checked) li.for-t2 { display: flex; }
.afom-sec__lede { font: 400 16px/1.5 var(--serif); color: var(--band-ink-2); margin: 0 0 16px; }
.afom-sec__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0; }
.afom-sec__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--band-ink); color: var(--band); font: 700 15px var(--sans); cursor: pointer; text-decoration: none; }
.afom-sec__btn--red { background: oklch(48.6% 0.197 29); color: #fff; }
.afom-sec__link { color: var(--band-ink); font: 600 14px var(--sans); text-decoration: underline; text-underline-offset: 3px; }
.afom-sec__stage { min-width: 0; }
.afom-sec__deck { max-width: 420px; margin: 0 auto; transform: rotate(-2deg); transition: transform .3s ease; }
.afom-sec:hover .afom-sec__deck { transform: rotate(0); }
/* The card follows the chosen tier: art, tier name and metal frame. */
.afom-sec:has(input[name="tier"][value="0"]:checked) .afom-card { --metal: linear-gradient(135deg, #8a5a2b 0%, #dcab73 26%, #8b5a2e 50%, #e6b884 72%, #6d4220 100%); }
.afom-sec:has(input[name="tier"][value="1"]:checked) .afom-card { --metal: linear-gradient(135deg, #8c6514 0%, #f1d27e 26%, #a87d1e 50%, #f6dc92 72%, #7a5810 100%); }
.afom-sec:has(input[name="tier"][value="2"]:checked) .afom-card { --metal: linear-gradient(135deg, #7c838b 0%, #eef1f4 26%, #9aa1a9 50%, #f7f9fb 72%, #6f767e 100%); }
.afom-sec:has(input[name="tier"]:checked) .afom-card [data-for-tier] { display: none; }
.afom-sec:has(input[name="tier"][value="0"]:checked) .afom-card [data-for-tier="0"], .afom-sec:has(input[name="tier"][value="1"]:checked) .afom-card [data-for-tier="1"], .afom-sec:has(input[name="tier"][value="2"]:checked) .afom-card [data-for-tier="2"] { display: block; }
.afom-sec .afom-card__seal span:not([hidden]) svg { width: 100%; }
@container (max-width: 420px) { .afom-sec__tiers { grid-template-columns: minmax(0, 1fr); } .afom-sec__tier span { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .afom-sec__tier i { margin: 0; flex-basis: 100%; } .afom-sec__stage { order: -1; } }

/* Membre : faits de la carte */
.afom-sec__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 0 0 20px; }
.afom-sec__facts div { border-top: 1px solid var(--band-2); padding-top: 8px; }
.afom-sec__facts dt { font: 700 11.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--band-ink-2); }
.afom-sec__facts dd { margin: 2px 0 0; font: 650 15.5px var(--sans); }

/* Fin d'article : version compacte, ou remerciement pour les membres */
.afom-sec--compact { margin: 28px 0; }
.afom-sec--compact .afom-sec__deck { max-width: 300px; }
.afom-sec--thanks { display: flex; align-items: center; gap: 14px; margin: 28px 0; padding: 14px 18px; border-radius: 14px; background: var(--paper-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.afom-sec--thanks p { margin: 0; flex: 1; font: 500 15px/1.4 var(--sans); }
.afom-sec--thanks p span { color: var(--ink-3); }
.afom-sec--thanks .afom-sec__link { color: var(--ref); }
.om-acc__main .afom-sec { margin-bottom: 28px; }
.afom-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.afom-sec .afom-i { width: 1.2em; height: 1.2em; }