:root {
	--color-accent: #6D28D9;
	--color-cta: #4C1D95;
	--color-tint: #F5F3FF;
	--color-bg-alt: #F3F4F6;
	--color-text: #1F2937;
	--color-text-muted: #6B7280;
	--color-bg: #FFFFFF;
	--font-heading: 'Playfair Display', serif;
	--font-body: 'Source Sans Pro', sans-serif;
}

body {
	font-family: var(--font-body);
	color: var(--color-text);
	background: var(--color-bg);
	margin: 0;
}

h1, h2, h3 {
	font-family: var(--font-heading);
	color: var(--color-text);
	line-height: 1.2;
}

.section {
	padding: 80px 24px;
}

.section__inner {
	max-width: 1140px;
	margin: 0 auto;
}

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

.section--alt {
	background: var(--color-bg-alt);
}

.section--dark {
	background: var(--color-cta);
	color: #FFFFFF;
}

.section--dark h1,
.section--dark h2,
.section--dark h3 {
	color: #FFFFFF;
}

.card {
	background: #FFFFFF;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	padding: 24px;
}

.btn {
	display: inline-block;
	padding: 12px 28px;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
	background: var(--color-cta);
	color: #FFFFFF;
}

.btn--light {
	background: #FFFFFF;
	color: var(--color-cta);
}

/* Pages statiques (Qui sommes-nous, etc.) */
.statique-accroche {
	font-family: var(--font-heading);
	font-size: 20px;
}

.statique ul {
	padding-left: 20px;
	line-height: 1.8;
}

.statique-mentions {
	list-style: none;
	padding: 0;
}

.statique-mentions li {
	margin-bottom: 8px;
}

/* Header */
.site-header {
	position: relative;
	z-index: 100;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-bg-alt);
}

.site-header__inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 16px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.site-logo {
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: 700;
	color: var(--color-accent);
	text-decoration: none;
}

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

.site-nav__list > li {
	position: relative;
}

.site-nav__list a,
.site-nav__list > li > span {
	color: var(--color-text);
	text-decoration: none;
	font-weight: 700;
	cursor: pointer;
}

.site-nav__list a:hover {
	color: var(--color-accent);
}

.site-nav__disabled {
	color: var(--color-text-muted) !important;
	cursor: default !important;
}

.has-submenu .submenu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	/* No margin-top: a gap here would sit outside both the trigger and
	   the submenu, so the pointer briefly leaves the hoverable area
	   while crossing it and :hover drops before reaching the submenu. */
	margin: 0;
	background: #FFFFFF;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	list-style: none;
	padding: 8px 0;
	min-width: 220px;
	z-index: 10;
}

.has-submenu:hover .submenu {
	display: block;
}

.has-submenu .submenu li {
	white-space: nowrap;
}

.has-submenu .submenu a {
	display: block;
	padding: 8px 16px;
	font-weight: 400;
}

/* Footer */
.site-footer {
	background: var(--color-bg-alt);
	margin-top: 80px;
}

.site-footer__columns {
	max-width: 1140px;
	margin: 0 auto;
	padding: 48px 24px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.site-footer__col h3 {
	font-size: 16px;
	margin: 0 0 12px;
}

.site-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__col li {
	margin-bottom: 8px;
}

.site-footer__col a {
	color: var(--color-text);
	text-decoration: none;
}

.site-footer__col a:hover {
	color: var(--color-accent);
}

.site-footer__bottom {
	border-top: 1px solid #FFFFFF;
	max-width: 1140px;
	margin: 0 auto;
	padding: 16px 24px 32px;
	font-size: 13px;
	color: var(--color-text-muted);
}

.site-footer__bottom a {
	color: var(--color-text-muted);
}

@media (max-width: 800px) {
	.site-footer__columns {
		grid-template-columns: 1fr;
	}
}