/*
Theme Name: NJ Photo
Theme URI: https://www.nicolasjacquet.fr
Description: Thème enfant de Twenty Twenty-Five pour le portfolio de Nicolas Jacquet. Accueil photo plein écran, pages de série en vignettes, fondus, Montserrat en local, échelle typographique à cinq tailles, fond blanc.
Author: Nicolas Jacquet
Template: twentytwentyfive
Version: 1.5.1
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: nj-photo
*/

/* ==========================================================================
   Réglages rapides — modifier ces valeurs suffit pour ajuster l'allure du site
   ========================================================================== */
:root {
	--nj-thumb-ratio: 1 / 1;      /* proportion des vignettes : 1 / 1, 4 / 5, 3 / 2 … */
	--nj-thumb-fit: cover;        /* cover = vignette recadrée ; contain = image entière sur fond blanc */
	--nj-thumb-gap: 16px;         /* espace entre vignettes */
	--nj-hero-veil: 0.18;         /* voile noir sur la photo d'accueil (0 = aucun, 0.5 = fort) */
	--nj-reveal-ms: 900ms;        /* durée des apparitions en fondu */
	--nj-gutter: clamp(28px, 6vw, 50px); /* marge latérale : 28 px sur mobile, 50 px sur grand écran */
}

/* ==========================================================================
   Base
   ========================================================================== */
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Fondu d'entrée de chaque page, fondu de sortie quand on suit un lien interne */
@keyframes njPage {
	from { opacity: 0; }
}
body {
	animation: njPage 700ms ease backwards;
}
html.nj-leaving body {
	opacity: 0;
	transition: opacity 300ms ease;
}

/* Légendes des galeries masquées (hors pages de série : voir « Noms sous les vignettes ») */
.wp-block-gallery figcaption,
.wp-block-gallery .wp-element-caption {
	display: none;
}

.wp-block-gallery img {
	border-radius: 0;
	box-shadow: none;
}

/* ==========================================================================
   En-tête et pied de page des pages intérieures
   ========================================================================== */
/* Les marges latérales viennent de --nj-gutter (le thème met celles du parent à zéro) */
.wp-block-group.nj-header {
	box-sizing: border-box;
	padding: 24px var(--nj-gutter);
}
.nj-header a,
.nj-footer a {
	text-decoration: none;
	transition: opacity 300ms ease;
}
.nj-header a:hover,
.nj-footer a:hover {
	opacity: 0.55;
}

.wp-block-group.nj-footer {
	margin: clamp(40px, 6vw, 80px) var(--nj-gutter) 0;
	padding: 24px 0 32px;
	border-top: 1px solid var(--wp--preset--color--filet);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.nj-footer p {
	margin: 0;
}
.nj-footer .nj-links a + a,
.nj-footer .nj-links a.nj-mail + a {
	margin-left: 1.6em;
}

/* Menu mobile ouvert (le thème met le « padding racine » à zéro, d'où un menu collé au bord) */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	padding: 28px var(--nj-gutter) 40px;
}
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 0;
}
/* Bouton « menu » et « fermer » alignés sur la marge du site */
.nj-header .wp-block-navigation__responsive-container-open,
.nj-home-header .wp-block-navigation__responsive-container-open {
	padding: 4px 0 4px 8px;
}

/* Pied de page sur mobile : texte empilé, marges confortables */
@media (max-width: 600px) {
	.wp-block-group.nj-footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		padding: 24px 0 36px;
	}
	.nj-footer .nj-links a + a,
	.nj-footer .nj-links a.nj-mail + a {
		margin-left: 1.2em;
	}
}

/* ==========================================================================
   Accueil plein écran
   Modèle « Accueil plein écran » : la photo = image mise en avant de la page.
   ========================================================================== */
.nj-hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	margin-top: 0;
	background: #111111;
	color: #ffffff;
	overflow: hidden;
}

.nj-hero .wp-block-post-featured-image {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: calc(1 - var(--nj-fade, 0) * 0.55);
}
.nj-hero .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	animation: njHeroIn 1600ms ease backwards;
}
@keyframes njHeroIn {
	from { opacity: 0; transform: scale(1.03); }
}

/* Voile léger : garde le menu et le titre lisibles sur toute photo */
.nj-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, calc(var(--nj-hero-veil) * 1.6)) 0%,
		rgba(0, 0, 0, calc(var(--nj-hero-veil) * 0.3)) 28%,
		rgba(0, 0, 0, calc(var(--nj-hero-veil) * 0.3)) 62%,
		rgba(0, 0, 0, calc(var(--nj-hero-veil) * 1.6)) 100%
	);
}

.nj-home-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	box-sizing: border-box;
	padding: 24px var(--nj-gutter);
	color: #ffffff;
}
.nj-home-header a,
.nj-hero-caption a {
	color: #ffffff;
	text-decoration: none;
	transition: opacity 300ms ease;
}
.nj-home-header a:hover {
	opacity: 0.65;
}

.nj-hero-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	box-sizing: border-box;
	align-items: flex-end;
	padding: 0 var(--nj-gutter) clamp(24px, 5vh, 48px);
	color: #ffffff;
}
.nj-hero-caption .wp-block-post-title {
	margin: 0;
	color: #ffffff;
	font-weight: 500;
	line-height: 1.1;
}
.nj-scroll-cue {
	margin: 0;
	font-size: var(--wp--preset--font-size--sous-titre);
	line-height: 1;
	animation: njCue 2.6s ease-in-out infinite;
}
@keyframes njCue {
	0%, 100% { transform: translateY(0); opacity: 0.6; }
	50% { transform: translateY(6px); opacity: 1; }
}

/* À propos, sous la photo */
.wp-block-group.nj-about {
	box-sizing: border-box;
	padding: clamp(60px, 10vw, 140px) var(--nj-gutter) clamp(20px, 4vw, 48px);
}
.nj-about .wp-block-post-content > h2 {
	margin-bottom: 1.5em;
	font-size: var(--wp--preset--font-size--legende);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ==========================================================================
   Pages de série : texte puis vignettes
   Modèle « Série à vignettes ». La galerie = bloc Galerie standard.
   ========================================================================== */
.wp-block-group.nj-serie {
	box-sizing: border-box;
	padding: clamp(24px, 4vw, 56px) var(--nj-gutter) 0;
}
.nj-serie .wp-block-post-title {
	margin-bottom: 0.3em;
}
.nj-serie .nj-subtitle,
.nj-serie .nj-fiche {
	color: var(--wp--preset--color--gris);
}
.nj-serie .nj-subtitle {
	margin-top: 0;
	font-size: var(--wp--preset--font-size--sous-titre);
}
.nj-serie .nj-fiche {
	font-size: var(--wp--preset--font-size--legende);
	letter-spacing: 0.02em;
}

/* La galerie sort de la colonne de texte et occupe la largeur « large » */
.nj-serie .wp-block-post-content > .wp-block-gallery {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-top: clamp(28px, 4vw, 56px);
	margin-bottom: clamp(28px, 4vw, 56px);
}

.nj-serie .wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: var(--nj-thumb-gap);
}
.nj-serie .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	position: relative;
	display: block;
	width: auto;
	margin: 0;
	flex: none;
	aspect-ratio: var(--nj-thumb-ratio);
	background: #ffffff;
}
.nj-serie .wp-block-gallery figure.wp-block-image a.nj-pswp {
	position: absolute;
	inset: 0;
	display: block;
	line-height: 0;
	cursor: zoom-in;
}
.nj-serie .wp-block-gallery figure.wp-block-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: var(--nj-thumb-fit);
	transition: opacity 400ms ease;
}
.nj-serie .wp-block-gallery figure.wp-block-image a:hover img {
	opacity: 0.8;
}
/* Noms sous les vignettes (légende ou titre de la photo, voir functions.php) */
.nj-serie .wp-block-gallery.has-nested-images {
	row-gap: calc(var(--nj-thumb-gap) + 2.4em);
	margin-bottom: calc(clamp(28px, 4vw, 56px) + 2.4em);
}
.nj-serie .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	overflow: visible;
}
.nj-serie .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) figcaption.nj-name {
	position: absolute;
	top: 100%;
	bottom: auto;
	left: 0;
	right: 0;
	display: block !important;
	box-sizing: border-box;
	width: auto;
	height: auto;
	max-height: none;
	margin: 0;
	padding: 10px 0 0;
	background: none;
	color: var(--wp--preset--color--gris);
	font-size: var(--wp--preset--font-size--legende);
	line-height: 1.3;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
@media (max-width: 600px) {
	.nj-serie .wp-block-gallery.has-nested-images {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
}

/* ==========================================================================
   Formulaire Fluent Forms (page Contact / demande de tirage)
   Même langage que le site : Montserrat, fond blanc, angles droits, noir et gris.
   Préfixe « body .fluentform » : prend le pas sur les styles par défaut du plugin.
   ========================================================================== */
body .fluentform {
	font-family: inherit;
	color: var(--wp--preset--color--encre);
}
body .fluentform .ff-el-group {
	margin-bottom: 28px;
}
body .fluentform .ff-el-input--label label {
	margin-bottom: 8px;
	color: var(--wp--preset--color--encre);
	font-size: var(--wp--preset--font-size--legende);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
body .fluentform .ff-el-is-required.asterisk-right label::after,
body .fluentform .ff-el-is-required.asterisk-left label::before {
	color: var(--wp--preset--color--gris);
}
body .fluentform .frm-fluent-form .ff-el-form-control,
body .fluentform .ff-el-form-control {
	box-sizing: border-box;
	padding: 12px 14px;
	background: var(--wp--preset--color--blanc);
	border: 1px solid #bdbdbd;
	border-radius: 0;
	box-shadow: none;
	color: var(--wp--preset--color--encre);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--texte);
	line-height: 1.4;
	transition: border-color 250ms ease;
}
body .fluentform .ff-el-form-control::placeholder {
	color: #9a9a9a;
}
body .fluentform .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--encre);
	background: var(--wp--preset--color--blanc);
	box-shadow: none;
	outline: none;
	color: var(--wp--preset--color--encre);
}
body .fluentform textarea.ff-el-form-control {
	min-height: 160px;
}
body .fluentform .ff-el-form-check label,
body .fluentform .ff-el-form-check-label {
	font-size: var(--wp--preset--font-size--texte);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}
body .fluentform .ff-el-help-message,
body .fluentform .ff-el-form-control + .ff-el-help-message {
	color: var(--wp--preset--color--gris);
	font-size: var(--wp--preset--font-size--legende);
}

/* Bouton d'envoi */
body .fluentform .frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style) {
	padding: 14px 32px;
	background: var(--wp--preset--color--encre);
	border: 1px solid var(--wp--preset--color--encre);
	border-radius: 0;
	box-shadow: none;
	color: var(--wp--preset--color--blanc);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--legende);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: background-color 300ms ease, color 300ms ease;
}
body .fluentform .frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style):hover,
body .fluentform .frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style):focus {
	background: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--encre);
	opacity: 1;
}

/* Messages : sobres, sans pavé de couleur */
body .fluentform .ff-message-success {
	padding: 20px 0 0;
	background: none;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--filet);
	box-shadow: none;
	color: var(--wp--preset--color--encre);
	font-size: var(--wp--preset--font-size--texte);
}
body .fluentform .ff-el-is-error .ff-el-form-control {
	border-color: #8a1f1f;
}
body .fluentform .error.text-danger,
body .fluentform .ff-errors-in-stack {
	margin-top: 6px;
	color: #8a1f1f;
	font-size: var(--wp--preset--font-size--legende);
}

/* Le formulaire garde la largeur du texte */
.nj-page .fluentform {
	max-width: 100%;
}

/* ==========================================================================
   Apparitions — fondu au défilement (le script ajoute .is-in)
   Les sélecteurs doivent rester identiques à ceux de assets/nj-fade.js.
   ========================================================================== */
html.nj-js:not(.nj-force) :where(
	.nj-about .wp-block-post-content > *,
	.nj-serie .wp-block-post-title,
	.nj-serie .wp-block-post-content > *:not(.wp-block-gallery),
	.nj-serie .wp-block-gallery figure.wp-block-image
) {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity var(--nj-reveal-ms) ease var(--nj-delay, 0ms),
		transform var(--nj-reveal-ms) ease var(--nj-delay, 0ms);
}
html.nj-js:not(.nj-force) .is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}