/*
 * Section "10e anniversaire" — page d'accueil (post 988).
 * Mission : _team/board.md [AGENT-GLASSMORPHISM-10ANS].
 *
 * Remplace l'ancien bandeau braise uni (fond plat + texte, aucune image) par une
 * composition "liquid glass" : l'affiche officielle posée en grand (jamais recadrée,
 * object-fit: contain, règle déjà actée sur ce projet), un numéral "10" géant en
 * filigrane pour la profondeur, et une carte en verre dépoli (backdrop-filter: blur)
 * qui porte le texte/bouton, flottante par-dessus/à côté de l'affiche.
 *
 * Esprit technique repris de l'existant (jamais inventé) :
 *   - header.css  .nwc-masthead__main       → backdrop-filter: blur(16px) saturate(160%)
 *   - lien.css    .nwc-lc__glass            → bordure 1px translucide + ombre douce
 * Palette : uniquement --nwc-gold / --nwc-ink / --nwc-cream / --nwc-ember (tokens.css).
 * Chargé uniquement sur l'accueil (is_front_page()), dépend de nwc-base — voir functions.php.
 */

/* Fond de section (demande explicite de Jordan, 18/10/2026 : "fond clair et
   épuré... globalement sur toutes les pages... pas de couleur forte, les
   dégradés on les garde pour les autres éléments, card, bouton, titre et
   autres") : même logique que .nwc-events-darkzone (events-dons.css) et
   .nwc-messages-darkzone (messages-hero.css) — fond plat --nwc-cream, pas de
   dégradé braise/or sur le fond AMBIANT de la section. Le dégradé flamboyant
   est conservé mais déplacé sur la carte de verre (.nwc-anniv__glass
   ci-dessous), qui devient la seule surface à garder cette couleur forte. */
.nwc-anniv {
	position: relative;
	overflow: hidden;
	background: var(--nwc-cream);
	color: var(--nwc-ink);
	padding-block: var(--nwc-space-9);
	isolation: isolate;
}

/* --- Atmosphère : neutralisée (demande de Jordan ci-dessus) — c'était le
   dégradé braise/or plein cadre derrière toute la section (fond ambiant),
   pas un élément décoratif scopé à une carte. On ne supprime pas l'élément
   (balisage généré par le gabarit, hors contrôle de ce fichier) : display:none
   suffit, même méthode que .nwc-events-darkzone__atmosphere /
   .nwc-messages-darkzone__atmosphere déjà neutralisés ailleurs. */
.nwc-anniv__atmosphere {
	display: none;
}

/* Numéral "10" géant en filigrane : repère de profondeur qui traverse la composition,
   bien plus présent que l'ancien petit "10" doré isolé — se lit derrière l'affiche
   ET derrière le verre (le flou du verre le dépolit visiblement à son passage, preuve
   que le backdrop-filter agit réellement sur du contenu, pas sur un fond uni). */
.nwc-anniv__numeral {
	position: absolute;
	z-index: 0;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	font-family: var(--nwc-font-display);
	font-weight: 800;
	font-size: clamp(16rem, 10rem + 26vw, 38rem);
	line-height: 1;
	/* Crème plutôt qu'or translucide : l'or se fondait dans le fond braise/or
	   de la lueur centrale et devenait invisible — le crème contraste davantage
	   contre la braise sombre tout en restant discret. */
	color: oklch(97% 0.014 83 / 0.1);
	letter-spacing: -0.05em;
	pointer-events: none;
	white-space: nowrap;
}

.nwc-anniv__container {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 0.62fr) minmax(0, 0.9fr);
	align-items: center;
}

/* --- Affiche officielle : jamais recadrée/déformée (règle actée), object-fit: contain. --- */
.nwc-anniv__poster {
	/* Pas de z-index ici (donc pas de nouveau contexte d'empilement) : le badge
	   .nwc-anniv__badge, bien que positionné par rapport à ce conteneur, doit
	   pouvoir passer DEVANT la carte de verre voisine — voir .nwc-anniv__badge. */
	position: relative;
	justify-self: center;
	width: 100%;
	max-width: 21rem;
}

.nwc-anniv__poster-frame {
	position: relative;
	border-radius: var(--nwc-radius-lg);
	overflow: hidden;
	aspect-ratio: 1024 / 1536;
	background: oklch(23% 0.05 265 / 0.25);
	border: 1px solid oklch(97% 0.014 83 / 0.16);
	box-shadow: var(--nwc-shadow-lg);
	transform: rotate(-3deg);
	transition: transform var(--nwc-duration-slow) var(--nwc-ease);
}

.nwc-anniv__poster-frame img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Lueur or douce derrière l'affiche, seul moyen d'obtenir la profondeur "liquid glass"
   sans toucher à l'image elle-même (jamais de filtre/recadrage sur l'affiche). */
.nwc-anniv__poster::before {
	content: "";
	position: absolute;
	inset: -16%;
	z-index: -1;
	background: radial-gradient(closest-side, oklch(74% 0.135 75 / 0.4), transparent 75%);
	filter: blur(8px);
}

/* Badge "verre" flottant : posé en haut du cadre de l'affiche (coin supérieur
   gauche), jamais à cheval sur la jonction entre l'affiche et la carte de verre.
   Avant (demande de Jordan, UX : "badge à cheval entre les deux blocs, perdu") :
   bottom:-0.9rem / right:-1.1rem le plaçait exactement sur la couture entre les
   deux colonnes, chevauchant les deux blocs sans appartenir clairement à aucun
   — repositionné pour appartenir sans ambiguïté au bloc affiche, comme une
   étiquette collée sur le cadre, geste "liquid glass" repris de
   .nwc-masthead__main / .nwc-lc__glass. */
.nwc-anniv__badge {
	position: absolute;
	/* Au-dessus de la carte de verre (z-index: 2) au cas où les deux blocs se
	   recouvrent à certaines largeurs intermédiaires. */
	z-index: 3;
	top: -0.9rem;
	left: 1.25rem;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.55rem 1rem;
	border-radius: 999px;
	border: 1px solid oklch(97% 0.014 83 / 0.38);
	background: oklch(97% 0.014 83 / 0.16);
	backdrop-filter: blur(14px) saturate(180%);
	-webkit-backdrop-filter: blur(14px) saturate(180%);
	box-shadow: var(--nwc-shadow-md);
	font-family: var(--nwc-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--nwc-cream);
	white-space: nowrap;
}

.nwc-anniv__badge svg {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
}

@media (hover: hover) {
	.nwc-anniv:hover .nwc-anniv__poster-frame {
		transform: rotate(-1.5deg) scale(1.015);
	}
}

/* --- Carte en verre dépoli : porte eyebrow, titre manuscrit, date, bouton.
   Chevauche volontairement l'affiche (marge négative) pour que le flou dépolisse
   vraiment un morceau d'affiche/lueur sous lui — preuve visuelle du glassmorphism,
   pas seulement un bloc translucide posé à côté. */
/* Dégradé flamboyant conservé ICI (demande de Jordan : les dégradés restent
   sur les cards/boutons/titres, pas sur le fond de section) : la carte porte
   maintenant son propre fond braise/or, plutôt que de compter sur le calque
   .nwc-anniv__atmosphere (neutralisé ci-dessus) pour obtenir sa couleur via
   le flou du verre. Même couple de teintes que les autres cartes "10 ans" du
   site (.nwc-event-feature__visual, .nwc-event-card__frame, events-dons.css). */
.nwc-anniv__glass {
	position: relative;
	z-index: 2;
	margin-inline-start: calc(-1 * var(--nwc-space-8));
	border-radius: var(--nwc-radius-lg);
	border: 1px solid oklch(97% 0.014 83 / 0.28);
	/* background-color en repli solide (pas seulement background-image) :
	   garantit un fond sombre même si les dégradés ne se chargent pas
	   (print, forced-colors, etc.) — le texte clair de la carte (cream/mist)
	   en dépend pour rester lisible. */
	background-color: var(--nwc-ember-deep);
	background-image:
		radial-gradient(85% 120% at 15% 0%, oklch(74% 0.135 75 / 0.45), transparent 60%),
		linear-gradient(155deg, var(--nwc-ember) 0%, var(--nwc-ink) 85%);
	backdrop-filter: blur(22px) saturate(170%);
	-webkit-backdrop-filter: blur(22px) saturate(170%);
	box-shadow: var(--nwc-shadow-lg), 0 1px 0 oklch(97% 0.014 83 / 0.22) inset;
	/* Padding vertical resserré (space-7 -> space-6, demande de Jordan : équilibrer
	   la hauteur avec l'affiche à gauche) : l'ancien padding vertical de 3rem en
	   haut ET en bas, combiné à un rythme interne large (voir eyebrow/date
	   ci-dessous), rendait la carte nettement plus haute que le cadre de
	   l'affiche voisin (déséquilibre visuel signalé). Horizontal inchangé. */
	padding: var(--nwc-space-6) var(--nwc-space-7) var(--nwc-space-6) var(--nwc-space-9);
	overflow: hidden;
}

/* Reflet du haut, geste "liquid glass" (lumière qui accroche le bord supérieur du
   verre) — jamais utilisé comme seule source de contraste, purement décoratif. */
.nwc-anniv__glass::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(165deg, oklch(97% 0.014 83 / 0.22) 0%, transparent 38%);
	pointer-events: none;
}

.nwc-anniv__eyebrow {
	/* space-4 -> space-3 : resserre la respiration avant la citation (demande de
	   Jordan, dosage de l'espace eyebrow -> titre) sans coller les deux lignes —
	   le gros blanc visuel restant au-dessus du titre vient de la police
	   manuscrite (ascendantes/line-height généreux, voir .nwc-anniv__title),
	   pas d'une marge excessive ; on ne peut pas tronquer ce rythme sans risquer
	   de rogner la lettre. */
	margin: 0 0 var(--nwc-space-3);
	color: var(--nwc-gold);
}

.nwc-anniv__title {
	/* !important : bug préexistant repéré pendant l'audit de contraste
	   (18/10/2026) — le moteur de styles globaux de Kadence force
	   `h2{color:var(--global-palette3) !important}` (= --nwc-ink), qui
	   gagnait sur cette règle malgré sa spécificité de classe et rendait le
	   titre en encre sombre sur la carte sombre (contraste ~1.4:1, illisible),
	   jamais corrigé jusqu'ici. */
	color: var(--nwc-cream) !important;
	margin: 0 0 var(--nwc-space-4);
	/* Police manuscrite Caveat conservée pour ce h2 — décision récente de Jordan,
	   déjà la règle du site (tokens.css --nwc-font-accent, "h2 uniquement"). */
	font-size: clamp(2.5rem, 2rem + 2.6vw, 4rem);
}

.nwc-anniv__date {
	color: var(--nwc-mist);
	/* space-6 -> space-5 : rythme progressif et maîtrisé eyebrow(space-3) ->
	   titre(space-4) -> date(space-5) -> CTA, au lieu d'un saut large juste
	   avant le bouton (demande de Jordan : pas de vide disproportionné entre le
	   sous-texte et "Je m'inscris"). */
	margin: 0 0 var(--nwc-space-5);
}

.nwc-anniv__cta {
	display: inline-flex;
}

/* ===================== Mobile (390px et au-delà) ===================== */
@media (max-width: 61.9375rem) {
	.nwc-anniv {
		padding-block: var(--nwc-space-8);
	}

	.nwc-anniv__numeral {
		font-size: clamp(9rem, 6rem + 24vw, 16rem);
		top: 2%;
		transform: translate(-50%, 0);
	}

	.nwc-anniv__container {
		grid-template-columns: 1fr;
		gap: 0;
	}

	/* Empilement pensé pour le mobile, pas une réduction du desktop : l'affiche
	   en haut, puis la carte de verre qui chevauche son bord inférieur pour garder
	   l'effet de calques flottants même en une seule colonne. */
	.nwc-anniv__poster {
		max-width: 13.5rem;
		margin: 0 auto;
	}

	.nwc-anniv__poster-frame {
		transform: rotate(-3deg);
	}

	.nwc-anniv__glass {
		margin-inline-start: 0;
		/* Chevauchement modéré (pas -space-8 comme un premier essai qui avalait
		   65px de l'affiche et finissait par passer sous le badge) : juste assez
		   pour garder l'effet de calques, sans manger le coin où vit le badge. */
		margin-top: calc(-1 * var(--nwc-space-5));
		padding: var(--nwc-space-6) var(--nwc-space-5);
		text-align: center;
	}

	/* Le repositionnement "haut du cadre" fait en desktop (voir règle de base
	   ci-dessus) ne convient PAS tel quel au mobile : le header sticky
	   (~9.2rem, 2 barres) recouvre le haut de la section dès qu'on y défile
	   (vérifié Playwright, le badge disparaissait derrière le header) — vrai
	   problème nouveau, pas présent avant ce correctif. Le badge reste donc en
	   BAS du cadre comme avant sur ce breakpoint (pas de risque de recouvrement
	   par le header, et pas d'ambiguïté "à cheval" : l'empilement vertical
	   mobile n'a pas la lecture gauche/droite du desktop), seulement
	   réancré sur le coin bas plutôt que le coin haut. */
	.nwc-anniv__badge {
		top: auto;
		left: auto;
		right: 0.6rem;
		bottom: 1.9rem;
		transform: none;
		font-size: 0.6875rem;
		padding: 0.4rem 0.7rem;
	}

	.nwc-anniv__cta {
		display: flex;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nwc-anniv__poster-frame,
	.nwc-anniv:hover .nwc-anniv__poster-frame {
		transition: none;
		transform: rotate(-2.5deg);
	}
}