/* ===== Grille d'actus FAAN ===== */
.afg {
	/* Charte FAAN */
	--afg-blue: #024550;
	--afg-green: #30AE7B;
	--afg-lime: #A1C621;
	--afg-cream: #EFECE8;
	--afg-card: #fff;
	--afg-muted: #4a6a70;

	--afg-cols: 3;
	--afg-gap: 24px;
	--afg-row: 260px;
	--afg-ratio: 16 / 10;
	--afg-radius: 16px;
	--afg-ease: cubic-bezier(.2, .7, .2, 1);
	position: relative;
	color: var(--afg-blue);
}
.afg *, .afg *::before, .afg *::after { box-sizing: border-box; }

/* ----- Filtres ----- */
.afg-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 36px;
}
.afg .afg-filter {
	position: relative;
	min-height: 0;
	margin: 0;
	padding: 10px 20px;
	border: 1.5px solid rgba(2, 69, 80, .15);
	border-radius: 999px;
	background: transparent;
	color: var(--afg-blue);
	font: inherit;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.2;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .25s, color .25s, border-color .25s, transform .2s var(--afg-ease);
}
.afg .afg-filter:hover { border-color: var(--afg-green); transform: translateY(-2px); background: transparent; color: var(--afg-blue); }
.afg .afg-filter[aria-pressed="true"] {
	border-color: var(--afg-blue);
	background: var(--afg-blue);
	color: #fff;
	box-shadow: 0 8px 20px -10px var(--afg-blue);
}
.afg .afg-filter:focus-visible { outline: 2px solid var(--afg-green); outline-offset: 3px; }

/* ----- Grille ----- */
.afg-grid {
	display: grid;
	grid-template-columns: repeat(var(--afg-cols), minmax(0, 1fr));
	gap: var(--afg-gap);
}
.afg--bento .afg-grid {
	grid-auto-rows: var(--afg-row);
	grid-auto-flow: dense;
}
.afg--bento .afg-size-big { grid-column: span 2; grid-row: span 2; }
.afg--bento .afg-size-wide { grid-column: span 2; }
.afg--bento .afg-size-tall { grid-row: span 2; }
.afg-size-featured { grid-column: 1 / -1; }

/* ----- Carte ----- */
.afg-card { position: relative; min-width: 0; }
.afg-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--afg-radius);
	background: var(--afg-card);
	box-shadow: 0 1px 2px rgba(2, 69, 80, .06), 0 10px 30px -16px rgba(2, 69, 80, .25);
	transform: perspective(1000px) rotateX(var(--afg-rx, 0deg)) rotateY(var(--afg-ry, 0deg)) translateY(var(--afg-lift, 0px));
	transition: transform .5s var(--afg-ease), box-shadow .4s ease;
	isolation: isolate;
}
.afg-inner:hover {
	--afg-lift: -6px;
	box-shadow: 0 2px 4px rgba(2, 69, 80, .06), 0 24px 48px -20px rgba(2, 69, 80, .4);
}
.afg-inner.is-tilting { transition: transform .12s ease-out, box-shadow .4s ease; }
.afg-inner:focus-within { outline: 3px solid var(--afg-green); outline-offset: 3px; }

.afg-media {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--afg-ratio);
	background: var(--afg-cream);
	flex: 0 0 auto;
}
.afg-media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .9s var(--afg-ease);
	-webkit-user-drag: none;
}
.afg--zoom .afg-inner:hover .afg-media img { transform: scale(1.08); }
.afg-noimg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 30%, rgba(161, 198, 33, .45), transparent 55%),
		radial-gradient(circle at 80% 70%, rgba(48, 174, 123, .5), transparent 55%),
		var(--afg-blue);
}

/* Badges sur l'image */
.afg-badges {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.afg-badge {
	padding: 4px 10px;
	border-radius: 999px;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.5;
	text-transform: uppercase;
}
.afg-badge--new { background: var(--afg-green); color: #fff; }
.afg-badge--new::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 6px;
	border-radius: 50%;
	background: currentColor;
	vertical-align: 1px;
	animation: afg-pulse 1.6s ease-in-out infinite;
}
@keyframes afg-pulse { 50% { opacity: .3; } }
.afg-badge--une { background: var(--afg-lime); color: var(--afg-blue); }

.afg-datebox {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 52px;
	padding: 8px 6px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .95);
	color: var(--afg-blue);
	line-height: 1;
	text-align: center;
	box-shadow: 0 6px 16px -6px rgba(2, 69, 80, .35);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.afg-datebox-day { font-size: 1.375rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.afg-datebox-month {
	margin-top: 3px;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--afg-green);
}

/* Texte */
.afg-body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
	padding: 22px 24px 26px;
}
.afg-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	font-size: .8125rem;
	color: var(--afg-muted);
}
.afg-cat {
	position: relative;
	z-index: 4;
	padding: 4px 11px;
	border-radius: 999px;
	background: rgba(48, 174, 123, .12);
	color: var(--afg-blue);
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s, color .2s;
}
.afg-cat:hover { background: var(--afg-green); color: #fff; }
.afg-reading { display: inline-flex; align-items: center; gap: 5px; }
.afg-reading svg { width: 14px; height: 14px; }

.afg-title {
	margin: 0;
	color: var(--afg-blue);
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.3;
}
.afg-title a { color: inherit; text-decoration: none; }
.afg-title a:focus-visible { outline: none; }
.afg-title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.afg--underline .afg-title a {
	background-image: linear-gradient(90deg, var(--afg-green), var(--afg-lime));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 3px;
	transition: background-size .5s var(--afg-ease);
}
.afg--underline .afg-inner:hover .afg-title a { background-size: 100% 3px; }

.afg-excerpt {
	margin: 0;
	color: var(--afg-muted);
	font-size: .9375rem;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.afg-readmore {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 6px;
	color: var(--afg-green);
	font-size: .9375rem;
	font-weight: 700;
}
.afg-readmore svg { width: 18px; height: 18px; transition: transform .35s var(--afg-ease); }
.afg-inner:hover .afg-readmore svg { transform: translateX(6px); }

/* Reflet lumineux */
.afg--glare .afg-inner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	background: radial-gradient(circle at var(--afg-mx, 50%) var(--afg-my, 0%), rgba(255, 255, 255, .28), transparent 50%);
	opacity: 0;
	transition: opacity .35s ease;
}
.afg--glare .afg-inner:hover::before { opacity: 1; }

/* ----- Bento : texte sur l'image ----- */
.afg--bento .afg-inner { justify-content: flex-end; background: var(--afg-blue); color: #fff; }
.afg--bento .afg-media { position: absolute; inset: 0; aspect-ratio: auto; }
.afg--bento .afg-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(2, 69, 80, .95) 0%, rgba(2, 69, 80, .55) 40%, rgba(2, 69, 80, 0) 75%);
	transition: opacity .4s ease;
}
.afg--bento .afg-body { flex: 0 0 auto; z-index: 1; }
.afg--bento .afg-title { color: #fff; }
.afg--bento .afg-meta { color: rgba(255, 255, 255, .85); }
.afg--bento .afg-cat { background: var(--afg-lime); color: var(--afg-blue); }
.afg--bento .afg-cat:hover { background: #fff; }
.afg--bento .afg-excerpt { color: rgba(255, 255, 255, .85); -webkit-line-clamp: 2; }
.afg--bento .afg-readmore { color: var(--afg-lime); margin-top: 2px; }
.afg--bento .afg-size-big .afg-title { font-size: clamp(1.5rem, 2.4vw, 2.125rem); line-height: 1.15; }
.afg--bento .afg-size-big .afg-excerpt { -webkit-line-clamp: 3; font-size: 1rem; }
.afg--bento .afg-size-big .afg-body { padding: 32px 34px 34px; }
.afg--bento .afg-size-wide .afg-title,
.afg--bento .afg-size-tall .afg-title { font-size: 1.375rem; }

/* Extrait révélé au survol (sauf grande carte) */
.afg--excerpt-hover .afg-card:not(.afg-size-big) .afg-excerpt,
.afg--excerpt-hover .afg-card:not(.afg-size-big) .afg-readmore {
	max-height: 0;
	opacity: 0;
	margin-top: -10px;
	transition: max-height .5s var(--afg-ease), opacity .35s ease, margin .5s var(--afg-ease);
}
.afg--excerpt-hover .afg-card:not(.afg-size-big) .afg-inner:hover .afg-excerpt,
.afg--excerpt-hover .afg-card:not(.afg-size-big) .afg-inner:focus-within .afg-excerpt,
.afg--excerpt-hover .afg-card:not(.afg-size-big) .afg-inner:hover .afg-readmore,
.afg--excerpt-hover .afg-card:not(.afg-size-big) .afg-inner:focus-within .afg-readmore {
	max-height: 5em;
	opacity: 1;
	margin-top: 0;
}
@media (hover: none) {
	.afg--excerpt-hover .afg-card .afg-excerpt,
	.afg--excerpt-hover .afg-card .afg-readmore { max-height: none !important; opacity: 1 !important; margin-top: 0 !important; }
}

/* ----- Magazine : carte « À la une » ----- */
.afg-size-featured .afg-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	background: var(--afg-cream);
}
.afg-size-featured .afg-media { aspect-ratio: auto; min-height: 400px; }
.afg-size-featured .afg-body { justify-content: center; gap: 14px; padding: clamp(28px, 4vw, 56px); }
.afg-size-featured .afg-title { font-size: clamp(1.625rem, 2.6vw, 2.375rem); line-height: 1.15; }
.afg-size-featured .afg-excerpt { -webkit-line-clamp: 4; font-size: 1.0625rem; }
.afg-size-featured .afg-readmore {
	margin-top: 10px;
	align-self: flex-start;
	padding: 12px 22px;
	border-radius: 999px;
	background: var(--afg-blue);
	color: #fff;
	transition: background-color .25s, color .25s;
}
.afg-size-featured .afg-inner:hover .afg-readmore { background: var(--afg-lime); color: var(--afg-blue); }

/* ----- Apparition au défilement ----- */
.afg--js:not(.afg--reveal-none) .afg-card:not(.is-in) { opacity: 0; }
.afg--js.afg--reveal-fadeup .afg-card:not(.is-in) { transform: translateY(50px); }
.afg--js.afg--reveal-zoom .afg-card:not(.is-in) { transform: scale(.85); }
.afg--js.afg--reveal-flip .afg-card:not(.is-in) { transform: perspective(900px) rotateX(-30deg) translateY(40px); transform-origin: 50% 100%; }
.afg--js.afg--reveal-blur .afg-card:not(.is-in) { filter: blur(16px); transform: scale(1.04); }
.afg-card.is-in {
	opacity: 1;
	transform: none;
	filter: none;
	transition: opacity .7s ease, transform .9s var(--afg-ease), filter .8s ease;
	transition-delay: var(--afg-d, 0ms);
}
.afg-card.is-out {
	opacity: 0 !important;
	transform: scale(.94) !important;
	transition: opacity .25s ease, transform .25s ease !important;
	transition-delay: 0ms !important;
}

/* Squelettes de chargement */
.afg-skel .afg-inner {
	min-height: 320px;
	background: linear-gradient(100deg, var(--afg-cream) 30%, #f8f6f3 50%, var(--afg-cream) 70%);
	background-size: 250% 100%;
	box-shadow: none;
	animation: afg-shimmer 1.3s linear infinite;
}
.afg--bento .afg-skel .afg-inner { min-height: 0; }
@keyframes afg-shimmer { to { background-position: -150% 0; } }

/* ----- Bas de grille ----- */
.afg-foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-top: 44px;
}
.afg .afg-more {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 0;
	margin: 0;
	padding: 16px 32px;
	border: 0;
	border-radius: 999px;
	background: var(--afg-blue);
	color: #fff;
	font: inherit;
	font-weight: 700;
	box-shadow: 0 10px 24px -12px var(--afg-blue);
	cursor: pointer;
	transition: background-color .25s, color .25s, transform .2s var(--afg-ease), box-shadow .25s;
}
.afg .afg-more:hover { background: var(--afg-lime); color: var(--afg-blue); transform: translateY(-2px); }
.afg .afg-more:focus-visible { outline: 2px solid var(--afg-green); outline-offset: 3px; }
.afg-more-icon { width: 18px; height: 18px; transition: transform .3s var(--afg-ease); }
.afg-more:hover .afg-more-icon { transform: translateY(3px); }
.afg-spinner {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2.5px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	opacity: 0;
}
.afg-more.is-loading { pointer-events: none; }
.afg-more.is-loading .afg-more-text,
.afg-more.is-loading .afg-more-icon { opacity: 0; }
.afg-more.is-loading .afg-spinner { opacity: 1; animation: afg-spin .7s linear infinite; }
@keyframes afg-spin { to { transform: rotate(360deg); } }
.afg-sentinel { width: 100%; height: 1px; }
.afg-end {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--afg-cream);
	color: var(--afg-blue);
	font-weight: 600;
	font-size: .9375rem;
}
.afg-end svg { width: 18px; height: 18px; color: var(--afg-green); }
.afg-end[hidden], .afg-more[hidden] { display: none; }
.afg-empty { grid-column: 1 / -1; margin: 0; padding: 48px 16px; text-align: center; color: var(--afg-muted); }
.afg-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ----- Tablette / mobile ----- */
@media (max-width: 1024px) {
	.afg { --afg-cols: 2; }
	.afg-size-featured .afg-inner { grid-template-columns: 1fr; }
	.afg-size-featured .afg-media { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 767px) {
	.afg { --afg-cols: 1; --afg-gap: 16px; }
	.afg--bento .afg-grid { grid-auto-rows: minmax(var(--afg-row), auto); }
	.afg--bento .afg-card { grid-column: auto !important; grid-row: auto !important; }
	.afg--bento .afg-size-big .afg-inner { min-height: calc(var(--afg-row) * 1.7); }
	.afg--bento .afg-size-big .afg-body { padding: 24px; }
	.afg--bento .afg-size-big .afg-title { font-size: 1.5rem; }
	.afg-filters { flex-wrap: nowrap; justify-content: flex-start !important; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
	.afg-filters::-webkit-scrollbar { display: none; }
	.afg .afg-filter { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
	.afg *, .afg *::before, .afg *::after { animation: none !important; transition-duration: .01ms !important; }
	.afg .afg-card { opacity: 1 !important; transform: none !important; filter: none !important; }
	.afg-inner { transform: none !important; }
}