/* ==========================================================================
 * Gamme et réalisations : les cartes CODÉES rendues par includes/catalogue.php
 * ([nc_gamme], [nc_realisations]) depuis les types de contenu du plugin
 * finnsobois_contenus, la liste filtrée et paginée de la page Projets, la
 * galerie et la visionneuse d'une fiche projet ([nc_galerie]). Mise en file
 * seulement sur les pages qui les portent (et sur les fiches).
 *
 * Les TEXTES de carte gardent les classes du composant mesuré, et leurs règles
 * dans custom.css : `.nc-projet__bas` / `__nom` / `__lieu` (18 → 17 → 16),
 * `.nc-decouvrir--survol` et son survol (sur le LIEN depuis le 2026-10-01, custom.css) (« Découvrir
 * 2 », 83:193), `.nc-equipement__nom` / `__precisions` (14 / 1,5), `.nc-filtre`
 * (« Mot clé », 201:994). Ici seulement ce que les colonnes WPBakery donnaient
 * et qu'une liste n'a pas : la grille, la photo, les écarts.
 *
 * Cotes relevées AU RENDU sur l'ancien montage (colonnes), le 2026-10-01, de
 * 1920 à 320 : photo 680 × 488 (projet) et 440 × 348 (équipement), gouttière
 * 40, 19 / 15 / 12 entre la photo et le nom, 60 entre deux lignes de la gamme,
 * filtres → cartes 60 avec la rampe 1000-1300, puis 40 et 30.
 *
 * Trois écarts VOULUS avec l'ancien montage, tous trois sous 1000 :
 *   · la gamme gardait 100 px entre deux lignes de cartes en tablette et au
 *     téléphone (les 60 du dessin + 40 de marge de colonne Salient, plus qu'au
 *     bureau) : 40 puis 30, le rythme des dividers de la même page ;
 *   · les photos de projet passent en 16/9 sous 1000 sur TOUTES les pages (seul
 *     l'accueil le faisait, à la demande du client : 631 px de haut à 999
 *     ailleurs) ; celles de la gamme sous 690, ce que le skill d'Hekotek
 *     annonçait et que la page ne faisait plus ;
 *   · « En savoir plus » est calé en haut du pied de carte, comme le nom (le
 *     nœud) : wpautop l'enveloppait d'un <p> qui le descendait de 2 px.
 * ========================================================================== */

/* Liste remise à zéro : Salient pose `ol, ul { margin-left: 30px; margin-bottom:
   30px }` et `ul li { list-style: disc }`. */
ul.nc-cartes {
	display: grid;
	column-gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.nc-cartes > li {
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* La gamme : trois par ligne au bureau (les deux lignes de 201:938), 60 entre
   deux lignes (201:944 → 201:1005). */
ul.nc-cartes--gamme {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	row-gap: 60px;
}

/* Les projets : deux par ligne (141:1068). Le dessin n'en montre qu'une ligne ;
   la page Projets en aligne plusieurs, au rythme de la gamme. */
ul.nc-cartes--projets {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	row-gap: 60px;
}

/* ── La photo ─────────────────────────────────────────────────────────────
   `.nc-cartes .nc-carte__photo img` (0-2-1) ne suffirait pas : Salient pose
   `.row .col img { margin-bottom: 15px; height: auto }` au même poids, plus
   tard. La classe de l'image porte le sélecteur à 0-3-1. */
.nc-carte__photo {
	display: block;
	line-height: 0;
}

.nc-cartes .nc-carte__photo img.nc-carte__img,
.nc-cartes .nc-carte__photo .nc-carte__img--vide {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0;
	border-radius: 15px;
	object-fit: cover;
}

.nc-cartes .nc-carte__photo .nc-carte__img--equipement { aspect-ratio: 440 / 348; }
.nc-cartes .nc-carte__photo .nc-carte__img--projet     { aspect-ratio: 680 / 488; }

/* Sans photo, un aplat au même rapport : la grille ne se décale pas. */
.nc-cartes .nc-carte__img--vide {
	background-color: var(--brand-beige);
}

/* ── Sous la photo : 19 au bureau (201:946, 141:1069) ─────────────────────── */
.nc-cartes .nc-equipement__nom,
.nc-cartes .nc-projet__bas {
	margin-top: 19px;
}

/* Le pied de carte projet : nom et lieu à gauche, « En savoir plus » à droite,
   tous deux calés en haut (flex et écart de 20 : `.nc-projet__bas`, custom.css). */
.nc-cartes .nc-projet__bas > a.nc-decouvrir {
	flex: 0 0 auto;
	margin-top: 0;
}

/* Le bloc nom + lieu cède la place au lieu de pousser « En savoir plus » hors
   de la carte : un mot long (« Modernisation », une commune à traits d'union)
   gardait sa largeur minimale, et le bouton débordait de 9 px à 280 (mesuré
   par la session Machines, 2026-10-02). Un mot n'est coupé que s'il ne tient
   pas seul sur sa ligne : rien ne bouge aux largeurs courantes. */
.nc-cartes .nc-projet__bas > div {
	min-width: 0;
	overflow-wrap: break-word;
}

/* Le disque de « Découvrir 2 » : un aplat bleu, sans image. La mécanique (replié
   à 0, ouvert à 12 + 20 au survol de la carte) est celle de custom.css. */
.nc-cartes .nc-decouvrir__puce {
	background-color: var(--brand-blue);
}

/* TOUTE la carte projet mène au projet, le survol reste au bouton (Hugo,
   2026-10-02). Le lien de la photo (hors tabulation, caché aux lecteurs
   d'écran : catalogue.php) étend son `::after` sur la carte ; « En savoir
   plus » passe au-dessus, si bien que le disque ne s'ouvre qu'au survol du
   bouton lui-même. Un `::after` sur « En savoir plus » aurait couvert la carte
   aussi, mais son survol s'y serait allumé partout. */
ul.nc-cartes--projets > li {
	position: relative;
}

.nc-cartes--projets a.nc-carte__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.nc-cartes--projets .nc-projet__bas > a.nc-decouvrir {
	position: relative;
	z-index: 2;
}

/* ── Filtres → cartes : 60, comme le divider qu'ils remplacent ───────────── */
.nc-gamme-liste .nc-filtres + .screen-reader-text + ul.nc-cartes,
.nc-gamme-liste .nc-filtres + ul.nc-cartes {
	margin-top: 60px;
}

.nc-equipement.is-masque,
.nc-cartes > li[hidden] {
	display: none;
}

/* Rien à montrer (aucun projet pour ce partenaire, aucune carte de gamme) :
   la section qui porte l'élément disparaît, titre compris, plutôt qu'un
   « Des projets industriels conçus avec … » au-dessus du vide. */
.wpb_row:has(.nc-cartes-vide) {
	display: none !important;
}

/* ── La liste de la page Projets : filtres, cartes, pagination ──────────────
   Filtres et numéros sont des LIENS habillés en « Mot clé » (201:994, le
   composant des filtres de la gamme, custom.css) : même pilule, même filet
   beige au repos, filet bleu .5 au survol, au focus et pour l'état courant. */
.nc-projets-liste {
	/* La cible des liens « #realisations » : de l'air sous l'en-tête posé. */
	scroll-margin-top: 100px;
}

.nc-projets-liste__contenu:focus {
	outline: none;
}

.nc-projets-liste.is-chargement .nc-projets-liste__contenu {
	opacity: .5;
	transition: opacity var(--nc-anim-court, .3s ease-out);
}

/* La courbe du relevé (« Mot clé » 201:994 : 300 ms, ease-out,
   `--nc-anim-court`) : la règle de base `.nc-filtre` (custom.css, bloc
   Hekotek) dit encore .25s ease. */
.nc-projets-liste a.nc-filtre {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: border-color var(--nc-anim-court, .3s ease-out);
}

/* Au clavier, l'anneau du site (en-tête, boutons, liens de texte) : sans lui,
   le focus ne rendait que le contour par défaut du navigateur, noir, 1 px. */
.nc-projets-liste a.nc-filtre:focus-visible {
	outline: 2px solid var(--brand-accent);
	outline-offset: 3px;
}

.nc-projets-liste .nc-filtres + ul.nc-cartes,
.nc-projets-liste .nc-filtres + .nc-projets-liste__vide {
	margin-top: 60px;
}

.nc-projets-liste__vide {
	margin: 0;
	padding: 0;
	text-align: center;
	color: var(--brand-blue);
}

.nc-projets-liste__vide a {
	text-decoration: underline;
}

.nc-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 60px;
}

/* Un numéro seul fait une pilule carrée (38 × 38), comme un filtre court. */
.nc-pagination .nc-filtre {
	min-width: 38px;
}

.nc-pagination .nc-filtre.current {
	border-color: var(--brand-rule-strong);
}

.nc-pagination .nc-filtre.dots {
	border-color: transparent;
	background-color: transparent;
	cursor: default;
}

/* ── La galerie d'une fiche projet ─────────────────────────────────────────
   Les cartes de la gamme sans leur texte : coins 15, rapport 440 × 348,
   gouttière 40. Trois photos par ligne, deux quand il y en a quatre (une
   orpheline sous trois serait le seul « trou » du site). */
ul.nc-galerie {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.nc-galerie.nc-galerie--2,
ul.nc-galerie.nc-galerie--4 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

ul.nc-galerie > li {
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nc-galerie__lien {
	position: relative;
	display: block;
	border-radius: 15px;
	line-height: 0;
	cursor: zoom-in;
}

/* Au survol et au focus, le voile des bandes photo du site (.15, sa valeur de
   fin) : la vignette dit qu'elle s'ouvre. Effet dérivé, rien n'est dessiné pour
   une galerie : à faire valider par la designeuse avec la fiche. */
.nc-galerie__lien::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 15px;
	background-color: rgba(0, 0, 0, .15);
	opacity: 0;
	transition: opacity var(--nc-anim-court, .3s ease-out);
	pointer-events: none;
}

.nc-galerie__lien:hover::after,
.nc-galerie__lien:focus-visible::after {
	opacity: 1;
}

.nc-galerie .nc-galerie__lien img.nc-galerie__img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0;
	aspect-ratio: 440 / 348;
	border-radius: 15px;
	object-fit: cover;
}

/* ── La visionneuse (assets/js/galerie.js) : fenêtre modale native ─────────
   Rien de dessiné : le fond est le voile des héros poussé au noir, les
   commandes sont les chevrons du carrousel des partenaires, en blanc. */
html.nc-visionneuse-ouverte {
	overflow: hidden;
}

.nc-visionneuse {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--brand-white);
}

.nc-visionneuse::backdrop {
	background: rgba(0, 0, 0, .94);
}

.nc-visionneuse__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 70px 90px 80px;
	box-sizing: border-box;
}

.nc-visionneuse__img {
	display: block;
	max-width: 100%;
	max-height: calc(100% - 40px);
	width: auto;
	height: auto;
	border-radius: 15px;
	object-fit: contain;
}

.nc-visionneuse__legende {
	max-width: 760px;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
	color: rgba(255, 255, 255, .85);
}

.nc-visionneuse__compteur {
	position: absolute;
	top: 26px;
	left: 50%;
	margin: 0;
	padding: 0;
	transform: translateX(-50%);
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: .04em;
	color: var(--brand-white);
}

.nc-visionneuse__bouton {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .35);
	color: var(--brand-white);
	cursor: pointer;
	transition: background-color var(--nc-anim-court, .3s ease-out);
}

.nc-visionneuse__bouton:hover {
	background: rgba(255, 255, 255, .15);
}

.nc-visionneuse__bouton:focus-visible {
	outline: 2px solid var(--brand-white);
	outline-offset: 3px;
}

.nc-visionneuse__bouton[hidden] {
	display: none;
}

.nc-visionneuse__bouton--precedent { top: 50%; left: 20px; transform: translateY(-50%); }
.nc-visionneuse__bouton--suivant   { top: 50%; right: 20px; transform: translateY(-50%); }
.nc-visionneuse__bouton--fermer    { top: 12px; right: 20px; }

@media (prefers-reduced-motion: reduce) {
	.nc-projets-liste.is-chargement .nc-projets-liste__contenu,
	.nc-visionneuse__bouton,
	.nc-galerie__lien::after {
		transition: none;
	}
}

/* ── Petit bureau, 1000 → 1300 : la rampe du projet (salient-responsive),
   valeur tablette à 1000, valeur bureau à 1300. Les écarts de moins de 5 px
   gardent leur palier (19 → 15 ne rampe pas). ──────────────────────────── */
@media (min-width: 1000px) and (max-width: 1300px) {
	.nc-gamme-liste .nc-filtres + .screen-reader-text + ul.nc-cartes,
	.nc-gamme-liste .nc-filtres + ul.nc-cartes,
	.nc-projets-liste .nc-filtres + ul.nc-cartes,
	.nc-projets-liste .nc-filtres + .nc-projets-liste__vide,
	.nc-pagination {
		margin-top: calc(40px + 20 * (100vw - 1000px) / 300);
	}

	ul.nc-galerie {
		gap: calc(30px + 10 * (100vw - 1000px) / 300);
	}

	/* La gamme passe à DEUX par ligne dès 1300, pas à 1000 (Hugo, 2026-10-02 :
	   « en dessous de 1300px, deux par ligne au lieu de trois »). À trois, la
	   carte tombait à 347 px à 1300 puis 247 à 1000 : photo de 195 de haut et
	   nom en 14 px sous une vignette. À deux, elle reste au-dessus de la cote
	   dessinée (440) jusqu'à ~1100. L'écart entre lignes rampe du palier
	   tablette (40) à la valeur bureau (60), comme les marges ci-dessus. */
	ul.nc-cartes--gamme {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: calc(40px + 20 * (100vw - 1000px) / 300);
	}
}

/* ── Tablette ────────────────────────────────────────────────────────────── */
@media (max-width: 999px) {
	/* Colonnes plafonnées à 390, leur largeur à 1000 : sous 1000 le container de
	   Salient ne rembourre plus que 6 % et s'ÉLARGIT (820 → 879), la carte
	   passait de 390 à 420 quand l'écran rétrécissait (mesuré le 2026-10-02).
	   Centrée, comme le titre et les filtres de la section ; inerte sous ~860,
	   où la colonne est déjà plus étroite. */
	ul.nc-cartes--gamme {
		grid-template-columns: repeat(2, minmax(0, 390px));
		justify-content: center;
		row-gap: 40px;
	}

	/* Les projets passent à UNE par ligne (Hugo, 2026-10-01 : « passe en 1 par
	   ligne en dessous de 1000px »). ⚠️ Cette consigne remplace celle qui tenait
	   les deux colonnes jusqu'à 691 — elle venait d'une autre remarque du même
	   jour, « photos trop larges en pile », et les deux se concilient par le
	   PLAFOND : seule, la carte ne prend pas toute la largeur, elle s'arrête à
	   640 comme les autres cartes de la page et sa photo suit (640 × 360 à 999,
	   contre 879 × 494 si on la laissait s'étaler). 40 entre deux lignes, comme
	   la gamme. */
	ul.nc-cartes--projets {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 40px;
	}

	ul.nc-cartes--projets > li {
		max-width: 640px;
	}

	/* Sur la page Projets, la carte seule se CENTRE (Hugo, 2026-10-02 : « centre
	   les cartes dans la page ») : filtres et pagination y sont centrés, et la
	   carte de 640 calée à gauche laissait un vide à droite sous eux. Sur les
	   autres pages elle reste à gauche, avec le titre et le texte de sa section. */
	.nc-projets-liste ul.nc-cartes--projets > li {
		justify-self: center;
		width: 100%;
	}

	/* 16/9 dès la pile, comme le dit ce bloc (640 × 360 à 999) et la demande du
	   client du 2026-09-23. La règle était restée dans le bloc TÉLÉPHONE : de
	   691 à 999 la photo sortait au rapport du dessin, 640 × 459 (mesuré le
	   2026-10-02 sur les quatre pages). */
	.nc-cartes .nc-carte__photo .nc-carte__img--projet {
		aspect-ratio: 16 / 9;
	}

	.nc-cartes .nc-equipement__nom,
	.nc-cartes .nc-projet__bas {
		margin-top: 15px;
	}

	.nc-gamme-liste .nc-filtres + .screen-reader-text + ul.nc-cartes,
	.nc-gamme-liste .nc-filtres + ul.nc-cartes,
	.nc-projets-liste .nc-filtres + ul.nc-cartes,
	.nc-projets-liste .nc-filtres + .nc-projets-liste__vide,
	.nc-pagination {
		margin-top: 40px;
	}

	/* Deux photos par ligne, quel que soit leur nombre. */
	ul.nc-galerie,
	ul.nc-galerie.nc-galerie--2,
	ul.nc-galerie.nc-galerie--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px;
	}

	.nc-visionneuse__figure {
		padding: 70px 20px 90px;
	}

	/* Les flèches descendent sous la photo, de part et d'autre du centre. */
	.nc-visionneuse__bouton--precedent,
	.nc-visionneuse__bouton--suivant {
		top: auto;
		bottom: 20px;
		transform: none;
	}

	.nc-visionneuse__bouton--precedent { left: calc(50% - 64px); }
	.nc-visionneuse__bouton--suivant   { right: calc(50% - 64px); }

	/* Cible tactile de 44 px pour « En savoir plus » (18 px de texte) dès la
	   tablette, écran tactile : le rembourrage s'ajoute, la marge le reprend, la
	   mise en page ne bouge pas. Pas au bureau : 83:193 y est à 18, sans
	   rembourrage (composants-check). */
	.nc-cartes .nc-projet__bas > a.nc-decouvrir {
		padding-top: 13px;
		padding-bottom: 13px;
		margin-top: -13px;
		margin-bottom: -13px;
	}
}

/* ── Téléphone ───────────────────────────────────────────────────────────── */
@media (max-width: 690px) {
	ul.nc-cartes--gamme {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 30px;
	}

	/* Au téléphone, 30 entre deux projets (comme l'ancien montage) ; le 16/9
	   vient du palier tablette. */
	ul.nc-cartes--projets {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 30px;
	}

	/* Seule par ligne, la carte d'équipement fait 607 px : au rapport du dessin
	   la photo montait à 480 et repoussait son nom d'un écran. */
	.nc-cartes .nc-carte__photo .nc-carte__img--equipement {
		aspect-ratio: 16 / 9;
	}

	.nc-cartes .nc-equipement__nom,
	.nc-cartes .nc-projet__bas {
		margin-top: 12px;
	}

	.nc-gamme-liste .nc-filtres + .screen-reader-text + ul.nc-cartes,
	.nc-gamme-liste .nc-filtres + ul.nc-cartes,
	.nc-projets-liste .nc-filtres + ul.nc-cartes,
	.nc-projets-liste .nc-filtres + .nc-projets-liste__vide,
	.nc-pagination {
		margin-top: 30px;
	}

	ul.nc-galerie,
	ul.nc-galerie.nc-galerie--2,
	ul.nc-galerie.nc-galerie--4 {
		gap: 15px;
	}

	/* Les numéros de page gardent la cible tactile des filtres (44 px). */
	.nc-pagination .nc-filtre {
		min-width: 44px;
	}

}