/* ==========================================================
   Blocs SEO des pages catégories — lerucherdudje.fr
   Utilise les design tokens du thème (style.css :root)
   ========================================================== */

/* --- Intro au-dessus des produits --- */
.cat-intro {
	max-width: 860px;
	margin: 0 auto var(--space-3xl);
}

.cat-intro p {
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--text-light);
}

.cat-intro strong {
	color: var(--bark);
}

.cat-intro-badges {
	margin-top: var(--space-md);
	padding: var(--space-md) var(--space-lg);
	background: var(--honey-glow);
	border-left: 4px solid var(--honey-gold);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	font-size: 0.9rem;
	color: var(--bark);
	line-height: 1.6;
}

/* --- Contenu long sous les produits --- */
.cat-seo {
	max-width: 860px;
	margin: var(--space-3xl) auto 0;
	line-height: 1.7;
	color: var(--text-light);
}

.cat-seo h2 {
	font-family: 'Playfair Display', serif;
	color: var(--bark);
	margin-top: var(--space-2xl);
	margin-bottom: var(--space-md);
}

.cat-seo h2:first-child {
	margin-top: 0;
}

.cat-seo h3 {
	color: var(--bark);
	margin-top: var(--space-lg);
	margin-bottom: var(--space-sm);
}

.cat-seo h3 a {
	color: var(--honey-deep);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s var(--ease-out);
}

.cat-seo h3 a:hover {
	border-color: var(--honey-deep);
}

.cat-seo ul {
	padding-left: 1.2rem;
	margin: var(--space-sm) 0;
}

.cat-seo li {
	margin-bottom: var(--space-sm);
}

/* --- Tableau comparatif essaims --- */
.cat-comparatif-wrap {
	overflow-x: auto;
	margin: var(--space-lg) 0 var(--space-2xl);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-sm);
}

.cat-comparatif {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	font-size: 0.95rem;
	background: var(--white);
}

.cat-comparatif th,
.cat-comparatif td {
	padding: var(--space-sm) var(--space-md);
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--cream-dark);
}

.cat-comparatif thead th {
	background: var(--bark);
	color: var(--cream);
	font-weight: 600;
}

.cat-comparatif tbody tr:nth-child(even) {
	background: var(--cream);
}

/* --- FAQ en accordéon --- */
.cat-faq {
	margin-top: var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.cat-faq-item {
	background: var(--white);
	border: 1px solid var(--cream-dark);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.cat-faq-item + .cat-faq-item {
	margin-top: 0;
}

.cat-faq-item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding: var(--space-md) var(--space-lg);
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	color: var(--bark);
	font-size: 1.05rem;
}

.cat-faq-item summary::-webkit-details-marker {
	display: none;
}

.cat-faq-item summary::after {
	content: '+';
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--honey-glow);
	color: var(--honey-deep);
	font-size: 1.2rem;
	line-height: 1;
	transition: transform 0.25s var(--ease-out), background 0.2s var(--ease-out);
}

.cat-faq-item:hover summary::after {
	background: var(--honey-light);
}

.cat-faq-item[open] summary::after {
	transform: rotate(135deg);
}

.cat-faq-item[open] summary {
	border-bottom: 1px solid var(--cream-dark);
}

.cat-faq-answer {
	padding: var(--space-md) var(--space-lg) var(--space-lg);
	color: var(--text-light);
	animation: cat-faq-in 0.25s var(--ease-out);
}

.cat-faq-answer p {
	line-height: 1.7;
}

@keyframes cat-faq-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* --- Responsive --- */
@media (max-width: 640px) {
	.cat-intro,
	.cat-seo {
		max-width: 100%;
	}

	.cat-intro {
		margin-bottom: var(--space-2xl);
	}

	.cat-faq-item summary {
		padding: var(--space-sm) var(--space-md);
		font-size: 0.98rem;
	}

	.cat-faq-answer {
		padding: var(--space-sm) var(--space-md) var(--space-md);
	}
}