/* Basalt — Grille Projets
   Grille au format 800×680, sans bordure ni espacement par défaut.
   Survol : voile gris transparent + titre blanc en bas à gauche. */

.bgp-grille {
	--bgp-columns-d: 3;   /* au-delà de 900px */
	--bgp-columns-t: 2;   /* jusqu'à 900px */
	--bgp-columns-m: 2;   /* jusqu'à 600px */
	--bgp-gap: 0px;
	--bgp-overlay: rgba(0, 0, 0, 0.35); /* gris transparent */
	--bgp-titre-taille: 30px;
	--bgp-padding: clamp(14px, 2vw, 26px);
	--bgp-duree: 0.35s;

	display: grid;
	grid-template-columns: repeat(var(--bgp-columns-d), minmax(0, 1fr));
	gap: var(--bgp-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bgp-item {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 800 / 680; /* proportions 800 × 680 */
	border: 0;
	text-decoration: none;
	background: #e9e9e9;
	line-height: 0;
}

/* Sécurité si un thème ajoute des bordures aux images/liens */
.bgp-item,
.bgp-item img {
	box-shadow: none;
	border-radius: 0;
}

.bgp-media,
.bgp-media .bgp-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.bgp-media .bgp-img {
	display: block;
	object-fit: cover;
	object-position: center;
	border: 0;
	transition: transform var(--bgp-duree) ease;
}

.bgp-img--vide {
	background: #d9d9d9;
}

/* Voile gris au survol */
.bgp-overlay {
	position: absolute;
	inset: 0;
	background: var(--bgp-overlay);
	opacity: 0;
	transition: opacity var(--bgp-duree) ease;
	pointer-events: none;
}

/* Titre en bas à gauche, blanc */
.bgp-titre {
	position: absolute;
	left: var(--bgp-padding);
	right: var(--bgp-padding);
	bottom: var(--bgp-padding);
	margin: 0;
	padding: 0;
	z-index: 2;
	color: #fff;
	font-size: var(--bgp-titre-taille);
	line-height: 1.15;
	font-weight: 400;
	text-align: left;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--bgp-duree) ease, transform var(--bgp-duree) ease;
	pointer-events: none;
}

.bgp-item:hover .bgp-overlay,
.bgp-item:focus-visible .bgp-overlay,
.bgp-item:hover .bgp-titre,
.bgp-item:focus-visible .bgp-titre {
	opacity: 1;
}

.bgp-item:hover .bgp-titre,
.bgp-item:focus-visible .bgp-titre {
	transform: translateY(0);
}

.bgp-item:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

/* Responsive */
@media (max-width: 900px) {
	.bgp-grille {
		grid-template-columns: repeat(var(--bgp-columns-t), minmax(0, 1fr));
		--bgp-titre-taille: clamp(0.8rem, 1.8vw, 1rem);
		--bgp-padding: clamp(10px, 1.8vw, 18px);
	}
}

/* Mobile : les cases sont deux fois plus petites, le titre doit suivre —
   sinon il déborde de la vignette ou passe sur trois lignes. */
@media (max-width: 600px) {
	.bgp-grille {
		grid-template-columns: repeat(var(--bgp-columns-m), minmax(0, 1fr));
		--bgp-titre-taille: clamp(0.62rem, 2.6vw, 0.82rem);
		--bgp-padding: clamp(7px, 2.4vw, 12px);
	}

	.bgp-titre {
		line-height: 1.15;
		/* deux lignes au maximum, le reste est coupé proprement */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* Tactile : pas de survol possible, on affiche le titre en permanence */
@media (hover: none) {
	.bgp-grille {
		--bgp-overlay: rgba(0, 0, 0, 0.25);
	}

	.bgp-overlay,
	.bgp-titre {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bgp-media .bgp-img,
	.bgp-overlay,
	.bgp-titre {
		transition: none;
	}
}