/* ============================================================
   Floko Publications v1.1 — publications.css
   Charte Floko — tout est pilotable par variables CSS
============================================================ */

.fkp-wrap {
	--fkp-blue:        #3E73D6;
	--fkp-blue-deep:   #2E5AB0;
	--fkp-navy:        #1C3A6B;
	--fkp-sky:         #EEF4FB;
	--fkp-line:        #E4EAF3;
	--fkp-ink:         #2B3444;
	--fkp-grey:        #69738C;

	--fkp-section-bg:  #EEF4FB;
	--fkp-card-bg:     #ffffff;
	--fkp-card-radius: 14px;
	--fkp-card-shadow: 0 12px 34px rgba(28, 58, 107, .08);

	--fkp-thumb-h:     165px;
	--fkp-thumb-bg1:   #1C3A6B;
	--fkp-thumb-bg2:   #6397E7;

	--fkp-tag-bg:      #EEF4FB;
	--fkp-tag-color:   #2E5AB0;
	--fkp-titre-color: #1C3A6B;
	--fkp-texte-color: #69738C;
	--fkp-more-color:  #3E73D6;

	--fkp-filter-bg:       #ffffff;
	--fkp-filter-border:   #E4EAF3;
	--fkp-filter-color:    #1C3A6B;
	--fkp-filter-bg-on:    #3E73D6;
	--fkp-filter-color-on: #ffffff;

	--fkp-pagination-bg:       #ffffff;
	--fkp-pagination-border:   #E4EAF3;
	--fkp-pagination-color:    #1C3A6B;
	--fkp-pagination-bg-on:    #3E73D6;
	--fkp-pagination-color-on: #ffffff;

	--fkp-cols:   3;
	--fkp-cols-t: 2;
	--fkp-cols-m: 1;
	--fkp-gap:    26px;

	font-family: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;
	padding: 80px 0;
	background: var(--fkp-section-bg);
}

.fkp-container {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 28px;
}

/* ── En-tête ─────────────────────────────────────────────── */
.fkp-header { text-align: center; margin-bottom: 52px; }

.fkp-eyebrow {
	color: var(--fkp-blue);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.fkp-titre {
	font-size: 38px;
	font-weight: 800;
	color: var(--fkp-navy);
	letter-spacing: -.02em;
	line-height: 1.18;
	margin: 0 0 14px;
}

.fkp-intro {
	max-width: 680px;
	margin: 0 auto;
	color: var(--fkp-grey);
	font-size: 17px;
	line-height: 1.75;
}

/* ── Filtres ─────────────────────────────────────────────── */
.fkp-filters {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 44px;
}

.fkp-filters button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1.5px solid var(--fkp-filter-border);
	color: var(--fkp-filter-color);
	background: var(--fkp-filter-bg);
	padding: 10px 22px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	font-family: inherit;
	transition: background .22s, border-color .22s, color .22s;
}

.fkp-filters button:hover,
.fkp-filters button.on {
	background: var(--fkp-filter-bg-on);
	border-color: var(--fkp-filter-bg-on);
	color: var(--fkp-filter-color-on);
}

.fkp-filters .fkp-cnt {
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1;
	padding: 3px 7px;
	border-radius: 999px;
	background: rgba(28, 58, 107, .08);
	color: inherit;
}

.fkp-filters button.on .fkp-cnt,
.fkp-filters button:hover .fkp-cnt {
	background: rgba(255, 255, 255, .22);
}

.fkp-filters button:focus-visible,
.fkp-pagination button:focus-visible,
.fkp-card a:focus-visible {
	outline: 2px solid var(--fkp-blue);
	outline-offset: 2px;
}

/* ── Grille ──────────────────────────────────────────────── */
.fkp-grid {
	display: grid;
	grid-template-columns: repeat(var(--fkp-cols), minmax(0, 1fr));
	gap: var(--fkp-gap);
}

@media (max-width: 1024px) {
	.fkp-grid { grid-template-columns: repeat(var(--fkp-cols-t), minmax(0, 1fr)); }
}

@media (max-width: 620px) {
	.fkp-grid { grid-template-columns: repeat(var(--fkp-cols-m), minmax(0, 1fr)); }
}

/* ── Carte ───────────────────────────────────────────────── */
.fkp-card {
	background: var(--fkp-card-bg);
	border: 1px solid var(--fkp-line);
	border-radius: var(--fkp-card-radius);
	box-shadow: var(--fkp-card-shadow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform .25s, box-shadow .25s;
}

/* Masquage piloté par le JS (attribut hidden) */
.fkp-card[hidden],
.fkp-empty[hidden],
.fkp-pagination[hidden] { display: none !important; }

.fkp-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 22px 48px rgba(28, 58, 107, .13);
}

/* Vignette */
.fkp-thumb {
	height: var(--fkp-thumb-h);
	background: linear-gradient(150deg, var(--fkp-thumb-bg1) 0%, var(--fkp-thumb-bg2) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
}

.fkp-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	inset: 0;
}

.fkp-thumb-icn {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .22);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	position: relative;
	z-index: 1;
}

.fkp-thumb-icn svg { width: 26px; height: 26px; }

/* Corps de carte */
.fkp-body {
	padding: 24px 26px 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.fkp-tag {
	display: inline-block;
	background: var(--fkp-tag-bg);
	color: var(--fkp-tag-color);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 999px;
	margin-bottom: 10px;
	align-self: flex-start;
}

.fkp-card-titre {
	font-size: 17px;
	font-weight: 700;
	color: var(--fkp-titre-color);
	line-height: 1.35;
	margin: 0 0 10px;
}

.fkp-card-titre a {
	color: inherit;
	text-decoration: none;
}

.fkp-card-titre a:hover { text-decoration: underline; }

.fkp-card-texte {
	font-size: 14.5px;
	color: var(--fkp-texte-color);
	line-height: 1.65;
	margin: 0;
	flex: 1;
}

.fkp-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	font-size: 12.5px;
	color: var(--fkp-grey);
}

.fkp-meta-sep { opacity: .4; }

.fkp-more {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 16px;
	font-weight: 700;
	font-size: 14px;
	color: var(--fkp-more-color);
	text-decoration: none;
	transition: gap .2s;
	align-self: flex-start;
}

.fkp-more:hover { gap: 10px; }
.fkp-more::after { content: '→'; }

.fkp-more .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ── Aucun résultat ──────────────────────────────────────── */
.fkp-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 60px 20px;
	margin: 0;
	color: var(--fkp-grey);
	font-size: 16px;
}

/* ── Pagination ──────────────────────────────────────────── */
.fkp-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 52px;
	flex-wrap: wrap;
}

.fkp-pagination button {
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border-radius: 10px;
	border: 1.5px solid var(--fkp-pagination-border);
	background: var(--fkp-pagination-bg);
	color: var(--fkp-pagination-color);
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	font-family: inherit;
	transition: background .2s, border-color .2s, color .2s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.fkp-pagination button:hover:not(:disabled),
.fkp-pagination button.on {
	background: var(--fkp-pagination-bg-on);
	border-color: var(--fkp-pagination-bg-on);
	color: var(--fkp-pagination-color-on);
}

.fkp-pagination button:disabled {
	opacity: .35;
	cursor: not-allowed;
}

.fkp-dots {
	padding: 0 6px;
	color: var(--fkp-grey);
	font-size: 15px;
	align-self: center;
}

.fkp-pagination-info {
	text-align: center;
	margin-top: 14px;
	font-size: 13px;
	color: var(--fkp-grey);
}

/* Quand la pagination est désactivée, l'info reste centrée sous la grille */
.fkp-no-pagination .fkp-pagination-info { margin-top: 32px; }

/* ── Animation d'entrée ──────────────────────────────────── */
.fkp-card.fkp-in { animation: fkp-in .45s ease both; }

@keyframes fkp-in {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.fkp-card.fkp-in { animation: none; }
	.fkp-card:hover  { transform: none; }
}