/*
 * RecupSports Commande en gros 0.18.0 : couleurs du club (boutique Joma).
 * Tout est rangé sous .rscg-club : la mise en page Divi n'est jamais touchée ailleurs.
 */
.rscg-club {
	--rscg-club-accent: #bc1520;
	--rscg-club-trait: #d9d9d9;
	--rscg-club-fond: #f6f6f6;
	margin: 0 0 24px;
	font-size: 15px;
	line-height: 1.45;
}

.rscg-club *,
.rscg-club *::before,
.rscg-club *::after {
	box-sizing: border-box;
}

.rscg-club button {
	font: inherit;
	cursor: pointer;
}

.rscg-club__chargement,
.rscg-club__vide {
	padding: 12px 0;
	color: #555;
}

/* ---- bandeau « Votre club » ---- */
.rscg-club__bandeau {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	margin: 0 0 12px;
	background: var(--rscg-club-fond);
	border-left: 4px solid var(--rscg-club-accent);
	font-weight: 600;
}

.rscg-club__bandeau--vide {
	font-weight: 400;
}

.rscg-club__bandeau-teintes {
	display: inline-flex;
	gap: 4px;
}

.rscg-club__bandeau-action {
	white-space: nowrap;
}

.rscg-club__modifier,
.rscg-club__effacer {
	background: none;
	border: 0;
	padding: 0;
	color: var(--rscg-club-accent);
	text-decoration: underline;
	font-weight: 600;
}

/* ---- pastilles ---- */
.rscg-club__teinte {
	display: inline-block;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.35);
	vertical-align: middle;
	flex: 0 0 auto;
}

.rscg-club__pastilles {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rscg-club__pastille {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px 6px 6px;
	background: #fff;
	border: 1px solid var(--rscg-club-trait);
	border-radius: 999px;
	color: #222;
	line-height: 1.2;
}

.rscg-club__pastille--active {
	border-color: #222;
	box-shadow: 0 0 0 2px #222 inset;
	font-weight: 600;
}

.rscg-club__pastille:focus-visible,
.rscg-club__filtre-bouton:focus-visible,
.rscg-club__voir-bouton:focus-visible {
	outline: 2px solid var(--rscg-club-accent);
	outline-offset: 2px;
}

/* ---- barre de filtres ---- */
.rscg-club__barre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	padding: 0 0 12px;
	margin: 0 0 16px;
	border-bottom: 1px solid var(--rscg-club-trait);
}

.rscg-club__boutons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rscg-club__filtre {
	position: relative;
}

.rscg-club__filtre-bouton,
.rscg-club__filtrer {
	padding: 8px 14px;
	background: #fff;
	border: 1px solid #222;
	border-radius: 999px;
	color: #222;
	line-height: 1.2;
}

.rscg-club__filtre-bouton::after {
	content: "";
	display: inline-block;
	margin-left: 8px;
	border: 5px solid transparent;
	border-top-color: currentColor;
	border-bottom: 0;
	vertical-align: middle;
}

.rscg-club__filtre--ouvert .rscg-club__filtre-bouton::after {
	border-top: 0;
	border-bottom: 5px solid currentColor;
}

.rscg-club__filtre-bouton--actif {
	background: #222;
	color: #fff;
}

.rscg-club__panneau {
	position: absolute;
	z-index: 50;
	top: calc(100% + 6px);
	left: 0;
	min-width: 260px;
	max-width: min(560px, 92vw);
	padding: 14px;
	background: #fff;
	border: 1px solid var(--rscg-club-trait);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.rscg-club__panneau .rscg-club__pastilles {
	min-width: 480px;
}

/* Bureau : la liste des types tient sur deux colonnes, sans couper un besoin de son titre. */
.rscg-club__panneau .rscg-club__types {
	min-width: 440px;
	columns: 2;
	column-gap: 28px;
}

.rscg-club__types-groupe {
	break-inside: avoid;
	padding-bottom: 4px;
}

.rscg-club__panneau--tout {
	position: static;
	width: 100%;
	max-width: none;
	box-shadow: none;
}

.rscg-club__panneau--tout .rscg-club__pastilles,
.rscg-club__panneau--tout .rscg-club__types {
	min-width: 0;
	columns: auto;
}

.rscg-club__panneau-titre,
.rscg-club__types-besoin {
	margin: 12px 0 6px;
	padding: 0;
	font-weight: 700;
}

.rscg-club__panneau-titre:first-child,
.rscg-club__types-besoin:first-child {
	margin-top: 0;
}

.rscg-club__choix {
	display: block;
	padding: 3px 0;
	cursor: pointer;
}

.rscg-club__aide {
	margin: 0 0 8px;
	padding: 0;
	font-size: 13px;
	color: #555;
}

.rscg-club__trait {
	margin: 8px 0;
	border: 0;
	border-top: 1px solid var(--rscg-club-trait);
}

.rscg-club__barre--telephone {
	display: block;
}

.rscg-club__filtrer {
	width: 100%;
	font-weight: 600;
}

.rscg-club__fermer {
	width: 100%;
	margin-top: 14px;
	padding: 10px;
	background: #222;
	border: 0;
	color: #fff;
	font-weight: 600;
}

.rscg-club__barre--telephone .rscg-club__effacer {
	margin-top: 8px;
}

/* ---- résultats rangés par besoin ---- */
.rscg-club__besoin {
	margin: 0 0 28px;
}

.rscg-club__entete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 10px;
}

.rscg-club .rscg-club__besoin-titre {
	margin: 0;
	padding: 0;
	font-size: 22px;
	line-height: 1.2;
}

.rscg-club__nombre {
	color: #555;
	white-space: nowrap;
}

.rscg-club .rscg-club__groupe {
	margin: 14px 0 8px;
	padding: 0;
	font-size: 16px;
	font-weight: 600;
	color: #444;
}

/* La grille est faite de div (rôle de liste) : ni ul.products ni li.product, que WooCommerce et Divi mettent en %. */
.rscg-club .rscg-club__grille {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
}

.rscg-club .rscg-club__carte {
	min-width: 0;
	margin: 0;
	padding: 0;
}

.rscg-club .rscg-club__lien {
	display: block;
	color: inherit;
	text-decoration: none;
}

.rscg-club .rscg-club__lien:hover .rscg-club__titre,
.rscg-club .rscg-club__lien:focus-visible .rscg-club__titre {
	text-decoration: underline;
}

.rscg-club__photo {
	position: relative;
	display: block;
	margin: 0 0 8px;
	background: #f2f2f2;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.rscg-club .rscg-club__photo img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.rscg-club__badge {
	position: absolute;
	left: 8px;
	top: 8px;
	padding: 3px 8px;
	background: var(--rscg-club-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	border-radius: 3px;
}

.rscg-club .rscg-club__titre {
	display: block;
	margin: 0 0 4px;
	padding: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: #222;
}

.rscg-club__coloris {
	display: block;
	font-size: 13px;
	color: #555;
}

.rscg-club__prix {
	display: block;
	margin-top: 4px;
	font-weight: 700;
}

.rscg-club__voir {
	margin: 12px 0 0;
	padding: 0;
	text-align: center;
}

.rscg-club__voir-bouton {
	padding: 8px 22px;
	background: #fff;
	border: 1px solid #222;
	color: #222;
	font-weight: 600;
}

@media (max-width: 980px) {
	.rscg-club .rscg-club__grille {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.rscg-club .rscg-club__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.rscg-club .rscg-club__besoin-titre {
		font-size: 19px;
	}
}

/* ---- bloc d'entrée « Équipez votre club dans ses couleurs » (un vrai formulaire, utilisable sans le script) ---- */
.rscg-club .rscg-club__bloc {
	margin: 0;
	padding: 18px 20px;
	background: var(--rscg-club-fond);
	border-left: 4px solid var(--rscg-club-accent);
}

.rscg-club .rscg-club__bloc-titre {
	margin: 0 0 4px;
	padding: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	color: #222;
}

.rscg-club__bloc .rscg-club__aide {
	margin-bottom: 12px;
}

label.rscg-club__pastille {
	position: relative;
	margin: 0;
	cursor: pointer;
	font-weight: 400;
}

/* La case reste dans la page (clavier, lecteur d'écran) mais ne se voit pas : la pastille la montre. */
.rscg-club .rscg-club__case {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

label.rscg-club__pastille:has(.rscg-club__case:checked) {
	border-color: #222;
	box-shadow: 0 0 0 2px #222 inset;
	font-weight: 600;
}

label.rscg-club__pastille:has(.rscg-club__case:focus-visible) {
	outline: 2px solid var(--rscg-club-accent);
	outline-offset: 2px;
}

.rscg-club .rscg-club__bloc-pied {
	margin: 14px 0 0;
	padding: 0;
}

.rscg-club__voir-articles {
	padding: 10px 24px;
	background: var(--rscg-club-accent);
	border: 0;
	border-radius: 999px;
	color: #fff;
	font-weight: 700;
	line-height: 1.2;
}

.rscg-club__voir-articles:focus-visible {
	outline: 2px solid #222;
	outline-offset: 2px;
}

/* ---- pages de catégorie Joma ---- */
.rscg-club__tout {
	margin-left: auto;
	color: var(--rscg-club-accent);
	font-weight: 600;
	text-decoration: underline;
}

.rscg-club--archive {
	margin-bottom: 12px;
}

/* ---- fiche d'un produit Joma : bandeau et « Compléter la tenue » ---- */
.rscg-club--fiche:empty,
.rscg-club--tenue:empty {
	display: none;
}

.rscg-club--tenue {
	clear: both;
	padding-top: 12px;
}

/* Sur la fiche, les pastilles s'ouvrent sous le bandeau, dans le flux (pas de panneau flottant sur la photo). */
.rscg-club .rscg-club__panneau--fiche {
	position: static;
	max-width: none;
	margin: -6px 0 12px;
	box-shadow: none;
}

.rscg-club__panneau--fiche .rscg-club__pastilles {
	min-width: 0;
}

.rscg-club .rscg-club__tenue-titre {
	margin: 0 0 12px;
	padding: 0;
	font-size: 22px;
	line-height: 1.3;
}

@media (min-width: 768px) {
	.rscg-club .rscg-club__grille--tenue {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		max-width: 900px;
	}
}

/* ---- lignes Joma (CADRAGE 16.81) : une rangée qui défile, la mention de la ligne sur la vignette ---- */
.rscg-club .rscg-club__grille.rscg-club__rangee {
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 60px) / 4);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	padding-bottom: 10px;
}

.rscg-club .rscg-club__rangee .rscg-club__carte {
	scroll-snap-align: start;
}

.rscg-club__ligne,
.rscg-club__avec {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.rscg-club__ligne {
	color: #555;
}

.rscg-club__avec {
	color: var(--rscg-club-accent);
}

.rscg-club__lignes {
	margin: 0 0 28px;
}

.rscg-club__ligne-bloc {
	margin: 0 0 12px;
}

@media (max-width: 980px) {
	.rscg-club .rscg-club__grille.rscg-club__rangee {
		grid-auto-columns: calc((100% - 40px) / 3);
	}
}

@media (max-width: 767px) {
	.rscg-club .rscg-club__grille.rscg-club__rangee {
		grid-auto-columns: 44%;
	}
}