/* ===== Tokens ===== */
:root {
	--paper: #F1F4EE;
	--paper-tint: #DCE3D6;
	--ink: #2A2E27;
	--ink-soft: #5B6058;
	--jade: #4B6B58;
	--jade-deep: #354C3F;
	--ochre: #A9793F;
	--line: #C9D0C2;
	--radius: 3px;

	--font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
	--font-body: "Inter", "Segoe UI", system-ui, sans-serif;
	--font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* ===== Reset minimal ===== */
* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
}

/* ===== Image de fond avec fondu ===== */
.bg-image {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: auto;
	max-width: none;
	opacity: 0.5;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, black 65%);
	mask-image: linear-gradient(to right, transparent 0%, black 65%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	pointer-events: none;
	z-index: -1;
}

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

a {
	color: var(--jade-deep);
}

.wrap {
	max-width: 780px;
	margin: 0 auto;
	padding: 0 24px;
}

.skip-link {
	position: absolute;
	left: -999px;
	top: 0;
	background: var(--ink);
	color: var(--paper);
	padding: 10px 16px;
	z-index: 100;
}

.skip-link:focus {
	left: 0;
}

/* Focus visible partout */
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--ochre);
	outline-offset: 3px;
}

/* ===== En-tête ===== */
.site-header {
	position: sticky;
	z-index: 10;
	background: rgba(241, 244, 238, 0.9);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--line);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 14px;
	padding-bottom: 14px;
	flex-wrap: wrap;
	gap: 10px;
}

.logo {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.3rem;
	color: var(--jade-deep);
	text-decoration: none;
}

.site-header nav ul {
	list-style: none;
	display: flex;
	gap: 24px;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.site-header nav a {
	text-decoration: none;
	color: var(--ink-soft);
	font-size: 0.95rem;
	font-weight: 500;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
}

.site-header nav a:hover {
	color: var(--jade-deep);
	border-bottom-color: var(--jade-deep);
}

/* ===== Hero ===== */
.hero {
	padding: 72px 0 64px;
}

.hero__inner {
	display: flex;
	align-items: center;
	gap: 48px;
}

.eyebrow {
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.78rem;
	color: var(--jade);
	margin: 0 0 18px;
}

h1 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(2.2rem, 5vw, 3.2rem);
	line-height: 1.1;
	margin: 0 0 20px;
	color: var(--ink);
}

.hero__lead {
	font-size: 1.08rem;
	color: var(--ink-soft);
	max-width: 46ch;
	margin: 0 0 28px;
}

/* Bouton */
.bouton {
	display: inline-block;
	background: var(--jade-deep);
	color: var(--paper) !important;
	text-decoration: none;
	padding: 12px 24px;
	border-radius: var(--radius);
	font-weight: 500;
	font-size: 0.95rem;
	transition: background 0.15s ease;
}

.bouton:hover {
	background: var(--jade);
}

.bouton--discret {
	background: transparent;
	color: var(--jade-deep) !important;
	border: 1px solid var(--jade-deep);
	margin-right: 12px;
	margin-bottom: 10px;
}

.bouton--discret:hover {
	background: var(--jade-deep);
	color: var(--paper) !important;
}

/* Yin-yang — signature du site */
.hero__breath {
	width: 160px;
	height: 160px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.yinyang {
	position: relative;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	border: 2px solid var(--jade-deep);
	background: linear-gradient(to bottom, var(--paper) 50%, var(--jade-deep) 50%);
	background-origin: border-box;
	overflow: hidden;
	animation: tourner 24s linear infinite;
}

.yinyang::before,
.yinyang::after {
	content: "";
	position: absolute;
	width: 50%;
	height: 50%;
	border-radius: 50%;
}

.yinyang::before {
	flex-shrink: 0; /* Prevent flex to shrink and result in an ellipse */
	left: 0%;
	top: 25%;
	background: var(--jade-deep);
}

.yinyang::after {
	left: 50%;
	top: 25%;
	background: var(--paper);
}

.yinyang__point {
	position: absolute;
	width: 20%;
	height: 20%;
	border-radius: 50%;
	top: 40%;
	z-index: 1;
}

.yinyang__point--haut {
	transform: translateX(-50%);
	left: 25%;
	background: var(--paper);
}

.yinyang__point--bas {
	transform: translateX(-50%);
	left: 75%;
	background: var(--jade-deep);
}

@keyframes tourner {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.yinyang {
		animation: none;
	}
}


/* ===== Sections ===== */
.section {
	padding: 56px 0;
	border-top: 1px solid var(--line);
}

.section--tint {
	background: var(--paper-tint);
}

h2 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.7rem;
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 28px;
}

.puce {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1.5px solid var(--jade);
	flex-shrink: 0;
}

h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--jade-deep);
	margin: 0 0 12px;
}

.lieu {
	margin-bottom: 36px;
}

.lieu:last-child {
	margin-bottom: 0;
}

.texte p {
	margin: 0 0 14px;
	max-width: 62ch;
}

.texte p:last-child {
	margin-bottom: 0;
}

.mentions {
	font-family: var(--font-mono);
	font-size: 0.88rem;
	color: var(--ink-soft);
}

.note {
	font-size: 0.92rem;
	color: var(--ink-soft);
	margin-top: 10px;
}

/* ===== Tableaux d'horaires ===== */
table.horaires {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

table.horaires th,
table.horaires td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--line);
}

table.horaires th {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--jade);
	font-weight: 500;
}

table.horaires .detail {
	font-size: 0.85rem;
	color: var(--ink-soft);
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* ===== Liens amis ===== */
.liens-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.liens-liste a {
	font-family: var(--font-display);
	font-size: 1.1rem;
	text-decoration: none;
	border-bottom: 1px solid var(--jade);
}

.liens-liste a:hover {
	color: var(--ochre);
	border-bottom-color: var(--ochre);
}

/* ===== Pied de page ===== */
.site-footer {
	border-top: 1px solid var(--line);
	padding: 28px 0;
}

.site-footer__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 0.88rem;
	color: var(--ink-soft);
}

.site-footer a {
	color: var(--ink-soft);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--jade-deep);
}

/* ===== Mobile ===== */
@media (max-width: 640px) {
	.hero__inner {
		flex-direction: column-reverse;
		text-align: left;
		align-items: center;
	}

	.hero__breath {
		width: 110px;
		height: 110px;
	}

	.yinyang {
		width: 110px;
		height: 110px;
	}

	.bg-image {
		opacity: 0.1;
	}

	table.horaires thead {
		display: none;
	}

	table.horaires tr {
		display: block;
		margin-bottom: 14px;
		border: 1px solid var(--line);
		border-radius: var(--radius);
	}

	table.horaires td {
		display: block;
		border-bottom: none;
		padding: 6px 12px;
	}

	table.horaires td::before {
		content: attr(data-label);
		font-family: var(--font-mono);
		font-size: 0.72rem;
		text-transform: uppercase;
		color: var(--jade);
		display: block;
		margin-top: 6px;
	}

	table.horaires td:first-child::before {
		margin-top: 10px;
	}

	table.horaires td:last-child {
		padding-bottom: 10px;
	}
}