@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500;700&display=swap");


/*
 * Tokens de theming Live Parfums.
 *
 * Trois couches :
 * 1. Palette éditoriale guideline (paper / ivory / surface, ink, line, accents copper/sage/plum/live)
 *    qui flippe en light/dark.
 * 2. Alias semantiques --lp-* qui composent au-dessus de la palette.
 * 3. Invariants (typographie, spacing, radius, durations, shadows fallback) indépendants du mode.
 *
 * Les noms historiques --bg / --brand / --action-* sont conservés comme shims et
 * pointent désormais sur la palette guideline. Brand isolée dans --copper pour
 * faciliter une éventuelle surcharge white-label par tenant.
 */
/*
 * Light : palette papier guideline. Le fallback :root et :root[data-theme="light"]
 * partagent les mêmes valeurs ; le second a juste une spécificité supérieure pour
 * battre les invariants sur les rares variables que ceux-ci redéfinissent (--lp-shadow-*).
 */
:root,
:root[data-theme="light"] {
	/* Palette papier — fonds & surfaces (guideline §01) */
	--paper: #e8e3da;
	--paper-2: #ddd6c9;
	--ivory: #f1ece2;
	--ivory-2: #e5dfd2;
	--surface: #faf6ee;
	--surface-2: #f4efe4;

	/* Encres & texte (guideline §02) */
	--ink: #1a1814;
	--ink-2: #2a2620;
	--ink-3: #3d3830;
	--muted: #6a6259;
	--muted-2: #8e867b;
	--muted-3: #b5ac9f;

	/* Hairlines (Règle 05 — line-2 par défaut, line interne, line-strong pour dashed) */
	--line: rgba(26, 24, 20, 0.08);
	--line-2: rgba(26, 24, 20, 0.13);
	--line-strong: rgba(26, 24, 20, 0.22);

	/* Accents (guideline §03) — copper actions timées, sage succès, plum présence, live alertes */
	--copper: oklch(0.62 0.14 50);
	--copper-deep: oklch(0.46 0.14 48);
	--copper-soft: oklch(0.91 0.05 65);

	--sage: oklch(0.55 0.1 145);
	--sage-deep: oklch(0.4 0.1 145);
	--sage-soft: oklch(0.93 0.04 145);

	--plum: oklch(0.48 0.12 320);
	--plum-deep: oklch(0.38 0.12 320);
	--plum-soft: oklch(0.92 0.04 320);

	--live: oklch(0.58 0.19 25);
	--danger: var(--live);
	--danger-soft: oklch(0.93 0.05 25);

	--success: var(--sage);
	--warning: oklch(0.74 0.14 75);

	/* Stage — univers sombre dédié vidéo (Règle 07) */
	--stage: #0a0806;
	--stage-2: #14110d;
	--stage-3: #1e1a14;

	/* Ombres avec inner-highlight blanc — relief papier (Règle 03) */
	--sh-xs: 0 1px 0 rgba(26, 24, 20, 0.04), 0 1px 2px rgba(26, 24, 20, 0.05);
	--sh-sm:
		0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 1px 2px rgba(26, 24, 20, 0.05), 0 2px 6px -2px rgba(26, 24, 20, 0.08);
	--sh-md:
		0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 1px 3px rgba(26, 24, 20, 0.06), 0 8px 20px -10px rgba(26, 24, 20, 0.18);
	--sh-lg:
		0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 2px 6px rgba(26, 24, 20, 0.08), 0 18px 40px -16px rgba(26, 24, 20, 0.25);
	--sh-dark:
		0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 6px 18px -6px rgba(0, 0, 0, 0.5), 0 24px 50px -20px rgba(0, 0, 0, 0.55);

	/* Shims anciens noms — mappés sur la palette guideline */
	--bg: var(--paper);

	--brand: var(--copper);
	--brand-deep: var(--copper-deep);
	--brand-soft: var(--copper-soft);
	--brand-on: var(--surface);

	--action-presence: var(--plum);
	--action-presence-soft: var(--plum-soft);
	--action-presence-deep: var(--plum-deep);
	--action-game: var(--sage);
	--action-game-soft: var(--sage-soft);
	--action-game-deep: var(--sage-deep);

	--success-soft: var(--sage-soft);
	--success-line: oklch(0.78 0.08 150);
	--success-text: var(--sage-deep);

	/* Alias --lp-* */
	--lp-background: var(--paper);
	--lp-surface: var(--surface);
	--lp-surface-raised: var(--surface-2);
	--lp-surface-drawer: var(--ivory);
	--lp-surface-sunken: var(--paper-2);
	--lp-surface-warm: var(--ivory);
	--lp-surface-glass: rgba(250, 246, 238, 0.82);
	--lp-surface-overlay: rgba(26, 24, 20, 0.5);
	--lp-surface-hover: rgba(26, 24, 20, 0.04);
	--lp-surface-active: rgba(26, 24, 20, 0.08);

	/*
	 * Surface placeholder pour les emplacements média non actifs : viewport
	 * stage avant démarrage, frame studio en attente, tiles vides de preview.
	 * Distinct de --stage qui reste réservé au noir profond derrière la vidéo
	 * active (préservation du contraste vidéo).
	 */
	--lp-surface-media-off: #0a0806;

	--lp-text-primary: var(--ink);
	--lp-text-body: var(--ink-2);
	--lp-text-secondary: var(--muted);
	--lp-text-tertiary: var(--muted-2);
	--lp-text-muted: var(--muted-3);
	--lp-text-disabled: rgba(26, 24, 20, 0.32);
	--lp-text-inverse: var(--surface);

	--lp-border: var(--line-2);
	--lp-border-strong: var(--line-strong);
	--lp-border-section: var(--line-2);
	--lp-divider: var(--line);

	--lp-accent: var(--copper);
	--lp-accent-hover: var(--copper-deep);
	--lp-accent-text: var(--surface);
	--lp-accent-subtle: var(--copper-soft);

	--lp-accent-secondary: var(--plum);
	--lp-accent-secondary-hover: var(--plum-deep);
	--lp-accent-secondary-subtle: var(--plum-soft);

	--lp-success: var(--sage);
	--lp-warning: var(--warning);
	--lp-error: var(--live);
	--lp-error-ring: oklch(0.58 0.19 25 / 0.18);
	--lp-info: var(--copper);

	/* Action CTA — sage distinct de --lp-accent (copper) */
	--lp-green: var(--sage);
	--lp-green-soft: var(--sage-soft);
	--lp-green-ink: var(--sage-deep);

	--lp-input-border-focus: color-mix(in oklab, var(--copper) 72%, transparent);
	--lp-input-ring: color-mix(in oklab, var(--copper) 16%, transparent);

	--ui-field-bg: rgba(26, 24, 20, 0.04);
	--ui-field-bg-hover: rgba(26, 24, 20, 0.06);
	--ui-field-bg-focus: rgba(26, 24, 20, 0.06);

	--lp-section-a: var(--paper);
	--lp-section-b: var(--surface);
	--lp-section-emphasis: var(--ink);

	/*
	 * Ombres legacy remappées sur l'échelle guideline pour bénéficier
	 * de l'inner-highlight blanc. La variante stage conserve une projection
	 * spécifique vidéo (ombre douce sans halo blanc agressif).
	 */
	--lp-shadow-alert: var(--sh-md);
	--lp-shadow-card: var(--sh-sm);
	--lp-shadow-overlay: var(--sh-lg);
	--lp-shadow-drawer: var(--sh-lg);
	--lp-shadow-dialog: var(--sh-lg);
	--lp-shadow-stage:
		0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 1px 0 rgba(0, 0, 0, 0.04), 0 24px 48px -24px rgba(0, 0, 0, 0.18);

	color-scheme: light;
}
/* --- Dark : warm anthracite, brand éclairci pour emphase sur fond sombre --- */
:root[data-theme="dark"],
[data-theme="dark"] {
	--bg: oklch(0.18 0.008 60);
	--surface: oklch(0.22 0.009 60);
	--surface-2: oklch(0.27 0.01 55);
	--ink: #f2efe9;
	--ink-2: #d6d2cb;
	--muted: #9a958e;
	--muted-2: #6f6b64;
	--line: rgba(242, 239, 233, 0.08);
	--line-strong: rgba(242, 239, 233, 0.16);

	/* Zone vidéo dédiée, aplat sans dégradé */
	--stage: oklch(0.16 0.012 55);

	--live: oklch(0.66 0.2 25);
	--success: oklch(0.68 0.13 150);
	--warning: oklch(0.78 0.14 75);
	--danger: oklch(0.62 0.19 25);

	--brand: oklch(0.7 0.13 55);
	--brand-deep: oklch(0.84 0.1 55);
	--brand-soft: oklch(0.3 0.05 55);
	--brand-on: #161513;

	--action-presence: oklch(0.72 0.04 320);
	--action-presence-soft: oklch(0.3 0.035 320);
	--action-presence-deep: oklch(0.86 0.025 320);
	--action-game: oklch(0.74 0.02 145);
	--action-game-soft: oklch(0.3 0.018 145);
	--action-game-deep: oklch(0.88 0.012 145);

	--success-soft: oklch(0.4 0.06 150 / 0.45);
	--success-line: oklch(0.55 0.1 150);
	--success-text: oklch(0.82 0.12 150);

	--lp-background: var(--bg);
	--lp-surface: var(--surface);
	--lp-surface-raised: var(--surface-2);
	--lp-surface-drawer: var(--surface);
	--lp-surface-sunken: var(--bg);
	--lp-surface-warm: color-mix(in oklab, #f6f5f2 6%, var(--surface));
	--lp-surface-glass: rgba(22, 21, 19, 0.82);
	--lp-surface-overlay: rgba(0, 0, 0, 0.7);
	--lp-surface-hover: rgba(242, 239, 233, 0.06);
	--lp-surface-active: rgba(242, 239, 233, 0.1);

	--lp-surface-media-off: #0a0806;

	--lp-text-primary: var(--ink);
	--lp-text-body: var(--ink-2);
	--lp-text-secondary: var(--muted);
	--lp-text-tertiary: var(--muted);
	--lp-text-muted: var(--muted-2);
	--lp-text-disabled: rgba(242, 239, 233, 0.32);
	--lp-text-inverse: var(--bg);

	--lp-border: var(--line);
	--lp-border-strong: var(--line-strong);
	--lp-border-section: var(--line-strong);
	--lp-divider: var(--line);

	--lp-accent: var(--brand);
	--lp-accent-hover: var(--brand-deep);
	--lp-accent-text: var(--brand-on);
	--lp-accent-subtle: var(--brand-soft);

	--lp-accent-secondary: var(--brand-deep);
	--lp-accent-secondary-hover: var(--brand);
	--lp-accent-secondary-subtle: var(--brand-soft);

	--lp-success: var(--success);
	--lp-warning: var(--warning);
	--lp-error: var(--danger);
	--lp-error-ring: oklch(0.62 0.19 25 / 0.2);
	--lp-info: var(--brand);

	--lp-green: oklch(0.66 0.13 155);
	--lp-green-soft: oklch(0.32 0.06 150 / 0.5);
	--lp-green-ink: oklch(0.82 0.12 150);

	--lp-input-border-focus: color-mix(in oklab, var(--brand) 72%, transparent);
	--lp-input-ring: color-mix(in oklab, var(--brand) 18%, transparent);

	--ui-field-bg: rgba(242, 239, 233, 0.04);
	--ui-field-bg-hover: rgba(242, 239, 233, 0.06);
	--ui-field-bg-focus: rgba(242, 239, 233, 0.06);

	--lp-section-a: var(--bg);
	--lp-section-b: var(--surface);
	--lp-section-emphasis: oklch(0.13 0.006 60);

	color-scheme: dark;
}
/* --- Tokens brand spectraux — invariants, hors selectors theme --- */
:root {
	--lp-brand-orange: #ffa62b;
	--lp-brand-cyan: #00b4d8;
	--lp-brand-lime: #8ac926;
	--lp-brand-pink: #ff2d9b;
	--lp-brand-red: #e63946;
	--lp-brand-coral: #ff6b6b;
}
/* --- Tokens invariants (indépendants du mode light/dark) --- */
:root {
	--lp-radius-xs: 5px;
	--lp-radius-sm: 6px;
	--lp-radius-md: 8px;
	--lp-radius-lg: 12px;
	--lp-radius-xl: 14px;
	--lp-radius-2xl: 18px;
	--lp-radius-pill: 999px;
	--lp-radius-full: 50%;

	--lp-space-1: 4px;
	--lp-space-2: 8px;
	--lp-space-3: 12px;
	--lp-space-4: 16px;
	--lp-space-5: 20px;
	--lp-space-6: 24px;

	--lp-density-space-1: var(--lp-space-1);
	--lp-density-space-2: var(--lp-space-2);
	--lp-density-space-3: var(--lp-space-3);
	--lp-density-space-4: var(--lp-space-4);
	--lp-density-space-5: var(--lp-space-5);
	--lp-density-space-6: var(--lp-space-6);

	--lp-font-sans: "Inter", system-ui, -apple-system, sans-serif;
	--lp-font-serif: "Fraunces", Georgia, serif;
	--lp-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

	/*
	 * Single source of truth for type scale. Density tokens carry the responsive
	 * step-down per breakpoint; --lp-font-size-* aliases keep legacy consumers
	 * responsive transparently until they migrate.
	 */
	--lp-density-font-2xs: 9px;
	--lp-density-font-xs: 11px;
	--lp-density-font-sm: 12px;
	--lp-density-font-base: 14px;
	--lp-density-font-md: 15px;
	--lp-density-font-lg: 18px;
	--lp-density-font-xl: 22px;
	--lp-density-font-2xl: 26px;
	--lp-density-font-display: 34px;

	--lp-font-size-xs: var(--lp-density-font-xs);
	--lp-font-size-sm: var(--lp-density-font-sm);
	--lp-font-size-base: var(--lp-density-font-base);
	--lp-font-size-md: var(--lp-density-font-md);
	--lp-font-size-lg: var(--lp-density-font-lg);
	--lp-font-size-xl: var(--lp-density-font-xl);
	--lp-font-size-2xl: var(--lp-density-font-2xl);
	--lp-font-size-display: var(--lp-density-font-display);

	/*
	 * Centralised breakpoint values. CSS reads them via @media literals (CSS spec
	 * forbids var() inside media queries), TS reads them via common/utils/breakpoints.
	 * Keep these three in sync with that module.
	 */
	--bp-mobile: 900px;
	--bp-tight: 380px;
	--bp-narrow: 360px;

	--lp-density-control-xs: 28px;
	--lp-density-control-sm: 32px;
	--lp-density-control-md: 36px;
	--lp-density-control-lg: 44px;
	--lp-density-control-xl: 48px;

	--lp-density-icon-xs: 14px;
	--lp-density-icon-sm: 16px;
	--lp-density-icon-md: 18px;
	--lp-density-icon-lg: 24px;

	/*
	 * Reaction burst glyph size — distinct from icon and type scales because the
	 * animation needs a deliberately oversized emoji that doesn't belong to
	 * either family.
	 */
	--lp-density-burst-glyph: 46px;

	--lp-font-weight-light: 300;
	--lp-font-weight-regular: 400;
	--lp-font-weight-medium: 500;
	--lp-font-weight-semibold: 600;
	--lp-font-weight-bold: 700;

	--lp-line-height-tight: 1.2;
	--lp-line-height-snug: 1.35;
	--lp-line-height-base: 1.5;

	--lp-duration-fast: 120ms;
	--lp-duration-base: 150ms;
	--lp-duration-field: 160ms;
	--lp-duration-slide: 220ms;
	--lp-duration-slow: 250ms;

	/*
	 * Fallback shadow tokens — utilisés en mode dark (le bloc light les redéfinit
	 * en pointant vers --sh-* avec inner-highlight blanc).
	 */
	--lp-shadow-alert: 0 4px 8px rgba(0, 0, 0, 0.1);
	--lp-shadow-card: 0 1px 2px rgba(15, 15, 30, 0.04), 0 4px 12px rgba(15, 15, 30, 0.06);
	--lp-shadow-stage: 0 1px 0 rgba(0, 0, 0, 0.04), 0 24px 48px -24px rgba(0, 0, 0, 0.18);
	--lp-shadow-overlay: 0 20px 48px rgba(0, 0, 0, 0.28);
	--lp-shadow-drawer: 0 20px 48px rgba(0, 0, 0, 0.38);
	--lp-shadow-dialog: 0 8px 32px rgba(0, 0, 0, 0.3);

	--lp-z-savebar: 900;
	--lp-z-modal-backdrop: 1050;
	--lp-z-modal: 1051;
	--lp-z-alert: 1060;
	--lp-z-confirm: 10000;
	--lp-z-action-stack: 10100;

	--lp-backdrop: rgba(0, 0, 0, 0.5);
}
@media (max-width: 900px) {
	:root {
		--lp-density-space-1: 3px;
		--lp-density-space-2: 6px;
		--lp-density-space-3: 10px;
		--lp-density-space-4: 14px;
		--lp-density-space-5: 18px;
		--lp-density-space-6: 22px;

		--lp-density-font-2xs: 8px;
		--lp-density-font-xs: 10px;
		--lp-density-font-sm: 11px;
		--lp-density-font-base: 13px;
		--lp-density-font-md: 14px;
		--lp-density-font-lg: 16px;
		--lp-density-font-xl: 20px;
		--lp-density-font-2xl: 22px;
		--lp-density-font-display: 28px;

		--lp-density-control-xs: 26px;
		--lp-density-control-sm: 30px;
		--lp-density-control-md: 34px;
		--lp-density-control-lg: 40px;
		--lp-density-control-xl: 44px;

		--lp-density-icon-xs: 13px;
		--lp-density-icon-sm: 15px;
		--lp-density-icon-md: 17px;
		--lp-density-icon-lg: 22px;

		--lp-density-burst-glyph: 42px;
	}
}
@media (max-width: 380px), (max-width: 900px) and (max-height: 700px) {
	:root {
		--lp-density-space-1: 3px;
		--lp-density-space-2: 5px;
		--lp-density-space-3: 8px;
		--lp-density-space-4: 12px;
		--lp-density-space-5: 16px;
		--lp-density-space-6: 20px;

		--lp-density-font-xs: 9.5px;
		--lp-density-font-sm: 10.5px;
		--lp-density-font-base: 12px;
		--lp-density-font-md: 13px;
		--lp-density-font-lg: 14px;
		--lp-density-font-xl: 18px;
		--lp-density-font-2xl: 20px;
		--lp-density-font-display: 24px;

		--lp-density-control-xs: 24px;
		--lp-density-control-sm: 28px;
		--lp-density-control-md: 32px;
		--lp-density-control-lg: 36px;
		--lp-density-control-xl: 40px;

		--lp-density-icon-xs: 12px;
		--lp-density-icon-sm: 14px;
		--lp-density-icon-md: 16px;
		--lp-density-icon-lg: 20px;

		--lp-density-burst-glyph: 38px;
	}
}
@media (max-width: 360px), (max-width: 900px) and (max-height: 640px) {
	:root {
		--lp-density-space-2: 4px;
		--lp-density-space-3: 7px;
		--lp-density-space-4: 10px;
		--lp-density-space-5: 14px;

		--lp-density-font-xs: 9px;
		--lp-density-font-sm: 10px;
		--lp-density-font-base: 11.5px;
		--lp-density-font-md: 12.5px;
		--lp-density-font-lg: 13.5px;
		--lp-density-font-xl: 17px;
		--lp-density-font-2xl: 19px;
		--lp-density-font-display: 22px;

		--lp-density-control-xs: 22px;
		--lp-density-control-md: 30px;
		--lp-density-control-lg: 34px;
		--lp-density-control-xl: 38px;

		--lp-density-icon-sm: 13px;
		--lp-density-icon-md: 15px;

		--lp-density-burst-glyph: 34px;
	}
}
/* --- Body font global --- */
html,
body {
	font-family: var(--lp-font-sans);
}
/* Variables non gérées par PHP (les couleurs branding sont injectées par _template.php) */
:root {
	--primary-color-rgb: 0, 123, 255;
	--background-image: none;
}
/* Style pour le body — fond legerement plus cool que --ivory pour donner du relief au shell editorial.
   Sur les surfaces qui doivent suivre le theme PHP (login, public), --background-color reprend la main. */
body {
	background-color: #f0eee9;
	background-image: var(--background-image);
	color: var(--lp-text-primary);
}
:root[data-theme="dark"] body {
	background-color: var(--lp-background);
}
.text-primary {
	color: var(--primary-background-color) !important;
}
.btn-primary,
#LiveQuestions .btn-primary,
#LiveTestPersoQuestions .btn-primary,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
	color: var(--primary-color);
	border-color: var(--primary-background-color);
	background-color: var(--primary-background-color);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
#LiveChatCpt {
	color: var(--primary-hover-color);
	border-color: var(--primary-hover-background-color);
	background-color: var(--primary-hover-background-color);
}
#LiveSocial > .nav {
	background-color: var(--primary-hover-background-color);
}
#LiveSocial .nav-link,
#LiveSocial .nav-link:hover {
	border: none;
	background: none;
	color: var(--primary-hover-color);
}
#LiveSocial .nav-link.active {
	background: var(--primary-background-color);
	color: var(--primary-color);
}
/* Tableau scoreboard : fond transparent, texte blanc, pas de bordures Bootstrap */
#ScoreboardInner .table {
	--bs-table-bg: transparent;
	--bs-table-color: white;
	--bs-table-border-color: rgba(255, 255, 255, 0.1);
	margin-bottom: 0;
}
/* Alternance de fond une ligne sur deux */
#ScoreboardInner .table tr:nth-child(even) {
	background-color: rgba(255, 255, 255, 0.06);
}
/* Top 3 : blanc pur */
#ScoreboardInner .line0,
#ScoreboardInner .line1,
#ScoreboardInner .line2 {
	color: white;
}
/* Rangs 4-7 : gris clair */
#ScoreboardInner .line3,
#ScoreboardInner .line4,
#ScoreboardInner .line5,
#ScoreboardInner .line6 {
	color: rgba(255, 255, 255, 0.7);
}
/* Rangs 8-11 : gris moyen */
#ScoreboardInner .line7,
#ScoreboardInner .line8,
#ScoreboardInner .line9,
#ScoreboardInner .line10 {
	color: rgba(255, 255, 255, 0.5);
}
/* Rangs 12+ : gris plus foncé */
#ScoreboardInner tr[class^="line"]:nth-child(n + 12) {
	color: rgba(255, 255, 255, 0.35);
}
/*--- GLOBAL ---*/
:root {
	--vh: 1vh;
}
body {
	background-size: cover;
	background-position: 50%;
}
a {
	text-decoration: none;
}
.mh100 {
	min-height: calc(var(--vh, 1vh) * 100);
}
.btn {
	box-shadow: none !important;
}
.card-shadow {
	box-shadow: 0 0 5rem rgba(0, 0, 0, 0.3);
}
.cadre-blanc {
	background: rgba(255, 255, 255, 0.85);
	padding: 20px 40px;
}
.card.disabled {
	background-color: #e9ecef;
	opacity: 0.8;
}
/*--- PUBLIC ---*/
#PublicLogin {
	display: grid;
	grid-template-rows: 1fr auto;
}
#PublicLoginInner > .card-shadow {
	max-width: 550px;
}
#PublicFooter {
	text-align: center;
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	padding: 5px;
}
#Logo {
	max-width: 70vw;
	max-height: 10vh;
}
#ConnexionForm {
	max-width: 800px;
}
h1.title {
	text-align: center;
	text-transform: uppercase;
	font-size: 1.5rem;
	letter-spacing: 0.5px;
	margin: 10px 0;
}
h2.date {
	text-align: center;
	font-size: 1rem;
	font-weight: normal;
	margin: 10px 0;
}
.please-connect {
	text-align: center;
	color: #aaa;
}
#Scoreboard {
	background-size: cover;
	background-position: 50%;
	position: relative;
}
#ScoreboardInner {
	background-color: rgba(10, 10, 10, 0.85);
	border-radius: 10px;
	color: white;
	width: 95%;
	max-width: 1200px;
	padding: 3rem;
	position: relative;
	z-index: 2;
}
#ScoreboardInner h1 {
	text-transform: uppercase;
	font-size: 2.2rem;
	color: white;
	text-align: center;
	margin-bottom: 1.5rem;
}
#ScoreboardInner .fs {
	font-size: 1.5rem;
	text-transform: uppercase;
}
#ScoreboardInner .fs sup {
	text-transform: lowercase;
}
#ScoreboardInner .line0 .fs {
	font-size: 3rem;
	font-weight: bold;
}
#ScoreboardInner .line1 .fs {
	font-size: 2rem;
	font-weight: bold;
}
#ScoreboardInner .line2 .fs {
	font-size: 1.75rem;
	font-weight: bold;
}
#Replay iframe,
#Replay video {
	width: 800px;
	height: 450px;
	max-width: 100%;
}
#Cadeau {
	width: 800px;
	max-width: 100%;
}
/*--- ADMIN ---*/
#AdminToolbar {
	background: #222;
	color: #fff;
	padding: 2px;
	text-align: center;
	font-size: 0.85rem;
}
#AdminToolbar a {
	color: yellow;
}
#AdminMenu {
	background: #444;
	color: #fff;
}
#AdminMenu a {
	display: inline-block;
	color: white;
	padding: 4px 12px;
}
#AdminMenu a.active {
	background-color: #666;
}
.video-container:has(.speaking) {
	box-shadow: 0 0 0 6px #4caf50 !important;
}
.speaking {
	box-shadow: 0 0 0 3px #4caf50 !important;
}
#LiveQuiz .modal-body {
	padding: 0px;
}