/**
 * Tendance Gaming – Coupons multi-réseaux
 * Affichage compatible avec les tableaux marchands Rehub.
 */

.table_merchant_list,
.table_merchant_list > *,
.tgc-coupon-column,
.tgc-coupon-column * {
	box-sizing: border-box;
}

/*
 * La structure native Rehub reste inchangée.
 */
.table_merchant_list {
	width: 100%;
	max-width: 100%;
	overflow: visible;
}

/* =========================================================
 * Colonne marchand
 * ======================================================= */

.table_merchant_list .merchant_thumb {
	width: 150px !important;
	min-width: 150px !important;
	max-width: 150px !important;
	padding: 6px 4px !important;
	overflow: hidden !important;
	vertical-align: middle !important;
	white-space: nowrap !important;
	text-align: center !important;
}

.table_merchant_list .merchant_thumb a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow: hidden !important;
	color: inherit;
	font-size: 12px;
	line-height: 1.2;
	text-decoration: none;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.table_merchant_list .merchant_thumb img {
	display: inline-block;
	flex: 0 0 auto;
	width: auto !important;
	height: auto !important;
	max-width: 22px !important;
	max-height: 22px !important;
	margin: 0 !important;
	object-fit: contain;
	vertical-align: middle;
}

.table_merchant_list .merchant_thumb span,
.table_merchant_list .merchant_thumb .merchant_name,
.table_merchant_list .merchant_thumb .merchant-title {
	display: inline-block !important;
	flex: 0 1 auto;
	min-width: 0;
	max-width: 118px;
	overflow: hidden !important;
	font-size: 12px;
	line-height: 1.2;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	vertical-align: middle;
}

/* =========================================================
 * Colonne prix
 * ======================================================= */

.table_merchant_list .price_count,
.table_merchant_list .price_col,
.table_merchant_list .merchant_price {
	position: relative;
	z-index: 2;
	padding-left: 6px !important;
	padding-right: 6px !important;
	background: inherit;
	white-space: nowrap !important;
	vertical-align: middle !important;
}

/* =========================================================
 * Colonne coupon
 * ======================================================= */

.table_merchant_list .tgc-coupon-column {
	width: 158px !important;
	min-width: 158px !important;
	max-width: 158px !important;
	padding: 5px 4px !important;
	overflow: visible !important;
	vertical-align: middle !important;
	text-align: center !important;
}

.tgc-coupon-content {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	vertical-align: middle;
}

.tgc-coupon-empty {
	display: inline-block;
	color: #8c8f94;
	font-size: 17px;
	font-weight: 500;
	line-height: 1;
	vertical-align: middle;
}

/* =========================================================
 * Code promotionnel
 * ======================================================= */

.tgc-coupon-copy {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 3px 4px;
	width: auto;
	max-width: 128px;
	min-height: 34px;
	margin: 0;
	padding: 5px 7px;
	border: 1px dashed #e23855;
	border-radius: 5px;
	background: #fff7f8;
	color: #222;
	box-shadow: none;
	cursor: pointer;
	font: inherit;
	line-height: 1.15;
	text-align: center;
	vertical-align: middle;
	white-space: normal;
	overflow: hidden;
}

.tgc-coupon-copy:hover,
.tgc-coupon-copy:focus {
	border-color: #bf2440;
	background: #ffebef;
	color: #111;
	outline: none;
}

.tgc-coupon-copy:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

.tgc-coupon-code {
	display: inline-block;
	flex: 0 1 auto;
	min-width: 0;
	max-width: 48px;
	overflow: hidden;
	color: #d42f4b;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.15;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tgc-coupon-discount {
	display: inline-block;
	flex: 0 0 auto;
	color: #16833b;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.15;
	white-space: nowrap;
}

/*
 * Le libellé reste visible afin d’afficher clairement
 * « Copier » puis « Copié » après le clic.
 */
.tgc-coupon-copy-label {
	display: block !important;
	flex: 0 0 100%;
	position: static !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 1px 0 0 !important;
	overflow: visible !important;
	clip: auto !important;
	border: 0 !important;
	color: #646970;
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap !important;
}

/* =========================================================
 * Remise automatique
 * ======================================================= */

.tgc-coupon-auto {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	max-width: 128px;
	min-height: 34px;
	padding: 6px 7px;
	border-radius: 5px;
	background: #eaf6ec;
	color: #137532;
	font-size: 12px;
	font-weight: 750;
	line-height: 1.25;
	text-align: center;
	vertical-align: middle;
	white-space: normal;
	word-break: normal;
	overflow-wrap: normal;
}

/* =========================================================
 * Icône d’information
 * ======================================================= */

.tgc-info-wrapper {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	z-index: 20;
}

.tgc-info-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	min-width: 20px;
	padding: 0;
	border: 1px solid #8c8f94;
	border-radius: 50%;
	background: #fff;
	color: #50575e;
	box-shadow: none;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	font-family: Georgia, serif;
	font-size: 12px;
	font-weight: 700;
	font-style: italic;
	line-height: 1;
}

.tgc-info-icon:hover,
.tgc-info-icon:focus {
	border-color: #2271b1;
	color: #2271b1;
	outline: none;
}

.tgc-info-icon:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

/* =========================================================
 * Infobulle
 * ======================================================= */

.tgc-info-tooltip {
	position: absolute;
	right: 0;
	bottom: calc(100% + 10px);
	display: none;
	width: 300px;
	max-width: calc(100vw - 30px);
	padding: 13px 14px;
	border: 1px solid #c3c4c7;
	border-radius: 6px;
	background: #fff;
	color: #2c3338;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
	white-space: normal;
	z-index: 99999;
}

/*
 * Ouverture de l’infobulle :
 * - avec la classe ajoutée par JavaScript ;
 * - au clavier grâce à :focus-within ;
 * - au survol uniquement sur les appareils munis d’une souris.
 */
.tgc-info-wrapper.tgc-info-open,
.tgc-info-wrapper:focus-within {
	z-index: 100000;
}

.tgc-info-wrapper.tgc-info-open .tgc-info-tooltip,
.tgc-info-wrapper:focus-within .tgc-info-tooltip {
	display: grid;
	gap: 6px;
}

@media (hover: hover) and (pointer: fine) {
	.tgc-info-wrapper:hover {
		z-index: 100000;
	}

	.tgc-info-wrapper:hover .tgc-info-tooltip {
		display: grid;
		gap: 6px;
	}
}

.tgc-info-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 5px;
	border-width: 7px 7px 0;
	border-style: solid;
	border-color: #fff transparent transparent;
}

.tgc-info-title {
	display: block;
	color: #1d2327;
	font-size: 13px;
	font-weight: 800;
}

.tgc-info-offer {
	display: block;
	color: #c92e47;
	font-weight: 750;
}

.tgc-info-scope {
	display: block;
	color: #135e96;
	font-weight: 650;
}

.tgc-info-keywords {
	display: block;
	color: #50575e;
}

.tgc-info-purchase-condition {
	display: block;
	padding: 6px 8px;
	border-left: 3px solid #dba617;
	background: #fff8e5;
	color: #5f4300;
	font-weight: 650;
}

.tgc-info-conditions {
	display: block;
	color: #3c434a;
}

.tgc-info-expiration {
	display: block;
	padding-top: 5px;
	border-top: 1px solid #e2e4e7;
	color: #646970;
	font-size: 11px;
}

/* =========================================================
 * Colonne bouton
 * ======================================================= */

.table_merchant_list .buttons_col {
	width: 92px !important;
	min-width: 92px !important;
	max-width: 92px !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	overflow: visible !important;
	vertical-align: middle !important;
}

.table_merchant_list .buttons_col .re_track_btn {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	min-width: 92px !important;
	max-width: 92px !important;
	padding-left: 5px !important;
	padding-right: 5px !important;
	box-sizing: border-box;
	font-size: 15px;
	white-space: nowrap !important;
}

/* =========================================================
 * Écrans étroits
 * ======================================================= */

@media screen and (max-width: 767px) {

	/*
	 * Le tableau reste entièrement contenu dans l’écran.
	 * Les colonnes sont réduites uniquement sur mobile.
	 */
	.table_merchant_list {
		width: 100% !important;
		max-width: 100% !important;
		overflow: visible !important;
	}

	.table_merchant_list .merchant_thumb {
		width: 108px !important;
		min-width: 108px !important;
		max-width: 108px !important;
		padding-left: 2px !important;
		padding-right: 2px !important;
	}

	.table_merchant_list .merchant_thumb a {
		gap: 2px;
		font-size: 10px;
	}

	.table_merchant_list .merchant_thumb img {
		max-width: 18px !important;
		max-height: 18px !important;
	}

	.table_merchant_list .merchant_thumb span,
	.table_merchant_list .merchant_thumb .merchant_name,
	.table_merchant_list .merchant_thumb .merchant-title {
		max-width: 84px;
		font-size: 10px;
	}

	.table_merchant_list .price_count,
	.table_merchant_list .price_col,
	.table_merchant_list .merchant_price {
		width: 72px !important;
		min-width: 72px !important;
		max-width: 72px !important;
		padding-left: 3px !important;
		padding-right: 3px !important;
		font-size: 13px !important;
	}

	.table_merchant_list .tgc-coupon-column {
		width: 108px !important;
		min-width: 108px !important;
		max-width: 108px !important;
		padding: 4px 2px !important;
	}

	.tgc-coupon-content {
		gap: 3px;
	}

	.tgc-coupon-copy,
	.tgc-coupon-auto {
		max-width: 82px;
		min-height: 32px;
		padding: 4px 3px;
	}

	.tgc-coupon-code {
		max-width: 40px;
		font-size: 10px;
	}

	.tgc-coupon-discount {
		font-size: 10px;
	}

	.tgc-coupon-copy-label {
		font-size: 8px;
	}

	.tgc-coupon-auto {
		font-size: 10px;
		font-weight: 750;
		line-height: 1.2;
	}

	.tgc-info-icon {
		width: 20px;
		height: 20px;
		min-width: 20px;
		font-size: 11px;
		touch-action: manipulation;
	}

	.tgc-info-wrapper {
		z-index: 50;
	}

	.tgc-info-wrapper.tgc-info-open,
	.tgc-info-wrapper:focus-within {
		z-index: 100000;
	}

	.table_merchant_list .buttons_col {
		width: 68px !important;
		min-width: 68px !important;
		max-width: 68px !important;
	}

	.table_merchant_list .buttons_col .re_track_btn {
		width: 68px !important;
		min-width: 68px !important;
		max-width: 68px !important;
		padding-left: 2px !important;
		padding-right: 2px !important;
		font-size: 11px !important;
	}

	.tgc-info-tooltip {
		position: fixed;
		left: 15px;
		right: 15px;
		bottom: 20px;
		width: auto;
		max-width: none;
	}

	.tgc-info-tooltip::after {
		display: none;
	}
}

/* =========================================================
 * Très petits écrans
 * ======================================================= */

@media screen and (max-width: 390px) {

	.table_merchant_list .merchant_thumb {
		width: 100px !important;
		min-width: 100px !important;
		max-width: 100px !important;
	}

	.table_merchant_list .merchant_thumb span,
	.table_merchant_list .merchant_thumb .merchant_name,
	.table_merchant_list .merchant_thumb .merchant-title {
		max-width: 76px;
	}

	.table_merchant_list .price_count,
	.table_merchant_list .price_col,
	.table_merchant_list .merchant_price {
		width: 68px !important;
		min-width: 68px !important;
		max-width: 68px !important;
		font-size: 12px !important;
	}

	.table_merchant_list .tgc-coupon-column {
		width: 102px !important;
		min-width: 102px !important;
		max-width: 102px !important;
	}

	.tgc-coupon-copy,
	.tgc-coupon-auto {
		max-width: 77px;
	}

	.table_merchant_list .buttons_col,
	.table_merchant_list .buttons_col .re_track_btn {
		width: 64px !important;
		min-width: 64px !important;
		max-width: 64px !important;
		font-size: 10px !important;
	}
}

/* =========================================================
 * Barre mobile Rehub : Comparer + favoris
 * Empêche uniquement ces boutons d’élargir la page.
 * ======================================================= */

@media screen and (max-width: 767px) {

	.rh_mob_bottom_menu,
	.rh_mobile_bottom_menu,
	.rh-mobile-bottom-menu,
	.rehub-mobile-bottom-menu,
	.mobilebottommenu {
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100vw !important;
		max-width: 100vw !important;
		min-width: 0 !important;
		margin: 0 !important;
		box-sizing: border-box !important;
		transform: none !important;
		overflow: hidden !important;
	}

	.rh_mob_bottom_menu > *,
	.rh_mobile_bottom_menu > *,
	.rh-mobile-bottom-menu > *,
	.rehub-mobile-bottom-menu > *,
	.mobilebottommenu > * {
		flex: 1 1 0 !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: 50% !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}

	.rh_mob_bottom_menu a,
	.rh_mobile_bottom_menu a,
	.rh-mobile-bottom-menu a,
	.rehub-mobile-bottom-menu a,
	.mobilebottommenu a {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}
}