/* ft-components.css -- footballtickets.fr
 *
 * Shared UI primitives. Loaded on EVERY page, before game.css, so the event page
 * can still override anything here with its #tablecompare / body.single-match
 * rules without those rules having to be duplicated.
 *
 * Why this file exists: the event-page CRO rework produced a real palette and a
 * set of components (answer block, trust strip, FAQ accordion, price pair), but
 * they all lived inside css/game.css, which is enqueued only on event and venue
 * pages. The five listing page types could not reuse any of it. Loading a 26 KB
 * event-page stylesheet everywhere to borrow four components was the wrong trade,
 * so the primitives moved here instead.
 *
 * RULE: a rule belongs here if a listing page could plausibly use it. Anything
 * scoped to #tablecompare or body.single-match stays in game.css.
 */

/* ── Design tokens ─────────────────────────────────────────────────────────
   The rework settled these values; nobody had written them down, so seven greys
   and four golds were in circulation. New rules use the vars. Existing rules
   elsewhere keep their literal hex until they are next touched, so this file
   introduces no visual change on its own. */
:root {
	/* brand */
	--ft-blue:            #4098D8;
	--ft-blue-dark:       #185c8a;
	--ft-link:            #2d6187;

	/* state + meaning */
	--ft-cta:             #C62828;  /* primary click-out CTA */
	--ft-official:        #0a8368;  /* official partner, and price-down */
	--ft-cheapest:        #13274d;  /* cheapest-row badge + answer headline */
	--ft-chip-active:     #295584;  /* selected filter chip */
	--ft-vip:             #d9a300;  /* VIP / hospitality */
	--ft-vip-dark:        #b88600;

	/* answer block */
	--ft-answer-bg:       #eef4fa;
	--ft-answer-border:   #dbe6f0;
	--ft-answer-ink:      #4a5a6a;

	/* trust strip */
	--ft-trust-ink:       #1d5c46;
	--ft-trust-bg:        #e4f3ed;
	--ft-trust-border:    #bfe3d5;

	/* neutrals */
	--ft-ink:             #141412;
	--ft-muted:           #777;
	--ft-muted-light:     #8a8a8a;
	--ft-rule:            #e0e0e0;
	--ft-surface:         #fafafa;
}

/* No visually-hidden utility is defined here on purpose. Three already exist:
   .screen-reader-text (css/ftmenu.css, site-wide and unconditional, the
   WordPress standard, with a :focus reveal), .vh (assets/css/fixtures.css,
   listing pages only) and .chip-status.sr-only (css/ticket-filter.css, a
   compound selector for one element). New markup uses .screen-reader-text. */

/* ── Price pair: "à partir de" label + the number ──────────────────────────
   Event-page responsive sizes stay in game.css and override these. */
.apartir  { font-size: 0.8em; color: var(--ft-muted); display: block; line-height: 1; }
.theprice { font-weight: bold; font-size: 1.8em; padding: 0; line-height: 1.6em; }

/* ── Answer-first block ────────────────────────────────────────────────────
   Leads with the number the visitor came for, before the H2. */
.price-answer {
	background: var(--ft-answer-bg);
	border: 1px solid var(--ft-answer-border);
	border-radius: 10px;
	padding: 12px 16px;
	margin: 14px 0 10px;
}
.price-answer-lead { font-size: 1.9em; line-height: 1.2; color: var(--ft-cheapest); margin: 0 0 3px; font-weight: 400; }
.price-answer-lead strong { font-weight: 700; }
.price-answer-sub  { font-size: .88em; line-height: 1.5; color: var(--ft-answer-ink); margin: 0; }
/* Price direction (mig 055). The glyph is decorative and carries aria-hidden:
   the sentence next to it already reads "a baissé de X à Y", so nothing is
   conveyed by colour alone. Green for a drop reuses the official-partner green
   rather than introducing a second green. A rise takes the sub-text grey and
   NEVER red: a price rise is not bad news about us, and red beside our own
   headline number reads as an alarm this page has no business raising. */
.price-answer-move { font-size: .9em; line-height: 1; margin-right: 3px; }
.price-answer-down { color: var(--ft-official); }
.price-answer-up   { color: var(--ft-answer-ink); }
@media screen and (max-width: 568px) { .price-answer-lead { font-size: 1.6em; } .price-answer-sub { font-size: .82em; } }

/* ── Trust strip: the legal accordions' claims, made visible ───────────────
   These sentences are the entire product argument and they used to sit
   collapsed BELOW the table they justify. Full text stays in the accordions. */
.trust-strip {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.trust-strip li {
	font-size: .76em;
	line-height: 1.35;
	color: var(--ft-trust-ink);
	background: var(--ft-trust-bg);
	border: 1px solid var(--ft-trust-border);
	border-radius: 20px;
	padding: 4px 11px;
	margin: 0;
}
@media screen and (max-width: 568px) { .trust-strip li { font-size: .72em; padding: 3px 9px; } }

/* ── Small print under a table or list ─────────────────────────────────── */
.table-legend {
	font-size: .78em;
	line-height: 1.55;
	color: var(--ft-muted);
	margin: 0 0 10px;
}

/* ── FAQ accordion ─────────────────────────────────────────────────────────
   Native <details>/<summary>. No JS, no ARIA needed. The paragraph rule below
   is the de-scoped twin of game.css's `body.single-match .game-faq details p`,
   which stays there and wins on event pages. Without this, a listing page
   reusing .game-faq got the container and the +/- marker but lost the body
   text styling entirely. */
.game-faq {
	display: block; clear: both; max-width: none;
	margin: 20px 0 55px; background: var(--ft-surface);
	padding: 0;
}
.game-faq details {
	border-bottom: 1px solid var(--ft-rule); padding: 0 10px;
}
.game-faq details:last-of-type {
	border-bottom: 6px solid #4198d8;
}
.game-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 0;
	font-weight: 600;
	font-size: 1.05em;
	color: var(--ft-ink);
	cursor: pointer;
	list-style: none;
	line-height: 1.4;
	word-break: keep-all;
	hyphens: none;
}
.game-faq summary::-webkit-details-marker { display: none; }
.game-faq summary::marker { display: none; content: ""; }
.game-faq summary::after {
	content: "+";
	flex-shrink: 0;
	margin-left: 16px;
	font-size: 1.4em;
	font-weight: 300;
	color: #888;
	transition: transform 0.2s ease;
}
.game-faq details[open] > summary::after {
	content: "\2212";
}
.game-faq details p {
	margin: 0 0 20px;
	padding: 0; text-align: left;
	line-height: 1.7;
}