/*
 * RecupSports Commande en gros : la grille de la fiche produit, et depuis le
 * lot 3 le panier et la caisse. Chargée UNIQUEMENT sur la fiche d'un produit
 * activé, la page panier et la page de paiement.
 */

/*
 * Second rideau : les champs TM Extra Product Options vivent dans le formulaire
 * d'ajout natif, retiré sur un produit activé. Si un module les affichait
 * ailleurs, ils restent masqués. Le formulaire TM EPO lui-même n'est jamais
 * modifié (16.5, D.8).
 */
body.rscg-grille-active .tc-extra-product-options,
body.rscg-grille-active .tm-extra-product-options,
body.rscg-grille-active .tc-totals-form,
body.rscg-grille-active .tm-extra-product-options-totals {
	display: none !important;
}

/* ---------------------------------------------------------------- grille */

.rscg-commande {
	--rscg-rouge: #bc1520;
	--rscg-encre: #1f1f1f;
	--rscg-gris: #6b6b6b;
	--rscg-filet: #dcdcdc;
	--rscg-fond: #f6f6f6;
	box-sizing: border-box;
	max-width: 100%;
	margin: 1.5em 0;
	color: var(--rscg-encre);
	font-size: 15px;
	line-height: 1.45;
}

.rscg-commande *,
.rscg-commande *::before,
.rscg-commande *::after {
	box-sizing: inherit;
}

.rscg-commande.rscg-commande--calcul .rscg-recap {
	opacity: 0.6;
	transition: opacity 0.2s;
}

.rscg-commande h2.rscg-commande__titre {
	margin: 0 0 0.6em;
	padding: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--rscg-encre);
}

.rscg-commande .rscg-etape {
	margin: 0 0 1.4em;
	padding: 1em;
	border: 1px solid var(--rscg-filet);
	border-radius: 6px;
	background: #fff;
}

.rscg-commande .rscg-etape > h3 {
	margin: 0 0 0.7em;
	padding: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--rscg-encre);
}

.rscg-commande h4 {
	margin: 0.4em 0;
	padding: 0;
	font-size: 15px;
	font-weight: 700;
}

.rscg-commande .rscg-note {
	margin: 0.4em 0;
	color: var(--rscg-gris);
	font-size: 13px;
}

.rscg-commande .rscg-note--info {
	color: var(--rscg-encre);
}

.rscg-commande .rscg-encart {
	margin: 0 0 1em;
	padding: 0.8em 1em;
	border-left: 4px solid var(--rscg-rouge);
	background: var(--rscg-fond);
}

.rscg-commande .rscg-bouton {
	display: inline-block;
	margin: 0.3em 0.5em 0.3em 0;
	padding: 0.55em 1.1em;
	border: 1px solid var(--rscg-rouge);
	border-radius: 4px;
	background: #fff;
	color: var(--rscg-rouge);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.rscg-commande .rscg-bouton--principal {
	width: 100%;
	padding: 0.85em 1em;
	background: var(--rscg-rouge);
	color: #fff;
	font-size: 16px;
}

.rscg-commande .rscg-bouton--discret {
	border-color: var(--rscg-filet);
	color: var(--rscg-encre);
}

.rscg-commande .rscg-bouton:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Coloris */

.rscg-commande .rscg-coloris {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.rscg-commande .rscg-pastille {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 84px;
	padding: 0.35em;
	border: 2px solid var(--rscg-filet);
	border-radius: 6px;
	background: #fff;
	color: var(--rscg-encre);
	font-size: 12px;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
}

.rscg-commande .rscg-pastille img {
	width: 48px;
	height: 48px;
	margin-bottom: 0.25em;
	object-fit: contain;
}

.rscg-commande .rscg-pastille--choisie {
	border-color: var(--rscg-rouge);
	box-shadow: 0 0 0 1px var(--rscg-rouge);
}

/*
 * 0.16.3 (bloc P) : la loupe ronde de chaque tuile, un bouton à part qui
 * montre la photo du coloris sans le cocher. Zone d'appui de 32 px, cercle
 * visible de 26 px, posée sur le coin haut droit de la tuile.
 */
.rscg-commande .rscg-pastille-case {
	position: relative;
	display: flex;
}

.rscg-commande .rscg-loupe {
	position: absolute;
	top: -8px;
	right: -8px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--rscg-encre);
	line-height: 1;
	cursor: zoom-in;
}

.rscg-commande .rscg-loupe::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 26px;
	height: 26px;
	box-sizing: border-box;
	border: 1px solid var(--rscg-filet);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.rscg-commande .rscg-loupe svg {
	position: relative;
	display: block;
}

.rscg-commande .rscg-loupe:hover::before,
.rscg-commande .rscg-loupe:focus-visible::before {
	border-color: var(--rscg-rouge);
}

.rscg-commande .rscg-loupe:focus-visible {
	outline: 2px solid var(--rscg-rouge);
	outline-offset: 0;
}

/*
 * La visionneuse plein écran (téléphone), posée sur la page : elle est hors
 * du conteneur de la grille, d'où ses couleurs écrites en clair.
 */
.rscg-visionneuse {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 16px;
	background: rgba(0, 0, 0, 0.82);
	overscroll-behavior: contain;
}

.rscg-visionneuse__cadre {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	max-width: 560px;
	max-height: 100%;
	padding: 44px 16px 16px;
	border-radius: 8px;
	background: #fff;
	color: #1f1f1f;
	font-size: 15px;
	line-height: 1.4;
	text-align: center;
}

.rscg-visionneuse__image {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: calc(100vh - 210px);
	max-height: calc(100dvh - 210px);
	object-fit: contain;
}

.rscg-visionneuse__nom {
	margin: 10px 0 12px;
	padding: 0;
	font-weight: bold;
}

.rscg-visionneuse__choisir {
	min-height: 44px;
	margin: 0;
	padding: 0.6em 1.4em;
	border: 0;
	border-radius: 4px;
	background: #bc1520;
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.2;
	cursor: pointer;
}

.rscg-visionneuse__fermer {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #1f1f1f;
	font-size: 30px;
	line-height: 40px;
	cursor: pointer;
}

.rscg-visionneuse__fermer:focus-visible,
.rscg-visionneuse__choisir:focus-visible {
	outline: 2px solid #1f1f1f;
	outline-offset: 2px;
}

/*
 * La suite, sous l'ensemble photo + informations : toute la largeur de la
 * rangée, sous les deux colonnes (flottantes chez Divi, ou flex).
 */

.rscg-commande.rscg-commande--suite {
	clear: both;
	float: none;
	width: 100%;
	flex: 0 0 100%;
	grid-column: 1 / -1;
	margin: 0.5em 0 1.5em;
}

/*
 * Quantités : un tableau, une ligne par coloris, les tailles en colonnes.
 * Largeur fixe répartie : il se resserre au lieu de déborder. Les règles de
 * cellules du thème (marges de 24 px chez Divi) sont neutralisées ici.
 */

.rscg-commande .rscg-quantites__cadre {
	max-width: 100%;
	overflow-x: auto;
	container-type: inline-size;
	container-name: rscg-quantites;
}

.rscg-commande table.rscg-quantites {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0 0.35em;
	table-layout: fixed;
	font-size: 14px;
}

.rscg-commande .rscg-quantites th,
.rscg-commande .rscg-quantites td {
	padding: 0.25em 0.2em;
	border: 0;
	text-align: center;
	vertical-align: middle;
}

.rscg-commande .rscg-quantites thead th {
	font-size: 12px;
	font-weight: 700;
	color: var(--rscg-gris);
}

.rscg-commande .rscg-quantites .rscg-quantites__coloris {
	width: 9em;
	padding-left: 0.6em;
	text-align: left;
	font-weight: 700;
	color: var(--rscg-encre);
	overflow-wrap: anywhere;
}

.rscg-commande .rscg-quantites tbody tr > * {
	background: var(--rscg-fond);
}

/* 0.10.0 : la composition d'un pack sous sa taille, la case à cocher du recto-verso. */
.rscg-commande .rscg-quantites__pack {
	display: block;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.2;
}

.rscg-commande .rscg-recto-verso {
	margin: 0 0 0.8em;
}

.rscg-commande .rscg-recto-verso label {
	display: flex;
	align-items: flex-start;
	gap: 0.4em;
	cursor: pointer;
}

.rscg-commande .rscg-recto-verso input {
	flex: none;
	width: 1.2em;
	height: 1.2em;
	margin-top: 0.15em;
}

.rscg-commande .rscg-quantites tbody tr > :first-child {
	border-radius: 4px 0 0 4px;
}

.rscg-commande .rscg-quantites tbody tr > :last-child {
	border-radius: 0 4px 4px 0;
}

.rscg-commande .rscg-case input {
	width: 100%;
	min-width: 0;
	padding: 0.35em;
	border: 1px solid var(--rscg-filet);
	border-radius: 4px;
	font-size: 15px;
	text-align: center;
}

.rscg-commande .rscg-case--absente {
	color: var(--rscg-gris);
}

.rscg-commande .rscg-case__stock {
	display: block;
	font-size: 11px;
	color: var(--rscg-gris);
}

.rscg-commande .rscg-case__stock[hidden] {
	display: none;
}

.rscg-commande .rscg-reprise__choix {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	align-items: center;
}

.rscg-commande .rscg-reprise__choix select {
	max-width: 100%;
}

/* Schéma et emplacements */

.rscg-commande .rscg-schema {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	justify-content: center;
}

.rscg-commande .rscg-schema__figure {
	margin: 0;
	width: 220px;
	max-width: 45%;
	text-align: center;
	font-size: 13px;
}

.rscg-commande .rscg-schema__face {
	width: 100%;
	height: auto;
}

.rscg-commande .rscg-schema__silhouette {
	fill: #fff;
	stroke: var(--rscg-encre);
	stroke-width: 1.5;
}

.rscg-commande .rscg-schema__repere {
	font: 700 10px sans-serif;
	fill: var(--rscg-gris);
}

.rscg-commande .rscg-schema__zone {
	fill: rgba(188, 21, 32, 0.08);
	stroke: var(--rscg-rouge);
	stroke-dasharray: 3 2;
	cursor: pointer;
}

.rscg-commande .rscg-schema__zone--choisie,
.rscg-commande .rscg-schema__zone--placement {
	fill: rgba(188, 21, 32, 0.55);
	stroke-dasharray: none;
}

.rscg-commande .rscg-schema__zone--grisee {
	fill: #e5e5e5;
	stroke: #b5b5b5;
}

/* 0.9.0 (S4) : zone qui reçoit seulement des placements (numéro ou initiales du short). */
.rscg-commande .rscg-schema__zone--recoit {
	cursor: default;
	stroke-dasharray: 1 2;
}

.rscg-commande .rscg-schema__zone--recoit.rscg-schema__zone--placement {
	stroke-dasharray: none;
}

.rscg-commande .rscg-zone {
	margin: 0 0 0.6em;
	padding: 0.6em 0.8em;
	border: 1px solid var(--rscg-filet);
	border-radius: 4px;
	min-width: 0;
}

.rscg-commande .rscg-zone legend {
	padding: 0 0.3em;
	font-weight: 700;
}

.rscg-commande .rscg-zone--choisie,
.rscg-commande .rscg-zone--signalee {
	border-color: var(--rscg-rouge);
}

.rscg-commande .rscg-zone--grisee {
	background: var(--rscg-fond);
	color: var(--rscg-gris);
}

.rscg-commande .rscg-zone__raison {
	margin: 0.2em 0;
	font-size: 13px;
	font-style: italic;
}

.rscg-commande .rscg-zone__options label,
.rscg-commande .rscg-zone__mode label {
	display: inline-block;
	margin: 0.15em 1em 0.15em 0;
}

.rscg-commande .rscg-prix {
	color: var(--rscg-gris);
	font-size: 13px;
	white-space: nowrap;
}

.rscg-commande .rscg-logo,
.rscg-commande .rscg-zone__texte {
	display: block;
	margin-top: 0.5em;
}

.rscg-commande .rscg-logo select,
.rscg-commande .rscg-logo input[type="file"],
.rscg-commande .rscg-zone__texte input {
	max-width: 100%;
}

.rscg-commande .rscg-placement {
	margin: 0.3em 0;
}

.rscg-commande .rscg-placement__ou {
	display: block;
	margin-left: 1.6em;
	font-size: 13px;
	color: var(--rscg-gris);
}

/* Joueurs : un tableau sur ordinateur, des fiches verticales sur téléphone */

.rscg-commande .rscg-joueurs {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.rscg-commande .rscg-joueurs th,
.rscg-commande .rscg-joueurs td {
	padding: 0.3em;
	border-bottom: 1px solid var(--rscg-filet);
	text-align: left;
}

.rscg-commande .rscg-joueurs input {
	width: 100%;
	min-width: 0;
	padding: 0.3em;
	border: 1px solid var(--rscg-filet);
	border-radius: 3px;
}

/* 0.4.4 : la liste des joueurs par pages, son compteur et ses lignes à corriger */

.rscg-commande .rscg-joueurs-compteur {
	margin: 6px 0;
	font-size: 0.9em;
	font-weight: 600;
}

.rscg-commande .rscg-joueurs-erreurs {
	margin: 6px 0 10px;
	padding: 8px 10px;
	border-left: 4px solid var(--rscg-rouge);
	background: #fdf0f0;
}

.rscg-commande .rscg-joueurs-erreurs[hidden] {
	display: none !important;
}

.rscg-commande .rscg-joueurs-erreurs__titre {
	margin: 0 0 4px;
	font-weight: 600;
	color: var(--rscg-rouge);
}

.rscg-commande .rscg-joueur--erreur td {
	background: #fdf0f0;
}

.rscg-commande .rscg-joueur--erreur input {
	border-color: var(--rscg-rouge);
}

.rscg-commande .rscg-lien-ligne {
	padding: 0;
	border: 0;
	background: none;
	color: var(--rscg-encre);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.rscg-commande .rscg-pages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 8px 0;
}

.rscg-commande .rscg-pages button {
	min-width: 2.2em;
	padding: 0.3em 0.6em;
	border: 1px solid var(--rscg-filet);
	border-radius: 3px;
	background: #fff;
	color: var(--rscg-encre);
	font: inherit;
	font-size: 0.9em;
	cursor: pointer;
}

.rscg-commande .rscg-pages button[disabled] {
	opacity: 0.4;
	cursor: default;
}

.rscg-commande .rscg-pages .rscg-pages__page--courante {
	border-color: var(--rscg-encre);
	font-weight: 700;
}

.rscg-commande .rscg-pages .rscg-pages__page--erreur {
	border-color: var(--rscg-rouge);
	color: var(--rscg-rouge);
	box-shadow: inset 0 -3px 0 var(--rscg-rouge);
}

.rscg-commande .rscg-pages__etendue {
	margin-left: 6px;
	font-size: 0.85em;
	color: var(--rscg-gris);
}

.rscg-commande .rscg-reference {
	color: var(--rscg-gris);
	background: var(--rscg-fond);
}

.rscg-commande .rscg-collage textarea {
	width: 100%;
	font-family: monospace;
}

/* 0.16.0, bloc D : les onglets des parties d'un article composé (maquette validée, survêtement). */

.rscg-commande .rscg-pieces {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 0 12px;
	border-bottom: 2px solid var(--rscg-filet);
}

.rscg-commande .rscg-pieces__onglet {
	appearance: none;
	border: 0;
	background: none;
	padding: 9px 16px 8px;
	margin-bottom: -2px;
	border-bottom: 3px solid transparent;
	font: inherit;
	color: var(--rscg-gris);
	cursor: pointer;
	text-align: left;
}

.rscg-commande .rscg-pieces__onglet strong {
	display: block;
	font-size: 15px;
	color: inherit;
}

.rscg-commande .rscg-pieces__onglet span {
	font-size: 12px;
}

.rscg-commande .rscg-pieces__onglet--ouvert {
	border-bottom-color: var(--rscg-rouge);
	color: var(--rscg-encre);
}

.rscg-commande .rscg-pieces__onglet--ouvert span {
	color: var(--rscg-rouge);
}

.rscg-commande .rscg-recap__table .rscg-recap__piece th {
	padding-top: 10px;
	font-weight: 700;
}

/* Récapitulatif */

.rscg-commande .rscg-recap__table {
	width: 100%;
	border-collapse: collapse;
}

.rscg-commande .rscg-recap__table th {
	padding: 0.3em 0;
	font-weight: 400;
	text-align: left;
}

.rscg-commande .rscg-recap__table th,
.rscg-commande .rscg-recap__table td {
	border-top: 0; /* filet des tableaux Divi ; le total garde le sien, plus bas */
}

.rscg-commande .rscg-recap__table td {
	padding: 0.3em 0;
	text-align: right;
	white-space: nowrap;
}

.rscg-commande .rscg-total th,
.rscg-commande .rscg-total td {
	border-top: 2px solid var(--rscg-encre);
	font-weight: 700;
	font-size: 16px;
}

.rscg-commande .rscg-compteur {
	padding: 0.5em 0.7em;
	border-left: 4px solid #d98a00;
	background: #fff6e5;
}

.rscg-commande .rscg-compteur--ok {
	border-left-color: #2e7d32;
	background: #edf7ee;
}

.rscg-commande .rscg-delai {
	font-size: inherit; /* même taille que le récapitulatif (demande du 03/10/2026) */
}

.rscg-commande .rscg-liste-messages {
	margin: 0.4em 0;
	padding-left: 1.2em;
	font-size: 13px;
}

.rscg-commande .rscg-ecart {
	color: #8a1c13;
}

.rscg-commande .rscg-message {
	margin-top: 0.5em;
	font-weight: 700;
}

.rscg-commande .rscg-message--erreur {
	color: #8a1c13;
}

.rscg-commande .rscg-commande__erreur {
	padding: 0.8em;
	border-left: 4px solid var(--rscg-rouge);
	background: var(--rscg-fond);
}

/*
 * Ordinateur, dans la suite seulement : marquages et récapitulatif plus
 * compacts. Le schéma à gauche, les emplacements à droite, les deux faces
 * côte à côte ; le récapitulatif à gauche, le bouton à droite.
 */
@media (min-width: 900px) {
	.rscg-commande--suite .rscg-etape[data-rscg-section="marquages"] {
		display: grid;
		grid-template-columns: minmax(260px, 34%) minmax(0, 1fr);
		column-gap: 1.5em;
		align-items: start;
	}

	.rscg-commande--suite .rscg-etape[data-rscg-section="marquages"] > h3,
	.rscg-commande--suite .rscg-etape[data-rscg-section="marquages"] > .rscg-note,
	.rscg-commande--suite .rscg-etape[data-rscg-section="marquages"] > .rscg-recto-verso-ligne {
		grid-column: 1 / -1;
	}

	/* 0.10.1 : la ligne du recto-verso (vide, donc sans hauteur, sur une fiche non réversible) est la 3e rangée. */
	.rscg-commande--suite .rscg-etape[data-rscg-section="marquages"] > .rscg-schema {
		grid-column: 1;
		grid-row: 4 / span 2;
		position: sticky;
		top: 1em;
	}

	/* 0.16.0, bloc D : la phrase et les onglets d'un article composé ajoutent deux rangées pleine largeur. */
	.rscg-commande--suite .rscg-etape[data-rscg-section="marquages"] > .rscg-pieces {
		grid-column: 1 / -1;
	}

	.rscg-commande--suite .rscg-etape--parties[data-rscg-section="marquages"] > .rscg-schema {
		grid-row: 6 / span 2;
	}

	.rscg-commande--suite .rscg-etape[data-rscg-section="marquages"] > .rscg-schema:empty {
		display: none;
	}

	.rscg-commande--suite .rscg-etape[data-rscg-section="marquages"] > .rscg-schema:empty ~ div {
		grid-column: 1 / -1;
	}

	.rscg-commande--suite .rscg-etape[data-rscg-section="marquages"] > .rscg-schema ~ div {
		grid-column: 2;
	}

	.rscg-commande--suite .rscg-schema__figure {
		max-width: 48%;
	}

	.rscg-commande--suite [data-rscg-zones] {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		column-gap: 1em;
		align-items: start;
	}

	.rscg-commande--suite .rscg-face > h4 {
		margin-top: 0;
	}

	.rscg-commande--suite .rscg-recap {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(220px, 2fr);
		column-gap: 2em;
		align-items: start;
	}

	.rscg-commande--suite .rscg-recap > h3 {
		grid-column: 1 / -1;
	}

	.rscg-commande--suite .rscg-recap > [data-rscg-recap] {
		grid-column: 1;
		grid-row: 2 / span 2;
	}

	.rscg-commande--suite .rscg-recap > .rscg-bouton--principal,
	.rscg-commande--suite .rscg-recap > .rscg-message {
		grid-column: 2;
	}

	.rscg-commande--suite .rscg-recap > .rscg-bouton--principal {
		margin-top: 0;
	}
}

/*
 * Quantités en cartes quand la PLACE manque, quelle qu'en soit la raison :
 * téléphone, tablette, ou grille restée dans la colonne faute de galerie
 * (onze tailles y feraient des cases de 20 px). Une carte par coloris, ses
 * tailles en cases qui passent à la ligne.
 */
@container rscg-quantites (max-width: 600px) {
	.rscg-commande .rscg-quantites thead {
		display: none;
	}

	.rscg-commande table.rscg-quantites,
	.rscg-commande .rscg-quantites tbody {
		display: block;
		width: 100%;
	}

	.rscg-commande .rscg-quantites tbody tr {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
		gap: 0.4em;
		margin: 0 0 0.7em;
		padding: 0.5em;
		border-radius: 4px;
		background: var(--rscg-fond);
	}

	.rscg-commande .rscg-quantites tbody tr > * {
		background: none;
		border-radius: 0;
	}

	.rscg-commande .rscg-quantites .rscg-quantites__coloris {
		grid-column: 1 / -1;
		width: auto;
		padding-left: 0;
	}

	.rscg-commande .rscg-quantites td {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		padding: 0;
	}

	.rscg-commande .rscg-quantites td::before {
		content: attr(data-titre);
		font-size: 12px;
		font-weight: 700;
	}
}

@media (max-width: 640px) {
	.rscg-commande .rscg-etape {
		padding: 0.7em;
	}

	.rscg-commande .rscg-joueurs thead {
		display: none;
	}

	.rscg-commande .rscg-joueurs,
	.rscg-commande .rscg-joueurs tbody,
	.rscg-commande .rscg-joueurs tr,
	.rscg-commande .rscg-joueurs td {
		display: block;
		width: 100%;
	}

	.rscg-commande .rscg-joueurs tr {
		margin: 0 0 0.6em;
		padding: 0.4em;
		border: 1px solid var(--rscg-filet);
		border-radius: 4px;
	}

	.rscg-commande .rscg-joueurs td {
		border: 0;
	}

	.rscg-commande .rscg-joueurs td::before {
		content: attr(data-titre);
		display: block;
		font-size: 12px;
		font-weight: 700;
		color: var(--rscg-gris);
	}
}

/*
 * Anciennes mentions des descriptions, masquées à l'affichage sur une fiche
 * activée (03/10/2026). Le thème ne doit pas pouvoir les réafficher.
 */
[data-rscg-masque] {
	display: none !important;
}

/* ---------------------------------------------------------------- panier et caisse (lot 3) */

.rscg-bloc__titre {
	display: block;
	font-weight: 700;
}

.rscg-bloc__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin-top: 4px;
	font-size: 0.9em;
}

.rscg-bloc__action {
	text-decoration: underline;
}

.rscg-bloc__quantite,
.rscg-bloc__prix {
	white-space: nowrap;
}

.rscg-panier {
	--rscg-rouge: #bc1520;
	--rscg-filet: #dcdcdc;
	--rscg-fond: #f6f6f6;
	box-sizing: border-box;
	max-width: 100%;
	margin: 1.5em 0;
	padding: 16px;
	border: 1px solid var(--rscg-filet);
	background: var(--rscg-fond);
	line-height: 1.45;
}

.rscg-panier__titre {
	margin: 0 0 8px;
	font-size: 1.2em;
}

.rscg-panier__compteur {
	font-weight: 700;
}

.rscg-panier__compteur--manque,
.rscg-panier__alerte {
	color: var(--rscg-rouge);
}

.rscg-panier__alerte {
	padding: 8px 12px;
	border-left: 4px solid var(--rscg-rouge);
	background: #fff;
}

.rscg-panier__expedition,
.rscg-caisse__expedition {
	font-weight: 700;
}

.rscg-panier__champ {
	margin-top: 14px;
}

.rscg-panier__champ textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

.rscg-panier__aide {
	margin: 4px 0;
	font-size: 0.9em;
}

.rscg-panier__etat--erreur {
	color: var(--rscg-rouge);
}

.rscg-caisse {
	margin: 1em 0;
}

.rscg-caisse__case {
	padding: 10px 12px;
	border: 2px solid transparent;
}

.rscg-caisse__case--erreur {
	border-color: #bc1520;
	background: #fdf0f0;
}

/* ------------------------------------------------------------ lot S : stock Joma */

.rscg-commande .rscg-case__stock {
	display: block;
	margin-top: 3px;
	font-size: 0.72em;
	line-height: 1.25;
	color: var(--rscg-gris);
	white-space: normal;
}

.rscg-commande .rscg-case__stock--reassort {
	color: #8a5a00;
}

.rscg-commande .rscg-case__stock--indisponible,
.rscg-commande .rscg-case__stock--non_verifiable,
.rscg-commande .rscg-case__stock--excedent {
	color: var(--rscg-rouge);
}

/* 16.36 : une case indisponible se lit fermée (sa saisie l'est tant qu'elle est vide). */
.rscg-commande .rscg-case input:disabled {
	background-color: #eee;
	color: #6b6b6b;
	cursor: not-allowed;
}

.rscg-commande .rscg-case--depasse input {
	border-color: var(--rscg-rouge);
	outline: 2px solid var(--rscg-rouge);
}

.rscg-commande .rscg-stock-entete {
	margin: 8px 0 0;
	font-size: 0.85em;
	color: var(--rscg-gris);
}

.rscg-commande .rscg-stock-entete p {
	margin: 0 0 4px;
}

.rscg-commande .rscg-stock-entete__ancien {
	color: var(--rscg-rouge);
	font-weight: 600;
}

/* 0.4.3 : les prochains réassorts annoncés par Joma */

.rscg-commande .rscg-case__reassorts,
.rscg-commande .rscg-reassorts__bouton {
	display: inline-block;
	margin: 2px 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--rscg-encre);
	font: inherit;
	font-size: 0.72em;
	line-height: 1.25;
	text-decoration: underline;
	cursor: pointer;
	white-space: normal;
}

.rscg-commande .rscg-reassorts__bouton {
	margin: 6px 16px 0 0;
	font-size: 0.85em;
}

.rscg-commande .rscg-case__reassorts[aria-expanded="true"] {
	font-weight: 700;
}

.rscg-commande .rscg-reassorts {
	margin: 10px 0 0;
	padding: 10px 12px;
	border: 1px solid var(--rscg-filet);
	border-left: 4px solid var(--rscg-encre);
	background: #fff;
	font-size: 0.9em;
}

.rscg-commande .rscg-reassorts__titre {
	margin: 0 0 6px;
	font-weight: 700;
}

.rscg-commande .rscg-reassorts__liste {
	margin: 0 0 6px 18px;
	padding: 0;
}

.rscg-commande .rscg-reassorts__note {
	margin: 6px 0 0;
	color: var(--rscg-gris);
	font-size: 0.9em;
}

/* Un thème qui impose display aux boutons ou aux div ne doit pas rouvrir un élément caché (leçon Divi du lot S). */
.rscg-commande .rscg-case__reassorts[hidden],
.rscg-commande .rscg-reassorts[hidden] {
	display: none !important;
}

.rscg-commande .rscg-attendues {
	margin: 8px 0;
	padding: 8px 10px;
	border-left: 4px solid #8a5a00;
	background: var(--rscg-fond);
}

.rscg-commande .rscg-attendues p {
	margin: 0 0 4px;
}

/* 0.5.1 : ordre des colonnes, exemple et modèle au-dessus de la zone de collage. */
.rscg-commande .rscg-collage-ordre {
	margin: 8px 0 4px;
	padding: 6px 10px;
	border-left: 4px solid var(--rscg-rouge, #bc1520);
	background: var(--rscg-fond);
}

.rscg-commande .rscg-collage-exemple {
	width: auto;
	margin: 4px 0 8px;
	border-collapse: collapse;
	font-size: 0.9em;
}

.rscg-commande .rscg-collage-exemple caption {
	caption-side: top;
	text-align: left;
	color: var(--rscg-gris);
	padding-bottom: 2px;
}

.rscg-commande .rscg-collage-exemple th,
.rscg-commande .rscg-collage-exemple td {
	min-width: 70px;
	padding: 3px 8px;
	border: 1px solid #c8c8c8;
	text-align: left;
}

.rscg-commande .rscg-collage-exemple th {
	background: var(--rscg-fond);
}

.rscg-commande .rscg-collage-modele {
	margin: 0 0 8px;
}

.rscg-commande .rscg-ecart--titre {
	font-weight: 700;
}

/* ---- Lot D (0.6.0) : le devis PDF ---- */

/* Le message des fiches activées, juste avant le configurateur (16.29). */
.rscg-message-devis {
	margin: 0 0 14px;
	padding: 10px 14px;
	border-left: 4px solid #1f4e78;
	background: #f2f6fa;
	line-height: 1.45;
}

/* ---- 0.6.1 : recette du 07/10/2026 ---- */

/*
 * Sous « Valider la commande » : le devis, en bouton bleu de la même largeur,
 * EN DESSOUS (Commander reste le premier geste). Les styles de bouton de Divi
 * (module Totaux du panier) sont plus spécifiques que « .button » : sélecteur
 * par #page-container et !important sur les seules couleurs, bordures et marges.
 */
.rscg-devis-bouton {
	margin: 14px 0 0;
	text-align: center;
}

body .rscg-devis-bouton a.rscg-devis-bouton__lien,
body #page-container .rscg-devis-bouton a.rscg-devis-bouton__lien {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0 !important;
	padding: 10px 16px !important;
	border: 2px solid #1f5fa6 !important;
	border-radius: 3px;
	background: #1f5fa6 !important;
	color: #fff !important;
	font-size: 18px !important;
	font-weight: 600;
	line-height: 1.3 !important;
	text-align: center;
	text-decoration: none !important;
	letter-spacing: normal;
}

body .rscg-devis-bouton a.rscg-devis-bouton__lien:hover,
body .rscg-devis-bouton a.rscg-devis-bouton__lien:focus,
body #page-container .rscg-devis-bouton a.rscg-devis-bouton__lien:hover,
body #page-container .rscg-devis-bouton a.rscg-devis-bouton__lien:focus {
	border-color: #174a82 !important;
	background: #174a82 !important;
	color: #fff !important;
}

.rscg-devis-bouton a.rscg-devis-bouton__lien::after,
.rscg-devis-bouton a.rscg-devis-bouton__lien::before {
	display: none !important;
}

.rscg-devis-bouton__aide {
	margin: 6px 0 0 !important;
	padding: 0 !important;
	color: #555;
	font-size: 13px;
	line-height: 1.4;
}

/* Le panier sur téléphone : la photo de la configuration, que WooCommerce masque avec sa colonne. */
.rscg-bloc__vignette {
	display: none;
}

@media (max-width: 768px) {
	.rscg-bloc__vignette {
		display: block;
		width: 64px;
		margin: 0 0 6px auto;
	}

	.rscg-bloc__vignette img {
		display: block;
		width: 64px !important;
		height: auto;
	}
}

/* Les pages du devis de Mon compte. */
.rscg-devis__sponsor {
	margin: 0 0 14px;
	padding: 10px 14px;
	border-left: 4px solid #1f5fa6;
	background: #f2f6fa;
	line-height: 1.45;
}

.rscg-devis__form input.input-text,
.rscg-devis__form select {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

.rscg-devis__modes {
	margin: 0 0 10px !important;
	padding: 0 !important;
	list-style: none !important;
}

.rscg-devis__modes li {
	margin: 0 0 8px;
	list-style: none;
}

.rscg-devis__modes label {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	line-height: 1.4;
}

.rscg-devis__modes input {
	flex: none;
	margin-top: 4px;
}

.rscg-devis__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	align-items: center;
}

.rscg-devis__actions .button {
	max-width: 100%;
	white-space: normal;
}

.rscg-devis [data-rscg-devis-recap] td:last-child,
.rscg-devis [data-rscg-devis-recap] th:last-child {
	text-align: right;
	white-space: nowrap;
}

/* Mes devis : le tableau de « Commandes » de WooCommerce, replié en fiches sous 768 px. */
.rscg-devis__table td.rscg-devis__col-numero {
	font-weight: 600;
}

body .rscg-devis__table a.rscg-devis__pdf,
body #page-container .rscg-devis__table a.rscg-devis__pdf {
	display: inline-block;
	margin: 0 !important;
	padding: 4px 12px !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	white-space: nowrap;
}

.rscg-devis__table a.rscg-devis__pdf::after {
	display: none !important;
}

@media (max-width: 768px) {
	.rscg-devis__table tr.rscg-devis__ligne {
		margin: 0 0 14px;
		border: 1px solid #d9d9d9;
	}

	.rscg-devis__table td.rscg-devis__col-numero {
		background: #f2f6fa;
	}

	.rscg-devis__table td.rscg-devis__col-pdf {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.rscg-devis__table td.rscg-devis__col-pdf::before {
		display: none;
	}
}

/* 0.7.0 : « Commander ce devis » sous le PDF, et la page de préparation de la reprise. */
body .rscg-devis__table a.rscg-devis__commander,
body #page-container .rscg-devis__table a.rscg-devis__commander {
	margin: 6px 0 0 !important;
}

/* Les montants restent sur une ligne ; les en-têtes se replient (375 px : « Aujourd'hui » faisait déborder la page de 11 px). */
.rscg-reprise__table th:not(:first-child) {
	text-align: right;
}

.rscg-reprise__table td:not(:first-child) {
	text-align: right;
	white-space: nowrap;
}

@media (max-width: 480px) {
	.rscg-reprise__table th,
	.rscg-reprise__table td {
		padding: 8px 6px;
		font-size: 14px;
	}
}

.rscg-reprise__liste li {
	margin-bottom: 6px;
}

.rscg-reprise__choix {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: flex-start;
}

.rscg-reprise__option {
	flex: 1 1 260px;
	max-width: 100%;
}

.rscg-reprise__option .button {
	max-width: 100%;
	white-space: normal;
}

/* Le champ de la police (panier) : son texte natif ne déborde plus de l'encadré sur téléphone. */
input[data-rscg-police] {
	box-sizing: border-box;
	max-width: 100%;
}

/*
 * 0.6.2 (validation de la 0.6.1, 07/10/2026) : des champs modifiables qui ne
 * paraissent pas désactivés. Divi pose sur « .woocommerce form .form-row
 * .input-text » un fond #eee, un texte #999 et aucune bordure : la saisie
 * semblait éteinte. Retouche limitée au formulaire du devis (et à sa création
 * de compte) et aux champs de facturation, de création du compte et de livraison de la
 * caisse (le gabarit de facturation de WooCommerce) ;
 * aucun autre formulaire du site, aucune règle de saisie. Les conteneurs
 * .woocommerce-billing-fields et .woocommerce-shipping-fields n'existent que sur
 * la caisse (Mon compte › Adresses utilise .woocommerce-address-fields) ; le
 * module Divi de la caisse les place hors de « form.checkout ». Le grisé reste
 * réservé aux champs réellement désactivés ou en lecture seule.
 */
.rscg-devis__form input.input-text,
.rscg-devis__form select,
.rscg-devis-inscription input.input-text,
body .woocommerce-billing-fields .form-row .input-text,
body .woocommerce-account-fields .form-row .input-text,
body .woocommerce-billing-fields .form-row select,
body .woocommerce-shipping-fields .form-row .input-text,
body .woocommerce-shipping-fields .form-row select,
body .woocommerce-billing-fields .select2-container .select2-selection,
body .woocommerce-shipping-fields .select2-container .select2-selection {
	border: 1px solid #8c8c8c !important;
	border-radius: 3px !important;
	background-color: #fff !important;
	color: #1d1d1f !important;
	-webkit-text-fill-color: #1d1d1f;
	opacity: 1;
}

body .woocommerce-billing-fields .select2-container .select2-selection__rendered,
body .woocommerce-shipping-fields .select2-container .select2-selection__rendered {
	color: #1d1d1f !important;
}

/* Le texte d'exemple reste distinct d'une saisie, mais lisible (contraste 4,5:1). */
.rscg-devis__form input.input-text::placeholder,
.rscg-devis-inscription input.input-text::placeholder,
body .woocommerce-billing-fields .input-text::placeholder,
body .woocommerce-account-fields .input-text::placeholder,
body .woocommerce-shipping-fields .input-text::placeholder {
	color: #707070 !important;
	-webkit-text-fill-color: #707070;
	opacity: 1;
}

/* Le champ qui reçoit le curseur : un contour net. */
.rscg-devis__form input.input-text:focus,
.rscg-devis__form select:focus,
.rscg-devis-inscription input.input-text:focus,
body .woocommerce-billing-fields .form-row .input-text:focus,
body .woocommerce-account-fields .form-row .input-text:focus,
body .woocommerce-billing-fields .form-row select:focus,
body .woocommerce-shipping-fields .form-row .input-text:focus,
body .woocommerce-shipping-fields .form-row select:focus,
body .woocommerce-billing-fields .select2-container--focus .select2-selection,
body .woocommerce-billing-fields .select2-container--open .select2-selection,
body .woocommerce-shipping-fields .select2-container--focus .select2-selection,
body .woocommerce-shipping-fields .select2-container--open .select2-selection {
	border-color: #1f5fa6 !important;
	outline: 2px solid #1f5fa6 !important;
	outline-offset: 1px;
	box-shadow: none !important;
}

/* Seuls les champs réellement désactivés ou en lecture seule sont grisés. */
.rscg-devis__form input.input-text:disabled,
.rscg-devis__form input.input-text[readonly],
.rscg-devis__form select:disabled,
.rscg-devis-inscription input.input-text:disabled,
body .woocommerce-billing-fields .form-row .input-text:disabled,
body .woocommerce-account-fields .form-row .input-text:disabled,
body .woocommerce-billing-fields .form-row .input-text[readonly],
body .woocommerce-account-fields .form-row .input-text[readonly],
body .woocommerce-billing-fields .form-row select:disabled,
body .woocommerce-shipping-fields .form-row .input-text:disabled,
body .woocommerce-shipping-fields .form-row .input-text[readonly],
body .woocommerce-shipping-fields .form-row select:disabled {
	border-color: #d0d0d0 !important;
	background-color: #eee !important;
	color: #6b6b6b !important;
	-webkit-text-fill-color: #6b6b6b;
	cursor: not-allowed;
}