/* ==========================================================================
   === Page « Notre équipe » ===
   --------------------------------------------------------------------------
   Réutilise (sans duplication) :
     - Le HERO via .bmf-economie-hero* (couleur bande #5C7D8F appliquée via
       override de --bmf-eco-band au scope body de cette page).
     - Le système d'ACCORDÉONS via .bmf-economie-approach* (mêmes JS/HTML),
       avec un modificateur .bmf-economie-approach__list--coral qui passe
       les filets en rose #FF9F9C et les flèches en rouge corail (PNG dédiés
       fleche-rouge-encart-droit.png / -bas.png).
     - Le CTA bas de page via .bmf-economie-cta*.

   Sections propres à la page (Une équipe engagée, Notre équipe, Trombinoscope)
   utilisent le namespace .bmf-equipe-*.
   ========================================================================== */

:root {
	--bmf-eq-ink: #1d1d1b;
	--bmf-eq-white: #ffffff;
	--bmf-eq-band: #5c7d8f;                /* Bleu sombre principal (hero, H2) */
	--bmf-eq-coral: #ff9f9c;               /* Rose/saumon des filets accordéon */
	--bmf-eq-content-max: var(--bmf-home-content-max, 1200px);
	--bmf-eq-serif: "Self Modern", "Cormorant Garamond", Georgia, serif;
	--bmf-eq-sans: "Inter", system-ui, sans-serif;
	--bmf-eq-radius-corner: 20px;
	/* Espace sous le grand titre de section (aligné sur .bmf-engagements-section-label) */
	--bmf-eq-section-title-gap: 24px;
}

/* ----------------------------------------------------------------------
 * Override de la couleur du hero (mêmes mécaniques que sur Nos engagements).
 * ---------------------------------------------------------------------- */
body.page-template-page-notre-equipe {
	--bmf-eco-band: var(--bmf-eq-band);
}

body.page-template-page-notre-equipe .bmf-economie-hero,
body.page-template-page-notre-equipe .bmf-economie-hero__band {
	background: var(--bmf-eq-band);
}

/* Sous-titre du hero (gras), au-dessus du paragraphe d'intro */
.bmf-equipe-hero__subtitle {
	margin: 0 0 0.6em;
	font-family: var(--bmf-eq-sans);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--bmf-eq-white);
}

/* ==========================================================================
   Wrapper commun aux sections
   ========================================================================== */
.bmf-equipe {
	color: var(--bmf-eq-ink);
	font-family: var(--bmf-eq-sans);
	background: var(--bmf-eq-white);
}

.bmf-equipe h3 {
	margin: 0;
}

.bmf-equipe em {
	font-style: italic;
}

.bmf-equipe-section {
	padding: 72px 20px;
	background: var(--bmf-eq-white);
	scroll-margin-top: 120px;
}

.bmf-equipe-section__inner {
	max-width: var(--bmf-eq-content-max);
	margin: 0 auto;
	width: 100%;
}

/* Grand titre de section — typo .bmf-engagements-section-label, marge avant le corps
   (spécificité > .bmf-economie h2 { margin: 0 } dans economie-construction.css) */
.bmf-equipe.bmf-economie h2.bmf-equipe-h2 {
	font-family: var(--bmf-eq-serif);
	font-size: 50px;
	font-weight: 400;
	line-height: 1.1;
	color: var(--bmf-eq-band);
	margin: 0 0 var(--bmf-eq-section-title-gap);
}

.bmf-equipe.bmf-economie h2.bmf-equipe-h2 + .bmf-equipe-text,
.bmf-equipe.bmf-economie h2.bmf-equipe-h2 + .bmf-equipe-cols,
.bmf-equipe.bmf-economie h2.bmf-equipe-h2 + .bmf-equipe-membres__intro,
.bmf-equipe.bmf-economie h2.bmf-equipe-h2 + .bmf-equipe-trombi__credit,
.bmf-equipe.bmf-economie h2.bmf-equipe-h2 + .bmf-equipe-trombi__grid {
	margin-top: 0;
}

/* Texte de corps « éditorial » 18 / 1.5 / Inter Light / #1D1D1B */
.bmf-equipe-text {
	font-family: var(--bmf-eq-sans);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--bmf-eq-ink);
}

.bmf-equipe-text p {
	margin: 0 0 0.9em;
}

.bmf-equipe-text p:last-child {
	margin-bottom: 0;
}

.bmf-equipe-text strong {
	font-weight: 600;
}

.bmf-equipe-text ul,
.bmf-equipe-text ol {
	margin: 0 0 0.9em;
	padding-left: 1.4em;
}

.bmf-equipe-text li {
	margin: 0 0 0.3em;
}

/* Grille 50/50 (section 2) */
.bmf-equipe-cols {
	display: grid;
	gap: 48px;
	align-items: start;
	margin-top: 0;
}

.bmf-equipe-cols--50-50 {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Figure colonne droite (image + légende) */
.bmf-equipe-figure {
	margin: 0;
	display: flex;
	flex-direction: column;
}

.bmf-equipe-figure__img {
	overflow: hidden;
	width: 100%;
	background: #ebe7e1;
	border-top-right-radius: var(--bmf-eq-radius-corner);
}

.bmf-equipe-figure__img img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.bmf-equipe-caption {
	display: block;
	width: 100%;
	margin: 10px 0 0;
	text-align: right;
	color: #767676;
	font-family: var(--bmf-eq-sans);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
}

/* ==========================================================================
   Section 2 — Une équipe engagée
   ========================================================================== */
.bmf-equipe-engagee .bmf-economie-approach__list--coral {
	margin-top: 40px;
}

/* ==========================================================================
   Section 3 — Notre équipe (intro + accordéons)
   ========================================================================== */
.bmf-equipe-membres__intro {
	margin-top: 0;
}

.bmf-equipe-membres .bmf-economie-approach__list--coral {
	margin-top: 40px;
}

/* ==========================================================================
   Accordéons — variante CORAIL
   --------------------------------------------------------------------------
   Override visuel pur de .bmf-economie-approach* (mêmes JS, mêmes attributs).
     1. Filet entre items → #FF9F9C (au lieu de gris).
     2. Flèche fermée   → fleche-rouge-encart-droit.png (9×15 px).
     3. Flèche ouverte  → fleche-rouge-encart-bas.png   (15×9 px).
     4. Variante data-img-position="none" : panel-content sur 1 colonne.
   ========================================================================== */
.bmf-economie-approach__list--coral {
	list-style: none;
	padding: 0;
}

.bmf-economie-approach__list--coral .bmf-economie-approach__item {
	border-bottom: 1px solid var(--bmf-eq-coral);
}

/* Pas de filet au-dessus du 1er encart (aligné sur economie-approach : filets
   entre items + après le dernier uniquement). */

/* Flèche état fermé : PNG rouge 9×15 (verticale). */
.bmf-economie-approach__list--coral .bmf-economie-approach__head-icon {
	width: 9px;
	height: 15px;
	background-image: url("../../images/fleche-rouge-encart-droit.png");
}

/* Flèche état ouvert : PNG rouge 15×9 (horizontale). */
.bmf-economie-approach__list--coral .bmf-economie-approach__head[aria-expanded="true"] .bmf-economie-approach__head-icon {
	width: 15px;
	height: 9px;
	background-image: url("../../images/fleche-rouge-encart-bas.png");
}

/* Focus visible cohérent avec la couleur de section. */
.bmf-economie-approach__list--coral .bmf-economie-approach__head:focus-visible {
	outline-color: var(--bmf-eq-band);
}

/* Affordance « dépliable » : soulignement du titre au survol / focus clavier. */
.bmf-equipe .bmf-economie-approach__list--coral .bmf-economie-approach__head:hover .bmf-economie-approach__head-label,
.bmf-equipe .bmf-economie-approach__list--coral .bmf-economie-approach__head:focus-visible .bmf-economie-approach__head-label {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Variante « sans image » : le panel-content passe en 1 colonne. */
.bmf-economie-approach__list--coral .bmf-economie-approach__item[data-img-position="none"] .bmf-economie-approach__panel-content {
	grid-template-columns: minmax(0, 1fr);
}

/* Légende sous l'image de l'accordéon (gardée discrète, alignée à droite). */
.bmf-equipe-accordion__caption {
	display: block;
	margin: 8px 0 0;
	text-align: right;
	font-family: var(--bmf-eq-sans);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
	color: #767676;
}

/* Figure : légende hors du cadre beige (pas de overflow sur la figure). */
.bmf-equipe .bmf-economie-approach__list--coral .bmf-economie-approach__row-image {
	display: flex;
	flex-direction: column;
	overflow: visible;
	background: transparent;
}

.bmf-equipe-accordion__image-wrap {
	overflow: hidden;
	width: 100%;
	flex: 0 0 auto;
	background: #ebe7e1;
	border-top-right-radius: var(--bmf-eq-radius-corner);
}

.bmf-equipe .bmf-economie-approach__list--coral .bmf-equipe-accordion__image-wrap img {
	display: block;
	width: 100%;
	height: auto;
	max-height: none;
	min-height: 0;
	object-fit: cover;
	object-position: center;
}

/* ==========================================================================
   Section 4 — Trombinoscope (masonry CSS columns)
   --------------------------------------------------------------------------
   On utilise column-count natif + break-inside: avoid pour empiler les cartes
   de hauteurs variables sans JS. Les photos conservent leurs proportions
   naturelles (effet « masonry » fidèle à la maquette).
   ========================================================================== */
.bmf-equipe-trombi__credit {
	margin: 0 0 var(--bmf-eq-section-title-gap);
	font-family: var(--bmf-eq-sans);
	font-size: 13px;
	font-weight: 300;
	font-style: italic;
	color: var(--bmf-eq-ink);
}

.bmf-equipe-trombi__grid {
	column-count: 6;
	column-gap: 24px;
}

.bmf-equipe-trombi__card {
	display: block;
	width: 100%;
	margin: 0 0 28px;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	background: transparent;
}

.bmf-equipe-trombi__photo {
	width: 100%;
	overflow: hidden;
	background: #ebe7e1;
	margin: 0 0 10px;
}

.bmf-equipe-trombi__photo-img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.bmf-equipe-trombi__name {
	margin: 0;
	font-family: var(--bmf-eq-serif);
	font-size: 16px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.35;
	color: #1d1d1b;
}

.bmf-equipe-trombi__name-first {
	font-weight: 400;
}

/* Nom en CAPITALES, indépendamment de la casse saisie en BO. */
.bmf-equipe-trombi__name-last {
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.bmf-equipe-trombi__role {
	margin: 2px 0 0;
	font-family: var(--bmf-eq-serif);
	font-size: 12px;
	font-weight: 400;
	font-style: italic;
	line-height: 1.4;
	color: #1d1d1b;
}

/* ==========================================================================
   RESPONSIVE — mêmes breakpoints que les autres pages métier
   ========================================================================== */
@media (max-width: 1199px) {
	.bmf-equipe-trombi__grid {
		column-count: 4;
	}
}

@media (max-width: 1023px) {
	.bmf-equipe-section {
		padding: 56px 20px;
	}

	.bmf-equipe.bmf-economie h2.bmf-equipe-h2 {
		font-size: 42px;
		margin-bottom: var(--bmf-eq-section-title-gap);
	}

	.bmf-equipe-cols--50-50 {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.bmf-equipe-trombi__grid {
		column-count: 3;
		column-gap: 20px;
	}

	.bmf-equipe-trombi__card {
		margin-bottom: 22px;
	}

	/* Accordéons : image pleine largeur, légende visible sous le cadre beige. */
	.bmf-equipe .bmf-economie-approach__list--coral .bmf-economie-approach__row-image {
		height: auto !important;
		max-height: none !important;
	}

	.bmf-equipe-accordion__image-wrap {
		height: auto !important;
		max-height: none !important;
	}

	.bmf-equipe-accordion__image-wrap img {
		height: auto !important;
		max-height: none !important;
		object-fit: cover;
	}

	.bmf-equipe-accordion__caption {
		flex: 0 0 auto;
	}
}

@media (max-width: 767px) {
	.bmf-equipe-section {
		padding: 48px 20px;
	}

	.bmf-equipe.bmf-economie h2.bmf-equipe-h2 {
		font-size: 36px;
		margin-bottom: var(--bmf-eq-section-title-gap);
	}

	.bmf-equipe-text {
		font-size: 16px;
	}

	.bmf-equipe-trombi__grid {
		column-count: 2;
		column-gap: 16px;
	}

	.bmf-equipe-trombi__card {
		margin-bottom: 18px;
	}

}

@media (max-width: 480px) {
	.bmf-equipe-section {
		padding: 40px 16px;
	}

	.bmf-equipe.bmf-economie h2.bmf-equipe-h2 {
		font-size: 30px;
	}

	/* On garde 2 colonnes (densité visuelle cohérente avec la maquette). */
	.bmf-equipe-trombi__grid {
		column-count: 2;
		column-gap: 12px;
	}

	.bmf-equipe-trombi__card {
		margin-bottom: 14px;
	}
}

/* ==========================================================================
   Bouton flottant « Haut de page » — composant autonome cloné de la page
   « Nos engagements » et de l'archive Projets.
   ========================================================================== */
.haut-de-page#bmf-haut-de-page {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 100;
	appearance: none;
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
	text-align: center;
	line-height: 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s, visibility 0.2s;
}

.haut-de-page#bmf-haut-de-page.is-visible,
.haut-de-page#bmf-haut-de-page.visible {
	opacity: 1;
	visibility: visible;
}

.haut-de-page#bmf-haut-de-page .haut-de-page__icon {
	display: block;
	width: 30px;
	height: 30px;
	margin: 0 auto 4px;
}

.haut-de-page#bmf-haut-de-page .haut-de-page__label {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: var(--bmf-eq-sans);
	font-weight: 600;
	font-size: 9px;
	line-height: 1.4;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--bmf-eq-ink);
}

.haut-de-page#bmf-haut-de-page .haut-de-page__label span {
	display: block;
	line-height: 1.4;
}