/*
 * Publications Facebook – Pignans.
 * Reprend les variables du thème Pignans 2026 quand elles existent (--maures, --violet-tint, --r…),
 * sinon des valeurs neutres. Pour ajuster sur un autre thème : surcharger les variables --pfb-*.
 */
.pfb {
	--pfb-accent: var(--maures-deep, var(--maures, #1f4e79));
	--pfb-text: inherit;
	--pfb-muted: #5a5f66;
	--pfb-bg: var(--pfb-card-bg, #fff);
	--pfb-tint: var(--violet-tint, #f2f3f5);
	--pfb-border: rgba(0, 0, 0, .12);
	--pfb-radius: var(--r, 8px);
	--pfb-gap: 1rem;
	--pfb-lines: 5;
	color: var(--pfb-text);
}

.pfb *,
.pfb *::before,
.pfb *::after { box-sizing: border-box; }

.pfb__title { margin: 0 0 .75rem; }

.pfb__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--pfb-gap);
}

.pfb--cartes .pfb__list {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	align-items: start;
}

.pfb__item { margin: 0; padding: 0; }
.pfb__item::before { content: none; } /* Thèmes qui ajoutent des puces décoratives. */

.pfb__post {
	background: var(--pfb-bg);
	border: 1px solid var(--pfb-border);
	border-radius: var(--pfb-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.pfb__post > :not(.pfb__media) { margin-left: 1rem; margin-right: 1rem; }
.pfb__post > :last-child { margin-bottom: 1rem; }

/* Image : jamais recadrée (les affiches portent souvent du texte). */
.pfb__media {
	position: relative;
	margin: 0;
	background: var(--pfb-tint);
	display: flex;
	justify-content: center;
}
.pfb__media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 22rem;
	object-fit: contain;
}
.pfb--cartes .pfb__media img { max-height: 16rem; }

.pfb__badge {
	display: inline-block;
	font-size: .8125rem;
	line-height: 1.3;
	padding: .15em .55em;
	border-radius: var(--pfb-radius);
	background: var(--pfb-tint);
	color: var(--pfb-accent);
	font-weight: 600;
	vertical-align: baseline;
}
.pfb__badge--media {
	position: absolute;
	left: .5rem;
	bottom: .5rem;
	background: rgba(0, 0, 0, .75);
	color: #fff;
}

.pfb__meta {
	margin-top: .75rem;
	margin-bottom: .25rem;
	font-size: .875rem;
	color: var(--pfb-muted);
}

.pfb__text {
	overflow-wrap: anywhere;
	line-height: 1.5;
}
.pfb__text p { margin: 0 0 .5em; }
.pfb__text p:last-child { margin-bottom: 0; }
.pfb__text a { color: var(--pfb-accent); }

/* Texte replié, seulement quand le script est actif (sinon tout est lisible). */
.pfb--js .pfb__text:not(.is-open) {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--pfb-lines);
	line-clamp: var(--pfb-lines);
	overflow: hidden;
}
.pfb--js .pfb__text:not(.is-open) p { display: inline; }
.pfb--js .pfb__text:not(.is-open) p + p::before { content: " "; white-space: pre; }
.pfb--cartes { --pfb-lines: 6; }

.pfb__more {
	align-self: flex-start;
	margin-top: .25rem;
	padding: .35rem 0;
	min-height: 2.75rem;
	background: none;
	border: 0;
	color: var(--pfb-accent);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: .15em;
	cursor: pointer;
}
.pfb__more[hidden] { display: none; }

.pfb__share {
	margin-top: .75rem;
	padding: .6rem .75rem;
	border-left: 3px solid var(--pfb-accent);
	background: var(--pfb-tint);
	border-radius: 0 var(--pfb-radius) var(--pfb-radius) 0;
	font-size: .9375rem;
}
.pfb__share p { margin: 0; }
.pfb__share-title { font-weight: 600; }
.pfb__share-desc { margin-top: .25rem !important; color: var(--pfb-muted); }

.pfb__actions { margin-top: .5rem; margin-bottom: 0; }
.pfb__fb,
.pfb__follow-link {
	color: var(--pfb-accent);
	font-weight: 600;
	text-underline-offset: .15em;
	display: inline-block;
	padding: .35rem 0;
}

.pfb__follow { margin: var(--pfb-gap) 0 0; }
.pfb__empty { margin: 0; color: var(--pfb-muted); }

.pfb a:focus-visible,
.pfb__more:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.pfb-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Liste étroite (colonne latérale) : texte un peu plus petit. */
.pfb--liste .pfb__text { font-size: .9375rem; }

/* ----- En-tête : carte de la Page ----- */
.pfb__head {
	display: flex;
	gap: .75rem;
	align-items: flex-start;
	margin: 0 0 var(--pfb-gap);
	padding: .75rem;
	background: var(--pfb-tint);
	border-radius: var(--pfb-radius);
}
.pfb__head-photo {
	flex: none;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	object-fit: cover;
	background: var(--pfb-bg);
	border: 1px solid var(--pfb-border);
}
.pfb__head-txt { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.pfb__head-txt p { margin: 0; }
.pfb__head-name { font-weight: 700; line-height: 1.3; }
.pfb__head-name a { color: inherit; text-decoration: none; }
.pfb__head-name a:hover,
.pfb__head-name a:focus-visible { text-decoration: underline; text-underline-offset: .15em; }
.pfb__head-facts { font-size: .875rem; color: var(--pfb-muted); }
.pfb__head-about { font-size: .875rem; line-height: 1.45; overflow-wrap: anywhere; }
.pfb__head-coord {
	list-style: none;
	margin: .2rem 0 0;
	padding: 0;
	font-size: .875rem;
	display: flex;
	flex-wrap: wrap;
	gap: .1rem .9rem;
}
.pfb__head-coord li { margin: 0; padding: 0; overflow-wrap: anywhere; }
.pfb__head-coord li::before { content: none; }
.pfb__head-coord a { color: var(--pfb-accent); }

/* ----- Liste dépliable et fil chronologique ----- */
.pfb__folds {
	list-style: none;
	margin: 0;
	padding: 0;
}
.pfb__fold-item { margin: 0; padding: 0; }
.pfb__fold-item::before { content: none; }

.pfb--depliable .pfb__folds {
	background: var(--pfb-bg);
	border: 1px solid var(--pfb-border);
	border-radius: var(--pfb-radius);
	overflow: hidden;
}
.pfb--depliable .pfb__fold-item + .pfb__fold-item { border-top: 1px solid var(--pfb-border); }

.pfb__sum {
	list-style: none;
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .65rem .75rem;
	min-height: var(--tap, 48px);
	cursor: pointer;
}
.pfb__sum::-webkit-details-marker { display: none; }
.pfb__sum::marker { content: ""; }
.pfb__sum:hover .pfb__sum-title { text-decoration: underline; text-underline-offset: .15em; }
.pfb__sum:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }

.pfb__thumb {
	flex: none;
	width: 3rem;
	height: 3rem;
	object-fit: cover;
	border-radius: calc(var(--pfb-radius) * .75);
	background: var(--pfb-tint);
	display: block;
}
.pfb__sum-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.pfb__sum-meta { font-size: .8125rem; color: var(--pfb-muted); line-height: 1.3; }
.pfb__sum-meta .pfb__badge { font-size: .75rem; padding: .05em .45em; }
.pfb__sum-title {
	font-weight: 600;
	line-height: 1.35;
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.pfb__fold[open] .pfb__sum-title { display: block; -webkit-line-clamp: none; }
.pfb__chev { flex: none; color: var(--pfb-muted); transition: transform .15s; }
.pfb__fold[open] .pfb__chev { transform: rotate(180deg); }

.pfb__body { padding: 0 .75rem .9rem; }
.pfb--depliable .pfb__body { padding-left: calc(.75rem + 3rem + .75rem); }
.pfb--depliable.pfb--noimg .pfb__body { padding-left: .75rem; }
.pfb__body .pfb__media { border-radius: calc(var(--pfb-radius) * .75); overflow: hidden; margin-bottom: .6rem; }
.pfb__body .pfb__media img { max-height: 18rem; }
.pfb__text--full { font-size: .9375rem; }

/* Fil : trait vertical, une pastille par publication. */
.pfb--fil .pfb__folds { position: relative; margin-left: .45rem; border-left: 2px solid var(--pfb-border); }
.pfb--fil .pfb__sum { padding-left: 1rem; position: relative; }
.pfb--fil .pfb__body { padding-left: 1rem; }
.pfb__dot {
	position: absolute;
	left: -.45rem;
	top: 1.05rem;
	width: .8rem;
	height: .8rem;
	border-radius: 50%;
	background: var(--pfb-bg);
	border: 2px solid var(--pfb-accent);
}
.pfb--fil .pfb__fold-item:first-child .pfb__dot { background: var(--pfb-accent); }
.pfb--fil .pfb__sum-txt {
	display: grid;
	grid-template-columns: 9.5rem minmax(0, 1fr);
	column-gap: .75rem;
	align-items: baseline;
}
.pfb--fil .pfb__sum-meta { font-weight: 600; color: var(--pfb-accent); }
@media (max-width: 600px) {
	.pfb--fil .pfb__sum-txt { grid-template-columns: minmax(0, 1fr); }
}
.pfb__thumb--none {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pfb-accent);
}

/* ----- Bandeau défilant et mosaïque ----- */
.pfb__tiles-wrap { position: relative; display: flex; align-items: center; gap: .5rem; }
.pfb__tiles { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; }
.pfb__tile-item { margin: 0; padding: 0; }
.pfb__tile-item::before { content: none; }

.pfb__tile {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
	background: var(--pfb-bg);
	border: 1px solid var(--pfb-border);
	border-radius: var(--pfb-radius);
	overflow: hidden;
}
.pfb__tile:hover .pfb__tile-title { text-decoration: underline; text-underline-offset: .15em; }
.pfb__tile:focus-visible { outline: 2px solid var(--pfb-accent); outline-offset: 2px; }
.pfb__tile.is-current { border-color: var(--pfb-accent); box-shadow: inset 0 0 0 1px var(--pfb-accent); }
.pfb__tile-media { position: relative; display: block; overflow: hidden; background: var(--pfb-tint); }
.pfb__tile-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.pfb__tile-txt { display: flex; flex-direction: column; gap: .25rem; padding: .6rem .7rem .75rem; }
.pfb__tile-title {
	font-weight: 600;
	font-size: .9375rem;
	line-height: 1.35;
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

/* Bandeau : défilement horizontal natif (doigt, molette, clavier), aimanté. */
.pfb--bandeau .pfb__tiles {
	display: flex;
	gap: .75rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	padding: 2px 2px .5rem;
}
.pfb--bandeau .pfb__tile-item { flex: 0 0 min(15rem, 78%); scroll-snap-align: start; display: flex; }
.pfb--bandeau .pfb__tile { width: 100%; }
.pfb--bandeau .pfb__tile-media { aspect-ratio: 4 / 3; }
.pfb--bandeau .pfb__tile--text { background: var(--pfb-tint); }
.pfb--bandeau .pfb__tile--text .pfb__tile-txt { padding-top: 1rem; }
.pfb--bandeau .pfb__tile--text .pfb__tile-title { -webkit-line-clamp: 6; }
@media (prefers-reduced-motion: reduce) { .pfb--bandeau .pfb__tiles { scroll-behavior: auto; } }

.pfb__nav {
	flex: none;
	width: var(--tap, 48px);
	height: var(--tap, 48px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--pfb-border);
	background: var(--pfb-bg);
	color: var(--pfb-accent);
	cursor: pointer;
}
.pfb__nav[hidden] { display: none; }
.pfb__nav:disabled { opacity: .35; cursor: default; }
.pfb__nav:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 600px) { .pfb__nav { display: none !important; } }

/* Mosaïque : vignettes carrées ; une publication sans photo devient une vignette de texte. */
.pfb--mosaique .pfb__tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.5rem), 1fr));
	gap: .5rem;
}
.pfb--mosaique .pfb__tile { aspect-ratio: 1; position: relative; }
.pfb--mosaique .pfb__tile-media { height: 100%; }
.pfb--mosaique .pfb__tile--text { background: var(--pfb-tint); justify-content: flex-end; }
.pfb--mosaique .pfb__tile--text .pfb__tile-title { -webkit-line-clamp: 4; font-size: .875rem; }
.pfb--mosaique .pfb__tile--text .pfb__tile-txt { padding: .5rem .6rem; }
.pfb--mosaique .pfb__badge--media { left: .35rem; bottom: .35rem; font-size: .75rem; }

/* Panneau de lecture sous les vignettes. */
.pfb__panels { margin-top: .75rem; display: grid; gap: var(--pfb-gap); }
.pfb__panel:focus { outline: none; }
.pfb__panel:focus-visible > .pfb__post { outline: 2px solid var(--pfb-accent); outline-offset: 2px; }
.pfb--js .pfb__panel[hidden] { display: none; }

@media (forced-colors: active) {
	.pfb__badge--media { border: 1px solid CanvasText; }
	.pfb__tile.is-current { outline: 2px solid Highlight; }
}