/*
Theme Name: EPC Notre Dame des Apôtres
Theme URI: https://epc-nda-ouidah.bj
Description: Site officiel de l'École Primaire Catholique Notre-Dame des Apôtres de Ouidah, Bénin. Devise : Discipline · Piété · Travail.
Author: EPC NDA-O
Author URI:
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: epc-nda
Tags: education, school, custom, acf, fr
*/

/* =============================================================================
   EPC Notre Dame des Apôtres — Theme Stylesheet
   Brand: Discipline · Piété · Travail
   ============================================================================= */

:root {
	--epc-primary: #1a2b5c;
	--epc-primary-dark: #11204a;
	--epc-primary-light: #2c4180;
	--epc-accent: #d4a537;
	--epc-accent-dark: #b58a26;
	--epc-text: #1f2937;
	--epc-text-muted: #6b7280;
	--epc-bg: #ffffff;
	--epc-bg-alt: #f7f8fb;
	--epc-bg-dark: #0f1d44;
	--epc-border: #e5e7eb;
	--epc-success: #15803d;
	--epc-danger: #b91c1c;
	--epc-radius: 0.75rem;
	--epc-radius-sm: 0.5rem;
	--epc-radius-lg: 1.25rem;
	--epc-shadow-sm: 0 1px 2px rgba(15, 29, 68, 0.06), 0 1px 3px rgba(15, 29, 68, 0.08);
	--epc-shadow: 0 6px 18px rgba(15, 29, 68, 0.08);
	--epc-shadow-lg: 0 20px 40px rgba(15, 29, 68, 0.12);
	--epc-transition: 0.2s ease;
	--epc-header-height: 80px;
	--epc-container-max: 1240px;
}

/* -----------------------------------------------------------------------------
   Base
   ----------------------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--epc-text);
	background: var(--epc-bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	color: var(--epc-primary);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

a {
	color: var(--epc-primary);
	text-decoration: none;
	transition: color var(--epc-transition);
}

a:hover,
a:focus-visible {
	color: var(--epc-accent);
}

img {
	max-width: 100%;
	height: auto;
}

.container {
	max-width: var(--epc-container-max);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

@media (min-width: 1200px) {
	.container { padding-inline: 2rem; }
}

/* Bootstrap button override to match brand */
.btn {
	border-radius: 999px;
	padding: 0.625rem 1.5rem;
	font-weight: 600;
	transition: all var(--epc-transition);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.btn-primary {
	background: var(--epc-primary);
	border-color: var(--epc-primary);
	color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
	background: var(--epc-primary-dark);
	border-color: var(--epc-primary-dark);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--epc-shadow);
}

.btn-accent {
	background: var(--epc-accent);
	border-color: var(--epc-accent);
	color: #fff;
}

.btn-accent:hover,
.btn-accent:focus {
	background: var(--epc-accent-dark);
	border-color: var(--epc-accent-dark);
	color: #fff;
}

.btn-outline-primary {
	border-color: var(--epc-primary);
	color: var(--epc-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
	background: var(--epc-primary);
	color: #fff;
}

/* -----------------------------------------------------------------------------
   Skip link (a11y)
   ----------------------------------------------------------------------------- */
.epc-skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 9999;
	padding: 0.75rem 1.25rem;
	background: var(--epc-primary);
	color: #fff;
	border-radius: 0 0 var(--epc-radius-sm) 0;
	font-weight: 600;
	transition: top var(--epc-transition);
}

.epc-skip-link:focus,
.epc-skip-link:focus-visible {
	top: 0;
	color: #fff;
	outline: 2px solid var(--epc-accent);
	outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   Announcement bar
   ----------------------------------------------------------------------------- */
.epc-announcement {
	padding: 0.625rem 0;
	font-size: 0.875rem;
	position: relative;
	z-index: 50;
}

.epc-announcement__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	text-align: center;
	/* Réserve symétrique pour le bouton close en absolute → centrage visuel exact */
	padding-right: 2.5rem;
	padding-left: 2.5rem;
}

.epc-announcement__text {
	margin: 0;
	font-weight: 500;
	flex: 0 1 auto;
	min-width: 0;
}

.epc-announcement__link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 600;
	white-space: nowrap;
}

.epc-announcement__link:hover,
.epc-announcement__link:focus-visible {
	color: inherit;
	opacity: 0.85;
}

.epc-announcement__close {
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	font-size: 1.5rem;
	line-height: 1;
	padding: 0.25rem 0.5rem;
	opacity: 0.75;
	transition: opacity var(--epc-transition);
}

.epc-announcement__close:hover,
.epc-announcement__close:focus-visible { opacity: 1; }

@media (max-width: 575px) {
	.epc-announcement__inner {
		padding-right: 2rem;
		padding-left: 1rem;
		font-size: 0.8125rem;
	}
}

/* -----------------------------------------------------------------------------
   Header
   ----------------------------------------------------------------------------- */
.epc-header {
	background: #fff;
	border-bottom: 1px solid var(--epc-border);
	position: sticky;
	top: 0;
	z-index: 40;
	box-shadow: var(--epc-shadow-sm);
}

.epc-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: var(--epc-header-height);
	padding-block: 0.75rem;
}

/* Brand --------------------------------------------------------------------- */
.epc-header__brand { flex-shrink: 0; }

.epc-header__logo-link {
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	text-decoration: none;
}

.epc-header__logo {
	width: 72px;
	height: 72px;
	object-fit: contain;
	border-radius: var(--epc-radius-sm);
}

.epc-header__brand-text {
	display: inline-flex;
	flex-direction: column;
	gap: 0.125rem;
	color: var(--epc-primary);
	max-width: 320px;
	line-height: 1.15;
}

.epc-header__brand-line {
	display: block;
	text-transform: uppercase;
	font-weight: 700;
}

.epc-header__brand-line--top {
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.04em;
}

.epc-header__brand-line--bottom {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--epc-primary);
	opacity: 0.95;
}

@media (max-width: 991px) {
	.epc-header__brand-text { display: none; }
}

@media (max-width: 767px) {
	.epc-header__logo { width: 60px; height: 60px; }
}

/* Nav (desktop) ------------------------------------------------------------- */
.epc-header__nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.epc-header__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.epc-header__menu li { position: relative; }

.epc-header__menu a {
	display: inline-block;
	padding: 0.5rem 0.75rem;
	color: var(--epc-text);
	font-weight: 500;
	font-size: 1rem;
	border-radius: var(--epc-radius-sm);
	transition: all var(--epc-transition);
}

.epc-header__menu a:hover,
.epc-header__menu a:focus-visible,
.epc-header__menu .current-menu-item > a,
.epc-header__menu .current_page_item > a {
	color: var(--epc-primary);
	background: var(--epc-bg-alt);
}

/* Sub-menu */
.epc-header__menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0.5rem;
	background: #fff;
	border: 1px solid var(--epc-border);
	border-radius: var(--epc-radius);
	box-shadow: var(--epc-shadow);
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: all var(--epc-transition);
	z-index: 30;
}

.epc-header__menu li:hover > .sub-menu,
.epc-header__menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.epc-header__menu .sub-menu a {
	display: block;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
}

/* Actions ------------------------------------------------------------------- */
.epc-header__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
}

.epc-header__action-link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--epc-text);
	font-weight: 500;
	font-size: 0.875rem;
}

.epc-header__action-link:hover,
.epc-header__action-link:focus-visible {
	color: var(--epc-primary);
}

.epc-header__action-cta {
	white-space: nowrap;
}

.epc-header__action-cta .dashicons {
	font-size: 1rem;
	width: 1rem;
	height: 1rem;
}

/* Burger -------------------------------------------------------------------- */
.epc-header__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--epc-border);
	border-radius: var(--epc-radius-sm);
	cursor: pointer;
	transition: all var(--epc-transition);
}

.epc-header__burger span {
	display: block;
	width: 22px;
	height: 2px;
	margin: 0 auto;
	background: var(--epc-primary);
	border-radius: 2px;
	transition: transform var(--epc-transition), opacity var(--epc-transition);
}

.epc-header__burger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.epc-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }

.epc-header__burger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Mobile breakpoint --------------------------------------------------------- */
@media (max-width: 991px) {
	.epc-header__burger {
		display: flex;
		position: relative;
		/* Forcé au-dessus du .epc-header__nav (z-index:35) à l'intérieur du
		   stacking context du header — sinon le panneau ouvert recouvre le X. */
		z-index: 50;
	}

	/* Le bloc des actions reste lui aussi au-dessus du nav, pour que le X
	   ne soit jamais visuellement chevauché par le panneau du menu. */
	.epc-header__actions {
		position: relative;
		z-index: 50;
	}

	.epc-header__nav {
		position: fixed;
		inset: var(--epc-header-height) 0 0 0;
		background: #fff;
		flex-direction: column;
		justify-content: flex-start;
		padding: 1.5rem 1.25rem 2rem;
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform 0.3s ease;
		z-index: 35;
	}

	.epc-header__nav.is-open { transform: translateX(0); }

	.epc-header__menu {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 0.25rem;
	}

	.epc-header__menu a {
		display: block;
		padding: 0.875rem 1rem;
		font-size: 1rem;
		border-bottom: 1px solid var(--epc-border);
		border-radius: 0;
	}

	.epc-header__menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding-left: 1rem;
		background: var(--epc-bg-alt);
		border-radius: 0;
	}

	.epc-header__action-link { display: none; }

	/* Quand le menu mobile est ouvert, on masque le CTA pour aérer la zone
	   du burger/close et éviter qu'il chevauche visuellement le bouton. */
	body.menu-open .epc-header__action-cta { display: none !important; }
}

@media (max-width: 575px) {
	.epc-header__action-cta {
		padding: 0.5rem 0.875rem;
		font-size: 0.8125rem;
	}

	.epc-header__inner { gap: 0.75rem; }
}

/* -----------------------------------------------------------------------------
   Site content
   ----------------------------------------------------------------------------- */
.site-main { min-height: 50vh; }

/* -----------------------------------------------------------------------------
   Footer
   ----------------------------------------------------------------------------- */
.epc-footer {
	background: var(--epc-bg-dark);
	color: #cbd2e3;
	padding: 4rem 0 1.5rem;
	margin-top: 4rem;
}

.epc-footer h3,
.epc-footer .h3 { color: #fff; }

.epc-footer a {
	color: #cbd2e3;
}

.epc-footer a:hover,
.epc-footer a:focus-visible {
	color: var(--epc-accent);
}

.epc-footer__logo-link img {
	border-radius: var(--epc-radius-sm);
	background: #fff;
	padding: 6px;
}

.epc-footer__about-text {
	margin: 1rem 0;
	font-size: 0.9375rem;
	color: #aeb6cc;
	line-height: 1.7;
}

.epc-footer__social {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: flex;
	gap: 0.625rem;
}

.epc-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	transition: all var(--epc-transition);
}

.epc-footer__social a:hover,
.epc-footer__social a:focus-visible {
	background: var(--epc-accent);
	color: #fff;
	transform: translateY(-2px);
}

.epc-footer__social .dashicons {
	font-size: 1.125rem;
	width: 1.125rem;
	height: 1.125rem;
}

.epc-footer__column-title {
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 1.25rem;
	color: #fff;
}

.epc-footer__menu,
.epc-footer__contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	font-size: 0.9375rem;
}

.epc-footer__contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	color: #aeb6cc;
}

.epc-footer__contact-list .dashicons {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--epc-accent);
	font-size: 1.125rem;
	width: 1.125rem;
	height: 1.125rem;
}

.epc-footer__bottom {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: 0.875rem;
	text-align: center;
}

.epc-footer__copyright {
	margin: 0;
	color: #8c95b3;
	width: 100%;
	text-align: center;
}

.epc-footer__legal-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1.5rem;
}

.epc-footer__legal-text {
	margin-top: 1rem;
	font-size: 0.8125rem;
	color: #8c95b3;
}

@media (max-width: 767px) {
	.epc-footer { padding-top: 3rem; }
	.epc-footer__bottom {
		flex-direction: column;
		align-items: center;
	}
}

/* -----------------------------------------------------------------------------
   Floating WhatsApp
   ----------------------------------------------------------------------------- */
.epc-floating-whatsapp {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
	z-index: 60;
	transition: transform var(--epc-transition);
}

.epc-floating-whatsapp:hover,
.epc-floating-whatsapp:focus-visible {
	transform: translateY(-3px) scale(1.05);
	color: #fff;
}

.epc-floating-whatsapp__icon {
	width: 28px;
	height: 28px;
	display: block;
}

/* Empêche le FAB de masquer la fin du contenu : safe-zone en bas de page. */
.epc-footer {
	padding-bottom: calc(1rem + 76px); /* footer baseline + FAB clearance (56px + 20px) */
}

@media (min-width: 768px) {
	.epc-footer {
		padding-bottom: 1rem; /* desktop : le FAB ne masque rien de critique au bottom */
	}
}

/* -----------------------------------------------------------------------------
   Generic section helpers
   ----------------------------------------------------------------------------- */
.epc-section { padding-block: 4rem; }
.epc-section--alt { background: var(--epc-bg-alt); }
.epc-section--dark { background: var(--epc-bg-dark); color: #cbd2e3; }
.epc-section--dark h1,
.epc-section--dark h2,
.epc-section--dark h3 { color: #fff; }

.epc-section__title {
	font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
	margin-bottom: 0.75rem;
}

.epc-section__subtitle {
	color: var(--epc-text-muted);
	font-size: 1.0625rem;
	margin-bottom: 2.5rem;
}

.epc-eyebrow {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--epc-accent);
	margin-bottom: 0.75rem;
}

/* -----------------------------------------------------------------------------
   Block spacing — espacement vertical entre les blocks (sauf hero, qui ouvre la page)
   ----------------------------------------------------------------------------- */
section[class*="-block"]:not(.hero-block) {
	margin-top: 90px;
}

@media (max-width: 767.98px) {
	section[class*="-block"]:not(.hero-block) {
		margin-top: 60px;
	}
}

/* -----------------------------------------------------------------------------
   Hero block
   ----------------------------------------------------------------------------- */
.epc-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, var(--epc-primary) 0%, var(--epc-primary-light) 100%);
	color: #fff;
	padding-block: clamp(3rem, 4vw, 6rem);
}

.epc-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 80% 20%, rgba(212, 165, 55, 0.15) 0%, transparent 50%);
	pointer-events: none;
}

.epc-hero__inner { position: relative; z-index: 1; }

.epc-hero h1,
.epc-hero__title { color: #fff; font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }

.epc-hero p,
.epc-hero__subtitle {
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.125rem;
}

.epc-hero__cta {
	display: inline-flex;
	gap: 0.75rem;
	margin-top: 1.5rem;
	flex-wrap: wrap;
}

/* -----------------------------------------------------------------------------
   Cards (generic + block-specific)
   ----------------------------------------------------------------------------- */
.epc-card {
	background: #fff;
	border-radius: var(--epc-radius);
	box-shadow: var(--epc-shadow-sm);
	overflow: hidden;
	transition: transform var(--epc-transition), box-shadow var(--epc-transition);
	height: 100%;
}

.epc-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--epc-shadow);
}

.epc-card__body { padding: 1.25rem; }

.epc-card__title {
	font-size: 1.0625rem;
	margin-bottom: 0.5rem;
}

/* -----------------------------------------------------------------------------
   Values block
   ----------------------------------------------------------------------------- */
.epc-values__item {
	background: #fff;
	padding: 2rem 1.5rem;
	border-radius: var(--epc-radius);
	box-shadow: var(--epc-shadow-sm);
	transition: all var(--epc-transition);
	height: 100%;
	text-align: center;
}

.epc-values__item:hover { transform: translateY(-4px); box-shadow: var(--epc-shadow); }

.epc-values__icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(26, 43, 92, 0.08);
	color: var(--epc-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
}

.epc-values__icon .dashicons { font-size: 1.75rem; width: 1.75rem; height: 1.75rem; }

/* -----------------------------------------------------------------------------
   Stats block
   ----------------------------------------------------------------------------- */
.epc-stats { background: var(--epc-bg-dark); color: #fff; }
.epc-stats__number {
	font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
	font-weight: 800;
	color: var(--epc-accent);
	line-height: 1;
}
.epc-stats__label {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.7);
	margin-top: 0.5rem;
}

/* -----------------------------------------------------------------------------
   CTA band
   ----------------------------------------------------------------------------- */
.epc-cta-band {
	background: linear-gradient(135deg, var(--epc-primary), var(--epc-primary-dark));
	color: #fff;
	padding: 3rem 0;
	text-align: center;
}

.epc-cta-band h2,
.epc-cta-band__title { color: #fff; }

.epc-cta-band p { color: rgba(255, 255, 255, 0.85); }

/* -----------------------------------------------------------------------------
   FAQ block
   ----------------------------------------------------------------------------- */
.epc-faq__item {
	background: #fff;
	border: 1px solid var(--epc-border);
	border-radius: var(--epc-radius-sm);
	margin-bottom: 0.75rem;
	overflow: hidden;
}

.epc-faq__question {
	width: 100%;
	background: transparent;
	border: 0;
	padding: 1rem 1.25rem;
	font-weight: 600;
	color: var(--epc-primary);
	text-align: left;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	cursor: pointer;
}

.epc-faq__answer {
	padding: 0 1.25rem 1rem;
	color: var(--epc-text);
}

/* -----------------------------------------------------------------------------
   Testimonials block
   ----------------------------------------------------------------------------- */
.epc-testimonials__item {
	background: #fff;
	padding: 1.75rem;
	border-radius: var(--epc-radius);
	box-shadow: var(--epc-shadow-sm);
	height: 100%;
}

.epc-testimonials__quote {
	font-style: italic;
	color: var(--epc-text);
	margin-bottom: 1.25rem;
	line-height: 1.6;
}

.epc-testimonials__author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.epc-testimonials__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}

.epc-testimonials__name { font-weight: 600; color: var(--epc-primary); }
.epc-testimonials__role { font-size: 0.8125rem; color: var(--epc-text-muted); }

/* -----------------------------------------------------------------------------
   News grid + cards
   ----------------------------------------------------------------------------- */
.epc-news-grid__card { height: 100%; }
.epc-news-grid__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16/10;
	background: var(--epc-bg-alt);
}

.epc-news-grid__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.epc-news-grid__card:hover .epc-news-grid__media img { transform: scale(1.05); }

.epc-news-grid__meta {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--epc-text-muted);
	margin-bottom: 0.5rem;
}

/* -----------------------------------------------------------------------------
   Donation form
   Styles principaux dans templates/blocks/donation-form/donation-form.css.
   Le wrapper .donation-form-block doit prendre toute la largeur disponible
   pour permettre au layout 2 colonnes (col-lg-5 + col-lg-7) de respirer.
   ----------------------------------------------------------------------------- */

.epc-donation-form__notice {
	margin-bottom: 1.5rem;
	border-radius: var(--epc-radius-sm);
}

.epc-donation-form__amount-card,
.epc-donation-form__payment-card {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	border: 2px solid var(--epc-border);
	border-radius: var(--epc-radius-sm);
	cursor: pointer;
	font-weight: 600;
	transition: all var(--epc-transition);
	background: #fff;
}

.epc-donation-form__amount-card.is-active,
.epc-donation-form__amount-card:hover,
.epc-donation-form__payment-card.is-active,
.epc-donation-form__payment-card:hover {
	border-color: var(--epc-primary);
	color: var(--epc-primary);
	background: rgba(26, 43, 92, 0.04);
}

/* -----------------------------------------------------------------------------
   Contact
   ----------------------------------------------------------------------------- */
.epc-contact-form .form-control,
.epc-contact-form .form-select {
	border-radius: var(--epc-radius-sm);
	padding: 0.625rem 0.875rem;
}

.epc-contact-info__item {
	display: flex;
	gap: 1rem;
	padding: 1.25rem;
	background: #fff;
	border-radius: var(--epc-radius-sm);
	box-shadow: var(--epc-shadow-sm);
	margin-bottom: 1rem;
}

.epc-contact-info__icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(26, 43, 92, 0.08);
	color: var(--epc-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
   Inscription steps
   ----------------------------------------------------------------------------- */
.epc-inscription-steps__step {
	background: #fff;
	padding: 1.75rem 1.5rem;
	border-radius: var(--epc-radius);
	box-shadow: var(--epc-shadow-sm);
	height: 100%;
	position: relative;
}

.epc-inscription-steps__number {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--epc-primary);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	margin-bottom: 1rem;
}

/* -----------------------------------------------------------------------------
   Media grid
   ----------------------------------------------------------------------------- */
.epc-media-grid__item {
	display: block;
	overflow: hidden;
	border-radius: var(--epc-radius-sm);
	aspect-ratio: 4/3;
	background: var(--epc-bg-alt);
}

.epc-media-grid__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.epc-media-grid__item:hover img { transform: scale(1.06); }

/* -----------------------------------------------------------------------------
   Text + Image block
   ----------------------------------------------------------------------------- */
.epc-text-image__media img {
	border-radius: var(--epc-radius);
	box-shadow: var(--epc-shadow);
}

/* -----------------------------------------------------------------------------
   Animations (subtle)
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	[data-epc-fade-in] {
		opacity: 0;
		transform: translateY(20px);
		transition: opacity 0.6s ease, transform 0.6s ease;
	}
	[data-epc-fade-in].is-visible {
		opacity: 1;
		transform: translateY(0);
	}
}

/* -----------------------------------------------------------------------------
   Contact page (templates/pages/contact.php) — 2-col layout
   ----------------------------------------------------------------------------- */
.epc-contact-page {
	padding-block: clamp(2.5rem, 4vw, 4.5rem);
	background:
		radial-gradient(circle at 0% 0%, rgba(212, 165, 55, 0.06) 0%, transparent 40%),
		var(--epc-bg);
}

.epc-contact-page__header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 3rem;
}

.epc-contact-page__title {
	font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
	margin: 0.5rem 0 1rem;
}

.epc-contact-page__intro {
	font-size: 1.0625rem;
	color: var(--epc-text-muted);
	line-height: 1.65;
}

.epc-contact-page__grid { align-items: stretch; }

/* ── Left column : info card + map ─────────────────────────────────────────── */
.epc-contact-page__info {
	background: #fff;
	padding: 2rem;
	border-radius: var(--epc-radius);
	box-shadow: var(--epc-shadow-sm);
	margin-bottom: 1.5rem;
}

.epc-contact-page__info-title {
	font-size: 1.25rem;
	margin: 0 0 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--epc-accent);
	display: inline-block;
}

.epc-contact-page__info .epc-contact-info__item {
	display: flex;
	gap: 1rem;
	padding: 0.75rem 0;
	margin-bottom: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	border-bottom: 1px solid var(--epc-border);
}

.epc-contact-page__info .epc-contact-info__item:last-of-type {
	border-bottom: 0;
}

.epc-contact-page__info .epc-contact-info__icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(26, 43, 92, 0.08);
	color: var(--epc-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.125rem;
}

.epc-contact-page__info .epc-contact-info__item-title {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--epc-text-muted);
	margin: 0 0 0.25rem;
}

.epc-contact-page__info .epc-contact-info__item-value,
.epc-contact-page__info .epc-contact-info__list {
	font-size: 0.9375rem;
	color: var(--epc-text);
	margin: 0;
	padding: 0;
	list-style: none;
}

.epc-contact-page__info .epc-contact-info__list li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	padding: 0.125rem 0;
}

.epc-contact-page__info .epc-contact-info__list-label {
	color: var(--epc-text-muted);
	font-weight: 500;
}

.epc-contact-page__info .epc-contact-info__list a {
	color: var(--epc-primary);
	font-weight: 600;
}

.epc-contact-page__info .epc-contact-info__list a:hover,
.epc-contact-page__info .epc-contact-info__list a:focus-visible {
	color: var(--epc-accent);
	text-decoration: underline;
}

.epc-contact-page__whatsapp {
	margin-top: 1.25rem;
	width: 100%;
	justify-content: center;
	background: #25d366;
	border-color: #25d366;
	color: #fff;
}

.epc-contact-page__whatsapp:hover,
.epc-contact-page__whatsapp:focus-visible {
	background: #1ebe5d;
	border-color: #1ebe5d;
	color: #fff;
}

.epc-contact-page__map {
	border-radius: var(--epc-radius);
	overflow: hidden;
	box-shadow: var(--epc-shadow-sm);
	background: var(--epc-bg-alt);
}

.epc-contact-page__map iframe {
	display: block;
	width: 100%;
	height: 320px;
	border: 0;
}

.epc-contact-page__map-placeholder {
	padding: 2.5rem 1.5rem;
	text-align: center;
	color: var(--epc-text-muted);
	background: var(--epc-bg-alt);
}

.epc-contact-page__map-placeholder .dashicons {
	font-size: 2rem;
	width: 2rem;
	height: 2rem;
	color: var(--epc-primary);
	opacity: 0.4;
	margin-bottom: 0.5rem;
}

/* ── Right column : form ───────────────────────────────────────────────────── */
.epc-contact-page__form-wrapper {
	background: #fff;
	padding: clamp(1.5rem, 2.5vw, 2.5rem);
	border-radius: var(--epc-radius);
	box-shadow: var(--epc-shadow);
	height: 100%;
}

.epc-contact-page__form-title {
	font-size: 1.5rem;
	margin: 0 0 0.5rem;
}

.epc-contact-page__form-intro {
	color: var(--epc-text-muted);
	font-size: 0.9375rem;
	margin-bottom: 1.75rem;
}

.epc-contact-page__form-wrapper .form-label {
	font-weight: 600;
	color: var(--epc-text);
	font-size: 0.875rem;
	margin-bottom: 0.375rem;
}

.epc-contact-page__form-wrapper .form-control,
.epc-contact-page__form-wrapper .form-select {
	border-radius: var(--epc-radius-sm);
	border-color: var(--epc-border);
	padding: 0.625rem 0.875rem;
	font-size: 0.9375rem;
	background: var(--epc-bg-alt);
	transition: all var(--epc-transition);
}

.epc-contact-page__form-wrapper .form-control:focus,
.epc-contact-page__form-wrapper .form-select:focus {
	background: #fff;
	border-color: var(--epc-primary);
	box-shadow: 0 0 0 3px rgba(26, 43, 92, 0.12);
}

.epc-contact-page__form-wrapper textarea.form-control {
	resize: vertical;
	min-height: 140px;
}

.epc-contact-page__form-wrapper .form-check-input {
	margin-top: 0.3rem;
}

.epc-contact-page__form-wrapper .form-check-input:checked {
	background-color: var(--epc-primary);
	border-color: var(--epc-primary);
}

.epc-contact-page__form-wrapper .btn-primary .dashicons {
	font-size: 1rem;
	width: 1rem;
	height: 1rem;
}

/* Honeypot — visually hidden but accessible to bots */
.epc-contact-form__honeypot {
	position: absolute !important;
	left: -10000px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 991px) {
	.epc-contact-page__form-wrapper { height: auto; }
}

/* -----------------------------------------------------------------------------
   404 — Page not found
   ----------------------------------------------------------------------------- */
.epc-error-404 {
	position: relative;
	overflow: hidden;
	padding: 5rem 0 6rem;
	background:
		radial-gradient(circle at 15% 20%, rgba(212, 165, 55, 0.10) 0%, transparent 45%),
		radial-gradient(circle at 85% 80%, rgba(26, 43, 92, 0.08) 0%, transparent 50%),
		var(--epc-bg-alt);
	min-height: 70vh;
	display: flex;
	align-items: center;
}

.epc-error-404::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(26, 43, 92, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(26, 43, 92, 0.04) 1px, transparent 1px);
	background-size: 32px 32px;
	mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
	pointer-events: none;
}

.epc-error-404__container {
	position: relative;
	z-index: 1;
	max-width: 760px;
	text-align: center;
}

/* Visual --------------------------------------------------------------------- */
.epc-error-404__visual {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.25rem, 1vw, 1rem);
	margin-bottom: 2rem;
	line-height: 1;
}

.epc-error-404__digit {
	font-size: clamp(5rem, 16vw, 10rem);
	font-weight: 800;
	color: var(--epc-primary);
	letter-spacing: -0.04em;
	line-height: 1;
	display: inline-block;
	animation: epc-404-bounce 2.4s ease-in-out infinite;
}

.epc-error-404__digit--4:nth-of-type(1) { animation-delay: 0s; }
.epc-error-404__digit--0 {
	color: var(--epc-accent);
	animation-delay: 0.2s;
}
.epc-error-404__digit--4:nth-of-type(3) { animation-delay: 0.4s; }

.epc-error-404__digit--0 svg {
	width: clamp(4rem, 14vw, 9rem);
	height: clamp(4rem, 14vw, 9rem);
	display: block;
}

@keyframes epc-404-bounce {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-12px); }
}

@media (prefers-reduced-motion: reduce) {
	.epc-error-404__digit { animation: none; }
}

/* Header --------------------------------------------------------------------- */
.epc-error-404__header { margin-bottom: 2rem; }

.epc-error-404__title {
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
	margin: 0.5rem 0 1rem;
	color: var(--epc-primary);
}

.epc-error-404__text {
	color: var(--epc-text-muted);
	font-size: 1.0625rem;
	max-width: 540px;
	margin: 0 auto;
	line-height: 1.65;
}

/* Actions -------------------------------------------------------------------- */
.epc-error-404__actions {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 2.5rem;
}

.epc-error-404__actions .btn .dashicons {
	font-size: 1rem;
	width: 1rem;
	height: 1rem;
}

/* Search --------------------------------------------------------------------- */
.epc-error-404__search {
	background: #fff;
	padding: 1.5rem;
	border-radius: var(--epc-radius);
	box-shadow: var(--epc-shadow-sm);
	margin-bottom: 2rem;
}

.epc-error-404__search-label {
	font-size: 0.875rem;
	color: var(--epc-text-muted);
	margin: 0 0 0.75rem;
	font-weight: 500;
}

.epc-error-404__search form,
.epc-error-404__search .search-form {
	display: flex;
	gap: 0.5rem;
	max-width: 480px;
	margin: 0 auto;
}

.epc-error-404__search input[type="search"],
.epc-error-404__search .search-field {
	flex: 1;
	padding: 0.625rem 1rem;
	border: 1px solid var(--epc-border);
	border-radius: 999px;
	font-size: 0.9375rem;
	background: var(--epc-bg-alt);
	transition: all var(--epc-transition);
}

.epc-error-404__search input[type="search"]:focus,
.epc-error-404__search .search-field:focus {
	outline: none;
	border-color: var(--epc-primary);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(26, 43, 92, 0.12);
}

.epc-error-404__search input[type="submit"],
.epc-error-404__search .search-submit {
	background: var(--epc-primary);
	color: #fff;
	border: 0;
	padding: 0.625rem 1.25rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.9375rem;
	cursor: pointer;
	transition: background var(--epc-transition);
	white-space: nowrap;
}

.epc-error-404__search input[type="submit"]:hover,
.epc-error-404__search .search-submit:hover {
	background: var(--epc-primary-dark);
}

/* Quick links ---------------------------------------------------------------- */
.epc-error-404__links {
	border-top: 1px solid var(--epc-border);
	padding-top: 1.75rem;
}

.epc-error-404__links-title {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--epc-text-muted);
	margin: 0 0 1rem;
}

.epc-error-404__links-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.epc-error-404__links-list a {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.5rem 1rem;
	background: #fff;
	border: 1px solid var(--epc-border);
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--epc-text);
	transition: all var(--epc-transition);
}

.epc-error-404__links-list a:hover,
.epc-error-404__links-list a:focus-visible {
	background: var(--epc-primary);
	color: #fff;
	border-color: var(--epc-primary);
	transform: translateY(-2px);
	box-shadow: var(--epc-shadow-sm);
}

.epc-error-404__links-list .dashicons {
	font-size: 0.875rem;
	width: 0.875rem;
	height: 0.875rem;
	opacity: 0.6;
}

@media (max-width: 575px) {
	.epc-error-404 { padding: 3rem 0 4rem; }
	.epc-error-404__search form { flex-direction: column; }
}

/* -----------------------------------------------------------------------------
   Utility
   ----------------------------------------------------------------------------- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

body.menu-open { overflow: hidden; }

/* =========================================================================
   Breadcrumb (fil d'Ariane)
   ========================================================================= */
.epc-breadcrumb {
	background-color: var(--epc-bg-soft, #eef2f8);
	border-bottom: 1px solid var(--epc-border, #e5e7eb);
	padding: 0.75rem 0;
	font-size: 0.875rem;
}

.epc-breadcrumb__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

.epc-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	color: var(--epc-text-muted, #6c757d);
}

.epc-breadcrumb__item:not(:last-child)::after {
	content: "›";
	margin-left: 0.4rem;
	color: var(--epc-text-muted, #6c757d);
	font-weight: 600;
}

.epc-breadcrumb__link {
	color: var(--epc-text-muted, #6c757d);
	text-decoration: none;
	transition: color var(--epc-transition);
}

.epc-breadcrumb__link:hover,
.epc-breadcrumb__link:focus-visible {
	color: var(--epc-primary);
	text-decoration: underline;
}

.epc-breadcrumb__item--current .epc-breadcrumb__current {
	color: var(--epc-text, #1f2937);
	font-weight: 600;
}