/* Variables */
:root {
	--table-header-bg: #f0f3f8;
	--table-border: #e2e8f0;
	--text-primary: #1a202c;
	--text-secondary: #4a5568;
	--hover-bg: #f7fafc;
	--highlighted: rgba(59, 130, 246, 0.1);
	--highlight-border: rgba(59, 130, 246, 0.5);
}

/* Conteneur principal */
.product-specs-container {
	margin: 2rem auto;
	font-family: 'Inter', sans-serif;
	max-width: 100%;
	display: block;
}

/* Style de base pour le tableau */
.specs-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	border: 1px solid var(--table-border);
	margin: 0 auto;
	color: var(--text-secondary);
	font-size: 15px;
	line-height: 1.5;
}

/* En-têtes de tableau */
.specs-table .table-header td,
.specs-table tr:first-child td {
	background-color: var(--table-header-bg);
	color: var(--text-primary);
	font-weight: 600;
	text-align: center;
	padding: 16px;
	border-bottom: 2px solid var(--table-border);
}

/* Cellules de tableau */
.specs-table td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--table-border);
	border-right: 1px solid var(--table-border);
	vertical-align: middle;
	transition: background-color 0.2s ease;
}

/* Première colonne (noms des spécifications) */
.specs-table tr td:first-child {
	background-color: var(--table-header-bg);
	font-weight: 500;
	color: var(--text-primary);
}

/* Retire la bordure droite de la dernière cellule de chaque ligne */
.specs-table td:last-child {
	border-right: none;
}

/* Retire la bordure du bas de la dernière ligne */
.specs-table tr:last-child td {
	border-bottom: none;
}

/* Effets de surbrillance */
.specs-table tr:hover td {
	background-color: var(--highlighted);
}

/* Première colonne reste stable pendant le survol de ligne */
.specs-table tr:hover td:first-child {
	background-color: var(--table-header-bg);
	box-shadow: inset 4px 0 0 var(--highlight-border);
}

/* Style pour les cellules avec plusieurs colonnes de fusion */
.specs-table td[colspan] {
	text-align: center;
}

/* CSS pour le design responsive façon "cartes" sur mobile */
@media (max-width: 768px) {
	.product-specs-container {
		margin: 1rem 0;
		padding: 0 10px;
	}
	
	.specs-table {
		border: none;
		box-shadow: none;
	}
	
	/* Cacher les en-têtes du tableau */
	.specs-table .table-header,
	.specs-table tr:first-child {
		position: absolute;
		left: -9999px;
		height: 0;
		width: 0;
		overflow: hidden;
		visibility: hidden;
	}
	
	/* Transformer les lignes en cartes */
	.specs-table tr {
		display: block;
		margin-bottom: 20px;
		border-radius: 8px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		border: 1px solid var(--table-border);
		overflow: hidden;
	}
	
	/* Afficher les cellules en block */
	.specs-table td {
		display: flex;
		padding: 12px 15px;
		border-right: none;
		text-align: left;
		align-items: center;
	}
	
	/* Retirer le style spécial de la première colonne */
	.specs-table tr td:first-child {
		background-color: var(--table-header-bg);
	}
	
	/* Ajouter les étiquettes des colonnes avant le contenu */
	.specs-table td::before {
		content: attr(data-title);
		display: inline-block;
		width: 40%;
		min-width: 120px;
		font-weight: 600;
		color: var(--text-primary);
		border-right: 1px solid var(--table-border);
		margin-right: 15px;
		padding-right: 15px;
	}
	
	/* Styles spécifiques pour le contenu des cellules */
	.specs-table td {
		border-bottom: 1px solid var(--table-border);
	}
	
	.specs-table tr td:last-child {
		border-bottom: none;
	}
	
	/* Styles spécifiques pour les lignes alternées */
	.specs-table tr:nth-child(odd) {
		background-color: var(--table-header-bg);
	}
	
	/* Ajuster le style des cellules spéciales */
	.specs-table td[colspan] {
		font-weight: 600;
		background-color: var(--table-header-bg);
		text-align: center;
	}
	
	.specs-table td[colspan]::before {
		display: none;
	}
}

/* Ajustements pour les très petits écrans */
@media (max-width: 480px) {
	.specs-table td {
		padding: 10px;
		font-size: 14px;
	}
	
	.specs-table td::before {
		min-width: 100px;
	}
}