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

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

.ls-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. */
.ls-single-club-heading {
	color: #a41e2e;
	margin: 0 0 20px;
	font-size: 34px !important;
	line-height: 1.25 !important;
	font-weight: 700 !important;
}

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

.ls-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.ls-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. */
.ls-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.ls-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;
}

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

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

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

/* ---------- Lightbox carte agrandie ---------- */
.ls-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;
}

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

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

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

.ls-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);
}

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

body.ls-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) {
	.ls-map-lightbox {
		display: none !important;
	}
}

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

.ls-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;
}

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

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

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

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

/* 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) {
	.ls-single-club-main {
		padding: 90px 16px 30px;
	}

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

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

	.ls-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
	   .ls-card__img ci-dessus (même sélecteur, même poids — sans ça
	   l'ordre déciderait, ce qui est fragile). */
	.ls-card__img--placeholder {
		display: none !important;
	}

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

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

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

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

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

	.ls-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. */
.ls-card__title,
.ls-card__row,
.ls-card__disciplines,
.ls-cat-tile__title,
.ls-cat-child,
.ls-form {
	overflow-wrap: break-word;
	word-break: break-word;
}

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

/* ---------- Formulaires (nouveau club / demande de lien / édition) ---------- */
.ls-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);
}

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

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

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

.ls-form .button,
.ls-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;
}

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

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

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

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