/* ============================================================
 * astuces.me — design system kawaii (base)
 * Palette Material You pastel + Quicksand + cloud shadows.
 * ============================================================ */

:root {
	/* === Surface scale === */
	--bg: #fff8f7;
	--surface: #fff8f7;
	--surface-bright: #fff8f7;
	--surface-container-lowest: #ffffff;
	--surface-container-low: #fff0f0;
	--surface-container: #ffe9e8;
	--surface-container-high: #f9e3e3;
	--surface-container-highest: #f3dddd;
	--surface-dim: #ebd5d5;
	--surface-variant: #f3dddd;

	/* === Text === */
	--on-surface: #241919;
	--on-surface-variant: #4f4446;
	--outline: #817476;
	--outline-variant: #d3c3c5;

	/* === Primary (rose-mauve) === */
	--primary: #78555e;
	--on-primary: #ffffff;
	--primary-container: #ffd1dc;
	--on-primary-container: #2d141c;
	--primary-fixed-dim: #e7bbc6;

	/* === Secondary (vert tendre) === */
	--secondary: #326940;
	--on-secondary: #ffffff;
	--secondary-container: #b2eeb9;
	--on-secondary-container: #00210b;

	/* === Tertiary (olive crème) === */
	--tertiary: #636037;
	--on-tertiary: #ffffff;
	--tertiary-container: #e4dfac;
	--on-tertiary-container: #1e1c00;

	/* === Accent rose vif (blush mascot) === */
	--blush: #ffb3c6;
	--blush-dim: #ffd1dc;

	/* === Cloud shadows === */
	--cloud-primary:   0 24px 48px -12px rgba(120, 85, 94, 0.15);
	--cloud-secondary: 0 24px 48px -12px rgba(50, 105, 64, 0.15);
	--cloud-tertiary:  0 24px 48px -12px rgba(228, 223, 172, 0.4);
	--cloud-soft:      0 12px 24px -8px rgba(120, 85, 94, 0.1);
	--cloud-header:    0 20px 50px rgba(120, 85, 94, 0.08);
	--cloud-footer:    0 -10px 40px rgba(50, 105, 64, 0.08);

	/* Inner highlight (pillowy) */
	--pillowy-inset: inset 0 2px 0 0 rgba(255, 255, 255, 0.6);

	/* === Radius === */
	--r-xs: 8px;
	--r-sm: 16px;
	--r-md: 24px;
	--r-lg: 32px;
	--r-xl: 48px;
	--r-full: 9999px;

	/* === Type === */
	--font-body: 'Quicksand', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* === Layout === */
	--wrap: 1600px;
	--margin-desktop: 120px;
	--margin-mobile: 24px;
}

/* ============================================================
 * Reset + base
 * ============================================================ */

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--on-surface);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	padding-bottom: 96px;
	padding-top: 96px;
}

@media (min-width: 1024px) {
	body { padding-bottom: 0; padding-top: 112px; }
}

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover { color: var(--primary); }

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

button {
	font-family: inherit;
	border: none;
	background: none;
	cursor: pointer;
	color: inherit;
}

::selection {
	background: var(--primary-container);
	color: var(--on-primary-container);
}

/* ============================================================
 * Typography
 * ============================================================ */

.display-lg {
	font-size: 36px;
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 700;
	margin: 0;
}

@media (min-width: 768px) {
	.display-lg { font-size: 48px; line-height: 1.15; }
}

.display-xl {
	font-size: 44px;
	line-height: 1.05;
	letter-spacing: -0.025em;
	font-weight: 800;
	margin: 0;
}

@media (min-width: 768px) {
	.display-xl { font-size: 64px; line-height: 1.1; }
}

.headline-lg {
	font-size: 28px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
}

@media (min-width: 768px) {
	.headline-lg { font-size: 32px; line-height: 1.25; }
}

.headline-md {
	font-size: 22px;
	line-height: 1.3;
	font-weight: 700;
	margin: 0;
}

@media (min-width: 768px) {
	.headline-md { font-size: 24px; }
}

.body-lg {
	font-size: 17px;
	line-height: 1.6;
	font-weight: 500;
}

@media (min-width: 768px) {
	.body-lg { font-size: 18px; }
}

.body-md {
	font-size: 15px;
	line-height: 1.55;
	font-weight: 500;
}

@media (min-width: 768px) {
	.body-md { font-size: 16px; }
}

.label-lg {
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 0.04em;
	font-weight: 700;
}

.label-sm {
	font-size: 12px;
	line-height: 1.4;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.label-eyebrow {
	font-size: 12px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--primary);
}

/* ============================================================
 * Utility
 * ============================================================ */

.wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--margin-mobile);
	width: 100%;
}

@media (min-width: 1024px) {
	.wrap { padding: 0 var(--margin-desktop); }
}

.cloud-primary   { box-shadow: var(--cloud-primary); }
.cloud-secondary { box-shadow: var(--cloud-secondary); }
.cloud-tertiary  { box-shadow: var(--cloud-tertiary); }
.cloud-soft      { box-shadow: var(--cloud-soft); }

.pillowy { box-shadow: var(--pillowy-inset); }

.squish {
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.squish:hover {
	transform: scale(0.97) translateY(2px);
	box-shadow: var(--cloud-soft);
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.material-symbols-outlined {
	font-family: 'Material Symbols Outlined';
	font-weight: 400;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	vertical-align: middle;
}

.material-symbols-outlined.filled {
	font-variation-settings: 'FILL' 1;
}

/* ============================================================
 * Buttons
 * ============================================================ */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 24px;
	border-radius: var(--r-full);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
	white-space: nowrap;
	text-decoration: none;
	border: none;
}

.btn:hover { transform: scale(0.97) translateY(2px); }

.btn-primary {
	background: var(--secondary);
	color: var(--on-secondary);
	box-shadow: var(--cloud-secondary);
}

.btn-primary:hover { color: var(--on-secondary); }

.btn-soft {
	background: var(--surface-container);
	color: var(--primary);
	box-shadow: var(--cloud-soft);
}

.btn-soft:hover { color: var(--primary); }

.btn-ghost {
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(8px);
	color: var(--primary);
	border: 1px solid var(--outline-variant);
}

.btn-square {
	width: 48px;
	height: 48px;
	border-radius: var(--r-full);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--primary);
	background: var(--surface-container);
	transition: all 0.2s ease;
	cursor: pointer;
}

.btn-square:hover {
	background: var(--primary-container);
	transform: scale(0.95);
	color: var(--on-primary-container);
}

/* ============================================================
 * Header (sticky kawaii)
 * ============================================================ */

.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	background: var(--surface);
	box-shadow: var(--cloud-header);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px var(--margin-mobile);
	max-width: var(--wrap);
	margin: 0 auto;
}

@media (min-width: 1024px) {
	.header-inner { padding: 16px var(--margin-desktop); }
}

.brand {
	display: inline-flex;
	align-items: center;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--primary);
}

@media (min-width: 768px) {
	.brand { font-size: 30px; }
}

.brand:hover { color: var(--primary); }

.brand-wordmark { letter-spacing: -0.025em; }

.nav {
	display: none;
	align-items: center;
	gap: 4px;
	background: var(--surface-container-low);
	border-radius: var(--r-full);
	padding: 6px;
}

@media (min-width: 1024px) {
	.nav { display: inline-flex; }
}

.nav-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border-radius: var(--r-full);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--on-surface-variant);
	transition: all 0.2s ease;
}

.nav-link:hover {
	background: rgba(178, 238, 185, 0.5);
	color: var(--on-secondary-container);
	transform: scale(0.97);
}

.nav-link.active {
	background: var(--secondary-container);
	color: var(--on-secondary-container);
}

.nav-link--almanach {
	background: var(--primary-container);
	color: var(--on-primary-container);
}

.nav-link--almanach:hover {
	background: var(--primary-container);
	color: var(--on-primary-container);
	transform: scale(0.97);
}

.nav-link .material-symbols-outlined { font-size: 18px; }

.header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.header-actions .btn-square {
	width: 44px;
	height: 44px;
}

@media (max-width: 1023px) {
	.menu-btn { display: inline-flex; }
}

@media (min-width: 1024px) {
	.menu-btn { display: none; }
}

.nav-drawer-toggle { display: none; }

.nav-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(360px, 85vw);
	background: var(--surface-container-low);
	z-index: 60;
	padding: 96px 28px 32px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	box-shadow: -20px 0 40px rgba(120, 85, 94, 0.15);
	overflow-y: auto;
}

.nav-drawer-toggle:checked ~ .nav-drawer {
	transform: translateX(0);
}

.nav-drawer a {
	padding: 14px 20px;
	border-radius: var(--r-full);
	font-weight: 700;
	color: var(--on-surface);
	background: var(--surface);
	box-shadow: var(--cloud-soft);
	font-size: 15px;
}

.nav-drawer a:hover {
	background: var(--secondary-container);
	color: var(--on-secondary-container);
}

@media (min-width: 1024px) {
	.nav-drawer { display: none; }
}

/* ============================================================
 * Footer (sleeping mascot + columns)
 * ============================================================ */

.footer {
	background: var(--surface-container-low);
	padding: 72px 0 32px;
	margin-top: auto;
	position: relative;
	overflow: hidden;
}

.footer-inner {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--margin-mobile);
	position: relative;
	z-index: 1;
}

@media (min-width: 1024px) {
	.footer-inner { padding: 0 var(--margin-desktop); }
}

.footer-sleeping-mascot {
	position: absolute;
	bottom: -10px;
	right: 32px;
	width: 150px;
	height: 80px;
	opacity: 0.7;
	z-index: 0;
	pointer-events: none;
}

@media (min-width: 768px) {
	.footer-sleeping-mascot { right: 128px; }
}

.footer-top {
	display: flex;
	flex-direction: column;
	gap: 32px;
	border-bottom: 1px solid rgba(243, 221, 221, 0.6);
	padding-bottom: 32px;
	margin-bottom: 40px;
}

@media (min-width: 768px) {
	.footer-top {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
	}
}

.footer-brand-block { max-width: 380px; }

.footer-brand {
	font-size: 36px;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--primary);
	display: block;
	margin-bottom: 8px;
	line-height: 1;
}

.footer-tagline {
	margin: 0;
	color: var(--on-surface-variant);
	font-size: 16px;
	line-height: 1.5;
}

.footer-socials {
	display: flex;
	gap: 12px;
}

.footer-social-btn {
	width: 48px;
	height: 48px;
	border-radius: var(--r-full);
	background: var(--surface-container);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--primary);
	transition: all 0.2s ease;
}

.footer-social-btn:hover {
	background: var(--primary-container);
	transform: scale(1.08);
	color: var(--on-primary-container);
}

.footer-links {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px 24px;
	margin-bottom: 40px;
}

@media (min-width: 768px) {
	.footer-links { grid-template-columns: repeat(4, 1fr); }
}

.footer-col h4 {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--primary);
	margin: 0 0 16px;
}

.footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.footer-col a {
	color: var(--on-surface-variant);
	font-size: 15px;
	font-weight: 500;
	transition: color 0.2s ease;
}

.footer-col a:hover { color: var(--primary); }

.footer-bottom {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 13px;
	color: var(--on-surface-variant);
	font-weight: 500;
}

@media (min-width: 768px) {
	.footer-bottom {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}

.footer-legal {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

/* ============================================================
 * Mobile bottom nav
 * ============================================================ */

.bottom-nav {
	display: flex;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 50;
	justify-content: space-around;
	align-items: center;
	padding: 8px 12px 16px;
	background: var(--surface-container-low);
	box-shadow: var(--cloud-footer);
	border-radius: 32px 32px 0 0;
}

@media (min-width: 1024px) {
	.bottom-nav { display: none; }
}

.bottom-nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 8px 14px;
	border-radius: var(--r-full);
	color: var(--on-surface-variant);
	font-size: 11px;
	font-weight: 600;
	gap: 4px;
	transition: all 0.15s ease;
}

.bottom-nav-item.active {
	background: var(--secondary-container);
	color: var(--on-secondary-container);
	padding: 8px 18px;
}

.bottom-nav-item:hover {
	background: rgba(178, 238, 185, 0.4);
	color: var(--on-secondary-container);
}

.bottom-nav-item .material-symbols-outlined { font-size: 22px; }

/* ============================================================
 * Cards generic (archive, related, search)
 * ============================================================ */

.card {
	background: var(--surface-container-lowest);
	border: 1px solid rgba(243, 221, 221, 0.5);
	border-radius: 40px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: var(--cloud-primary);
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
}

.card:hover {
	transform: scale(0.985) translateY(2px);
	box-shadow: var(--cloud-soft);
	color: inherit;
}

.card-photo {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 32px;
	overflow: hidden;
	margin: 0;
	background: var(--surface-container);
}

.card-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.card:hover .card-photo img {
	transform: scale(1.05);
}

.card-text {
	padding: 0 8px 16px;
}

.card-cat {
	display: inline-block;
	padding: 6px 14px;
	border-radius: var(--r-full);
	background: var(--primary-container);
	color: var(--on-primary-container);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin-bottom: 12px;
	text-transform: uppercase;
}

.card-title {
	font-size: 20px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--on-surface);
	margin: 0 0 8px;
}

.card-meta {
	font-size: 13px;
	color: var(--outline);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.card-meta .material-symbols-outlined { font-size: 16px; }

/* Card variant : almanach tag */
.card .fiche-tag-almanach,
.card-tag-almanach {
	display: inline-block;
	padding: 4px 10px;
	border-radius: var(--r-full);
	background: var(--tertiary-container);
	color: var(--on-tertiary-container);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-left: 6px;
}

/* ============================================================
 * Search form
 * ============================================================ */

.search-form {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--surface-container);
	border-radius: var(--r-full);
	padding: 6px 6px 6px 20px;
	box-shadow: var(--cloud-soft);
	max-width: 480px;
}

.search-form-input {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	color: var(--on-surface);
	padding: 10px 0;
}

.search-form-input::placeholder { color: var(--outline); }

.search-form-submit {
	background: var(--secondary);
	color: var(--on-secondary);
	padding: 12px 22px;
	border-radius: var(--r-full);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: transform 0.2s ease;
	border: none;
}

.search-form-submit:hover { transform: scale(0.96); }

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	word-wrap: normal !important;
}