/*
Theme Name:   Pickleball Guide
Theme URI:    https://www.pickleball-guide.com/
Description:  Thème enfant d'Astra pour Pickleball Guide. Identité « terrain » : bleu court, vert de bordure, lignes blanches, jaune balle. Polices auto-hébergées (Archivo, Source Serif 4), FAQ en données structurées, liens affiliés balisés.
Author:       Pickleball Guide
Template:     astra
Version:      1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License:      GPL-2.0-or-later
Text Domain:  pickleball-guide
*/

/* ------------------------------------------------------------------
   1. Polices (auto-hébergées : pas d'appel à Google Fonts, RGPD)
------------------------------------------------------------------- */
@font-face {
	font-family: "Archivo PG";
	src: url("assets/fonts/archivo-var.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Source Serif PG";
	src: url("assets/fonts/sourceserif4-var.woff2") format("woff2-variations");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Source Serif PG";
	src: url("assets/fonts/sourceserif4-var-italic.woff2") format("woff2-variations");
	font-weight: 200 900;
	font-style: italic;
	font-display: swap;
}

/* ------------------------------------------------------------------
   2. Jetons
------------------------------------------------------------------- */
:root:root {
	--pg-court: #1e4b8f;        /* bleu du court */
	--pg-court-deep: #163a70;
	--pg-surround: #2e7a57;     /* vert de bordure du terrain */
	--pg-surround-tint: #e8f2ec;
	--pg-ball: #e3ee3b;         /* jaune balle */
	--pg-ink: #15233b;
	--pg-text: #2c3a55;
	--pg-muted: #5a6880;
	--pg-paper: #f5f7fa;
	--pg-rule: #d5dce6;
	--pg-white: #ffffff;

	--pg-display: "Archivo PG", "Arial Narrow", Arial, sans-serif;
	--pg-serif: "Source Serif PG", Georgia, "Times New Roman", serif;

	/* Palette globale Astra */
	--ast-global-color-0: var(--pg-court);
	--ast-global-color-1: var(--pg-court-deep);
	--ast-global-color-2: var(--pg-ink);
	--ast-global-color-3: var(--pg-text);
	--ast-global-color-4: var(--pg-paper);
	--ast-global-color-5: var(--pg-white);
	--ast-global-color-6: var(--pg-surround-tint);
	--ast-global-color-7: var(--pg-rule);
	--ast-global-color-8: var(--pg-ink);
}

/* ------------------------------------------------------------------
   3. Base typographique
------------------------------------------------------------------- */
body,
button,
input,
select,
textarea {
	font-family: var(--pg-serif);
	color: var(--pg-text);
}
body {
	font-size: 1.1875rem; /* 19 px */
	line-height: 1.65;
	background: var(--pg-paper);
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title,
.ast-archive-title,
.entry-content :where(h1, h2, h3, h4) {
	font-family: var(--pg-display);
	color: var(--pg-ink);
	font-stretch: 112%;
	letter-spacing: -0.01em;
	line-height: 1.15;
	text-wrap: balance;
}
h1, .entry-title, .ast-archive-title { font-weight: 800; font-size: clamp(2rem, 1.4rem + 2.2vw, 2.75rem); }
.entry-content h2, h2 { font-weight: 800; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); margin-top: 2.2em; margin-bottom: 0.6em; }
.entry-content h3, h3 { font-weight: 700; font-size: 1.3rem; font-stretch: 105%; margin-top: 1.8em; margin-bottom: 0.4em; }
.entry-content h4, h4 { font-weight: 700; font-size: 1.1rem; font-stretch: 100%; }

.entry-content p,
.entry-content li { max-width: 68ch; }
.entry-content strong { color: var(--pg-ink); font-weight: 650; }

/* Liens : soulignement fin, surlignage jaune balle au survol */
.entry-content a,
.ast-single-post .entry-content a {
	color: var(--pg-court);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	text-decoration-color: color-mix(in srgb, var(--pg-court) 45%, transparent);
	transition: background-size 0.15s ease;
	background-image: linear-gradient(var(--pg-ball), var(--pg-ball));
	background-repeat: no-repeat;
	background-position: 0 88%;
	background-size: 0 0.42em;
}
.entry-content a:hover {
	color: var(--pg-ink);
	background-size: 100% 0.42em;
	text-decoration-color: var(--pg-ink);
}

/* Éléments d'interface en Archivo */
.main-header-menu,
.ast-builder-menu,
.entry-meta,
.ast-breadcrumbs,
.site-footer,
.ast-pagination,
.entry-content table,
.wp-block-button__link,
.ast-button,
button,
input[type="submit"],
.read-more {
	font-family: var(--pg-display);
	font-stretch: 100%;
}

/* ------------------------------------------------------------------
   4. En-tête : le court et sa ligne de fond
------------------------------------------------------------------- */
.site-header .ast-primary-header-bar,
.site-header .main-header-bar,
.ast-mobile-header-wrap .ast-primary-header-bar {
	background-color: var(--pg-court) !important;
	border-bottom: 0 !important;
	box-shadow: 0 4px 0 0 var(--pg-white), 0 12px 0 0 var(--pg-surround);
	margin-bottom: 12px;
}
.site-header .site-title,
.site-header .site-title a,
.site-header .site-title a:visited {
	color: var(--pg-white) !important;
	font-weight: 850;
	font-stretch: 118%;
	font-size: 1.45rem;
	letter-spacing: -0.015em;
}
.site-header .site-description { color: color-mix(in srgb, var(--pg-white) 75%, transparent) !important; font-family: var(--pg-display); font-size: 0.85rem; }

.site-header .main-header-menu .menu-link,
.site-header .ast-builder-menu .menu-item > .menu-link {
	color: var(--pg-white) !important;
	font-weight: 600;
	font-size: 1rem;
	padding-inline: 0.9em;
}
.site-header .main-header-menu .menu-item:hover > .menu-link,
.site-header .main-header-menu .current-menu-item > .menu-link,
.site-header .main-header-menu .current-menu-ancestor > .menu-link {
	color: var(--pg-ball) !important;
}
.ast-header-break-point .main-header-menu,
.ast-mobile-popup-drawer .ast-mobile-popup-inner {
	background-color: var(--pg-court-deep) !important;
}
.ast-mobile-menu-trigger-minimal svg,
.menu-toggle .ast-mobile-svg { fill: var(--pg-white) !important; }

/* ------------------------------------------------------------------
   5. Contenu des articles
------------------------------------------------------------------- */
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
.ast-plain-container .site-content article {
	background: var(--pg-white);
	border: 1px solid var(--pg-rule);
	border-radius: 6px;
}
.ast-separate-container .ast-article-single { padding: clamp(1.25rem, 3vw, 3rem); }

.single-post .entry-header .entry-title { margin-bottom: 0.3em; }
.single-post .entry-meta { color: var(--pg-muted); font-size: 0.9rem; }

/* La « cuisine » : encadré « L'essentiel à retenir ».
   Zone verte du terrain, ligne blanche intérieure comme la ligne de non-volée. */
.entry-content p[style*="lightblue"] {
	background: var(--pg-surround) !important;
	color: var(--pg-white);
	padding: 1.6rem 1.8rem !important;
	border-radius: 4px;
	outline: 3px solid var(--pg-white);
	outline-offset: -11px;
	max-width: none;
	font-size: 1.05rem;
	line-height: 1.6;
	margin: 0 0 2rem;
}
.entry-content p[style*="lightblue"] strong { color: var(--pg-white); font-weight: 700; box-shadow: inset 0 -0.35em 0 color-mix(in srgb, var(--pg-ball) 55%, transparent); }

/* Bloc « À lire aussi » (maillage interne) */
.entry-content .pg-related {
	background: var(--pg-paper) !important;
	border: 1px solid var(--pg-rule) !important;
	border-left: 6px solid var(--pg-court) !important;
	border-radius: 4px;
	padding: 1.1rem 1.4rem !important;
	margin: 2.5rem 0 !important;
}
.entry-content .pg-related p { margin: 0 0 0.4rem; font-family: var(--pg-display); font-size: 1rem; }
.entry-content .pg-related p strong { color: var(--pg-court); font-weight: 750; }
.entry-content .pg-related ul { margin: 0 0 0 1.1em; }
.entry-content .pg-related li { margin: 0.25em 0; font-size: 1.02rem; }

/* Tableaux : en-tête bleu court */
.entry-content table {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.95rem;
	border: 1px solid var(--pg-rule);
}
.entry-content thead th {
	background: var(--pg-court);
	color: var(--pg-white);
	font-weight: 700;
	text-align: left;
	padding: 0.7em 0.9em;
	border: 0;
}
.entry-content tbody td { padding: 0.65em 0.9em; border-top: 1px solid var(--pg-rule); border-left: 0; border-right: 0; }
.entry-content tbody tr:nth-child(even) td { background: var(--pg-paper); }

/* Citations */
.entry-content blockquote {
	border-left: 4px solid var(--pg-surround);
	background: var(--pg-surround-tint);
	margin: 1.8em 0;
	padding: 1rem 1.4rem;
	font-style: italic;
	color: var(--pg-ink);
}

/* Images */
.entry-content img { border-radius: 4px; }

/* Listes */
.entry-content ul li::marker { color: var(--pg-surround); }

/* Boutons : la balle */
.wp-block-button__link,
.ast-button,
.button,
input[type="submit"],
button.wp-element-button {
	background: var(--pg-ball) !important;
	color: var(--pg-ink) !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-weight: 700;
	padding: 0.75em 1.5em;
}
.wp-block-button__link:hover,
.ast-button:hover,
.button:hover,
input[type="submit"]:hover { background: #d4df25 !important; }

/* ------------------------------------------------------------------
   6. Accueil : le court vu du dessus
------------------------------------------------------------------- */
.home .entry-content > h1:first-child {
	position: relative;
	margin: 0 0 1.5rem;
	padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
	padding-right: clamp(1.5rem, 38%, 26rem);
	min-height: 18rem;
	display: flex;
	align-items: flex-end;
	background-color: var(--pg-court);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 440'%3E%3Crect x='6' y='6' width='208' height='428' fill='none' stroke='%23fff' stroke-width='5'/%3E%3Crect x='8.5' y='149' width='203' height='71' fill='%232e7a57'/%3E%3Crect x='8.5' y='220' width='203' height='71' fill='%232e7a57'/%3E%3Cline x1='6' y1='149' x2='214' y2='149' stroke='%23fff' stroke-width='5'/%3E%3Cline x1='6' y1='291' x2='214' y2='291' stroke='%23fff' stroke-width='5'/%3E%3Cline x1='110' y1='6' x2='110' y2='149' stroke='%23fff' stroke-width='5'/%3E%3Cline x1='110' y1='291' x2='110' y2='434' stroke='%23fff' stroke-width='5'/%3E%3Cline x1='0' y1='220' x2='220' y2='220' stroke='%23e3ee3b' stroke-width='4' stroke-dasharray='2 4'/%3E%3Ccircle cx='160' cy='90' r='9' fill='%23e3ee3b'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right clamp(1rem, 5vw, 4rem) center;
	background-size: auto 86%;
	border-radius: 6px;
	box-shadow: 0 0 0 4px var(--pg-white), 0 0 0 14px var(--pg-surround);
	color: var(--pg-white);
	font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem);
	font-weight: 850;
	font-stretch: 116%;
	line-height: 1.05;
	max-width: none;
}
.home .entry-content > h1:first-child + p {
	font-size: 1.25rem;
	margin-top: 2.6rem;
}
.home .entry-content > h2 {
	padding-top: 0.9rem;
	border-top: 3px solid var(--pg-court);
}
@media (max-width: 720px) {
	.home .entry-content > h1:first-child {
		padding: 1.75rem 1.5rem 10.5rem;
		min-height: 0;
		/* Court à l'horizontale sous le titre */
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 220'%3E%3Crect x='6' y='6' width='428' height='208' fill='none' stroke='%23fff' stroke-width='5'/%3E%3Crect x='149' y='8.5' width='71' height='203' fill='%232e7a57'/%3E%3Crect x='220' y='8.5' width='71' height='203' fill='%232e7a57'/%3E%3Cline x1='149' y1='6' x2='149' y2='214' stroke='%23fff' stroke-width='5'/%3E%3Cline x1='291' y1='6' x2='291' y2='214' stroke='%23fff' stroke-width='5'/%3E%3Cline x1='6' y1='110' x2='149' y2='110' stroke='%23fff' stroke-width='5'/%3E%3Cline x1='291' y1='110' x2='434' y2='110' stroke='%23fff' stroke-width='5'/%3E%3Cline x1='220' y1='0' x2='220' y2='220' stroke='%23e3ee3b' stroke-width='4' stroke-dasharray='2 4'/%3E%3Ccircle cx='350' cy='60' r='9' fill='%23e3ee3b'/%3E%3C/svg%3E");
		background-position: center bottom 1.5rem;
		background-size: min(88%, 300px) auto;
	}
}

/* ------------------------------------------------------------------
   7. Archives de catégorie
------------------------------------------------------------------- */
.ast-archive-description {
	background: var(--pg-court) !important;
	color: var(--pg-white);
	border-radius: 6px;
	box-shadow: 0 0 0 4px var(--pg-white), 0 0 0 12px var(--pg-surround);
	margin: 12px 12px 2.5rem !important;
	padding: 2rem 2.2rem !important;
}
.ast-archive-description .ast-archive-title,
.ast-archive-description p { color: var(--pg-white) !important; }
.ast-archive-description p { font-size: 1.1rem; max-width: 60ch; }

.blog .ast-article-post .entry-title,
.archive .ast-article-post .entry-title { font-size: 1.3rem; font-weight: 750; font-stretch: 106%; }
.blog .ast-article-post .entry-title a,
.archive .ast-article-post .entry-title a { color: var(--pg-ink); text-decoration: none; }
.blog .ast-article-post .entry-title a:hover,
.archive .ast-article-post .entry-title a:hover { color: var(--pg-court); }
.archive .ast-article-post .ast-excerpt-container,
.blog .ast-article-post .ast-excerpt-container { font-size: 1rem; color: var(--pg-muted); }

/* ------------------------------------------------------------------
   8. Pied de page
------------------------------------------------------------------- */
.site-footer,
.site-footer .site-primary-footer-wrap,
.site-footer .site-below-footer-wrap,
.site-footer .site-above-footer-wrap {
	background-color: var(--pg-ink) !important;
	color: #c9d2e0 !important;
}
.site-footer { border-top: 10px solid var(--pg-surround); box-shadow: inset 0 4px 0 var(--pg-white); }
.site-footer a { color: var(--pg-white) !important; }
.site-footer a:hover { color: var(--pg-ball) !important; }

/* ------------------------------------------------------------------
   9. Accessibilité
------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.menu-link:focus-visible {
	outline: 3px solid var(--pg-ink);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--pg-ball);
	border-radius: 2px;
}
.site-header a:focus-visible { outline-color: var(--pg-white); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}