/*
Theme Name: Serafine
Theme URI: https://serafine.fr
Author: Jessy Canto
Description: Thème personnalisé Serafine — Site vitrine
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: serafine
Tags: custom, one-column, two-columns, responsive-layout
*/

/* =============================================
   RESET & BASE
============================================= */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-text, #1a1a1a);
	background-color: var(--color-bg, #ffffff);
	-webkit-font-smoothing: antialiased;
}

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

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

ul, ol {
	list-style: none;
}

/* =============================================
   CSS CUSTOM PROPERTIES (à personnaliser)
============================================= */
:root {
	--color-primary:   #000000;
	--color-secondary: #ffffff;
	--color-accent:    #000000;
	--color-text:      #1a1a1a;
	--color-text-muted: #6b6b6b;
	--color-bg:        #ffffff;
	--color-bg-alt:    #f5f5f5;
	--color-border:    #e0e0e0;

	--font-heading: system-ui, sans-serif;
	--font-body:    system-ui, sans-serif;

	--spacing-xs:  0.5rem;
	--spacing-sm:  1rem;
	--spacing-md:  2rem;
	--spacing-lg:  4rem;
	--spacing-xl:  6rem;

	--container-width: 1280px;
	--container-padding: 1.5rem;

	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;

	--transition: 200ms ease;
}

/* =============================================
   LAYOUT
============================================= */
.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-main {
	flex: 1;
}

/* =============================================
   HEADER
============================================= */
.site-header {
	width: 100%;
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}

.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: var(--spacing-sm);
}

.site-branding .site-title {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.site-branding .site-title a {
	color: var(--color-primary);
}

.site-branding .site-description {
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

/* =============================================
   NAVIGATION
============================================= */
.main-navigation ul {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
}

.main-navigation a {
	font-size: 0.9375rem;
	font-weight: 500;
	transition: color var(--transition);
}

.main-navigation a:hover {
	color: var(--color-accent);
}

.menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--spacing-xs);
}

/* =============================================
   FOOTER
============================================= */
.site-footer {
	border-top: 1px solid var(--color-border);
	padding-block: var(--spacing-md);
}

.site-footer .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
}

.site-footer .copyright {
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

/* =============================================
   RESPONSIVE
============================================= */
@media (max-width: 768px) {
	:root {
		--container-padding: 1rem;
	}

	.menu-toggle {
		display: block;
	}

	.main-navigation {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: var(--color-bg);
		border-bottom: 1px solid var(--color-border);
		padding: var(--spacing-sm);
	}

	.main-navigation.is-open {
		display: block;
	}

	.main-navigation ul {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-xs);
	}

	.site-footer .container {
		flex-direction: column;
		text-align: center;
	}
}