/* =====================================================
   Mini Golf Planet - base
   Variables et classes utilitaires communes.
===================================================== */

/* COULEURS */
:root {
	--color-green: #248B59;
	--color-blue: #0099B5;
	--color-orange: #C95516;
	--color-indigo: #2F1FB5;
	--color-forest: #183D35;
	--color-sand: #F5F0E6;
	--color-ivory: #FFFCF7;

	--mgp-max-width: 1500px; /* = Largeur du conteneur GeneratePress */
}


/* POLICES (déclarées dans fonts.css) */
:root {
	--font-heading: 'Outfit', 'Montserrat', system-ui, sans-serif;
	--font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Mêmes sélecteurs que GeneratePress pour remplacer sa police système. */
body,
button,
input,
select,
textarea {
	font-family: var(--font-body);
}

h1, h2, h3, h4, h5,
.main-title,
.site-title {
	font-family: var(--font-heading);
}

.font-heading { font-family: var(--font-heading); }
.font-body    { font-family: var(--font-body); }


/* Fond : .bg-[couleur] */
.bg-green  { background-color: var(--color-green); }
.bg-blue   { background-color: var(--color-blue); }
.bg-orange { background-color: var(--color-orange); }
.bg-indigo { background-color: var(--color-indigo); }
.bg-forest { background-color: var(--color-forest); }
.bg-sand   { background-color: var(--color-sand); }
.bg-ivory  { background-color: var(--color-ivory); }


/* Texte : .color-[couleur] */
.color-green  { color: var(--color-green); }
.color-blue   { color: var(--color-blue); }
.color-orange { color: var(--color-orange); }
.color-indigo { color: var(--color-indigo); }
.color-forest { color: var(--color-forest); }
.color-sand   { color: var(--color-sand); }
.color-ivory  { color: var(--color-ivory); }


/* Texte au survol : .color-hover-[couleur] */
.color-hover-green:hover,  .color-hover-green:focus-visible  { color: var(--color-green); }
.color-hover-blue:hover,   .color-hover-blue:focus-visible   { color: var(--color-blue); }
.color-hover-orange:hover, .color-hover-orange:focus-visible { color: var(--color-orange); }
.color-hover-indigo:hover, .color-hover-indigo:focus-visible { color: var(--color-indigo); }
.color-hover-forest:hover, .color-hover-forest:focus-visible { color: var(--color-forest); }
.color-hover-sand:hover,   .color-hover-sand:focus-visible   { color: var(--color-sand); }
.color-hover-ivory:hover,  .color-hover-ivory:focus-visible  { color: var(--color-ivory); }


/* Fond au survol : .bg-hover-[couleur] */
.bg-hover-green:hover,  .bg-hover-green:focus-visible  { background-color: var(--color-green); }
.bg-hover-blue:hover,   .bg-hover-blue:focus-visible   { background-color: var(--color-blue); }
.bg-hover-orange:hover, .bg-hover-orange:focus-visible { background-color: var(--color-orange); }
.bg-hover-indigo:hover, .bg-hover-indigo:focus-visible { background-color: var(--color-indigo); }
.bg-hover-forest:hover, .bg-hover-forest:focus-visible { background-color: var(--color-forest); }
.bg-hover-sand:hover,   .bg-hover-sand:focus-visible   { background-color: var(--color-sand); }
.bg-hover-ivory:hover,  .bg-hover-ivory:focus-visible  { background-color: var(--color-ivory); }


/* Bordure : .border-[couleur] */
.border-green  { border-color: var(--color-green); }
.border-blue   { border-color: var(--color-blue); }
.border-orange { border-color: var(--color-orange); }
.border-indigo { border-color: var(--color-indigo); }
.border-forest { border-color: var(--color-forest); }
.border-sand   { border-color: var(--color-sand); }
.border-ivory  { border-color: var(--color-ivory); }


/* =====================================================
   MISE EN PAGE (même principe que Board Game Rules)
   Les templates customs empilent des <section> pleine largeur ;
   le .grid-container intérieur limite la largeur du contenu.
===================================================== */

html,
body { overflow-x: hidden; }

.site { padding: 0 !important; min-width: 100% !important; }
.site-main > * { margin-bottom: 0; }
.separate-containers .site-main { margin: 0; }
.one-container .site-content { padding: 0; }
.site-content #primary.content-area-full,
.site-content .content-area { min-width: 100%; }

section { display: block; position: relative; }

/* Seulement dans nos sections : GeneratePress utilise aussi .grid-container dans l'en-tête et le pied. */
section > .grid-container {
	width: 100%;
	padding: 0 30px;
}

/* Espacement vertical sur la section elle-même ; le .grid-container gère les côtés. */
section:has(> .grid-container) {
	padding-top: 80px;
	padding-bottom: 80px;
}


/* =====================================================
   TYPOGRAPHIE
===================================================== */

h1, h2, h3, h4, h5 {
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--color-forest);
}

h1 { font-size: 56px; line-height: 1.05em; margin-bottom: 24px; }
h2 { font-size: 40px; line-height: 1.1em; margin-bottom: 24px; font-weight: 700; }
h3 { font-size: 22px; line-height: 1.2em; margin-bottom: 12px; }
h4 { font-size: 18px; line-height: 1.2em; margin-bottom: 12px; font-weight: 700; text-transform: uppercase; }
h5 { font-size: 17px; line-height: 1.2em; margin-bottom: 12px; }

/* Un lien dans un titre reprend le style du titre. */
h1 a, h2 a, h3 a, h4 a, h5 a {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
}

p {
	font-size: 16px;
	line-height: 1.6em;
	margin-bottom: 20px;
}

p:last-child { margin-bottom: 0; }


/* =====================================================
   BOUTONS
===================================================== */

.btn,
.button,
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	padding: 12px 24px;
	border: 0;
	border-radius: 40px;
	font-family: var(--font-body);
	font-weight: 700;
	line-height: 1.2em;
	color: var(--color-ivory);
	background-color: var(--color-orange); /* Boutons et appels à l'action : orange */
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.btn:hover,
.btn:focus-visible,
.button:hover,
input[type="submit"]:hover {
	color: var(--color-ivory);
	background-color: var(--color-forest);
}

/* Lien d'appel à l'action (texte + flèche) : orange. */
.cta-link,
.cta-link:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	color: var(--color-orange);
}

.cta-link:hover,
.cta-link:focus-visible {
	color: var(--color-forest);
}

.btn .mgp-icon { width: 18px; height: 18px; }

/* Variantes de couleur d'un bouton : les classes bg-* / color-* l'emportent sur .btn. */
.btn.bg-green { background-color: var(--color-green); }
.btn.bg-blue { background-color: var(--color-blue); }
.btn.bg-orange { background-color: var(--color-orange); }
.btn.bg-indigo { background-color: var(--color-indigo); }
.btn.bg-forest { background-color: var(--color-forest); }
.btn.bg-sand { background-color: var(--color-sand); }
.btn.bg-ivory { background-color: var(--color-ivory); }
.btn.color-green { color: var(--color-green); }
.btn.color-blue { color: var(--color-blue); }
.btn.color-orange { color: var(--color-orange); }
.btn.color-indigo { color: var(--color-indigo); }
.btn.color-forest { color: var(--color-forest); }
.btn.color-sand { color: var(--color-sand); }
.btn.color-ivory { color: var(--color-ivory); }
.btn.bg-hover-green:hover, .btn.bg-hover-green:focus-visible { background-color: var(--color-green); }
.btn.bg-hover-blue:hover, .btn.bg-hover-blue:focus-visible { background-color: var(--color-blue); }
.btn.bg-hover-orange:hover, .btn.bg-hover-orange:focus-visible { background-color: var(--color-orange); }
.btn.bg-hover-indigo:hover, .btn.bg-hover-indigo:focus-visible { background-color: var(--color-indigo); }
.btn.bg-hover-forest:hover, .btn.bg-hover-forest:focus-visible { background-color: var(--color-forest); }
.btn.bg-hover-sand:hover, .btn.bg-hover-sand:focus-visible { background-color: var(--color-sand); }
.btn.bg-hover-ivory:hover, .btn.bg-hover-ivory:focus-visible { background-color: var(--color-ivory); }
.btn.color-hover-green:hover, .btn.color-hover-green:focus-visible { color: var(--color-green); }
.btn.color-hover-blue:hover, .btn.color-hover-blue:focus-visible { color: var(--color-blue); }
.btn.color-hover-orange:hover, .btn.color-hover-orange:focus-visible { color: var(--color-orange); }
.btn.color-hover-indigo:hover, .btn.color-hover-indigo:focus-visible { color: var(--color-indigo); }
.btn.color-hover-forest:hover, .btn.color-hover-forest:focus-visible { color: var(--color-forest); }
.btn.color-hover-sand:hover, .btn.color-hover-sand:focus-visible { color: var(--color-sand); }
.btn.color-hover-ivory:hover, .btn.color-hover-ivory:focus-visible { color: var(--color-ivory); }


/* =====================================================
   FIL D'ARIANE (bandeaux en dégradé : fiche, listes)
===================================================== */

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin-bottom: 18px;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.breadcrumb a {
	font-size: 13px;
	color: var(--color-ivory);
	opacity: 0.85;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
	opacity: 1;
	color: var(--color-ivory);
	text-decoration: underline;
}

.breadcrumb .mgp-icon {
	width: 14px;
	height: 14px;
	color: var(--color-ivory);
	opacity: 0.6;
}


/* =====================================================
   TITRES DE SECTION ET FAQ (pages de liste, fiches)
===================================================== */

.mgp-section-heading h2 {
	margin-bottom: 0;
}

.mgp-section-heading h2 em {
	color: var(--color-green);
}

.mgp-section-divider {
	margin: 20px 0 30px;
	border: 0;
	border-top: 1px solid rgba(24, 61, 53, 0.12);
	background: none;
}

/* FAQ : toujours sur fond vert, titre (et son <em>) en ivoire, accordéons ivoire, vert forêt au survol / ouverts. */
section.mgp-faq {
	background-color: var(--color-green);
	color: var(--color-ivory);
}

section.mgp-faq .mgp-section-heading h2,
section.mgp-faq .mgp-section-heading h2 em {
	color: var(--color-ivory);
}

section.mgp-faq .mgp-section-divider {
	border-top-color: rgba(255, 252, 247, 0.3);
}

section.mgp-faq .mgp-faq-item {
	color: var(--color-forest);
}

.mgp-faq-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mgp-faq-item {
	border-radius: 14px;
	background-color: var(--color-ivory);
	overflow: hidden;
}

.mgp-faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 16px 22px;
	cursor: pointer;
	list-style: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.mgp-faq-item summary::-webkit-details-marker {
	display: none;
}

.mgp-faq-item summary h3 {
	margin: 0;
	font-size: 19px;
	line-height: 1.35;
	color: inherit;
}

.mgp-faq-item summary:hover,
.mgp-faq-item summary:focus-visible,
.mgp-faq-item[open] summary {
	background-color: var(--color-forest);
	color: var(--color-ivory);
}

.mgp-faq-toggle {
	position: relative;
	flex: 0 0 18px;
	height: 18px;
}

.mgp-faq-toggle::before,
.mgp-faq-toggle::after {
	content: "";
	position: absolute;
	top: 8px;
	left: 0;
	width: 18px;
	height: 2px;
	background-color: currentColor;
	transition: transform 0.25s ease;
}

.mgp-faq-toggle::after {
	transform: rotate(90deg);
}

.mgp-faq-item[open] .mgp-faq-toggle::after {
	transform: rotate(0deg);
}

.mgp-faq-answer {
	padding: 22px 26px 6px;
	border-left: 6px solid var(--color-green);
}

.mgp-faq-answer a {
	color: var(--color-orange);
	font-weight: 600;
	text-decoration: underline;
}


/* CARTE DES PARCOURS (Leaflet) */
section.listing-map {
	padding-top: 50px;
	padding-bottom: 0;
}

.mgp-map {
	height: 420px;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 3px 12px rgba(24, 61, 53, 0.08);
	z-index: 1;
}

.mgp-map-popup a {
	display: block;
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 600;
	color: var(--color-forest);
}

.mgp-map-popup span {
	font-size: 13px;
	opacity: 0.75;
}

/* NEAR ME */
.listing-filters .btn-near {
	background-color: var(--color-forest);
}

.listing-filters .btn-near:hover,
.listing-filters .btn-near:focus-visible {
	background-color: var(--color-green);
}

.listing-near-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: -16px 0 24px;
	font-weight: 600;
}

.listing-near-note .mgp-icon {
	width: 18px;
	height: 18px;
	color: var(--color-orange);
}

.listing-near-note a {
	color: var(--color-orange);
	text-decoration: underline;
}

.location-card-distance {
	margin: -4px 0 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--color-orange);
}


/* =====================================================
   UTILITAIRES
===================================================== */

.bg-mgp-gradient {
	background: linear-gradient(120deg, var(--color-forest) 0%, var(--color-green) 55%, var(--color-blue) 100%);
}

.text-center { text-align: center; }
.uppercase { text-transform: uppercase; }
.box-shadow { box-shadow: 0 3px 12px rgba(24, 61, 53, 0.12); }

.screen-reader-text:not(:focus) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

.show-1024, .show-768, .show-600 { display: none; }

@media screen and (max-width: 1024px) {
	h1 { font-size: 46px; }
	h2 { font-size: 34px; }
	.hide-1024 { display: none !important; }
	.show-1024 { display: block; }
}

@media screen and (max-width: 768px) {
	section:has(> .grid-container) { padding-top: 60px; padding-bottom: 60px; }
	.hide-768 { display: none !important; }
	.show-768 { display: block; }
}

/* Mobile = 600 px (même convention que Board Game Rules). */
@media screen and (max-width: 600px) {
	section > .grid-container { padding: 0 20px; }
	section:has(> .grid-container) { padding-top: 50px; padding-bottom: 50px; }
	h1 { font-size: 36px; }
	h2 { font-size: 28px; }
	.hide-600 { display: none !important; }
	.show-600 { display: block; }
}

/* Drapeaux (mgp_flag) */
.mgp-flag {
	display: inline-block;
	flex: 0 0 auto;
	object-fit: cover;
}
.mgp-flag-round {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(24, 61, 53, 0.15);
}
.mgp-flag-rect {
	width: 24px;
	height: 18px;
	border-radius: 5px;
	box-shadow: 0 0 0 1px rgba(24, 61, 53, 0.15);
}


/* VAGUES ENTRE LES SECTIONS — DÉSACTIVÉES TEMPORAIREMENT (2026-10-24), on y reviendra.
   Pour réactiver : retirer ce commentaire et remettre « /* » et « */ » à la place de « (* » et « *) ».

(* =====================================================
   VAGUES ENTRE LES SECTIONS (statiques, sans animation)
   Le haut de chaque section qui suit une autre section (même séparée par un script) prend la forme d'une vague dans sa propre couleur,
   avec une 2e vague semi-transparente derrière (profondeur). Désactiver avec la classe .no-wave.
===================================================== *)
main section ~ section:not(.no-wave)::before,
main section ~ section:not(.no-wave)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	pointer-events: none;
	background: inherit;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

(* Vague pleine *)
main section ~ section:not(.no-wave)::before {
	height: 46px;
	margin-bottom: -1px; (* pas de fente d'un pixel entre la vague et la section *)
	z-index: 2;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 38C220 8 470 6 730 28s520 40 710 6v26H0z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 38C220 8 470 6 730 28s520 40 710 6v26H0z'/%3E%3C/svg%3E");
}

(* Vague semi-transparente, décalée *)
main section ~ section:not(.no-wave)::after {
	height: 62px;
	z-index: 1;
	opacity: 0.45;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 20C260 52 520 50 800 24S1250 -6 1440 22v38H0z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 20C260 52 520 50 800 24S1250 -6 1440 22v38H0z'/%3E%3C/svg%3E");
}

(* Section sans fond explicite : fond sable du site *)
main section ~ section:not([class*="bg-"]):not(.no-wave)::before,
main section ~ section:not([class*="bg-"]):not(.no-wave)::after {
	background: var(--color-sand);
}

(* Pas de vague sous la barre d'ancres (elle colle en haut de l'écran) *)
main nav + section:not(.no-wave)::before,
main nav + section:not(.no-wave)::after {
	display: none;
}

@media (max-width: 768px) {
	main section ~ section:not(.no-wave)::before { height: 24px; }
	main section ~ section:not(.no-wave)::after { height: 34px; }
}
*/