/* ==========================================================================
   AdFree Pass · Obscura (habillage 1.0.0) — sections chargées partout : jetons, carte de membre, panneau
   d'abonnement (accueil, fin d'article, compte). Jetons du thème Obscura (clair et sombre), replis si absent.
   La carte est une image autonome (tirage Codex sur plaque sombre) : identique en clair et en sombre.
   ========================================================================== */
.afob,.afob-panel,.afob-acct,.afob-card{
	--afob-bg:var(--bg,#f4efe7);--afob-s1:var(--s1,#fffdf9);--afob-s2:var(--s2,#ebe4da);--afob-line:var(--line,#ddd3c6);--afob-line2:var(--line2,#c9bdae);
	--afob-fg:var(--fg,#1c1517);--afob-fg2:var(--fg2,#3a2f2c);--afob-mut:var(--mut,#5b4f49);--afob-red:var(--red,#a8321e);--afob-btn:var(--red-btn,#b4301e);
	--afob-fd:var(--fd,Georgia,serif);--afob-fu:var(--fu,system-ui,sans-serif);--afob-fr:var(--fr,Georgia,serif);
	--afob-plate:#0c0a0b;--afob-plate-fg:#f1eae1;--afob-plate-mut:#c9beb2;
	--afob-m0:linear-gradient(135deg,#6e4524,#c48a55 30%,#8a5a33 55%,#d9a774 76%,#7a4c2a);
	--afob-m1:linear-gradient(135deg,#7a5a1c,#e9c877 30%,#a8802f 55%,#f3dc96 76%,#8c6a24);
	--afob-m2:linear-gradient(135deg,#6f757d,#e6e9ee 30%,#9aa1aa 55%,#f4f6f8 76%,#7c838c);
	--afob-c0:#c48a55;--afob-c1:#d9b26a;--afob-c2:#cfd4da;
}
.afob-sr,.afps-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------------------------------------------------------------- Member card */
.afob-card{--afob-m:var(--afob-m1);margin:0;width:100%;max-width:380px;color:var(--afob-plate-fg);font-family:var(--afob-fu)}
.afob-card[data-tier="0"]{--afob-m:var(--afob-m0)}.afob-card[data-tier="2"]{--afob-m:var(--afob-m2)}
.afob-card__frame{position:relative;display:grid;grid-template-rows:auto auto;padding:7px;border-radius:18px;background:var(--afob-m);box-shadow:0 2px 0 rgba(255,255,255,.25) inset,0 26px 50px -22px rgba(0,0,0,.7),0 8px 18px -10px rgba(0,0,0,.5)}
.afob-card__art{position:relative;display:block;aspect-ratio:3/3.1;overflow:hidden;border-radius:12px 12px 4px 4px;background:var(--afob-plate)}
.afob-card__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.afob-card__art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,10,11,.72) 0%,rgba(12,10,11,0) 30%,rgba(12,10,11,0) 70%,rgba(12,10,11,.55) 100%)}
.afob-card__top{position:absolute;z-index:1;left:20px;right:20px;top:18px;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"e b" "e k";column-gap:10px;align-items:center}
.afob-card__emblem{grid-area:e;width:40px;height:40px;border-radius:50%}
.afob-card__brand{grid-area:b;font:800 15px/1 var(--afob-fd);letter-spacing:.2em}
.afob-card__kind{grid-area:k;font:700 10.5px/1.3 var(--afob-fu);letter-spacing:.16em;text-transform:uppercase;color:var(--afob-plate-mut)}
.afob-card__plate{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-areas:"t s" "h s" "f f";gap:4px 12px;margin-top:5px;padding:14px 16px 16px;border-radius:4px 4px 12px 12px;background:var(--afob-plate)}
.afob-card__tier{grid-area:t;font:800 11.5px/1.2 var(--afob-fu);letter-spacing:.18em;text-transform:uppercase;background:var(--afob-m);-webkit-background-clip:text;background-clip:text;color:transparent}
.afob-card__holder{grid-area:h;min-width:0;overflow-wrap:anywhere;text-wrap:balance;font:700 22px/1.15 var(--afob-fd)}
.afob-card__foot{grid-area:f;display:flex;gap:18px;margin-top:8px;padding-top:10px;border-top:1px solid rgba(241,234,225,.14)}
.afob-card__foot small{display:block;font:700 9.5px var(--afob-fu);letter-spacing:.14em;text-transform:uppercase;color:var(--afob-plate-mut)}
.afob-card__foot b{font:700 14px var(--afob-fu);font-variant-numeric:tabular-nums}
.afob-card__seal{grid-area:s;align-self:center;width:58px;height:58px}
.afob-card__seal svg{width:58px;height:58px}
.afob-card [data-for-tier]{display:none}
.afob-card[data-tier="0"] [data-for-tier="0"],.afob-card[data-tier="1"] [data-for-tier="1"],.afob-card[data-tier="2"] [data-for-tier="2"]{display:block}
.afob-card__tier [data-for-tier]{display:none!important}
.afob-card[data-tier="0"] .afob-card__tier [data-for-tier="0"],.afob-card[data-tier="1"] .afob-card__tier [data-for-tier="1"],.afob-card[data-tier="2"] .afob-card__tier [data-for-tier="2"]{display:inline!important}
.afob-card.is-pending .afob-card__art img,.afob-card.is-void .afob-card__art img{filter:grayscale(1) brightness(.55) blur(2px)}
.afob-card.is-void .afob-card__frame{background:linear-gradient(135deg,#3a3335,#5c5254 50%,#3a3335)}
.afob-card--m{max-width:280px}.afob-card--m .afob-card__holder{font-size:18px}.afob-card--m .afob-card__seal,.afob-card--m .afob-card__seal svg{width:44px;height:44px}
.afob-card--m .afob-card__top{left:14px;right:14px;top:12px}.afob-card--m .afob-card__emblem{width:32px;height:32px}.afob-card--m .afob-card__plate{padding:12px 13px 13px}

/* ---------------------------------------------------------------- Shared controls */
.afob-k{display:flex;align-items:center;gap:8px;margin:0;font:800 12.5px/1.2 var(--afob-fu);letter-spacing:.14em;text-transform:uppercase;color:var(--afob-mut)}
.afob-k--red{color:var(--afob-red)}
.afob-k svg{width:16px;height:16px}
.afob-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 20px;border:1px solid var(--afob-line2);border-radius:99px;background:transparent;color:var(--afob-fg);font:700 15px/1.2 var(--afob-fu);text-decoration:none;cursor:pointer}
.afob-btn:hover{background:var(--afob-s2)}
.afob-btn svg{width:18px;height:18px;flex:none}
.afob-btn--go,.afps-offer .afob-btn--go[data-afps-cta]{border-color:transparent;background:var(--afob-btn);color:#fff}
.afob-btn--go:hover{background:color-mix(in oklab,var(--afob-btn) 86%,#000)}
.afob-link{display:inline-flex;align-items:center;min-height:44px;font:700 14.5px var(--afob-fu);color:var(--afob-red)}
.afob-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.afob-swatch{display:inline-block;width:18px;height:18px;flex:none;border-radius:50%;background:var(--afob-m1);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.afob-tier--t0 .afob-swatch,.afob-swatch--t0{background:var(--afob-m0)}.afob-tier--t2 .afob-swatch,.afob-swatch--t2{background:var(--afob-m2)}
.afob-seg{display:inline-flex;gap:4px;margin:0;padding:4px;border:1px solid var(--afob-line);border-radius:99px;background:var(--afob-bg)}
.afob-seg label{position:relative}
.afob-seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.afob-seg span{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 16px;border-radius:99px;font:700 14px var(--afob-fu);white-space:nowrap}
.afob-seg em{font-style:normal;font-size:12px;padding:2px 8px;border-radius:99px;background:color-mix(in oklab,var(--afob-red) 16%,transparent);color:var(--afob-red)}
.afob-seg input:checked+span{background:var(--afob-fg);color:var(--afob-bg)}
.afob-seg input:checked+span em{background:var(--afob-btn);color:#fff}
.afob-seg input:focus-visible+span,.afob-tier input:focus-visible+span{outline:2px solid var(--afob-red);outline-offset:2px}
.afob-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;border:0}
.afob-tier{position:relative;display:block;cursor:pointer}
.afob-tier input{position:absolute;opacity:0;inset:0;cursor:pointer}
.afob-tier>span{display:grid;justify-items:start;gap:3px;height:100%;padding:10px 12px;border:1px solid var(--afob-line2);border-radius:14px;background:var(--afob-bg)}
.afob-tier b{display:flex;align-items:center;gap:8px;font:700 15px var(--afob-fu)}
.afob-tier small{font:600 13px var(--afob-fu);color:var(--afob-mut)}
.afob-tier input:checked+span{border-color:var(--afob-fg);box-shadow:inset 0 0 0 1px var(--afob-fg);background:var(--afob-s1)}
.afob-tier>span{grid-template-columns:auto 1fr;column-gap:8px}
.afob-tier .afob-swatch{grid-row:span 2;align-self:center}
.afob-y,.afob-c{display:none}
.afob-m{display:inline}
:is(.afob-panel,.afob-offer):has(input[name="period"][value="year"]:checked) .afob-y{display:inline}
:is(.afob-panel,.afob-offer):has(input[name="period"][value="year"]:checked) .afob-m{display:none}
.afob-perks{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.afob-perks li{display:flex;align-items:flex-start;gap:10px;font:600 14.5px/1.35 var(--afob-fu);color:var(--afob-fg);transition:opacity .2s}
.afob-perks svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--afob-red)}
@supports selector(:has(*)){
	.afob-perks li{color:var(--afob-mut);font-weight:500;text-decoration:line-through;text-decoration-thickness:1px}
	.afob-perks li svg{color:var(--afob-mut);opacity:.6}
	:is(.afob-panel,.afob-offer):has(input[name="tier"][value="0"]:checked) .afob-perks li[data-t0],
	:is(.afob-panel,.afob-offer):has(input[name="tier"][value="1"]:checked) .afob-perks li[data-t1],
	:is(.afob-panel,.afob-offer):has(input[name="tier"][value="2"]:checked) .afob-perks li[data-t2]{color:var(--afob-fg);font-weight:600;text-decoration:none}
	:is(.afob-panel,.afob-offer):has(input[name="tier"][value="0"]:checked) .afob-perks li[data-t0] svg,
	:is(.afob-panel,.afob-offer):has(input[name="tier"][value="1"]:checked) .afob-perks li[data-t1] svg,
	:is(.afob-panel,.afob-offer):has(input[name="tier"][value="2"]:checked) .afob-perks li[data-t2] svg{color:var(--afob-red);opacity:1}
	/* The card follows the chosen tier (no JavaScript needed). */
	:is(.afob-panel,.afob-offer):has(input[name="tier"][value="0"]:checked) .afob-card{--afob-m:var(--afob-m0)}
	:is(.afob-panel,.afob-offer):has(input[name="tier"][value="2"]:checked) .afob-card{--afob-m:var(--afob-m2)}
	:is(.afob-panel,.afob-offer):has(input[name="tier"][value="1"]:checked) .afob-card{--afob-m:var(--afob-m1)}
	:is(.afob-panel,.afob-offer):has(input[name="tier"]:checked) .afob-card [data-for-tier]{display:none}
	:is(.afob-panel,.afob-offer):has(input[name="tier"]:checked) .afob-card__tier [data-for-tier]{display:none!important}
	:is(.afob-panel,.afob-offer):has(input[name="tier"][value="0"]:checked) .afob-card [data-for-tier="0"],
	:is(.afob-panel,.afob-offer):has(input[name="tier"][value="1"]:checked) .afob-card [data-for-tier="1"],
	:is(.afob-panel,.afob-offer):has(input[name="tier"][value="2"]:checked) .afob-card [data-for-tier="2"]{display:block}
	:is(.afob-panel,.afob-offer):has(input[name="tier"][value="0"]:checked) .afob-card__tier [data-for-tier="0"],
	:is(.afob-panel,.afob-offer):has(input[name="tier"][value="1"]:checked) .afob-card__tier [data-for-tier="1"],
	:is(.afob-panel,.afob-offer):has(input[name="tier"][value="2"]:checked) .afob-card__tier [data-for-tier="2"]{display:inline!important}
	/* CTA text announces tier, price and period. */
	.afob-panel:has(input[name="tier"][value="0"]:checked):has(input[name="period"][value="month"]:checked) .afob-c--t0-m,
	.afob-panel:has(input[name="tier"][value="0"]:checked):has(input[name="period"][value="year"]:checked) .afob-c--t0-y,
	.afob-panel:has(input[name="tier"][value="1"]:checked):has(input[name="period"][value="month"]:checked) .afob-c--t1-m,
	.afob-panel:has(input[name="tier"][value="1"]:checked):has(input[name="period"][value="year"]:checked) .afob-c--t1-y,
	.afob-panel:has(input[name="tier"][value="2"]:checked):has(input[name="period"][value="month"]:checked) .afob-c--t2-m,
	.afob-panel:has(input[name="tier"][value="2"]:checked):has(input[name="period"][value="year"]:checked) .afob-c--t2-y{display:inline}
}
@supports not selector(:has(*)){.afob-c--t1-m{display:inline}}

/* ---------------------------------------------------------------- Panel (home half, endcard wide, account) */
.afob-panel{container-type:inline-size;border:1px solid var(--afob-line);border-radius:22px;background:var(--afob-s1);color:var(--afob-fg);overflow:hidden}
.afob-panel__in{display:grid;gap:18px;margin:0;padding:clamp(18px,3vw,28px)}
.afob-panel__stage{display:grid;place-items:center;padding:18px;border-radius:18px;background:radial-gradient(120% 90% at 50% 20%,#2a1f20,#0c0a0b 70%)}
.afob-panel__stage .afob-card{max-width:230px}
.afob-panel__body{display:grid;align-content:start;gap:14px;min-width:0}
.afob-t{margin:0;font:700 clamp(23px,2.6vw,30px)/1.12 var(--afob-fd);color:var(--afob-fg)}
.afob-x{margin:0;color:var(--afob-fg2);font:15.5px/1.5 var(--afob-fu)}
.afob-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:0}
.afob-fine{margin:0;font:13px/1.45 var(--afob-fu);color:var(--afob-mut)}
@container (min-width:620px){
	.afob-panel__in{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center}
	.afob-panel__stage{height:100%}
}
@container (max-width:719px){.afob-tiers{grid-template-columns:1fr}.afob-tier>span{grid-template-columns:auto 1fr auto;align-items:center}.afob-tier .afob-swatch{grid-row:auto}.afob-tier small{justify-self:end}}
@container (max-width:419px){.afob-seg{display:flex}.afob-seg label{flex:1}.afob-seg span{justify-content:center}}
.afob-end{margin-top:34px}
.afob-end .afob-panel{background:var(--afob-s1)}

/* Account (/compte/abonnement/) */
.afob-acct{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:24px;align-items:start;padding:22px;border:1px solid var(--afob-line);border-radius:18px;background:var(--afob-s1)}
.afob-acct__body{display:grid;gap:14px;min-width:0}
.afob-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.afob-facts>div{padding:12px 14px;border:1px solid var(--afob-line);border-radius:14px;background:var(--afob-bg)}
.afob-facts dt{font:800 11.5px var(--afob-fu);letter-spacing:.12em;text-transform:uppercase;color:var(--afob-mut)}
.afob-facts dd{margin:4px 0 0;font:700 16px var(--afob-fu);color:var(--afob-fg)}
.afob-facts dd small{display:block;font-weight:600;font-size:13px;color:var(--afob-mut)}
@media (max-width:700px){.afob-acct{grid-template-columns:1fr;justify-items:center}.afob-acct__body{justify-self:stretch}}
@media (max-width:420px){.afob-facts{grid-template-columns:1fr}}