/* =========================================================================
   THREADEDUCATION — DESIGN SYSTEM
   Magazine santé éditorial · Mediterranean wellness · Literata + Manrope
   Palette : forest green + sand cream + warm earth
   ========================================================================= */

:root {
	--bg:                  #fbf9f7;
	--surface:             #fbf9f7;
	--surface-bright:      #fbf9f7;
	--surface-low:         #f5f3f1;
	--surface-container:   #efeeeb;
	--surface-high:        #e9e8e6;
	--surface-highest:     #e4e2e0;
	--surface-variant:     #e4e2e0;
	--surface-dim:         #dbdad7;

	--primary:             #25362b;
	--primary-container:   #3b4d41;
	--primary-fixed:       #d3e8d7;
	--primary-fixed-dim:   #b7ccbc;
	--on-primary:          #ffffff;
	--on-primary-fixed:    #0e1f15;

	--secondary:           #665d54;
	--secondary-container: #eee0d4;
	--secondary-fixed:     #eee0d4;
	--secondary-fixed-dim: #d1c4b9;
	--on-secondary:        #ffffff;
	--on-secondary-container:#6c6359;
	--on-secondary-fixed:  #211a13;

	--tertiary:            #373227;
	--tertiary-container:  #4f483d;
	--tertiary-fixed:      #ece1d2;
	--tertiary-fixed-dim:  #cfc5b6;
	--on-tertiary:         #ffffff;
	--on-tertiary-container:#c1b7a8;
	--on-tertiary-fixed:   #201b12;

	--on-surface:          #1b1c1b;
	--on-surface-variant:  #434843;
	--on-background:       #1b1c1b;

	--outline:             #737873;
	--outline-variant:     #c3c8c2;
	--inverse-surface:     #30312f;
	--inverse-on-surface:  #f2f0ee;

	--display:  'Literata', 'Times New Roman', serif;
	--body:     'Manrope', system-ui, -apple-system, sans-serif;
	--label:    'Manrope', system-ui, -apple-system, sans-serif;

	--max:      1120px;
	--pad-x:    clamp(20px, 4vw, 64px);
	--gutter:   24px;
	--section-gap: clamp(60px, 10vh, 120px);
	--radius-sm:  2px;
	--radius:     4px;
	--radius-lg:  8px;
	--radius-pill: 999px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
	background: var(--bg);
	color: var(--on-surface);
	font-family: var(--body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-optical-sizing: auto;
	min-height: 100vh;
}

a { color: inherit; text-decoration: none; transition: color .15s ease; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }

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

.wrap {
	max-width: var(--max);
	margin: 0 auto;
	padding-left: var(--pad-x);
	padding-right: var(--pad-x);
}

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

.material-symbols-outlined {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	font-size: 20px;
	line-height: 1;
	letter-spacing: normal;
	display: inline-block;
	vertical-align: middle;
	white-space: nowrap;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
	font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
	-webkit-font-smoothing: antialiased;
}

/* =========================================================================
   HEADER
   ========================================================================= */
.header {
	background: var(--surface);
	border-bottom: 1px solid var(--primary);
	position: sticky;
	top: 0;
	z-index: 50;
}
.header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	padding-top: 16px;
	padding-bottom: 16px;
}

.brand {
	font-family: var(--display);
	font-size: 24px;
	line-height: 1.2;
	font-weight: 600;
	color: var(--primary);
	letter-spacing: -.01em;
}
.brand-1 { font-style: italic; font-weight: 400; }
.brand-2 { font-weight: 700; }

.nav {
	display: flex;
	align-items: center;
	gap: 32px;
}
.nav a {
	font-family: var(--body);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--on-surface-variant);
	transition: color .15s;
}
.nav a:hover { color: var(--primary); }
.nav a:active { opacity: .7; }

.header-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}
.btn-square.menu-btn { display: none; }

/* Pill button (utilisé par CTAs, header, etc.) */
.btn-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	border-radius: var(--radius-pill);
	font-family: var(--body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
	border: 1px solid transparent;
	background: transparent;
	color: var(--on-surface);
}
.btn-pill:active { transform: translateY(1px); }
.btn-primary {
	background: var(--primary);
	color: var(--on-primary);
}
.btn-primary:hover { background: var(--primary-container); }
.btn-secondary {
	border-color: var(--secondary);
	color: var(--secondary);
	background: transparent;
}
.btn-secondary:hover { background: var(--surface-container); }

.btn-square {
	width: 40px;
	height: 40px;
	border: 1px solid var(--outline);
	border-radius: var(--radius-pill);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--on-surface);
	background: transparent;
	transition: background-color .15s ease, border-color .15s ease;
}
.btn-square:hover { background: var(--surface-container); }

/* Mobile drawer */
.nav-drawer { display: none; }
.nav-drawer-toggle { position: absolute; left: -9999px; }

@media (max-width: 960px) {
	.nav { display: none; }
	.btn-square.menu-btn { display: flex; }
	.nav-drawer {
		display: flex;
		position: fixed;
		inset: 0;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 24px;
		background: var(--surface);
		padding: 80px 32px 40px;
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s ease, visibility .25s ease;
		z-index: 100;
	}
	.nav-drawer a {
		font-family: var(--body);
		font-size: 18px;
		font-weight: 600;
		color: var(--primary);
	}
	.nav-drawer-toggle:checked ~ .nav-drawer { opacity: 1; visibility: visible; }
}
body:has(.nav-drawer-toggle:checked) { overflow: hidden; }

/* =========================================================================
   FOOTER — fond vert foncé primary, texte clair
   ========================================================================= */
.footer {
	background: var(--primary);
	color: var(--on-primary);
	margin-top: 80px;
	border-top: 1px solid var(--primary);
}
.footer-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gutter);
	padding-top: 56px;
	padding-bottom: 48px;
}
.footer-brand-col {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.footer-brand {
	font-family: var(--display);
	font-size: 24px;
	line-height: 1.2;
	font-weight: 600;
	color: var(--on-primary);
}
.footer-tagline {
	font-family: var(--display);
	font-style: italic;
	font-size: 16px;
	line-height: 1.4;
	color: rgba(255,255,255,.85);
	margin-top: 4px;
}
.footer-meta {
	font-family: var(--body);
	font-size: 12px;
	line-height: 1.6;
	color: rgba(255,255,255,.75);
	max-width: 360px;
	margin-top: 12px;
}
.footer-links {
	display: flex;
	flex-direction: column;
	gap: 24px;
	justify-content: center;
}
.footer-links nav {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 32px;
	justify-content: flex-end;
}
.footer-links a {
	font-family: var(--body);
	font-size: 13px;
	color: rgba(255,255,255,.85);
	transition: color .15s, opacity .15s;
}
.footer-links a:hover { color: var(--on-primary); opacity: 1; }

@media (max-width: 720px) {
	.footer-inner { grid-template-columns: 1fr; }
	.footer-links nav { justify-content: flex-start; }
}

/* =========================================================================
   SECTION HEAD (commun à plusieurs sections)
   ========================================================================= */
.section-block {
	padding-top: var(--section-gap);
	padding-bottom: var(--section-gap);
}

.section-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 48px;
}
.section-h2 {
	font-family: var(--display);
	font-size: clamp(28px, 4vw, 32px);
	line-height: 1.2;
	letter-spacing: -.01em;
	font-weight: 500;
	color: var(--primary);
	border-bottom: 2px solid var(--tertiary-fixed);
	padding-bottom: 8px;
	padding-right: 32px;
}
.section-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--secondary);
}
.section-link:hover { color: var(--primary); }
.section-link .material-symbols-outlined { font-size: 18px; }

/* =========================================================================
   CHIP / TAG (small label)
   ========================================================================= */
.chip {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	font-family: var(--body);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
}
.chip-sage { background: var(--primary-fixed); color: var(--on-primary-fixed); }
.chip-sand { background: var(--secondary-container); color: var(--on-secondary-container); }
.chip-cream { background: var(--tertiary-fixed); color: var(--on-tertiary-fixed); }
.chip-neutral { background: var(--surface-variant); color: var(--on-surface); }
.chip-outline { background: transparent; color: var(--secondary); }

/* =========================================================================
   CARD (archive / search / related)
   ========================================================================= */
.card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--surface);
	border-radius: var(--radius);
	overflow: hidden;
	transition: opacity .15s ease;
	color: var(--on-surface);
}
.card:hover { opacity: .85; }
.card-photo {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--surface-high);
	border-radius: var(--radius);
}
.card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .card-photo img { transform: scale(1.03); }
.card-cat {
	font-family: var(--body);
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--secondary);
}
.card-title {
	font-family: var(--display);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--primary);
}
.card-meta {
	font-family: var(--body);
	font-size: 12px;
	color: var(--secondary);
}

/* =========================================================================
   PAGINATION (archive / search / index)
   ========================================================================= */
.archive-pagination {
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid var(--outline-variant);
	display: flex;
	justify-content: center;
}
.archive-pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.archive-pagination .page-numbers {
	font-family: var(--body);
	font-size: 14px;
	font-weight: 600;
	padding: 8px 14px;
	border: 1px solid var(--outline-variant);
	border-radius: var(--radius-pill);
	color: var(--on-surface);
	transition: background-color .15s, color .15s, border-color .15s;
}
.archive-pagination .page-numbers:hover,
.archive-pagination .page-numbers.current {
	background: var(--primary);
	color: var(--on-primary);
	border-color: var(--primary);
}

/* =========================================================================
   SEARCH FORM
   ========================================================================= */
.search-form {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--outline);
	border-radius: var(--radius-pill);
	overflow: hidden;
	max-width: 540px;
	margin-top: 24px;
	background: var(--surface);
}
.search-form-input {
	flex: 1;
	border: 0;
	padding: 12px 20px;
	font-family: var(--body);
	font-size: 16px;
	background: transparent;
	color: var(--on-surface);
	outline: none;
}
.search-form-input::placeholder { color: var(--secondary); font-style: italic; }
.search-form-submit {
	border: 0;
	padding: 0 22px;
	font-family: var(--body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	background: var(--primary);
	color: var(--on-primary);
	cursor: pointer;
	transition: background .15s;
}
.search-form-submit:hover { background: var(--primary-container); }

/* =========================================================================
   FORM (page-contact)
   ========================================================================= */
.am-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 40px;
	max-width: 680px;
}
.am-form-row { display: flex; flex-direction: column; gap: 8px; }
.am-form-label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--body);
	font-size: 14px;
	font-weight: 600;
	color: var(--primary);
}
.am-form-label-mark {
	font-family: var(--body);
	font-size: 11px;
	font-weight: 600;
	color: var(--primary);
	letter-spacing: .04em;
	padding: 2px 8px;
	border: 1px solid var(--primary-fixed-dim);
	border-radius: var(--radius-pill);
	background: var(--primary-fixed);
}
.am-form-optional {
	font-family: var(--display);
	font-style: italic;
	font-weight: 400;
	font-size: 13px;
	color: var(--secondary);
	text-transform: none;
	letter-spacing: 0;
}
.am-form-input {
	width: 100%;
	border: 1px solid var(--outline-variant);
	border-radius: var(--radius);
	background: var(--surface);
	padding: 12px 16px;
	font-family: var(--body);
	font-size: 16px;
	line-height: 1.4;
	color: var(--on-surface);
	outline: none;
	transition: border-color .15s, background .15s;
}
.am-form-input:hover { border-color: var(--outline); }
.am-form-input:focus { border-color: var(--primary); background: var(--surface-low); }
.am-form-textarea { resize: vertical; min-height: 160px; }
.am-form-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	padding-top: 16px;
	border-top: 1px solid var(--outline-variant);
}
.am-form-note {
	font-family: var(--display);
	font-style: italic;
	font-size: 14px;
	color: var(--secondary);
	max-width: 36em;
}
.am-form-submit {
	padding: 12px 28px;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--primary);
	color: var(--on-primary);
	font-family: var(--body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	cursor: pointer;
	transition: background .15s;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.am-form-submit:hover { background: var(--primary-container); }