.pgr-repertoire {
	max-width: 1100px;
	margin: 0 auto;
}

.pgr-single-club-main {
	padding: 100px 20px 40px;
}

.pgr-single-club-container {
	max-width: 1100px;
	margin: 0 auto;
}

/* font-size et line-height explicites et en !important : sans ça, le H1
   hérite du style "titre de page" du thème (Divi), pensé pour un grand
   bandeau d'article de blog — beaucoup trop imposant ici, surtout sur
   mobile où il occupait un écran entier à lui seul. */
.pgr-single-club-heading {
	color: #a41e2e;
	margin: 0 0 20px;
	font-size: 34px !important;
	line-height: 1.25 !important;
	font-weight: 700 !important;
}

.pgr-repertoire__toolbar {
	margin-bottom: 20px;
}

.pgr-repertoire__toolbar input[type="text"] {
	width: 100%;
	max-width: 420px;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 15px;
	box-sizing: border-box;
}

.pgr-back-link a {
	text-decoration: none;
	font-size: 14px;
}

/* ---------- Vue catégories ---------- */

.pgr-cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}

.pgr-cat-tile {
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	padding: 16px;
	background: #fff;
}

.pgr-cat-tile__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.pgr-cat-tile__title {
	font-size: 17px;
	font-weight: 700;
	color: #a41e2e;
	text-decoration: none;
}

.pgr-cat-tile__title:hover {
	text-decoration: underline;
}

.pgr-cat-toggle {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 14px;
	color: #888;
	padding: 4px 8px;
	line-height: 1;
}

.pgr-cat-toggle:hover {
	color: #a41e2e;
}

.pgr-cat-count {
	font-weight: 400;
	color: #888;
	font-size: 13px;
}

.pgr-cat-tile__children {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.pgr-cat-tile__children[hidden] {
	display: none;
}

.pgr-cat-child {
	font-size: 13px;
	color: #444;
	text-decoration: none;
	background: #f5f5f5;
	padding: 4px 10px;
	border-radius: 20px;
}

.pgr-cat-child:hover {
	background: #eee;
	text-decoration: underline;
}

/* ---------- Toolbar résultats ---------- */

.pgr-repertoire__view-toggle {
	display: inline-flex;
	border: 1px solid #ccc;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 10px;
}

.pgr-view-btn {
	padding: 8px 14px;
	border: none;
	background: #fff;
	cursor: pointer;
	font-size: 14px;
}

.pgr-view-btn.active {
	background: #a41e2e;
	color: #fff;
}

#pgr-result-count {
	color: #666;
	font-size: 14px;
	margin-bottom: 12px;
}

/* ---------- Fiches club : horizontales, pleine largeur, empilées ---------- */

.pgr-repertoire__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pgr-card {
	display: grid;
	grid-template-columns: 180px 1fr 240px;
	gap: 20px;
	border: 1px solid #a41e2e;
	border-radius: 8px;
	padding: 18px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* !important sur la taille/l'ajustement : Divi force souvent "height: auto"
   sur toutes les images du site pour éviter les déformations, ce qui aurait
   sinon fait dessiner le logo à sa hauteur naturelle (parfois bien plus
   grande que 140px) et donc chevaucher le texte du bloc suivant. */
.pgr-card__img {
	width: 100% !important;
	height: 140px !important;
	object-fit: contain !important;
	background: transparent;
	border-radius: 6px;
	padding: 10px;
	box-sizing: border-box !important;
	align-self: start;
}

.pgr-card__img--placeholder {
	background: transparent;
}

.pgr-card__title {
	margin: 0 0 6px;
	font-size: 22px;
	color: #a41e2e;
}

.pgr-card__title a {
	color: inherit;
	text-decoration: none;
}

.pgr-card__title a:hover {
	text-decoration: underline;
}

.pgr-card__disciplines {
	font-size: 13px;
	margin-bottom: 10px;
}

.pgr-discipline-link {
	color: #a41e2e;
	text-decoration: none;
}

.pgr-discipline-link:hover {
	text-decoration: underline;
}

.pgr-card__row {
	font-size: 14px;
	color: #333;
	margin-bottom: 8px;
}

.pgr-card__row strong {
	color: #666;
	display: inline-block;
	min-width: 90px;
}

.pgr-card__row p {
	margin: 0 0 8px;
}

.pgr-card__row p:last-child {
	margin-bottom: 0;
}

.pgr-card__row ul,
.pgr-card__row ol {
	margin: 0 0 8px;
	padding-left: 20px;
}

.pgr-card__cheque {
	display: inline-block;
	background: #e8f5e9;
	color: #2e7d32;
	padding: 3px 10px;
	border-radius: 4px;
	font-size: 12px;
	margin-top: 4px;
}

.pgr-card__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 12px;
}

.pgr-card__btn {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 6px;
	font-size: 13px;
	text-decoration: none;
	border: 1px solid;
}

.pgr-card__btn--contact {
	background: #a41e2e;
	color: #fff;
	border-color: #a41e2e;
}

.pgr-card__btn--contact:hover {
	background: #841723;
}

.pgr-card__btn--edit {
	background: #fff;
	color: #a41e2e;
	border-color: #a41e2e;
}

.pgr-card__btn--edit:hover {
	background: #fdf2f3;
}

.pgr-card__btn--admin {
	background: #fff8e1;
	color: #8a6d00;
	border: 1px dashed #d4af00;
}

.pgr-card__btn--admin:hover {
	background: #fff0c2;
}

/* Même famille visuelle que .pgr-card__btn--admin (bordure pointillée,
   fond pâle) pour rester groupé avec les actions réservées aux
   administrateurs/modérateurs, mais en rouge pour signaler une action
   destructive (même si récupérable depuis la corbeille WordPress). */
.pgr-card__btn--trash {
	background: #fdeceb;
	color: #a41e2e;
	border: 1px dashed #e2a5a5;
}

.pgr-card__btn--trash:hover {
	background: #fbdedb;
}

.pgr-card__map {
	width: 100%;
	height: 180px;
	border-radius: 6px;
	background: #f0f0f0;
}

.pgr-card__map--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
	font-size: 12px;
	text-align: center;
	padding: 10px;
	box-sizing: border-box;
}

.pgr-repertoire__map {
	height: 600px;
	border-radius: 8px;
	overflow: hidden;
}

.pgr-no-result {
	color: #888;
}

/* Carte cliquable pour l'agrandir (desktop uniquement, voir media query mobile) */
@media (min-width: 701px) {
	.pgr-card__map[data-lat] {
		cursor: pointer;
	}
	.pgr-card__map[data-lat]:hover {
		outline: 2px solid #a41e2e;
		outline-offset: 2px;
	}
}

/* ---------- Lightbox carte agrandie ---------- */
.pgr-map-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}

.pgr-map-lightbox.is-open {
	display: flex;
}

.pgr-map-lightbox__inner {
	position: relative;
	width: 100%;
	max-width: 1600px;
	height: 80vh;
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
}

#pgr-map-lightbox-map {
	width: 100%;
	height: 100%;
}

.pgr-map-lightbox__close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 10001;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: #fff;
	color: #a41e2e;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.pgr-map-lightbox__close:hover {
	background: #fdf2f3;
}

body.pgr-map-lightbox-open {
	overflow: hidden;
}

/* Désactivée sur mobile : pas de curseur cliquable, pas de lightbox
   (voir aussi le garde-fou JS openMapLightbox). */
@media (max-width: 700px) {
	.pgr-map-lightbox {
		display: none !important;
	}
}

/* ---------- Shortcode [pgr_clubs_infrastructure] ---------- */
.pgr-infra-clubs {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 16px 0;
}

.pgr-infra-clubs__item {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 10px 14px;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	font-size: 14px;
}

.pgr-infra-clubs__item strong {
	color: #a41e2e;
	font-size: 15px;
}

.pgr-infra-clubs__disciplines {
	color: #666;
	font-style: italic;
}

.pgr-infra-clubs__link {
	font-size: 13px;
	text-decoration: underline;
	margin-left: auto;
}

.pgr-repertoire__cta {
	margin-top: 24px;
	text-align: center;
	font-size: 15px;
}

/* Tablette : la grille desktop à 3 colonnes (180px logo | texte flexible |
   240px carte) laissait une colonne de texte beaucoup trop étroite entre le
   logo et la carte sur les largeurs intermédiaires (~700-1024px, iPad et
   assimilés). Le logo et le texte restent côte à côte (2 colonnes), mais la
   carte passe sur sa propre ligne en dessous, centrée, sans changer son
   format (même hauteur/style qu'en desktop — voir .pgr-card__map plus haut,
   seules la largeur et le centrage sont ajustés ici). Réalisé avec
   grid-template-areas plutôt qu'en réordonnant le HTML : fonctionne à
   l'identique sur la fiche individuelle (rendu PHP) et sur les cartes de la
   liste (générées en JS), qui partagent ce même CSS. */
@media (min-width: 701px) and (max-width: 1024px) {
	.pgr-card {
		grid-template-columns: 180px 1fr;
		grid-template-areas:
			"img body"
			"map map";
	}

	.pgr-card__img {
		grid-area: img;
	}

	.pgr-card__body {
		grid-area: body;
	}

	.pgr-card__map {
		grid-area: map;
		max-width: 320px;
		margin: 4px auto 0;
	}
}

/* Mobile : fiches en une colonne (logo centré au-dessus, carte en dessous),
   étiquettes au-dessus de leur valeur (plus lisible qu'une ligne "Étiquette
   valeur" compressée sur un petit écran), boutons pleine largeur pour des
   zones de tap confortables. */
@media (max-width: 700px) {
	.pgr-single-club-main {
		padding: 90px 16px 30px;
	}

	.pgr-single-club-heading {
		font-size: 24px !important;
	}

	.pgr-card {
		grid-template-columns: 1fr;
		padding: 18px 16px;
	}

	.pgr-card__img {
		height: 150px !important;
		max-width: 200px !important;
		width: auto !important;
		margin: 0 auto 14px;
		border: 1px solid #f0dfe1;
	}

	/* Pas de logo : on retire complètement le bloc pour éviter un grand
	   espace vide entre le bord de la fiche et le nom du club. En
	   !important pour ne jamais se faire repasser devant par la règle
	   .pgr-card__img ci-dessus (même sélecteur, même poids — sans ça
	   l'ordre déciderait, ce qui est fragile). */
	.pgr-card__img--placeholder {
		display: none !important;
	}

	.pgr-card__title {
		text-align: center;
		font-size: 20px;
	}

	.pgr-card__disciplines {
		text-align: center;
	}

	.pgr-card__row {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.pgr-card__row strong {
		min-width: 0;
		color: #a41e2e;
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}

	.pgr-card__actions {
		flex-direction: column;
	}

	.pgr-card__btn {
		width: 100%;
		box-sizing: border-box;
		text-align: center;
		padding: 12px 14px;
		font-size: 14px;
	}
}

/* Anti-débordement : les noms de club, adresses, URLs ou e-mails longs ne
   doivent jamais dépasser du cadre de la fiche, sur aucune taille d'écran. */
.pgr-card__title,
.pgr-card__row,
.pgr-card__disciplines,
.pgr-cat-tile__title,
.pgr-cat-child,
.pgr-form {
	overflow-wrap: break-word;
	word-break: break-word;
}

.pgr-card__row a {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* ---------- Formulaires (nouveau club / demande de lien / édition) ---------- */
.pgr-form {
	max-width: 640px;
	margin: 0 auto;
	display: grid;
	gap: 14px;
	background: #fff;
	border: 1px solid #a41e2e;
	border-radius: 8px;
	padding: 24px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.pgr-form label {
	font-weight: 600;
	color: #666;
	display: block;
	margin-bottom: 4px;
}

.pgr-form input[type="text"],
.pgr-form input[type="email"],
.pgr-form input[type="url"],
.pgr-form input[type="tel"],
.pgr-form textarea,
.pgr-form select {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	box-sizing: border-box;
}

.pgr-form input:focus,
.pgr-form textarea:focus,
.pgr-form select:focus {
	outline: none;
	border-color: #a41e2e;
	box-shadow: 0 0 0 2px rgba(164, 30, 46, 0.15);
}

.pgr-form .button,
.pgr-form button[type="submit"] {
	display: inline-block;
	padding: 10px 20px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid #a41e2e;
	background: #a41e2e;
	color: #fff;
	cursor: pointer;
	justify-self: start;
}

.pgr-form .button:hover,
.pgr-form button[type="submit"]:hover {
	background: #841723;
	border-color: #841723;
}

.pgr-form__hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
}

.pgr-form__msg-success {
	max-width: 640px;
	margin: 0 auto 16px;
	background: #e8f5e9;
	color: #2e7d32;
	padding: 12px 16px;
	border-radius: 6px;
	border: 1px solid #c8e6c9;
}

.pgr-form__msg-error {
	max-width: 640px;
	margin: 0 auto 16px;
	background: #ffebee;
	color: #c62828;
	padding: 12px 16px;
	border-radius: 6px;
	border: 1px solid #ffcdd2;
}