/* ============================================================
   ASCENDANCE — SITE PUBLIC · chrome transverse (DA v4 « Calme & élégant »)
   ------------------------------------------------------------
   Chargé sur TOUTES les pages publiques (pas l'espace membre — cf.
   functions.php). On n'y met QUE ce qui dépasse le périmètre d'un bloc :
     · le grain de fond (texture globale)
     · l'état de base du scroll-reveal (piloté par public.js)
     · le repli de gouttière sous 720px
     · les gardes prefers-reduced-motion
     · l'utilitaire .ascd-mono (label mono récurrent)
   Le visuel propre à chaque section vit dans blocks/<bloc>/style.scss.
   ============================================================ */

:root {
	--ascd-ink: var(--wp--preset--color--black);
	--ascd-paper: var(--wp--preset--color--white);
	--ascd-paper-2: var(--wp--preset--color--paper);
	--ascd-signal: var(--wp--preset--color--signal);
	--ascd-violet: var(--wp--preset--color--violet);
	--ascd-line: var(--wp--preset--color--black);
	--ascd-line-soft: rgba(35, 35, 32, 0.14);
	--ascd-muted: rgba(35, 35, 32, 0.55);
	--ascd-display-family: var(--wp--preset--font-family--sans);
	--ascd-mono-family: var(--wp--preset--font-family--mono);
	--ascd-gutter: var(--wp--preset--spacing--gutter);
	--ascd-maxw: 1480px;
}

/* Universal border-box reset — the DA v4 prototype is authored against it, and
 * every block's padding/width math assumes it. WordPress does NOT apply a
 * global box-sizing reset, so without this elements default to content-box and
 * padding ADDS to declared widths: section/card padding overflows, the pillars
 * pin-scroll cards exceed one viewport, and spacing drifts from the prototype
 * everywhere. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

/* ----- Fixed site-nav layout fixes ----------------------------------------
 * The header template part is a 0-height wrapper around the position:fixed
 * site-nav. WordPress still applies the root block-gap as a margin-top on the
 * <main> and <footer> that follow it, which pushed the hero ~24px down (the
 * nav's text then sat on the white body gap → white-on-white invisible menu)
 * and left a 24px paper sliver above the footer. Kill both so header, main
 * and footer sit flush. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Drop the fixed nav below the WP admin bar for logged-in users so it isn't
 * hidden behind it (and its links don't land on the gap). */
body.admin-bar .ascendance-site-nav {
	top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar .ascendance-site-nav {
		top: 46px;
	}
}

/* ----- Flush page sections ------------------------------------------------
 * Like the prototype, the top-level page sections butt directly against each
 * other (full-bleed) — each section owns its vertical rhythm via its own
 * padding. WordPress otherwise injects the root block-gap (24px) as a
 * margin-block between every top-level block of the page, which shows up as
 * white/paper bands between sections. Kill it so sections sit edge to edge. */
.entry-content > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Anchor targets (nav #piliers / #calendrier / #engagement) must not land
 * under the fixed navbar — offset their scroll position by the bar height. */
.entry-content > [id] {
	scroll-margin-top: 100px;
}

::selection {
	background: var(--ascd-signal);
	color: var(--ascd-ink);
}

/* ----- Grain overlay -------------------------------------------------------
 * Subtle global film grain (opacity 0.05, multiply) over the whole public
 * site. pointer-events:none so it never intercepts clicks; sits above content
 * but below nav/modals (which raise their own z-index). */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9000;
	pointer-events: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	opacity: 0.05;
	mix-blend-mode: multiply;
}

/* ----- Scroll-reveal -------------------------------------------------------
 * Progressive enhancement: content is fully visible by default. public.js
 * adds `js-reveal` to <html> ONLY when JS runs AND motion is allowed; only
 * then do reveal elements start hidden and animate in on `is-in-view`. So
 * no-JS and reduced-motion users always see everything. */
.js-reveal .ascd-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

.js-reveal .ascd-reveal.is-in-view {
	opacity: 1;
	transform: none;
}

/* Stagger helper: children reveal in sequence when the parent enters view. */
.js-reveal .ascd-reveal-stagger > * {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-reveal .ascd-reveal-stagger.is-in-view > * {
	opacity: 1;
	transform: none;
}

.js-reveal .ascd-reveal-stagger.is-in-view > *:nth-child(2) { transition-delay: 0.08s; }
.js-reveal .ascd-reveal-stagger.is-in-view > *:nth-child(3) { transition-delay: 0.16s; }
.js-reveal .ascd-reveal-stagger.is-in-view > *:nth-child(4) { transition-delay: 0.24s; }
.js-reveal .ascd-reveal-stagger.is-in-view > *:nth-child(5) { transition-delay: 0.32s; }

/* ----- Shared mono label utility ------------------------------------------ */
.ascd-mono {
	font-family: var(--ascd-mono-family);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.3;
}

.ascd-dim {
	opacity: 0.55;
}

/* ----- Shared visual primitives -------------------------------------------
 * Ported 1:1 from the DA v4 prototype's reusable components so every block
 * composes the SAME buttons / tags / duotone photo frames / badges instead of
 * redefining them. Namespaced `ascd-` to avoid collisions; the prototype's CSS
 * vars are mapped onto the theme.json preset tokens. */

/* Buttons — .ascd-btn + a colour modifier, optional .ascd-btn__arrow span. */
.ascd-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ascd-ink);
	border: 1px solid currentColor;
	background: none;
	text-decoration: none;
	cursor: pointer;
	transition: transform 160ms ease, background 200ms ease, color 200ms ease,
		box-shadow 160ms ease;
}
.ascd-btn:hover { transform: translate(-3px, -3px); }
.ascd-btn__arrow { font-size: 12px; line-height: 1; transition: transform 160ms ease; }
.ascd-btn:hover .ascd-btn__arrow { transform: translateX(3px); }

.ascd-btn--primary { background: var(--ascd-ink); color: var(--ascd-signal); border-color: var(--ascd-ink); }
.ascd-btn--primary:hover { box-shadow: 5px 5px 0 0 var(--ascd-ink); }
.ascd-btn--signal { background: var(--ascd-signal); color: var(--ascd-ink); border-color: var(--ascd-signal); }
.ascd-btn--signal:hover { box-shadow: 5px 5px 0 0 var(--ascd-signal); }
.ascd-btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.ascd-btn--ghost:hover { background: var(--ascd-signal); color: var(--ascd-ink); border-color: var(--ascd-signal); box-shadow: 5px 5px 0 0 var(--ascd-ink); }
.ascd-btn--on-dark { background: transparent; color: var(--ascd-paper); border-color: var(--ascd-paper); }
.ascd-btn--on-dark:hover { background: var(--ascd-paper); color: var(--ascd-ink); border-color: var(--ascd-paper); box-shadow: 5px 5px 0 0 var(--ascd-paper); }

/* Tags — .ascd-tag + optional --signal / --violet. */
.ascd-tag {
	font-family: var(--ascd-mono-family);
	font-size: 9px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 3px 7px;
	color: inherit;
	border: 1px solid currentColor;
}
.ascd-tag--signal { background: var(--ascd-signal); color: var(--ascd-ink); border-color: var(--ascd-signal); }
.ascd-tag--violet { background: var(--ascd-violet); color: var(--ascd-ink); border-color: var(--ascd-violet); }

/* Duotone photo frame — wrap an <img> + optional overlay label spans. */
.ascd-duotone {
	position: relative;
	overflow: hidden;
	background: var(--ascd-ink);
	isolation: isolate;
}
/* Duotone: the image keeps a grayscale FILTER but NO mix-blend-mode — the
 * filter+blend-on-the-same-<img> combo renders BLACK on hardware-accelerated
 * Chrome (a Chromium GPU compositing bug) while looking fine under software
 * rendering. The signal tint is applied by the ::after multiply overlay (a
 * plain element, blend-safe), so the photo is always visible on every GPU. */
.ascd-duotone img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.05) brightness(1.08);
	transition: filter 800ms cubic-bezier(0.2, 0.7, 0.2, 1),
		transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ascd-duotone::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ascd-signal);
	mix-blend-mode: multiply;
	transition: opacity 800ms ease;
	z-index: 2;
}
.ascd-duotone:hover img { filter: grayscale(0) contrast(1.04) brightness(1); transform: scale(1.02); }
.ascd-duotone:hover::after { opacity: 0; }

.ascd-ph-label,
.ascd-ph-corner,
.ascd-ph-caption,
.ascd-ph-footer {
	position: absolute;
	z-index: 3;
	pointer-events: none;
}
.ascd-ph-label {
	top: 14px;
	left: 14px;
	font-family: var(--ascd-mono-family);
	font-size: 9px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--ascd-signal);
	border: 1px solid var(--ascd-signal);
	padding: 3px 7px;
	background: rgba(35, 35, 32, 0.65);
}
.ascd-ph-corner {
	top: 14px;
	right: 14px;
	font-family: var(--ascd-mono-family);
	font-size: 9px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ascd-paper);
	opacity: 0.75;
}
.ascd-ph-caption {
	bottom: 22px;
	left: 18px;
	right: 18px;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.25;
	color: var(--ascd-paper);
}
.ascd-ph-caption em { font-weight: 300; color: var(--ascd-signal); }
.ascd-ph-footer {
	bottom: 0;
	left: 0;
	background: var(--ascd-signal);
	color: var(--ascd-ink);
	padding: 4px 9px;
	font-family: var(--ascd-mono-family);
	font-size: 9px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Access badge — .ascd-access-badge + --members / --open. */
.ascd-access-badge {
	font-family: var(--ascd-mono-family);
	font-size: 8px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
	line-height: 1;
	padding: 3px 7px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	max-height: 22px;
	white-space: nowrap;
}
.ascd-access-badge::before { content: ""; width: 4px; height: 4px; }
.ascd-access-badge--members { background: var(--ascd-ink); color: var(--ascd-paper); }
.ascd-access-badge--members::before { background: var(--ascd-signal); }
.ascd-access-badge--open { background: var(--ascd-violet); color: var(--ascd-ink); }
.ascd-access-badge--open::before { background: var(--ascd-ink); }

/* Mono arrow link. */
.ascd-arrow-link {
	font-family: var(--ascd-mono-family);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 0;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}
.ascd-arrow-link:hover { color: var(--ascd-signal); }

/* Session-aware visibility — toggled by `body.is-logged-in` (set in
 * functions.php). Lets event/nav markup show member-only vs logged-out CTAs. */
.ascd-session-in { display: none; }
body.is-logged-in .ascd-session-in { display: inline-flex; }
body.is-logged-in .ascd-session-cta-out { display: none; }
body:not(.is-logged-in) .ascd-session-cta-out { opacity: 0.4; cursor: not-allowed; font-style: italic; }

/* Accessible visually-hidden helper for decorative labels / skip targets. */
.ascd-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ----- Login (passwordless OTP: email → code) -----------------------------
 * Auth\LoginPage injects login_step1/2 into /connexion's content. Style it as a
 * centred ink card on a paper-2 band, mirroring the login-modal DA (signal
 * hairline border, mono labels, underline inputs with signal focus, signal
 * submit). The auth logic/markup is untouched — this is the visual pass. */
.ascendance-login {
	min-height: clamp(520px, 72vh, 760px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(64px, 10vh, 140px) var(--ascd-gutter);
	background: var(--ascd-paper-2);
}

.ascendance-login__card {
	width: 100%;
	max-width: 460px;
	background: var(--ascd-ink);
	color: var(--ascd-paper);
	border: 1px solid var(--ascd-signal);
	padding: clamp(36px, 5vw, 60px);
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.ascendance-login__title {
	font-family: var(--ascd-display-family);
	font-weight: 900;
	font-size: clamp(26px, 3.4vw, 40px);
	line-height: 1.04;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color: var(--ascd-paper);
	margin: 0;
}

.ascendance-login__intro {
	font-family: var(--ascd-display-family);
	font-size: 15px;
	line-height: 1.55;
	color: rgba(244, 244, 239, 0.72);
	margin: 0;
}

.ascendance-login__error {
	color: var(--ascd-signal);
	border: 1px solid var(--ascd-signal);
	padding: 10px 12px;
	margin: 0;
	line-height: 1.4;
}

.ascendance-login__form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 6px;
}

.ascendance-login__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ascendance-login__label {
	color: rgba(244, 244, 239, 0.7);
}

.ascendance-login__input {
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(244, 244, 239, 0.3);
	color: var(--ascd-paper);
	font-family: var(--ascd-display-family);
	font-size: 18px;
	padding: 10px 2px;
	width: 100%;
	transition: border-color 160ms ease;
}
.ascendance-login__input:focus {
	outline: none;
	border-bottom-color: var(--ascd-signal);
}
.ascendance-login__input--code {
	text-align: center;
	letter-spacing: 0.5em;
	font-family: var(--ascd-mono-family);
	font-size: 30px;
	padding-left: 0.5em;
}

.ascendance-login__submit {
	width: 100%;
	justify-content: center;
	margin-top: 6px;
}

.ascendance-login__note {
	color: rgba(244, 244, 239, 0.5);
	line-height: 1.5;
	margin: 2px 0 0;
}

/* ----- Gutter floor at small widths ---------------------------------------
 * theme.json root padding is clamp(28px,5vw,80px); the DA tightens to 20px on
 * phones. Override the root-padding custom props WP uses for aligned content. */
@media (max-width: 720px) {
	body {
		--wp--style--root--padding-left: 20px;
		--wp--style--root--padding-right: 20px;
	}
}

/* ----- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	/* Belt-and-braces: even if js-reveal slipped through, never hide content. */
	.ascd-reveal,
	.ascd-reveal-stagger > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}


/* ============================================================
   CUSTOM CURSOR — yellow ring + ink dot (DA v4)
   ------------------------------------------------------------
   Driven by public.js. Active on fine-pointer devices only: public.js
   adds `.ascd-cursor-on` (which hides the native cursor) and toggles
   `.ascd-cursor-visible` as the pointer enters/leaves the window. On
   touch, no-JS, or prefers-reduced-motion the native cursor is kept.
   ============================================================ */
.ascd-cursor,
.ascd-cursor-dot {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 9998;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	will-change: transform;
	opacity: 0;
}

.ascd-cursor {
	width: 36px;
	height: 36px;
	background: var(--ascd-signal);
	mix-blend-mode: difference;
	transition: width 200ms ease, height 200ms ease, opacity 240ms ease;
}

.ascd-cursor-dot {
	width: 5px;
	height: 5px;
	background: var(--ascd-ink);
	transition: opacity 240ms ease;
}

.ascd-cursor-on {
	cursor: none;
}

.ascd-cursor-on a,
.ascd-cursor-on button,
.ascd-cursor-on [role="button"],
.ascd-cursor-on input,
.ascd-cursor-on textarea,
.ascd-cursor-on select,
.ascd-cursor-on label,
.ascd-cursor-on summary {
	cursor: none;
}

.ascd-cursor-on.ascd-cursor-visible .ascd-cursor,
.ascd-cursor-on.ascd-cursor-visible .ascd-cursor-dot {
	opacity: 1;
}

.ascd-cursor-on .ascd-cursor.is-hover {
	width: 80px;
	height: 80px;
}