/* Automne Architectes — listing projets filtrable + fiches projet
   Couleur de marque : #f47b57 (corail). */

:root {
	--automne-corail: #f47b57;
	--automne-encre:  #2b2b2b;
	--automne-gris:   #7a7a7a;
	--automne-trait:  #e6e6e6;
}

/* ---------------- Listing : barre de filtres ---------------- */
.projets-wrap { max-width: 1200px; margin: 0 auto; padding: 10px 16px 60px; }

.projets-filtres {
	display: flex; flex-wrap: wrap; gap: 10px;
	justify-content: center; margin: 0 0 32px;
}
.projets-filtre {
	appearance: none; cursor: pointer;
	border: 1px solid var(--automne-trait); background: #fff;
	color: var(--automne-corail);
	font: inherit; font-size: 14px; letter-spacing: .02em;
	padding: 8px 18px; border-radius: 999px;
	transition: all .18s ease;
}
/* Survol & sélection en ORANGE plein (#f47b57) — la couleur de la marque. */
.projets-filtre:hover,
.projets-filtre.is-active { background: var(--automne-corail); border-color: var(--automne-corail); color: #fff; }

/* ---------------- Listing : masonry (colonnes CSS) ---------------- */
.projets-grid {
	column-width: 320px;
	column-gap: 18px;
}
.projet-card {
	display: block; text-decoration: none; color: inherit;
	break-inside: avoid; -webkit-column-break-inside: avoid;
	margin: 0 0 18px;
	overflow: hidden; border-radius: 4px;
	background: #f2f2f2;
	transition: opacity .25s ease, box-shadow .2s ease;
}
.projet-card--link { cursor: pointer; }
.projet-card--link:hover { box-shadow: 0 12px 28px rgba(0,0,0,.16); }

/* Image au ratio naturel → vraie masonry */
.projet-card__img { position: relative; margin: 0; overflow: hidden; line-height: 0; }
.projet-card__img img { width: 100%; height: auto; display: block; transition: transform .5s ease; }
.projet-card--link:hover .projet-card__img img { transform: scale(1.06); }

/* Texte en overlay, révélé au survol */
.projet-card__overlay {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; justify-content: flex-end;
	padding: 18px 16px 16px; line-height: 1.3;
	background: linear-gradient(to top, rgba(20,20,20,.80) 0%, rgba(20,20,20,.35) 45%, rgba(20,20,20,0) 75%);
	opacity: 0; transition: opacity .28s ease;
}
.projet-card:hover .projet-card__overlay,
.projet-card:focus-within .projet-card__overlay { opacity: 1; }
.projet-card__title { margin: 0 0 5px; font-size: 18px; line-height: 1.25; color: #fff; letter-spacing: .01em; }
.projet-card__accroche { margin: 0 0 6px; font-size: 13.5px; line-height: 1.4; color: rgba(255,255,255,.92); }
.projet-card__lieu  { font-size: 13px; color: var(--automne-corail); letter-spacing: .03em; }

/* Écrans tactiles (pas de survol) : overlay toujours visible */
@media (hover: none) {
	.projet-card__overlay { opacity: 1;
		background: linear-gradient(to top, rgba(20,20,20,.72) 0%, rgba(20,20,20,0) 60%); }
}

.projet-card.is-hidden { display: none; }
.projets-vide { text-align: center; color: var(--automne-gris); padding: 40px 0; }

/* ---------------- Fiche projet ---------------- */
/* Barre du logo : compact, en haut à gauche de la page (comme Projets / accueil). */
.projet-topbar { padding: 16px 24px 0; }
.projet-topbar__logo { display: inline-block; }
/* Largeur identique aux autres pages (accueil/projets) : 282px. */
.projet-topbar__logo img { width: 282px; max-width: 100%; height: auto; display: block;
	transition: filter .2s ease, transform .2s ease; }
.projet-topbar__logo:hover img { filter: brightness(0); transform: scale(1.03); }

.projet-single { max-width: 1040px; margin: 0 auto; padding: 14px 20px 80px; }

.projet-single__head { margin: 8px 0 26px; }
.projet-single__title { margin: 0 0 6px; font-size: clamp(26px, 4vw, 40px); color: var(--automne-encre);
	text-transform: uppercase; letter-spacing: .01em; }
.projet-single__lieu { margin: 0; color: var(--automne-corail); font-size: 15px; letter-spacing: .04em; }

.projet-single__desc { max-width: 760px; margin: 0 0 36px; color: #444; font-size: 17px; line-height: 1.7; }

.projet-galerie {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px;
}
.projet-galerie__item { display: block; overflow: hidden; border-radius: 4px; background: #f2f2f2;
	aspect-ratio: 3 / 2; }
.projet-galerie__img { width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .4s ease; cursor: zoom-in; }
.projet-galerie__item:hover .projet-galerie__img { transform: scale(1.04); }
.projet-galerie-vide { color: var(--automne-gris); font-style: italic; }

.projet-single__retour { margin-top: 44px; }
.projet-single__retour a { color: var(--automne-gris); text-decoration: none; font-size: 15px; }
.projet-single__retour a:hover { color: var(--automne-corail); }

/* ---------------- Lightbox ---------------- */
.automne-lightbox {
	position: fixed; inset: 0; z-index: 99999;
	background: rgba(20,20,20,.92);
	display: flex; align-items: center; justify-content: center;
	opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease;
}
.automne-lightbox.is-open { opacity: 1; visibility: visible; }
.automne-lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain;
	box-shadow: 0 8px 40px rgba(0,0,0,.5); }
.automne-lightbox__close {
	position: absolute; top: 18px; right: 24px; background: none; border: 0;
	color: #fff; font-size: 38px; line-height: 1; cursor: pointer; opacity: .8;
}
.automne-lightbox__close:hover { opacity: 1; }
.automne-lightbox__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	background: none; border: 0; color: #fff; font-size: 46px; cursor: pointer; opacity: .7;
	padding: 0 20px;
}
.automne-lightbox__nav:hover { opacity: 1; }
.automne-lightbox__nav--prev { left: 4px; }
.automne-lightbox__nav--next { right: 4px; }