/* ============================================================
   HERO SIMPLE  –  [hero_simple]
   Hero sobre sans image : posé sur la couleur de fond du site,
   accroche + titre + sous-titre + 2 boutons (Réserver / Contact).
   ============================================================ */

.wc-hero-simple {
	width: 100%;
	padding: 0 var(--s-2xl);
	background: transparent;
	/* laisse apparaître la couleur de fond habituelle */
}

.wc-hero-simple__inner {
	max-width: var(--container-w);
	margin: 0 auto;
}

/* Alignements */
.wc-hero-simple--center .wc-hero-simple__inner {
	max-width: 60rem;
	text-align: center;
}

.wc-hero-simple--left .wc-hero-simple__inner {
	max-width: 60rem;
	text-align: left;
}

/* ── Accroche ─────────────────────────────────────────────── */

.wc-hero-simple__eyebrow {
	display: inline-block;
	margin-bottom: var(--s-ld);
	padding: var(--s-xs) var(--s-ld);
	background: var(--c-cream-400);
	border: 1px solid var(--c-border);
	border-radius: var(--br-pill);
	color: var(--c-text-soft);
	font-size: var(--fs-small);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
}

/* ── Titre / sous-titre ───────────────────────────────────── */

.wc-hero-simple__title {
	margin: 0;
	max-width: 20ch;
	color: var(--c-text);
	font-family: var(--ff-heading);
	font-size: var(--fs-h1);
	line-height: var(--lh-tight);
	text-wrap: balance;
	/* évite un mot orphelin sur la dernière ligne */
}

.wc-hero-simple--center .wc-hero-simple__title {
	margin-inline: auto;
}

.wc-hero-simple__content {
	margin: var(--s-ld) auto 0;
	color: var(--c-text-soft);
	font-size: var(--fs-h5);
	line-height: var(--lh-normal);

	&> :first-child {
		margin-top: 0;
	}

	&> :last-child {
		margin-bottom: 0;
	}

	& p {
		margin: 0 0 var(--s-md);
	}
}

.wc-hero-simple--left .wc-hero-simple__content {
	margin-inline: 0;
}

/* ── Boutons ──────────────────────────────────────────────── */

.wc-hero-simple__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-md);
	margin-top: var(--s-2xl);
}

.wc-hero-simple--center .wc-hero-simple__actions {
	justify-content: center;
}

/* Bouton secondaire (Contact) lisible sur fond clair :
   outline brun qui se remplit au survol. */
.wc-btn--ghost {
	background-color: transparent;
	border-color: var(--c-border);
	color: var(--c-text);

	&:hover,
	&:focus,
	&:active {
		background-color: var(--c-brown-600) !important;
		border-color: var(--c-brown-600) !important;
		color: var(--c-text-inverse) !important;
	}
}

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

@media (max-width: 800px) {
	.wc-hero-simple {
		padding: var(--s-4xl) var(--s-xl);
	}
}

@media (max-width: 500px) {
	.wc-hero-simple__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.wc-hero-simple--center .wc-hero-simple__actions {
		align-items: stretch;
	}

	.wc-hero-simple__btn {
		justify-content: center;
	}
}