/*
Theme Name: JeuxDeTable
Theme URI: https://jeuxdetable.fr/
Author: JeuxDeTable.fr
Author URI: https://jeuxdetable.fr/
Description: Thème bloc autonome de la plateforme JeuxDeTable : vidéos, univers, jeux et outils.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.2
Version: 0.4.4-rc.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jdt-myndarh
Tags: block-patterns, block-styles, full-site-editing, accessibility-ready, custom-colors, custom-logo, editor-style, featured-images, wide-blocks
*/

:root {
	--jdt-radius-sm: 0.375rem;
	--jdt-radius-md: 0.75rem;
	--jdt-radius-lg: 1.25rem;
	--jdt-shadow-soft: 0 1rem 3rem rgb(0 0 0 / 22%);
	--jdt-shadow-card: 0 0.8rem 2rem rgb(0 0 0 / 18%);
	--jdt-transition: 180ms ease;
	--jdt-border: rgb(215 180 119 / 22%);
}

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

html {
	scroll-behavior: smooth;
}

body {
	background:
		radial-gradient(circle at 15% 0%, rgb(71 107 85 / 14%), transparent 34rem),
		linear-gradient(180deg, #0c1110 0%, #111815 100%);
	min-height: 100vh;
}

img {
	height: auto;
	max-width: 100%;
}

a {
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

a,
button,
input,
select,
textarea,
[tabindex]:not([tabindex="-1"]) {
	transition:
		color var(--jdt-transition),
		background-color var(--jdt-transition),
		border-color var(--jdt-transition),
		box-shadow var(--jdt-transition),
		transform var(--jdt-transition);
}

:where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
	border-radius: var(--jdt-radius-sm);
	outline: 3px solid var(--wp--preset--color--bronze-light);
	outline-offset: 4px;
}

.jdt-skip-link {
	background: var(--wp--preset--color--parchment);
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	left: 1rem;
	padding: 0.75rem 1rem;
	position: fixed;
	top: 1rem;
	transform: translateY(-200%);
	z-index: 100000;
}

.jdt-skip-link:focus {
	transform: translateY(0);
}

::selection {
	background: var(--wp--preset--color--bronze-light);
	color: var(--wp--preset--color--ink);
}

.wp-site-blocks {
	min-height: 100vh;
}

.wp-block-post-content {
	overflow-wrap: anywhere;
}

.wp-block-post-content > :where(h2, h3, h4),
[id] {
	scroll-margin-top: 7rem;
}

.wp-block-button__link {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-height: 2.9rem;
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background: var(--wp--preset--color--bronze-light);
	color: var(--wp--preset--color--ink);
}

.wp-block-button__link:hover {
	background: var(--wp--preset--color--parchment);
	color: var(--wp--preset--color--ink);
	transform: translateY(-1px);
}

.is-style-outline > .wp-block-button__link {
	border-color: var(--wp--preset--color--bronze-light);
	color: var(--wp--preset--color--parchment);
}

.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--forest);
	border-color: var(--wp--preset--color--bronze-light);
	color: var(--wp--preset--color--parchment);
}

/* En-tête JeuxDeTable */
.jdt-site-header {
	background: rgb(12 17 16 / 96%);
	border-bottom: 1px solid var(--jdt-border);
	position: relative;
	z-index: 50;
}

@supports (position: sticky) {
	.jdt-site-header {
		position: sticky;
		top: 0;
	}

	.admin-bar .jdt-site-header {
		top: 32px;
	}
}

.jdt-header-inner {
	min-height: 5.25rem;
}

.jdt-brand {
	flex: 0 1 auto;
	min-width: 0;
	text-decoration: none;
}

.jdt-brand .wp-block-image {
	flex: 0 0 auto;
	margin: 0;
}

.jdt-brand img {
	display: block;
	height: auto;
	object-fit: contain;
	width: 4rem;
}

.jdt-brand-copy {
	line-height: 1.15;
	min-width: 0;
}

.jdt-brand-copy .wp-block-site-title {
	font-size: clamp(1.12rem, 1rem + 0.35vw, 1.42rem);
	letter-spacing: 0.045em;
	margin: 0;
	text-transform: uppercase;
	white-space: nowrap;
}

.jdt-brand-copy .wp-block-site-title a {
	text-decoration: none;
}

.jdt-brand-copy p {
	margin: 0.3rem 0 0;
	white-space: nowrap;
}

.jdt-primary-navigation .wp-block-navigation-item__content {
	align-items: center;
	display: inline-flex;
	min-height: 2.75rem;
	padding: 0.375rem 0.18rem;
	text-decoration: none;
}

.jdt-primary-navigation .wp-block-navigation-item__content:hover,
.jdt-primary-navigation .current-menu-item > .wp-block-navigation-item__content,
.jdt-primary-navigation .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--bronze-light);
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	align-items: center;
	justify-content: center;
	min-height: 2.9rem;
	min-width: 2.9rem;
}

.wp-block-navigation__responsive-container.is-menu-open {
	background:
		radial-gradient(circle at 80% 0%, rgb(182 135 75 / 18%), transparent 24rem),
		var(--wp--preset--color--ink);
	color: var(--wp--preset--color--parchment);
	padding: clamp(1.25rem, 4vw, 2.5rem);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 4rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: clamp(1.35rem, 4vw, 2rem);
	padding-block: 0.55rem;
}

/* Hero de la marque ombrelle */
.jdt-hero {
	background: #120f0d;
	border-bottom: 1px solid var(--jdt-border);
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(22rem, 0.75fr);
	min-height: 38rem;
	overflow: hidden;
	width: 100%;
}

.jdt-hero-media {
	background: #1c130e;
	display: block;
	min-height: 100%;
	overflow: hidden;
	position: relative;
}

.jdt-hero-media picture,
.jdt-hero-media img {
	display: block;
	height: 100%;
	width: 100%;
}

.jdt-hero-media img {
	object-fit: cover;
	object-position: center center;
}

.jdt-hero-panel {
	align-content: center;
	background:
		radial-gradient(circle at 100% 0%, rgb(182 135 75 / 18%), transparent 22rem),
		linear-gradient(145deg, #151c19 0%, #0c1110 100%);
	border-left: 1px solid var(--jdt-border);
	display: grid;
	padding: clamp(2rem, 5vw, 5rem);
}

.jdt-hero-copy {
	max-width: 34rem;
}

.jdt-eyebrow {
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.jdt-hero h1 {
	font-size: clamp(2.65rem, 4.9vw, 5.2rem);
	margin-block: 0.45rem 1.2rem;
	max-width: 10ch;
	text-wrap: balance;
}

.jdt-hero-intro {
	color: var(--wp--preset--color--mist);
	font-size: clamp(1.05rem, 1rem + 0.35vw, 1.28rem);
	line-height: 1.65;
	max-width: 38rem;
}

.jdt-hero-actions {
	margin-top: var(--wp--preset--spacing--40);
}

/* Accueil et cartes de plateforme */
.jdt-home-section,
.jdt-section {
	width: 100%;
}

.jdt-section {
	padding:
		clamp(3rem, 6vw, 6rem)
		clamp(1rem, 3vw, 2rem);
}

.jdt-section > .wp-block-group__inner-container,
.jdt-section-shell {
	margin-inline: auto;
	max-width: 90rem;
}

.jdt-home-section--alternate,
.jdt-section--surface {
	background: linear-gradient(145deg, rgb(30 56 46 / 48%), rgb(21 28 25 / 88%));
	border-block: 1px solid rgb(215 180 119 / 14%);
}

.jdt-section-heading {
	margin-bottom: clamp(1.75rem, 4vw, 3rem);
	max-width: 48rem;
}

.jdt-section-heading--center {
	margin-inline: auto;
	text-align: center;
}

.jdt-section-heading > :last-child {
	color: var(--wp--preset--color--mist);
}

.jdt-card-grid {
	align-items: stretch;
	display: grid;
	gap: clamp(1rem, 2.5vw, 2rem);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jdt-home-card,
.jdt-platform-card {
	background: rgb(21 28 25 / 88%);
	border: 1px solid var(--jdt-border);
	border-radius: var(--jdt-radius-lg);
	box-shadow: 0 0 0 rgb(0 0 0 / 0%);
	height: 100%;
	padding: clamp(1.35rem, 3vw, 2.25rem);
}

.jdt-platform-card:hover {
	border-color: rgb(215 180 119 / 45%);
	box-shadow: var(--jdt-shadow-card);
	transform: translateY(-2px);
}

.jdt-platform-card h3 {
	margin-top: 0.5rem;
}

.jdt-card-status {
	background: rgb(215 180 119 / 14%);
	border: 1px solid rgb(215 180 119 / 30%);
	border-radius: 999px;
	color: var(--wp--preset--color--bronze-light);
	display: inline-flex;
	font-size: 0.78rem;
	font-weight: 750;
	letter-spacing: 0.08em;
	padding: 0.28rem 0.7rem;
	text-transform: uppercase;
}

.jdt-card-status--live {
	background: rgb(71 107 85 / 28%);
	border-color: rgb(141 193 158 / 35%);
	color: #d8f0df;
}

.jdt-channel-panel {
	align-items: center;
	background:
		linear-gradient(115deg, rgb(182 135 75 / 20%), transparent 44%),
		rgb(21 28 25 / 92%);
	border: 1px solid var(--jdt-border);
	border-radius: var(--jdt-radius-lg);
	display: grid;
	gap: clamp(1.5rem, 4vw, 4rem);
	grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.65fr);
	padding: clamp(1.5rem, 4vw, 3.5rem);
}

.jdt-channel-mark {
	align-items: center;
	background: var(--wp--preset--color--bronze-light);
	border-radius: 50%;
	color: var(--wp--preset--color--ink);
	display: flex;
	font-size: clamp(2rem, 7vw, 4rem);
	font-weight: 800;
	height: clamp(7rem, 16vw, 11rem);
	justify-content: center;
	justify-self: center;
	line-height: 1;
	width: clamp(7rem, 16vw, 11rem);
}

.jdt-feature {
	align-items: stretch;
	display: grid;
	gap: clamp(1.5rem, 4vw, 4rem);
	grid-template-columns: minmax(17rem, 0.8fr) minmax(0, 1.2fr);
}

.jdt-feature-media {
	border: 1px solid var(--jdt-border);
	border-radius: var(--jdt-radius-lg);
	box-shadow: var(--jdt-shadow-soft);
	margin: 0;
	min-height: 23rem;
	overflow: hidden;
}

.jdt-feature-media img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.jdt-feature-media--brand {
	align-items: center;
	background:
		radial-gradient(circle at 50% 45%, rgba(64, 146, 74, 0.22), transparent 46%),
		linear-gradient(145deg, rgba(17, 23, 21, 0.98), rgba(8, 12, 12, 0.98));
	display: flex;
	justify-content: center;
	padding: clamp(2rem, 6vw, 5rem);
}

.jdt-feature-media--brand img {
	height: auto;
	max-width: 20rem;
	object-fit: contain;
	width: min(100%, 20rem);
}

.jdt-feature-copy {
	align-content: center;
	display: grid;
}

.jdt-feature-copy > :first-child {
	margin-top: 0;
}

.jdt-roadmap-note {
	border-left: 4px solid var(--wp--preset--color--bronze);
	color: var(--wp--preset--color--mist);
	margin-top: var(--wp--preset--spacing--40);
	padding-left: var(--wp--preset--spacing--30);
}

/* Contenus, archives et formulaires */
.jdt-main {
	min-height: 48vh;
}

.jdt-content-shell {
	background: rgb(21 28 25 / 86%);
	border: 1px solid rgb(215 180 119 / 18%);
	border-radius: var(--jdt-radius-lg);
	box-shadow: var(--jdt-shadow-soft);
}

.jdt-page-shell {
	margin-inline: auto;
	max-width: min(calc(100% - 2rem), 90rem);
	width: 100%;
}

.jdt-page-title,
.jdt-archive-title {
	text-wrap: balance;
}

.jdt-post-card {
	background: linear-gradient(145deg, rgb(30 56 46 / 58%), rgb(21 28 25 / 82%));
	border: 1px solid rgb(215 180 119 / 18%);
	border-radius: var(--jdt-radius-md);
	height: 100%;
	overflow: hidden;
}

.jdt-post-card:hover {
	border-color: rgb(215 180 119 / 42%);
	box-shadow: var(--jdt-shadow-card);
	transform: translateY(-2px);
}

.jdt-post-card .wp-block-post-featured-image {
	margin: 0;
}

.jdt-post-card .wp-block-post-featured-image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.jdt-post-card-body {
	padding: var(--wp--preset--spacing--30);
}

.jdt-post-meta {
	color: var(--wp--preset--color--mist);
	font-size: var(--wp--preset--font-size--small);
}

.jdt-pagination {
	border-top: 1px solid rgb(215 180 119 / 18%);
	padding-top: var(--wp--preset--spacing--30);
}

.jdt-character-shell {
	max-width: min(100%, 90rem);
}

.jdt-character-shell .wp-block-post-content {
	max-width: none;
}

.wp-block-search__inside-wrapper {
	border-color: rgb(215 180 119 / 34%);
	border-radius: var(--jdt-radius-sm);
}

input,
select,
textarea {
	background: var(--wp--preset--color--night);
	border: 1px solid rgb(215 180 119 / 42%);
	color: var(--wp--preset--color--parchment);
}

/* Pied de page */
.jdt-site-footer {
	background: #090d0c;
	border-top: 1px solid rgb(215 180 119 / 18%);
}

.jdt-footer-brand {
	align-items: center;
	display: flex;
	gap: 1rem;
	margin-bottom: 1rem;
}

.jdt-footer-brand img {
	height: 4.5rem;
	object-fit: contain;
	width: 4.5rem;
}

.jdt-footer-brand .wp-block-site-title {
	margin: 0;
}

.jdt-site-footer .wp-block-navigation-item__content {
	color: var(--wp--preset--color--mist);
	text-decoration: none;
}

.jdt-site-footer .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--bronze-light);
}

.jdt-footer-bottom {
	border-top: 1px solid rgb(215 180 119 / 14%);
}

@media (max-width: 1100px) {
	.jdt-header-inner {
		min-height: 4.75rem;
	}

	.jdt-brand-copy p {
		display: none;
	}

	.jdt-brand img {
		height: auto;
		width: 3.5rem;
	}

	body .jdt-primary-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	body .jdt-primary-navigation .wp-block-navigation__responsive-container-open {
		display: inline-flex !important;
	}
}

@media (min-width: 1101px) {
	body .jdt-primary-navigation .wp-block-navigation__responsive-container-open {
		display: none !important;
	}
}

@media (max-width: 900px) {
	.jdt-hero {
		display: block;
		min-height: 0;
	}

	.jdt-hero-media {
		height: clamp(20rem, 52vw, 27rem);
		min-height: 0;
	}

	.jdt-hero-panel {
		border-left: 0;
		border-top: 1px solid var(--jdt-border);
		padding: clamp(2rem, 7vw, 4rem) clamp(1rem, 5vw, 2.5rem);
	}

	.jdt-hero-copy {
		max-width: 44rem;
	}

	.jdt-hero h1 {
		max-width: 14ch;
	}

	.jdt-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jdt-channel-panel,
	.jdt-feature {
		grid-template-columns: 1fr;
	}

	.jdt-channel-mark {
		grid-row: 1;
		justify-self: start;
	}

	.jdt-feature-media {
		max-height: 30rem;
		min-height: 20rem;
	}
}

@media (max-width: 782px) {
	.admin-bar .jdt-site-header {
		top: 46px;
	}

	.jdt-content-shell {
		border-left: 0;
		border-radius: 0;
		border-right: 0;
	}

	.jdt-page-shell {
		max-width: 100%;
	}
}

@media (max-width: 600px) {
	.jdt-header-inner {
		gap: 0.75rem !important;
	}

	.jdt-brand {
		gap: 0.65rem !important;
	}

	.jdt-brand img {
		height: auto;
		width: 3.15rem;
	}

	.jdt-brand-copy .wp-block-site-title {
		font-size: 1rem;
		letter-spacing: 0.025em;
	}

	.jdt-hero-media {
		height: min(112vw, 25rem);
	}

	.jdt-hero h1 {
		font-size: clamp(2.35rem, 12vw, 3.55rem);
	}

	.jdt-hero-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.jdt-hero-actions .wp-block-button,
	.jdt-hero-actions .wp-block-button__link {
		width: 100%;
	}

	.jdt-card-grid {
		grid-template-columns: 1fr;
	}

	.jdt-section {
		padding-block: 3.25rem;
	}

	.jdt-footer-brand img {
		height: 3.75rem;
		width: 3.75rem;
	}
}

@media (max-width: 360px) {
	.jdt-brand-copy .wp-block-site-title {
		font-size: 0.92rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

@media (forced-colors: active) {
	.jdt-content-shell,
	.jdt-post-card,
	.jdt-platform-card,
	.jdt-site-header,
	.jdt-site-footer {
		border: 1px solid CanvasText;
	}
}

/* Legacy legal pages: readable contrast without editing protected content. */
@media screen {
	body:is(.page-id-169, .page-id-170, .page-id-171, .page-id-172)
		.jdt-page-shell .elementor-heading-title,
	body:is(.page-id-169, .page-id-170, .page-id-171, .page-id-172)
		.jdt-page-shell .elementor-widget-text-editor,
	body:is(.page-id-169, .page-id-170, .page-id-171, .page-id-172)
		.jdt-page-shell .elementor-widget-text-editor :where(p, li, span, strong, em) {
		color: var(--wp--preset--color--parchment) !important;
	}

	body:is(.page-id-169, .page-id-170, .page-id-171, .page-id-172)
		.jdt-page-shell .elementor-widget-text-editor a {
		color: var(--wp--preset--color--bronze-light) !important;
	}
}
/* End legacy legal pages. */

@media print {
	.jdt-site-header,
	.jdt-site-footer,
	.jdt-hero-actions,
	.wp-block-query-pagination {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}

	a {
		color: inherit;
	}
}