/* ==========================================================================
   FCG — First Church of God
   Design tokens, layout de base, composants. A affiner avec la charte
   graphique validee en Phase 1 (Article 4).
   ========================================================================== */

:root {
	/* Identite de marque FCG : rouge grenat + or. */
	--fcg-color-primary: #7a1e2b;      /* rouge grenat */
	--fcg-color-primary-light: #9c2e3f;
	--fcg-color-primary-deep: #4a1019;
	--fcg-color-accent: #c9a24b;       /* or / doré */
	--fcg-color-bg: #ffffff;
	--fcg-color-bg-alt: #f7f5f0;
	--fcg-color-text: #1c1c1c;
	--fcg-color-text-muted: #5a5a5a;
	--fcg-color-border: #e4e0d8;

	--fcg-font-heading: 'Playfair Display', Georgia, serif;
	--fcg-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--fcg-space-1: 0.5rem;
	--fcg-space-2: 1rem;
	--fcg-space-3: 1.5rem;
	--fcg-space-4: 2.5rem;
	--fcg-space-5: 4rem;
	--fcg-space-6: 6rem;

	--fcg-radius: 10px;
	--fcg-shadow: 0 10px 30px rgba(122, 30, 43, 0.1);
	--fcg-transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	--fcg-container: 1200px;
}

/* Reset minimal */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--fcg-color-bg);
	color: var(--fcg-color-text);
	font-family: var(--fcg-font-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
	font-family: var(--fcg-font-heading);
	line-height: 1.2;
	margin: 0 0 var(--fcg-space-2);
}
h1 { font-size: clamp(2.25rem, 4vw + 1rem, 4rem); }
h2 { font-size: clamp(1.75rem, 2.5vw + 1rem, 2.75rem); }
h3 { font-size: clamp(1.25rem, 1.5vw + 1rem, 1.75rem); }

.fcg-container {
	max-width: var(--fcg-container);
	margin-inline: auto;
	padding-inline: var(--fcg-space-3);
}

/* ---- Header / Navigation ---- */
.fcg-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--fcg-color-border);
}
.fcg-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: var(--fcg-space-2);
}

.fcg-logo { display: flex; align-items: center; flex-shrink: 0; }
.fcg-logo a { display: inline-flex; align-items: center; }
.fcg-logo img,
.fcg-logo svg {
	display: block;
	width: auto;
	max-width: 180px;
	height: auto;
	max-height: 48px;
}
@media (max-width: 960px) {
	.fcg-logo img,
	.fcg-logo svg { max-height: 38px; max-width: 140px; }
}
.fcg-nav > ul {
	display: flex;
	align-items: center;
	gap: var(--fcg-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
.fcg-nav li { position: relative; }
.fcg-nav a {
	display: block;
	padding: 0.5rem 0.15rem;
	font-weight: 500;
	font-size: 0.92rem;
	position: relative;
	white-space: nowrap;
}
.fcg-nav > ul > li > a::after {
	content: '';
	position: absolute;
	left: 0.15rem;
	right: 0.15rem;
	bottom: 0.1rem;
	height: 2px;
	background: var(--fcg-color-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--fcg-transition);
}
.fcg-nav > ul > li > a:hover::after,
.fcg-nav > ul > li.current-menu-item > a::after,
.fcg-nav > ul > li.current-menu-ancestor > a::after { transform: scaleX(1); }

/* Sous-menus (dropdowns) */
.fcg-nav .menu-item-has-children > a { padding-right: 1.1rem; }
.fcg-nav .menu-item-has-children > a::before {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	opacity: 0.55;
	transform: translateY(-65%) rotate(45deg);
}
.fcg-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	margin: 0.5rem 0 0;
	padding: 0.5rem;
	list-style: none;
	background: #fff;
	border: 1px solid var(--fcg-color-border);
	border-radius: var(--fcg-radius);
	box-shadow: var(--fcg-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--fcg-transition), transform var(--fcg-transition), visibility var(--fcg-transition);
	z-index: 200;
}
.fcg-nav .menu-item-has-children:hover > .sub-menu,
.fcg-nav .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.fcg-nav .sub-menu a {
	padding: 0.55rem 0.75rem;
	border-radius: 6px;
	font-size: 0.88rem;
	color: var(--fcg-color-text);
}
.fcg-nav .sub-menu a::after,
.fcg-nav .sub-menu a::before { display: none; content: none; }
.fcg-nav .sub-menu a:hover { background: var(--fcg-color-bg-alt); color: var(--fcg-color-primary); }

.fcg-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.75rem;
	border-radius: 6px;
	background: var(--fcg-color-accent);
	color: #fff;
	font-weight: 600;
	transition: transform var(--fcg-transition), box-shadow var(--fcg-transition);
}
.fcg-btn:hover { transform: translateY(-2px); box-shadow: var(--fcg-shadow); }
.fcg-btn--outline {
	background: transparent;
	border: 1.5px solid var(--fcg-color-primary);
	color: var(--fcg-color-primary);
}

/* ---- Hero Elementor (page Home, section marquee "css_classes: fcg-hero-block") ---- */
.fcg-hero-block.elementor-section {
	position: relative;
	min-height: 76vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding-block: var(--fcg-space-6) !important;
	background-color: var(--fcg-color-primary); /* filet de securite si la photo ne charge pas */
}
/* Variante reduite pour les pages interieures (hero + titre, pas de slider). */
.fcg-hero-block--sm.elementor-section {
	min-height: 46vh;
	padding-block: var(--fcg-space-5) !important;
}
.fcg-hero-block--sm .elementor-widget-heading .elementor-heading-title { font-size: clamp(2rem, 3.5vw + 1rem, 3rem) !important; }
/* Diaporama de photos en fond (widget HTML "fcg-hero-slider", 1er element
   de la section) — voir assets/js/main.js pour la rotation automatique. */
.fcg-hero-slider { position: absolute; inset: 0; z-index: 0; }
.fcg-hero-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1.08);
	transition: opacity 1.4s ease;
}
.fcg-hero-slide.is-active {
	opacity: 1;
	animation: fcg-ken-burns 9s ease-in-out forwards;
}
@keyframes fcg-ken-burns {
	from { transform: scale(1.08); }
	to { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.fcg-hero-slide { transition: opacity 0.4s ease; transform: none; }
	.fcg-hero-slide.is-active { animation: none; transform: none; }
}

.fcg-hero-dots {
	position: absolute;
	left: 50%;
	bottom: var(--fcg-space-3);
	transform: translateX(-50%);
	display: flex;
	gap: 0.6rem;
	z-index: 2;
}
.fcg-hero-dots button {
	width: 9px;
	height: 9px;
	padding: 0;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.7);
	background: transparent;
	cursor: pointer;
	transition: background var(--fcg-transition), transform var(--fcg-transition);
}
.fcg-hero-dots button.is-active { background: var(--fcg-color-accent); border-color: var(--fcg-color-accent); transform: scale(1.2); }

/* Teinte de marque au-dessus des photos pour garder le texte lisible. */
.fcg-hero-block.elementor-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(900px 500px at 12% -10%, rgba(201, 162, 75, 0.35), transparent 60%),
		linear-gradient(135deg, rgba(35, 8, 13, 0.82) 0%, rgba(122, 30, 43, 0.74) 55%, rgba(24, 6, 9, 0.88) 100%);
	pointer-events: none;
	z-index: 1;
}
.fcg-hero-block .elementor-container { position: relative; z-index: 2; }
/* Specificite volontairement plus haute (3 classes) que les regles generiques
   d'habillage Elementor plus bas dans ce fichier, pour rester blanc quel que
   soit l'ordre des regles. */
.fcg-hero-block .elementor-widget-heading .elementor-heading-title {
	color: #fff !important;
	font-size: clamp(2.5rem, 4.5vw + 1rem, 4.25rem);
	text-wrap: balance;
}
.fcg-hero-block .elementor-widget-text-editor,
.fcg-hero-block .elementor-widget-text-editor p {
	color: rgba(255, 255, 255, 0.82) !important;
	font-size: 1.2rem;
	max-width: 640px;
}
.fcg-hero-block .elementor-widget-text-editor em { color: rgba(255, 255, 255, 0.9) !important; }
.fcg-hero-block .fcg-btn--outline { border-color: rgba(255, 255, 255, 0.65); color: #fff; }
.fcg-hero-block .fcg-btn--outline:hover { background: rgba(255, 255, 255, 0.12); }

/* ---- Hero (gabarit PHP, fallback pour d'autres pages) ---- */
.fcg-hero {
	position: relative;
	min-height: 82vh;
	display: flex;
	align-items: center;
	color: #fff;
	background: linear-gradient(180deg, rgba(122,30,43,0.65), rgba(122,30,43,0.85)), center/cover no-repeat var(--fcg-hero-image, none);
	overflow: hidden;
}
.fcg-hero__content { max-width: 720px; }
.fcg-hero p.lead { font-size: 1.25rem; color: rgba(255,255,255,0.85); }

/* ---- Piliers (Administrative Committee / Discipleship / Mission) ---- */
.fcg-pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--fcg-space-3);
	padding-block: var(--fcg-space-6);
}
@media (max-width: 860px) {
	.fcg-pillars { grid-template-columns: 1fr; }
}
.fcg-pillar-card {
	padding: var(--fcg-space-4);
	background: var(--fcg-color-bg-alt);
	border-radius: var(--fcg-radius);
	transition: transform var(--fcg-transition), box-shadow var(--fcg-transition);
}
.fcg-pillar-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--fcg-shadow);
}

/* ---- Cards generiques (sermons, events, articles) ----
   Flexbox plutot que "grid auto-fit" : avec un seul resultat (recherche,
   taxonomie peu remplie...) auto-fit peut laisser les pistes vides
   occuper leur place au lieu de la redistribuer, ce qui cree un grand
   vide a cote de l'unique carte. Le flex-grow evite ce cas. */
.fcg-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fcg-space-3);
}
.fcg-grid > * { flex: 1 1 280px; max-width: 400px; }
.fcg-card {
	border-radius: var(--fcg-radius);
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--fcg-color-border);
	transition: transform var(--fcg-transition), box-shadow var(--fcg-transition);
}
.fcg-card:hover { transform: translateY(-4px); box-shadow: var(--fcg-shadow); }
.fcg-card > a { display: block; color: inherit; }
.fcg-card__body { padding: var(--fcg-space-2); }
.fcg-card__meta { font-size: 0.85rem; color: var(--fcg-color-text-muted); }

/* ---- Slider de cartes (sermons...) ---- */
.fcg-slider { position: relative; }

.fcg-slider__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fcg-space-2);
	margin-bottom: var(--fcg-space-3);
}
.fcg-slider__head h2 { margin: 0; }

.fcg-slider__arrows { display: flex; gap: 0.6rem; flex-shrink: 0; }
.fcg-slider__nav {
	position: static;
	transform: none;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1.5px solid var(--fcg-color-border);
	background: #fff;
	color: var(--fcg-color-primary);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	transition: background var(--fcg-transition), color var(--fcg-transition), border-color var(--fcg-transition), opacity var(--fcg-transition);
}
.fcg-slider__nav:hover { background: var(--fcg-color-accent); color: #fff; border-color: var(--fcg-color-accent); }
.fcg-slider__nav[disabled] { opacity: 0.35; cursor: default; pointer-events: none; }

.fcg-slider__track {
	display: flex;
	gap: var(--fcg-space-3);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 0.3rem 0.3rem var(--fcg-space-2);
	margin: 0 -0.3rem;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.fcg-slider__track::-webkit-scrollbar { display: none; }
.fcg-slider__item {
	flex: 0 0 auto;
	width: min(320px, 82vw);
	scroll-snap-align: start;
}

.fcg-slider__dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: var(--fcg-space-2);
}
.fcg-slider__dots button {
	width: 8px;
	height: 8px;
	padding: 0;
	border-radius: 50%;
	border: none;
	background: var(--fcg-color-border);
	cursor: pointer;
	transition: background var(--fcg-transition), transform var(--fcg-transition);
}
.fcg-slider__dots button.is-active { background: var(--fcg-color-accent); transform: scale(1.3); }

@media (max-width: 560px) {
	.fcg-slider__head { flex-direction: column; align-items: flex-start; }
}

/* ---- Frise narrative (Good News...) ---- */
.fcg-story-steps {
	max-width: 720px;
	margin-inline: auto;
}
.fcg-story-step {
	display: flex;
	gap: var(--fcg-space-3);
	position: relative;
	padding-bottom: var(--fcg-space-4);
}
.fcg-story-step::before {
	content: '';
	position: absolute;
	left: 27px;
	top: 56px;
	bottom: 0;
	width: 2px;
	background: var(--fcg-color-border);
}
.fcg-story-step--last::before { display: none; }
.fcg-story-step__num {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--fcg-color-primary), var(--fcg-color-primary-light));
	color: #fff;
	font-family: var(--fcg-font-heading);
	font-size: 1.15rem;
	font-weight: 600;
	z-index: 1;
}
.fcg-story-step__body { padding-top: 0.6rem; }
.fcg-story-step__body h3 { margin: 0 0 0.5rem; }
.fcg-story-step__body p { margin: 0; color: var(--fcg-color-text-muted); }
@media (max-width: 560px) {
	.fcg-story-step__num { width: 44px; height: 44px; font-size: 1rem; }
	.fcg-story-step::before { left: 21px; top: 46px; }
}

/* ---- Bandeau auto-defilant (evenements en vedette) ---- */
.fcg-marquee {
	position: relative;
	overflow: hidden;
	margin-top: var(--fcg-space-2);
}
.fcg-marquee::before,
.fcg-marquee::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 90px;
	z-index: 2;
	pointer-events: none;
}
.fcg-marquee::before { left: 0; background: linear-gradient(to right, var(--fcg-color-bg), rgba(255, 255, 255, 0)); }
.fcg-marquee::after { right: 0; background: linear-gradient(to left, var(--fcg-color-bg), rgba(255, 255, 255, 0)); }

.fcg-marquee__track {
	display: flex;
	gap: var(--fcg-space-3);
	width: max-content;
	animation: fcg-marquee-scroll 26s linear infinite;
}
.fcg-marquee:hover .fcg-marquee__track,
.fcg-marquee:focus-within .fcg-marquee__track { animation-play-state: paused; }
.fcg-marquee__item { flex: 0 0 auto; width: 280px; }

@keyframes fcg-marquee-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.fcg-marquee__track { animation: none; overflow-x: auto; }
}
@media (max-width: 560px) {
	.fcg-marquee::before,
	.fcg-marquee::after { width: 40px; }
	.fcg-marquee__item { width: 240px; }
}

/* ---- Lecteur podcast (play/pause) ---- */
.fcg-podcast-list {
	display: flex;
	flex-direction: column;
}
.fcg-podcast-item {
	display: flex;
	align-items: center;
	gap: var(--fcg-space-2);
	padding-block: var(--fcg-space-2);
	border-bottom: 1px solid var(--fcg-color-border);
}
.fcg-podcast-item:last-child { border-bottom: none; }
.fcg-podcast-item__body h3 { margin: 0; font-size: 1.05rem; }
.fcg-podcast-item__body a { color: var(--fcg-color-primary); }

.fcg-podcast-play {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: none;
	background: linear-gradient(135deg, var(--fcg-color-primary), var(--fcg-color-primary-light));
	color: #fff;
	cursor: pointer;
	transition: transform var(--fcg-transition), background var(--fcg-transition);
}
.fcg-podcast-play:hover { transform: scale(1.06); }
.fcg-podcast-play svg { width: 18px; height: 18px; }
.fcg-podcast-play .fcg-icon-pause { display: none; }
.fcg-podcast-play.is-playing { background: var(--fcg-color-accent); }
.fcg-podcast-play.is-playing .fcg-icon-play { display: none; }
.fcg-podcast-play.is-playing .fcg-icon-pause { display: block; }

/* ---- Bandeau grenat reutilisable (Podcasts, Donate...) ---- */
.fcg-podcasts-block.elementor-section,
.fcg-band-garnet.elementor-section {
	background: var(--fcg-color-primary) !important;
	padding-block: var(--fcg-space-5) !important;
}
/* Specificite (3 classes) volontairement plus haute que la regle generique
   d'habillage Elementor plus bas dans ce fichier, pour gagner quel que soit
   l'ordre des regles (meme principe que .fcg-hero-block). */
.fcg-podcasts-block .elementor-widget-heading .elementor-heading-title,
.fcg-podcasts-block .elementor-widget-text-editor,
.fcg-podcasts-block .elementor-widget-text-editor p,
.fcg-band-garnet .elementor-widget-heading .elementor-heading-title,
.fcg-band-garnet .elementor-widget-text-editor,
.fcg-band-garnet .elementor-widget-text-editor p {
	color: #fff !important;
}
.fcg-band-garnet .elementor-widget-text-editor em { color: rgba(255, 255, 255, 0.85) !important; }
.fcg-podcasts-block .fcg-podcast-item { border-bottom-color: rgba(255, 255, 255, 0.18); }
.fcg-podcasts-block .fcg-card__meta { color: rgba(255, 255, 255, 0.65); }
.fcg-podcasts-block .fcg-podcast-item__body h3,
.fcg-podcasts-block .fcg-podcast-item__body a { color: #fff !important; }
.fcg-podcasts-block .fcg-podcast-play {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}
.fcg-podcasts-block .elementor-widget-social-icons .elementor-icon {
	background: rgba(255, 255, 255, 0.15) !important;
	color: #fff !important;
}
.fcg-podcasts-block .elementor-widget-social-icons .elementor-icon:hover { background: var(--fcg-color-accent) !important; }
.fcg-podcasts-block .fcg-podcast-play.is-playing { background: var(--fcg-color-accent); }

/* ---- Section give / donate ---- */
.fcg-give {
	background: var(--fcg-color-primary);
	color: #fff;
	padding-block: var(--fcg-space-6);
	text-align: center;
}
.fcg-give .fcg-btn { margin-top: var(--fcg-space-2); }

/* ---- Footer ---- */
.fcg-footer {
	position: relative;
	background: linear-gradient(175deg, var(--fcg-color-primary-light) 0%, var(--fcg-color-primary) 45%, var(--fcg-color-primary) 100%);
	color: rgba(255, 255, 255, 0.72);
}
.fcg-footer::before {
	content: '';
	display: block;
	height: 3px;
	background: linear-gradient(90deg, var(--fcg-color-accent), rgba(201, 162, 75, 0.15) 60%, transparent);
}
.fcg-footer a { color: inherit; }
.fcg-footer a:hover { color: #fff; }

.fcg-footer__top {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: var(--fcg-space-4);
	padding-block: var(--fcg-space-5) var(--fcg-space-4);
}
@media (max-width: 900px) {
	.fcg-footer__top { grid-template-columns: 1fr 1fr; }
	.fcg-footer__brand,
	.fcg-footer__cta { grid-column: 1 / -1; }
}

.fcg-footer__logo {
	font-family: var(--fcg-font-heading);
	font-size: 1.4rem;
	color: #fff;
	margin: 0 0 var(--fcg-space-1);
}
.fcg-footer__tagline {
	max-width: 40ch;
	font-size: 0.92rem;
	line-height: 1.65;
	margin: 0 0 var(--fcg-space-2);
}
.fcg-footer__social { display: flex; gap: 0.6rem; }
.fcg-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.25);
	transition: background var(--fcg-transition), border-color var(--fcg-transition), transform var(--fcg-transition);
}
.fcg-footer__social svg { width: 17px; height: 17px; }
.fcg-footer__social a:hover {
	background: var(--fcg-color-accent);
	border-color: var(--fcg-color-accent);
	color: #fff;
	transform: translateY(-3px);
}

.fcg-footer__heading {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--fcg-color-accent);
	margin: 0 0 var(--fcg-space-2);
}

.fcg-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.fcg-footer__menu a { font-size: 0.92rem; }

.fcg-footer__contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	font-size: 0.92rem;
}

.fcg-footer__cta p { font-size: 0.92rem; margin: 0 0 var(--fcg-space-2); }
.fcg-footer__cta .fcg-btn { padding: 0.65rem 1.4rem; font-size: 0.88rem; }

.fcg-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.fcg-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem;
	padding-block: var(--fcg-space-2);
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.55);
}
@media (max-width: 560px) {
	.fcg-footer__bottom-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.3rem;
	}
}

/* ---- Utilitaires AOS fallback (si JS desactive, contenu reste visible) ---- */
[data-aos] { }
.no-js [data-aos] { opacity: 1 !important; transform: none !important; }

/* ==========================================================================
   Template single (sermons, podcasts, evenements, articles...)
   ========================================================================== */

.fcg-single__header { padding-block: var(--fcg-space-5) var(--fcg-space-3); max-width: 820px; margin-inline: auto; }
.fcg-single__type {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fcg-color-accent);
	background: var(--fcg-color-bg-alt);
	border-radius: 999px;
	padding: 0.3rem 0.9rem;
	margin-bottom: var(--fcg-space-2);
}
.fcg-single__header h1 { margin-bottom: var(--fcg-space-3); }

.fcg-single__byline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--fcg-space-2);
	padding-block: var(--fcg-space-2);
	border-top: 1px solid var(--fcg-color-border);
	border-bottom: 1px solid var(--fcg-color-border);
}
.fcg-single__author { display: flex; align-items: center; gap: 0.7rem; }
.fcg-single__author img { border-radius: 50%; display: block; }
.fcg-single__author strong { display: block; font-size: 0.92rem; }
.fcg-single__author .fcg-card__meta { margin: 0; }

.fcg-share { display: flex; gap: 0.5rem; }
.fcg-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--fcg-color-bg-alt);
	color: var(--fcg-color-primary);
	transition: background var(--fcg-transition), color var(--fcg-transition), transform var(--fcg-transition);
}
.fcg-share__btn svg { width: 16px; height: 16px; }
.fcg-share__btn:hover { background: var(--fcg-color-accent); color: #fff; transform: translateY(-2px); }

.fcg-single__image {
	max-width: 1100px;
	margin: 0 auto var(--fcg-space-4);
	padding-inline: var(--fcg-space-3);
}
.fcg-single__image img {
	width: 100%;
	height: 440px;
	object-fit: cover;
	border-radius: var(--fcg-radius);
	box-shadow: var(--fcg-shadow);
}
@media (max-width: 700px) {
	.fcg-single__image img { height: 260px; }
}

.fcg-single__body { max-width: 760px; margin-inline: auto; padding-block: 0 var(--fcg-space-5); }
.fcg-single__body .fcg-content { font-size: 1.08rem; line-height: 1.8; }
.fcg-single__body .fcg-content p { margin-bottom: 1.3em; }

.fcg-single__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var(--fcg-space-4);
	padding-top: var(--fcg-space-3);
	border-top: 1px solid var(--fcg-color-border);
}
.fcg-tag {
	font-size: 0.82rem;
	color: var(--fcg-color-primary);
	background: var(--fcg-color-bg-alt);
	border-radius: 999px;
	padding: 0.35rem 0.9rem;
	transition: background var(--fcg-transition), color var(--fcg-transition);
}
.fcg-tag:hover { background: var(--fcg-color-accent); color: #fff; }

/* ---- En-tete d'archive (taxonomies, CPT) ---- */
.fcg-archive-head {
	padding-block: var(--fcg-space-5) var(--fcg-space-4);
	max-width: 820px;
}
.fcg-archive-head h1 { margin-bottom: 0; }
.fcg-archive-head__desc {
	margin-top: var(--fcg-space-2);
	color: var(--fcg-color-text-muted);
	font-size: 1.05rem;
	max-width: 65ch;
}
.fcg-archive-empty {
	padding-block: var(--fcg-space-4);
	color: var(--fcg-color-text-muted);
}

/* ==========================================================================
   Habillage du contenu Elementor — applique la charte FCG a toute page
   construite avec les widgets Elementor (pages du sitemap + futures pages
   creees par l'equipe FCG dans l'editeur).
   ========================================================================== */

.elementor-section.elementor-element { padding-block: var(--fcg-space-4); }
.elementor-section .elementor-container { max-width: var(--fcg-container); }

.elementor-widget-heading .elementor-heading-title {
	color: var(--fcg-color-primary) !important;
	font-family: var(--fcg-font-heading) !important;
}

.elementor-widget-text-editor,
.elementor-widget-text-editor p {
	color: var(--fcg-color-text) !important;
	font-family: var(--fcg-font-body) !important;
	font-size: 1.05rem;
	line-height: 1.7;
}
.elementor-widget-text-editor em { color: var(--fcg-color-text-muted); }

/* Boutons */
.elementor-widget-button .elementor-button,
a.elementor-button {
	background: var(--fcg-color-accent) !important;
	color: #fff !important;
	border-radius: 6px !important;
	padding: 0.85rem 1.75rem !important;
	font-weight: 600;
	font-family: var(--fcg-font-body);
	border: none !important;
	transition: transform var(--fcg-transition), box-shadow var(--fcg-transition);
}
.elementor-widget-button .elementor-button:hover { transform: translateY(-2px); box-shadow: var(--fcg-shadow); color: #fff !important; }

/* Icon Box -> carte (piliers Home, Church Directory, ByFaith Online...) */
.elementor-widget-icon-box .elementor-icon-box-wrapper {
	align-items: center;
	padding: var(--fcg-space-4) var(--fcg-space-3);
	background: #fff;
	border: 1px solid var(--fcg-color-border);
	border-radius: 16px;
	box-shadow: 0 2px 14px rgba(122, 30, 43, 0.06);
	transition: transform var(--fcg-transition), box-shadow var(--fcg-transition), border-color var(--fcg-transition);
}
.elementor-widget-icon-box .elementor-icon-box-wrapper:hover {
	transform: translateY(-6px);
	box-shadow: var(--fcg-shadow);
	border-color: var(--fcg-color-accent);
}
.elementor-icon-box-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	flex-shrink: 0;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--fcg-color-primary), var(--fcg-color-primary-light));
	margin-bottom: var(--fcg-space-2);
	overflow: hidden;
}
/* Elementor imbrique l'icone dans un <span class="elementor-icon"> qui porte
   son propre padding/fond/bordure par defaut — on le neutralise et on
   recentre le glyphe reel a l'interieur du cercle. */
.elementor-icon-box-icon .elementor-icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
	border: none !important;
	line-height: 1;
}
.elementor-icon-box-icon svg {
	display: block;
	width: 26px !important;
	height: 26px !important;
	fill: #fff;
}
.elementor-icon-box-icon i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 26px;
	line-height: 1;
}
.elementor-icon-box-title,
.elementor-icon-box-title .elementor-icon-box-title,
.elementor-icon-box-title a { font-family: var(--fcg-font-heading) !important; font-size: 1.2rem; margin-bottom: 0.4rem; color: var(--fcg-color-primary) !important; }
.elementor-icon-box-description { color: var(--fcg-color-text-muted) !important; font-family: var(--fcg-font-body) !important; font-size: 0.95rem; line-height: 1.6; }

/* Accordion (Beliefs...) */
.elementor-accordion .elementor-accordion-item { border: 1px solid var(--fcg-color-border) !important; border-radius: var(--fcg-radius); margin-bottom: var(--fcg-space-1); overflow: hidden; }
.elementor-accordion .elementor-tab-title {
	font-family: var(--fcg-font-heading) !important;
	color: var(--fcg-color-primary) !important;
	padding: var(--fcg-space-2) var(--fcg-space-3) !important;
}
.elementor-accordion .elementor-tab-title.elementor-active { background: var(--fcg-color-bg-alt); }
.elementor-tab-content,
.elementor-tab-content p { padding: 0 var(--fcg-space-3) var(--fcg-space-3) !important; color: var(--fcg-color-text-muted) !important; font-family: var(--fcg-font-body) !important; }

/* Social icons (Follow) */
.elementor-widget-social-icons .elementor-icon { background: var(--fcg-color-primary) !important; color: #fff !important; }
.elementor-widget-social-icons .elementor-icon:hover { background: var(--fcg-color-accent) !important; }

/* Images de contenu (About FCG, Go, Give, Stories...) — hauteur fixe et
   recadrage pour eviter qu'une photo au ratio natif n'ecrase la section. */
.elementor-widget-image img {
	width: 100%;
	height: 340px;
	object-fit: cover;
	border-radius: var(--fcg-radius);
	box-shadow: var(--fcg-shadow);
}
/* Image seule sur toute la largeur de la section (ex: bandeau Good News) :
   un peu plus haute, elle joue le role d'un bandeau plutot que d'une vignette. */
.elementor-column.elementor-col-100 > .elementor-widget-wrap > .elementor-widget-image img {
	height: 420px;
}
@media (max-width: 700px) {
	.elementor-widget-image img { height: 260px; }
	.elementor-column.elementor-col-100 > .elementor-widget-wrap > .elementor-widget-image img { height: 300px; }
}

/* Google Maps */
.elementor-widget-google_maps .elementor-widget-container { border-radius: var(--fcg-radius); overflow: hidden; }

/* Carte "Contact" compacte (coordonnees) */
.fcg-contact-card {
	background: var(--fcg-color-bg-alt);
	border-radius: var(--fcg-radius);
	padding: var(--fcg-space-4);
}
.fcg-contact-card h3 {
	margin-top: 0;
	margin-bottom: var(--fcg-space-3);
}
.fcg-contact-row {
	display: flex;
	align-items: flex-start;
	gap: var(--fcg-space-2);
	padding-block: var(--fcg-space-2);
	border-bottom: 1px solid var(--fcg-color-border);
}
.fcg-contact-row:last-child { border-bottom: none; }
.fcg-contact-row a { color: var(--fcg-color-primary); }
.fcg-contact-row a:hover { color: var(--fcg-color-accent); }
.fcg-contact-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--fcg-color-primary), var(--fcg-color-primary-light));
	color: #fff;
	font-size: 16px;
}
.fcg-contact-icon svg {
	width: 18px;
	height: 18px;
}

/* GiveWP donation form */
.give-form-wrap .give-btn,
.give-form-wrap input[type="submit"],
.give-donate-buttons-wrapper .give-btn {
	background: var(--fcg-color-accent) !important;
	border-radius: 6px !important;
	border: none !important;
}

/* WPForms (Contact, Prayer Request...) — WPForms pilote ses styles via ces
   variables CSS sur le conteneur ; les redefinir est plus robuste que de
   forcer chaque regle en !important. */
.wpforms-container {
	--wpforms-button-background-color: var(--fcg-color-accent);
	--wpforms-button-background-color-alt: var(--fcg-color-primary);
	--wpforms-button-border-color: var(--fcg-color-accent);
	--wpforms-button-border-color-alt: var(--fcg-color-primary);
	--wpforms-button-text-color: #ffffff;
	--wpforms-button-text-color-alt: #ffffff;
	--wpforms-button-border-radius: 6px;
	--wpforms-label-color: var(--fcg-color-text);
	--wpforms-field-border-color-spare: var(--fcg-color-accent);
}

.wpforms-container button[type="submit"].wpforms-submit,
.wpforms-container input[type="submit"].wpforms-submit {
	background-color: var(--fcg-color-accent) !important;
	border-color: var(--fcg-color-accent) !important;
	border-radius: 6px !important;
	color: #fff !important;
	font-family: var(--fcg-font-body) !important;
	transition: transform var(--fcg-transition), box-shadow var(--fcg-transition), background-color var(--fcg-transition);
}
.wpforms-container button[type="submit"].wpforms-submit:hover,
.wpforms-container input[type="submit"].wpforms-submit:hover {
	background-color: var(--fcg-color-primary) !important;
	transform: translateY(-2px);
}
.wpforms-container .wpforms-field-label,
.wpforms-container .wpforms-field-sublabel { color: var(--fcg-color-text) !important; }
.wpforms-container input[type="text"]:focus,
.wpforms-container input[type="email"]:focus,
.wpforms-container textarea:focus,
.wpforms-container select:focus { border-color: var(--fcg-color-accent) !important; }

/* ==========================================================================
   Garde-fou anti-debordement horizontal
   ========================================================================== */
/* overflow-x: clip (pas "hidden") — "hidden" sur un ancetre desactive
   position:sticky sur ses descendants (dont le header) dans tous les
   navigateurs ; "clip" bloque le debordement horizontal sans creer de
   contexte de defilement qui casse le sticky. */
html, body { max-width: 100%; overflow-x: clip; }

/* ==========================================================================
   Navigation mobile — bouton hamburger + panneau deroulant.
   Le menu principal compte une dizaine d'entrees avec sous-menus : au-dela
   de ~960px de largeur disponible il ne tient plus sur une seule ligne.
   ========================================================================== */

.fcg-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	flex-shrink: 0;
}
.fcg-nav-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: var(--fcg-color-primary);
	transition: transform var(--fcg-transition), opacity var(--fcg-transition);
}
.fcg-header.is-nav-open .fcg-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fcg-header.is-nav-open .fcg-nav-toggle span:nth-child(2) { opacity: 0; }
.fcg-header.is-nav-open .fcg-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Bouton "+" pour ouvrir un sous-menu au toucher (injecte en JS) */
.fcg-submenu-toggle {
	display: none;
	position: absolute;
	right: 0;
	top: 0;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	color: var(--fcg-color-primary);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}
.fcg-submenu-toggle::before { content: '+'; }
.menu-item-has-children.is-submenu-open > .fcg-submenu-toggle::before { content: '\2212'; }

@media (max-width: 960px) {
	.fcg-header__inner { flex-wrap: wrap; row-gap: 0; justify-content: flex-start; }
	.fcg-logo { order: 1; margin-right: auto; }
	.fcg-header .fcg-btn { order: 2; margin-right: var(--fcg-space-2); padding: 0.6rem 1.15rem; font-size: 0.85rem; }
	.fcg-nav-toggle { display: flex; order: 3; }

	.fcg-nav {
		order: 4;
		flex-basis: 100%;
		width: 100%;
		max-height: 0;
		overflow: hidden;
		transition: max-height var(--fcg-transition);
	}
	.fcg-header.is-nav-open .fcg-nav {
		max-height: 75vh;
		overflow-y: auto;
		border-top: 1px solid var(--fcg-color-border);
		margin-top: var(--fcg-space-2);
	}

	.fcg-nav > ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-block: var(--fcg-space-2) var(--fcg-space-3);
	}
	.fcg-nav li { position: relative; }
	.fcg-nav > ul > li > a { padding: 0.8rem 2.75rem 0.8rem 0.25rem; white-space: normal; }
	.fcg-nav > ul > li > a::after { display: none; }
	.fcg-nav .menu-item-has-children > a::before { display: none; }

	.fcg-submenu-toggle { display: flex; }

	.fcg-nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		background: var(--fcg-color-bg-alt);
		border-radius: 8px;
		min-width: 0;
		margin: 0 0 var(--fcg-space-1);
		padding: 0.25rem;
		display: none;
	}
	.menu-item-has-children.is-submenu-open > .sub-menu { display: block; }
	.fcg-nav .sub-menu a { padding: 0.65rem 0.75rem; }
}

@media (min-width: 961px) {
	/* Le JS peut avoir laisse la classe active si la fenetre est redimensionnee. */
	.fcg-nav { max-height: none !important; overflow: visible !important; }
}

/* Desktop etroit (961-1240px) : resserrer pour eviter le retour a la ligne. */
@media (min-width: 961px) and (max-width: 1240px) {
	.fcg-nav > ul { gap: 0.6rem; }
	.fcg-nav a { font-size: 0.83rem; }
	.fcg-nav .sub-menu { min-width: 200px; }
}

/* ==========================================================================
   Page Media — grille photo (style Instagram) + grille video
   ========================================================================== */

/* Le fond blanc + gap 2px simule une bordure blanche de 2px entre chaque
   vignette, sans avoir a gerer des bordures individuelles qui doublent
   aux jonctions. */
.fcg-photo-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2px;
	background: #fff;
}
.fcg-photo-grid__item {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.fcg-photo-grid__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.fcg-photo-grid__item:hover img { transform: scale(1.06); }
.fcg-photo-grid__item::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(122, 30, 43, 0);
	transition: background var(--fcg-transition);
}
.fcg-photo-grid__item:hover::after { background: rgba(122, 30, 43, 0.15); }

@media (max-width: 860px) {
	.fcg-photo-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
	.fcg-photo-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Cartes video — pas de lien englobant : le clic sur le bouton play/pause
   bascule un etat "en lecture" sans quitter la page ; seul le titre reste
   un lien classique vers la fiche complete. */
.fcg-video-card { overflow: hidden; }
.fcg-video-card__thumb { position: relative; }
.fcg-video-card__thumb img { display: block; }
.fcg-video-card .fcg-card__body { padding: var(--fcg-space-2); }
.fcg-video-card .fcg-card__body h3 a { color: var(--fcg-color-text); }
.fcg-video-card .fcg-card__body h3 a:hover { color: var(--fcg-color-primary); }

.fcg-video-card__play {
	position: absolute;
	inset: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	padding: 0;
	cursor: pointer;
}
.fcg-video-card__play::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(15, 6, 8, 0.25);
	transition: background var(--fcg-transition);
}
.fcg-video-card__play svg {
	position: relative;
	width: 22px;
	height: 22px;
	color: var(--fcg-color-primary);
	background: #fff;
	border-radius: 50%;
	padding: 16px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	transition: transform var(--fcg-transition), background var(--fcg-transition), color var(--fcg-transition);
}
.fcg-video-card__play .fcg-icon-pause { display: none; }
.fcg-video-card:hover .fcg-video-card__play::before { background: rgba(15, 6, 8, 0.4); }
.fcg-video-card:hover .fcg-video-card__play svg {
	transform: scale(1.1);
	background: var(--fcg-color-accent);
	color: #fff;
}
.fcg-video-card.is-playing .fcg-video-card__play svg {
	background: var(--fcg-color-accent);
	color: #fff;
}
.fcg-video-card.is-playing .fcg-video-card__play .fcg-icon-play { display: none; }
.fcg-video-card.is-playing .fcg-video-card__play .fcg-icon-pause { display: block; }

.fcg-video-card__embed {
	position: absolute;
	inset: 0;
	background: #000;
}
.fcg-video-card__embed iframe {
	width: 100%;
	height: 100%;
	border: none;
}
.fcg-video-card__embed .fcg-video-card__empty {
	height: 100%;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.85rem;
	text-align: center;
	padding: 1rem;
}

/* Pagination numerotee (grille photo / grille video) */
.fcg-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.4rem;
	margin-top: var(--fcg-space-4);
	flex-wrap: wrap;
}
.fcg-pagination__num,
.fcg-pagination__nav {
	min-width: 38px;
	height: 38px;
	padding: 0 0.5rem;
	border-radius: 8px;
	border: 1px solid var(--fcg-color-border);
	background: #fff;
	color: var(--fcg-color-text);
	font-family: var(--fcg-font-body);
	font-weight: 600;
	cursor: pointer;
	transition: background var(--fcg-transition), color var(--fcg-transition), border-color var(--fcg-transition);
}
.fcg-pagination__num:hover,
.fcg-pagination__nav:hover:not(:disabled) { border-color: var(--fcg-color-accent); color: var(--fcg-color-primary); }
.fcg-pagination__num.is-active {
	background: var(--fcg-color-primary);
	border-color: var(--fcg-color-primary);
	color: #fff;
}
.fcg-pagination__nav:disabled { opacity: 0.35; cursor: default; }