/**
 * Spicy Moments — shell (en-tête, navigation, pied, base typographique)
 */

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

html {
	font-size: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-family: var(--ms-font-body);
	font-size: var(--ms-font-size-base);
	line-height: var(--ms-line-height);
	color: var(--ms-text-primary);
	background-color: var(--ms-bg-page);
}

/* Lien d'évitement */
.skip-link {
	position: absolute;
	left: var(--ms-space-md);
	top: -4rem;
	z-index: 9999;
	padding: var(--ms-space-sm) var(--ms-space-md);
	background: var(--ms-bg-elevated);
	color: var(--ms-text-primary);
	border: 2px solid var(--ms-border-strong);
	border-radius: var(--ms-radius-sm);
	font-weight: 700;
	text-decoration: underline;
}

.skip-link:focus {
	top: var(--ms-space-md);
	outline: none;
	box-shadow: var(--ms-focus-ring);
}

a {
	color: var(--ms-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

a:hover,
a:focus-visible {
	color: var(--ms-link-hover);
}

h1, h2, h3, h4 {
	font-family: var(--ms-font-heading);
	font-weight: 700;
	color: var(--ms-text-primary);
	line-height: 1.25;
	text-shadow: none;
	margin: 0 0 var(--ms-space-md);
}

/* En-tête site */
.site-header {
	background: var(--ms-bg-surface);
	border-bottom: 1px solid var(--ms-border);
	box-shadow: var(--ms-shadow-sm);
	padding: var(--ms-space-md) var(--ms-space-lg);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ms-space-md);
}

.site-brand {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	text-align: start;
}

.site-brand__link {
	text-decoration: none;
	color: var(--ms-text-primary);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.site-brand__link:hover,
.site-brand__link:focus-visible {
	color: var(--ms-accent);
	text-decoration: none;
}

.site-brand__tagline {
	margin: 0;
	font-size: 0.9rem;
	color: var(--ms-text-muted);
	font-weight: 400;
	max-width: 28rem;
	line-height: 1.4;
}

.site-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--ms-space-md);
}

/* Menus dépliables */
.nav_div {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.menu-disclosure {
	position: relative;
}

.menu-button {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: var(--ms-space-sm) var(--ms-space-md);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	color: var(--ms-text-primary);
	background: var(--ms-bg-muted);
	border: 1px solid var(--ms-border-strong);
	border-radius: var(--ms-radius-md);
	cursor: pointer;
	text-shadow: none;
}

.menu-button--primary {
	color: var(--ms-text-on-accent);
	background: var(--ms-accent);
	border-color: var(--ms-accent-hover);
}

.menu-button--primary:hover,
.menu-button--primary:focus-visible {
	background: var(--ms-accent-hover);
	border-color: var(--ms-accent-hover);
}

.menu-button--secondary {
	font-weight: 500;
	color: var(--ms-text-secondary);
	background: var(--ms-bg-surface);
}

.menu-button:hover,
.menu-button:focus-visible {
	background: var(--ms-accent-soft);
	border-color: var(--ms-accent-secondary);
	color: var(--ms-text-primary);
	outline: none;
	box-shadow: var(--ms-focus-ring);
}

.menu-button--primary:hover,
.menu-button--primary:focus-visible {
	color: var(--ms-text-on-accent);
}

.arrow-down {
	display: inline-block;
	font-size: 0.75em;
	transition: transform 0.2s ease;
}

.menu-button[aria-expanded="true"] .arrow-down {
	transform: rotate(180deg);
}

.nav_ul {
	list-style: none;
	margin: var(--ms-space-xs) 0 0;
	padding: var(--ms-space-sm);
	min-width: 14rem;
	background: var(--ms-bg-elevated);
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius-md);
	box-shadow: var(--ms-shadow-md);
}

.menu-disclosure:not([open]) .nav_ul {
	display: none;
}

.nav_ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav_ul div {
	margin: 0;
	border: none;
	border-radius: var(--ms-radius-sm);
	transition: background 0.15s ease;
}

.nav_ul div:hover,
.nav_ul div:focus-within {
	background: var(--ms-accent-soft);
}

.nav_ul p {
	margin: 0;
	padding: 0;
}

.nav_ul a {
	display: block;
	padding: var(--ms-space-sm) var(--ms-space-md);
	color: var(--ms-text-primary);
	text-decoration: none;
	font-weight: 500;
}

.nav_ul a:hover,
.nav_ul a:focus-visible {
	color: var(--ms-accent);
	text-decoration: underline;
}

/* Contenu principal */
.site-main {
	flex: 1;
	width: 100%;
	max-width: var(--ms-content-max);
	margin: 0 auto;
	padding: var(--ms-space-lg) var(--ms-space-lg) var(--ms-space-xl);
}

.site-main h1 {
	text-align: center;
	font-size: clamp(1.5rem, 4vw, 2rem);
}

.site-main h2,
.site-main h3,
.site-main h4 {
	text-align: center;
	margin-top: var(--ms-space-lg);
}

.site-main p {
	margin: 0 0 var(--ms-space-md);
	max-width: 65ch;
}

.site-main > .site-main__inner > p,
.site-main .formulaire_div p {
	margin-left: auto;
	margin-right: auto;
}

.site-main hr {
	margin: var(--ms-space-xl) auto;
	width: min(70%, 40rem);
	border: none;
	border-top: 1px solid var(--ms-border);
}

.site-main ul,
.site-main ol {
	margin: 0 0 var(--ms-space-md);
	padding-left: 1.5rem;
}

/* Pied de page */
.site-footer {
	margin-top: auto;
	padding: var(--ms-space-lg);
	background: var(--ms-bg-surface);
	border-top: 1px solid var(--ms-border);
	text-align: center;
	font-size: 0.9rem;
	color: var(--ms-text-muted);
}

.site-footer nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ms-space-md) var(--ms-space-lg);
	margin-bottom: var(--ms-space-sm);
}

.site-footer a {
	font-weight: 500;
}

.site-footer__copy {
	margin: 0;
}

/* Boutons */
.button,
button.button,
input.button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	padding: 0.6em 1.15em;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ms-text-on-accent);
	background: var(--ms-accent);
	border: 2px solid var(--ms-accent);
	border-radius: var(--ms-radius-md);
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
	box-shadow: var(--ms-shadow-sm);
}

.button:hover,
.button:focus-visible {
	background: var(--ms-accent-hover);
	border-color: var(--ms-accent-hover);
	color: var(--ms-text-on-accent);
	text-decoration: none;
	outline: none;
	box-shadow: var(--ms-focus-ring);
}

.button.slide:hover,
.button.slide:focus {
	box-shadow: var(--ms-focus-ring);
	background: var(--ms-accent-hover);
}

.button_secondary {
	background: var(--ms-bg-elevated);
	color: var(--ms-text-primary);
	border-color: var(--ms-border-strong);
}

.button_secondary:hover,
.button_secondary:focus-visible {
	background: var(--ms-bg-muted);
	color: var(--ms-text-primary);
	border-color: var(--ms-border-strong);
}

/* Alertes (texte + couleur, jamais couleur seule) */
.alert {
	padding: var(--ms-space-md);
	border-radius: var(--ms-radius-md);
	border: 1px solid var(--ms-border);
	margin: 0 0 var(--ms-space-md);
	max-width: 65ch;
}

.alert-success {
	background: var(--ms-success-bg);
	border-color: var(--ms-success);
	color: var(--ms-success);
}

.alert-warning {
	background: var(--ms-warning-bg);
	border-color: var(--ms-amber);
	color: var(--ms-warning);
}

.alert-error,
[role="alert"].alert-error {
	background: var(--ms-error-bg);
	border-color: var(--ms-error);
	color: var(--ms-error);
}

p[role="alert"]:not(.alert) {
	color: var(--ms-error);
	font-weight: 600;
}

.form-text.text-muted {
	display: block;
	font-size: 0.9rem;
	color: var(--ms-text-muted);
	margin-top: var(--ms-space-xs);
}

/* Focus global champs */
:focus-visible {
	outline: none;
	box-shadow: var(--ms-focus-ring);
}

@media (forced-colors: active) {
	.button,
	.menu-button,
	.form-control,
	.nav_ul {
		border: 2px solid CanvasText;
	}
	.alert {
		border: 2px solid CanvasText;
	}
}