/*
 * CSS des pages membres, reconstruites depuis les exports Elementor :
 * "les membres export json" (elementor-7137, page membres.php),
 * "Membre actifs export json" (elementor-7140, page membres-actifs.php).
 * Les widgets dynamiques de galerie/carousel membres (bdt-post-gallery,
 * bdt-carousel, bdt-post-list) ne sont pas capturés dans l'export (pas de
 * HTML rendu) : remplacés par une vraie lecture de data/membres.json via
 * jade_get_membres(), avec le même composant de carte partout sur le site.
 * Réutilisé aussi par membre.php (fiche individuelle) et les pages
 * membres-dhonneurs.php / anciens-membres-actifs.php / membres-filleuls.php.
 */

.membres-section {
	padding: 56px 0;
	scroll-margin-top: 100px;
}

.membres-section--honneur {
	padding-top: 106px;
	padding-bottom: 106px;
}

.membres-section--actifs {
	padding-top: 96px;
	padding-bottom: 96px;
}

.membres-intro {
	max-width: 700px;
	margin: 0 auto 40px;
	text-align: center;
	color: #333;
	line-height: 1.7;
}

/* ---------- Grille de cartes membres ---------- */

.membres-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 24px;
}

.membres-grid--compact {
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 18px;
}

.membres-grid--single-row {
	grid-template-columns: repeat(7, 1fr);
	gap: 16px;
}

@media (max-width: 900px) {
	.membres-grid--single-row {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 520px) {
	.membres-grid--single-row {
		grid-template-columns: repeat(2, 1fr);
	}
}

.membre-card {
	display: block;
	text-align: center;
	text-decoration: none;
	color: inherit;
}

.membre-card-photo {
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--jade-background, #F2F1EE);
	margin: 0 auto 12px;
	max-width: 190px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.membres-grid--compact .membre-card-photo {
	max-width: 110px;
}

.membre-card-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

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

.membre-card h3,
.membre-card h4 {
	font-size: 16px;
	margin: 0;
	color: #1a1a1a;
}

.membre-card:hover h3,
.membre-card:hover h4 {
	color: var(--jade-primary, #097D50);
}

.membre-card-role {
	margin: 4px 0 0;
	font-size: 12px;
	color: #888;
}

.membres-empty {
	text-align: center;
	color: #888;
	padding: 24px 0;
}

/* ---------- CA / Comité exécutif (texte + grille) ---------- */

.membres-split {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 48px;
	align-items: start;
}

.membres-split-heading {
	color: #126D30;
	font-size: 34px;
	font-weight: 700;
	margin: 0 0 12px;
}

.membres-split-divider {
	width: 60px;
	height: 4px;
	background: #126D30;
	margin: 0 0 20px;
}

.membres-split p {
	color: #212121;
	line-height: 1.8;
}

.membres-split p a {
	color: var(--jade-primary, #097D50);
	font-weight: 600;
	text-decoration: none;
}

.membres-split p a:hover {
	text-decoration: underline;
}

/* ---------- Bandeau "Membres actifs" (fond image + dégradé) ---------- */
/* La photo (Dollin-8.jpg) a une ligne d'horizon mer/vagues très marquée qui,
   une fois teintée par le dégradé, ressortait comme une séparation nette en
   plein milieu du bandeau. La photo est donc mise en flou sur son propre
   calque (::before, agrandi pour cacher les bords flous) pendant que le
   dégradé et le texte restent nets. */

.membres-actifs-banner {
	position: relative;
	overflow: hidden;
	color: #fff;
}

.membres-actifs-banner::before {
	content: "";
	position: absolute;
	inset: -10px;
	background-image: url('/wp-content/uploads/2023/03/Dollin-8.jpg');
	background-size: cover;
	background-position: center;
	filter: blur(5px);
	transform: scale(1.02);
}

.membres-actifs-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(250deg, var(--brand-gradient-a), var(--brand-gradient-b));
	opacity: 0.75;
}

.membres-actifs-banner-inner {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin: 0 auto;
	padding: 72px 24px;
	text-align: center;
}

.membres-actifs-banner h2 {
	font-size: 36px;
	font-weight: 700;
	margin: 0 0 16px;
}

.membres-actifs-banner-divider {
	width: 60px;
	height: 4px;
	background: #fff;
	margin: 0 auto 20px;
}

.membres-actifs-banner p {
	line-height: 1.7;
	margin: 0 0 32px;
}

.membres-actifs-banner-actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

.btn-outline-white {
	display: inline-block;
	padding: 12px 24px;
	border: 2px solid #fff;
	border-radius: 999px;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 14px;
}

.btn-outline-white:hover {
	background: #fff;
	color: #092D71;
}

/* ---------- Devenir membre + formulaire ---------- */

.section-devenir {
	background: var(--jade-background, #F2F1EE);
	text-align: center;
}

.section-devenir h2 {
	color: #333;
	font-size: 34px;
	font-weight: 700;
	margin: 0 0 16px;
}

.section-devenir p {
	max-width: 700px;
	margin: 0 auto;
	color: #444;
	line-height: 1.7;
}

.candidature-form-wrap {
	max-width: 600px;
	margin: 32px auto 0;
	text-align: left;
}

.candidature-form .form-row {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.candidature-form .form-group {
	flex: 1 1 200px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.candidature-form label {
	font-weight: 600;
	font-size: 14px;
	color: #333;
}

.candidature-form input,
.candidature-form textarea {
	padding: 12px 14px;
	border: 1px solid #ccc;
	border-radius: 12px;
	font-size: 15px;
	font-family: inherit;
}

.candidature-form textarea {
	min-height: 120px;
	resize: vertical;
}

.candidature-form button {
	padding: 14px 28px;
	background: var(--jade-primary, #097D50);
	color: #fff;
	border: none;
	border-radius: 999px;
	font-weight: 700;
	cursor: pointer;
}

.candidature-form button:hover {
	background: #066943;
}

.candidature-note {
	font-size: 13px;
	color: #777;
	margin-top: 12px;
}

.form-message {
	padding: 14px 18px;
	border-radius: 4px;
	margin-bottom: 20px;
	font-size: 14px;
}

.form-message--success {
	background: #e6f4ea;
	color: #1e7e34;
	border: 1px solid #b7dfc0;
}

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

.form-message--error ul {
	margin: 0;
	padding-left: 20px;
}

/* ---------- Fiche membre individuelle (membre.php) ---------- */

/* Bandeau vert plein sur lequel la photo/le nom du membre viennent chevaucher
   (marge négative), tel que dans l'export : pas de titre dans le bandeau,
   la fiche membre "flotte" par-dessus. */
.membre-hero-strip {
	position: relative;
	background: #097D50;
	height: 180px;
	display: flex;
	align-items: flex-start;
	overflow: hidden;
}

/* Forme décorative (assets/shape), sur le bandeau de chaque fiche membre. */
.membre-hero-strip::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url('/assets/shape/team-details-bg.png') center / cover no-repeat;
	opacity: 0.18;
	mix-blend-mode: overlay;
	pointer-events: none;
}

.membre-hero-strip > * {
	position: relative;
	z-index: 1;
}

.membre-hero-strip--1 { background: linear-gradient(120deg, #0b4f8a, #4a9d6e); }
.membre-hero-strip--2 { background: linear-gradient(120deg, #147a94, #3fb8d1); }
.membre-hero-strip--3 { background: linear-gradient(120deg, #1c3a52, #1f7fc4); }
.membre-hero-strip--4 { background: linear-gradient(120deg, #128a76, #d4b93a); }
.membre-hero-strip--5 { background: linear-gradient(120deg, #c9a83a, #7a9e4a); }
.membre-hero-strip--6 { background: linear-gradient(120deg, #0a8f88, #00a884); }
.membre-hero-strip--7 { background: linear-gradient(120deg, #1f6b3f, #2f8fb0); }
.membre-hero-strip--8 { background: linear-gradient(120deg, #1a2f6e, #1f9e9e); }
.membre-hero-strip--9 { background: linear-gradient(120deg, #0d5f96, #3fae7c); }
.membre-hero-strip--10 { background: linear-gradient(120deg, #1a7fa0, #a8c24a); }

.membre-nav {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px 24px;
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.membre-nav-link {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	text-decoration: none;
	max-width: 45%;
}

.membre-nav-link--next {
	margin-left: auto;
	text-align: right;
	flex-direction: row-reverse;
}

.membre-nav-link i {
	color: #3DF819;
	font-size: 18px;
	flex: 0 0 auto;
}

.membre-nav-link span {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.membre-nav-link small {
	font-size: 12px;
	text-transform: uppercase;
	opacity: 0.8;
}

.membre-nav-link strong {
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.membre-nav-link:hover strong {
	text-decoration: underline;
}

@media (max-width: 600px) {
	.membre-nav-link strong {
		max-width: 100px;
	}
}

.membre-profile {
	text-align: center;
	max-width: 700px;
	margin-top: -120px;
	margin-right: auto;
	margin-bottom: 40px;
	margin-left: 20px;
	position: relative;
}

.membre-profile-photo {
	width: 180px;
	height: 180px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto 20px;
	border: 6px solid #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	background: var(--jade-background, #F2F1EE);
}

.membre-profile-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.membre-profile h1 {
	font-size: 34px;
	margin: 0 0 6px;
	color: #272727;
}

.membre-role {
	color: #126D30;
	font-size: 18px;
	font-weight: 700;
	margin: 0;
}

.membre-breadcrumbs {
	max-width: 800px;
	margin: 0 auto 24px;
}

.membre-bio {
	max-width: 800px;
	margin: 0 auto;
	color: #1D1D1D;
	line-height: 1.8;
}

/* ---------- Membres d'honneur (photo à gauche, bio à droite) ---------- */

.membres-honneur-list {
	max-width: 1000px;
	margin: 0 auto;
}

.membre-honneur-row {
	display: flex;
	align-items: center;
	gap: 48px;
	margin-bottom: 56px;
}

.membre-honneur-row:last-child {
	margin-bottom: 0;
}

.membre-honneur-photo {
	flex: 0 0 auto;
	display: block;
	width: 200px;
}

.membre-honneur-photo img,
.membre-honneur-photo .membre-card-photo-placeholder {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	display: block;
}

.membre-honneur-info h3 {
	margin: 0 0 12px;
}

.membre-honneur-info h3 a {
	color: #14181f;
	text-decoration: none;
	font-size: 20px;
}

.membre-honneur-info h3 a:hover {
	color: var(--jade-primary, #097D50);
}

.membre-honneur-bio,
.membre-honneur-info p {
	color: #1D1D1D;
	line-height: 1.8;
	font-size: 15px;
}

.membre-honneur-bio a {
	color: var(--jade-primary, #097D50);
	font-weight: 600;
	text-decoration: none;
}

.membre-honneur-bio a:hover {
	text-decoration: underline;
}

@media (max-width: 700px) {
	.membre-honneur-row {
		flex-direction: column;
		text-align: center;
		gap: 20px;
	}

	.membre-honneur-photo {
		width: 160px;
	}
}

.membre-bio a {
	color: var(--jade-primary, #097D50);
	font-weight: 600;
	text-decoration: none;
}

.membre-bio a:hover {
	text-decoration: underline;
}

.membre-accordion {
	max-width: 800px;
	margin: 24px auto 0;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
}

.membre-accordion summary {
	list-style: none;
	cursor: pointer;
	padding: 16px 4px;
	color: var(--jade-primary, #097D50);
	font-weight: 700;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.membre-accordion summary::-webkit-details-marker {
	display: none;
}

.membre-accordion summary::after {
	content: "+";
	font-size: 22px;
	font-weight: 400;
	color: var(--jade-primary, #097D50);
	transition: transform 0.2s ease;
}

.membre-accordion[open] summary::after {
	content: "\2212";
}

.membre-accordion-content {
	padding: 0 4px 20px;
	color: #333;
	line-height: 1.8;
}

.membre-gallery {
	max-width: 900px;
	margin: 48px auto 0;
}

.membre-gallery h2 {
	color: #126D30;
	font-size: 26px;
	margin: 0 0 20px;
	text-align: center;
}

.gallery-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}

.gallery-grid button {
	display: block;
	width: 100%;
	border: none;
	margin: 0;
	padding: 0;
	background: none;
	cursor: pointer;
}

.gallery-grid img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

/* ---------- Carrousel "Les membres actifs" (fiche membre) ---------- */

.membre-carousel-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 1100px;
	margin: 0 auto;
}

.membre-carousel {
	flex: 1 1 auto;
	display: flex;
	gap: 28px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	padding: 8px 4px 16px;
}

.membre-carousel .membre-card {
	flex: 0 0 auto;
	width: 140px;
	scroll-snap-align: start;
}

.membre-carousel::-webkit-scrollbar {
	height: 6px;
}

.membre-carousel::-webkit-scrollbar-thumb {
	background: #ddd;
	border-radius: 3px;
}

.membre-carousel-arrow {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid #ddd;
	background: #fff;
	color: var(--jade-primary, #097D50);
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.membre-carousel-arrow:hover {
	background: var(--jade-primary, #097D50);
	color: #fff;
	border-color: var(--jade-primary, #097D50);
}

.membre-teaser-heading {
	text-align: center;
	color: var(--jade-primary, #097D50);
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 10px;
}

@media (max-width: 600px) {
	.membre-carousel-arrow {
		display: none;
	}
}

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

	.membre-layout {
		grid-template-columns: 1fr;
	}

	.membre-photo {
		max-width: 320px;
		margin: 0 auto;
	}
}