/**
 * Base minimale.
 *
 * Le thème n'impose volontairement presque rien : la mise en forme vient des
 * réglages globaux Elementor importés avec le kit. Ce fichier ne couvre que
 * l'accessibilité et les gabarits de repli (en-tête, pied de page, blog).
 */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 20px;
	clip: auto;
	background: #111111;
	color: #B4FF25;
	font-weight: 600;
	text-decoration: none;
}

.galaxygym-padel-main {
	max-width: 1140px;
	margin: 0 auto;
	padding: 40px 20px;
	box-sizing: border-box;
}

.galaxygym-padel-header__inner,
.galaxygym-padel-footer__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	max-width: 1140px;
	margin: 0 auto;
	padding: 18px 20px;
	box-sizing: border-box;
}

.galaxygym-padel-brand__text {
	font-size: 20px;
	font-weight: 700;
	text-decoration: none;
	color: inherit;
}

.galaxygym-padel-nav ul,
.galaxygym-padel-footer ul {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.galaxygym-padel-nav a,
.galaxygym-padel-footer a {
	text-decoration: none;
	color: inherit;
}

.galaxygym-padel-entry {
	margin-bottom: 48px;
}

.galaxygym-padel-entry__title {
	margin: 0 0 12px;
}

.galaxygym-padel-entry__thumb img {
	max-width: 100%;
	height: auto;
}

.galaxygym-padel-404 {
	text-align: center;
	padding: 80px 20px;
}

.galaxygym-padel-btn {
	display: inline-block;
	padding: 12px 24px;
	background: #B4FF25;
	color: #111111;
	font-weight: 600;
	text-decoration: none;
	border-radius: 6px;
}

/*
 * Pas de défilement horizontal.
 *
 * Plusieurs sections du kit débordent volontairement sur le côté (blocs
 * décalés par marges négatives, formes décoratives). Sans garde-fou, ces
 * débords rendent la page entière défilable latéralement, surtout sur mobile.
 * « clip » plutôt que « hidden » : ne crée pas de conteneur de défilement,
 * donc ne casse pas les en-têtes collants (position: sticky).
 */
html,
body {
	overflow-x: clip;
}

/*
 * En-tête superposé sur le hero de l'accueil — robuste à la taille du logo.
 *
 * Le kit « fait remonter » le hero sous l'en-tête via une marge négative FIXE
 * (−100px), calée sur la hauteur d'origine de l'en-tête. Dès qu'on change la
 * taille du logo, la hauteur de l'en-tête change et cette compensation fixe ne
 * tombe plus juste : une bande blanche apparaît en haut (en-tête plus grand que
 * 100px) — ou le haut de l'en-tête se fait rogner (en-tête plus petit).
 *
 * On sort donc l'en-tête du flux : il FLOTTE au-dessus de la première section.
 * Sa hauteur (donc la taille du logo) n'influe plus sur la position du contenu :
 * le hero commence toujours tout en haut, quel que soit le logo. Fond
 * transparent conservé (l'en-tête se superpose à la photo).
 *
 * Portée limitée à l'accueil (body.home), seule page bâtie sur ce chevauchement
 * hero/en-tête ; les pages internes gardent leur mise en page.
 */
body.home #masthead {
	/* Accueil : en-tête superposé au hero. « fixed » (au lieu de « absolute »)
	   pour qu'il RESTE visible au défilement (collant) tout en gardant la
	   superposition transparente — la hauteur du logo n'influe toujours pas sur
	   le hero, car l'en-tête reste hors flux. */
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 999;
}

/* Pages internes : en-tête dans le flux normal, rendu COLLANT (il reste en haut
   au défilement). HFE applique « position: relative » par défaut ; on surcharge
   en « sticky ». Sur mobile comme sur desktop. */
body:not(.home) #masthead {
	position: sticky;
	top: 0;
	z-index: 999;
}

/*
 * Accueil : TRANSPARENT en haut (superposé au hero), FOND PLEIN dès qu'on
 * défile. La classe « gg-scrolled » est posée sur <body> par assets/js/theme.js
 * quand on quitte le tout en haut de la page.
 */
/*
 * IMPORTANT — on peint LE BON élément. #masthead n'est qu'une fine bande (≈60px) ;
 * la barre visible (logo + menu + bouton) est le CONTENEUR Elementor de l'en-tête
 * (« .e-con.e-parent », parfois « .elementor-section » sur un ancien en-tête), qui
 * déborde SOUS #masthead. C'est donc LUI qu'on colore au défilement — pas #masthead.
 */
#masthead .e-con.e-parent,
#masthead > .elementor > .elementor-section,
#masthead > .elementor .elementor-top-section {
	transition: background-color .3s ease, box-shadow .3s ease;
}
/* PAS de backdrop-filter ici : il créerait un « bloc conteneur » qui calerait le
   panneau du menu mobile (position: fixed) sur la barre au lieu de l'écran → menu
   coupé au défilement. Fond opaque simple à la place. */
body.gg-scrolled #masthead .e-con.e-parent,
body.gg-scrolled #masthead > .elementor > .elementor-section,
body.gg-scrolled #masthead > .elementor .elementor-top-section {
	background-color: rgba(17, 17, 17, .95) !important;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .25) !important;
}

/* ---- Réseaux sociaux injectés sous le menu mobile (voir inc/social.php) ----
   Masqués par défaut ; visibles seulement dans le panneau mobile (<= 1024px). */
.gg-mobile-social {
	display: none;
}
@media (max-width: 1024px) {
	.gg-mobile-social {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		padding: 18px 24px;
		border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
	}
	.gg-mobile-social__link {
		color: inherit;
		display: inline-flex;
		transition: opacity .15s ease;
	}
	.gg-mobile-social__link svg {
		width: 24px;
		height: 24px;
		fill: currentColor;
	}
	.gg-mobile-social__link:hover {
		opacity: .65;
	}
}

/* ---- Panneau du menu mobile ElementsKit : fond sombre + texte clair ----
   Par défaut le panneau est blanc → le logo (mint) disparaît. On le passe en
   sombre, texte et icônes en clair. Scopé mobile (le panneau n'existe qu'en
   mode offcanvas, <= 1024px). */
@media (max-width: 1024px) {
	.elementskit-menu-container.elementskit-menu-offcanvas-elements {
		background-color: #121212 !important;
		color: #fff !important;
	}
	.elementskit-menu-offcanvas-elements .elementskit-navbar-nav > li > a,
	.elementskit-menu-offcanvas-elements .elementskit-navbar-nav .ekit-menu-nav-link,
	.elementskit-menu-offcanvas-elements .elementskit-navbar-nav > li > a:hover,
	.elementskit-menu-offcanvas-elements .elementskit-submenu-panel li > a {
		color: #fff !important;
	}
	/* Bouton de fermeture (X) visible sur fond sombre. */
	.elementskit-menu-offcanvas-elements .elementskit-menu-close {
		color: #fff !important;
		border-color: rgba(255, 255, 255, .5) !important;
	}
	/* Séparateur des icônes sociales, lisible sur sombre. */
	.elementskit-menu-offcanvas-elements .gg-mobile-social {
		border-top-color: rgba(255, 255, 255, .15);
	}
}

/* ---- Écran de chargement (loader) — logo en pulse doux, voir inc/loader.php ---- */
.gg-loader {
	position: fixed;
	inset: 0;
	z-index: 2147483000; /* au-dessus de tout, y compris l'en-tête collant */
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	visibility: visible;
	transition: opacity .6s ease, visibility .6s ease;
}
.gg-loader__logo {
	width: 180px;
	max-width: 55vw;
	height: auto;
	animation: gg-loader-pulse 1.6s ease-in-out infinite;
}
.gg-loader__text {
	color: #fff;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: .5px;
	animation: gg-loader-pulse 1.6s ease-in-out infinite;
}
@keyframes gg-loader-pulse {
	0%, 100% { opacity: .3;  transform: scale(.95); }
	50%      { opacity: 1;   transform: scale(1); }
}
/* Disparition en fondu une fois la page chargée (classe posée par le script). */
body.gg-loaded .gg-loader {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
	.gg-loader__logo,
	.gg-loader__text { animation: none; }
}

/* A4 — ancres : laisser la place à l'en-tête collant pour ne pas couper le haut
   de la section ciblée (ex. clic « Planning »). Corrige toutes les ancres. */
html {
	scroll-padding-top: 120px;
}
@media (max-width: 1024px) {
	html { scroll-padding-top: 90px; }
}