/* ScienceActu · Surligneur · account: sign-in/join pages, Mon compte, the Pass. */

/* ------------------------------------------------------------------ auth */
/* Sign-in, sign-up, password and contact pages: the site's own surface and
   parts. Form on the left (marker title), the latest articles (rows, as in
   Le fil) or practical notes in the margin, after a hairline. */
.sa-auth { padding-top: clamp(40px, 6vw, 96px); }
.sa-auth-in { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.sa-auth.is-contact .sa-auth-in { grid-template-columns: minmax(0, 620px) minmax(0, 1fr); }
.sa-auth-form { display: grid; gap: 16px; min-width: 0; }
.sa-auth-k { font-size: var(--t-s); font-weight: 720; color: var(--ink-2); }
.sa-auth-k::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 3px; background: var(--hl); vertical-align: -1px; }
.sa-auth-t { margin-top: -4px; font-size: clamp(2.4rem, 1.4rem + 2.6vw, 3.6rem); font-weight: 840; font-stretch: 114%; line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
.sa-auth-lede { margin-bottom: 8px; max-width: 46ch; font: 400 1.0625rem/1.6 var(--f-read); color: var(--ink-2); }
.sa-auth-form .sa-flash { width: 100%; margin: 0; }
.sa-auth-form .sa-form { gap: 18px; }
.sa-auth-form .sa-field input:not([type="checkbox"]), .sa-auth-form .sa-field select { height: 54px; font-size: 1rem; }
.sa-auth-form .sa-btn[type="submit"] { width: 100%; min-height: 56px; margin-top: 4px; }
.sa-auth-form .tsg-field { margin: 0; }
/* Turnstile loads at the first touch of the form (site speed). Until then its
   place stays closed, so no empty block; it opens when the widget mounts. */
.sa-auth-form .tsg-field--deferred:not([data-tsg-booted]) .tsg-widget { min-height: 0; }
.sa-auth-form .tsg-field--deferred:not([data-tsg-booted]) { margin-top: -18px; }
.sa-pwd { position: relative; display: block; }
.sa-pwd input { width: 100%; padding-right: 96px !important; }
.sa-pwd-t { position: absolute; top: 50%; right: 8px; translate: 0 -50%; height: 38px; padding: 0 12px; border-radius: var(--r-pill); font-size: var(--t-s); font-weight: 650; color: var(--ink-2); transition: background var(--fast), color var(--fast); }
.sa-pwd-t:hover { background: var(--sunk); color: var(--ink); }
.sa-auth-or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin-top: 10px; font-size: var(--t-s); color: var(--ink-3); }
.sa-auth-or::before, .sa-auth-or::after { content: ""; height: 1px; background: var(--line); }
.sa-auth-alt { font-size: var(--t-ui); color: var(--ink-2); margin-top: 6px; }
.sa-auth-alt a { font-weight: 700; color: var(--ink); background: linear-gradient(var(--hl), var(--hl)) no-repeat 0 100% / 100% 0.3em; }
.sa-follow-pick .sa-chips { gap: 6px; }
.sa-auth-aside { min-width: 0; padding-left: clamp(28px, 4vw, 64px); border-left: 1px solid var(--line); }
.sa-auth-aside .sa-sh { margin-bottom: 8px; }
.sa-auth-aside .sa-rows { margin-top: 12px; }
.sa-auth-aside > .sa-more { margin-top: 18px; }
.sa-auth-notes li { padding: 20px 0; border-top: 1px solid var(--line); }
.sa-auth-notes li:first-child { border-top: 0; }
.sa-auth-notes li:last-child { border-bottom: 1px solid var(--line); }
.sa-auth-notes b { display: block; font-size: var(--t-4); font-weight: 720; }
.sa-auth-notes p { margin-top: 6px; font: 400 var(--t-ui)/1.6 var(--f-read); color: var(--ink-2); }
@media (max-width: 900px) {
	.sa-auth-in, .sa-auth.is-contact .sa-auth-in { grid-template-columns: 1fr; gap: 48px; }
	.sa-auth-aside { padding: 36px 0 0; border-left: 0; border-top: 1px solid var(--line); }
	.sa-auth-aside .sa-card:nth-child(n+4) { display: none; }
}

/* -------------------------------------------------------------- my account */
.sa-lab .sa-list-head-in { align-items: center; }
.sa-lab .sa-list-head-in .sa-ava { font-size: 1.6rem; background: var(--hl); color: var(--on-hl); }
.sa-lab .sa-display { font-size: var(--t-1); display: flex; align-items: center; gap: 10px; }
.sa-lab-stats { display: flex; gap: 8px; margin-left: auto; }
.sa-lab-stats li { display: grid; min-width: 96px; padding: 10px 14px; border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--t-xs); color: var(--ink-3); }
.sa-lab-stats b { font-size: 1.9rem; font-weight: 820; font-stretch: 64%; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.sa-tabs { display: flex; gap: 4px; margin-top: 28px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.sa-tabs::-webkit-scrollbar { display: none; }
.sa-tabs a { position: relative; display: inline-flex; align-items: center; gap: 8px; flex: none; height: 48px; padding: 0 14px; font-weight: 620; color: var(--ink-3); }
.sa-tabs a .sa-i { width: 18px; height: 18px; }
.sa-tabs a:hover { color: var(--ink); }
.sa-tabs a[aria-current] { color: var(--ink); }
.sa-tabs a[aria-current]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 4px; border-radius: 4px 4px 0 0; background: var(--hl); box-shadow: inset 0 -1px 0 var(--ink); }
.sa-lab-follow { display: grid; gap: 12px; margin-bottom: 36px; padding: 20px; border-radius: var(--r-l); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.sa-lab-h { font-weight: 720; }
.sa-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.sa-card-form { display: grid; gap: 14px; padding: 24px; border-radius: var(--r-l); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.sa-form-t { font-size: var(--t-3); }
.sa-card-form > p:not(.sa-field):not(.sa-check) { color: var(--ink-2); font-size: var(--t-ui); }
.sa-card-form .sa-btn { justify-self: start; }
.sa-card-form.is-danger { box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--no) 45%, var(--line)); }
.sa-lab-member { display: grid; gap: 24px; }
.sa-lab-pass { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center; min-height: 340px; padding: clamp(26px, 4vw, 52px); border-radius: 28px; background: #0b1020; }
.sa-lab-pass > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 80% 50%; }
.sa-lab-pass::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #0b1020 0, oklch(0.12 0.03 265 / 0.85) 42%, transparent 78%); }
.sa-lab-pass-in { display: grid; gap: 12px; max-width: 480px; justify-items: start; }
.sa-lab-pass-k { font-size: var(--t-s); font-weight: 720; color: var(--hl); }
.sa-lab-pass-t { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 820; font-stretch: 112%; line-height: 1.05; letter-spacing: -0.03em; }
.sa-lab-pass-d { color: var(--ink-2); line-height: 1.55; margin-bottom: 8px; }
@media (max-width: 640px) { .sa-lab-pass { align-items: end; min-height: 420px; } .sa-lab-pass::after { background: linear-gradient(180deg, transparent 0, oklch(0.12 0.03 265 / 0.8) 40%, #0b1020 72%); } .sa-lab-pass > img { height: 60%; object-position: 75% 0; } }
@media (max-width: 860px) {
	.sa-settings { grid-template-columns: 1fr; }
	.sa-lab-stats { margin-left: 0; width: 100%; }
	.sa-lab-stats li { flex: 1; min-width: 0; }
}

/* -------------------------------------------------------- AdFree Pass (plugin) */
.afp { font-family: var(--f-sans); }
.afp-mcard { --afp-card-art: url("../img/membership/card-curieux.webp"); --afp-card-base: #0b1020; --afp-card-metal: #f3d2c8; }
.afp-mcard--t1 { --afp-card-art: url("../img/membership/card-chercheur.webp"); --afp-card-base: #0b1020; --afp-card-metal: #dcd2fb; }
.afp-mcard--t2 { --afp-card-art: url("../img/membership/card-mecene.webp"); --afp-card-base: #0b1020; --afp-card-metal: #f1dca8; }