/**
 * Styles du bloc "Voir disponibilité" affiché sur la fiche produit.
 * Tout est préfixé .wsc- et volontairement peu spécifique pour ne pas
 * entrer en conflit avec le thème, ni avoir besoin de !important.
 *
 * Le tableau est rendu en cartes empilées à toutes les largeurs (l'ancien
 * rendu « mobile ») : une carte par site. Seule la ligne "Site" est visible,
 * avec le lien vers le produit dessous ; un clic sur cette ligne déplie le
 * produit et le prix. Palette claire uniquement, jamais de variante sombre.
 */

.wsc-frontend-box {
	--wsc-border: #e3e5e8;
	--wsc-muted: #6b7280;
	--wsc-text: #1f2328;
	--wsc-surface: #fff;
	--wsc-surface-alt: #f7f8fa;
	--wsc-accent: #1f7a3d;
	--wsc-accent-soft: #e7f4ec;
	--wsc-danger: #b32d2e;

	/* Force le rendu clair des éléments natifs même si l'OS/le thème est
	   en sombre : le bloc garde la même apparence dans tous les cas. */
	color-scheme: light;

	margin: 20px 0;
}

.wsc-frontend-box *,
.wsc-frontend-box *::before,
.wsc-frontend-box *::after {
	box-sizing: border-box;
}

/* ---------- Bouton ---------- */

.wsc-frontend-btn[disabled] {
	opacity: 0.65;
	cursor: progress;
}

/* ---------- États intermédiaires ---------- */

.wsc-frontend-results {
	margin-top: 14px;
}

.wsc-frontend-loading {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--wsc-muted);
	font-style: italic;
}

.wsc-spinner {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	border: 2px solid var(--wsc-border);
	border-top-color: var(--wsc-muted);
	border-radius: 50%;
	animation: wsc-spin 0.7s linear infinite;
}

@keyframes wsc-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wsc-spinner {
		animation-duration: 2.5s;
	}

	.wsc-chevron {
		transition: none;
	}
}

.wsc-frontend-unavailable,
.wsc-frontend-error {
	margin: 0;
	padding: 10px 12px;
	border-left: 3px solid var(--wsc-danger);
	background: #fdf0f0;
	color: var(--wsc-danger);
	font-weight: 600;
}

.wsc-frontend-count {
	margin: 0 0 8px;
	color: var(--wsc-muted);
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* ---------- Tableau en cartes ---------- */

/* Conteneur neutre : les cartes portent elles-mêmes le cadre, il n'y a
   donc plus rien à faire défiler horizontalement. */
.wsc-table-scroll {
	overflow-x: visible;
	border: 0;
	background: none;
}

.wsc-frontend-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	color: var(--wsc-text);
	font-size: 0.95em;
}

/* L'en-tête reste dans le DOM pour les lecteurs d'écran, mais les
   intitulés visibles viennent de td::before (data-label). */
.wsc-frontend-table thead {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.wsc-frontend-table,
.wsc-frontend-table tbody,
.wsc-frontend-table tr,
.wsc-frontend-table td {
	display: block;
	width: 100%;
}

.wsc-frontend-table tr {
	margin-bottom: 10px;
	border: 1px solid var(--wsc-border);
	border-radius: 8px;
	background: var(--wsc-surface);
	overflow: hidden;
}

.wsc-frontend-table tr:last-child {
	margin-bottom: 0;
}

.wsc-frontend-table td {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border: 0;
	text-align: right;
	vertical-align: middle;
}

/* Séparateur porté par le haut des cellules de détail : quand la carte est
   repliée elles disparaissent, et aucun filet ne reste en suspens. */
.wsc-frontend-table td + td {
	border-top: 1px solid var(--wsc-border);
}

/* Sans min-width: 0 un enfant flex refuse de passer sous la largeur de son
   texte et fait déborder la carte hors de l'écran. */
.wsc-frontend-table td > * {
	min-width: 0;
}

.wsc-frontend-table td::before {
	content: attr(data-label);
	flex: 0 0 auto;
	color: var(--wsc-muted);
	font-size: 0.78em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ---------- Ligne "Site" : sert de bouton de dépliage ---------- */

.wsc-col-site {
	cursor: pointer;
}

.wsc-col-site:hover {
	background: var(--wsc-surface-alt);
}

.wsc-site {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

/* Le <button> reprend l'apparence du texte : c'est toute la ligne qui fait
   office de zone cliquable, le bouton n'est là que pour le clavier et les
   lecteurs d'écran (aria-expanded / aria-controls). */
.wsc-site-toggle {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	text-align: right;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

.wsc-site-toggle:hover,
.wsc-site-toggle:focus {
	background: none;
	color: inherit;
}

.wsc-site-toggle:focus-visible {
	outline: 2px solid var(--wsc-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.wsc-site-name {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.wsc-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--wsc-accent-soft);
	color: var(--wsc-accent);
	font-size: 0.75em;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}

/* Chevron : pointe vers le bas quand la carte est repliée, vers le haut
   quand elle est ouverte. */
.wsc-chevron {
	width: 7px;
	height: 7px;
	flex: 0 0 auto;
	margin-bottom: 3px;
	border-right: 2px solid var(--wsc-muted);
	border-bottom: 2px solid var(--wsc-muted);
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.wsc-site-toggle[aria-expanded='true'] .wsc-chevron {
	margin-bottom: -2px;
	transform: rotate(-135deg);
}

/* ---------- Détail replié : produit et prix ---------- */

.wsc-frontend-table tr.wsc-is-collapsed .wsc-detail {
	display: none;
}

.wsc-product {
	display: block;
	color: var(--wsc-muted);
	overflow-wrap: anywhere;
}

.wsc-col-price {
	white-space: nowrap;
}

.wsc-price {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--wsc-text);
}

/* ---------- Lien vers le produit ---------- */

.wsc-link {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid var(--wsc-border);
	border-radius: 6px;
	background: var(--wsc-surface);
	color: inherit;
	font-size: 0.9em;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.wsc-link:hover,
.wsc-link:focus {
	border-color: var(--wsc-accent);
	background: var(--wsc-accent-soft);
	color: var(--wsc-accent);
	text-decoration: none;
}

.wsc-link-off {
	color: var(--wsc-muted);
	font-size: 0.9em;
	font-style: italic;
}