/* ==========================================================================
   Sérénopause · abonnement : jetons, carte de membre et sections intégrées au site
   (pastille d'en-tête, tiroir mobile, menus du compte, section d'accueil, fin d'article, panneau du compte).
   Chargée sur toutes les pages publiques ; les pages du parcours ajoutent site.css.
   Jetons du thème (--sp-*) : clair et sombre suivent html[data-sp-theme]. La carte reste identique dans les deux modes.
   ========================================================================== */

/* --- Jetons de l'habillage -------------------------------------------------- */
.afsp, .afsp-card,
.afsp-sec {
	--afsp-gutter: var(--sp-page-padding, 18px);
	--afsp-max: var(--sp-container-max, 1240px);
	--afsp-paper: #fbf7ef;
	--afsp-paper-deep: #f2e9da;
	--afsp-card-ink: #2a2126;
	--afsp-card-muted: #6f6268;
	--afsp-card-brand: #74304f;
	/* Bandeau prune : mêmes valeurs que la section communauté de l'accueil (40-home.css). */
	--afsp-band: oklch(28% 0.052 345);
	--afsp-band-ink: oklch(96% 0.012 350);
	--afsp-band-muted: oklch(84% 0.026 350);
	--afsp-band-line: oklch(94% 0.02 350 / 18%);
	--afsp-band-accent: oklch(82% 0.1 350);
	--afsp-ring: color-mix(in oklab, var(--sp-brand-primary) 55%, transparent);
}

/* Métal des finitions : bronze (Lecteur), or (Mécène), platine (Bienfaiteur). */
.afsp-card[data-tier="0"], .afsp-swatch--t0, .afsp-opt--t0 { --m-a: #6b4020; --m-b: #ad7645; --m-c: #efc99f; --m-d: #8c5a31; --m-ink: #7a4a26; }
.afsp-card[data-tier="1"], .afsp-swatch--t1, .afsp-opt--t1 { --m-a: #7a5310; --m-b: #c29437; --m-c: #f3dc9a; --m-d: #a57a21; --m-ink: #835812; }
.afsp-card[data-tier="2"], .afsp-swatch--t2, .afsp-opt--t2 { --m-a: #545d67; --m-b: #a5aeb8; --m-c: #f4f6f8; --m-d: #79838e; --m-ink: #4f5862; }
.afsp-card, .afsp-swatch {
	--metal: linear-gradient(135deg, var(--m-a) 0%, var(--m-b) 26%, var(--m-c) 47%, var(--m-b) 64%, var(--m-d) 100%);
}

/* Texte réservé aux lecteurs d'écran (le socle du studio n'est chargé que sur les pages du parcours). */
.afsp-card .afps-sr, .afsp-sec .afps-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- Carte de membre ------------------------------------------------------ */
.afsp-card { container-type: inline-size; position: relative; margin: 0; width: 100%; }
.afsp-card .afsp-card__frame {
	position: relative; aspect-ratio: 1.586; padding: 1.25cqi; border-radius: 4.4cqi;
	background: var(--metal);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%), inset 0 -1px 0 rgb(0 0 0 / 18%), 0 1.5cqi 4cqi -1cqi rgb(42 20 32 / 34%), 0 0.4cqi 1cqi rgb(42 20 32 / 14%);
}
.afsp-card .afsp-card__face {
	position: relative; height: 100%; overflow: hidden; border-radius: 3.3cqi;
	background:
		radial-gradient(120% 95% at 80% 40%, #fffdf9 0%, var(--afsp-paper) 52%, var(--afsp-paper-deep) 100%);
	color: var(--afsp-card-ink);
}
/* Filet intérieur au métal de la finition. */
.afsp-card .afsp-card__face::after {
	content: ""; position: absolute; inset: 2.3cqi; border: 1px solid color-mix(in oklab, var(--m-b) 75%, transparent);
	border-radius: 2.2cqi; pointer-events: none;
}
.afsp-card .afsp-card__art { position: absolute; top: 4.5cqi; right: 3cqi; bottom: 17cqi; width: 54%; }
.afsp-card .afsp-card__art img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: 60% 50%; }
.afsp-card .afsp-card__top { position: absolute; left: 6.6cqi; top: 6.4cqi; display: flex; align-items: center; gap: 1.6cqi; }
.afsp-card .afsp-card__emblem { width: 6.2cqi; height: 6.2cqi; display: block; }
.afsp-card .afsp-card__brand { font-family: var(--sp-font-heading); font-weight: 600; font-size: 5.2cqi; line-height: 1; color: var(--afsp-card-brand); letter-spacing: 0.005em; }
.afsp-card .afsp-card__kind {
	position: absolute; left: 6.6cqi; top: 18.5cqi;
	font: 600 2.15cqi/1 var(--sp-font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--afsp-card-muted);
}
.afsp-card .afsp-card__tier { position: absolute; left: 6.6cqi; top: 22.4cqi; font-family: var(--sp-font-heading); font-style: italic; font-size: 4.6cqi; line-height: 1.1; }
.afsp-card .afsp-card__tier b { font-weight: 600; color: var(--m-ink); }
.afsp-card .afsp-card__holder {
	position: absolute; left: 6.6cqi; bottom: 17.5cqi; width: 46cqi;
	font-family: var(--sp-font-heading); font-size: 6.2cqi; font-weight: 600; line-height: 1.04; color: var(--afsp-card-ink);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.afsp-card .afsp-card__foot { position: absolute; left: 6.6cqi; bottom: 6.6cqi; display: flex; gap: 4.6cqi; }
.afsp-card .afsp-card__foot > span { display: grid; gap: 0.8cqi; }
.afsp-card .afsp-card__foot small { font: 600 1.8cqi/1 var(--sp-font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--afsp-card-muted); }
.afsp-card .afsp-card__foot b { font: 600 3cqi/1 var(--sp-font-body); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; color: var(--afsp-card-ink); }
.afsp-card .afsp-card__seal { position: absolute; right: 5.4cqi; bottom: 4.6cqi; width: 13.5cqi; height: 13.5cqi; filter: drop-shadow(0 0.5cqi 0.8cqi rgb(80 50 20 / 22%)); }
.afsp-card .afsp-card__seal > span, .afsp-card .afsp-card__seal svg { display: block; width: 100%; height: 100%; }
/* Finition sélectionnée (cartes « en direct ») : une seule variante visible. */
.afsp-card[data-tier="0"] [data-for-tier]:not([data-for-tier="0"]),
.afsp-card[data-tier="1"] [data-for-tier]:not([data-for-tier="1"]),
.afsp-card[data-tier="2"] [data-for-tier]:not([data-for-tier="2"]) { display: none; }
.afsp-card.is-void .afsp-card__holder, .afsp-card.is-void .afsp-card__foot b { color: var(--afsp-card-muted); }
.afsp-card.is-pending .afsp-card__seal { opacity: 0.35; filter: grayscale(1); }
.afsp-card.is-revealed { animation: afsp-reveal 0.7s var(--sp-ease) both; }
@keyframes afsp-reveal { from { transform: scale(0.94) rotate(-1.5deg); } to { transform: none; } }
/* Petites cartes : seuls la marque, la formule, le nom et le sceau restent. */
@container (max-width: 330px) {
	.afsp-card .afsp-card__kind, .afsp-card .afsp-card__foot { display: none; }
	.afsp-card .afsp-card__tier { top: 19cqi; font-size: 6.4cqi; }
	.afsp-card .afsp-card__brand { font-size: 6.8cqi; }
	.afsp-card .afsp-card__emblem { width: 8cqi; height: 8cqi; }
	.afsp-card .afsp-card__holder { bottom: 8cqi; font-size: 8cqi; width: 44cqi; -webkit-line-clamp: 1; }
	.afsp-card .afsp-card__art { bottom: 8cqi; }
	.afsp-card .afsp-card__seal { width: 17cqi; height: 17cqi; bottom: 6cqi; right: 6cqi; }
	.afsp-card .afsp-card__face::after { inset: 3cqi; }
}

/* Pastille de métal (nuancier). */
.afsp-swatch {
	display: inline-block; flex: none; width: 1em; height: 1em; border-radius: 50%;
	background: var(--metal); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 14%), 0 1px 2px rgb(0 0 0 / 18%);
}


/* --- En-tête : pastille ----------------------------------------------------- */
.sp-header .afsp-hdr {
	display: none; align-items: center; justify-content: center; gap: var(--sp-space-2); flex: none;
	min-width: 44px; min-height: 44px; padding: 0 var(--sp-space-4); margin-right: var(--sp-space-1);
	border: 1px solid color-mix(in oklab, var(--sp-brand-primary) 38%, var(--sp-border)); border-radius: var(--sp-radius-pill);
	background: color-mix(in oklab, var(--sp-brand-primary) 6%, var(--sp-surface)); color: var(--sp-brand-primary-dark);
	font: 600 var(--sp-text-sm)/1 var(--sp-font-body); text-decoration: none; white-space: nowrap;
	transition: background-color var(--sp-duration) var(--sp-ease), border-color var(--sp-duration) var(--sp-ease), color var(--sp-duration) var(--sp-ease);
}
.sp-header .afsp-hdr:hover { background: color-mix(in oklab, var(--sp-brand-primary) 13%, var(--sp-surface)); border-color: var(--sp-brand-primary); color: var(--sp-brand-primary-dark); }
.sp-header .afsp-hdr:focus-visible { outline: 2px solid var(--sp-brand-primary); outline-offset: 3px; }
.sp-header .afsp-hdr .afsp-hdr__i { width: 20px; height: 20px; color: var(--sp-brand-primary); }
.sp-header .afsp-hdr__seal, .sp-header .afsp-hdr__seal svg { display: block; width: 26px; height: 26px; }
.sp-header .afsp-hdr.is-member { padding-left: 6px; }
/* Place réelle mesurée dans l'en-tête du thème : icône seule de 520 à 639 px et de 800 à 959 px, libellé de 960 à 1439 px,
   icône seule dès 1440 px (navigation complète). Absente sous 520 px et de 640 à 799 px (« Se connecter » et « Nous contacter »
   occupent la ligne) : la tuile du tiroir mobile prend le relais à ces largeurs. */
.sp-header .afsp-hdr .afsp-hdr__label { display: none; }
@media (min-width: 520px) and (max-width: 639px), (min-width: 800px) {
	.sp-header .afsp-hdr, .sp-header .afsp-hdr.is-member { display: inline-flex; padding: 0; width: 44px; }
}
@media (min-width: 960px) and (max-width: 1439px) {
	.sp-header .afsp-hdr, .sp-header .afsp-hdr.is-member { width: auto; padding: 0 var(--sp-space-4); }
	.sp-header .afsp-hdr.is-member { padding-left: 8px; }
	.sp-header .afsp-hdr .afsp-hdr__label { display: inline; }
}

/* Le thème déborde déjà sur le logo de 1440 à 1679 px (navigation complète, puis « Nous contacter » dès 1500 px) :
   dans la plage où la navigation complète tient de justesse, les pictogrammes des rubriques s'effacent et le bouton
   de contact suit la règle que le thème applique déjà de 1280 à 1499 px. La pastille tient alors sans chevauchement. */
@media (min-width: 1440px) and (max-width: 1919px) {
	.sp-header .sp-header__nav .sp-nav__link > .sp-icon { display: none; }
}
@media (min-width: 1440px) and (max-width: 1679px) {
	.sp-header .sp-header__cta { display: none; }
}

/* --- Tiroir mobile : tuile ------------------------------------------------- */
.sp-drawer .afsp-mm {
	display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-space-3);
	padding: var(--sp-space-3); border: 1px solid color-mix(in oklab, var(--sp-brand-primary) 26%, var(--sp-border)); border-radius: var(--sp-radius-md);
	background: linear-gradient(135deg, var(--sp-surface-blush), var(--sp-surface)); color: var(--sp-ink); text-decoration: none;
}
.sp-drawer .afsp-mm:hover { border-color: var(--sp-brand-primary); color: var(--sp-ink); }
.sp-drawer .afsp-mm__art { display: grid; place-items: center; width: 64px; height: 52px; border-radius: 10px; background: #fbf7ef; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 6%); overflow: hidden; }
.sp-drawer .afsp-mm__art img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.sp-drawer .afsp-mm__art--seal { background: transparent; box-shadow: none; }
.sp-drawer .afsp-mm__art--seal svg { width: 44px; height: 44px; }
.sp-drawer .afsp-mm__text { display: grid; gap: 2px; min-width: 0; line-height: 1.3; }
.sp-drawer .afsp-mm__text b { font-family: var(--sp-font-heading); font-size: 1.25rem; font-weight: 600; color: var(--sp-ink); }
.sp-drawer .afsp-mm__text small { color: var(--sp-ink-soft); font-size: var(--sp-text-xs); }
.sp-drawer .afsp-mm__go { width: 20px; height: 20px; color: var(--sp-brand-primary); }

/* --- Menus du compte : lien « Devenir membre » / « Mon abonnement » ---------- */
.sp-member-menu .afsp-ml .afsp-ml__i { width: 19px; height: 19px; flex: none; color: var(--sp-brand-primary); }
.spc-account__menu .afsp-al .afsp-al__i { width: 18px; height: 18px; flex: none; color: var(--sp-brand-primary); }

/* --- Accueil ---------------------------------------------------------------- */
.afsp-home.afsp-sec {
	padding-block: var(--sp-space-8);
	background: linear-gradient(120deg, var(--sp-surface-blush) 0%, color-mix(in oklab, var(--sp-surface-blush) 45%, var(--sp-background)) 55%, var(--sp-background) 100%);
	border-block: 1px solid var(--sp-border);
}
.afsp-home .afsp-home__grid { display: grid; gap: var(--sp-space-7); align-items: center; }
.afsp-home .afsp-home__text { display: grid; gap: var(--sp-space-4); justify-items: start; min-width: 0; }
.afsp-home .afsp-home__eyebrow {
	display: inline-flex; align-items: center; gap: var(--sp-space-2); margin: 0; padding: var(--sp-space-2) var(--sp-space-4);
	background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-pill);
	color: var(--sp-brand-primary-dark); font: 600 var(--sp-text-xs)/1.2 var(--sp-font-body); letter-spacing: var(--sp-tracking-caps); text-transform: uppercase;
}
.afsp-home .afsp-home__eyebrow .afsp-i { width: 16px; height: 16px; color: var(--sp-brand-primary); }
.afsp-home .afsp-home__title { margin: 0; font-family: var(--sp-font-heading); font-size: var(--sp-text-3xl); font-weight: 600; line-height: var(--sp-leading-tight); color: var(--sp-ink); }
.afsp-home .afsp-home__title em { font-style: italic; color: var(--sp-brand-primary); }
.afsp-home .afsp-home__lede { margin: 0; max-width: 56ch; color: var(--sp-ink-soft); font-size: var(--sp-text-md); line-height: var(--sp-leading-normal); }
.afsp-home .afsp-home__plans { display: grid; gap: var(--sp-space-3); width: 100%; margin: var(--sp-space-2) 0 0; padding: 0; list-style: none; }
.afsp-home .afsp-home__plans li { margin: 0; }
.afsp-home .afsp-home__plans a {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-space-3);
	padding: var(--sp-space-3) var(--sp-space-4); background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md);
	color: var(--sp-ink); text-decoration: none; transition: border-color var(--sp-duration) var(--sp-ease), box-shadow var(--sp-duration) var(--sp-ease);
}
.afsp-home .afsp-home__plans a:hover { border-color: var(--sp-brand-primary); box-shadow: var(--sp-shadow-soft); color: var(--sp-ink); }
.afsp-home .afsp-home__plans .afsp-swatch { font-size: 22px; }
.afsp-home .afsp-home__plans span { display: grid; line-height: 1.25; min-width: 0; }
.afsp-home .afsp-home__plans b { font-family: var(--sp-font-heading); font-size: 1.25rem; font-weight: 600; color: var(--sp-ink); }
.afsp-home .afsp-home__plans small { color: var(--sp-ink-soft); font-size: var(--sp-text-xs); }
.afsp-home .afsp-home__price { justify-items: end; text-align: right; }
.afsp-home .afsp-home__price b { font-variant-numeric: lining-nums; white-space: nowrap; }
.afsp-home .afsp-home__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-space-3) var(--sp-space-5); margin: var(--sp-space-2) 0 0; }
.afsp-home .afsp-home__cta .sp-btn { gap: var(--sp-space-2); }
.afsp-home .afsp-home__cta .sp-btn .afsp-i { width: 18px; height: 18px; }
.afsp-home .afsp-home__cta > span { display: inline-flex; align-items: center; gap: var(--sp-space-2); color: var(--sp-ink-soft); font-size: var(--sp-text-sm); }
.afsp-home .afsp-home__cta > span .afsp-i { width: 18px; height: 18px; color: var(--sp-brand-primary); }
.afsp-home .afsp-home__visual { display: grid; gap: var(--sp-space-5); justify-items: center; min-width: 0; }
.afsp-home .afsp-home__card { width: min(100%, 470px); transform: rotate(-2deg); }
.afsp-home .afsp-home__seals { display: grid; gap: var(--sp-space-2); justify-items: center; text-align: center; }
.afsp-home .afsp-home__seals-row { display: flex; gap: 4px; padding: 6px 10px; border-radius: var(--sp-radius-pill); background: var(--sp-surface); border: 1px solid var(--sp-border); }
.afsp-home .afsp-home__seals-row img { width: 42px; height: 42px; }
.afsp-home .afsp-home__seals small { color: var(--sp-ink-soft); font-size: var(--sp-text-xs); }
@media (min-width: 640px) { .afsp-home .afsp-home__plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } .afsp-home .afsp-home__plans a { grid-template-columns: auto minmax(0, 1fr); } .afsp-home .afsp-home__price { grid-column: 2; justify-items: start; text-align: left; } }
@media (min-width: 1024px) {
	.afsp-home.afsp-sec { padding-block: var(--sp-space-9); }
	.afsp-home .afsp-home__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); column-gap: var(--sp-space-9); }
}
@media (max-width: 1023px) { .afsp-home .afsp-home__visual { order: -1; } }
@media (max-width: 400px) { .afsp-home .afsp-home__seals-row img { width: 36px; height: 36px; } }

/* --- Fin d'article (dans .sp-article-body : résiste à la typographie de lecture) -- */
.afsp-sec.afsp-end {
	display: grid; gap: var(--sp-space-5); margin-top: var(--sp-space-8); padding: var(--sp-space-5);
	border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg);
	background: linear-gradient(150deg, var(--sp-surface-blush), var(--sp-surface) 70%);
	font-family: var(--sp-font-body); font-size: var(--sp-text-md); line-height: 1.5; letter-spacing: 0;
}
.afsp-sec.afsp-end .afsp-end__card { width: min(100%, 250px); justify-self: center; transform: rotate(-2deg); }
.afsp-sec.afsp-end .afsp-end__body { display: grid; gap: var(--sp-space-3); align-content: center; min-width: 0; }
.afsp-sec.afsp-end .afsp-end__kicker { display: inline-flex; align-items: center; gap: var(--sp-space-2); margin: 0; color: var(--sp-brand-primary-dark); font: 700 var(--sp-text-xs)/1.3 var(--sp-font-body); letter-spacing: var(--sp-tracking-caps); text-transform: uppercase; }
.afsp-sec.afsp-end .afsp-end__kicker .afsp-i { width: 16px; height: 16px; color: var(--sp-brand-primary); }
.afsp-sec.afsp-end .afsp-end__title { margin: 0; color: var(--sp-ink); font-family: var(--sp-font-heading); font-size: 1.65rem; font-weight: 600; line-height: 1.15; text-wrap: balance; }
.afsp-sec.afsp-end .afsp-end__lede { margin: 0; color: var(--sp-ink-soft); font-family: var(--sp-font-body); font-size: var(--sp-text-sm); line-height: 1.6; }
.afsp-sec.afsp-end .afsp-end__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-space-3) var(--sp-space-5); margin: var(--sp-space-1) 0 0; }
.afsp-sec.afsp-end .afsp-end__btn {
	display: inline-flex; align-items: center; gap: var(--sp-space-2); min-height: 46px; padding: 0 var(--sp-space-5);
	border-radius: var(--sp-radius-pill); background: var(--sp-brand-primary); color: var(--sp-on-accent);
	font: 600 var(--sp-text-sm)/1 var(--sp-font-body); text-decoration: none;
}
.afsp-sec.afsp-end .afsp-end__btn:hover { background: var(--sp-brand-primary-dark); color: var(--sp-on-accent); }
.afsp-sec.afsp-end .afsp-end__btn .afsp-i { width: 18px; height: 18px; }
.afsp-sec.afsp-end .afsp-end__link { color: var(--sp-brand-primary-dark); font: 600 var(--sp-text-sm)/1.3 var(--sp-font-body); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) {
	.afsp-sec.afsp-end { grid-template-columns: 210px minmax(0, 1fr); align-items: center; gap: var(--sp-space-6); padding: var(--sp-space-6); }
	.afsp-sec.afsp-end .afsp-end__card { width: 100%; }
}

/* --- Compte : panneau de la vue d'ensemble ---------------------------------- */
.afsp-sec.afsp-acc {
	display: grid; gap: var(--sp-space-4); margin-block: var(--sp-space-5); padding: var(--sp-space-5);
	border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg);
	background: linear-gradient(140deg, var(--sp-surface-blush), var(--sp-surface) 65%);
}
.afsp-sec.afsp-acc .afsp-acc__card { width: min(100%, 220px); }
.afsp-sec.afsp-acc .afsp-acc__body { display: grid; gap: var(--sp-space-2); min-width: 0; }
.afsp-sec.afsp-acc .afsp-acc__kicker { display: inline-flex; align-items: center; gap: var(--sp-space-2); margin: 0; color: var(--sp-brand-primary-dark); font: 700 var(--sp-text-xs)/1.3 var(--sp-font-body); letter-spacing: var(--sp-tracking-caps); text-transform: uppercase; }
.afsp-sec.afsp-acc .afsp-acc__kicker .afsp-i { width: 16px; height: 16px; color: var(--sp-brand-primary); }
.afsp-sec.afsp-acc .afsp-acc__title { margin: 0; color: var(--sp-ink); font-family: var(--sp-font-heading); font-size: var(--sp-text-xl); font-weight: 600; line-height: 1.2; }
.afsp-sec.afsp-acc .afsp-acc__lede { margin: 0; color: var(--sp-ink-soft); font-size: var(--sp-text-sm); line-height: 1.55; }
.afsp-sec.afsp-acc .afsp-acc__go { justify-self: start; gap: var(--sp-space-2); white-space: nowrap; }
.afsp-sec.afsp-acc .afsp-acc__go .afsp-i { width: 18px; height: 18px; }
@media (min-width: 900px) {
	.afsp-sec.afsp-acc { grid-template-columns: 200px minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-space-6); }
	.afsp-sec.afsp-acc .afsp-acc__card { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.afsp-sec *, .afsp-hdr, .afsp-mm { transition: none !important; animation: none !important; }
}