.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(19,42,68,.08); background: rgba(251,249,245,.92); backdrop-filter: blur(14px); }
.site-header__inner { display: flex; min-height: 4.8rem; align-items: center; justify-content: space-between; gap: 1rem; }
.site-branding__name { display: inline-flex; align-items: center; gap: .45rem; color: var(--lueur-navy); font-family: "DM Serif Display", Georgia, serif; font-size: 1.55rem; text-decoration: none; }
.site-branding__name span { color: var(--lueur-coral); }
.custom-logo { max-height: 3.25rem; width: auto; }
.nav-toggle { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 0; background: transparent; color: var(--lueur-navy); }
.primary-navigation { position: fixed; inset: 4.8rem 0 auto; display: none; padding: 1rem; border-bottom: 1px solid var(--lueur-line); background: var(--lueur-ivory); box-shadow: var(--lueur-shadow-md); }
.primary-navigation.is-open { display: block; }
.primary-navigation ul { margin: 0; padding: 0; list-style: none; }
.primary-navigation a:not(.er-button) { display: block; padding: .65rem; font-weight: 600; text-decoration: none; }
.header-actions { display: grid; gap: .5rem; margin-top: .5rem; }
.hero { position: relative; overflow: hidden; padding: clamp(3rem, 9vw, 7rem) 0; background: radial-gradient(circle at 88% 12%, rgba(230,111,104,.18), transparent 32%), linear-gradient(125deg, #fbf9f5, #f2f5f7); }
.hero::after { position: absolute; right: -9rem; bottom: -13rem; width: 31rem; height: 31rem; border: 1px solid rgba(117,89,199,.2); border-radius: 50%; content: ""; }
.hero__grid { display: grid; align-items: center; gap: 2.5rem; }
.hero h1 { max-width: 13ch; margin: 0 0 1.2rem; }
.hero__lead { max-width: 40rem; font-size: clamp(1.08rem, 2vw, 1.3rem); }
.hero .button-row { margin: 1.6rem 0; }
.trust-list { display: flex; flex-wrap: wrap; gap: .6rem 1rem; padding: 0; color: var(--lueur-muted); font-size: .84rem; list-style: none; }
.trust-list li { display: flex; align-items: center; gap: .3rem; }
.trust-list .lueur-icon { color: var(--lueur-success); }
.hero__visual { position: relative; min-height: 28rem; }
.hero-profile { position: absolute; inset: 0 2rem 2rem 0; overflow: hidden; border: .7rem solid rgba(255,255,255,.8); border-radius: 9rem 2rem 7rem 2rem; background: #d8e4e8; box-shadow: var(--lueur-shadow-md); }
.hero-profile__portrait { display: flex; height: 78%; align-items: end; padding: 1.5rem; background: radial-gradient(circle at 48% 29%, #f8e1cc 0 12%, transparent 12.5%), radial-gradient(ellipse at 49% 53%, #604941 0 15%, transparent 15.5%), linear-gradient(145deg, #b7cad2, #f4d9d0); }
.hero-profile__portrait span { padding: .3rem .65rem; border-radius: 999px; background: rgba(255,255,255,.85); color: var(--lueur-navy); font-weight: 700; }
.hero-profile > div:last-child { display: grid; padding: 1rem 1.25rem; background: #fff; }
.hero-profile > div:last-child span { color: var(--lueur-muted); font-size: .85rem; }
.hero-note { position: absolute; right: 0; bottom: 0; display: flex; max-width: 18rem; gap: .75rem; padding: 1rem; border-radius: var(--lueur-radius-md); background: var(--lueur-navy); color: #fff; box-shadow: var(--lueur-shadow-md); }
.hero-note .lueur-icon { color: #ffd6d1; font-size: 1.4rem; }
.hero-note span { display: grid; font-size: .78rem; }
.section { padding: clamp(4rem, 8vw, 7rem) 0; }
.section--tint { background: var(--lueur-mist); }
.section--narrow .container { max-width: 50rem; }
.section-heading { max-width: 48rem; margin-bottom: 2.25rem; }
.section-heading h2 { margin: 0; }
.section-heading--split { display: flex; max-width: none; align-items: end; justify-content: space-between; gap: 1rem; }
.steps-grid { display: grid; gap: 1rem; }
.step-card { padding: 1.5rem; border: 1px solid var(--lueur-line); border-radius: var(--lueur-radius-md); background: #fff; }
.step-card > span { color: var(--lueur-coral-dark); font-weight: 700; }
.safety-panel { display: grid; gap: 2rem; padding: clamp(2rem, 6vw, 4rem); border-radius: var(--lueur-radius-lg); background: linear-gradient(135deg, var(--lueur-navy), var(--lueur-navy-deep)); color: #fff; }
.safety-panel h2 { margin-top: 0; color: #fff; }
.safety-panel ul { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.safety-panel li { display: flex; gap: .75rem; padding: 1rem; border: 1px solid rgba(255,255,255,.14); border-radius: var(--lueur-radius-sm); background: rgba(255,255,255,.06); }
.safety-panel li > span { display: grid; }
.safety-panel .lueur-icon { color: #ffd6d1; font-size: 1.35rem; }
.quote-grid { display: grid; gap: 1rem; }
blockquote { margin: 0; padding: 1.6rem; border-radius: var(--lueur-radius-md); background: #fff; color: var(--lueur-navy); font-family: "DM Serif Display", Georgia, serif; font-size: 1.35rem; box-shadow: var(--lueur-shadow-sm); }
blockquote cite { display: block; margin-top: 1rem; color: var(--lueur-muted); font-family: Manrope, sans-serif; font-size: .82rem; font-style: normal; }
.pricing-grid { display: grid; gap: 1rem; }
.pricing-card { padding: clamp(1.5rem,4vw,2.5rem); border: 1px solid var(--lueur-line); border-radius: var(--lueur-radius-lg); background: #fff; }
.pricing-card--featured { position: relative; background: var(--lueur-violet); color: #fff; }
.pricing-card--featured h2 { color: #fff; }
.pricing-card--featured .badge { position: absolute; inset: 1rem 1rem auto auto; }
.faq-list { display: grid; gap: .7rem; }
.faq-list details { border: 1px solid var(--lueur-line); border-radius: var(--lueur-radius-sm); background: #fff; }
.faq-list summary { padding: 1rem 1.2rem; color: var(--lueur-navy); font-weight: 700; cursor: pointer; }
.faq-list details p { padding: 0 1.2rem 1.2rem; }
.final-cta { padding: clamp(4rem,8vw,7rem) 0; background: var(--lueur-navy-deep); color: #fff; text-align: center; }
.final-cta h2 { max-width: 18ch; margin: 0 auto 1rem; color: #fff; }
.page-hero { padding: clamp(3rem,7vw,6rem) 0; background: radial-gradient(circle at 85% 0, rgba(230,111,104,.2), transparent 30%), var(--lueur-mist); }
.page-hero--compact { padding-block: 2.5rem; }
.page-hero h1 { margin: 0; font-size: clamp(2.5rem,5vw,4.5rem); }
.page-hero__lead { max-width: 42rem; font-size: 1.12rem; }
.prose { max-width: 52rem; padding-block: 3rem 5rem; }
.prose > * { max-width: 100%; }
.prose h2 { margin-top: 2.5rem; }
.app-layout { display: grid; gap: 1.5rem; padding-block: 2rem 5rem; }
.member-sidebar { align-self: start; padding: 1rem; border: 1px solid var(--lueur-line); border-radius: var(--lueur-radius-md); background: #fff; }
.member-sidebar__title { margin: 0 .75rem .5rem; color: var(--lueur-muted); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.member-sidebar ul { margin: 0; padding: 0; list-style: none; }
.member-sidebar a { display: block; padding: .55rem .75rem; border-radius: .6rem; text-decoration: none; }
.member-sidebar a:hover { background: var(--lueur-mist); }
.entry-content { min-width: 0; }
.affinia-shell { min-height: 10rem; }
.affinia-shell :where(.button, button, input[type="submit"]) { min-height: 2.875rem; }
.post-grid { display: grid; gap: 1.25rem; padding-block: 3rem 5rem; }
.post-card { overflow: hidden; border: 1px solid var(--lueur-line); border-radius: var(--lueur-radius-md); background: #fff; }
.post-card__image img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.post-card__body { padding: 1.25rem; }
.post-card__body h2 { margin-top: 0; font-size: 1.65rem; }
.not-found { min-height: 65vh; display: grid; place-items: center; padding: 4rem 0; text-align: center; }
.not-found__code { margin: 0; color: var(--lueur-coral-soft); font-family: "DM Serif Display", serif; font-size: clamp(7rem,25vw,18rem); line-height: .7; }
.site-footer { padding-top: 4rem; background: var(--lueur-navy-deep); color: #d9e2e9; }
.site-footer__grid { display: grid; gap: 2rem; }
.site-branding__name--light { color: #fff; }
.site-footer h2 { color: #fff; font-family: Manrope, sans-serif; font-size: .9rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer a { color: #d9e2e9; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-block: 1.2rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .78rem; }

@media (min-width: 48rem) { .steps-grid, .site-footer__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } .quote-grid, .pricing-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .post-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width: 64rem) { .nav-toggle { display: none; } .primary-navigation { position: static; display: flex; align-items: center; gap: 1rem; padding: 0; border: 0; background: transparent; box-shadow: none; } .primary-navigation > ul { display: flex; align-items: center; } .header-actions { display: flex; margin: 0; } .hero__grid { grid-template-columns: minmax(0,1.12fr) minmax(24rem,.88fr); } .hero__visual { min-height: 36rem; } .safety-panel { grid-template-columns: .95fr 1.05fr; align-items: center; } .app-layout:not(.app-layout--solo) { grid-template-columns: 15rem minmax(0,1fr); } }

/* Visual direction v2: closer to a vibrant, conversion-led dating club. */
.site-header { background: rgba(255,255,255,.94); border-color: rgba(115,56,200,.1); }
.site-header__inner { min-height: 5.3rem; }
.site-branding__name { color: var(--lueur-ink); font-family: Manrope, sans-serif; font-size: 1.45rem; font-weight: 800; letter-spacing: -.045em; }
.site-branding__name::before { width: .72rem; height: .72rem; border-radius: 50%; background: var(--lueur-violet); box-shadow: -.5rem .45rem 0 var(--lueur-lime), .5rem .45rem 0 var(--lueur-coral); content: ""; }
/*
 * `:not(.er-button)` : sans lui, cette règle descendante (0,2,1) écrase le
 * blanc de .er-button--primary (0,1,0) et repeint le bouton d'inscription
 * en gris sombre sur violet — 1,4:1, contre les 4,5:1 exigés. Le bouton de
 * conversion principal du site, illisible, et invisible à la relecture du
 * code : les deux règles vivent dans deux fichiers différents.
 */
.primary-navigation a:not(.er-button) { color: #4b4650; }
.primary-navigation a:not(.er-button):hover { color: var(--lueur-violet-dark); }

.hero { padding: 0; background: #fff; }
.hero::before, .hero::after { position: absolute; z-index: 2; border: 0; border-radius: 50%; filter: blur(3px); content: ""; pointer-events: none; }
.hero::before { top: 4rem; right: 10%; width: 1.8rem; height: 1.8rem; background: rgba(128,212,58,.65); box-shadow: 7rem 9rem 0 rgba(149,87,232,.35), -4rem 25rem 0 rgba(230,111,104,.35); }
.hero::after { right: 2rem; bottom: 5rem; width: 2.2rem; height: 2.2rem; background: rgba(230,111,104,.45); }
.hero .container { width: 100%; max-width: 92rem; }
.hero__grid { display: grid; gap: 0; }
.hero__content { order: 1; padding: clamp(3rem, 7vw, 6.5rem) clamp(1.25rem, 7vw, 6.5rem); }
.hero__media { order: 2; min-height: 28rem; overflow: hidden; background: var(--lueur-lilac); }
.hero__media img { width: 100%; height: 100%; min-height: 28rem; object-fit: cover; object-position: 42% center; }
.hero h1 { max-width: 11ch; margin: 0 0 1.35rem; }
.hero h1::after { display: inline-block; width: .9em; height: .14em; margin-left: -.8em; border-radius: 999px; background: linear-gradient(90deg, var(--lueur-lime), #35c8be); content: ""; transform: translateY(.14em) rotate(-2deg); }
.hero__lead { max-width: 37rem; color: #5b5660; font-size: 1.08rem; }
.hero-search { display: grid; gap: .85rem; max-width: 42rem; margin: 1.75rem 0 1.2rem; }
.hero-search > div { min-width: 0; }
.hero-search label { margin-bottom: .28rem; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.hero-search select { border: 1px solid #c99ff4; background-color: #fff; }
.hero-search .button { width: 100%; }
.trust-list { color: #625b68; }
.trust-list .lueur-icon { color: var(--lueur-violet); }

.section { padding: clamp(4rem, 7vw, 6.5rem) 0; }
.section--tint { background: linear-gradient(180deg, #fcf9ff, #f6ecff); }
.section-heading { max-width: 52rem; }
.step-card { border-color: rgba(149,87,232,.16); border-radius: 1rem; box-shadow: var(--lueur-shadow-sm); }
.step-card > span { color: var(--lueur-violet); }
.safety-panel { background: linear-gradient(135deg, #28173d, #6e35bd); }
.quote-grid blockquote { border: 1px solid rgba(149,87,232,.13); font-family: Manrope, sans-serif; font-size: 1.08rem; }
.final-cta { background: radial-gradient(circle at 20% 20%, rgba(149,87,232,.45), transparent 35%), #21142f; }

@media (min-width: 42rem) {
  .hero-search { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero-search .button { grid-column: 1 / -1; }
}

@media (min-width: 64rem) {
  .hero__grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: stretch; }
  .hero__media { order: 0; min-height: 43rem; }
  .hero__media img { min-height: 43rem; }
  .hero__content { order: 1; display: flex; flex-direction: column; justify-content: center; }
}

/* Dynamic navigation v1.1.1. */
.site-header { transition: box-shadow .22s ease, background-color .22s ease; }
.site-header.is-scrolled { background: rgba(255,255,255,.98); box-shadow: 0 12px 38px rgba(52,26,76,.1); }
.site-header.is-scrolled .site-header__inner { min-height: 4.65rem; }
.site-header__inner { transition: min-height .22s ease; }
.nav-toggle { position: relative; z-index: 72; border: 1px solid rgba(149,87,232,.18); border-radius: .8rem; background: var(--lueur-lilac); }
.nav-toggle__bars { display: grid; width: 1.25rem; gap: .25rem; }
.nav-toggle__bars > span { display: block; width: 100%; height: 2px; border-radius: 999px; background: var(--lueur-violet-dark); transition: transform .22s ease, opacity .18s ease, width .22s ease; }
.nav-toggle__bars > span:nth-child(2) { width: 72%; justify-self: end; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars > span:first-child { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars > span:nth-child(2) { opacity: 0; transform: translateX(8px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars > span:last-child { transform: translateY(-6px) rotate(-45deg); }

.primary-navigation { inset: 5.3rem 0 0 auto; z-index: 70; display: flex; width: min(88vw, 24rem); height: calc(100dvh - 5.3rem); flex-direction: column; justify-content: space-between; padding: 1.35rem; border: 0; border-left: 1px solid rgba(149,87,232,.12); background: #fff; box-shadow: -18px 30px 60px rgba(35,20,49,.16); opacity: 0; visibility: hidden; transform: translateX(105%); transition: transform .26s cubic-bezier(.22,.8,.3,1), opacity .2s ease, visibility .2s ease; }
.primary-navigation.is-open { display: flex; opacity: 1; visibility: visible; transform: translateX(0); }
.primary-navigation:not(.is-open) { display: none; transform: none; }
.primary-navigation > ul { display: grid; gap: .35rem; }
.primary-navigation li { position: relative; }
.primary-navigation a:not(.er-button) { position: relative; padding: .82rem 1rem; border-radius: .8rem; transition: color .18s ease, background-color .18s ease, transform .18s ease; }
.primary-navigation > ul a::after { position: absolute; inset: 50% .8rem auto auto; width: .42rem; height: .42rem; border-radius: 50%; background: var(--lueur-violet); content: ""; opacity: 0; transform: translate(5px,-50%) scale(.5); transition: opacity .18s ease, transform .18s ease; }
.primary-navigation > ul a:hover, .primary-navigation .current-menu-item > a, .primary-navigation .current_page_item > a { background: var(--lueur-lilac); color: var(--lueur-violet-dark); transform: translateX(3px); }
.primary-navigation > ul a:hover::after, .primary-navigation .current-menu-item > a::after, .primary-navigation .current_page_item > a::after { opacity: 1; transform: translate(0,-50%) scale(1); }
.header-actions { margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(149,87,232,.12); }
.header-actions .button { width: 100%; }
.header-cta { position: relative; overflow: hidden; isolation: isolate; }
.header-cta::before { position: absolute; z-index: -1; inset: -2px auto -2px -35%; width: 28%; background: rgba(255,255,255,.28); content: ""; transform: skewX(-20deg); transition: left .38s ease; }
.header-cta:hover::before { left: 115%; }
.header-cta .lueur-icon { transition: transform .2s ease; }
.header-cta:hover .lueur-icon { transform: scale(1.14) rotate(-6deg); }
.nav-backdrop { position: fixed; z-index: 65; inset: 5.3rem 0 0; background: rgba(24,14,33,.38); opacity: 0; visibility: hidden; backdrop-filter: blur(3px); transition: opacity .22s ease, visibility .22s ease; }
.nav-backdrop.is-visible { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }

@media (min-width: 64rem) {
  .primary-navigation,.primary-navigation:not(.is-open) { position: static; inset: auto; z-index: auto; display: flex; width: auto; height: auto; flex-direction: row; align-items: center; gap: 1rem; padding: 0; border: 0; background: transparent; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .primary-navigation > ul { display: flex; gap: .18rem; }
  .primary-navigation a:not(.er-button) { padding: .62rem .78rem; }
  .primary-navigation > ul a::after { inset: auto 50% .25rem auto; width: 1.3rem; height: 3px; border-radius: 999px; transform: translateX(50%) scaleX(0); }
  .primary-navigation > ul a:hover, .primary-navigation .current-menu-item > a, .primary-navigation .current_page_item > a { transform: translateY(-1px); }
  .primary-navigation > ul a:hover::after, .primary-navigation .current-menu-item > a::after, .primary-navigation .current_page_item > a::after { transform: translateX(50%) scaleX(1); }
  .header-actions { align-items: center; margin: 0; padding: 0; border: 0; }
  .header-actions .button { width: auto; }
  .nav-backdrop { display: none; }
  body.nav-open { overflow: auto; }
}

/* Affinia 0.13 integration — member experience. */
.affinia-contract-verified .app-page {
	background: #f7f3ec;
}

.affinia-contract-verified .app-page .page-hero {
	border-bottom: 1px solid rgba(109, 59, 209, .1);
	background: radial-gradient(circle at 82% 18%, rgba(159, 219, 91, .25), transparent 22%), linear-gradient(120deg, #fff, #f6efff);
}

.affinia-contract-verified .app-page .page-hero .eyebrow {
	color: var(--lueur-violet-dark);
}

.affinia-contract-verified .app-layout {
	align-items: start;
	max-width: 92rem;
	gap: 1.5rem;
	padding-top: 2rem;
}

.member-sidebar {
	display: none;
}

.member-sidebar__intro {
	display: grid;
	gap: .25rem;
	padding: .5rem .75rem 1.2rem;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.member-sidebar__intro .member-sidebar__title {
	margin: 0;
	color: var(--lueur-lime);
}

.member-sidebar__intro strong {
	color: #fff;
	font-size: 1.35rem;
}

.member-sidebar__intro span,
.member-sidebar__safety span {
	color: #d9d0e5;
	font-size: .78rem;
	line-height: 1.45;
}

.member-sidebar a {
	display: flex;
	align-items: center;
	gap: .7rem;
	color: #f8f4fc;
}

.member-sidebar a > span {
	display: grid;
	width: 1.45rem;
	height: 1.45rem;
	place-items: center;
	color: #c8b5e9;
}

.member-sidebar a:hover,
.member-sidebar a:focus-visible,
.member-sidebar a.is-current {
	background: rgba(109, 59, 209, .42);
	color: #fff;
	transform: none;
}

.member-sidebar a.is-current > span {
	color: var(--lueur-lime);
}

.member-sidebar__safety {
	display: grid;
	gap: .35rem;
	margin-top: 1rem;
	padding: 1rem;
	border-radius: .9rem;
	background: rgba(109, 59, 209, .38);
}

.member-sidebar__safety strong {
	color: #fff;
	font-size: .88rem;
}

.member-mobile-nav {
	position: fixed;
	z-index: 60;
	right: 0;
	bottom: 0;
	left: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	padding: .45rem max(.5rem, env(safe-area-inset-right)) calc(.45rem + env(safe-area-inset-bottom)) max(.5rem, env(safe-area-inset-left));
	border-top: 1px solid rgba(109, 59, 209, .14);
	background: rgba(255, 255, 255, .97);
	box-shadow: 0 -12px 35px rgba(33, 24, 44, .1);
	backdrop-filter: blur(14px);
}

.member-mobile-nav a {
	display: grid;
	justify-items: center;
	gap: .15rem;
	padding: .35rem .15rem;
	color: #716978;
	font-size: .67rem;
	font-weight: 700;
	text-decoration: none;
}

.member-mobile-nav a > span {
	font-size: 1.05rem;
	line-height: 1;
}

.member-mobile-nav a.is-current {
	color: var(--lueur-violet-dark);
}

.logged-in .app-page {
	padding-bottom: 4.5rem;
}

.affinia-shell {
	min-width: 0;
	min-height: 12rem;
}

.affinia-shell[data-affinia-contract="verified"] > .affinia,
.affinia-shell[data-affinia-contract="verified"] > form,
.affinia-shell[data-affinia-contract="verified"] > div {
	width: 100%;
}

.affinia-shell .affinia {
	max-width: none;
	color: var(--lueur-ink);
	font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.affinia-shell :where(.affinia-form, .affinia-plan-card, .affinia-member-card, .affinia-notifications, .affinia-advanced-search) {
	border: 1px solid rgba(109, 59, 209, .14);
	border-radius: 1.15rem;
	background: #fff;
	box-shadow: 0 18px 55px rgba(52, 30, 73, .08);
}

.affinia-shell .affinia-form {
	display: grid;
	gap: 1rem;
	max-width: 42rem;
	margin: 0 auto;
	padding: clamp(1.25rem, 4vw, 2.25rem);
}

.affinia-shell .affinia-field {
	display: grid;
	gap: .4rem;
	margin: 0;
}

.affinia-shell .affinia-field > label,
.affinia-shell .affinia-search-fields label {
	color: #362c3e;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .02em;
}

.affinia-shell :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
	width: 100%;
	min-height: 3.25rem;
	padding: .8rem 1rem;
	border: 1px solid #d9cee4;
	border-radius: .8rem;
	background: #fff;
	color: var(--lueur-ink);
	font: inherit;
}

.affinia-shell :where(input, select, textarea):focus {
	border-color: var(--lueur-violet);
	outline: 3px solid rgba(109, 59, 209, .16);
	outline-offset: 1px;
}

.affinia-shell .affinia-field--checkbox {
	padding: .85rem 1rem;
	border-radius: .8rem;
	background: #f8f4fc;
}

.affinia-shell .affinia-field--checkbox label {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	font-weight: 600;
	line-height: 1.45;
}

.affinia-shell .affinia-field--checkbox input {
	width: 1.15rem;
	height: 1.15rem;
	margin-top: .15rem;
	accent-color: var(--lueur-violet);
}

.affinia-shell .affinia-help {
	color: #746b7a;
	font-size: .76rem;
}

.affinia-shell .affinia-honeypot {
	position: absolute !important;
	left: -9999px !important;
}

.affinia-shell :where(.affinia-btn, button[type="submit"], input[type="submit"]) {
	display: inline-flex;
	min-height: 3rem;
	align-items: center;
	justify-content: center;
	padding: .75rem 1.25rem;
	border: 0;
	border-radius: .75rem;
	background: #2c2930;
	color: #fff;
	font: 800 .9rem/1 Manrope, sans-serif;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.affinia-shell :where(.affinia-btn-primary, button[type="submit"]):hover {
	background: var(--lueur-violet-dark);
	box-shadow: 0 10px 24px rgba(109, 59, 209, .25);
	transform: translateY(-1px);
}

.affinia-shell .affinia-forgot {
	margin: -.25rem 0 0;
	text-align: center;
}

/*
 * La grille est .affinia-grid, pas son enveloppe.
 *
 * Cette règle visait .affinia-members-grid, qui est le conteneur du
 * shortcode : tant qu'il n'avait qu'un enfant, cela revenait au même. Le
 * plugin y a ajouté un relevé destiné aux administrateurs, et les deux se
 * sont rangés côte à côte — les cartes, enfermées dans une demi-largeur,
 * n'en affichaient plus qu'une par ligne. Un défaut que seuls les
 * administrateurs voyaient, puisqu'eux seuls reçoivent ce paragraphe.
 */
.affinia-shell .affinia-members-grid .affinia-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 1rem;
}

.affinia-shell .affinia-members-grid:empty,
.affinia-shell .affinia-members-grid:not(:has(> *)) {
	min-height: 22rem;
	place-items: center;
	border-radius: 1.15rem;
	background: #f5edff;
}

.affinia-shell .affinia-advanced-search {
	padding: clamp(1.1rem, 3vw, 2rem);
}

.affinia-shell .affinia-search-fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: 1rem;
}

.affinia-shell .affinia-search-fields :where(fieldset, .affinia-field) {
	min-width: 0;
	margin: 0;
	padding: 1rem;
	border: 1px solid #e3d9ea;
	border-radius: .9rem;
	background: #fbf9fd;
}

.affinia-shell .affinia-search-fields fieldset {
	display: grid;
	align-content: start;
	gap: .55rem;
}

.affinia-shell .affinia-search-fields legend {
	padding: 0 .25rem;
	color: #362c3e;
	font-size: .85rem;
	font-weight: 800;
}

.affinia-shell .affinia-plans-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: 1rem;
}

.affinia-shell .affinia-plan-card {
	display: grid;
	align-content: start;
	gap: 1rem;
	padding: clamp(1.35rem, 4vw, 2rem);
}

.affinia-shell .affinia-plan-card h2,
.affinia-shell .affinia-plan-card h3 {
	margin: 0;
}

.affinia-shell .affinia-plan-features {
	display: grid;
	gap: .55rem;
	padding-left: 1.2rem;
}

.affinia-shell :where(.affinia-notice, .affinia-alert, .affinia-flash) {
	padding: .9rem 1rem;
	border: 1px solid rgba(109, 59, 209, .2);
	border-radius: .8rem;
	background: #f5edff;
}

@media (min-width: 64rem) {
	/*
	 * Deux colonnes seulement quand la barre latérale existe. Elle n'est
	 * rendue que pour un membre connecté ; sans cette condition, le contenu
	 * d'une page déconnectée — inscription, connexion — occupait la colonne
	 * de la barre latérale, soit 16 rem, collé à gauche.
	 */
	.affinia-contract-verified .app-layout:not(.app-layout--solo) {
		grid-template-columns: 16rem minmax(0, 1fr);
	}

	.member-sidebar {
		position: sticky;
		top: 6.35rem;
		display: block;
		padding: 1rem;
		border: 0;
		border-radius: 1.15rem;
		background: #21182c;
		box-shadow: 0 20px 55px rgba(33, 24, 44, .16);
	}

	.member-sidebar ul {
		display: grid;
		gap: .18rem;
		padding-top: 1rem;
	}

	.member-mobile-nav {
		display: none;
	}

	.logged-in .app-page {
		padding-bottom: 0;
	}
}

/* ==========================================================================
   Fiche d'un membre (plugin Affinia, gabarit detailed-profile.php)
   ==========================================================================

   Le plugin rend un balisage correct et sans habillage : une photo de
   220 px posée dans le flux, un titre, des paragraphes, et une dizaine de
   boutons qui retombent les uns sous les autres. Sur un site de rencontre,
   la fiche est l'écran où l'on décide d'écrire à quelqu'un — c'est le
   dernier endroit où l'on peut se permettre d'avoir l'air d'un brouillon.

   Tout se fait ici, en CSS, sans surcharger le gabarit du plugin : une
   copie du gabarit dans le thème se figerait à la version du jour, et
   chaque correction du plugin cesserait de nous parvenir. Les classes
   utilisées sont celles qu'il pose déjà.
   ========================================================================== */

.affinia-detailed-profile {
	max-width: 60rem;
	margin: 0 auto;
}

/* --- L'en-tête : photo et identité ---------------------------------- */

.affinia-detailed-profile-header {
	display: grid;
	gap: clamp(1.25rem, 4vw, 2.5rem);
	align-items: center;
	padding: clamp(1.25rem, 4vw, 2rem);
	border: 1px solid var(--er-line, #e7e0ec);
	border-radius: var(--er-radius, 20px);
	background: var(--er-white, #fff);
	box-shadow: 0 1.25rem 3rem rgba(33, 24, 44, 0.06);
}

/* Une seule colonne sous 40rem : à deux, la photo écrase le texte et le
   nom se casse en trois lignes. */
@media (min-width: 40rem) {
	.affinia-detailed-profile-header {
		grid-template-columns: 13.75rem minmax(0, 1fr);
	}
}

/* La photo et l'avatar de repli partagent la même forme : sans cela, un
   membre sans photo a une vignette ronde là où les autres ont un carré
   arrondi, et la grille paraît cassée alors qu'elle ne l'est pas. */
.affinia-detailed-profile-photo,
.affinia-detailed-profile-header .avatar {
	width: 100%;
	max-width: 13.75rem;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 1rem;
	background: var(--er-lavender, #f1eafd);
}

.affinia-detailed-profile-identity h2 {
	margin: 0 0 0.5rem;
	color: var(--er-ink, #241f2d);
	font-size: clamp(1.75rem, 5vw, 2.25rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.03em;
}

/* L'âge est une information, pas une partie du nom : il en prend le poids
   d'une donnée. Séparé par une espace fine plutôt qu'une virgule, comme
   sur la maquette. */
.affinia-detailed-profile-age {
	margin-left: 0.5rem;
	color: var(--er-muted, #6d6675);
	font-size: 0.6em;
	font-weight: 600;
}

.affinia-detailed-profile-location,
.affinia-detailed-profile-gender,
.affinia-detailed-profile-plan,
.affinia-detailed-profile-status {
	margin: 0.25rem 0;
	color: var(--er-muted, #6d6675);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.affinia-detailed-profile-location::before {
	content: "📍 ";
}

.affinia-detailed-profile-plan {
	display: inline-block;
	margin-top: 0.75rem;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: var(--er-lavender, #f1eafd);
	color: var(--er-purple-dark, #4c219d);
	font-size: 0.8125rem;
	font-weight: 700;
}

.affinia-status-online {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: #1a7f37;
	font-weight: 700;
}

.affinia-status-online::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: currentColor;
}

/* --- Les actions ---------------------------------------------------- */

/* Le gabarit intercale des <form style="display:inline"> entre les
   boutons : sans cette mise à plat, flex ne voit que les formulaires et
   les boutons s'alignent n'importe comment. */
.affinia-detailed-profile-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	align-items: center;
	margin: 1.5rem 0 0;
	padding: 1.25rem;
	border: 1px solid var(--er-line, #e7e0ec);
	border-radius: var(--er-radius, 20px);
	background: var(--er-cream, #fbf8f2);
}

.affinia-detailed-profile-actions form,
.affinia-detailed-profile-actions details {
	display: inline-flex;
	margin: 0;
}

.affinia-detailed-profile-actions .button,
.affinia-detailed-profile-actions summary.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.625rem 1.25rem;
	/*
	 * #8f8699 et non --er-line : la bordure d'un bouton est la limite d'un
	 * contrôle, que la WCAG 1.4.11 exige à 3:1 au moins. La ligne du thème
	 * ressort à 1,22:1 sur le fond crème et à 1,29:1 sur blanc — le bouton
	 * n'y a alors aucun contour perceptible, et son fond blanc sur crème
	 * ne le distingue pas davantage. Mesurée : 3,28:1 sur crème,
	 * 3,48:1 sur blanc.
	 */
	border: 2px solid #8f8699;
	border-radius: 999px;
	background: var(--er-white, #fff);
	color: var(--er-ink, #241f2d);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	list-style: none;
}

.affinia-detailed-profile-actions .button:hover,
.affinia-detailed-profile-actions .button:focus-visible,
.affinia-detailed-profile-actions summary.button:hover,
.affinia-detailed-profile-actions summary.button:focus-visible {
	border-color: var(--er-purple, #6d3bd1);
	color: var(--er-purple-dark, #4c219d);
}

.affinia-detailed-profile-actions .button:focus-visible,
.affinia-detailed-profile-actions summary.button:focus-visible {
	outline: 3px solid var(--er-lime, #9fdb5b);
	outline-offset: 3px;
}

/* Le premier bouton est l'action attendue : écrire. Les autres sont des
   possibilités, pas des invitations. */
.affinia-detailed-profile-actions > .button:first-child {
	border-color: var(--er-purple, #6d3bd1);
	background: var(--er-purple, #6d3bd1);
	color: #fff;
}

.affinia-detailed-profile-actions > .button:first-child:hover,
.affinia-detailed-profile-actions > .button:first-child:focus-visible {
	background: var(--er-purple-dark, #4c219d);
	color: #fff;
}

/* Le formulaire de signalement sort du flux des boutons une fois ouvert :
   replié il n'est qu'un bouton de plus, déplié il prend sa ligne. */
.affinia-detailed-profile-actions details[open] {
	flex: 1 0 100%;
	flex-direction: column;
	gap: 0.625rem;
	align-items: flex-start;
}

.affinia-detailed-profile-actions details[open] form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	width: 100%;
}

.affinia-detailed-profile-actions input[type="text"] {
	flex: 1 1 14rem;
	min-height: 2.75rem;
	padding: 0.5rem 0.875rem;
	/* Même règle : le bord d'un champ de saisie est ce qui dit où écrire. */
	border: 2px solid #8f8699;
	border-radius: 0.75rem;
	font: inherit;
}

/* --- Les sections --------------------------------------------------- */

.affinia-detailed-profile-bio,
.affinia-detailed-profile-astro,
.affinia-detailed-profile-fields {
	margin: 1.5rem 0 0;
	padding: clamp(1.25rem, 4vw, 1.75rem);
	border: 1px solid var(--er-line, #e7e0ec);
	border-radius: var(--er-radius, 20px);
	background: var(--er-white, #fff);
}

.affinia-detailed-profile-bio h3,
.affinia-detailed-profile-astro h3 {
	margin: 0 0 0.75rem;
	color: var(--er-ink, #241f2d);
	font-size: 1.125rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.affinia-detailed-profile-bio p,
.affinia-detailed-profile-astro p {
	margin: 0 0 0.5rem;
	color: var(--er-ink, #241f2d);
	font-size: 1rem;
	line-height: 1.7;
}

.affinia-detailed-profile-astro .description,
.affinia-detailed-profile-actions .description {
	color: var(--er-muted, #6d6675);
	font-size: 0.875rem;
	line-height: 1.6;
}

/* Les champs de profil : des listes, sans puces — affinia.css n'habille
   aucune liste et les puces resteraient. */
.affinia-detailed-profile-fields ul {
	display: grid;
	gap: 0.625rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

@media (min-width: 40rem) {
	.affinia-detailed-profile-fields ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.affinia-detailed-profile-fields li {
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	background: var(--er-cream, #fbf8f2);
	color: var(--er-ink, #241f2d);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.affinia-detailed-profile-fields strong {
	color: var(--er-muted, #6d6675);
	font-weight: 700;
}

/* --- La galerie ----------------------------------------------------- */

.affinia-detailed-profile-gallery {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
	margin: 1.5rem 0 0;
}

.affinia-detailed-profile-gallery .affinia-card {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

/* --- La mention « démonstration » ----------------------------------- */

.affinia-profile-demo {
	display: inline-block;
	margin: 0 0 0.75rem;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: #f0ead9;
	color: #6b551a;
	font-size: 0.8125rem;
	font-weight: 700;
}

/* --- La sortie de l'espace membre ------------------------------------ */

/*
 * Le bouton de déconnexion, à côté de « Mon profil ».
 *
 * Il vient d'Affinia quand le plugin est là, du thème sinon : les deux
 * cas doivent s'aligner sur l'identité du membre plutôt que de flotter au
 * bout de la barre. La feuille d'Affinia habille son bouton, mais ses
 * règles sont préfixées .affinia-shell et ne portent pas jusqu'ici.
 */
.er-header__cta + .affinia-session,
.er-header__cta + .er-button--ghost {
	margin-left: .75rem;
}

.primary-navigation .affinia-session {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}

.er-button--ghost {
	display: inline-flex;
	align-items: center;
	padding: .5rem 1rem;
	border: 1px solid var(--er-border, #d7d2de);
	border-radius: 999px;
	color: var(--er-ink, #1d1726);
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
}

.er-button--ghost:hover,
.er-button--ghost:focus-visible {
	border-color: var(--er-ink, #1d1726);
	background: var(--er-surface-soft, #f5f1fa);
}

/* --- Les deux espaces de rencontre, sur l'accueil -------------------- */

/*
 * Deux cartes entièrement cliquables, sur la trame du thème : mêmes
 * variables de couleur, même rayon, même filet que les blocs voisins. Les
 * espaces se distinguent par leur texte, pas par un habillage propre —
 * une couleur par orientation ferait de la mise en page un classement.
 */
.er-espaces__grid {
	display: grid;
	gap: 1.25rem;
	margin-top: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.er-espace {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1.75rem;
	overflow: hidden;
	border: 1px solid var(--er-line, #e7e0ec);
	border-radius: var(--er-radius, 20px);
	background: var(--er-white, #fff);
	color: inherit;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.er-espace:hover,
.er-espace:focus-visible {
	transform: translateY(-2px);
	border-color: var(--er-purple, #6d3bd1);
	box-shadow: 0 12px 28px rgba(36, 31, 45, .10);
}

@media (prefers-reduced-motion: reduce) {
	.er-espace {
		transition: none;
	}

	.er-espace:hover,
	.er-espace:focus-visible {
		transform: none;
	}
}

.er-espace h3 {
	margin: 0;
	color: var(--er-ink, #241f2d);
	font-size: 1.25rem;
}

.er-espace p {
	margin: 0;
	color: var(--er-muted, #6d6675); /* 5,52:1 sur blanc. */
}

/*
 * Le lien final n'est pas un lien : la carte entière l'est déjà. Deux
 * liens vers la même cible obligeraient quelqu'un qui navigue au clavier à
 * passer deux fois par chaque espace.
 */
.er-espace__lien {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: .5rem;
	color: var(--er-purple-dark, #4c219d); /* 10,44:1 sur blanc. */
	font-weight: 700;
}

/* --- Le bandeau de consentement -------------------------------------- */

/*
 * Compact, en bas à gauche, et non un pavé qui occupe le tiers de l'écran.
 * Un bandeau de cookies est une formalité : il doit être lisible, honnête
 * et rapide à traiter, pas impressionnant.
 *
 * Largeur bornée à 26 rem : au-delà, la ligne de texte dépasse la longueur
 * confortable de lecture, et le bloc se met à ressembler à une fenêtre
 * modale alors qu'il n'en est pas une.
 */
.er-consentement {
	position: fixed;
	/*
	 * 120, et non 60.
	 *
	 * Le voile du menu mobile est à 65 et la navigation à 70 : ouverts, ils
	 * passaient devant le bandeau et interceptaient le clic. Ils sont
	 * masqués au repos, donc inoffensifs la plupart du temps — mais « la
	 * plupart du temps » n'est pas une garantie pour le seul élément du
	 * site qui demande une décision. Au-dessus de tout ce que le thème
	 * pose, sous la barre d'administration de WordPress (99999), qui doit
	 * rester atteignable.
	 */
	z-index: 120;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	max-width: 21rem;
	padding: .85rem .95rem .8rem;
	border: 1px solid var(--er-line, #e7e0ec);
	border-radius: 12px;
	background: var(--er-white, #fff);
	box-shadow: 0 8px 28px rgba(36, 31, 45, .16);
	font-size: .8125rem;
	line-height: 1.45;
}

/*
 * L'arrivée. Le bandeau glisse depuis le bas, brièvement.
 *
 * Pas pour faire joli : posé d'un coup, il fait sursauter et se lit comme
 * une erreur. Un mouvement court dit d'où il vient et qu'il n'est pas la
 * page. 240 ms — au-delà, on attend, et c'est la première chose qu'on
 * demande au visiteur de faire.
 */
@keyframes er-consentement-arrivee {
	from { opacity: 0; transform: translateY( .75rem ); }
	to   { opacity: 1; transform: none; }
}

.er-consentement:not([hidden]) {
	animation: er-consentement-arrivee 240ms cubic-bezier( .2, .8, .3, 1 ) both;
}

.er-consentement__titre {
	margin: 0 0 .2rem;
	color: var(--er-ink, #241f2d);
	font-size: .8125rem;
	font-weight: 700;
}

.er-consentement__texte {
	margin: 0;
	color: var(--er-muted, #6d6675); /* 5,52:1 sur blanc. */
}

/*
 * Le détail, ouvert par « Personnaliser ».
 *
 * grid-template-rows de 0fr à 1fr : c'est la seule façon d'animer
 * l'ouverture d'un bloc dont on ignore la hauteur, sans la calculer en
 * JavaScript ni figer un max-height au jugé — un max-height trop court
 * coupe le texte, trop grand rend l'animation molle.
 *
 * L'attribut hidden reste la vérité : le JavaScript le retire, la classe
 * suit. Sans script, le détail est absent et les deux boutons suffisent.
 */
/*
 * [hidden] d'abord, et il le faut.
 *
 * display: grid est une règle d'auteur ; [hidden] { display: none } vient
 * de la feuille du navigateur, que toute règle d'auteur emporte. Le
 * panneau de détail restait donc dans la page malgré son attribut hidden.
 * Il ne se voyait pas — la grille à 0fr et le débordement masqué lui
 * donnaient une hauteur nulle — mais il restait dans l'arbre
 * d'accessibilité : la tabulation entrait dans des cases à cocher
 * invisibles, et un lecteur d'écran les annonçait.
 *
 * Le même piège que le bouton « Voir plus » du plugin, à trois semaines
 * d'intervalle. Il ne se voit pas à la relecture : les deux règles sont
 * correctes, et c'est leur rencontre qui ne l'est pas.
 */
.er-consentement__details[hidden] {
	display: none;
}

.er-consentement__details {
	display: grid;
	grid-template-rows: 0fr;
	margin-top: 0;
	transition: grid-template-rows 220ms ease, margin-top 220ms ease;
}

.er-consentement__details > * {
	overflow: hidden;
	min-height: 0;
}

.er-consentement__details.est-ouvert {
	grid-template-rows: 1fr;
	margin-top: .7rem;
}

.er-consentement__liste {
	display: grid;
	gap: .45rem;
}

/*
 * Une catégorie : un interrupteur, un intitulé, une explication.
 *
 * C'était une case à cocher ordinaire, que la règle générique des champs
 * du thème rendait en grand carré vide de la largeur du bandeau. La règle
 * est corrigée à la source ; l'interrupteur, lui, dit mieux ce qu'il fait
 * — une case parle d'un formulaire à valider, un interrupteur d'un état
 * qu'on bascule.
 */
.er-consentement__choix {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .55rem;
	align-items: start;
	padding: .5rem .55rem;
	border: 1px solid var(--er-line, #e7e0ec);
	border-radius: 9px;
	cursor: pointer;
	transition: border-color 140ms ease, background-color 140ms ease;
}

/*
 * #8f77bd, et non le lavande clair que j'avais posé d'abord.
 *
 * Celui-ci donnait 2,18:1 sur blanc, sous les 3:1 que le critère 1.4.11
 * demande à la limite d'un élément d'interface. On peut soutenir que ce
 * cadre est décoratif — l'interrupteur, lui, est à 3,48:1 et porte seul
 * l'état — mais il change au survol et à la sélection, donc il informe.
 * Une bordure qui informe se voit, ou elle n'informe pas : 3,79:1 sur
 * blanc, 3,44:1 sur le fond sélectionné.
 */
.er-consentement__choix:hover {
	border-color: #8f77bd;
	background: #faf7fe;
}

.er-consentement__choix:has( input:checked ) {
	border-color: #8f77bd;
	background: #f7f2fd;
}

.er-consentement__choix strong {
	display: block;
	color: var(--er-ink, #241f2d);
	font-size: .8125rem;
}

.er-consentement__choix span span {
	color: var(--er-muted, #6d6675);
	font-size: .75rem;
	line-height: 1.35;
}

/*
 * L'interrupteur. La case reste dans le balisage — c'est elle qui porte
 * l'état, le nom et le focus clavier ; la remplacer par un bouton
 * fabriqué en JavaScript perdrait les trois. Elle est seulement rendue
 * invisible, et dessinée par-dessus.
 */
.er-consentement__bascule {
	position: relative;
	flex: 0 0 auto;
	width: 2rem;
	height: 1.125rem;
	margin-top: .1rem;
}

.er-consentement__bascule input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.er-consentement__bascule span {
	position: absolute;
	inset: 0;
	border: 1px solid #8f8699; /* 3,48:1 sur blanc — limite d'un élément d'interface. */
	border-radius: 999px;
	background: #f1eef5;
	transition: background-color 160ms ease, border-color 160ms ease;
	pointer-events: none;
}

.er-consentement__bascule span::after {
	content: "";
	position: absolute;
	top: 50%;
	left: .1875rem;
	width: .75rem;
	height: .75rem;
	border-radius: 50%;
	background: #6d6675;
	transform: translateY( -50% );
	transition: transform 160ms cubic-bezier( .2, .8, .3, 1 ), background-color 160ms ease;
}

.er-consentement__bascule input:checked + span {
	border-color: var(--er-purple-dark, #4c219d);
	background: var(--er-purple-dark, #4c219d); /* 10,44:1 sur blanc. */
}

.er-consentement__bascule input:checked + span::after {
	background: #fff; /* 10,44:1 sur #4c219d. */
	transform: translateY( -50% ) translateX( .8125rem );
}

/*
 * Le focus se voit sur le dessin, pas sur la case invisible : un contour
 * posé sur un élément transparent ne se voit nulle part.
 */
.er-consentement__bascule input:focus-visible + span {
	outline: 2px solid var(--er-purple-dark, #4c219d);
	outline-offset: 2px;
}

.er-consentement__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	margin-top: .75rem;
}

/*
 * « Refuser » et « Accepter » ont le même poids : même taille, même forme,
 * côte à côte. La CNIL sanctionne l'inverse — un refus relégué en lien
 * discret — et c'est le motif le plus fréquent de ses mises en demeure.
 * Seule la couleur de fond les distingue, jamais leur importance.
 */
.er-consentement__bouton {
	flex: 1 1 auto;
	padding: .45rem .85rem;
	/*
	 * #8f8699, et non le filet ordinaire du thème : celui-ci donne 1,29:1
	 * sur blanc, une bordure qu'on ne voit pas. Le critère 1.4.11 des WCAG
	 * demande 3:1 pour la limite d'un élément d'interface, et ici l'enjeu
	 * dépasse la norme — un bouton « Refuser » qu'on distingue mal du fond
	 * est exactement ce que la CNIL sanctionne.
	 */
	border: 1px solid #8f8699;
	border-radius: 999px;
	background: var(--er-white, #fff);
	color: var(--er-ink, #241f2d);
	font: inherit;
	font-size: .8125rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.er-consentement__bouton:hover,
.er-consentement__bouton:focus-visible {
	border-color: var(--er-ink, #241f2d);
}

.er-consentement__bouton:active {
	transform: translateY( 1px );
}

.er-consentement__bouton--primaire {
	border-color: var(--er-purple, #6d3bd1);
	background: var(--er-purple, #6d3bd1);
	color: #fff; /* 6,57:1 sur #6d3bd1. */
}

.er-consentement__bouton--primaire:hover,
.er-consentement__bouton--primaire:focus-visible {
	background: var(--er-purple-dark, #4c219d);
	border-color: var(--er-purple-dark, #4c219d);
}

/* « Personnaliser » est un lien : c'est un détour, pas une décision. */
.er-consentement__lien {
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	background: none;
	color: var(--er-purple-dark, #4c219d); /* 10,44:1 sur blanc. */
	font: inherit;
	font-size: .75rem;
	text-decoration: underline;
	cursor: pointer;
}

/*
 * Tout le mouvement est un confort, jamais une condition. Qui l'a
 * désactivé au niveau du système voit le même bandeau, les mêmes états et
 * les mêmes boutons — simplement sans transition. Le détail s'ouvre d'un
 * coup, ce qui est exactement ce qu'il faisait avant.
 */
@media ( prefers-reduced-motion: reduce ) {
	.er-consentement:not([hidden]) { animation: none; }
	.er-consentement__details,
	.er-consentement__bouton,
	.er-consentement__choix,
	.er-consentement__bascule span,
	.er-consentement__bascule span::after { transition: none; }
}

@media (min-width: 40rem) {
	.er-consentement {
		right: auto;
	}
}

/*
 * Une carte d'espace illustrée.
 *
 * La photo occupe toute la largeur, bord à bord : la marge intérieure de
 * la carte passe alors sur le contenu, pas sur l'image. Sans cela, la
 * photo flotterait dans un encadré blanc, ce qui donne toujours l'air d'un
 * bandeau publicitaire posé là.
 *
 * Le cadre est une bande large, bornée en hauteur : voir
 * .er-espace__visuel. Une image verticale y perd beaucoup de hauteur — un
 * recadrage légèrement au-dessus du centre garde le sujet dans la plupart
 * des cas, et c'est le compromis d'une vignette.
 */
.er-espace--illustre {
	padding: 0;
	gap: 0;
}

/*
 * Une bande, pas un pavé.
 *
 * Le premier jet était en 3/2 — le format des photographies, donc celui
 * qui recadre le moins. Sur une carte de 20 rem, cela donnait treize rem
 * de haut : la photo occupait plus de place que le texte, et la carte
 * devenait une image légendée plutôt qu'une invitation à cliquer.
 *
 * 16/9, et jamais plus de 9 rem : la photo situe l'espace d'un coup d'œil
 * sans prendre le pas sur ce qu'elle accompagne. Le plafond compte autant
 * que le rapport — sur un grand écran, une carte large ferait sinon
 * grandir la bande d'autant.
 */
.er-espace__visuel {
	display: block;
	aspect-ratio: 16 / 9;
	max-height: 9rem;
	overflow: hidden;
	background: var(--er-lavender, #f1eafd);
}

.er-espace__visuel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	 * Légèrement au-dessus du centre : sur un portrait comme sur un
	 * paysage, les visages sont plus souvent dans la moitié haute que dans
	 * la basse.
	 */
	object-position: center 40%;
	transition: transform .3s ease;
}

.er-espace--illustre:hover .er-espace__visuel img,
.er-espace--illustre:focus-visible .er-espace__visuel img {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.er-espace__visuel img {
		transition: none;
	}

	.er-espace--illustre:hover .er-espace__visuel img,
	.er-espace--illustre:focus-visible .er-espace__visuel img {
		transform: none;
	}
}

.er-espace__contenu {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1.5rem 1.75rem 1.75rem;
}

/*
 * « Connexion », à côté de « Inscription gratuite ».
 *
 * Elle était dans la liste de navigation, et disparaissait donc avec elle
 * dès qu'un menu était assigné dans Apparence → Menus. Un menu d'une seule
 * entrée — ce qu'on fait naturellement en découvrant cet écran — retirait
 * de l'en-tête le seul lien qui ramène un membre chez lui.
 *
 * Les deux boutons vont ensemble : entrer, ou s'inscrire. Le contour
 * plutôt que le plein, pour que l'inscription reste l'action mise en avant
 * sans que la connexion devienne un lien qu'on cherche.
 */
.er-header__connexion {
	flex: 0 0 auto;
	white-space: nowrap;
}

@media ( max-width: 48rem ) {
	/*
	 * Sur mobile, le libellé du bouton d'inscription prend toute la
	 * largeur restante et repousse la connexion hors de l'écran. Les deux
	 * se resserrent plutôt que l'une d'elles disparaisse — là encore,
	 * c'est la porte d'entrée.
	 */
	.er-header__connexion,
	.er-header__cta {
		padding-left: .9rem;
		padding-right: .9rem;
		font-size: .875rem;
	}
}