/* ==========================================================================
   Résultats Handball — affichage
   Tout passe par des variables : les réglages Elementor les surchargent.
   ========================================================================== */

.ffhb {
	--ffhb-accent: var(--ffhb-accent-default, #e4002b);
	--ffhb-on-accent: #fff;
	--ffhb-win: #15803d;
	--ffhb-draw: #b45309;
	--ffhb-loss: #b91c1c;
	--ffhb-text: inherit;
	--ffhb-muted: color-mix(in srgb, currentColor 58%, transparent);
	--ffhb-card-bg: #fff;
	--ffhb-border: rgba(15, 23, 42, 0.09);
	--ffhb-radius: 14px;
	--ffhb-gap: 16px;
	--ffhb-pad: 16px;
	--ffhb-logo-size: 40px;
	--ffhb-score-size: 28px;
	--ffhb-strip: 4px;

	container-type: inline-size;
	color: var(--ffhb-text);
	font-variant-numeric: tabular-nums;
	line-height: 1.35;
}

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

.ffhb p,
.ffhb h3 {
	margin: 0;
}

/* ----- Éléments communs ------------------------------------------------- */

.ffhb-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--ffhb-accent);
	color: var(--ffhb-on-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ffhb-when,
.ffhb-venue,
.ffhb-comp,
.ffhb-updated {
	color: var(--ffhb-muted);
	font-size: 13px;
}

.ffhb-updated {
	margin-top: 10px !important;
	font-size: 12px;
}

.ffhb-empty {
	padding: 28px 16px;
	border: 1px dashed var(--ffhb-border);
	border-radius: var(--ffhb-radius);
	color: var(--ffhb-muted);
	text-align: center;
}

.ffhb-link {
	color: var(--ffhb-accent);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.ffhb-link:hover {
	text-decoration: underline;
}

.ffhb-result {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
}

.ffhb-result--win { background: color-mix(in srgb, var(--ffhb-win) 14%, transparent); color: var(--ffhb-win); }
.ffhb-result--draw { background: color-mix(in srgb, var(--ffhb-draw) 14%, transparent); color: var(--ffhb-draw); }
.ffhb-result--loss { background: color-mix(in srgb, var(--ffhb-loss) 14%, transparent); color: var(--ffhb-loss); }

/* Logos et pastilles d'initiales */
.ffhb-logo {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: var(--ffhb-logo-size);
	height: var(--ffhb-logo-size);
	overflow: hidden;
	border-radius: 50%;
}

.ffhb-logo:not(.ffhb-logo--initials) {
	background: var(--ffhb-logo-bg, #fff);
	box-shadow: 0 0 0 1px var(--ffhb-border);
}

.ffhb-logo img {
	width: 100%;
	height: 100%;
	padding: var(--ffhb-logo-pad, 8%);
	object-fit: contain;
}

.ffhb-logo--initials {
	background: #eef0f3;
	color: #475467;
	font-size: calc(var(--ffhb-logo-size) * 0.36);
	font-weight: 800;
	letter-spacing: 0.02em;
}

.ffhb-logo--initials.is-hue {
	background: hsl(var(--ffhb-hue, 210) 60% 93%);
	color: hsl(var(--ffhb-hue, 210) 45% 30%);
}

.ffhb-logo--initials.is-club {
	background: var(--ffhb-accent);
	color: var(--ffhb-on-accent);
}

/* ----- Matchs : cartes -------------------------------------------------- */

.ffhb-group + .ffhb-group {
	margin-top: calc(var(--ffhb-gap) * 1.5);
}

.ffhb-group__title {
	margin-bottom: 10px !important;
	font-size: 15px;
	font-weight: 700;
}

.ffhb-grid {
	display: grid;
	grid-template-columns: var(--ffhb-template, repeat(auto-fill, minmax(min(100%, 280px), 1fr)));
	gap: var(--ffhb-gap);
}

.ffhb-match {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: var(--ffhb-pad);
	overflow: hidden;
	border: 1px solid var(--ffhb-border);
	border-radius: var(--ffhb-radius);
	background: var(--ffhb-card-bg);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Liseré de couleur selon le résultat */
.ffhb-match::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--ffhb-strip);
	background: var(--ffhb-border);
}

.ffhb-match--win::before { background: var(--ffhb-win); }
.ffhb-match--draw::before { background: var(--ffhb-draw); }
.ffhb-match--loss::before { background: var(--ffhb-loss); }
.ffhb-match--upcoming::before { background: var(--ffhb-accent); }

.ffhb-match__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 10px;
}

.ffhb-match__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 10px;
}

.ffhb-team {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-width: 0;
	text-align: center;
}

.ffhb-team__name {
	font-size: 14px;
	font-weight: 600;
	overflow-wrap: break-word;
	hyphens: auto;
}

.ffhb-team.is-club .ffhb-team__name {
	color: var(--ffhb-club-name-color, inherit);
}

.ffhb-team.is-winner .ffhb-team__name {
	font-weight: 800;
}

.ffhb-team.is-loser .ffhb-team__name {
	opacity: 0.72;
}

.ffhb-score {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--ffhb-score-size);
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
}

.ffhb-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.ffhb-ht {
	color: var(--ffhb-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.ffhb-featured .ffhb-ht {
	color: color-mix(in srgb, var(--ffhb-on-feature) 75%, transparent);
	font-size: 13px;
}

.ffhb-score__sep {
	color: var(--ffhb-muted);
	font-weight: 400;
}

.ffhb-score--upcoming .ffhb-kickoff {
	padding: 6px 12px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--ffhb-accent) 10%, transparent);
	color: var(--ffhb-accent);
	font-size: calc(var(--ffhb-score-size) * 0.64);
}

.ffhb-match__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 12px;
	padding-top: 12px;
	border-top: 1px solid var(--ffhb-border);
}

/* Filet de sécurité : sous 520 px de large, toujours une seule colonne. */
@container (max-width: 520px) {
	.ffhb-layout-cards .ffhb-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* ----- Matchs : liste compacte ------------------------------------------ */

.ffhb-layout-list .ffhb-grid {
	--ffhb-template: minmax(0, 1fr);
	gap: 0;
	overflow: hidden;
	border: 1px solid var(--ffhb-border);
	border-radius: var(--ffhb-radius);
	background: var(--ffhb-card-bg);
}

.ffhb-layout-list .ffhb-match {
	display: grid;
	grid-template-columns: minmax(120px, 0.9fr) minmax(0, 3fr) minmax(90px, auto);
	align-items: center;
	gap: 14px;
	padding: 12px var(--ffhb-pad) 12px calc(var(--ffhb-pad) + var(--ffhb-strip));
	border: 0;
	border-bottom: 1px solid var(--ffhb-border);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.ffhb-layout-list .ffhb-match:last-child {
	border-bottom: 0;
}

.ffhb-layout-list .ffhb-match__head {
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

.ffhb-layout-list .ffhb-team {
	flex-direction: row;
	gap: 10px;
}

.ffhb-layout-list .ffhb-team--home {
	flex-direction: row-reverse;
	text-align: right;
}

.ffhb-layout-list .ffhb-team--away {
	text-align: left;
}

.ffhb-layout-list .ffhb-logo {
	width: calc(var(--ffhb-logo-size) * 0.8);
	height: calc(var(--ffhb-logo-size) * 0.8);
}

.ffhb-layout-list .ffhb-score {
	font-size: calc(var(--ffhb-score-size) * 0.75);
}

.ffhb-layout-list .ffhb-score--upcoming .ffhb-kickoff {
	padding: 4px 10px;
	font-size: 13px;
	text-transform: uppercase;
}

.ffhb-layout-list .ffhb-match__foot {
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	padding-top: 0;
	border-top: 0;
}

@container (max-width: 620px) {
	.ffhb-layout-list .ffhb-match {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.ffhb-layout-list .ffhb-match__head {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.ffhb-layout-list .ffhb-match__foot {
		flex-direction: row;
		justify-content: flex-start;
	}
}

/* ----- Match à la une --------------------------------------------------- */

.ffhb-featured {
	--ffhb-logo-size: 76px;
	--ffhb-score-size: 56px;
	--ffhb-on-feature: #fff;

	position: relative;
	padding: clamp(20px, 5cqi, 40px);
	overflow: hidden;
	border-radius: var(--ffhb-radius);
	background-color: #0b0f19;
	background-position: center;
	background-size: cover;
	color: var(--ffhb-on-feature);
	text-align: center;
}

.ffhb-featured.has-default-bg {
	background-image: linear-gradient(135deg, var(--ffhb-accent) 0%, color-mix(in srgb, var(--ffhb-accent) 45%, #0b0f19) 100%);
}

.ffhb-featured .ffhb-muted,
.ffhb-featured .ffhb-comp,
.ffhb-featured .ffhb-featured__meta,
.ffhb-featured .ffhb-updated {
	color: color-mix(in srgb, var(--ffhb-on-feature) 78%, transparent);
}

.ffhb-featured__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 12px;
	margin-bottom: clamp(16px, 4cqi, 28px);
}

.ffhb-featured__title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.9;
}

.ffhb-featured .ffhb-badge {
	background: color-mix(in srgb, var(--ffhb-on-feature) 18%, transparent);
	color: var(--ffhb-on-feature);
}

.ffhb-featured__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: clamp(10px, 3cqi, 28px);
}

.ffhb-featured .ffhb-team {
	gap: 12px;
}

.ffhb-featured .ffhb-team__name {
	font-size: clamp(14px, 3cqi, 20px);
	font-weight: 700;
}

.ffhb-featured .ffhb-team.is-loser .ffhb-team__name {
	opacity: 0.75;
}

.ffhb-featured .ffhb-logo {
	background: #fff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.ffhb-featured .ffhb-logo img {
	padding: 12%;
}

.ffhb-featured .ffhb-logo--initials,
.ffhb-featured .ffhb-logo--initials.is-hue {
	background: color-mix(in srgb, var(--ffhb-on-feature) 16%, transparent);
	color: var(--ffhb-on-feature);
	box-shadow: none;
}

.ffhb-featured .ffhb-logo--initials.is-club {
	background: var(--ffhb-on-feature);
	color: var(--ffhb-accent);
}

.ffhb-featured__center {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.ffhb-featured .ffhb-score {
	font-size: clamp(34px, 9cqi, var(--ffhb-score-size));
	gap: 10px;
}

.ffhb-featured .ffhb-score__sep {
	color: inherit;
	opacity: 0.5;
}

.ffhb-featured .ffhb-score--upcoming .ffhb-kickoff {
	padding: 8px 16px;
	background: color-mix(in srgb, var(--ffhb-on-feature) 16%, transparent);
	color: var(--ffhb-on-feature);
	font-size: clamp(22px, 5.5cqi, calc(var(--ffhb-score-size) * 0.6));
}

.ffhb-featured .ffhb-result {
	background: var(--ffhb-on-feature);
}

.ffhb-countdown {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.85;
}

.ffhb-featured__foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin-top: clamp(16px, 4cqi, 28px);
}

.ffhb-featured__meta {
	font-size: 14px;
	font-weight: 600;
}

.ffhb-featured .ffhb-link {
	color: var(--ffhb-on-feature);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ffhb-featured.is-empty {
	background: none;
	padding: 0;
}

.ffhb-featured.is-empty .ffhb-empty {
	color: var(--ffhb-muted);
}

@container (max-width: 420px) {
	.ffhb-featured {
		--ffhb-logo-size: 56px;
	}
}

/* ----- Classement ------------------------------------------------------- */

.ffhb-standings__title {
	margin-bottom: 12px !important;
	font-size: 17px;
	font-weight: 700;
}

.ffhb-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--ffhb-border);
	border-radius: var(--ffhb-radius);
	background: var(--ffhb-card-bg);
}

.ffhb .ffhb-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 14px;
}

.ffhb .ffhb-table th,
.ffhb .ffhb-table td {
	padding: 10px 8px;
	border: 0;
	border-bottom: 1px solid var(--ffhb-border);
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
}

.ffhb .ffhb-table tbody tr:last-child td {
	border-bottom: 0;
}

.ffhb .ffhb-table th {
	background: var(--ffhb-head-bg, transparent);
	color: var(--ffhb-head-color, var(--ffhb-muted));
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ffhb .ffhb-table abbr {
	border: 0;
	text-decoration: none;
	cursor: help;
}

.ffhb .ffhb-table tbody tr:nth-child(even) td {
	background: var(--ffhb-stripe, transparent);
}

.ffhb .ffhb-table .ffhb-col-rank {
	width: 44px;
	padding-left: 14px;
	font-weight: 700;
}

.ffhb .ffhb-table .ffhb-col-team {
	width: 100%;
	text-align: left;
	white-space: normal;
}

.ffhb .ffhb-table .ffhb-team {
	flex-direction: row;
	gap: 10px;
	text-align: left;
}

.ffhb .ffhb-table .ffhb-logo {
	width: 26px;
	height: 26px;
	font-size: 10px;
}

.ffhb .ffhb-table td.ffhb-col-points {
	font-weight: 800;
}

.ffhb .ffhb-table td:last-child,
.ffhb .ffhb-table th:last-child {
	padding-right: 14px;
}

.ffhb .ffhb-table tbody tr.is-club td {
	background: var(--ffhb-row-club-bg, color-mix(in srgb, var(--ffhb-accent) 10%, transparent));
	color: var(--ffhb-row-club-color, inherit);
	font-weight: 700;
}

.ffhb .ffhb-table tr.is-club td.ffhb-col-rank {
	box-shadow: inset var(--ffhb-strip) 0 0 var(--ffhb-accent);
}

.ffhb .ffhb-table tr.is-club .ffhb-team__name {
	color: var(--ffhb-row-club-color, var(--ffhb-accent));
}

@container (max-width: 420px) {
	.ffhb .ffhb-table th,
	.ffhb .ffhb-table td {
		padding: 9px 5px;
		font-size: 13px;
	}

	.ffhb .ffhb-table .ffhb-logo {
		display: none;
	}
}

/* ----- Options de style (classes posées par Elementor) ------------------- */

.ffhb-lift-yes .ffhb-layout-cards .ffhb-match {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ffhb-lift-yes .ffhb-layout-cards .ffhb-match:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.ffhb-score-colored-yes .ffhb-match--win .ffhb-score { color: var(--ffhb-win); }
.ffhb-score-colored-yes .ffhb-match--draw .ffhb-score { color: var(--ffhb-draw); }
.ffhb-score-colored-yes .ffhb-match--loss .ffhb-score { color: var(--ffhb-loss); }

.ffhb-result-style-solid .ffhb-result { color: #fff; }
.ffhb-result-style-solid .ffhb-result--win { background: var(--ffhb-win); }
.ffhb-result-style-solid .ffhb-result--draw { background: var(--ffhb-draw); }
.ffhb-result-style-solid .ffhb-result--loss { background: var(--ffhb-loss); }

.ffhb-result-style-text .ffhb-result {
	padding: 0;
	background: none;
}

.ffhb-result-style-text .ffhb-featured .ffhb-result {
	color: var(--ffhb-on-feature);
}

/* « Prendre toute la largeur disponible » : dans un conteneur Elementor en
   ligne, un widget ne prend sinon que la largeur de son contenu. */
.elementor-element.ffhb-full-yes {
	flex: 1 1 100%;
	align-self: stretch;
	width: 100%;
	max-width: 100%;
}

.ffhb-full-yes > .elementor-widget-container,
.ffhb-full-yes .ffhb {
	width: 100%;
}