/*
 * Habillage visuel du plugin watchgrid (shortcodes [watchgrid_latest] / [watchgrid_grid])
 * pour la page Messages — justification complète : _team/docs/composants.md (à relire par
 * l'ingénieur fondations) et le rapport posté sur board.md par cette mission.
 *
 * Méthode : AUCUNE modification du plugin (wp-content/plugins/watchgrid/). Le fichier
 * assets/css/watchgrid.css du plugin expose volontairement un jeu de variables CSS sur
 * .wg-grid-wrap / .wg-latest-wrap ("Ces variables sont volontairement redéfinissables par
 * le site hôte", lu dans son propre commentaire) : on les redéfinit avec les jetons --nwc-*
 * du thème (tokens.css). Pour les propriétés qui n'ont pas de variable dédiée (rayons en
 * "pill" 999px, effet de verre dépoli/backdrop-filter, police), on recopie les SÉLECTEURS
 * EXACTS du plugin (mêmes classes, même spécificité) : ce fichier étant chargé après
 * watchgrid.css (dépendance explicite dans functions.php), l'ordre de la cascade suffit à
 * gagner sans un seul `!important` — zéro exception ajoutée à celle déjà documentée
 * (boutons Kadence Blocks Pro, components.css).
 *
 * Non touché volontairement : tout le JS (grid.js/latest.js), la structure du balisage
 * (wg-facade/wg-facade-btn/iframe), les shortcodes, l'API REST, le mode façade RGPD —
 * seules des propriétés visuelles décoratives sont redéfinies ici.
 */

/* ---------------------------------------------------------------------------
 * 1. Palette — on quitte le bleu par défaut du plugin pour l'identité réelle
 * du site (or chaud / encre / braise, cf. tokens.css). Le verre dépoli
 * ("Liquid Glass") devient une surface papier mate : cohérent avec .nwc-card
 * (components.css), qui n'utilise ni flou ni translucidité ailleurs sur le site.
 * ------------------------------------------------------------------------- */
.wg-grid-wrap,
.wg-latest-wrap {
	--wg-accent: var(--nwc-gold);
	--wg-accent-strong: var(--nwc-gold-deep);

	--wg-ink: var(--nwc-ink);
	--wg-muted: var(--nwc-slate);

	--wg-glass-bg: var(--nwc-paper);
	--wg-glass-border: var(--nwc-mist);
	--wg-glass-sheen: transparent;
	--wg-glass-shadow: oklch(23% 0.05 265 / 0.14);
	--wg-scrim: linear-gradient(to top, oklch(23% 0.05 265 / 0.82), oklch(23% 0.05 265 / 0.1) 60%, transparent);
	--wg-text-on-glass: var(--nwc-paper);

	font-family: var(--nwc-font-body);
}

/* ---------------------------------------------------------------------------
 * 2. Barre de filtres — surface papier mate (plus de flou), rayons modérés
 * (jamais de "pill" générique, règle déjà actée pour tout le site).
 * ------------------------------------------------------------------------- */
.wg-bar {
	border-radius: var(--nwc-radius-lg);
	box-shadow: var(--nwc-shadow-sm);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Le plugin laisse ces champs en fond transparent par défaut (visible
   seulement au survol) : sur notre barre de filtres blanche, le champ de
   recherche devient invisible — on ne voit pas où cliquer. Fond gris clair
   permanent pour que la zone cliquable soit toujours visible. */
.wg-bar select,
.wg-bar input {
	border-radius: var(--nwc-radius-sm);
	font-family: var(--nwc-font-body);
	background-color: oklch(93% 0.006 83);
}

.wg-bar select:hover,
.wg-bar input:hover {
	background-color: oklch(89% 0.008 83);
}

.wg-bar button {
	border-radius: var(--nwc-radius-sm);
	font-family: var(--nwc-font-body);
	font-weight: 600;
}

.wg-count {
	font-family: var(--nwc-font-mono);
	font-size: var(--nwc-text-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ---------------------------------------------------------------------------
 * 3. Cartes — titre et méta repassés SOUS la vignette (retour arrière
 * explicite de Jordan le 9/10/2026 : "enlève les titres en blanc que tu as
 * mis sur les vidéos"). L'essai précédent ("cinéma", titre en surimpression
 * dans un dégradé sombre en bas de l'image) encombrait la vignette — on
 * revient à la disposition par défaut du plugin (.wg-card-content en flux
 * normal, sous .wg-facade), seules les couleurs restent celles du thème.
 * ------------------------------------------------------------------------- */
.wg-card {
	position: relative;
	border-radius: var(--nwc-radius-lg);
	box-shadow: var(--nwc-shadow-md);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transition: transform var(--nwc-duration-base) var(--nwc-ease),
		box-shadow var(--nwc-duration-base) var(--nwc-ease);
}

/* Duotone retiré (allait avec le titre en surimpression ci-dessus, retiré
   lui aussi) : référence donnée par Jordan (vienouvelleparis.com/messages/,
   même plugin) montre des vignettes en pleine luminosité, couleurs
   naturelles, aucun assombrissement. */
.wg-card:hover,
.wg-card:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--nwc-shadow-lg);
}

.wg-card-content {
	padding: var(--nwc-space-4) var(--nwc-space-5) var(--nwc-space-5);
}

.wg-card-title {
	font-family: var(--nwc-font-display);
	font-weight: 700;
	font-size: var(--nwc-text-small);
	line-height: var(--nwc-leading-snug);
	color: var(--nwc-ink);
}

.wg-card-meta {
	font-family: var(--nwc-font-mono);
	font-size: var(--nwc-text-eyebrow);
	letter-spacing: 0.02em;
	color: var(--nwc-slate);
}

/* ---------------------------------------------------------------------------
 * 4. Façade RGPD (vignette cliquable) — bouton de lecture plus grand et plus
 * présent (demande explicite "gros bouton play centré et translucide"),
 * flou d'arrière-plan conservé/accentué, toujours lisible sur une miniature
 * claire ou sombre (verre neutre, pas teinté tant qu'on ne survole pas).
 * Structure, position, clic : strictement inchangés (watchgrid.css gère déjà
 * `position:absolute; inset:0` sur le bouton et les coordonnées du triangle
 * via une pseudo-classe ::after, on ne fait que redimensionner proportionnellement).
 * ------------------------------------------------------------------------- */
.wg-play-icon {
	width: 84px;
	height: 84px;
	background: oklch(100% 0 0 / 0.14);
	border-color: oklch(100% 0 0 / 0.45);
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
}

.wg-play-icon::after {
	border-width: 13px 0 13px 21px;
}

.wg-facade-btn:hover .wg-play-icon,
.wg-facade-btn:focus-visible .wg-play-icon {
	background: oklch(74% 0.135 75 / 0.32);
	border-color: oklch(74% 0.135 75 / 0.65);
}

/* ---------------------------------------------------------------------------
 * 5. Voir plus — même traitement que .nwc-button--primary (bouton plein,
 * rayon modéré, jamais de pilule).
 * ------------------------------------------------------------------------- */
.wg-load-more {
	border-radius: var(--nwc-radius-md);
	font-family: var(--nwc-font-body);
	box-shadow: var(--nwc-shadow-sm);
}

.wg-load-more:hover {
	box-shadow: var(--nwc-shadow-md);
}

/* ---------------------------------------------------------------------------
 * 6. Dernière vidéo ([watchgrid_latest]) — carte "héro" la plus visible de la
 * page, même traitement cinéma que la grille, en plus marqué (demande
 * explicite de Jordan : "logo+titre en surimpression en bas à gauche").
 *
 * Contrainte de balisage : .wg-latest-media et .wg-latest-text sont deux
 * SIBLINGS (pas l'un dans l'autre) à l'intérieur de .wg-latest-body —
 * balisage du plugin, non modifiable ici. Pour obtenir l'incrustation sans
 * toucher au JS/PHP : .wg-latest-text passe en position absolute ancrée au
 * bas de .wg-latest-body (devenu le repère de positionnement) ; comme
 * .wg-latest-media reste alors le seul enfant "en flux" de .wg-latest-body,
 * la hauteur de .wg-latest-body se résume à la sienne (aspect-ratio 16:9
 * déjà fixé par le plugin) — le texte se retrouve donc exactement calé sur
 * le bas de la vignette/vidéo, jamais au-dessus ou en dessous.
 *
 * Volontairement limité à la mise en page par défaut (pas `.wg-layout-side`,
 * où média et texte sont déjà côte à côte et n'ont pas besoin de ce
 * traitement — l'incrustation n'y serait pas pertinente).
 * ------------------------------------------------------------------------- */
.wg-latest-wrap:not(.wg-layout-side) .wg-latest-body {
	position: relative;
}

.wg-latest-wrap:not(.wg-layout-side) .wg-latest-text {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	padding: var(--nwc-space-6) var(--nwc-space-6) var(--nwc-space-5);
	background: linear-gradient(
		to top,
		oklch(23% 0.05 265 / 0.92) 0%,
		oklch(23% 0.05 265 / 0.5) 55%,
		oklch(23% 0.05 265 / 0) 100%
	);
	border-radius: 0 0 26px 26px; /* même rayon que .wg-latest-media, pour un bord net */
	pointer-events: none; /* le clic traverse jusqu'à .wg-facade-btn, en dessous */
}

/* Repère de marque : logo clair (variante "light", prévue par le thème pour
   un fond sombre, cf. inc/header.php) posé au-dessus du titre, jamais à côté
   (pas de doublon nom+logo, règle déjà actée pour le header — .impeccable.md). */
.wg-latest-wrap:not(.wg-layout-side) .wg-latest-text::before {
	content: "";
	display: block;
	width: 104px;
	height: 26px;
	margin: 0 0 var(--nwc-space-2);
	background: url("../../../uploads/2023/08/NWC-web-logo-300x76.png") left center / contain no-repeat;
}

.wg-latest-text h3 {
	font-family: var(--nwc-font-display);
	font-weight: 600;
	color: var(--nwc-paper);
}

.wg-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.78);
}

.wg-latest-media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 26px;
	box-shadow: var(--nwc-shadow-lg);
}

.wg-latest-media .wg-facade-btn,
.wg-latest-media img,
.wg-latest-media iframe {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Même duotone sombre que les cartes de la grille (.wg-facade::before plus haut) —
   carte "dernier message" = le sujet principal du hero, elle doit porter l'effet
   le plus fort. Désactivé une fois l'iframe en place (:has, pas de recouvrement
   des commandes du lecteur). */
.wg-latest-media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--nwc-ink);
	opacity: 0.68;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.wg-latest-media:has(iframe)::before {
	display: none;
}

/* IMPORTANT : ne PAS passer .wg-facade-btn en z-index supérieur à l'overlay —
   ça soulèverait aussi l'<img> qu'il contient et annulerait l'assombrissement
   (bug constaté : overlay techniquement actif mais invisible, l'image restait
   au-dessus). Seule l'icône play doit dépasser l'overlay, pas le bouton entier. */
.wg-latest-media .wg-play-icon {
	/* z-index seul : NE PAS toucher position ici. .wg-play-icon est en
	   position:absolute dans le CSS du plugin (watchgrid.css) — c'est ce qui
	   lui permet, en tant qu'élément inline (<span>) par défaut, de respecter
	   width/height. Le repasser en "relative" (erreur faite une première fois)
	   annule cette exemption et écrase sa taille (84px déclarés → ~2px rendus,
	   un <span> inline+relative ignore width/height, seul absolute/fixed en
	   tient compte). */
	z-index: 2;
}

/* Même repli qu'en grille : une fois la vidéo lancée (latest.js remplace
   .wg-latest-media par un <iframe>), l'overlay titre+logo s'efface pour ne
   jamais gêner les commandes du lecteur. */
.wg-latest-wrap:not(.wg-layout-side) .wg-latest-media:has(iframe) + .wg-latest-text {
	opacity: 0;
	transition: opacity var(--nwc-duration-fast) var(--nwc-ease);
}