/* Section « Pourquoi Homelok est différente » : tableau comparatif */
.tableau__frame {
	max-width: 1240px;
	margin: clamp(32px, 4vw, 48px) auto 0;
	padding: 16px;
	overflow-x: auto;
	border-radius: 14px;
	background: var(--c-white);
	box-shadow: 0 10px 30px rgba(36, 31, 20, .05);
}

.tableau__table {
	width: 100%;
	min-width: 760px;
	border-collapse: separate;
	border-spacing: 12px 0;
	font-size: 0.875rem;
}

.tableau__table th,
.tableau__table td {
	padding: 14px 12px;
	font-weight: 400;
	vertical-align: middle;
}

.tableau__table thead th {
	vertical-align: top;
	text-align: center;
}

.tableau__table thead strong {
	display: block;
	margin-top: 10px;
	font-size: 1rem;
	font-weight: 400;
}

.tableau__table thead span:not(.tableau__head-card) {
	display: block;
	margin-top: 6px;
	font-size: 0.75rem;
	line-height: 1.35;
	color: var(--c-text);
}

.tableau__table thead .icon {
	width: 22px;
	height: 22px;
}

.tableau__table thead .tableau__features {
	width: 28%;
	text-align: left;
}

tbody .tableau__features {
	display: flex;
	align-items: center;
	gap: 10px;
	border-bottom: 1px solid var(--c-line);
	text-align: left;
}

tbody .tableau__features .icon {
	width: 18px;
	height: 18px;
	color: var(--c-gold);
}

/* Colonne Homelok foncée sur toute la hauteur */
.tableau__col1 {
	background: var(--c-dark);
	color: var(--c-white);
	text-align: center;
}

thead .tableau__col1 {
	border-radius: 14px 14px 0 0;
	color: var(--c-gold);
	padding-top: 20px;
}

thead .tableau__col1 span {
	color: rgba(255, 255, 255, .75) !important;
}

tbody tr:last-child .tableau__col1 {
	border-radius: 0 0 14px 14px;
	padding-bottom: 20px;
}

.tableau__head-card {
	display: block;
	padding: 16px 12px;
	border-radius: 10px;
	background: #f6e7c7;
}

.tableau__col2,
.tableau__col3 {
	text-align: center;
}

tbody .tableau__col2,
tbody .tableau__col3 {
	border-bottom: 1px solid var(--c-line);
}

.tableau__yes,
.tableau__no {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.tableau__yes .icon,
.tableau__no .icon {
	width: 18px;
	height: 18px;
}

.tableau__yes .icon { color: #3fae4f; }
.tableau__col1 .tableau__yes .icon { color: var(--c-gold); }
.tableau__no .icon { color: #e5484d; }

.tableau__none {
	color: var(--c-muted);
}