/* Tanat — Catalogue Machines
   Design tokens repris du modèle Claude Design, police unifiée en Futura PT. */

.tmc {
	--tmc-accent: #9B5B2E;
	--tmc-cols: 4;
	--tmc-bg: #f8f6f0;
	--tmc-panel: #F4EFE7;
	--tmc-panel-border: #E0D6C5;
	--tmc-topbar: #FBF7F0;
	--tmc-ink: #1C1815;
	--tmc-muted: #8B8175;
	--tmc-text: #5C5349;
	--tmc-card: #FEFCF8;
	--tmc-card-border: #EAE0CF;

	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 56px;
	background: var(--tmc-bg);
	font-family: "futura-pt", "Futura PT", Futura, system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.tmc *,
.tmc *::before,
.tmc *::after {
	box-sizing: border-box;
}

.tmc a {
	text-decoration: none;
	color: inherit;
}

/* Panneau ------------------------------------------------------------- */
.tmc__panel {
	width: 100%;
	max-width: 1440px;
	background: var(--tmc-panel);
	border: 1px solid var(--tmc-panel-border);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 24px 60px -32px rgba(40, 30, 20, .35);
}

/* Mode « à ras » : pas de cadre, s'intègre directement dans la page.
   (activé par défaut ; ajoutez frame="yes" au shortcode pour le cadre) */
.tmc--flush {
	padding: 0;
	background: transparent;
}

.tmc--flush .tmc__panel {
	max-width: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.tmc--flush .tmc__header,
.tmc--flush .tmc__filters,
.tmc--flush .tmc__count,
.tmc--flush .tmc__grid-wrap {
	padding-left: 0;
	padding-right: 0;
}

.tmc--flush .tmc__header {
	padding-top: 0;
}

/* Barre supérieure ---------------------------------------------------- */
.tmc__topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 48px;
	border-bottom: 1px solid #E5DBCA;
	background: var(--tmc-topbar);
}

.tmc__logo {
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	letter-spacing: .28em;
	color: var(--tmc-ink);
}

.tmc__topright {
	font-weight: 500;
	font-size: 12px;
	line-height: 1;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--tmc-muted);
	text-align: right;
}

/* En-tête ------------------------------------------------------------- */
.tmc__header {
	padding: 52px 48px 34px;
}

.tmc__eyebrow {
	display: block;
	font-weight: 600;
	font-size: 12px;
	line-height: 1;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--tmc-accent);
	margin-bottom: 16px;
}

.tmc__title {
	margin: 0;
	font-weight: 600;
	font-size: 52px;
	line-height: 1.02;
	letter-spacing: -.01em;
	color: var(--tmc-ink);
}

.tmc__subtitle {
	margin: 16px 0 0;
	max-width: 580px;
	font-weight: 400;
	font-size: 17px;
	line-height: 1.55;
	color: var(--tmc-text);
}

/* Filtres ------------------------------------------------------------- */
.tmc__filters {
	padding: 0 48px 12px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tmc__filter-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}

.tmc__filter-label {
	min-width: 78px;
	font-weight: 600;
	font-size: 11px;
	line-height: 1;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--tmc-muted);
}

.tmc__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.tmc__pill {
	padding: 9px 15px;
	border-radius: 22px;
	border: 1px solid #DBCFBB;
	background: transparent;
	color: #4A4139;
	font-family: inherit;
	font-weight: 500;
	font-size: 13px;
	line-height: 1;
	letter-spacing: .01em;
	cursor: pointer;
	white-space: nowrap;
	transition: all .15s ease;
}

.tmc__pill:hover {
	border-color: var(--tmc-ink);
}

.tmc__pill.is-active {
	border-color: var(--tmc-ink);
	background: var(--tmc-ink);
	color: var(--tmc-panel);
	font-weight: 600;
}

/* Compteur ------------------------------------------------------------ */
.tmc__count {
	padding: 20px 48px 8px;
	font-weight: 500;
	font-size: 13px;
	line-height: 1;
	color: var(--tmc-muted);
}

/* Grille -------------------------------------------------------------- */
.tmc__grid-wrap {
	padding: 16px 48px 56px;
}

.tmc__grid {
	display: grid;
	grid-template-columns: repeat(var(--tmc-cols), minmax(0, 1fr));
	gap: 22px;
}

.tmc__empty {
	padding: 60px 0;
	text-align: center;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: var(--tmc-muted);
}

/* Carte --------------------------------------------------------------- */
.tmc-card {
	display: flex;
	flex-direction: column;
	background: var(--tmc-card);
	border: 1px solid var(--tmc-card-border);
	border-radius: 15px;
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.tmc-card:hover {
	box-shadow: 0 18px 40px -22px rgba(40, 30, 20, .4);
	transform: translateY(-3px);
	border-color: #DDD0BB;
}

.tmc-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: flex-end;
	padding: 12px;
	background-color: #EEE6D8;
	background-image: repeating-linear-gradient(135deg, #EFE7D9 0, #EFE7D9 11px, #E9E0D0 11px, #E9E0D0 22px);
	overflow: hidden;
}

.tmc-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tmc-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 10px;
	border-radius: 20px;
	font-weight: 600;
	font-size: 11px;
	line-height: 1;
	letter-spacing: .02em;
	z-index: 1;
}

.tmc-card__badge.is-lactees {
	background: var(--tmc-accent);
	color: #FBF7F0;
	border: 1px solid var(--tmc-accent);
}

.tmc-card__badge.is-cafe {
	background: rgba(251, 247, 240, .94);
	color: var(--tmc-text);
	border: 1px solid #E2D8C6;
}

.tmc-card__photo-tag {
	position: relative;
	z-index: 1;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 400;
	font-size: 10.5px;
	line-height: 1;
	letter-spacing: .02em;
	color: #9A8F7E;
	background: rgba(251, 247, 240, .82);
	padding: 5px 8px;
	border-radius: 5px;
}

.tmc-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px 18px 20px;
	flex: 1;
}

.tmc-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.tmc-card__cat {
	font-weight: 600;
	font-size: 10.5px;
	line-height: 1;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tmc-accent);
}

.tmc-card__cap {
	font-weight: 600;
	font-size: 10.5px;
	line-height: 1;
	letter-spacing: .02em;
	color: #6B6258;
	background: #F1EADD;
	border: 1px solid #E6DCC9;
	padding: 5px 8px;
	border-radius: 20px;
	white-space: nowrap;
}

.tmc-card__brand {
	font-weight: 600;
	font-size: 11.5px;
	line-height: 1.3;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tmc-muted);
}

.tmc-card__model {
	margin: 3px 0 0;
	font-weight: 600;
	font-size: 23px;
	line-height: 1.08;
	color: var(--tmc-ink);
}

.tmc-card__desc {
	margin: 0;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	color: var(--tmc-text);
	text-wrap: pretty;
}

.tmc-card__price {
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	color: var(--tmc-ink);
}

.tmc-card__cta {
	margin-top: auto;
	padding-top: 6px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	color: var(--tmc-ink);
}

.tmc-card__arrow {
	color: var(--tmc-accent);
	font-size: 16px;
}

/* Fiche machine ------------------------------------------------------- */
.tmc-single {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	padding: 40px 48px 56px;
	align-items: start;
}

.tmc-single__media {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 15px;
	overflow: hidden;
	background-color: #EEE6D8;
	background-image: repeating-linear-gradient(135deg, #EFE7D9 0, #EFE7D9 11px, #E9E0D0 11px, #E9E0D0 22px);
	display: flex;
	align-items: flex-end;
	padding: 12px;
}

.tmc-single__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.tmc-single__specs {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 4px;
}

.tmc-single__price {
	font-weight: 600;
	font-size: 15px;
	color: var(--tmc-ink);
	align-self: center;
}

.tmc-single__content {
	margin-top: 10px;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	color: var(--tmc-text);
}

@media (max-width: 820px) {
	.tmc-single {
		grid-template-columns: 1fr;
		padding: 28px 24px 40px;
		gap: 24px;
	}
}

/* Responsive ---------------------------------------------------------- */
@media (max-width: 1100px) {
	.tmc__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
	.tmc { padding: 20px; }
	.tmc__topbar,
	.tmc__header,
	.tmc__filters,
	.tmc__count,
	.tmc__grid-wrap { padding-left: 24px; padding-right: 24px; }
	.tmc__header { padding-top: 36px; }
	.tmc__title { font-size: 38px; }
	.tmc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.tmc__grid { grid-template-columns: minmax(0, 1fr); }
	.tmc__filter-label { min-width: 0; width: 100%; }
}