/* Fameen News — correctifs UX/UI validés sur le parcours public. */

:root {
	--fn-ux-focus: #e31b23;
	--fn-ux-navy: var(--fn-navy, #1c2f6b);
	--fn-ux-dark: var(--fn-navy-dark, #002855);
	--fn-ux-border: var(--fn-border, #dfe3ec);
}

/* Focus visible cohérent et très lisible sur toutes les commandes. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--fn-ux-focus) !important;
	outline-offset: 3px !important;
	box-shadow: none;
}

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

/* Formulaire newsletter injecté par Fameen Media Hub : rendu éditorial natif. */
.fn-page__content .fmh-subscribe {
	display: grid;
	grid-template-columns: minmax(150px, .8fr) minmax(210px, 1.15fr) auto;
	gap: 12px;
	align-items: end;
	margin: 22px 0 8px;
	padding: 22px;
	background: #f5f7fb;
	border: 1px solid var(--fn-ux-border);
	border-top: 4px solid var(--fn-ux-focus);
	border-radius: 12px;
}

.fn-page__content .fmh-subscribe__title {
	grid-column: 1 / -1;
	margin: 0 0 2px;
	font-family: var(--fn-font-heading, Montserrat, sans-serif);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.35;
	color: var(--fn-ux-navy);
}

.fn-page__content .fmh-subscribe input:not([type="hidden"]) {
	width: 100%;
	min-width: 0;
	height: 48px;
	padding: 0 14px;
	border: 1px solid #cfd5e2;
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-size: 15px;
}

.fn-page__content .fmh-subscribe button,
.fn-cta-band .fn-ux-cta-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	border: 0;
	border-radius: 8px;
	background: var(--fn-ux-focus);
	color: #fff;
	font-family: var(--fn-font-heading, Montserrat, sans-serif);
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .03em;
	text-transform: uppercase;
	cursor: pointer;
}

.fn-page__content .fmh-subscribe button:hover,
.fn-cta-band .fn-ux-cta-link:hover {
	background: #b8141b;
	color: #fff;
}

.fn-cta-band .fn-ux-public-copy {
	margin: 8px auto 0;
	max-width: 58ch;
	color: rgba(255, 255, 255, .82);
}

.fn-cta-band .fn-ux-cta-link {
	margin-top: 16px;
}

/* Le fil d'Ariane des archives était blanc sur fond blanc et reprenait un titre d'article. */
.archive .fn-container > .fn-breadcrumb {
	margin: 0 0 16px;
}

.archive .fn-container > .fn-breadcrumb li {
	color: var(--fn-gray, #6f7689);
}

.archive .fn-container > .fn-breadcrumb a {
	color: var(--fn-ux-navy);
}

.archive .fn-container > .fn-breadcrumb a:hover {
	color: var(--fn-ux-focus);
}

/* Commandes de pause explicites pour les contenus qui défilent automatiquement. */
.fn-ux-pause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 10px;
	border: 1px solid #dfe3ec;
	border-radius: 999px;
	background: #fff;
	color: var(--fn-ux-navy);
	font-family: var(--fn-font-heading, Montserrat, sans-serif);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
}

.fn-ux-pause:hover,
.fn-ux-pause[aria-pressed="true"] {
	border-color: var(--fn-ux-focus);
	background: var(--fn-ux-focus);
	color: #fff;
}

.fh-lead > .fn-ux-pause {
	position: absolute;
	top: 14px;
	right: 14px;
	bottom: auto;
	left: auto;
	z-index: 5;
	min-height: 36px;
	min-width: 70px;
	border: 1px solid rgba(255,255,255,.42);
	background: rgba(8,13,30,.58);
	color: #fff;
	backdrop-filter: blur(4px);
}

.fn-breaking__nav .fn-ux-pause {
	min-width: 64px;
	min-height: 36px;
}

/* Le ticker reste compact mais indique clairement qu'il se fait défiler. */
.fn-ticker[data-fn-ux-scrollable="true"] {
	scroll-snap-type: x proximity;
	overscroll-behavior-inline: contain;
	-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
	mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
}

.fn-ticker[data-fn-ux-scroll-end="true"] {
	-webkit-mask-image: none;
	mask-image: none;
}

.fn-ticker__it {
	scroll-snap-align: start;
}

@media (max-width: 768px) {
	.fn-topbar__inner {
		justify-content: center;
	}

	.fn-header__main {
		padding-top: 12px;
		padding-bottom: 8px;
	}

	.fn-logo img,
	.fn-logo .custom-logo {
		width: 64px !important;
		height: auto !important;
		max-height: 64px !important;
	}

	/* Une étiquette plus courte libère la place nécessaire au titre d'actualité. */
	.fn-breaking__inner {
		gap: 10px;
	}

	.fn-breaking__label {
		width: 80px;
		min-width: 80px;
		padding: 6px 9px;
		font-size: 0;
	}

	.fn-breaking__label::after {
		content: "ALERTE";
		font-size: 10px;
		line-height: 1;
		color: #fff;
	}

	.fn-breaking__label .fn-bolt {
		font-size: 13px;
	}

	.fn-breaking__slides a {
		display: block;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.fn-breaking__nav {
		display: flex !important;
	}

	.fn-breaking__nav > :not(.fn-ux-pause) {
		display: none !important;
	}

	.fn-breaking__nav .fn-ux-pause {
		min-width: 44px;
		width: 44px;
		min-height: 36px;
		padding: 0 5px;
		font-size: 0;
	}

	.fn-breaking__nav .fn-ux-pause::after {
		content: "II";
		font-size: 10px;
		letter-spacing: 0;
	}

	.fn-breaking__nav .fn-ux-pause[aria-pressed="true"]::after {
		content: "Lire";
		font-size: 9px;
	}

	/* Sur article, le dernier élément répétait tout le H1 juste au-dessus du H1. */
	.single-post .fn-breadcrumb li[aria-current="page"] {
		display: none;
	}

	/* Le texte du hero dépassait de 154 px au-dessus de sa carte de 360 px. */
	.fh-lead__body {
		max-width: 100% !important;
		padding: 24px 40px 26px !important;
	}

	.fh-lead__title {
		max-width: 100% !important;
		font-size: 22px !important;
		line-height: 1.12 !important;
	}

	.fh-lead__stand {
		display: none !important;
	}

	.fh-lead__scrim {
		background: linear-gradient(0deg, rgba(8,13,30,.96), rgba(8,13,30,.38) 68%, rgba(8,13,30,.08) 100%) !important;
	}

	.fn-page__content .fmh-subscribe {
		grid-template-columns: 1fr;
		padding: 20px;
	}

	.fn-page__content .fmh-subscribe__title {
		grid-column: 1;
	}

	.fn-page__content .fmh-subscribe button {
		width: 100%;
	}
}

@media (max-width: 420px) {
	.fn-search-drawer form {
		gap: 8px;
	}

	.fn-search-drawer input[type="search"] {
		min-width: 0;
		padding-left: 12px;
	}

	.fn-search-drawer button {
		padding-left: 14px;
		padding-right: 14px;
	}

	.fh-lead__body {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}

}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		scroll-behavior: auto !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}