/*
 * SHARED — Hero (base)
 *
 * Styles de base de la section hero, communs à toutes les pages
 * qui utilisent ce composant (accueil, chaire, etc.).
 *
 * Les surcharges spécifiques à chaque page (image de fond, hauteur,
 * taille de titre) se trouvent dans front-page/hero.css ou chaire/hero.css.
 */

.hero {
	position: relative;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
	padding: 96px 0;
}

.hero-content {
	text-align: left;
	margin-left: 0;
	margin-right: auto;
	width: 100%;
}

.eyebrow {
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	color: var(--green);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 24px;
}

.hero h1 {
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: var(--teal);
	margin-bottom: 32px;
}

.hero h1 .accent {
	color: var(--green);
}

.hero p {
	font-size: 17px;
	color: var(--text);
	line-height: 1.6;
}

.hero-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.hero-actions .btn {
	padding: 16px 32px;
	font-size: 16px;
}

/* Animations d'apparition */
@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

.hero-content > * {
	animation: fadeInUp .8s ease both;
}

.hero .eyebrow     { animation-delay: .05s; }
.hero h1           { animation-delay: .15s; }
.hero p            { animation-delay: .25s; }
.hero-actions      { animation-delay: .35s; }

@media (max-width: 540px) {
	.hero { padding: 56px 0; }
	.hero p { font-size: 15px; }
	.hero-actions .btn { padding: 14px 24px; font-size: 15px; }
}