/* ==========================================================================
   Sérénopause · pages d'abonnement (habillage AdFree Pass)
   Construit sur les jetons du thème (--sp-*) : clair et sombre suivent html[data-sp-theme].
   Seule la carte de membre (papier, aquarelle, métal) reste identique dans les deux modes.
   Jetons, métaux, carte de membre et nuancier : sections.css (chargée sur toutes les pages publiques).
   Spécificité : le thème pose .sp-site h1…h4 / p / a en (0,1,1) et Blocksy réinitialise label, button,
   figure, img hors couche : chaque règle passe par .afsp (0,2,0 au moins). Réinitialisations en :where().
   ========================================================================== */

/* --- Socle de page -------------------------------------------------------- */
.afps-page .afps-main .afps-wrap { width: 100%; max-width: none; margin: 0; padding: 0; }
.afsp :where(h1, h2, h3, p, ul, ol, li, figure, dl, dd, fieldset, legend) { margin: 0; padding: 0; }
.afsp :where(ul, ol) { list-style: none; }
.afsp :where(fieldset) { border: 0; min-width: 0; }
.afsp :where(img) { max-width: 100%; height: auto; }
.afsp .afsp-wrap { width: min(100% - 2 * var(--afsp-gutter), var(--afsp-max)); margin-inline: auto; }
.afsp .afsp-i { width: 1.15em; height: 1.15em; flex: none; }
.afsp-nw { white-space: nowrap; }

.afsp .afsp-eyebrow {
	display: inline-flex; align-items: center; gap: var(--sp-space-2);
	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 .afsp-eyebrow .afsp-i { color: var(--sp-brand-primary); }
.afsp .afsp-kicker {
	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 .afsp-kicker--on-dark { color: var(--afsp-band-accent); }
.afsp .afsp-h1, .afsp .afsp-h2, .afsp .afsp-h3, .afsp .afps-title {
	font-family: var(--sp-font-heading); font-weight: 600; color: var(--sp-ink); line-height: var(--sp-leading-tight); text-wrap: balance;
}
.afsp .afsp-h1 { font-size: var(--sp-text-4xl); }
.afsp .afsp-h2 { font-size: var(--sp-text-3xl); margin-top: var(--sp-space-2); }
.afsp .afsp-h3 { font-size: var(--sp-text-xl); }
.afsp .afsp-sub { margin-top: var(--sp-space-3); color: var(--sp-ink-soft); font-size: var(--sp-text-md); line-height: var(--sp-leading-normal); max-width: 62ch; }
.afsp .afsp-lede { color: var(--sp-ink-soft); font-size: var(--sp-text-lg); line-height: var(--sp-leading-normal); max-width: 56ch; }
.afsp .afsp-head { text-align: center; margin-bottom: var(--sp-space-7); }
.afsp .afsp-head .afsp-sub { margin-inline: auto; }
.afsp .afsp-head--left { text-align: left; margin-bottom: 0; }
.afsp .afsp-head--left .afsp-sub { margin-inline: 0; }

.afsp .afsp-actions { display: flex; flex-wrap: wrap; gap: var(--sp-space-3); margin-top: var(--sp-space-5); }
.afsp .afsp-btn { gap: var(--sp-space-2); text-decoration: none; }
.afsp .afsp-btn .afsp-i { width: 1.1em; height: 1.1em; }
.afsp a.sp-btn--primary, .afsp a.sp-btn--primary:hover { color: var(--sp-on-accent); }
.afsp a.sp-btn--secondary { color: var(--sp-ink); }
.afsp a.sp-btn--secondary:hover { color: var(--sp-brand-primary-dark); }

.afsp .afsp-note, .afsp .afsp-alert {
	display: flex; gap: var(--sp-space-3); align-items: flex-start;
	padding: var(--sp-space-4) var(--sp-space-5); margin-bottom: var(--sp-space-5);
	border-radius: var(--sp-radius-md); font-size: var(--sp-text-sm); line-height: 1.55;
	background: var(--sp-highlight-soft); color: var(--sp-ink);
}
.afsp .afsp-note .afsp-i { color: var(--sp-highlight-ink); margin-top: 2px; }
.afsp .afsp-alert { background: color-mix(in oklab, var(--sp-danger) 12%, var(--sp-surface)); }
.afsp .afsp-alert .afsp-i { color: var(--sp-danger); margin-top: 2px; }

/* --- Formules : configurateur -------------------------------------------- */
.afsp-offer .afsp-buy {
	padding-block: var(--sp-space-7) var(--sp-space-8);
	background: linear-gradient(180deg, var(--sp-surface-blush) 0%, color-mix(in oklab, var(--sp-surface-blush) 40%, var(--sp-background)) 46%, var(--sp-background) 100%);
	border-bottom: 1px solid var(--sp-border);
}
.afsp-offer .afsp-buy__grid { display: grid; gap: var(--sp-space-6); grid-template-columns: minmax(0, 1fr); }
.afsp-offer .afsp-buy__head { display: grid; gap: var(--sp-space-4); justify-items: start; }
.afsp-offer .afsp-buy__title { font-size: var(--sp-text-4xl); }
.afsp-offer .afsp-buy__title em { font-style: italic; color: var(--sp-brand-primary); }

.afsp-offer .afsp-stage { position: relative; width: min(100%, 540px); margin-inline: auto; padding: 4% 9% 9%; }
.afsp-offer .afsp-stage__front { position: relative; z-index: 3; }
.afsp-offer .afsp-stage__back { position: absolute; z-index: 1; top: 4%; left: 9%; right: 9%; transition: transform 0.5s var(--sp-ease); }
.afsp-offer .afsp-stage__back--0 { transform: translate(-13%, 9%) rotate(-7deg) scale(0.88); }
.afsp-offer .afsp-stage__back--1 { transform: translate(13%, 9%) rotate(7deg) scale(0.88); }
.afsp-offer .afsp-buy__stage {
	display: grid; align-content: center; justify-items: center; gap: var(--sp-space-4); min-width: 0;
	padding: var(--sp-space-5) var(--sp-space-4) var(--sp-space-6);
	border: 1px solid var(--sp-border); border-radius: var(--sp-radius-xl);
	background: radial-gradient(90% 70% at 50% 38%, var(--sp-surface) 0%, color-mix(in oklab, var(--sp-surface-blush) 70%, var(--sp-surface)) 58%, var(--sp-surface-blush) 100%);
	overflow: hidden;
}
.afsp-offer .afsp-stage__caption {
	display: flex; align-items: center; justify-content: center; gap: var(--sp-space-2);
	padding: 6px 14px; border-radius: var(--sp-radius-pill); background: var(--sp-surface); border: 1px solid var(--sp-border);
	color: var(--sp-ink); font-size: var(--sp-text-sm); font-weight: 600;
}
.afsp-offer .afsp-stage__caption .afsp-swatch { font-size: 14px; }
.afsp-offer .afsp-buy__stage .afsp-incl { width: min(100%, 520px); margin-top: var(--sp-space-2); background: color-mix(in oklab, var(--sp-surface) 78%, transparent); border: 1px solid var(--sp-border); }

.afsp-offer .afsp-buy__panel { min-width: 0; }
.afsp-offer .afsp-picker { display: grid; gap: var(--sp-space-5); }
.afsp-offer .afsp-step {
	display: flex; align-items: center; gap: var(--sp-space-2); margin-bottom: var(--sp-space-3);
	color: var(--sp-ink); font: 700 var(--sp-text-sm)/1.2 var(--sp-font-body);
}
.afsp-offer .afsp-step span {
	display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
	background: var(--sp-brand-primary); color: var(--sp-on-accent); font-size: var(--sp-text-xs);
}

.afsp-offer .afsp-period__track {
	display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
	background: var(--sp-surface-soft); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-pill);
}
.afsp-offer .afsp-period__opt { position: relative; display: block; margin: 0; cursor: pointer; }
.afsp-offer .afsp-period__opt input, .afsp-offer .afsp-opt__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.afsp-offer .afsp-period__opt span {
	display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; min-height: 44px; padding: 6px 12px;
	border-radius: var(--sp-radius-pill); color: var(--sp-ink-soft); font: 600 var(--sp-text-sm)/1.2 var(--sp-font-body); text-align: center;
	transition: background-color var(--sp-duration) var(--sp-ease), color var(--sp-duration) var(--sp-ease), box-shadow var(--sp-duration) var(--sp-ease);
}
.afsp-offer .afsp-period__opt em { font-style: normal; font-size: var(--sp-text-xs); font-weight: 700; color: var(--sp-success); }
.afsp-offer .afsp-period__opt input:checked + span { background: var(--sp-surface); color: var(--sp-brand-primary-dark); box-shadow: 0 1px 2px rgb(55 32 45 / 10%), 0 4px 14px rgb(55 32 45 / 8%); }
.afsp-offer .afsp-period__opt input:focus-visible + span { outline: 2px solid var(--sp-brand-primary); outline-offset: 2px; }

.afsp-offer .afsp-tiers { display: grid; gap: var(--sp-space-3); }
.afsp-offer .afsp-opt {
	position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-space-4);
	margin: 0; padding: var(--sp-space-3) var(--sp-space-5) var(--sp-space-3) var(--sp-space-3);
	background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md);
	cursor: pointer; transition: border-color var(--sp-duration) var(--sp-ease), box-shadow var(--sp-duration) var(--sp-ease), background-color var(--sp-duration) var(--sp-ease);
}
.afsp-offer .afsp-opt:hover { border-color: var(--sp-brand-primary-light); }
.afsp-offer .afsp-opt:has(input:checked) {
	border-color: var(--sp-brand-primary); box-shadow: 0 0 0 1px var(--sp-brand-primary), var(--sp-shadow-soft);
	background: color-mix(in oklab, var(--sp-brand-primary) 4%, var(--sp-surface));
}
.afsp-offer .afsp-opt:has(input:focus-visible) { outline: 2px solid var(--sp-brand-primary); outline-offset: 3px; }
.afsp-offer .afsp-opt__art {
	position: relative; display: block; width: 76px; height: 60px; border-radius: 12px;
	background: radial-gradient(110% 100% at 60% 40%, #fffdf9, var(--afsp-paper) 60%, var(--afsp-paper-deep));
	box-shadow: inset 0 0 0 2px transparent; border: 2px solid transparent; background-clip: padding-box;
}
.afsp-offer .afsp-opt__art::before { content: ""; position: absolute; inset: -2px; border-radius: 12px; padding: 2px; background: var(--metal, linear-gradient(#ccc, #ccc)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.afsp-offer .afsp-opt--t0 .afsp-opt__art::before, .afsp-offer .afsp-opt--t1 .afsp-opt__art::before, .afsp-offer .afsp-opt--t2 .afsp-opt__art::before {
	background: linear-gradient(135deg, var(--m-a) 0%, var(--m-b) 26%, var(--m-c) 47%, var(--m-b) 64%, var(--m-d) 100%);
}
.afsp-offer .afsp-opt__art img { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain; }
.afsp-offer .afsp-opt__art .afsp-swatch { position: absolute; right: -6px; bottom: -6px; font-size: 18px; box-shadow: 0 0 0 2px var(--sp-surface), 0 1px 3px rgb(0 0 0 / 25%); }
.afsp-offer .afsp-opt__body { display: grid; gap: 2px; min-width: 0; }
.afsp-offer .afsp-opt__name { font-family: var(--sp-font-heading); font-size: 1.5rem; font-weight: 600; line-height: 1.1; color: var(--sp-ink); }
.afsp-offer .afsp-opt__finish { color: var(--sp-ink-soft); font-size: var(--sp-text-sm); line-height: 1.35; }
.afsp-offer .afsp-opt__price { display: grid; justify-items: end; text-align: right; gap: 2px; }
.afsp-offer .afsp-opt__price b { font-family: var(--sp-font-heading); font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--sp-ink); font-variant-numeric: lining-nums; white-space: nowrap; }
.afsp-offer .afsp-opt__price small { color: var(--sp-ink-soft); font-size: var(--sp-text-xs); line-height: 1.3; max-width: 13ch; }
.afsp-offer .afsp-opt__tick {
	position: absolute; top: -9px; right: -9px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
	background: var(--sp-brand-primary); color: var(--sp-on-accent); box-shadow: 0 0 0 3px var(--sp-background);
	opacity: 0; transform: scale(0.6); transition: opacity var(--sp-duration) var(--sp-ease), transform var(--sp-duration) var(--sp-ease);
}
.afsp-offer .afsp-opt__tick .afsp-i { width: 14px; height: 14px; }
.afsp-offer .afsp-opt:has(input:checked) .afsp-opt__tick { opacity: 1; transform: none; }

.afsp-offer .afsp-incl { padding: var(--sp-space-4) var(--sp-space-5); background: var(--sp-surface-soft); border-radius: var(--sp-radius-md); }
.afsp-offer .afsp-incl__title { display: flex; align-items: center; gap: var(--sp-space-2); margin-bottom: var(--sp-space-3); color: var(--sp-ink); font-weight: 700; font-size: var(--sp-text-sm); }
.afsp-offer .afsp-incl__title .afsp-i { color: var(--sp-brand-primary); }
.afsp-offer .afsp-incl ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: var(--sp-space-2) var(--sp-space-5); }
.afsp-offer .afsp-incl li { display: flex; gap: var(--sp-space-2); align-items: flex-start; color: var(--sp-ink-soft); font-size: var(--sp-text-sm); line-height: 1.4; }
.afsp-offer .afsp-incl li .afsp-i { color: var(--sp-success); margin-top: 1px; }

.afsp-offer .afsp-checkout {
	display: flex; align-items: center; justify-content: space-between; gap: var(--sp-space-4);
	padding: var(--sp-space-3) var(--sp-space-3) var(--sp-space-3) var(--sp-space-5);
	background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-pill); box-shadow: var(--sp-shadow-card);
}
.afsp-offer .afsp-checkout__sum { display: flex; align-items: center; gap: var(--sp-space-3); min-width: 0; }
.afsp-offer .afsp-checkout__sum > span:last-child { display: grid; line-height: 1.2; }
.afsp-offer .afsp-checkout__sum b { font-family: var(--sp-font-heading); font-size: 1.3rem; color: var(--sp-ink); }
.afsp-offer .afsp-checkout__sum small { color: var(--sp-ink-soft); font-size: var(--sp-text-sm); white-space: nowrap; }
.afsp-offer .afsp-checkout__mini .afsp-swatch { font-size: 22px; }
body.sp-site .afsp-offer .afsp-checkout .afsp-cta[data-afps-cta] {
	flex: none; min-height: 52px; padding-inline: var(--sp-space-6); background: var(--sp-brand-primary); color: var(--sp-on-accent);
	border: 0; font-size: var(--sp-text-md); white-space: nowrap;
}
body.sp-site .afsp-offer .afsp-checkout .afsp-cta[data-afps-cta]:hover { background: var(--sp-brand-primary-dark); color: var(--sp-on-accent); }
body.sp-site .afsp-offer .afsp-checkout .afsp-cta[data-afps-cta]:focus-visible { outline: 2px solid var(--sp-brand-primary); outline-offset: 3px; }
.afsp-offer .afsp-assure { display: grid; gap: var(--sp-space-2); }
.afsp-offer .afsp-assure li { display: flex; gap: var(--sp-space-2); align-items: center; color: var(--sp-ink-soft); font-size: var(--sp-text-sm); line-height: 1.4; }
.afsp-offer .afsp-assure .afsp-i { color: var(--sp-brand-primary); }

@media (min-width: 1024px) {
	.afsp-offer .afsp-buy { padding-block: var(--sp-space-8) var(--sp-space-9); }
	.afsp-offer .afsp-buy__grid {
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 88px); row-gap: var(--sp-space-5);
		grid-template-areas: "head head" "stage panel"; align-items: start; row-gap: var(--sp-space-7);
	}
	.afsp-offer .afsp-buy__head { grid-area: head; justify-items: center; text-align: center; }
	.afsp-offer .afsp-buy__head .afsp-lede { margin-inline: auto; max-width: 64ch; }
	.afsp-offer .afsp-buy__panel { grid-area: panel; }
	.afsp-offer .afsp-buy__grid { align-items: stretch; }
	.afsp-offer .afsp-buy__head, .afsp-offer .afsp-buy__panel { align-self: start; }
	.afsp-offer .afsp-buy__stage { grid-area: stage; align-self: stretch; padding: var(--sp-space-6) var(--sp-space-5); }
	.afsp-offer .afsp-stage { width: min(100%, 600px); }
}
@media (max-width: 1023px) {
	.afsp-offer .afsp-buy__head { justify-items: center; text-align: center; }
	.afsp-offer .afsp-buy__head .afsp-lede { margin-inline: auto; }
	.afsp-offer .afsp-buy__panel { width: min(100%, 640px); margin-inline: auto; }
}
@media (max-width: 639px) {
	.afsp-offer .afsp-buy { padding-top: var(--sp-space-6); }
	.afsp-offer .afsp-buy__title { font-size: 2.35rem; }
	.afsp-offer .afsp-lede { font-size: var(--sp-text-md); }
	.afsp-offer .afsp-stage { padding-inline: 11%; }
	.afsp-offer .afsp-opt { grid-template-columns: 60px minmax(0, 1fr) auto; gap: var(--sp-space-3); padding-right: var(--sp-space-4); }
	.afsp-offer .afsp-opt__art { width: 60px; height: 48px; }
	.afsp-offer .afsp-opt__name { font-size: 1.3rem; }
	.afsp-offer .afsp-opt__price b { font-size: 1.35rem; }
	.afsp-offer .afsp-opt__finish { font-size: var(--sp-text-xs); }
	.afsp-offer .afsp-checkout { flex-wrap: wrap; border-radius: var(--sp-radius-lg); padding: var(--sp-space-4); }
	.afsp-offer .afsp-checkout__sum { width: 100%; justify-content: center; }
	body.sp-site .afsp-offer .afsp-checkout .afsp-cta[data-afps-cta] { width: 100%; padding-inline: var(--sp-space-4); font-size: var(--sp-text-sm); white-space: normal; text-align: center; }
	.afsp-offer .afsp-checkout__sum b { font-size: 1.15rem; }
}

/* --- Avantages : grille ---------------------------------------------------- */
.afsp .afsp-perks { padding-block: var(--sp-space-8); }
.afsp .afsp-bento { display: grid; gap: var(--sp-space-4); grid-template-columns: minmax(0, 1fr); }
.afsp .afsp-tile {
	display: grid; align-content: start; gap: var(--sp-space-3); padding: var(--sp-space-6);
	background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg);
}
.afsp .afsp-tile p { color: var(--sp-ink-soft); font-size: var(--sp-text-sm); line-height: 1.6; }
.afsp .afsp-tile__i {
	display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
	background: var(--sp-surface-blush); color: var(--sp-brand-primary-dark);
}
.afsp .afsp-tile__i .afsp-i { width: 22px; height: 22px; }
.afsp .afsp-tile--finishes { gap: var(--sp-space-6); background: linear-gradient(160deg, var(--sp-surface-blush), var(--sp-surface) 60%); }
.afsp .afsp-tile__text { display: grid; gap: var(--sp-space-3); }
.afsp .afsp-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-space-3); align-items: end; }
.afsp .afsp-trio__item { display: grid; gap: var(--sp-space-3); justify-items: center; }
.afsp .afsp-trio__label { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; color: var(--sp-ink-soft); font-size: var(--sp-text-xs); text-align: center; line-height: 1.3; }
.afsp .afsp-trio__label b { color: var(--sp-ink); font-size: var(--sp-text-sm); }
.afsp .afsp-tile--seal { background: linear-gradient(160deg, var(--sp-highlight-soft), var(--sp-surface) 70%); }
.afsp .afsp-tile__seals { display: flex; gap: var(--sp-space-2); margin-top: var(--sp-space-2); }
.afsp .afsp-tile__seals img { width: 64px; height: 64px; }
.afsp .afsp-bento > .afsp-tile:nth-child(n+3) { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-space-4); align-items: start; padding: var(--sp-space-5); }
.afsp .afsp-bento > .afsp-tile:nth-child(n+3) .afsp-tile__i { grid-row: 1 / span 2; }
.afsp .afsp-tile__seals { display: flex; justify-content: space-between; gap: 4px; }
.afsp .afsp-tile__seals > span { display: grid; justify-items: center; gap: 4px; }
.afsp .afsp-tile__seals small { color: var(--sp-ink-soft); font-size: 0.6875rem; line-height: 1.2; white-space: nowrap; }
.afsp .afsp-tile__seals img { width: 38px; height: 38px; }
.afsp .afsp-tile--seal { display: flex; flex-direction: column; }
.afsp .afsp-tile--seal .afsp-tile__seals { margin-top: auto; padding-top: var(--sp-space-3); }
@media (min-width: 480px) { .afsp .afsp-tile__seals img { width: 48px; height: 48px; } }
@media (min-width: 700px) {
	.afsp .afsp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.afsp .afsp-tile--finishes, .afsp .afsp-tile--seal { grid-column: span 2; }
}
@media (min-width: 1100px) {
	.afsp .afsp-perks { padding-block: var(--sp-space-9); }
	.afsp .afsp-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.afsp .afsp-tile--finishes, .afsp .afsp-tile--seal { grid-column: span 2; }
	.afsp .afsp-tile__seals { gap: var(--sp-space-2); }
	.afsp .afsp-tile__seals img { width: 64px; height: 64px; }
	.afsp .afsp-bento > .afsp-tile:nth-child(n+3) { grid-template-columns: minmax(0, 1fr); }
	.afsp .afsp-bento > .afsp-tile:nth-child(n+3) .afsp-tile__i { grid-row: auto; }
}

/* --- Frise des sept sceaux (bandeau prune, comme la communauté) ------------ */
.afsp .afsp-seals { padding-block: var(--sp-space-8); background: var(--afsp-band); color: var(--afsp-band-ink); }
.afsp .afsp-seals .afsp-h2 { color: var(--afsp-band-ink); }
.afsp .afsp-seals .afsp-sub { color: var(--afsp-band-muted); margin-top: 0; }
.afsp .afsp-seals__head { display: grid; gap: var(--sp-space-4); margin-bottom: var(--sp-space-7); }
.afsp .afsp-frise { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-space-5) var(--sp-space-2); }
.afsp .afsp-frise > li { flex: 0 0 calc(25% - var(--sp-space-2)); min-width: 0; }
.afsp .afsp-frise__step { position: relative; display: grid; justify-items: center; gap: var(--sp-space-2); text-align: center; scroll-snap-align: start; }
.afsp .afsp-frise__step::before { display: none; content: ""; position: absolute; top: 50px; left: calc(-50% - var(--sp-space-3) / 2); width: calc(100% + var(--sp-space-3)); height: 1px; background: var(--afsp-band-line); }

.afsp .afsp-frise__seal { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(closest-side, oklch(34% 0.06 345), var(--afsp-band) 100%); box-shadow: inset 0 0 0 1px var(--afsp-band-line); }
.afsp .afsp-frise__seal img { width: 64px; height: 64px; }
.afsp .afsp-frise__step b { font-family: var(--sp-font-heading); font-size: 1.05rem; overflow-wrap: anywhere; font-weight: 600; line-height: 1.15; color: var(--afsp-band-ink); }
.afsp .afsp-frise__step small { color: var(--afsp-band-muted); font-size: var(--sp-text-xs); line-height: 1.3; }
.afsp .afsp-metals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-space-3); margin-top: var(--sp-space-6); padding-top: var(--sp-space-6); border-top: 1px solid var(--afsp-band-line); }
.afsp .afsp-metals li { display: grid; justify-items: center; gap: var(--sp-space-2); text-align: center; }
@media (min-width: 700px) {
	.afsp .afsp-metals { display: flex; justify-content: center; gap: var(--sp-space-4) var(--sp-space-7); }
	.afsp .afsp-metals li { display: flex; text-align: left; gap: var(--sp-space-3); }
}
.afsp .afsp-metals svg { width: 56px; height: 56px; }
.afsp .afsp-metals span { display: grid; line-height: 1.25; }
.afsp .afsp-metals b { font-family: var(--sp-font-heading); font-size: 1.2rem; color: var(--afsp-band-ink); }
.afsp .afsp-metals small { color: var(--afsp-band-muted); font-size: var(--sp-text-xs); }
@media (min-width: 1024px) {
	.afsp .afsp-seals { padding-block: var(--sp-space-9); }
	.afsp .afsp-seals__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: var(--sp-space-8); }
	.afsp .afsp-frise { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--sp-space-3); }
	.afsp .afsp-frise__step::before { display: block; top: 50px; }
	.afsp .afsp-frise__step:first-child::before { display: none; }
	.afsp .afsp-frise__seal { width: 100px; height: 100px; }
	.afsp .afsp-frise__seal img { width: 84px; height: 84px; }
	.afsp .afsp-frise__step b { font-size: 1.2rem; }
}

/* --- Univers ouverts à toutes ---------------------------------------------- */
.afsp .afsp-reading { padding-block: var(--sp-space-8); border-bottom: 1px solid var(--sp-border); }
.afsp .afsp-reading__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-space-5); margin-bottom: var(--sp-space-6); }
.afsp .afsp-figures { display: flex; gap: var(--sp-space-6); }
.afsp .afsp-figures li { display: grid; line-height: 1.15; }
.afsp .afsp-figures b { font-family: var(--sp-font-heading); font-size: 2.6rem; font-weight: 600; color: var(--sp-brand-primary-dark); }
.afsp .afsp-figures small { color: var(--sp-ink-soft); font-size: var(--sp-text-sm); }
.afsp .afsp-univers { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 72%); gap: var(--sp-space-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-space-3); scrollbar-width: thin; }
.afsp .afsp-univers__item { scroll-snap-align: start; min-width: 0; }
.afsp .afsp-univers__item a {
	display: grid; grid-template-rows: auto 1fr; height: 100%; overflow: hidden; text-decoration: none; color: inherit;
	background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg);
	transition: box-shadow var(--sp-duration) var(--sp-ease), transform var(--sp-duration) var(--sp-ease);
}
.afsp .afsp-univers__item a:hover { box-shadow: var(--sp-shadow-hover); transform: translateY(-2px); }
.afsp .afsp-univers__media { display: block; aspect-ratio: 32 / 21; overflow: hidden; background: var(--sp-surface-soft); border-bottom: 3px solid var(--afsp-silo); }
.afsp .afsp-univers__media img { width: 100%; height: 100%; object-fit: cover; }
.afsp .afsp-univers__body { display: grid; align-content: start; gap: var(--sp-space-2); padding: var(--sp-space-4) var(--sp-space-5) var(--sp-space-5); }
.afsp .afsp-univers__name { font-family: var(--sp-font-heading); font-size: 1.35rem; font-weight: 600; line-height: 1.15; color: var(--sp-ink); }
.afsp .afsp-univers__count { color: var(--afsp-silo-dark); font-size: var(--sp-text-xs); font-weight: 700; letter-spacing: var(--sp-tracking-caps); text-transform: uppercase; }
html[data-sp-theme="dark"] .afsp .afsp-univers__count { color: color-mix(in oklab, var(--afsp-silo) 50%, var(--sp-ink)); }
.afsp .afsp-univers__latest { display: grid; gap: 2px; margin-top: var(--sp-space-2); padding-top: var(--sp-space-3); border-top: 1px solid var(--sp-border); color: var(--sp-ink-soft); font-size: var(--sp-text-sm); line-height: 1.45; }
.afsp .afsp-univers__latest small { color: var(--sp-ink-soft); font-size: var(--sp-text-xs); }
@media (min-width: 700px) { .afsp .afsp-univers { grid-auto-columns: minmax(250px, 44%); } }
@media (min-width: 1180px) {
	.afsp .afsp-reading { padding-block: var(--sp-space-9); }
	.afsp .afsp-univers { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; }
}

/* --- Questions ------------------------------------------------------------- */
.afsp .afsp-faq { padding-block: var(--sp-space-8); }
.afsp .afsp-faq__grid { display: grid; gap: var(--sp-space-6); }
.afsp .afsp-faq__side { display: grid; align-content: start; gap: var(--sp-space-2); }
.afsp .afsp-faq__list { border-top: 1px solid var(--sp-border); }
.afsp .afsp-q { border-bottom: 1px solid var(--sp-border); }
.afsp .afsp-q summary {
	display: flex; align-items: center; justify-content: space-between; gap: var(--sp-space-4); min-height: 64px; padding-block: var(--sp-space-4);
	list-style: none; cursor: pointer; color: var(--sp-ink); font-family: var(--sp-font-heading); font-size: 1.35rem; font-weight: 600; line-height: 1.25;
}
.afsp .afsp-q summary::-webkit-details-marker { display: none; }
.afsp .afsp-q summary:hover { color: var(--sp-brand-primary-dark); }
.afsp .afsp-q__plus { width: 22px; height: 22px; color: var(--sp-brand-primary); transition: transform var(--sp-duration) var(--sp-ease); }
.afsp .afsp-q[open] .afsp-q__plus { transform: rotate(45deg); }
.afsp .afsp-q > p, .afsp .afsp-q > div { padding-bottom: var(--sp-space-5); color: var(--sp-ink-soft); font-size: var(--sp-text-md); line-height: var(--sp-leading-normal); max-width: 68ch; }
@media (min-width: 1024px) {
	.afsp .afsp-faq { padding-block: var(--sp-space-9); }
	.afsp .afsp-faq__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: var(--sp-space-9); }
}

/* --- Confirmation ---------------------------------------------------------- */
.afsp-confirm { padding-block: var(--sp-space-7) var(--sp-space-8); background: linear-gradient(180deg, var(--sp-surface-blush), var(--sp-background) 62%); }
.afsp-confirm .afsp-confirm__grid { display: grid; gap: var(--sp-space-6); justify-items: center; text-align: center; }
.afsp-confirm .afsp-confirm__stage { width: min(100%, 460px); display: grid; gap: var(--sp-space-4); justify-items: center; }
.afsp-confirm .afsp-stamp {
	display: inline-flex; align-items: center; gap: var(--sp-space-2); padding: var(--sp-space-2) var(--sp-space-4);
	border-radius: var(--sp-radius-pill); background: var(--sp-surface); border: 1px solid var(--sp-border); color: var(--sp-ink-soft);
	font-size: var(--sp-text-sm); font-weight: 600;
}
.afsp-confirm .afsp-stamp.is-done { color: var(--sp-success); border-color: color-mix(in oklab, var(--sp-success) 40%, var(--sp-border)); }
.afsp-confirm .afsp-confirm__panel { display: grid; gap: var(--sp-space-4); justify-items: center; width: min(100%, 760px); }
.afsp-confirm .afsp-confirm__panel .afsp-lede { margin-inline: auto; }
.afsp-confirm .afsp-h1 { font-size: var(--sp-text-3xl); }
.afsp-confirm .afsp-status { display: inline-flex; align-items: center; gap: var(--sp-space-2); color: var(--sp-ink-soft); font-size: var(--sp-text-sm); font-weight: 600; }
.afsp-confirm .afsp-status .afsp-i { color: var(--sp-brand-primary); }
.afsp-confirm .afsp-slow { display: grid; gap: var(--sp-space-2); padding: var(--sp-space-4) var(--sp-space-5); border-radius: var(--sp-radius-md); background: var(--sp-highlight-soft); color: var(--sp-ink); font-size: var(--sp-text-sm); text-align: left; }
.afsp-confirm .afsp-actions { justify-content: center; }
.afsp-confirm[data-state="waiting"] [data-when="active"], .afsp-confirm[data-state="active"] [data-when="waiting"] { display: none; }
.afsp-confirm .afsp-confirm__state { display: grid; gap: var(--sp-space-4); justify-items: center; }
.afsp-confirm .afsp-confirm__state > .afsp-h1:focus { outline: none; }

/* Faits (confirmation, espace membre) */
.afsp .afsp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: var(--sp-space-3); width: 100%; }
.afsp .afsp-facts > div { display: grid; gap: var(--sp-space-1); padding: var(--sp-space-4); background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); text-align: left; }
.afsp .afsp-facts dt { display: flex; flex-wrap: wrap; overflow-wrap: anywhere; align-items: center; gap: var(--sp-space-2); color: var(--sp-ink-soft); font-size: var(--sp-text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.afsp .afsp-facts dt .afsp-i { color: var(--sp-brand-primary); }
.afsp .afsp-facts dd { margin: 0; color: var(--sp-ink); font-family: var(--sp-font-heading); font-size: 1.35rem; font-weight: 600; line-height: 1.2; }
.afsp .afsp-facts dd small { display: block; margin-top: 2px; color: var(--sp-ink-soft); font-family: var(--sp-font-body); font-size: var(--sp-text-xs); font-weight: 500; }
.afsp .afsp-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--sp-space-3); width: 100%; margin-top: var(--sp-space-2); }
.afsp .afsp-next li { display: flex; gap: var(--sp-space-3); align-items: center; padding: var(--sp-space-4); background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); text-align: left; }
.afsp .afsp-next li > span:last-child { display: grid; line-height: 1.3; }
.afsp .afsp-next b { color: var(--sp-ink); font-size: var(--sp-text-sm); }
.afsp .afsp-next small { color: var(--sp-ink-soft); font-size: var(--sp-text-xs); }
.afsp .afsp-next .afsp-tile__i { width: 40px; height: 40px; flex: none; }

/* Réservation (texte du plugin réutilisé) */
.afsp .afps-lede { color: var(--sp-ink-soft); font-size: var(--sp-text-md); line-height: var(--sp-leading-normal); }
.afsp .afps-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-space-3); width: 100%; margin: 0; }
.afsp .afps-facts > div { padding: var(--sp-space-4); background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); text-align: left; }
.afsp .afps-facts dt { color: var(--sp-ink-soft); font-size: var(--sp-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.afsp .afps-facts dd { margin: 0; font-family: var(--sp-font-heading); font-size: 1.25rem; font-weight: 600; color: var(--sp-ink); }
.afsp .afps-actions { display: flex; flex-wrap: wrap; gap: var(--sp-space-3); align-items: center; justify-content: center; }
.afsp .afps-btn { display: inline-flex; align-items: center; gap: var(--sp-space-2); min-height: 44px; padding: var(--sp-space-3) var(--sp-space-5); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-pill); color: var(--sp-ink); font-weight: 600; text-decoration: none; }
.afsp .afps-btn--go { background: var(--sp-brand-primary); border-color: var(--sp-brand-primary); color: var(--sp-on-accent); }
.afsp .afps-link { color: var(--sp-brand-primary-dark); font-size: var(--sp-text-sm); }

/* --- Espace membre --------------------------------------------------------- */
.afsp-member { padding-bottom: var(--sp-space-8); }
.afsp-member .afsp-dash { padding-block: var(--sp-space-7); background: linear-gradient(180deg, var(--sp-surface-blush), var(--sp-background)); border-bottom: 1px solid var(--sp-border); }
.afsp-member .afsp-dash__grid { display: grid; gap: var(--sp-space-6); align-items: center; }
.afsp-member .afsp-dash__card { width: min(100%, 480px); margin-inline: auto; display: grid; gap: var(--sp-space-3); justify-items: center; }
.afsp-member .afsp-dash__finish { display: inline-flex; align-items: center; gap: var(--sp-space-2); color: var(--sp-ink-soft); font-size: var(--sp-text-sm); font-weight: 600; }
.afsp-member .afsp-dash__main { display: grid; gap: var(--sp-space-4); justify-items: start; min-width: 0; }
.afsp-member .afsp-h1 { font-size: var(--sp-text-3xl); }
.afsp-member .afsp-pill { display: inline-flex; align-items: center; gap: var(--sp-space-2); padding: 6px 14px; border-radius: var(--sp-radius-pill); font-size: var(--sp-text-sm); font-weight: 700; background: color-mix(in oklab, var(--sp-success) 14%, var(--sp-surface)); color: color-mix(in oklab, var(--sp-success) 70%, var(--sp-ink)); }
.afsp-member .afsp-pill > span { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.afsp-member .afsp-pill.is-warn { background: color-mix(in oklab, var(--sp-danger) 14%, var(--sp-surface)); color: color-mix(in oklab, var(--sp-danger) 70%, var(--sp-ink)); }
.afsp-member .afsp-pill.is-ending { background: var(--sp-highlight-soft); color: var(--sp-highlight-ink); }
@media (min-width: 480px) { .afsp-member .afsp-dash .afsp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.afsp-member .afsp-fine { color: var(--sp-ink-soft); font-size: var(--sp-text-sm); line-height: 1.55; }
.afsp-member .afsp-minis { display: grid; gap: var(--sp-space-2); width: 100%; }
.afsp-member .afsp-minis a { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-space-3); padding: var(--sp-space-2) var(--sp-space-4) var(--sp-space-2) var(--sp-space-2); background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); color: var(--sp-ink); text-decoration: none; }
.afsp-member .afsp-minis a:hover { border-color: var(--sp-brand-primary); }
.afsp-member .afsp-minis img { width: 64px; height: 50px; object-fit: contain; background: var(--afsp-paper); border-radius: 10px; }
.afsp-member .afsp-minis span { display: grid; line-height: 1.3; }
.afsp-member .afsp-minis b { font-family: var(--sp-font-heading); font-size: 1.2rem; }
.afsp-member .afsp-minis small { color: var(--sp-ink-soft); font-size: var(--sp-text-xs); }
.afsp-member .afsp-minis .afsp-i { color: var(--sp-brand-primary); }

.afsp-member .afsp-loyal { padding-block: var(--sp-space-7); background: var(--afsp-band); color: var(--afsp-band-ink); }
.afsp-member .afsp-loyal__now { display: grid; gap: var(--sp-space-5); align-items: center; margin-bottom: var(--sp-space-6); }
.afsp-member .afsp-loyal__seal svg { width: 132px; height: 132px; display: block; }
.afsp-member .afsp-loyal .afsp-h2 { color: var(--afsp-band-ink); }
.afsp-member .afsp-loyal .afsp-sub { color: var(--afsp-band-muted); }
.afsp-member .afsp-progress { margin-top: var(--sp-space-4); max-width: 520px; }
.afsp-member .afsp-progress p { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-space-2); color: var(--afsp-band-muted); font-size: var(--sp-text-sm); margin-bottom: var(--sp-space-2); }
.afsp-member .afsp-progress p b { color: var(--afsp-band-ink); }
.afsp-member .afsp-progress__bar { display: block; height: 8px; border-radius: 99px; background: var(--afsp-band-line); overflow: hidden; }
.afsp-member .afsp-progress__bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #c29437, #f3dc9a); }
.afsp-member .afsp-frise__step.is-locked .afsp-frise__seal { opacity: 0.45; filter: grayscale(0.6); }
.afsp-member .afsp-frise__step.is-current .afsp-frise__seal { box-shadow: inset 0 0 0 1px var(--afsp-band-line), 0 0 0 3px var(--afsp-band-accent); }
.afsp-member .afsp-frise__seal svg { width: 84px; height: 84px; }
@media (min-width: 720px) { .afsp-member .afsp-loyal__now { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-space-6); } }

.afsp-member .afsp-cols { display: grid; gap: var(--sp-space-5); padding-top: var(--sp-space-7); }
.afsp-member .afsp-panel { padding: var(--sp-space-6); background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg); min-width: 0; }
.afsp-member .afsp-panel .afsp-h3 { display: flex; align-items: center; gap: var(--sp-space-2); margin-bottom: var(--sp-space-4); }
.afsp-member .afsp-panel .afsp-h3 .afsp-i { color: var(--sp-brand-primary); }
.afsp-member .afsp-ledger { overflow-x: auto; }
.afsp-member .afsp-ledger table { width: 100%; border-collapse: collapse; font-size: var(--sp-text-sm); }
.afsp-member .afsp-ledger th { padding: var(--sp-space-2) var(--sp-space-3); border-bottom: 1px solid var(--sp-border); color: var(--sp-ink-soft); font-size: var(--sp-text-xs); font-weight: 700; text-align: left; text-transform: uppercase; letter-spacing: 0.04em; }
.afsp-member .afsp-ledger td { padding: var(--sp-space-3); border-bottom: 1px solid var(--sp-border); color: var(--sp-ink); white-space: nowrap; }
.afsp-member .afsp-ledger td:nth-child(2) { white-space: normal; }
@media (max-width: 639px) {
	.afsp-member .afsp-panel { padding: var(--sp-space-5) var(--sp-space-4); }
	.afsp-member .afsp-ledger th, .afsp-member .afsp-ledger td { padding: var(--sp-space-2) 6px; }
	.afsp-member .afsp-ledger td:first-child { white-space: normal; }
}
.afsp-member .afsp-ledger td:last-child, .afsp-member .afsp-ledger th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.afsp-member .afsp-panel .afsp-fine { margin-top: var(--sp-space-3); }
.afsp-member .afsp-links { display: grid; }
.afsp-member .afsp-links a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-space-3); min-height: 52px; border-bottom: 1px solid var(--sp-border); color: var(--sp-ink); font-size: var(--sp-text-sm); font-weight: 600; text-decoration: none; }
.afsp-member .afsp-links li:last-child a { border-bottom: 0; }
.afsp-member .afsp-links a:hover { color: var(--sp-brand-primary-dark); }
.afsp-member .afsp-links .afsp-i { color: var(--sp-brand-primary); }
.afsp-member .afsp-links .afsp-links__out { color: var(--sp-ink-soft); width: 16px; height: 16px; }
.afsp-member .afsp-private { display: flex; gap: var(--sp-space-3); align-items: flex-start; color: var(--sp-ink-soft); font-size: var(--sp-text-sm); line-height: 1.55; }
.afsp-member .afsp-private .afsp-tile__i { flex: none; }
.afsp-member .afsp-cols__side { display: grid; gap: var(--sp-space-5); align-content: start; }
@media (min-width: 1024px) {
	.afsp-member .afsp-dash { padding-block: var(--sp-space-8); }
	.afsp-member .afsp-dash__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); column-gap: var(--sp-space-9); }
	.afsp-member .afsp-loyal { padding-block: var(--sp-space-8); }
	.afsp-member .afsp-cols { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

/* --- Aide et conditions ---------------------------------------------------- */
.afsp-help .afsp-helphero { padding-block: var(--sp-space-7); background: linear-gradient(180deg, var(--sp-surface-blush), var(--sp-background)); border-bottom: 1px solid var(--sp-border); }
.afsp-help .afsp-helphero__grid { display: grid; gap: var(--sp-space-6); align-items: center; }
.afsp-help .afsp-helphero__text { display: grid; gap: var(--sp-space-4); justify-items: start; }
.afsp-help .afsp-h1 { font-size: var(--sp-text-4xl); }
.afsp-help .afsp-h1 em { font-style: italic; color: var(--sp-brand-primary); }
.afsp-help .afsp-chips { display: flex; flex-wrap: wrap; gap: var(--sp-space-2); }
.afsp-help .afsp-chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 1px solid var(--sp-border); border-radius: var(--sp-radius-pill); background: var(--sp-surface); color: var(--sp-ink); font-size: var(--sp-text-sm); font-weight: 600; text-decoration: none; }
.afsp-help .afsp-chips a:hover { border-color: var(--sp-brand-primary); color: var(--sp-brand-primary-dark); }
.afsp-help .afsp-helphero__facts { display: grid; gap: var(--sp-space-3); }
.afsp-help .afsp-helphero__facts li { display: flex; gap: var(--sp-space-3); align-items: center; padding: var(--sp-space-4); background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); }
.afsp-help .afsp-helphero__facts span:last-child { display: grid; line-height: 1.3; }
.afsp-help .afsp-helphero__facts b { color: var(--sp-ink); font-size: var(--sp-text-md); }
.afsp-help .afsp-helphero__facts small { color: var(--sp-ink-soft); font-size: var(--sp-text-sm); }
.afsp-help .afsp-help__grid { display: grid; gap: var(--sp-space-7); padding-block: var(--sp-space-7); }
.afsp-help .afsp-answers { min-width: 0; border-top: 1px solid var(--sp-border); }
.afsp-help .afsp-q summary { justify-content: flex-start; }
.afsp-help .afsp-q summary .afsp-q__plus { margin-left: auto; flex: none; }
.afsp-help .afsp-q__n { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--sp-surface-blush); color: var(--sp-brand-primary-dark); font-family: var(--sp-font-body); font-size: var(--sp-text-sm); font-weight: 700; }
.afsp-help .afsp-q__body { padding-left: 48px; }
.afsp-help .afsp-q__body :where(p, ul) + :where(p, ul, table) { margin-top: var(--sp-space-3); }
.afsp-help .afsp-q__body ul { display: grid; gap: var(--sp-space-2); }
.afsp-help .afsp-q__body table { width: 100%; border-collapse: collapse; font-size: var(--sp-text-sm); }
.afsp-help .afsp-q__body th, .afsp-help .afsp-q__body td { padding: var(--sp-space-2) var(--sp-space-3); border-bottom: 1px solid var(--sp-border); text-align: left; }
.afsp-help .afsp-q__body thead th { color: var(--sp-ink-soft); font-size: var(--sp-text-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.afsp-help .afsp-q__body tbody th { font-weight: 700; color: var(--sp-ink); }
.afsp-help .afsp-side { display: grid; gap: var(--sp-space-5); align-content: start; }
.afsp-help .afsp-prices { padding: var(--sp-space-6); background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg); }
.afsp-help .afsp-prices .afsp-h3 { margin-bottom: var(--sp-space-2); }
.afsp-help .afsp-prices > p { color: var(--sp-ink-soft); font-size: var(--sp-text-sm); line-height: 1.55; margin-bottom: var(--sp-space-4); }
.afsp-help .afsp-price { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: var(--sp-space-2) var(--sp-space-4); align-items: center; padding-block: var(--sp-space-4); border-top: 1px solid var(--sp-border); }
.afsp-help .afsp-price__art { width: 68px; height: 54px; border-radius: 10px; background: var(--afsp-paper); object-fit: contain; padding: 3px; }
.afsp-help .afsp-price__head { display: grid; line-height: 1.25; }
.afsp-help .afsp-price__head b { font-family: var(--sp-font-heading); font-size: 1.3rem; color: var(--sp-ink); }
.afsp-help .afsp-price__head small { display: flex; align-items: center; gap: 6px; color: var(--sp-ink-soft); font-size: var(--sp-text-xs); }
.afsp-help .afsp-price dl { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-space-2); margin: 0; }
.afsp-help .afsp-price dl > div { padding: var(--sp-space-2) var(--sp-space-3); border-radius: var(--sp-radius-sm); background: var(--sp-surface-soft); }
.afsp-help .afsp-price dt { color: var(--sp-ink-soft); font-size: var(--sp-text-xs); font-weight: 700; }
.afsp-help .afsp-price dd { margin: 0; color: var(--sp-ink); font-weight: 700; font-size: var(--sp-text-sm); font-variant-numeric: tabular-nums; }
.afsp-help .afsp-price__save { grid-column: 1 / -1; color: var(--sp-ink-soft); font-size: var(--sp-text-xs); line-height: 1.45; }
.afsp-help .afsp-price__go { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; color: var(--sp-brand-primary-dark); font-size: var(--sp-text-sm); font-weight: 700; text-decoration: none; }
.afsp-help .afsp-contact { display: grid; gap: var(--sp-space-3); padding: var(--sp-space-6); border-radius: var(--sp-radius-lg); background: var(--afsp-band); color: var(--afsp-band-ink); }
.afsp-help .afsp-contact .afsp-h3 { color: var(--afsp-band-ink); }
.afsp-help .afsp-contact p { color: var(--afsp-band-muted); font-size: var(--sp-text-sm); line-height: 1.55; }
.afsp-help .afsp-contact .sp-btn { justify-self: start; background: var(--afsp-band-ink); color: oklch(28% 0.052 345); }
.afsp-help .afsp-contact .sp-btn:hover { background: #fff; color: oklch(24% 0.052 345); }
.afsp-help .afsp-quick { display: grid; gap: var(--sp-space-2); }
.afsp-help .afsp-quick 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; }
.afsp-help .afsp-quick a:hover { border-color: var(--sp-brand-primary); }
.afsp-help .afsp-quick span { display: grid; line-height: 1.3; }
.afsp-help .afsp-quick b { font-size: var(--sp-text-sm); }
.afsp-help .afsp-quick small { color: var(--sp-ink-soft); font-size: var(--sp-text-xs); }
.afsp-help .afsp-quick .afsp-tile__i { width: 38px; height: 38px; }
.afsp-help .afsp-quick > li > a > .afsp-i { color: var(--sp-ink-soft); }
@media (min-width: 1024px) {
	.afsp-help .afsp-helphero { padding-block: var(--sp-space-8); }
	.afsp-help .afsp-helphero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: var(--sp-space-9); }
	.afsp-help .afsp-help__grid { grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); column-gap: var(--sp-space-8); padding-block: var(--sp-space-8) var(--sp-space-9); }
	.afsp-help .afsp-side { position: sticky; top: calc(var(--sp-header-height, 77px) + 24px); }
}
@media (max-width: 639px) {
	.afsp-help .afsp-h1 { font-size: 2.35rem; }
	.afsp-help .afsp-q__body { padding-left: 0; }
	.afsp .afsp-q summary { font-size: 1.2rem; }
}

/* --- Parcours dans le site (1.1.0) -----------------------------------------------
   Paiement (/abonnement/paiement/), fenêtres « changer de formule » et « résilier » de l'espace membre.
   Mêmes jetons, aquarelles, nuancier métal et boutons sp-btn que les formules ; clair et sombre par --sp-*. */
.afsp [hidden] { display: none !important; }
.afsp .afsp-q__body p + p { margin-top: var(--sp-space-3); }
.afsp .sp-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.afsp .afsp-linkbtn { padding: 0; border: 0; background: none; color: var(--sp-brand-primary-dark); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.afsp .afsp-linkbtn:focus-visible { outline: 2px solid var(--sp-brand-primary); outline-offset: 2px; border-radius: 4px; }
.afsp .afsp-btn--danger:hover { border-color: var(--sp-danger); color: var(--sp-ink); }
.afsp .afsp-btn--danger .afsp-i { color: var(--sp-danger); }
.afsp .afsp-fine { color: var(--sp-ink-soft); font-size: var(--sp-text-sm); line-height: 1.55; }
.afsp .afsp-fine a { color: var(--sp-brand-primary-dark); text-underline-offset: 3px; }

/* Bascule mois / an (même dessin que le configurateur des formules). */
.afsp .afsp-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--sp-border); border-radius: var(--sp-radius-pill); background: var(--sp-surface-soft); }
.afsp .afsp-seg__opt { position: relative; display: block; margin: 0; cursor: pointer; }
.afsp .afsp-seg__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.afsp .afsp-seg__opt span {
	display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; min-height: 44px; padding: 6px 12px;
	border-radius: var(--sp-radius-pill); color: var(--sp-ink-soft); font: 600 var(--sp-text-sm)/1.2 var(--sp-font-body); text-align: center;
	transition: background-color var(--sp-duration) var(--sp-ease), color var(--sp-duration) var(--sp-ease), box-shadow var(--sp-duration) var(--sp-ease);
}
.afsp .afsp-seg__opt em { font-style: normal; font-size: var(--sp-text-xs); font-weight: 700; color: color-mix(in oklab, var(--sp-success) 72%, var(--sp-ink)); }
.afsp .afsp-seg__opt input:checked + span { background: var(--sp-surface); color: var(--sp-brand-primary-dark); box-shadow: 0 1px 2px rgb(55 32 45 / 10%), 0 4px 14px rgb(55 32 45 / 8%); }
.afsp .afsp-seg__opt input:focus-visible + span { outline: 2px solid var(--sp-brand-primary); outline-offset: 2px; }
.afsp .afsp-seg__opt input:disabled + span { cursor: wait; opacity: 0.7; }

/* Choix de formule compact : aquarelle, nuancier, prix. */
.afsp .afsp-plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-space-3); }
@media (min-width: 560px) { .afsp .afsp-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.afsp .afsp-plan { position: relative; display: block; margin: 0; cursor: pointer; }
.afsp .afsp-plan input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.afsp .afsp-plan__ui {
	display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--sp-space-3); row-gap: 2px; align-items: center; height: 100%;
	padding: var(--sp-space-3); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); background: var(--sp-surface);
	transition: border-color var(--sp-duration) var(--sp-ease), box-shadow var(--sp-duration) var(--sp-ease), background-color var(--sp-duration) var(--sp-ease);
}
@media (min-width: 560px) { .afsp .afsp-plan__ui { grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: start; } }
.afsp .afsp-plan__art { grid-row: span 2; display: block; width: 72px; aspect-ratio: 1.25; border-radius: 10px; background: radial-gradient(110% 100% at 60% 40%, #fffdf9, var(--afsp-paper) 60%, var(--afsp-paper-deep)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--m-b) 55%, transparent); overflow: hidden; }
.afsp .afsp-plan__art img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
@media (min-width: 560px) { .afsp .afsp-plan__art { grid-row: auto; width: 100%; aspect-ratio: 1.9; margin-bottom: var(--sp-space-2); } }
.afsp .afsp-plan__name { display: flex; align-items: center; gap: var(--sp-space-2); color: var(--sp-ink); font-family: var(--sp-font-heading); font-size: 1.3rem; font-weight: 600; line-height: 1.15; }
.afsp .afsp-plan__name .afsp-swatch { font-size: 14px; }
.afsp .afsp-plan__price { color: var(--sp-ink); font-size: var(--sp-text-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.afsp .afsp-plan__price small { color: var(--sp-ink-soft); font-size: var(--sp-text-xs); font-weight: 500; }
.afsp .afsp-plan__tag { grid-column: 2; justify-self: start; margin-top: 4px; padding: 2px 10px; border-radius: var(--sp-radius-pill); background: var(--sp-highlight-soft); color: var(--sp-highlight-ink); font-size: var(--sp-text-xs); font-weight: 700; }
@media (min-width: 560px) { .afsp .afsp-plan__tag { grid-column: auto; } }
.afsp .afsp-plan:hover .afsp-plan__ui { border-color: var(--sp-brand-primary-light); }
.afsp .afsp-plan input:checked + .afsp-plan__ui { border-color: var(--sp-brand-primary); box-shadow: 0 0 0 1px var(--sp-brand-primary), var(--sp-shadow-soft); background: color-mix(in oklab, var(--sp-brand-primary) 5%, var(--sp-surface)); }
.afsp .afsp-plan input:checked + .afsp-plan__ui .afsp-plan__price { color: var(--sp-brand-primary-dark); }
.afsp .afsp-plan input:focus-visible + .afsp-plan__ui { outline: 2px solid var(--sp-brand-primary); outline-offset: 3px; }
.afsp .afsp-plan input:disabled + .afsp-plan__ui { opacity: 0.6; cursor: wait; }

/* Fenêtres (dialog natif). */
.afsp .afsp-dlg { width: min(100% - 24px, 760px); max-width: none; max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 0; background: transparent; color: var(--sp-ink); overflow: visible; }
.afsp .afsp-dlg::backdrop { background: color-mix(in oklab, oklch(22% 0.04 345) 62%, transparent); backdrop-filter: blur(5px); }
.afsp .afsp-dlg[open] .afsp-dlg__box { animation: afsp-dlg-in 0.3s var(--sp-ease); }
@keyframes afsp-dlg-in { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
.afsp .afsp-dlg__box {
	position: relative; max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain;
	padding: clamp(22px, 4vw, 36px); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-xl);
	background: radial-gradient(70% 45% at 100% 0%, var(--sp-surface-blush), transparent 72%), var(--sp-background);
	box-shadow: 0 40px 90px -40px rgb(42 20 32 / 55%);
}
.afsp .afsp-dlg__box::before { content: ""; position: absolute; inset-inline: 28px; inset-block-start: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, #ad7645, #f3dc9a 50%, #a5aeb8); opacity: 0.9; }
.afsp .afsp-dlg__x { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--sp-border); border-radius: 50%; background: var(--sp-surface); color: var(--sp-ink); cursor: pointer; }
.afsp .afsp-dlg__x:hover { border-color: var(--sp-brand-primary); color: var(--sp-brand-primary-dark); }
.afsp .afsp-dlg__x:focus-visible, .afsp .afsp-dlg button:focus-visible { outline: 2px solid var(--sp-brand-primary); outline-offset: 2px; }
.afsp .afsp-dlg__x .afsp-i { width: 18px; height: 18px; }
.afsp .afsp-dlg .afsp-kicker { display: inline-flex; align-items: center; gap: var(--sp-space-2); padding-inline-end: 52px; }
.afsp .afsp-dlg .afsp-kicker .afsp-i { color: var(--sp-brand-primary); }
.afsp .afsp-dlg .afsp-h2 { font-size: clamp(1.75rem, 3.4vw, 2.25rem); padding-inline-end: 40px; }
.afsp .afsp-dlg__period { margin-top: var(--sp-space-5); margin-bottom: var(--sp-space-3); }
.afsp .afsp-dlg__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-space-3); margin-top: var(--sp-space-5); }
@media (max-width: 559.98px) { .afsp .afsp-dlg__foot { flex-direction: column-reverse; } .afsp .afsp-dlg__foot .sp-btn { width: 100%; } }
.afsp .afsp-dlg__alert { margin: var(--sp-space-4) 0 0; }
.afsp .afsp-dlg__fine { display: flex; gap: var(--sp-space-2); align-items: flex-start; margin-top: var(--sp-space-4); }
.afsp .afsp-dlg__fine .afsp-i { color: var(--sp-brand-primary); margin-top: 3px; }
.afsp .afsp-dlg .afsp-dlg__demo { margin: 0 52px var(--sp-space-4) 0; }
.afsp .afsp-dlg.is-busy .afsp-dlg__x { opacity: 0.4; pointer-events: none; }
.afsp .afsp-dlg__done { display: grid; justify-items: center; gap: var(--sp-space-3); padding-block: var(--sp-space-3) var(--sp-space-1); text-align: center; }
.afsp .afsp-dlg__done:focus { outline: none; }
.afsp .afsp-dlg__done .afsp-sub { margin-inline: auto; }
.afsp .afsp-dlg__done .afsp-h2 { padding-inline-end: 0; }
.afsp .afsp-dlg__done .afsp-dlg__foot { justify-content: center; }
.afsp .afsp-dlg__sync { display: inline-flex; align-items: center; gap: var(--sp-space-2); }
.afsp .afsp-dlg__seal { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: color-mix(in oklab, var(--sp-success) 14%, var(--sp-surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sp-success) 40%, transparent); color: color-mix(in oklab, var(--sp-success) 75%, var(--sp-ink)); }
.afsp .afsp-dlg__seal .afsp-i { width: 40px; height: 40px; }
.afsp .afsp-dlg--cancel .afsp-dlg__seal { background: var(--sp-highlight-soft); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sp-highlight-ink) 35%, transparent); color: var(--sp-highlight-ink); }

/* Devis : le montant exact avant confirmation. */
.afsp .afsp-quote { display: grid; align-content: center; min-height: 92px; margin-top: var(--sp-space-5); padding: var(--sp-space-4) var(--sp-space-5); border: 1px dashed color-mix(in oklab, var(--sp-brand-primary) 40%, var(--sp-border)); border-radius: var(--sp-radius-md); background: var(--sp-surface); }
.afsp .afsp-quote__idle { display: flex; align-items: center; gap: var(--sp-space-3); color: var(--sp-ink-soft); font-size: var(--sp-text-sm); }
.afsp .afsp-quote__idle .afsp-i { width: 20px; height: 20px; color: var(--sp-brand-primary); }
.afsp .afsp-quote__res { display: grid; gap: var(--sp-space-1); }
.afsp .afsp-quote__main { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; color: var(--sp-ink); font-weight: 700; }
.afsp .afsp-quote__main b { color: var(--sp-brand-primary-dark); font-family: var(--sp-font-heading); font-size: clamp(1.9rem, 4vw, 2.4rem); font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; }
.afsp .afsp-quote__next { color: var(--sp-ink); font-weight: 600; font-size: var(--sp-text-sm); }
.afsp .afsp-quote__how { color: var(--sp-ink-soft); font-size: var(--sp-text-sm); line-height: 1.5; }

/* Résiliation : ce que l'on garde, raison facultative. */
.afsp .afsp-keep { display: grid; gap: var(--sp-space-3); margin-top: var(--sp-space-5); }
.afsp .afsp-keep li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-space-3); align-items: start; padding: var(--sp-space-3) var(--sp-space-4); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); background: var(--sp-surface); }
.afsp .afsp-keep .afsp-i { width: 22px; height: 22px; margin-top: 1px; color: var(--sp-brand-primary); }
.afsp .afsp-keep b { display: block; color: var(--sp-ink); font-size: var(--sp-text-md); }
.afsp .afsp-keep small { color: var(--sp-ink-soft); font-size: var(--sp-text-sm); }
.afsp .afsp-reasons { display: flex; flex-wrap: wrap; gap: var(--sp-space-2); margin-top: var(--sp-space-5); }
.afsp .afsp-reasons legend { margin-bottom: var(--sp-space-3); color: var(--sp-ink); font-family: var(--sp-font-heading); font-size: 1.2rem; font-weight: 600; }
.afsp .afsp-reasons legend span { color: var(--sp-ink-soft); font-family: var(--sp-font-body); font-size: var(--sp-text-sm); font-weight: 500; }
.afsp .afsp-reason { position: relative; margin: 0; cursor: pointer; }
.afsp .afsp-reason input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.afsp .afsp-reason span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--sp-space-4); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-pill); background: var(--sp-surface); color: var(--sp-ink); font-size: var(--sp-text-sm); font-weight: 600; transition: border-color var(--sp-duration) var(--sp-ease), background-color var(--sp-duration) var(--sp-ease); }
.afsp .afsp-reason:hover span { border-color: var(--sp-brand-primary-light); }
.afsp .afsp-reason input:checked + span { border-color: var(--sp-brand-primary); background: color-mix(in oklab, var(--sp-brand-primary) 12%, var(--sp-surface)); color: var(--sp-brand-primary-dark); }
.afsp .afsp-reason input:focus-visible + span { outline: 2px solid var(--sp-brand-primary); outline-offset: 2px; }
.afsp .afsp-comment { display: grid; gap: var(--sp-space-2); margin-top: var(--sp-space-4); color: var(--sp-ink); font-size: var(--sp-text-sm); font-weight: 600; }
.afsp .afsp-comment small { color: var(--sp-ink-soft); font-weight: 500; }
.afsp .afsp-comment textarea { width: 100%; min-height: 72px; padding: var(--sp-space-3); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); background: var(--sp-surface); color: var(--sp-ink); font: inherit; font-weight: 400; font-size: var(--sp-text-md); resize: vertical; }
.afsp .afsp-comment textarea:focus { outline: 2px solid var(--sp-brand-primary); outline-offset: 1px; border-color: var(--sp-brand-primary); }

/* Espace membre : boutons de gestion dans la liste, fin programmée. */
.afsp-member .afsp-links button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-space-3); width: 100%; min-height: 52px; padding: 0; border: 0; border-bottom: 1px solid var(--sp-border); border-radius: 0; background: none; color: var(--sp-ink); font: inherit; font-size: var(--sp-text-sm); font-weight: 600; text-align: start; cursor: pointer; }
.afsp-member .afsp-links li:last-child button { border-bottom: 0; }
.afsp-member .afsp-links button:hover { color: var(--sp-brand-primary-dark); }
.afsp-member .afsp-links button:focus-visible, .afsp-member .afsp-links a:focus-visible { outline: 2px solid var(--sp-brand-primary); outline-offset: 2px; border-radius: 6px; }
.afsp-member .afsp-links button:disabled { opacity: 0.6; cursor: wait; }
.afsp-member .afsp-links small { color: var(--sp-ink-soft); font-size: var(--sp-text-xs); font-weight: 500; }
.afsp-member .afsp-links .is-quiet button, .afsp-member .afsp-links .is-quiet .afsp-i { color: var(--sp-ink-soft); }
.afsp-member .afsp-links .is-quiet button:hover { color: var(--sp-ink); }
.afsp-member .afsp-ending { margin: 0; }

/* --- Paiement ---------------------------------------------------------------- */
.afsp-pay .afsp-pay__sec { padding-block: var(--sp-space-7) var(--sp-space-8); background: linear-gradient(180deg, var(--sp-surface-blush), var(--sp-background) 62%); }
.afsp-pay .afsp-pay__grid { display: grid; gap: var(--sp-space-6); align-items: start; }
.afsp-pay .afsp-pay__stage { display: grid; gap: var(--sp-space-4); justify-items: center; width: min(100%, 480px); margin-inline: auto; }
.afsp-pay .afsp-pay__caption { display: inline-flex; align-items: center; gap: var(--sp-space-2); padding: 6px 14px; border: 1px solid var(--sp-border); border-radius: var(--sp-radius-pill); background: var(--sp-surface); color: var(--sp-ink); font-size: var(--sp-text-sm); font-weight: 600; }
.afsp-pay .afsp-pay__caption .afsp-swatch { font-size: 14px; }
.afsp-pay .afsp-pay__stagenote { display: flex; gap: var(--sp-space-3); align-items: flex-start; max-width: 40ch; color: var(--sp-ink-soft); font-size: var(--sp-text-sm); line-height: 1.5; }
.afsp-pay .afsp-pay__stagenote .afsp-i { margin-top: 2px; color: var(--sp-brand-primary); }
.afsp-pay .afsp-pay__panel { display: grid; gap: var(--sp-space-5); justify-items: start; min-width: 0; }
.afsp-pay .afsp-pay__panel > * { width: 100%; }
.afsp-pay .afsp-pay__panel > .afsp-eyebrow { width: auto; }
.afsp-pay .afsp-h1 { font-size: var(--sp-text-3xl); }
.afsp-pay .afsp-h1 em { font-style: italic; color: var(--sp-brand-primary); }
.afsp-pay .afsp-pay__pick { display: grid; gap: var(--sp-space-3); }
.afsp-pay .afsp-pay__pick .afsp-seg { max-width: 420px; }
@media (min-width: 640px) { .afsp-pay .afsp-pay__sum { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.afsp .afsp-paybox { display: grid; gap: var(--sp-space-4); padding: clamp(18px, 3vw, 28px); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg); background: var(--sp-surface); box-shadow: var(--sp-shadow-soft); }
.afsp .afsp-paybox[aria-busy="true"] { cursor: progress; }
.afsp .afsp-paybox__loading { display: flex; align-items: center; justify-content: center; gap: var(--sp-space-3); min-height: 140px; color: var(--sp-ink-soft); font-weight: 600; }
.afsp .afsp-paybox__loading .afsp-i { width: 22px; height: 22px; color: var(--sp-brand-primary); }
.afsp .afsp-paybox__form { display: grid; gap: var(--sp-space-4); }
.afsp .afsp-paybox__acct { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: var(--sp-space-3) var(--sp-space-4); border-radius: var(--sp-radius-md); background: var(--sp-surface-soft); color: var(--sp-ink-soft); font-size: var(--sp-text-sm); }
.afsp .afsp-paybox__acct b { color: var(--sp-ink); overflow-wrap: anywhere; }
.afsp .afsp-paybox__el { min-height: 210px; }
.afsp .afsp-paybox__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-space-3); padding-top: var(--sp-space-4); border-top: 1px dashed var(--sp-border); color: var(--sp-ink); font-weight: 700; }
.afsp .afsp-paybox__total b { font-family: var(--sp-font-heading); font-size: 1.9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.afsp .afsp-paybox__submit { width: 100%; min-height: 54px; font-size: var(--sp-text-md); }
.afsp .afsp-paybox__submit.is-busy { cursor: progress; }
.afsp .afsp-paybox__bank { color: var(--sp-ink-soft); font-size: var(--sp-text-xs); line-height: 1.5; text-align: center; }
.afsp .afsp-paybox__error { margin: 0; }
.afsp .afsp-paybox__demo { margin: 0; }
.afsp .afsp-paybox__fake { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-space-3); }
.afsp .afsp-paybox__fake span { grid-column: 1 / -1; display: grid; gap: 6px; }
.afsp .afsp-paybox__fake span.is-half { grid-column: auto; }
.afsp .afsp-paybox__fake small { color: var(--sp-ink); font-size: var(--sp-text-sm); font-weight: 600; }
.afsp .afsp-paybox__fake i { padding: 13px 14px; border: 1px solid var(--sp-border); border-radius: 12px; background: var(--sp-surface); color: var(--sp-ink-soft); font-style: normal; }
.afsp-pay .afsp-assure { display: grid; gap: var(--sp-space-2); }
.afsp-pay .afsp-assure li { display: flex; gap: var(--sp-space-2); align-items: flex-start; color: var(--sp-ink-soft); font-size: var(--sp-text-sm); line-height: 1.45; }
.afsp-pay .afsp-assure .afsp-i { margin-top: 1px; color: var(--sp-brand-primary); }
.afsp-pay.is-guest .afsp-pay__grid, .afsp-pay.is-member .afsp-pay__grid, .afsp-pay.is-closed .afsp-pay__grid { align-items: center; }
@media (min-width: 1024px) {
	.afsp-pay .afsp-pay__sec { padding-block: var(--sp-space-8); }
	.afsp-pay .afsp-pay__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: var(--sp-space-9); }
	.afsp-pay.is-pay .afsp-pay__stage { position: sticky; top: calc(var(--sp-header-height, 80px) + 24px); }
}

/* --- Mouvement réduit ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.afsp *, .afsp *::before, .afsp *::after { transition: none !important; animation: none !important; }
	.afsp .afsp-dlg::backdrop { backdrop-filter: none; }
	.afsp .afsp-univers__item a:hover { transform: none; }
}