/*
Theme Name: Bellefontaine
Theme URI: https://www.golfbellefontaine.com/
Author: LDIED - Le Domaine Informatique Et Domotique
Author URI: https://www.ldied.com/
Description: Thème bloc sur mesure du Golf Club Bellefontaine. Aucune ressource distante, polices embarquées, éditable intégralement depuis l'éditeur de site.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
Version: 1.0.8
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bellefontaine
Tags: block-styles, full-site-editing, one-column, custom-colors, custom-logo, accessibility-ready
*/

/* --------------------------------------------------------------------------
   Variables sémantiques.
   Les composants ci-dessous ne référencent jamais une valeur brute : ils
   passent par ces variables, elles-mêmes alimentées par les jetons déclarés
   dans theme.json. Changer la charte revient à changer theme.json.
   -------------------------------------------------------------------------- */
:root {
	--gbf-color-primary: var(--wp--preset--color--primary);
	--gbf-color-primary-deep: var(--wp--preset--color--primary-deep);
	--gbf-color-accent: var(--wp--preset--color--accent);
	--gbf-color-text: var(--wp--preset--color--text);
	--gbf-color-text-inverse: var(--wp--preset--color--text-inverse);
	--gbf-surface-veil: var(--wp--custom--veil);
	--gbf-surface-veil-border: var(--wp--custom--veil-border);
	--gbf-font-display: var(--wp--preset--font-family--display);
	--gbf-font-body: var(--wp--preset--font-family--body);

	/* Facteur d'échelle de l'affiche d'accueil. Sur mobile seule la largeur
	   compte ; au-delà, la composition se cale aussi sur la hauteur pour tenir
	   dans une seule vue, sans défilement. */
	--gbf-scale: 1vw;
}

@media (min-width: 761px) {
	:root {
		--gbf-scale: min(1vw, 1.08svh);
	}
}

/* --------------------------------------------------------------------------
   Affiche d'accueil
   -------------------------------------------------------------------------- */
/* WordPress applique aux enfants d'un groupe en mise en page « flux » une marge
   haute de 24 px, sauf au premier. Dans une grille, cette exception désaligne la
   première colonne : la pastille GOLF monte de 24 px et les trois autres
   descendent d'autant. Tous les espacements de l'affiche passent par gap, donc
   ces marges sont neutralisées. La règle générée par WordPress est de
   spécificité nulle — elle utilise :where() — un simple sélecteur de classe
   suffit à reprendre la main, sans !important. */
.gbf-affiche *,
.gbf-pied *,
body.home .wp-site-blocks > * {
	/* !important assumé : dans l'écran d'édition, WordPress sert ces mêmes
	   règles de marge préfixées par .editor-styles-wrapper, donc à spécificité
	   égale à la nôtre et déclarées après. Sans cette priorité, l'alignement
	   est correct sur le site mais faux dans l'éditeur. */
	margin-block: 0 !important;
}

/* Respiration entre le mot CONTACT et le numéro, que la règle ci-dessus
   annulerait sinon. */
.gbf-contact h2 {
	margin-bottom: 0.12em !important;
}

body.home {
	background: var(--wp--preset--gradient--fairway) no-repeat;
	color: var(--gbf-color-text-inverse);
}

body.home .wp-site-blocks {
	min-height: 100svh;
	display: flex;
	flex-direction: column;
}

body.home .wp-site-blocks > main {
	flex: 1 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Le bloc post-content interpose son propre conteneur entre <main> et
   l'affiche. Devenu élément flexible, il se dimensionne sur son contenu au lieu
   de prendre toute la largeur, et décale l'ensemble de la composition vers la
   droite. On le force à occuper la ligne. */
body.home .wp-site-blocks > main > * {
	width: 100%;
	min-width: 0;
}

.gbf-affiche {
	width: 100%;
	padding-block: clamp(22px, calc(3.2 * var(--gbf-scale)), 40px) clamp(26px, calc(3.6 * var(--gbf-scale)), 48px);
	padding-inline: clamp(16px, calc(4 * var(--gbf-scale)), 56px);
}

.gbf-contenu {
	max-width: 1180px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(18px, calc(2.5 * var(--gbf-scale)), 32px);
}

.gbf-contenu > * {
	margin-block: 0;
}

/* En-tête : blason à gauche, titre centré sur l'espace restant.

   WordPress génère ses propres règles de mise en page pour les groupes
   (`is-layout-flex`, `wp-container-core-group-is-layout-…`) et les imprime après
   la feuille du thème. Si l'éditeur reconstruit ce groupe — cas d'une
   « tentative de récupération » — il peut lui attribuer une mise en page flex
   centrée, qui l'emporte alors sur la nôtre et colle le blason contre le titre.

   D'où le sélecteur structurel et les !important qui suivent : ils ne servent
   pas à contourner une règle du thème, mais à reprendre la main sur du CSS
   généré que nous ne maîtrisons pas. Le premier enfant de .gbf-contenu est
   toujours l'en-tête de l'affiche. */
.gbf-entete,
.gbf-contenu > :first-child {
	width: 100% !important;
	display: grid !important;
	grid-template-columns: auto 1fr !important;
	align-items: center;
	justify-content: initial !important;
	gap: clamp(16px, calc(3 * var(--gbf-scale)), 40px) !important;
}

.gbf-contenu > :first-child > * {
	margin: 0;
}

.gbf-logo {
	margin: 0;
}

.gbf-logo img {
	width: clamp(92px, calc(13.5 * var(--gbf-scale)), 196px);
	height: auto;
	display: block;
}

.gbf-titre,
.gbf-contenu > :first-child > h1 {
	grid-column: 2;
	justify-self: center;
	margin: 0;
	font-family: var(--gbf-font-display);
	font-weight: 400;
	font-size: clamp(2.5rem, calc(8.6 * var(--gbf-scale)), 6.6rem);
	line-height: 0.98;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center;
	text-wrap: balance;
	color: var(--gbf-color-text-inverse);
}

/* Bandeau horaires */
.gbf-horaires {
	width: min(100%, 880px);
	display: flex;
	align-items: center;
	gap: clamp(14px, calc(2.4 * var(--gbf-scale)), 28px);
	padding: clamp(14px, calc(2 * var(--gbf-scale)), 22px) clamp(18px, calc(3 * var(--gbf-scale)), 34px);
	background: var(--gbf-surface-veil);
	border: 1px solid var(--gbf-surface-veil-border);
	color: var(--gbf-color-text);
}

.gbf-horaires .gbf-icone {
	margin: 0;
	flex: 0 0 auto;
}

.gbf-horaires .gbf-icone img {
	width: clamp(38px, calc(5 * var(--gbf-scale)), 64px);
	height: auto;
	display: block;
}

.gbf-horaires p {
	margin: 0;
	font-weight: 700;
	font-size: clamp(0.98rem, calc(2.25 * var(--gbf-scale)), 1.6rem);
	line-height: 1.32;
	text-transform: uppercase;
	color: var(--gbf-color-text);
}

/* Chapeau et prestations */
.gbf-chapeau {
	margin: 0;
	font-family: var(--gbf-font-display);
	font-weight: 400;
	font-size: clamp(1.15rem, calc(3.1 * var(--gbf-scale)), 2.35rem);
	letter-spacing: 0.045em;
	text-transform: uppercase;
	text-align: center;
	color: var(--gbf-color-text-inverse);
}

.gbf-prestations {
	width: min(100%, 860px);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(12px, calc(2.6 * var(--gbf-scale)), 32px);
}

.gbf-prestation {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(8px, calc(1.2 * var(--gbf-scale)), 14px);
}

.gbf-prestation .gbf-icone {
	margin: 0;
	width: clamp(64px, calc(8.6 * var(--gbf-scale)), 112px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--gbf-surface-veil);
	display: grid;
	place-items: center;
}

.gbf-prestation .gbf-icone img {
	width: 52%;
	height: auto;
	display: block;
}

.gbf-prestation p {
	margin: 0;
	font-weight: 600;
	font-size: clamp(0.66rem, calc(1.35 * var(--gbf-scale)), 0.95rem);
	letter-spacing: 0.055em;
	text-transform: uppercase;
	text-align: center;
	color: var(--gbf-color-text);
}

/* Bloc contact */
.gbf-contact {
	width: min(100%, 880px);
	padding: clamp(16px, calc(2.1 * var(--gbf-scale)), 26px) clamp(18px, calc(3 * var(--gbf-scale)), 34px);
	background: var(--gbf-surface-veil);
	border: 1px solid var(--gbf-surface-veil-border);
	color: var(--gbf-color-text);
	text-align: center;
	font-family: var(--gbf-font-display);
}

.gbf-contact > * {
	margin-block: 0;
}

.gbf-contact h2 {
	margin-bottom: 0.12em;
	font-weight: 400;
	font-size: clamp(1.5rem, calc(3.4 * var(--gbf-scale)), 2.6rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gbf-color-text);
}

.gbf-contact p {
	line-height: 1.25;
	color: var(--gbf-color-text);
}

.gbf-contact a {
	color: inherit;
	text-decoration: none;
}

.gbf-contact a:hover,
.gbf-contact a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.gbf-telephone {
	font-size: clamp(1.6rem, calc(4.1 * var(--gbf-scale)), 3rem);
	letter-spacing: 0.03em;
}

.gbf-courriel {
	font-size: clamp(1rem, calc(2.6 * var(--gbf-scale)), 1.85rem);
	word-break: break-word;
}

.gbf-annonce {
	margin: 0;
	font-family: var(--gbf-font-body);
	font-weight: 500;
	font-size: clamp(0.7rem, calc(1.55 * var(--gbf-scale)), 1.02rem);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
	color: var(--gbf-color-text);
}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.gbf-pied {
	background: var(--gbf-color-primary-deep);
	color: var(--gbf-color-text-inverse);
	padding: clamp(12px, calc(1.8 * var(--gbf-scale)), 20px) clamp(16px, calc(4 * var(--gbf-scale)), 48px);
}

.gbf-pied p {
	margin: 0;
	font-family: var(--gbf-font-display);
	font-size: clamp(1rem, calc(2.3 * var(--gbf-scale)), 1.6rem);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	color: var(--gbf-color-text-inverse);
}

/* --------------------------------------------------------------------------
   Accessibilité
   -------------------------------------------------------------------------- */
.gbf-lien-evitement {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.75rem 1.25rem;
	background: var(--gbf-color-text-inverse);
	color: var(--gbf-color-primary);
	font-weight: 600;
}

.gbf-lien-evitement:focus {
	left: 0.5rem;
	top: 0.5rem;
}

a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--gbf-color-accent);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Adaptations mobile
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
	.gbf-entete {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 14px;
	}

	.gbf-titre {
		grid-column: 1;
	}

	.gbf-horaires {
		flex-direction: column;
		text-align: center;
		gap: 12px;
	}

	.gbf-prestations {
		grid-template-columns: repeat(2, 1fr);
		gap: 22px;
	}
}

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

@media print {
	body.home {
		background: #fff;
		color: #000;
	}

	.gbf-horaires,
	.gbf-contact,
	.gbf-prestation .gbf-icone {
		background: #eee;
	}
}