/* Design tokens, reset, typography, shared button styles. */

:root {
	--bg: oklch(0.14 0.01 45);
	--bg-darkest: oklch(0.08 0.008 45);
	--bg-alt: oklch(0.1 0.01 45);
	--bg-card: oklch(0.19 0.012 45);
	--bg-panel-alt: oklch(0.17 0.011 45);
	--bg-avatar-placeholder: oklch(0.22 0.014 45);

	--accent: #8bc53f;
	--accent-hover: #9ed456; /* lighter, for hover state */
	--accent-fill: #6ea82f; /* darker, for filled/pressed elements */

	--text-heading: oklch(0.96 0.005 45);
	--text-body-strong: oklch(0.88 0.006 45);
	--text-body: oklch(0.85 0.008 45);
	--text-body-soft: oklch(0.78 0.008 45);
	--text-body-dim: oklch(0.75 0.008 45);
	--text-muted: oklch(0.65 0.01 45);
	--text-dim: oklch(0.6 0.01 45);
	--text-faint: oklch(0.55 0.01 45);
	--text-legal: oklch(0.5 0.01 45);

	--border: oklch(0.3 0.01 45);
	--border-soft: oklch(0.3 0.01 45 / 0.5);
	--border-row: oklch(0.25 0.01 45);
	--border-outline: oklch(0.4 0.01 45);
	--border-dashed: oklch(0.35 0.01 45);

	--radius-btn: 2px;
	--radius-card: 4px;
	--radius-panel: 6px;
	--radius-input: 3px;

	--font-heading: 'Archivo Black', sans-serif;
	--font-body: 'Barlow', sans-serif;

	--content-max: 1280px;
}

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

html {
	height: 100%;
}

/* Sticky footer: body is a column flex container spanning at least the
   full viewport height, and .site-footer (margin-top: auto in layout.css)
   gets pushed to the bottom of it. Without this, any page short enough to
   not naturally fill the viewport (e.g. Abonnements, with only a hero +
   3 pricing cards) leaves the footer sitting right after the content
   instead of at the bottom, with body's own background showing through
   as a plain gap underneath — not a bug in the content itself, just what
   a static-height footer does on a short page. */
body {
	margin: 0;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--bg);
	color: var(--text-body);
	font-family: var(--font-body);
	font-weight: 400;
}

/* Flex items default to min-width: auto, not 0, and their width is only
   ever *implied* by align-items: stretch rather than explicitly set — for
   a nested auto-fit/auto-fill grid two levels down (.pricing-grid, inside
   .pricing-section), that implied sizing isn't reliable: the grid's own
   intrinsic-size negotiation can end up starved of the real available
   width and collapse to one column instead of three. An explicit
   width: 100% on every direct child of body removes the ambiguity
   entirely instead of depending on stretch behavior threading correctly
   through nested containers. */
body > * {
	width: 100%;
	min-width: 0;
}

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

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

::selection {
	background: var(--accent);
	color: var(--bg);
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-heading);
	color: var(--text-heading);
	text-transform: uppercase;
	letter-spacing: 0.4px;
	margin: 0;
}

p {
	margin: 0;
	line-height: 1.6;
}

/* Shared buttons — solid (accent) and outline variants used across pricing
   cards, CTAs, and forms so page templates don't repeat this per-file. */
.btn {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding: 15px 30px;
	border-radius: var(--radius-btn);
	border: none;
	cursor: pointer;
	text-align: center;
}

.btn-solid {
	background: var(--accent);
	color: var(--bg);
}

.btn-solid:hover {
	background: var(--accent-hover);
}

.btn-outline {
	background: transparent;
	border: 2px solid var(--border-outline);
	color: var(--text-heading);
	padding: 13px 28px;
}

.btn-outline:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.section {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 80px 32px;
}

/* Shared secondary-page hero (horaire/abonnements/reserver/apropos/galerie/contact/portail). */
.page-hero {
	padding: 80px 32px 40px;
	max-width: 1080px;
	margin: 0 auto;
	text-align: center;
}

.page-hero h1 {
	font-size: 42px;
	margin: 0 0 14px;
}

.page-hero p {
	color: var(--text-muted);
	font-size: 16px;
	max-width: 560px;
	margin: 0 auto;
}

/* Phones: 42px Archivo Black is wider than a phone screen for single
   long words ("ABONNEMENTS" was cut off and made the page scroll
   sideways), and 32px side padding leaves too little room. */
@media (max-width: 600px) {
	.section {
		padding: 56px 20px;
	}

	.page-hero {
		padding: 48px 20px 28px;
	}

	.page-hero h1 {
		font-size: 30px;
		overflow-wrap: break-word;
	}
}