/**
 * Chrome commun des 5 pages outils (page-outil-*.php) — en-tête + badges,
 * FAQ en accordéon natif, renvoi croisé, disclaimer, placeholder
 * "Bientôt disponible". Tokens --mdc-* déjà en place dans base.css : pas
 * de nouvelle couleur/police ici.
 */

.mdc-tool-header {
	padding-block: var(--mdc-space-lg) var(--mdc-space-md);
	background: color-mix(in srgb, var(--mdc-nutrition-green) 12%, #fff);
}

.mdc-tool-header-description {
	margin: 0.4em 0 0;
	max-width: 60ch;
	color: var(--mdc-text);
}

.mdc-tool-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-top: var(--mdc-space-sm);
}

/*
 * 17 px minimum (charte des outils) et blanc sur vert foncé : le blanc sur
 * --mdc-teal ne donnait qu'un contraste de 3,6:1 (point signalé par le
 * brief des outils glycémiques).
 */
.mdc-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.35em 0.9em;
	border-radius: var(--mdc-radius-pill);
	background: var(--mdc-teal-hover);
	color: #fff;
	font-size: 1.0625rem;
	font-weight: 700;
}

.mdc-badge--soon {
	background: var(--mdc-terracotta);
}

/* Placeholder "Bientôt disponible" */
.mdc-tool-placeholder {
	padding-block: var(--mdc-space-lg);
}

.mdc-tool-placeholder p {
	margin: 0 0 var(--mdc-space-sm);
	max-width: 46ch;
}

/* FAQ — <details>/<summary> natifs, pas de JS */
.mdc-tool-faq {
	padding-block: var(--mdc-space-md);
}

.mdc-tool-faq-list {
	display: flex;
	flex-direction: column;
	gap: var(--mdc-space-sm);
	margin-top: var(--mdc-space-sm);
}

.mdc-tool-faq-item {
	padding: var(--mdc-space-sm) var(--mdc-space-md);
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--mdc-text) 12%, transparent);
	border-radius: var(--mdc-radius);
}

.mdc-tool-faq-item summary {
	font-weight: 700;
	cursor: pointer;
	min-height: 44px;
	display: flex;
	align-items: center;
}

.mdc-tool-faq-item summary::marker {
	color: var(--mdc-teal);
}

.mdc-tool-faq-item p {
	margin: 0.5em 0 0;
	color: var(--mdc-text);
}

/* Renvoi croisé vers les autres outils */
.mdc-tool-cross-links {
	padding-block: var(--mdc-space-md);
}

.mdc-tool-cross-links-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--mdc-space-sm);
	margin-top: var(--mdc-space-sm);
}

.mdc-tool-cross-link {
	display: flex;
	align-items: center;
	gap: 0.6em;
	min-height: 44px;
	padding: 0.75em 1em;
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--mdc-text) 12%, transparent);
	border-radius: var(--mdc-radius);
	color: var(--mdc-text);
	font-weight: 700;
	text-decoration: none;
}

.mdc-tool-cross-link:hover,
.mdc-tool-cross-link:focus-visible {
	border-color: var(--mdc-teal);
	color: var(--mdc-teal-hover);
}

.mdc-tool-cross-link svg {
	flex: 0 0 auto;
	width: 1.4em;
	height: 1.4em;
	color: var(--mdc-teal);
}

/* Disclaimer */
.mdc-tool-disclaimer {
	padding-block: var(--mdc-space-md) var(--mdc-space-lg);
}

.mdc-tool-disclaimer p {
	margin: 0;
	padding: var(--mdc-space-sm) var(--mdc-space-md);
	background: color-mix(in srgb, var(--mdc-text) 5%, #fff);
	border-radius: var(--mdc-radius);
	font-size: 0.9rem;
	color: var(--mdc-text);
}