/* Projets : archive + fiche. Tokens */
:root {
	--pf-beige-hero: #F1EAE0;
	--pf-beige-card: #F5F1EC;
	--pf-ink: #1D1D1B;
	--pf-sep: #C3D0D6;
	--pf-accent: #F4A69E;
	--pf-serif: "Cormorant Garamond", Georgia, serif;
	--pf-sans: "Inter", system-ui, sans-serif;
	--pf-max: 1280px;
	--pf-table-border: #E5E5E5;
	/* Gabarits galerie archive : paysage 3/2 (un peu moins haut que 4/3), portrait 3/4 */
	--pf-galerie-ratio-landscape: 3 / 2;
	--pf-galerie-ratio-portrait: 3 / 4;
}

/* --- Hero archive --- */
.projets-hero {
	background: #F2EDE8;
	padding: 20px 20px 0;
	color: var(--pf-ink);
	font-family: var(--pf-sans);
}

.projets-hero__inner {
	max-width: var(--pf-max);
	margin: 0 auto;
}

.projets-hero__breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	font-family: var(--pf-sans);
	font-weight: 400;
	font-size: 12px;
	color: #5C7D8F;
}

.projets-hero__home {
	color: #5C7D8F;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

.projets-hero__home:hover {
	text-decoration: underline;
}

.projets-hero__home-icon {
	display: block;
}

.projets-hero__breadcrumb-sep {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.projets-breadcrumb-sep-img {
	display: block;
	width: 6px;
	height: 10px;
	object-fit: contain;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
}

.projets-hero__current {
	color: #5C7D8F;
	font-family: var(--pf-sans);
	font-weight: 400;
	font-size: 12px;
}

.projets-hero__row {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 0 24px;
	flex-wrap: wrap;
}

.projets-hero__titre {
	margin: 0;
	font-family: "Self Modern", var(--pf-serif);
	font-size: 40px;
	font-weight: 400;
	line-height: 1;
	color: var(--pf-ink);
}

.projets-hero__separator {
	width: 1px;
	height: 80px;
	background: #5C7D8F;
	margin: 0 30px;
	flex-shrink: 0;
}

.projets-hero__description {
	font-family: var(--pf-sans);
	font-weight: 300;
	font-size: 18px;
	line-height: 150%;
	flex: 1 1 280px;
}

.projets-hero__description p {
	margin: 0 0 0.75em;
}

/* --- Toggle --- */
.projets-toggle {
	display: flex;
	gap: 20px;
	margin: 24px 0 0;
}

.projets-toggle__btn {
	appearance: none;
	border: none;
	background: #949494;
	color: #fff;
	font-family: var(--pf-sans);
	font-weight: 300;
	font-size: 14px;
	line-height: 150%;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 8px 16px;
	border-radius: 8px 8px 0 0;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.projets-toggle__btn.is-active {
	background: #fff;
	color: #1D1D1B;
}

/* --- Filtres --- */
.projets-filters {
	--pf-filters-group-pad: 14px;
	--pf-filters-side-pad: 40px;
	--pf-filters-block-gap: 28px;
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 24px;
	margin: 0 auto;
	max-width: var(--pf-max);
	padding: 14px 16px 0;
	box-sizing: border-box;
	width: 100%;
	position: relative;
}

.projets-filters__group {
	padding: 0 var(--pf-filters-group-pad);
	position: relative;
}

.projets-filters__group--typologie {
	padding-left: 0;
	padding-right: 0;
	min-width: 0;
}

.projets-filters__group--nature,
.projets-filters__group--mission {
	white-space: nowrap;
}

.projets-filters__group + .projets-filters__group::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1px;
	background: #5C7D8F;
}

/* Bureau : barre pleine largeur — Typologie étirée, Nature / Mission à droite */
@media (min-width: 1201px) {
	.projets-filters {
		display: grid;
		grid-template-columns: minmax(0, 1fr) max-content max-content;
		column-gap: var(--pf-filters-block-gap);
		row-gap: 6px;
		align-items: start;
	}

	.projets-filters__group--typologie {
		width: 100%;
		padding-right: 8px;
	}

	.projets-filters__group--typologie .projets-filters__options {
		width: 100%;
		max-width: none;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		column-gap: clamp(16px, 2.5vw, 32px);
	}

	.projets-filters__group--nature {
		padding-left: var(--pf-filters-side-pad);
		padding-right: var(--pf-filters-side-pad);
	}

	.projets-filters__group--mission {
		padding-left: var(--pf-filters-side-pad);
		padding-right: var(--pf-filters-side-pad);
		justify-self: end;
	}

	.projets-filters__reset-wrapper {
		grid-column: 1 / -1;
	}
}

.projets-filters__group-title {
	font-family: var(--pf-sans);
	font-size: 16px;
	font-weight: 400;
	text-transform: uppercase;
	margin: 0 0 10px;
	color: #1D1D1B;
}

.projets-filters__options {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* TYPOLOGIE : 5 colonnes (pleine largeur en bureau via media query) */
.projets-filters__group--typologie .projets-filters__options {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	width: 100%;
	column-gap: 20px;
	row-gap: 10px;
}

.projets-filters__group--typologie .projets-filters__options li,
.projets-filters__group--nature .projets-filters__options li,
.projets-filters__group--mission .projets-filters__options li {
	margin: 0;
}

/* NATURE & MISSION : 1 colonne */
.projets-filters__group--nature .projets-filters__options,
.projets-filters__group--mission .projets-filters__options {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.projets-filters .projets-filters__option {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-family: var(--pf-sans);
	font-weight: 300;
	font-size: 14px;
	line-height: 150%;
	color: #1D1D1B;
}

.projets-filters .projets-filters__option input[type="checkbox"]:checked + span {
	font-weight: 700;
	color: #000;
}

.projets-filters.is-collapsed .projets-filters__group {
	display: none;
}

.projets-filters .projets-filters__option input[type="checkbox"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	width: 14px !important;
	height: 16px !important;
	border: 1.5px solid #1D1D1B !important;
	background-color: #fff !important;
	background-image: none !important;
	margin: 0;
	padding: 0;
	position: relative;
	cursor: pointer;
	flex-shrink: 0;
	border-radius: 2px !important;
}

.projets-filters .projets-filters__option input[type="checkbox"]::before,
.projets-filters .projets-filters__option input[type="checkbox"]:checked::before {
	content: none !important;
	display: none !important;
}

.projets-filters .projets-filters__option input[type="checkbox"]:checked::after {
	content: "" !important;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
	background-color: #1D1D1B;
	border-radius: 1px;
}

.projets-filters .projets-filters__option input[type="checkbox"]:focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.projets-filters__reset-wrapper {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-top: 1px solid #5C7D8F;
	margin-top: 6px;
}

.projets-filters__hide,
.projets-filters__reset {
	font-family: var(--pf-sans);
	font-weight: 300;
	font-size: 14px;
	line-height: 150%;
	color: #1D1D1B;
	text-decoration: underline;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
}

/* --- Résultats / galeries --- */
.projets-results {
	position: relative;
	max-width: var(--pf-max);
	margin: 0 auto;
	padding: 0 20px 40px;
	box-sizing: border-box;
	width: 100%;
}

.projets-results__loader {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.65);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
}

.projets-results__loader[hidden] {
	display: none !important;
	pointer-events: none !important;
	visibility: hidden !important;
}

.projets-results__loader-inner {
	font-family: var(--pf-sans);
	font-size: 14px;
}

/*
 * Galerie archive : masonry 3 colonnes (JS → colonne la plus courte).
 * Gabarits fixes : paysage 4/3, portrait 3/4 (object-fit: cover dans le cadre).
 */
.projets-galerie {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 30px;
	padding: 40px 0;
	box-sizing: border-box;
}

.projets-galerie__col {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.projets-galerie > .projets-no-results {
	flex: 0 0 100%;
	width: 100%;
}

.projet-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto;
	min-height: 0;
	margin-bottom: 0;
	color: #1D1D1B;
	text-decoration: none;
}

.projet-card__image {
	position: relative;
	width: 100%;
	display: block;
	background: #e8e4df;
	overflow: hidden;
	flex: 0 0 auto;
}

/* Projet sans image à la une : fond coloré (palette type page Équipe). */
.projet-card--no-thumb .projet-card__image {
	background-color: #c3d0d6;
}

.projet-card--placeholder-coral .projet-card__image {
	background-color: #ffa09c;
}

.projet-card--placeholder-gray .projet-card__image {
	background-color: #c3d0d6;
}

.projet-card--placeholder-yellow .projet-card__image {
	background-color: #e5c43c;
}

.projet-card--placeholder-blue .projet-card__image {
	background-color: #5c7d8f;
}

.projet-card--not-cliquable {
	cursor: default;
	text-decoration: none;
}

.projet-card--not-cliquable:hover,
.projet-card--not-cliquable:focus-visible {
	color: #1d1d1b;
}

.projet-card__meta {
	flex: 0 0 auto;
	flex-shrink: 0;
	min-width: 0;
}

/* --- Overlay au survol : voile sombre + CTA « DÉCOUVRIR LE PROJET » + flèche --- */
.projet-card__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(29, 29, 27, 0);
	transition: background-color 240ms ease;
	pointer-events: none;
}

.projet-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 14px;
	color: #ffffff;
	font-family: var(--pf-sans);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 220ms ease, transform 240ms ease;
}

.projet-card__cta-label {
	display: inline-block;
	white-space: nowrap;
}

.projet-card__image .projet-card__cta-arrow {
	position: static;
	display: block;
	width: 9px !important;
	height: 15px !important;
	max-width: none !important;
	max-height: none !important;
	min-width: 9px;
	min-height: 15px;
	object-fit: contain;
	flex-shrink: 0;
	transform: none;
}

.projet-card:hover .projet-card__overlay,
.projet-card:focus-visible .projet-card__overlay {
	background: rgba(29, 29, 27, 0.45);
}

.projet-card:hover .projet-card__cta,
.projet-card:focus-visible .projet-card__cta {
	opacity: 1;
	transform: translateY(0);
}

/* Gabarits harmonisés (archive + similaires) */
.projet-card--thumb-landscape .projet-card__image {
	aspect-ratio: var(--pf-galerie-ratio-landscape);
}

.projet-card--thumb-portrait .projet-card__image {
	aspect-ratio: var(--pf-galerie-ratio-portrait);
}

/* Remplit tout l’encart (ratio gabarit conservé, recadrage sur les bords). */
.projet-card__image img:not(.projet-card__cta-arrow),
.projet-card__image .wp-post-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	max-width: none;
	max-height: none;
	display: block;
	object-fit: cover;
	object-position: center;
}

/* Paysage archive : léger zoom pour combler les marges blanches des visuels fournis. */
.projets-galerie .projet-card--thumb-landscape .projet-card__image img:not(.projet-card__cta-arrow),
.projets-galerie .projet-card--thumb-landscape .projet-card__image .wp-post-image {
	transform: scale(1.08);
	transform-origin: center center;
}

.projet-card__title {
	margin: 12px 0 10px;
	font-family: "Self Modern", var(--pf-serif);
	font-size: 16px;
	font-weight: 400;
	font-style: normal;
	line-height: normal;
	color: #1D1D1B;
}

.projet-card__location {
	margin: 0;
	font-family: "Self Modern", var(--pf-serif);
	font-style: italic;
	font-size: 12px;
	line-height: normal;
	color: #4C6859;
}

.projet-card__location em {
	font-style: italic;
}

.projets-no-results {
	font-family: var(--pf-sans);
	font-size: 15px;
	padding: 40px 20px;
	text-align: center;
}

/* --- Index --- */
.projets-index {
	--bmf-projets-index-sticky-top: calc(
		var(--bmf-main-menu-sticky-top, 0px) + var(--bmf-main-menu-bar-height, 66px) +
			var(--bmf-projets-index-preview-gap, 20px)
	);
}

.projets-index__inner {
	position: relative;
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 24px;
	padding: 40px 0;
	align-items: start;
	width: 100%;
}

.projets-index__preview {
	position: sticky;
	top: var(--bmf-projets-index-sticky-top);
	z-index: 1;
	align-self: start;
}

.projets-index__preview-frame {
	width: 100%;
	height: auto;
	min-height: 0;
	background: #e8e4df;
	overflow: hidden;
}

.projets-index__preview-frame:not(:has(.projets-index__preview-img)) {
	min-height: 120px;
}

.projets-index__preview-img {
	width: 100%;
	height: auto;
	max-width: 100%;
	object-fit: contain;
	display: block;
	vertical-align: top;
}

.projets-index__table-wrap {
	align-self: start;
	min-width: 0;
	overflow: visible;
}

.projets-index__table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--pf-sans);
	overflow: visible;
}

.projets-index__table thead th {
	position: sticky;
	top: var(--bmf-projets-index-sticky-top);
	z-index: 3;
	background-color: #fff;
	text-align: left;
	padding: 0 12px 12px;
	border-bottom: 1px solid #1d1d1b;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
	vertical-align: top;
	text-transform: none;
}

/*
 * INDEX desktop : en-tête de tableau collé sous le menu principal.
 *  - border-collapse: separate → indispensable pour que le z-index du thead
 *    sticky masque réellement les lignes du tbody (avec collapse, les bordures
 *    fusionnées laissent passer le contenu par-dessus l'en-tête).
 *  - box-shadow blanc vers le haut → couvre le petit espace (gap) entre le bas
 *    du menu et le haut de l'en-tête. Invisible au repos (fond blanc) et jamais
 *    par-dessus le menu : z-index 3 reste très en dessous du menu (z-index 100).
 */
@media (min-width: 1024px) {
	.projets-index__table {
		border-collapse: separate;
		border-spacing: 0;
	}

	.projets-index__table thead th {
		box-shadow: 0 calc(-1 * (var(--bmf-projets-index-preview-gap, 20px) + 6px)) 0 0 #fff;
	}
}

.projets-index__th-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
}

/* Labels : casse normale (pas de majuscules forcées), Inter light par défaut. */
.projets-index__th-label {
	flex: 1;
	min-width: 0;
	font-family: var(--pf-sans);
	font-size: 14px;
	font-weight: 300;
	line-height: 150%;
	color: #1d1d1b;
	text-transform: none;
}

.projets-index__table thead th.is-active .projets-index__th-label {
	font-weight: 700;
}

/* Flèches <img> : 15×9 px (grise ou rouge selon colonne active). */
.projets-index__th-chev {
	flex-shrink: 0;
	display: block;
	width: 15px;
	height: 9px;
	object-fit: contain;
}

.projets-index__table tbody td {
	font-family: var(--pf-sans);
	font-size: 14px;
	font-weight: 300;
	line-height: 150%;
	color: #1d1d1b;
	padding: 12px;
	border-bottom: 1px solid var(--pf-table-border);
	background: #fff;
	vertical-align: top;
}

/* Ligne active : bande #F5F5F5 avec marge blanche entre le fond gris et les interlignes. */
.projets-index__table tbody tr.is-active td {
	background-color: #f5f5f5;
	padding-top: 16px;
	padding-bottom: 16px;
	padding-left: 12px;
	padding-right: 12px;
	box-shadow:
		inset 0 10px 0 0 #fff,
		inset 0 -10px 0 0 #fff;
}

.projets-index__table tbody td a {
	color: #1d1d1b;
	font-weight: inherit;
}

/* --- Single hero + carte ---
   Le hero du single projet est un slider plein écran fixé en haut de page :
   - .projet-hero (placeholder) : hauteur visuelle réservée (--projet-hero-h).
   - .projet-hero__slides : fixed top:0, occupe toute la largeur, z-index:0.
   - Chaque slide cross-fade vers le suivant (transition opacity 1.4s).
   - Portrait : on remplit les bords (object-fit: contain centré) puis on
     remplit l'arrière-plan avec la même image floutée à l'extrême pour
     restituer l'ambiance colorimétrique sans en révéler les détails.
   - Toutes les sections suivantes (.projet-carte, similaires) passent par-
     dessus avec z-index plus élevé et background opaque.                 */
:root {
	--projet-hero-h: 100vh;
	--projet-hero-h: 100svh;
	--projet-hero-offset: 100px;
	/* Partie du bloc beige visible au chargement (chevauche le hero). */
	--projet-carte-overlap: 200px;
	--projet-carte-inset: clamp(20px, 4vw, 40px);
	--pf-similaires-ratio-landscape: 3 / 2; /* aligné sur la taille WP projet-similaire (600×400) */
	--pf-similaires-ratio-portrait: 4 / 5;
}

.projet-hero {
	position: relative;
	z-index: 0;
	width: 100%;
	margin-top: calc(var(--projet-hero-offset) * -1);
	height: auto;
	overflow: visible;
}

.projet-hero::before {
	content: '';
	display: block;
	height: var(--projet-hero-h);
}

.projet-hero__slides {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: var(--projet-hero-h);
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	background: #1d1d1b;
}

.projet-hero__slide {
	position: absolute;
	inset: 0;
	display: block;
	opacity: 0;
	transition: opacity 1.4s ease-in-out;
	will-change: opacity;
}

.projet-hero__slide.is-active {
	opacity: 1;
}

.projet-hero__slide img.projet-hero__img {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

/* Portrait : image centrée en `contain`, bords floutés avec la même image
   très floutée + agrandie (cover) pour absorber les vides latéraux et donner
   l'ambiance colorimétrique sans laisser apparaître le détail. */
.projet-hero__slide--portrait img.projet-hero__img {
	object-fit: contain;
}

.projet-hero__blur {
	position: absolute;
	inset: -10%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: blur(60px) saturate(115%);
	transform: scale(1.25);
	opacity: 0.85;
	z-index: 0;
	pointer-events: none;
}

/*
 * Bouton galerie : fixed comme les slides (pas absolute dans le placeholder
 * hero qui défile). Aligné sous le menu, à droite du conteneur 1280px.
 */
.projet-hero__galerie-btn {
	position: fixed;
	top: max(88px, calc(var(--projet-hero-offset) + 24px));
	right: max(20px, calc((100vw - var(--pf-max)) / 2 + 20px));
	width: 39px;
	height: 39px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	display: block;
	transition: transform 0.2s ease;
	z-index: 50;
	pointer-events: auto;
}

.projet-hero__galerie-btn:hover {
	transform: scale(1.05);
}

.projet-hero__galerie-btn:focus-visible {
	outline: 2px solid #5C7D8F;
	outline-offset: 2px;
	border-radius: 50%;
}

.projet-hero__galerie-btn img {
	width: 39px;
	height: 39px;
	display: block;
}

/*
 * Sans image hero : même spacer + slides fixed (fond blanc), chevauchement beige inchangé.
 * Le décrochage en bas est géré en CSS (pas de reposition absolute en JS).
 */
.projet-hero--no-media .projet-hero__slides--placeholder {
	background: #ffffff;
}

/* Pas de fond blanc sur l’article tant qu’on n’est pas sur la section similaires. */
article.projet-single {
	position: relative;
	background: transparent;
}

/* Liste projets : zone sous le hero sur fond blanc. */
main.projets-archive {
	background: #ffffff;
}

/*
 * Panneau beige : fond transparent — le hero reste visible sur les côtés au scroll.
 * Le blanc pleine largeur n’apparaît qu’à la section « Autres projets similaires ».
 */
.projet-single__panel {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0 var(--projet-carte-inset);
	background: transparent;
	box-sizing: border-box;
}

/* Section finale : fond blanc bord à bord (maquette). */
.projet-single__white {
	position: relative;
	z-index: 2;
	padding: 0 0 80px;
	box-sizing: border-box;
}

.projet-single__white::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	max-width: 100vw;
	margin-left: -50vw;
	background: #ffffff;
	pointer-events: none;
}

.projet-carte {
	width: 100%;
	max-width: var(--pf-max);
	margin: calc(var(--projet-carte-overlap) * -1) auto 48px;
	padding: 20px clamp(24px, 4vw, 60px) 60px;
	background: #f2ede8;
	border-radius: 20px;
	position: relative;
	z-index: 1;
	color: #1d1d1b;
	box-sizing: border-box;
	box-shadow:
		0 -2px 8px rgba(29, 29, 27, 0.03),
		0 4px 14px rgba(29, 29, 27, 0.05);
}

.projet-single__white .projets-similaires {
	position: relative;
	z-index: 1;
	max-width: var(--pf-max);
	margin: 0 auto;
	padding: 80px clamp(24px, 4vw, 60px) 0;
	background: transparent;
	box-sizing: border-box;
}

/* Hero décroché : le carrousel quitte le fixed et remonte avec la section blanche. */
article.projet-single.is-hero-unpinned .projet-hero {
	position: static;
	height: 0;
	margin-top: 0;
	overflow: visible;
}

article.projet-single.is-hero-unpinned .projet-hero::before {
	display: none;
}

article.projet-single.is-hero-unpinned .projet-hero__slides {
	z-index: 0;
}

article.projet-single.is-hero-unpinned .projet-hero__galerie-btn {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.projet-carte__topline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.projet-carte__breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 8px;
	font-family: var(--pf-sans);
	font-weight: 400;
	font-size: 12px;
	color: #5C7D8F;
	margin: 0;
}

.projet-carte__breadcrumb-home {
	color: #5C7D8F;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.projet-carte__breadcrumb-home:hover {
	text-decoration: underline;
}

.projet-carte__breadcrumb-icon {
	display: block;
}

.projet-carte__breadcrumb a {
	color: #5C7D8F;
	text-decoration: none;
}

.projet-carte__breadcrumb a:hover {
	text-decoration: underline;
}

.projet-carte__breadcrumb-sep {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.projet-carte__breadcrumb-title {
	color: #5C7D8F;
	font-weight: 400;
}

.projet-carte__retour {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--pf-sans);
	font-weight: 400;
	font-size: 12px;
	color: #5C7D8F;
	text-decoration: none;
	white-space: nowrap;
}

.projet-carte .projet-carte__retour:hover,
.projet-carte .projet-carte__retour:focus,
.projet-carte .projet-carte__retour:active,
article.projet-single .projet-carte__retour:hover,
article.projet-single .projet-carte__retour:focus,
article.projet-single .projet-carte__retour:active {
	color: #5C7D8F !important;
	text-decoration: underline;
	background-color: transparent;
}

.projet-carte__retour:focus-visible {
	outline: 2px solid #5C7D8F;
	outline-offset: 2px;
}

.projet-carte__retour-icon {
	flex-shrink: 0;
	display: block;
	width: 6px;
	height: 10px;
	object-fit: contain;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
}

.projet-carte__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 14px;
	min-height: 28px;
	border-radius: 20px;
	background: transparent;
	border: 1px solid #1d1d1b;
	font-size: 12px;
	font-family: var(--pf-sans);
	font-weight: 400;
	color: #1d1d1b;
	margin: 0 0 20px;
}

.projet-carte__pin {
	flex-shrink: 0;
	display: block;
	color: #1d1d1b;
}

.projet-carte__title {
	margin: 0 0 12px;
	font-family: "Self Modern", var(--pf-serif);
	font-size: 40px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.1;
	color: #1d1d1b;
}

.projet-carte__tags {
	font-family: "Self Modern", var(--pf-serif);
	font-style: italic;
	font-size: 14px;
	color: #1d1d1b;
	margin: 8px 0 32px;
}

.projet-carte__tags .tag {
	font-family: "Self Modern", var(--pf-serif);
	font-style: italic;
	font-size: 14px;
	color: #1d1d1b;
}

.projet-carte__tags .tag:not(:last-child)::after {
	content: " • ";
	margin: 0 4px;
	font-style: normal;
}

.projet-carte__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

.projet-carte__wysiwyg {
	font-family: var(--pf-sans);
	font-weight: 300;
	font-size: 18px;
	line-height: 150%;
	text-align: justify;
	color: #1d1d1b;
}

.projet-carte__wysiwyg p {
	margin: 0 0 1em;
}

.projet-carte__infos-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 40px;
	margin-bottom: 32px;
}

.projet-carte__info-card {
	background: #faf8f6;
	padding: 20px 16px;
	border-radius: 14px;
	text-align: center;
}

.projet-carte__info-label {
	display: block;
	font-family: "Self Modern", var(--pf-serif);
	font-size: 14px;
	font-style: italic;
	font-weight: 400;
	color: #1d1d1b;
}

.projet-carte__info-value {
	display: block;
	margin-top: 8px;
	font-family: var(--pf-sans);
	font-weight: 300;
	font-size: 24px;
	line-height: 150%;
	color: #1d1d1b;
}

.projet-carte__details-table {
	display: grid;
	gap: 16px;
	background: #faf8f6;
	border-radius: 14px;
	padding: 24px 28px;
}

/*
 * Labels (Architecte, Maître d’ouvrage, Équipe MOE, Environnement) tous
 * alignés sur la même colonne : largeur de label figée à 150 px pour que
 * les VALEURS commencent toutes au même endroit (alignement vertical à
 * gauche, conforme à la maquette).
 */
.projet-carte__detail-row {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 12px 24px;
	align-items: start;
}

.projet-carte__detail-label {
	font-family: "Self Modern", var(--pf-serif);
	font-size: 14px;
	font-style: italic;
	font-weight: 400;
	color: #1d1d1b;
}

.projet-carte__detail-value {
	font-family: var(--pf-sans);
	font-weight: 300;
	font-size: 18px;
	line-height: 150%;
	color: #1d1d1b;
	min-width: 0;
}

/*
 * Galerie projet : grille 2 colonnes en mosaïque (masonry-like).
 * - paysage  → largeur 1/2 (une colonne), hauteur 1/2 (1 rangée)
 * - portrait → largeur 1/2 (une colonne), hauteur 2/2 (2 rangées)
 *
 * L'orientation de chaque image est détectée côté serveur par
 * bmf_projet_acf_image_orientation() qui ajoute la classe
 * .projet-carte__fig--landscape ou --portrait sur chaque <figure>.
 *
 * Le `grid-auto-flow: dense` laisse le moteur de grille combler les trous
 * laissés par les portraits (qui s'étalent sur 2 rangées) avec les paysages
 * suivants pour éviter les blancs.
 */
/* Archive : apparition des cartes une par une (ordre data-projet-order, voir
   projets.js). Une card reste masquée tant qu'elle n'a pas reçu
   .is-card-visible, AUSSI en état « ready » : la révélation étant
   séquentielle (chaque card attend le chargement de son image), le body
   passe en ready dès le début de la cascade alors que la plupart des cards
   ne sont pas encore révélées — sans ce second sélecteur elles
   apparaîtraient toutes d'un coup, encarts vides. */
body.bmf-projets-archive-loading .projets-galerie .projet-card,
body.bmf-projets-archive-ready .projets-galerie .projet-card:not(.is-card-visible) {
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, 10px, 0);
}

body.bmf-projets-archive-ready .projets-galerie .projet-card.is-card-visible {
	opacity: 1;
	visibility: visible;
	transform: translate3d(0, 0, 0);
	transition:
		opacity 0.45s ease,
		transform 0.45s ease,
		visibility 0.45s ease;
}

@media (prefers-reduced-motion: reduce) {
	body.bmf-projets-archive-ready .projets-galerie .projet-card.is-card-visible {
		transition-duration: 0.12s;
		transform: none;
	}
}

.projet-carte__galerie {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-flow: dense;
	grid-auto-rows: auto;
	align-items: stretch;
	gap: 16px;
	margin-top: 40px;
}

.projet-carte__fig {
	margin: 0;
	overflow: hidden;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* Figures cliquables → ouverture lightbox (handler dans projets.js). */
.projet-carte__fig[data-projet-galerie-index] {
	cursor: pointer;
}

.projet-carte__fig[data-projet-galerie-index]:focus-visible {
	outline: 2px solid #5C7D8F !important;
	outline-offset: 2px;
	box-shadow: none !important;
}

.projet-carte__fig--landscape {
	grid-column: span 1;
	grid-row: span 1;
}

.projet-carte__fig--portrait {
	grid-column: span 1;
	grid-row: span 2;
}

.projet-carte__fig--landscape .projet-carte__gal-img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	flex: 0 0 auto;
}

/* Image portrait : aspect-ratio relâché + flex:1 pour qu'elle remplisse
   exactement la hauteur des 2 rangées (= 2 × hauteur d'un paysage + gap),
   peu importe les dimensions réelles du fichier. object-fit: cover gère
   le recadrage si l'image est trop carrée pour ce ratio cible. */
.projet-carte__fig--portrait .projet-carte__gal-img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	display: block;
	flex: 1 1 auto;
	min-height: 0;
}

/* --- Similaires (archive ; sur single le padding est géré par .projet-single__panel) --- */
.projets-similaires {
	padding: 80px 60px;
	max-width: var(--pf-max);
	margin: 0 auto;
}

.projets-similaires__title {
	text-align: center;
	margin: 0 0 40px;
	font-family: var(--pf-serif);
	font-size: 42px;
	font-weight: 400;
	line-height: 1.1;
}

.projets-similaires__title em {
	font-style: italic;
}

.projets-similaires__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.projet-card--similaire .projet-card__image {
	overflow: hidden;
	background: #e8e4df;
}

/*
 * Similaires : gabarit paysage unique (5:3) pour toutes les vignettes,
 * y compris projets dont l’image à la une est portrait (object-fit: cover).
 */
.projets-similaires__grid .projet-card--similaire .projet-card__image {
	aspect-ratio: var(--pf-similaires-ratio-landscape);
}

.projet-card--similaire .projet-card__title {
	font-family: "Self Modern", var(--pf-serif);
	font-size: 16px;
	font-weight: 400;
	font-style: normal;
	color: #1d1d1b;
}

.projet-card--similaire .projet-card__location {
	font-family: "Self Modern", var(--pf-serif);
	font-style: italic;
	font-size: 12px;
	color: #4c6859;
}

.projet-card--similaire .projet-card__location em {
	font-style: italic;
}

/* --- HAUT / DE PAGE --- */
/* Désactive le bouton scroll-top natif d’OceanWP (fallback CSS, complément du filtre PHP). */
#scroll-top {
	display: none !important;
}

.haut-de-page {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 100;
	appearance: none;
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
	text-align: center;
	line-height: 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s, visibility 0.2s;
}

.haut-de-page.visible,
.haut-de-page.is-visible {
	opacity: 1;
	visibility: visible;
}

.haut-de-page__icon {
	display: block;
	width: 30px;
	height: 30px;
	margin: 0 auto 4px;
}

.haut-de-page__label {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: var(--pf-sans);
	font-weight: 600;
	font-size: 9px;
	line-height: 1.4;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: #1D1D1B;
}

.haut-de-page__label span {
	display: block;
	line-height: 1.4;
}

/* --- Lightbox galerie projet --- */
.projet-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 80px;
	animation: projet-lightbox-fade 0.2s ease;
}

.projet-lightbox[hidden] {
	display: none;
}

@keyframes projet-lightbox-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

.projet-lightbox__stage {
	max-width: 100%;
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.projet-lightbox__img {
	max-width: 100%;
	max-height: calc(100vh - 120px);
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.projet-lightbox__close,
.projet-lightbox__nav {
	position: absolute;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, transform 0.2s ease;
}

.projet-lightbox__close:hover,
.projet-lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.22);
}

.projet-lightbox__close:focus-visible,
.projet-lightbox__nav:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.projet-lightbox__close {
	top: 20px;
	right: 20px;
}

.projet-lightbox__nav--prev {
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
}

.projet-lightbox__nav--next {
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
}

.projet-lightbox__nav--prev:hover {
	transform: translateY(-50%) scale(1.05);
}

.projet-lightbox__nav--next:hover {
	transform: translateY(-50%) scale(1.05);
}

.projet-lightbox__counter {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-family: var(--pf-sans, sans-serif);
	font-size: 13px;
	font-weight: 300;
	letter-spacing: 0.05em;
}

body.projet-lightbox-open {
	overflow: hidden;
}

/* --- Index : lignes type tableau empilées (mobile / tablette) --- */
@media (max-width: 1023px) {
	.projets-index__table thead {
		display: none;
	}

	.projets-index__table,
	.projets-index__table tbody,
	.projets-index__table tr,
	.projets-index__table td {
		display: block;
		width: 100%;
	}

	/* Trait fin uniquement ENTRE projets (pas entre les valeurs). */
	.projets-index__table tbody tr {
		border-bottom: 1px solid #1d1d1b;
		margin-bottom: var(--bmf-space-md, 20px);
	}

	/*
	 * Fond alterné : un projet sur deux est légèrement grisé, mais plus clair
	 * que le #f5f5f5 réservé au projet sélectionné (:not(.is-active) garde la
	 * priorité au gris de sélection).
	 */
	.projets-index__table tbody tr:nth-child(even):not(.is-active) td {
		background-color: #fbfbfb;
	}

	.projets-index__table tbody tr.is-active td {
		box-shadow: none;
	}

	.projets-index__table tbody td {
		display: grid;
		grid-template-columns: minmax(7.5rem, 38%) 1fr;
		gap: 8px 12px;
		align-items: start;
		padding: 10px 12px;
		border-bottom: none;
		white-space: normal;
		word-break: break-word;
	}

	.projets-index__table tbody td::before {
		content: attr(data-label);
		font-weight: 700;
		font-size: 13px;
		line-height: 1.4;
		color: #1d1d1b;
	}

	/* Nom du projet : lien vers la fiche, mis en avant (mobile INDEX). */
	.projets-index__table tbody td:first-child {
		display: block;
		padding-top: 14px;
		padding-bottom: 12px;
	}

	/* Pas de libellé « Nom du projet » : le titre seul (plus gros) suffit. */
	.projets-index__table tbody td:first-child::before {
		display: none;
	}

	.projets-index__table tbody td:first-child .projets-index__project-link {
		display: inline-flex;
		align-items: baseline;
		gap: 6px;
		font-size: 17px;
		font-weight: 600;
		line-height: 1.35;
		color: #1d1d1b;
		text-decoration: underline;
		text-underline-offset: 3px;
		text-decoration-thickness: 1px;
	}

	.projets-index__table tbody td:first-child .projets-index__project-link::after {
		content: "›";
		font-size: 1.2em;
		font-weight: 400;
		text-decoration: none;
		line-height: 1;
		flex-shrink: 0;
	}

	.projets-index__table tbody td:first-child .projets-index__project-link:hover,
	.projets-index__table tbody td:first-child .projets-index__project-link:focus-visible {
		text-decoration-thickness: 2px;
	}
}

/* --- Responsive --- */
@media (max-width: 767px) {
	body.single-projet {
		--projet-hero-offset: 0px;
	}

	.projet-hero__galerie-btn {
		top: 72px;
		right: 20px;
	}

	main.projets-archive .projets-hero__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	main.projets-archive .projets-hero__description {
		flex: 0 1 auto;
		width: 100%;
		font-size: 16px;
	}

	main.projets-archive .projets-toggle {
		display: flex;
		width: 100%;
		gap: 12px;
		margin-top: 14px;
	}

	main.projets-archive .projets-toggle__btn {
		flex: 1 1 0;
		min-width: 0;
	}
}

@media (max-width: 1023px) {
	/* Archive : onglets collés au bas du bandeau beige (pas de vide sous GALERIE / INDEX). */
	main.projets-archive .projets-hero {
		padding-bottom: 0;
		min-height: 0;
	}

	main.projets-archive .projets-hero__inner {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	main.projets-archive .projets-hero__row {
		flex: 0 0 auto;
	}

	main.projets-archive .projets-toggle {
		flex: 0 0 auto;
		margin-top: 16px;
		margin-bottom: 0;
	}

	main.projets-archive .projets-filters {
		padding-top: 18px;
		margin-top: 0;
	}

	/*
	 * Single projet (≤1023px) : slider fixed plein écran (top:0, 100svh).
	 * Ne pas passer en absolute (le hero démarre sous le menu → bande vide en bas).
	 * Bureau (>1023px) : inchangé (offset + fixed existants).
	 */
	body.single-projet {
		--projet-hero-offset: 0px;
		--projet-hero-h: 100dvh;
		--projet-hero-h: 100svh;
		/* Hero plein écran : remonter le beige pour voir le haut du conteneur au chargement. */
		--projet-carte-overlap: clamp(240px, 38svh, 360px);
		--projet-carte-inset: clamp(16px, 3.5vw, 28px);
	}

	body.single-projet .projet-hero {
		overflow: hidden;
	}

	body.single-projet .projet-hero::before {
		height: 100dvh;
		height: 100svh;
	}

	body.single-projet .projet-hero__slides {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100dvh;
		height: 100svh;
	}

	body.single-projet .projet-hero__slide {
		overflow: hidden;
	}

	body.single-projet .projet-hero__slide img.projet-hero__img {
		position: absolute;
		inset: 0;
		min-height: 100%;
	}

	body.single-projet .projet-hero__slide--landscape img.projet-hero__img {
		object-fit: cover;
		object-position: center;
	}

	body.single-projet .projet-hero__slide--portrait img.projet-hero__img {
		object-fit: contain;
		min-height: 0;
	}

	.projets-hero__titre {
		font-size: 32px;
	}

	.projets-hero__separator {
		display: none;
	}

	.projets-index__inner {
		grid-template-columns: 1fr;
	}

	/* Vue index : pas d’aperçu photo sur mobile (tableau seul). */
	.projets-index__preview {
		display: none;
	}

	.projets-similaires__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.projet-carte__grid {
		grid-template-columns: 1fr;
	}

	/*
	 * Fiche projet (mobile) : empiler le libellé puis la valeur sur toute la
	 * largeur. Sinon la grille « 150px | 1fr » laisse une colonne valeur trop
	 * étroite et les mots se coupent au milieu (illisible).
	 */
	.projet-carte__detail-row {
		grid-template-columns: 1fr;
		gap: 4px 0;
	}

	.projet-carte__detail-label {
		text-align: center;
	}

	.projet-carte__detail-value {
		word-break: normal;
		overflow-wrap: break-word;
		hyphens: none;
		text-align: center;
	}
}

@media (max-width: 1200px) {
	.projets-filters {
		display: grid;
		grid-template-columns: 1fr;
		row-gap: 24px;
	}
}

@media (max-width: 900px) {
	.projets-filters {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 24px 24px 20px;
	}

	.projets-filters__group {
		padding: 0;
	}

	.projets-filters__group--typologie {
		width: 100%;
		max-width: none;
	}

	.projets-filters__group--nature,
	.projets-filters__group--mission {
		margin-left: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.projets-filters__group + .projets-filters__group {
		border-top: 1px solid #5C7D8F;
		padding-top: 20px;
	}

	.projets-filters__group + .projets-filters__group::before {
		display: none;
	}

	.projets-filters__group--typologie .projets-filters__options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 14px;
	}

	.projets-filters__group--nature,
	.projets-filters__group--mission {
		white-space: normal;
	}
}

/* Tablette large : 3 colonnes typologie si la barre reste sur une ligne */
@media (min-width: 901px) and (max-width: 1200px) {
	.projets-filters__group--typologie .projets-filters__options {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	main.projets-archive .projets-hero {
		padding: 20px 16px 0;
	}

	.bmf-contact-hero.projets-hero,
	.bmf-page-legale-hero.projets-hero {
		padding: 20px 16px;
	}

	.projets-hero__titre {
		font-size: 28px;
	}

	.projets-filters,
	.projets-results {
		padding-left: 16px;
		padding-right: 16px;
	}

	.projet-carte,
	.projet-single__white .projets-similaires {
		padding-left: 20px;
		padding-right: 20px;
	}

	.projets-index__inner {
		padding-top: 40px;
		padding-bottom: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.projets-galerie {
		flex-direction: column;
		gap: 24px;
	}

	.projets-galerie__col {
		gap: 24px;
	}

	/* Mobile : galerie sur 1 colonne, plus de masonry — chaque figure
	   occupe une rangée à part et le portrait reprend son aspect-ratio
	   naturel (3/4) pour ne pas être démesurément haut. */
	.projet-carte__galerie {
		grid-template-columns: 1fr;
	}

	.projet-carte__fig--landscape,
	.projet-carte__fig--portrait {
		grid-column: span 1;
		grid-row: span 1;
	}

	.projet-carte__fig--portrait .projet-carte__gal-img {
		aspect-ratio: 3 / 4;
		flex: 0 0 auto;
		height: auto;
	}

	.projets-filters {
		grid-template-columns: 1fr;
	}

	.projets-similaires__grid {
		grid-template-columns: 1fr;
	}

	body.single-projet {
		--projet-carte-overlap: clamp(240px, 40svh, 340px);
		--projet-carte-inset: 16px;
	}

	.projet-single__panel {
		padding: 0 16px 64px;
	}

	.projet-carte {
		width: 100%;
		max-width: var(--pf-max);
		padding: 20px 20px 40px;
	}

	.projet-single__white {
		padding-left: var(--projet-carte-inset);
		padding-right: var(--projet-carte-inset);
		box-sizing: border-box;
	}

	.projet-single__white .projets-similaires {
		padding: 48px 0 0;
	}

	body.single-projet .projets-similaires__grid .projet-card--similaire .projet-card__image {
		aspect-ratio: 16 / 10;
	}

	.projet-carte__infos-grid {
		grid-template-columns: 1fr;
	}

	.projet-lightbox {
		padding: 56px 8px 64px;
	}

	.projet-lightbox__close,
	.projet-lightbox__nav {
		width: 38px;
		height: 38px;
	}

	.projet-lightbox__close {
		top: 12px;
		right: 12px;
	}

	.projet-lightbox__nav--prev {
		left: 8px;
	}

	.projet-lightbox__nav--next {
		right: 8px;
	}
}