/**
 * TW Frame — base Merlin Conciergerie (tokens + reset).
 * Couleurs extraites du site live / capture.
 */

@font-face {
	font-family: "Agrandir Grand";
	src: url("../fonts/agrandir/Agrandir-GrandLight.woff2") format("woff2"),
		url("../fonts/agrandir/Agrandir-GrandLight.woff") format("woff");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Agrandir Grand";
	src: url("../fonts/agrandir/Agrandir-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Agrandir Grand";
	src: url("../fonts/agrandir/Agrandir-TextBold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Agrandir Grand";
	src: url("../fonts/agrandir/Agrandir-GrandHeavy.woff2") format("woff2"),
		url("../fonts/agrandir/Agrandir-GrandHeavy.woff") format("woff");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

:root {
	--merlin-teal: #0e666a;
	--merlin-teal-soft: #64999d;
	--merlin-charcoal: #474546;
	--merlin-ink: #323337;
	--merlin-text: #4c4b4c;
	--merlin-muted: #8f908e;
	--merlin-sand: #d5d3ce;
	--merlin-sand-light: #e1e2dd;
	--merlin-bg: #ffffff;
	--merlin-bg-soft: #f5f5f5;
	--merlin-border: #dad8d7;

	--brand-green: var(--merlin-teal);
	--brand-red: #b7aca0;
	--brand-indigo: var(--merlin-charcoal);
	--background: var(--merlin-bg);
	--foreground: var(--merlin-ink);
	--primary: var(--merlin-teal);
	--secondary: var(--merlin-sand);
	--accent: #eff6f4;
	--muted: var(--merlin-bg-soft);
	--muted-foreground: var(--merlin-muted);
	--border: var(--merlin-border);
	--font-sans: "Public Sans", system-ui, sans-serif;
	--font-display: "Agrandir Grand", "Public Sans", system-ui, sans-serif;
}

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

body.tw-frame {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.55;
	color: var(--merlin-text);
	background: var(--merlin-bg);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-display);
	color: var(--merlin-charcoal);
	font-weight: 400;
	line-height: 1.15;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
}

.tw-frame-main {
	min-height: 40vh;
}

.entry-content {
	margin: 0;
}

.entry-content > *:first-child {
	margin-top: 0;
}

/* Bouton Merlin générique */
.sb-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.85rem 1.4rem;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sb-btn--light {
	background: #ffffff;
	color: var(--merlin-teal);
}

.sb-btn--light:hover {
	background: var(--merlin-sand-light);
}

.sb-btn--teal {
	background: var(--merlin-teal);
	color: #ffffff;
}

.sb-btn--teal:hover {
	background: #0a5255;
}

.sb-btn__arrow::after {
	content: "→";
	font-size: 1rem;
	line-height: 1;
}