/*
 * CSS de la page d'accueil, reconstruite depuis l'export Elementor
 * "ACCUEIL EXPORT" (elementor-7120-2026-08-24.json). Les anciennes classes
 * .elementor-element-* de post-265.css ne correspondent plus aux IDs de cet
 * export (page reconstruite depuis une version plus récente) : ce fichier
 * remplace donc entièrement le CSS de la page d'accueil.
 * Couleurs et images reprises telles quelles des réglages Elementor du JSON.
 */


.accueil-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- Hero ---------- */

.hero {
	position: relative;
	min-height: 381px;
	display: flex;
	align-items: center;
	color: #fff;
	overflow: hidden;
	padding-bottom: 50px;
}

.hero-slides {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero-slides img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	animation: hero-fade 32s infinite;
}

.hero-slides img:nth-child(1) { animation-delay: 0s; }
.hero-slides img:nth-child(2) { animation-delay: 4s; }
.hero-slides img:nth-child(3) { animation-delay: 8s; }
.hero-slides img:nth-child(4) { animation-delay: 12s; }
.hero-slides img:nth-child(5) { animation-delay: 16s; }
.hero-slides img:nth-child(6) { animation-delay: 20s; }
.hero-slides img:nth-child(7) { animation-delay: 24s; }
.hero-slides img:nth-child(8) { animation-delay: 28s; }

@keyframes hero-fade {
	0%, 9% { opacity: 1; }
	12%, 100% { opacity: 0; }
}

/* Forme décorative (assets/shape) dans le coin du hero — sous le dégradé. */
.hero::before {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 260px;
	height: 100%;
	background: url('/assets/shape/hero-shape-1-2.png') right top / contain no-repeat;
	opacity: 0.12;
	z-index: 1;
	pointer-events: none;
}

.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle, #087387 0%, #02794B 72%);
	opacity: 0.55;
	z-index: 1;
}

.hero-inner {
	position: relative;
	z-index: 2;
	padding: 48px 24px;
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
}

/* Animation d'entrée du texte du hero (au chargement, pas au défilement —
   déjà visible dès l'arrivée sur la page, contrairement aux cartes plus bas
   qui utilisent le système de révélation au scroll, voir site-custom.css). */
@keyframes hero-text-in {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.hero-title {
	font-size: 40px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 20px;
	color: #fff;
	animation: hero-text-in 0.8s ease both;
}

.hero-subtitle {
	max-width: 560px;
	margin: 0 0 28px;
	font-size: 17px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.92);
	animation: hero-text-in 0.8s ease 0.15s both;
}

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

.hero-inner .btn,
.hero-actions .btn-outline-white {
	animation: hero-text-in 0.8s ease 0.25s both;
}

.hero-inner .btn i {
	margin-right: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.hero-title,
	.hero-subtitle,
	.hero-inner .btn,
	.hero-actions .btn-outline-white {
		animation: none;
	}
}

.hero-title .hero-highlight {
	display: block;
	text-decoration: underline;
	text-decoration-style: wavy;
	text-decoration-color: #1BE151;
	text-underline-offset: 6px;
}

.btn {
	display: inline-block;
	padding: 14px 28px;
	background: var(--jade-yellow, #FFC107);
	color: #1a1a1a;
	text-decoration: none;
	font-weight: 700;
	border-radius: 999px;
	font-size: 16px;
	transition: transform 0.2s ease, background 0.2s ease;
}

.btn:hover {
	transform: scale(1.04);
}

.btn-xl {
	font-size: 18px;
	padding: 16px 34px;
}

/* Bouton secondaire du hero ("Découvrir nos activités") — contour blanc,
   discret sur la photo de fond, pour laisser "Faire un don" comme action
   principale. Même règle que .btn-outline-white (membres.css), redéfinie ici
   pour que le hero n'ait pas besoin de charger cette feuille de style. */
.btn-outline-white {
	display: inline-flex;
	align-items: center;
	padding: 14px 28px;
	border: 2px solid #fff;
	border-radius: 999px;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 16px;
	transition: background 0.2s ease, color 0.2s ease;
}

.btn-outline-white:hover {
	background: #fff;
	color: var(--jade-primary, #097D50);
}

@media (min-width: 700px) {
	.hero { min-height: 554px; }
	.hero-title { font-size: 60px; }
}

@media (max-width: 699px) and (min-width: 480px) {
	.hero { min-height: 650px; }
}

/* ---------- Volet d'activités ---------- */

.section-volet {
	background: var(--jade-background, #F2F1EE);
	padding: 100px 0 75px;
}

.section-heading {
	text-align: center;
	color: var(--jade-primary, #097D50);
	font-size: 50px;
	font-weight: 700;
	margin: 0 0 24px;
}

.section-intro {
	max-width: 700px;
	margin: 0 auto 48px;
	text-align: center;
	color: #050505;
	font-size: 16px;
	line-height: 1.7;
}

.volet-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-bottom: 48px;
}

.volet-card {
	position: relative;
	min-height: 320px;
	border-radius: 6px;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	color: #fff;
	text-decoration: none;
	border: 1px solid #fff;
	box-shadow: 2px 0 7px -1px rgba(0, 0, 0, 0.28);
}

.volet-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.volet-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.75) 100%);
	z-index: 1;
}

.volet-card-body {
	position: relative;
	z-index: 2;
	padding: 24px;
}

.volet-card h3 {
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 10px;
}

.volet-card p {
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 16px;
	color: #f0f0f0;
}

.volet-card-link {
	display: inline-block;
	padding: 8px 18px;
	border: 2px solid #fff;
	border-radius: 999px;
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.volet-card:hover .volet-card-link {
	background: var(--jade-yellow, #FFC107);
	border-color: var(--jade-yellow, #FFC107);
	color: #1a1a1a;
}

.section-volet .btn-center-wrap {
	text-align: center;
}

.btn-jade {
	background: #066943;
}

/* ---------- Volet d'activités — cartes à icônes (accueil, remplace le
   carrousel photo précédent) ---------- */
/* Inspirée d'une référence utilisateur (fond texturé clair, icônes rondes,
   cartes blanches, bouton "Learn More") — avec les vraies descriptions déjà
   utilisées ailleurs sur le site pour chaque volet (data en haut d'index.php),
   pas de texte "Lorem Ipsum" comme la référence. */

.section-volet--icons {
	position: relative;
	padding: 90px 0;
	background: var(--jade-background, #F2F1EE);
	text-align: center;
	overflow: hidden;
}

/* Texture en calque séparé à 15% d'opacité (pas directement sur le fond gris
   de la section) — moins présente, sur demande explicite. */
.section-volet--icons::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url('/assets/shape/team-bg-2-1.png') center / cover no-repeat;
	opacity: 0.15;
	z-index: 0;
}

/* Dégradé de transparence en haut de la section, pour adoucir la transition
   avec la section précédente. */
.section-volet--icons::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 140px;
	background: linear-gradient(to bottom, var(--jade-background, #F2F1EE) 0%, rgba(242, 241, 238, 0) 100%);
	z-index: 1;
}

.section-volet--icons > .accueil-container {
	position: relative;
	z-index: 2;
}

.volet-icons-dot {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--jade-yellow, #FFC107);
	margin-bottom: 18px;
}

.volet-icons-heading {
	max-width: 680px;
	margin: 0 auto 48px;
}

.volet-icons-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.volet-icon-card {
	background: #fff;
	border-radius: 16px;
	padding: 40px 28px 32px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
	transition: background 0.2s ease;
}

.volet-icon-card:hover {
	background: var(--jade-yellow, #FFC107);
}

.volet-icon-card:hover .volet-icon-circle {
	background: #fff;
}

.volet-icon-card:hover p {
	color: #3a3a1a;
}

.volet-icon-circle {
	width: 84px;
	height: 84px;
	margin: 0 auto 22px;
	border-radius: 50%;
	background: var(--jade-background, #F2F1EE);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	color: var(--jade-primary, #097D50);
	transition: background 0.2s ease;
}

.volet-icon-card h3 {
	margin: 0 0 14px;
	font-size: 20px;
	color: #14181f;
}

.volet-icon-card p {
	color: #666;
	line-height: 1.6;
	font-size: 14px;
	margin: 0 0 24px;
}

.volet-icon-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--jade-primary, #097D50);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
	padding: 12px 24px;
	border-radius: 999px;
	transition: background 0.15s ease;
}

.volet-icon-btn:hover {
	background: #066943;
}

@media (max-width: 900px) {
	.volet-icons-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Vision / Mission ---------- */

.section-vision {
	position: relative;
	background-image: url('/wp-content/uploads/2023/02/programme-vogny-e1677060564868.jpg');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	color: #fff;
}

.section-vision::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #03780A, #007EB7);
	opacity: 0.84;
}

.vision-inner {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 80px 24px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
}

.vision-block .icon {
	font-size: 34px;
	margin-bottom: 16px;
	display: block;
}

.vision-block h2 {
	color: #fff;
	font-size: 40px;
	font-weight: 700;
	margin: 0 0 16px;
}

.vision-block p {
	line-height: 1.7;
	margin: 0;
}

@media (min-width: 700px) {
	.vision-block h2 { font-size: 60px; }
}

@media (max-width: 699px) {
	.vision-inner { grid-template-columns: 1fr; }
}

/* ---------- Nos valeurs ---------- */

.section-valeurs {
	margin: 75px 0;
}

.valeurs-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px 24px;
	max-width: 1000px;
	margin: 0 auto;
}

.valeur-item {
	text-align: center;
}

.valeur-icon {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: rgba(9, 125, 80, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}

.valeur-icon img {
	width: 42px;
	height: 42px;
}

.valeur-item h3 {
	color: #333;
	font-size: 22px;
	font-weight: 700;
	margin: 0;
}

@media (max-width: 699px) {
	.valeurs-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Activité récentes ---------- */

.section-activites-recentes {
	padding: 75px 0;
	background: var(--jade-background, #F2F1EE);
}

.activite-thumb-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--jade-primary, #097D50), var(--jade-secondary, #D9A62E));
	opacity: 0.35;
}

/* ----- Grille de 3 cartes (nouvelle mise en page) ----- */

.recentes-home-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin-bottom: 40px;
}

.recentes-home-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--jade-primary, #097D50);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	margin-bottom: 10px;
}

.recentes-home-header .section-heading {
	margin: 0;
}

.recentes-home-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.recentes-home-card {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.recentes-home-card-photo {
	position: relative;
	aspect-ratio: 4 / 3;
}

.recentes-home-card-photo img,
.recentes-home-card-photo .activite-thumb-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.recentes-home-card-date {
	position: absolute;
	right: 0;
	bottom: 0;
	background: var(--jade-yellow, #FFC107);
	color: #1a1a1a;
	text-align: center;
	padding: 8px 18px;
	border-radius: 10px 0 0 0;
	line-height: 1.1;
}

.recentes-home-card-date-day {
	display: block;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 18px;
	font-weight: 800;
}

.recentes-home-card-date-month {
	display: block;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}

.recentes-home-card-body {
	padding: 20px 22px 22px;
}

.recentes-home-card-badge {
	display: inline-block;
	background: var(--jade-background, #F2F1EE);
	color: var(--jade-primary, #097D50);
	font-size: 12px;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 14px;
}

.recentes-home-card-body h3 {
	margin: 0 0 14px;
	font-size: 18px;
	line-height: 1.35;
}

.recentes-home-card-body h3 a {
	color: #14181f;
	text-decoration: none;
}

.recentes-home-card-body h3 a:hover {
	color: var(--jade-primary, #097D50);
}

.recentes-home-card-body hr {
	border: none;
	border-top: 1px solid #eee;
	margin: 0 0 16px;
}

.recentes-home-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.recentes-home-card-volet {
	font-size: 13px;
	color: #777;
}

.recentes-home-card-volet i {
	color: var(--jade-primary, #097D50);
	margin-right: 5px;
}

.recentes-home-card-more {
	background: var(--jade-background, #F2F1EE);
	color: var(--jade-primary, #097D50);
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
	padding: 8px 18px;
	border-radius: 999px;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}

.recentes-home-card-more:hover {
	background: var(--jade-primary, #097D50);
	color: #fff;
}

@media (max-width: 900px) {
	.recentes-home-grid {
		grid-template-columns: 1fr;
	}

	.recentes-home-header {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------- Newsletter ---------- */

.section-newsletter {
	max-width: 1200px;
	margin: -40px auto -90px;
	padding: 0 24px;
	position: relative;
	z-index: 5;
}

.newsletter-inner {
	position: relative;
	background: var(--jade-primary, #097D50);
	color: #fff;
	border-radius: 10px;
	padding: 86px 48px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.18);
	overflow: hidden;
}

/* Forme décorative (assets/shape) dans le coin de l'encart newsletter. */
.newsletter-inner::before {
	content: "";
	position: absolute;
	left: -30px;
	top: -30px;
	width: 220px;
	height: 220px;
	background: url('/assets/shape/cta-shape-1-1.png') left top / contain no-repeat;
	opacity: 0.15;
	pointer-events: none;
}

.newsletter-inner > * {
	position: relative;
	z-index: 1;
}

.newsletter-inner h2 {
	font-size: 44px;
	font-weight: 800;
	text-transform: uppercase;
	margin: 0 0 16px;
	color: #fff;
	letter-spacing: 0.5px;
}

.newsletter-inner p {
	margin: 0;
	line-height: 1.7;
	color: #eaf3ee;
	max-width: 460px;
}

.newsletter-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.newsletter-form input[type="email"] {
	width: 100%;
	padding: 18px 20px;
	border: none;
	border-radius: 4px;
	font-size: 15px;
	box-sizing: border-box;
}

.newsletter-check {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #f0f0f0;
	color: #1a1a1a;
	padding: 16px 20px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 15px;
}

.newsletter-check input[type="checkbox"] {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	accent-color: var(--jade-primary, #097D50);
}

.newsletter-form button {
	width: 100%;
	padding: 18px 24px;
	background: #1F1D1D;
	color: #fff;
	border: none;
	border-radius: 999px;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.newsletter-form button:hover {
	background: var(--jade-yellow, #FFC107);
	color: #1a1a1a;
}

.jade-hp-field {
	position: absolute;
	left: -9999px;
	top: -9999px;
}

.newsletter-message {
	padding: 12px 16px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
}

.newsletter-message--success {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.4);
}

.newsletter-message--error {
	background: #fdecea;
	color: #b32424;
	border: 1px solid #f5c2c0;
}

@media (max-width: 699px) {
	.volet-cards { grid-template-columns: 1fr; }
	.newsletter-inner { grid-template-columns: 1fr; padding: 36px 24px; }
	.section-newsletter { padding: 0 16px; margin-bottom: -60px; }
	.section-heading { font-size: 32px; }
}

/* ---------- Carte "cause urgente" flottant sur le bas du hero (accueil) ---------- */
/* Inspirée d'une référence utilisateur (bandeau vert foncé, badge, bouton
   "Donate Now", barre de progression) mais avec une vraie cause de
   jade_get_causes() et le vrai pourcentage déjà utilisé sur nos-causes.php —
   pas de "$X Raised / $Y Goal" en dollars inventés (voir assets/css/causes.css
   pour le raisonnement complet). */

/* Bandeau photo pleine largeur (3 vraies photos de groupe de la cause),
   posé juste au-dessus de la carte : la carte le chevauche presque
   entièrement, ne laissant dépasser que 20px en haut (demande explicite). */
/* Carrousel de 10 vraies photos, 3 visibles à la fois, mode "pas à pas" (pas
   de défilement continu) : la piste avance d'une image vers la gauche, PUIS
   attend 1,5s avant le décalage suivant, en boucle — la piste contient les
   10 photos suivies d'une 2e copie identique (voir index.php) ; la dernière
   position (9e décalage) montre déjà le début de la copie, donc reboucler
   sur la position 0 est visuellement identique et sans à-coup. */
.hero-urgent-cause-banner {
	--gap: 10px;
	--step: calc((100vw - 2 * var(--gap)) / 3 + var(--gap));
	position: relative;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-top: 40px;
	margin-bottom: 50px;
	height: 400px;
	overflow: hidden;
}

.hero-urgent-cause-banner-track {
	display: flex;
	gap: var(--gap);
	height: 100%;
	width: max-content;
	/* 10 paliers de 1,5s de pause + 0,5s de glissement = 20s par boucle. */
	animation: jade-cause-carousel 20s ease-in-out infinite;
}

.hero-urgent-cause-banner-track img {
	flex: 0 0 calc((100vw - 2 * var(--gap)) / 3);
	height: 100%;
	object-fit: cover;
	opacity: 1;
	display: block;
}

@keyframes jade-cause-carousel {
	0%,   7.5%  { transform: translateX(calc(0 * var(--step))); }
	10%,  17.5% { transform: translateX(calc(-1 * var(--step))); }
	20%,  27.5% { transform: translateX(calc(-2 * var(--step))); }
	30%,  37.5% { transform: translateX(calc(-3 * var(--step))); }
	40%,  47.5% { transform: translateX(calc(-4 * var(--step))); }
	50%,  57.5% { transform: translateX(calc(-5 * var(--step))); }
	60%,  67.5% { transform: translateX(calc(-6 * var(--step))); }
	70%,  77.5% { transform: translateX(calc(-7 * var(--step))); }
	80%,  87.5% { transform: translateX(calc(-8 * var(--step))); }
	90%,  97.5% { transform: translateX(calc(-9 * var(--step))); }
	100%        { transform: translateX(calc(-10 * var(--step))); }
}

@media (prefers-reduced-motion: reduce) {
	.hero-urgent-cause-banner-track {
		animation: none;
	}
}

.hero-urgent-cause {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	width: 60vw;
	margin: -196px auto 50px;
	border-radius: 20px;
	padding: 36px 40px 40px;
	color: #fff;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
}

/* Dégradé uni (vert → jaune, couleurs JADE) dans une couche dédiée — pas de
   photo dans la carte elle-même (demande explicite) : les photos vivent
   uniquement dans le bandeau ci-dessus. Couche séparée de
   .hero-urgent-cause pour que celle-ci reste overflow:visible et laisse
   dépasser l'accent jaune du coin. */
.hero-urgent-cause-bg {
	position: absolute;
	inset: 0;
	border-radius: 20px;
	overflow: hidden;
	background: linear-gradient(90deg, var(--jade-primary, #0B6E34), var(--jade-yellow, #FFC107));
	z-index: 0;
}

.hero-urgent-cause-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(6, 60, 30, 0.55), rgba(6, 60, 30, 0.4));
}

.hero-urgent-cause-accent {
	position: absolute;
	left: -18px;
	bottom: -18px;
	width: 90px;
	height: 90px;
	background: var(--jade-yellow, #FFC107);
	border-radius: 50%;
	z-index: 0;
}

.hero-urgent-cause-top,
.hero-urgent-cause-panel {
	position: relative;
	z-index: 1;
}

.hero-urgent-cause-top {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 8px 32px;
}

.hero-urgent-cause-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--jade-yellow, #FFC107);
	margin-bottom: 10px;
}

.hero-urgent-cause-main h2 {
	margin: 0;
	font-size: 26px;
	color: #fff;
}

.hero-urgent-cause-action {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

.hero-urgent-cause-caption {
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.8);
}

.hero-urgent-cause-date {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.75);
}

/* Panneau sombre imbriqué contenant la barre de progression — reproduit la
   référence (encart plus foncé que le fond vert du bandeau). */
.hero-urgent-cause-panel {
	margin-top: 28px;
	background: rgba(0, 0, 0, 0.25);
	border-radius: 12px;
	padding: 26px 24px 20px;
}

.hero-urgent-cause-track {
	position: relative;
	height: 6px;
	background: rgba(255, 255, 255, 0.25);
	border-radius: 999px;
}

.hero-urgent-cause-fill {
	position: relative;
	height: 100%;
	min-width: 6px;
	background: var(--jade-yellow, #FFC107);
	border-radius: 999px;
}

.hero-urgent-cause-percent {
	position: absolute;
	right: -14px;
	top: -30px;
	background: var(--jade-yellow, #FFC107);
	color: #1a1a1a;
	font-size: 11px;
	font-weight: 800;
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.hero-urgent-cause-labels {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 16px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 700px) {
	.hero-urgent-cause-banner {
		height: 100px;
		margin-top: 24px;
	}

	.hero-urgent-cause {
		margin-top: -80px;
		width: 100%;
		height: auto;
		padding: 28px 24px 32px;
	}

	.hero-urgent-cause-top {
		grid-template-columns: 1fr;
	}

	.hero-urgent-cause-action {
		align-items: flex-start;
		margin-top: 16px;
	}
}