/*
 * Hero immersif — page Messages (/messages/), au-dessus des shortcodes watchgrid.
 * Référence visuelle fournie par Jordan ("Canaan+", `_team/research/references_visuelles/
 * ref_videospage_canaanplus_full.png`) : fond chaud texturé qui occupe TOUTE la largeur
 * de l'écran (pas un coin), très peu de texte au-dessus, la vidéo arrive vite et centrée.
 *
 * Révision 2 suite au retour direct de Jordan + au contrôle indépendant
 * (`_team/controle/verification_videospage_vs_reference.md`, verdict "correspond
 * partiellement") : (1) le dégradé ne couvrait que le coin haut-gauche → on garantit
 * maintenant une répartition chaude sur toute la largeur en superposant plusieurs
 * calques de dégradé CSS par-dessus l'image Artlist (jamais dépendant de la seule
 * composition de l'image générée) ; (2) le bloc de texte prenait trop de place avant
 * d'arriver à la vidéo → titre et intro réduits, bouton supprimé, la carte vidéo
 * apparaît dès le premier écran ; (3) la texture doit continuer derrière la carte
 * vidéo (plein cadre), pas s'arrêter juste avant.
 */

/* Révision 3 — demande explicite de Jordan : fond clair et épuré, uni
   (pas de dégradé), identique à la couleur utilisée sur /actualite/
   (--nwc-cream, cf. base.css : fond clair uni déjà utilisé ailleurs sur
   le site). Remplace le fond sombre "feu" (dégradés + photo) ci-dessous. */
.nwc-messages-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	padding: calc(var(--nwc-header-height) + var(--nwc-space-3)) var(--nwc-space-6) var(--nwc-space-8);
	overflow: hidden;
	background: var(--nwc-cream);
	color: var(--nwc-ink);
}

/* Calque "feu" (photo Artlist + dégradés CSS, ancien fond flamboyant)
   neutralisé : fond clair et uni demandé par Jordan, pas de dégradé ni de
   photo. On ne supprime pas l'élément ni son ::before (markup généré par le
   bloc HTML de la page, hors contrôle de ce fichier) : display:none sur le
   parent suffit à masquer le calque et sa photo ensemble. */
.nwc-messages-hero__atmosphere {
	display: none;
}

/* Fondu de bas de section neutralisé : plus de texture sombre à raccorder,
   le fond est désormais une couleur plate unique sur toute la zone. */
.nwc-messages-hero::after {
	display: none;
}

.nwc-messages-hero__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 36rem;
	margin-bottom: var(--nwc-space-6);
}

/* Eyebrow "Découvrir" supprimé (demande de Jordan) : la règle est conservée
   désactivée au cas où l'élément réapparaîtrait dans le markup, mais le
   <p> correspondant a été retiré du post_content de la page Messages. */
.nwc-messages-hero__eyebrow {
	display: none;
}

/* Titre très réduit par rapport à la v1 : l'objectif demandé par Jordan est
   que la vidéo arrive vite et au centre, pas qu'un grand titre occupe l'écran. */
h1.nwc-messages-hero__title {
	font-family: var(--nwc-font-display);
	font-weight: 700;
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
	line-height: var(--nwc-leading-tight);
	letter-spacing: -0.01em;
	color: var(--nwc-ink);
	margin: 0 0 var(--nwc-space-2);
}

.nwc-messages-hero__lead {
	font-size: var(--nwc-text-small);
	line-height: var(--nwc-leading-body);
	color: var(--nwc-ink-soft);
	margin: 0;
	max-width: 40ch;
}

/* La carte "dernier message" watchgrid devient le vrai sujet du hero : grande,
   centrée, avec de vraies marges qui la font flotter (constat du contrôle
   indépendant : marges trop resserrées en v1). */
.nwc-messages-hero + .wg-latest-wrap {
	position: relative;
	z-index: 1;
	max-width: 52rem;
	margin-inline: auto;
	padding-inline: var(--nwc-space-6);
}

/* Titre/date sous la vidéo supprimés (demande de Jordan) : la vidéo gagne
   tout cet espace en largeur plutôt que de laisser un texte en dessous.
   Scopé à la page Messages (.nwc-messages-darkzone) — même composant réutilisé
   tel quel sur l'accueil (section "À venir / Dernier message"), où le titre
   doit rester visible (c'est tout le contenu de la carte). */
.nwc-messages-darkzone .nwc-latest-video__meta {
	display: none;
}

@media (max-width: 48rem) {
	.nwc-messages-hero {
		padding-top: calc(var(--nwc-header-height) + var(--nwc-space-2));
		padding-bottom: var(--nwc-space-6);
	}

	.nwc-messages-hero + .wg-latest-wrap {
		padding-inline: var(--nwc-space-4);
	}
}

/*
 * Dernière prédication sur-mesure (js/latest-video.js) — remplace
 * [watchgrid_latest], demande explicite de Jordan. Même traitement "cinéma"
 * que la grille watchgrid (duotone + bouton verre dépoli), construit ici en
 * CSS pur, sans dépendre du balisage du plugin.
 */
.nwc-latest-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 26px;
	overflow: hidden;
	box-shadow: var(--nwc-shadow-lg);
	background: var(--nwc-ink);
}

.nwc-latest-video__play {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* object-fit: contain (pas cover) : certaines vidéos YouTube n'ont pas de
   vignette maxresdefault (1280x720, 16:9) et l'API retombe sur la vignette
   "high" par défaut (480x360, 4:3) — avec cover dans un cadre 16:9, ça zoome
   et recadre le visage de l'orateur. contain + fond encre garantit que la
   vignette n'est jamais recadrée, quel que soit son ratio source. */
.nwc-latest-video__thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: var(--nwc-ink);
}

/* Voile retiré (26/10/2026, demande Jordan : "pourquoi la miniature de la
   vidéo est terne ?") — ce ::before assombrissait/désaturait toute la
   vignette YouTube via mix-blend-mode:multiply à 0.5, visible aux deux
   endroits qui partagent cette classe (cette feuille est chargée globalement,
   voir commentaire sur l'enqueue dans functions.php : "même sur les pages
   sans shortcode watchgrid" — donc aussi sur la colonne "Dernier message" de
   l'accueil, pas seulement /messages/). Le bouton play garde son contraste
   via une ombre portée sur le cercle (ci-dessous) plutôt qu'en assombrissant
   l'image entière. */

.nwc-latest-video__icon {
	position: relative;
	z-index: 2;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: oklch(100% 0 0 / 0.14);
	border: 1.5px solid oklch(100% 0 0 / 0.45);
	box-shadow: 0 4px 18px oklch(23% 0.05 265 / 0.45);
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	transition: background-color var(--nwc-duration-fast) var(--nwc-ease),
		border-color var(--nwc-duration-fast) var(--nwc-ease);
}

.nwc-latest-video__icon::after {
	content: "";
	border-style: solid;
	border-width: 13px 0 13px 21px;
	border-color: transparent transparent transparent var(--nwc-paper);
	margin-left: 5px;
}

.nwc-latest-video__play:hover .nwc-latest-video__icon,
.nwc-latest-video__play:focus-visible .nwc-latest-video__icon {
	background: oklch(74% 0.135 75 / 0.32);
	border-color: oklch(74% 0.135 75 / 0.65);
}

.nwc-latest-video__overlay {
	position: absolute;
	left: var(--nwc-space-5);
	top: var(--nwc-space-5);
	z-index: 2;
	pointer-events: none;
}

.nwc-latest-video__logo {
	width: 104px;
	height: auto;
}

.nwc-latest-video__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.nwc-latest-video__meta {
	margin-top: var(--nwc-space-4);
}

/* Couleurs claires : la page est maintenant une zone sombre continue
   (.nwc-messages-darkzone) du haut en bas, ce bloc meta est donc à nouveau
   sur fond sombre. (Historique : passé en ink temporairement quand la page
   avait un fond blanc sous le hero — plus le cas depuis la zone continue.) */
.nwc-latest-video__title {
	font-family: var(--nwc-font-display);
	font-weight: 700;
	font-size: var(--nwc-text-h3);
	color: var(--nwc-cream);
	margin: 0 0 var(--nwc-space-1);
}

.nwc-latest-video__date {
	font-family: var(--nwc-font-mono);
	font-size: var(--nwc-text-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: oklch(97% 0.014 83 / 0.7);
	margin: 0;
}

.nwc-latest-video__empty {
	color: var(--nwc-mist);
	text-align: center;
	padding: var(--nwc-space-6);
}

/*
 * Zone sombre continue — demande répétée de Jordan : le fond généré doit
 * couvrir TOUTE la page (hero + vidéo + grille), pas juste le haut. Même
 * principe que .nwc-events-darkzone (events-dons.css).
 */
/* "Zone sombre continue" devenue zone claire continue (demande de Jordan) :
   même principe de couverture de page (hero + vidéo + grille), mais fond
   plat --nwc-cream, identique à la couleur utilisée sur /actualite/. */
.nwc-messages-darkzone {
	position: relative;
	background-color: var(--nwc-cream);
	overflow: hidden;
	padding-bottom: var(--nwc-space-9);
}

.nwc-messages-darkzone__atmosphere {
	display: none;
}

/* Le fondu de bas de section (défini plus haut pour .nwc-messages-hero seul)
   tomberait maintenant au milieu de la page sombre continue — neutralisé ici,
   un seul fondu existe désormais : en bas de .nwc-messages-darkzone (via son
   propre dégradé radial qui s'atténue naturellement, pas besoin d'un ::after
   séparé). */
.nwc-messages-darkzone .nwc-messages-hero::after {
	display: none;
}

/* Barre de filtres watchgrid (.wg-bar) et texte du compteur : restent globalement
   déjà adaptés au thème (surface papier claire sur fond sombre, cf. watchgrid-skin.css)
   — seul le texte du compteur, hérité de la couleur de base, a besoin d'un ajustement. */
.nwc-messages-darkzone .wg-count {
	color: var(--nwc-ink-soft);
}

/* Marges latérales : la page est en style de contenu "unboxed" (pas de
   conteneur du thème), donc .wg-grid-wrap (shortcode [watchgrid_grid]) et
   son dégradé de cartes touchaient le bord gauche/droit de l'écran — repéré
   par Jordan. On lui redonne les mêmes marges que le reste du contenu de la
   page (.nwc-container) sans toucher au plugin. */
/* La grille reste à 3 colonnes fixes quelle que soit la largeur (règle du
   plugin, --wg-columns non redéfini) : trop resserrer le conteneur rétrécit
   directement chaque carte. Constat de Jordan en plusieurs temps : d'abord
   "ça touche le bord" (pas assez de marge), puis "trop resserré, les
   miniatures doivent rester visibles" (trop de marge, cartes à 220px) —
   référence finale donnée par Jordan (vienouvelleparis.com/messages/,
   même plugin watchgrid) : conteneur ~1128px (70.5rem) centré, cartes
   ~363px à 1920px d'écran, grandes marges latérales obtenues par le
   centrage automatique une fois le conteneur plafonné, pas par un padding
   qui grandirait avec l'écran. */
.nwc-messages-darkzone .wg-grid-wrap {
	max-width: 70.5rem;
	margin-inline: auto;
	padding-inline: var(--nwc-space-6);
}

@media (max-width: 48rem) {
	.nwc-messages-darkzone .wg-grid-wrap {
		padding-inline: var(--nwc-space-4);
	}
}

/* Bug trouvé en vérifiant la zone sombre continue : .wg-bar (barre de filtres
   watchgrid) n'a pas de position/z-index propre dans watchgrid-skin.css — elle
   reste donc "statique" et se peint AVANT les éléments positionnés dans l'ordre
   de l'empilement CSS, y compris le calque de texture .nwc-messages-darkzone__atmosphere
   (position:absolute) qui la recouvre entièrement malgré son propre fond clair.
   Les cartes vidéo n'ont pas ce problème car .wg-card a déjà position:relative
   (watchgrid-skin.css) — seule la barre de filtres en manquait. */
.nwc-messages-darkzone .wg-bar,
.nwc-messages-darkzone .wg-count,
.nwc-messages-darkzone .wg-empty,
.nwc-messages-darkzone .wg-load-more {
	position: relative;
	z-index: 1;
}