/* ============================================================
   GLOBALS
   ============================================================ */

html {
	overflow-x: hidden; /* le scroller racine ne défile jamais horizontalement */
}

body {
	font-family: var(--ff-body);
	font-size: var(--fs-body);
	color: var(--c-text);
	background-color: var(--c-page-bg);
	padding-top: var(--header-h);
	/* Garde anti-scroll horizontal : les sections plein écran ([hero_carousel]
	   --bleed, drawer mobile) utilisent 100vw, qui inclut la largeur de la
	   scrollbar → dépassement. clip n'crée pas de conteneur de scroll
	   (overflow-y reste visible) contrairement à hidden. */
	overflow-x: hidden; /* repli */
	overflow-x: clip;
	max-width: 100%;
}

h1 { font-size: var(--fs-h1); font-family: var(--ff-heading); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); font-family: var(--ff-heading); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-h3); font-family: var(--ff-heading); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); font-family: var(--ff-heading); line-height: var(--lh-snug); }
h5 { font-size: var(--fs-h5); font-family: var(--ff-heading); line-height: var(--lh-snug); }

/* Filet de sécurité : chaque page Elementor génère son propre CSS
   ultra-spécifique pour les widgets Titre (.elementor-PAGEID
   .elementor-element-XXXX .elementor-heading-title), qui l'emporterait
   sinon sur les règles h1-h5 ci-dessus malgré la neutralisation des
   variables du Kit dans variables.css (ex : police forcée manuellement
   par widget dans l'éditeur Elementor). */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
	font-family: var(--ff-heading) !important;
	font-weight: var(--fw-regular) !important;
}

/* ---- Accessibilité : focus visible clavier (RGAA 10.7) ---- */

:focus-visible {
	outline: 3px solid var(--c-primary-light) !important;
	outline-offset: 2px !important;
	border-radius: 2px;
}

.wc-card a:focus-visible,
.wc-partenaire a:focus-visible,
.menu-logements a:focus-visible,
.wc-cf7 input:focus-visible,
.wc-cf7 select:focus-visible,
.wc-cf7 textarea:focus-visible {
	outline-color: var(--c-brown-700) !important;
}

/* ---- Texte réservé aux lecteurs d'écran ---- */

.screen-reader-only,
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ---- Lien d'évitement (skip link) ---- */

.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	background: var(--c-brown-800);
	color: var(--c-text-inverse);
	padding: var(--s-sm) var(--s-ld);
	font-weight: var(--fw-bold);
	z-index: 100000;
	text-decoration: none;
	transition: top var(--tr-base);

	&:focus {
		top: 0;
	}
}

/* ---- Section collée au header (hero) ---- */

.under-header {
	margin-top: -2.5rem !important;
}

.site-header.is-scrolled ~ * .under-header,
body.is-scrolled .under-header {
	margin-top: -4rem !important;
}

/* ---- Bouton générique ---- */

.wc-btn,
.custom-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-sm);
	background-color: var(--c-primary);
	color: var(--c-text-inverse);
	text-decoration: none;
	padding: var(--s-md) var(--s-xl);
	font-family: inherit;
	font-size: var(--fs-button);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	border: 2px solid var(--c-primary-light);
	border-radius: var(--br-pill);
	cursor: pointer;
	transition: background-color var(--tr-base), border-color var(--tr-base), box-shadow var(--tr-base);
	outline: none !important;
	box-shadow: none !important;
	-webkit-tap-highlight-color: transparent !important;

	&:hover,
	&:focus,
	&:active {
		background-color: var(--c-primary-hover) !important;
		border-color: var(--c-primary-hover) !important;
		color: var(--c-text-inverse) !important;
		box-shadow: none !important;
	}

	& svg {
		fill: none !important;
		stroke: currentColor !important;
		width: 1rem !important;
		height: 1rem !important;
		flex-shrink: 0;
	}
}

.wc-btn--outline {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--c-text-inverse);

	&:hover,
	&:focus,
	&:active {
		background-color: rgba(255, 255, 255, 0.12) !important;
		border-color: var(--c-white) !important;
		color: var(--c-text-inverse) !important;
	}
}

.wc-btn--dark {
	background-color: var(--c-brown-600);
	border-color: var(--c-brown-400);
	color: var(--c-cream-400);

	&:hover,
	&:focus,
	&:active {
		background-color: var(--c-brown-800) !important;
		border-color: var(--c-brown-800) !important;
		color: var(--c-cream-400) !important;
	}
}

/* ---- Badge capacité [wc_capacite] ---- */

.wc-capacite {
	display: inline-flex;
	align-items: center;
	gap: var(--s-xs);
	background: var(--c-cream-500);
	color: var(--c-brown-400);
	font-size: 0.875rem;
	font-weight: var(--fw-semibold);
	padding: var(--s-xs) var(--s-md);
	border-radius: var(--br-3xl);
	border: 1px solid rgba(133, 100, 60, 0.2);
}

.wc-capacite__icon {
	fill: none !important;
	stroke: var(--c-brown-400) !important;
	width: 1rem !important;
	height: 1rem !important;
	flex-shrink: 0;
	opacity: 0.8;
}

/* ---- Fond "papier encadré" (utilitaire global)
   À ajouter dans Elementor : section → Avancé → Classes CSS → "wc-section-paper".
   Reproduit l'arrière-plan du shortcode [recap_site] :
   fond crème + cadre intérieur en pointillés bruns. ---- */

.wc-section-paper {
	position: relative;
	background-color: var(--c-cream-800);

	&::before {
		content: '';
		position: absolute;
		inset: var(--s-ld);
		border: 2px dashed var(--c-brown-700);
		pointer-events: none;
		border-radius: var(--br-xs);
		z-index: 0;
	}

	& > * {
		position: relative;
		z-index: 1;
	}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 860px) {
	.wc-section-paper::before { inset: var(--s-md); }
}

@media (max-width: 768px) {
	body {
		padding-top: 4.375rem;
	}

	.site-header.is-scrolled ~ * .under-header,
	body.is-scrolled .under-header {
		margin-top: -3.25rem !important;
	}
}

@media (max-width: 480px) {
	.wc-section-paper::before { inset: var(--s-sm); }
}

/* ---- Respect prefers-reduced-motion (RGAA 13.8) ---- */

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