/* =========================================================================
   Page « Pilier » (taxonomy-pilier.php), node Figma 184:3331
   Styles propres à la page. Réutilise design-system.css + home.css + archive.css
   (cartes projet .fhcl-pcard, témoignages .fhcl-lm, bandeau don .fhcl-donband).
   Classes propres : .fhcl-pilier-*.
   Largeur de contenu : 1256px centrée, padding latéral 32px.
   ========================================================================= */

/* overflow-x:clip (et non hidden) : clippe le débordement horizontal des décos SANS
   créer de conteneur de défilement.
   display:block + height:auto en !important : un script tiers (frontend Elementor)
   injecte au runtime `.fhcl-pilier{display:flex;flex-direction:column;height:404px}`
   qui collapsait la page (sections empilées en flex contraint). On le neutralise. */
.fhcl-pilier{display:block!important;height:auto!important;overflow-x:clip;background:#fff;}

/* Compat kit Elementor : neutralise le fond orange forcé sur nos <button>/<a> internes. */
.fhcl-pilier .fhcl-pilier-hero__back{background:none;}


/* ============================================================
   1) HÉRO sombre plein cadre, node 184:4535 / 184:4425
   ============================================================ */
.fhcl-pilier-hero{
	position:relative;
	width:100%;
	min-height:668px;
	display:flex;
	align-items:flex-end;
	overflow:hidden;
	background-color:var(--c-navy);
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	color:#fff;
}

/* Dégradé navy bas-gauche → transparent haut-droite (50,77° dans Figma). */
.fhcl-pilier-hero__scrim{
	position:absolute;
	inset:0;
	pointer-events:none;
	background:linear-gradient(
		50.77deg,
		rgba(21,27,39,.8) 35.5%,
		rgba(21,27,39,.35) 72%,
		rgba(21,27,39,0) 101.5%
	);
}

.fhcl-pilier-hero__inner{
	position:relative;
	z-index:1;
	width:100%;
	max-width:1256px;
	margin:0 auto;
	/* contenu démarre à 39px du bord conteneur (Figma left 131 vs 92). */
	padding:0 32px 96px 39px;
}

/* Liseré orange : enfant du contenu (épouse sa hauteur). */
.fhcl-pilier-hero__content{position:relative;}
.fhcl-pilier-hero__content::before{
	content:"";
	position:absolute;
	left:-39px;
	top:0;
	bottom:0;
	width:8px;
	background:var(--c-orange);
}

/* Ligne « Retour » + surtitre. */
.fhcl-pilier-hero__top{
	display:flex;
	align-items:center;
	gap:8px;
	margin-bottom:24px;
}
.fhcl-pilier-hero__back{
	display:inline-flex;
	align-items:center;
	gap:4px;
	padding:4px;
	font-size:14px;
	font-weight:var(--fw-medium);
	color:rgba(255,255,255,.6);
	text-decoration:none;
	transition:color .15s ease;
}
.fhcl-pilier-hero__back svg{flex:0 0 auto;transition:transform .2s ease;}
.fhcl-pilier-hero__back:hover{color:#fff;}
.fhcl-pilier-hero__back:hover svg{transform:translateX(-3px);}
.fhcl-pilier-hero__surtitre{
	display:inline-flex;
	align-items:center;
	padding:4px 8px;
	border:1px solid var(--c-orange-30);
	border-radius:var(--r-xs);
	font-size:14px;
	font-weight:var(--fw-regular);
	line-height:1;
	color:var(--c-orange-on-dark);
}

/* Titre bicolore : nom du pilier (blanc) + accroche (orange). 40px / 42px. */
.fhcl-pilier-hero__title{
	margin:0;
	max-width:560px;
	font-size:40px;
	line-height:42px;
	font-weight:var(--fw-semibold);
	color:#fff;
}
/* L'accroche est un <p> frère du <h1>, plus un <span> à l'intérieur : le rendu
   est le même, mais l'intitulé du titre reste le seul nom du pilier. */
.fhcl-pilier-hero__accroche{
	margin:0;
	max-width:560px;
	font-size:40px;
	line-height:42px;
	font-weight:var(--fw-semibold);
	color:var(--c-orange-on-dark);
}

.fhcl-pilier-hero__sub{
	margin:24px 0 0;
	max-width:485px;
	font-size:16px;
	line-height:1.5;
	font-weight:var(--fw-light);
	color:rgba(255,255,255,.6);
}


/* ============================================================
   2) SECTION CONTENU éditorial, nodes 184:4627, 219:905…219:917
   ============================================================ */
.fhcl-pilier-contenu{position:relative;}

/* Bande CRÈME pleine largeur = bandeau intro + rangée témoignage/texte (row1).
   Le reste de la section (items à cœur + bloc latéral) est sur le fond BLANC. */
.fhcl-pilier-contenu__band{background:#FDF6F2;}
.fhcl-pilier-contenu__inner--top{padding-top:0;padding-bottom:120px;}
.fhcl-pilier-contenu__inner--bottom{padding-top:96px;}

/* Blocs rendus séparément (un widget Elementor par bloc, pour que la Fondation
   puisse les déplacer ou les supprimer). Empilés, ils doivent reproduire
   exactement l'espacement d'origine : les deux blocs du bas étaient séparés par
   le gap de 88px du conteneur flex, on le répartit donc en 44 + 44. */
.fhcl-pilier-contenu__inner--seul-haut{padding-bottom:44px;}
.fhcl-pilier-contenu__inner--seul-bas{padding-top:44px;}

/* ── a. Bandeau intro (titre bicolore 48px + sous-texte + CTA + décos), crème via la bande. ── */
.fhcl-pilier-intro{
	position:relative;
	background:transparent;
	padding:120px 32px 128px;
	text-align:center;
	overflow:hidden;
}
.fhcl-pilier-intro__deco{
	position:absolute;
	pointer-events:none;
	height:auto;
	z-index:0;
	top:50%;
}
.fhcl-pilier-intro__deco--l{left:0;transform:translateY(-50%);width:200px;}
.fhcl-pilier-intro__deco--r{right:0;transform:translateY(-40%);width:330px;}
.fhcl-pilier-intro__inner{
	position:relative;
	z-index:1;
	max-width:980px;
	margin:0 auto;
	display:flex;
	flex-direction:column;
	align-items:center;
}
.fhcl-pilier-intro__title{
	margin:0;
	font-weight:var(--fw-semibold);
	font-size:48px;
	line-height:50px;
	color:var(--c-ink);
}
.fhcl-pilier-intro__title span{color:var(--c-orange-text);}
.fhcl-pilier-intro__sub{
	margin:36px auto 0;
	max-width:704px;
	font-size:18px;
	line-height:1.45;
	font-weight:var(--fw-light);
	color:var(--c-ink-60);
}
/* CTA « Soutenir [pilier] » : orange plein, 17px Medium, icône cœur, radius 4px. */
.fhcl-pilier-intro__cta{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:4px;
	margin-top:40px;
	padding:8px 12px;
	border-radius:var(--r-sm);
	background:var(--c-orange);
	color:#fff;
	font-size:17px;
	font-weight:var(--fw-medium);
	line-height:1.2;
	text-decoration:none;
	transition:background .2s ease;
}
.fhcl-pilier-intro__cta:hover{background:var(--c-orange-hover);color:#fff;}
.fhcl-pilier-intro__cta-heart{
	display:inline-flex;
	width:24px;
	height:24px;
}
.fhcl-pilier-intro__cta-heart svg{width:100%;height:100%;}

/* ── Conteneur centré des blocs de contenu. ── */
.fhcl-pilier-contenu__inner{
	max-width:1256px;
	margin:0 auto;
	padding:84px 32px;
	display:flex;
	flex-direction:column;
	gap:88px;
}

/* ── b. Rangée carte témoignage (gauche, 621px) + texte (droite). ── */
.fhcl-pilier-row--quote{
	display:grid;
	grid-template-columns:621px 1fr;
	gap:89px;
	align-items:flex-start;
}

.fhcl-pilier-quote{
	position:relative;
	min-height:417px;
	border-radius:var(--r-md);
	background-color:var(--c-navy);
	background-size:cover;
	background-position:center;
	overflow:hidden;
	display:flex;
	align-items:flex-end;
}
/* Panneau blanc bas-gauche, coin haut-droit arrondi, débordant le bas de l'image. */
.fhcl-pilier-quote__panel{
	position:relative;
	width:409px;
	max-width:80%;
	background:#fff;
	border-radius:0 var(--r-md) 0 0;
	padding:24px 16px 24px 24px;
	display:flex;
	flex-direction:column;
	gap:16px;
}
/* Liseré orange à gauche du verbatim. */
.fhcl-pilier-quote__text{
	position:relative;
	margin:0;
	padding-left:24px;
	font-size:18px;
	line-height:1.3;
	font-weight:var(--fw-light);
	color:var(--c-ink);
}
.fhcl-pilier-quote__text::before{
	content:"";
	position:absolute;
	left:0;
	top:3px;
	bottom:3px;
	width:3px;
	border-radius:2px;
	background:var(--c-orange);
}
.fhcl-pilier-quote__author{
	display:flex;
	flex-direction:column;
	gap:4px;
	padding-left:24px;
}
.fhcl-pilier-quote__name{
	font-size:16px;
	font-weight:var(--fw-semibold);
	color:var(--c-orange-text);
}
.fhcl-pilier-quote__loc{
	font-size:14px;
	font-weight:var(--fw-light);
	color:rgba(21,27,39,.6);
}

/* ── Bloc texte (droite) : titre 40px/45px + lead 16px Medium + corps 14px Light. ── */
.fhcl-pilier-textblock{padding-top:0;}
.fhcl-pilier-textblock__title{
	margin:0 0 24px;
	font-size:40px;
	line-height:45px;
	font-weight:var(--fw-semibold);
	color:var(--c-ink);
}
.fhcl-pilier-textblock__body{
	display:flex;
	flex-direction:column;
	gap:16px;
}
.fhcl-pilier-textblock__body p{margin:0;}
.fhcl-pilier-textblock__lead{
	font-size:16px;
	line-height:1.5;
	font-weight:var(--fw-medium);
	color:rgba(24,14,9,.8);
}
.fhcl-pilier-textblock__body p:not(.fhcl-pilier-textblock__lead){
	font-size:14px;
	line-height:1.55;
	font-weight:var(--fw-light);
	color:var(--c-ink-60);
}

/* ── c. Titre orange 24px + rangée de 5 items « à cœur ». ── */
.fhcl-pilier-feats__title{
	margin:0 0 56px;
	font-size:24px;
	line-height:1.2;
	font-weight:var(--fw-medium);
	color:var(--c-orange-text);
}
.fhcl-pilier-feats__list{
	display:grid;
	grid-template-columns:repeat(5,1fr);
	gap:38px;
}
.fhcl-pilier-item{
	display:flex;
	flex-direction:column;
	gap:37px;
}
.fhcl-pilier-item__heart{
	display:inline-flex;
	width:24px;
	height:24px;
	color:var(--c-orange-text);
}
.fhcl-pilier-item__heart svg{width:100%;height:100%;}
.fhcl-pilier-item__txt{
	margin:0;
	font-size:16px;
	line-height:1.4;
	font-weight:var(--fw-light);
	color:#000;
}

/* ── d. Rangée texte (gauche) + image (droite, 615px). ── */
.fhcl-pilier-row--side{
	display:grid;
	grid-template-columns:1fr 615px;
	gap:96px;
	align-items:center;
}
.fhcl-pilier-side__title{
	margin:0 0 24px;
	font-size:32px;
	line-height:1.2;
	font-weight:var(--fw-medium);
	color:var(--c-ink);
}
.fhcl-pilier-side__body p{
	margin:0;
	font-size:16px;
	line-height:1.5;
	font-weight:var(--fw-light);
	color:var(--c-ink-60);
}
.fhcl-pilier-side__media{
	border-radius:var(--r-md);
	overflow:hidden;
}
.fhcl-pilier-side__media img{
	display:block;
	width:100%;
	height:395px;
	object-fit:cover;
}


/* ============================================================
   3-4) « Projets à financer » / « Projets financés »
   Réutilisent les cartes .fhcl-pcard (home.css).
   ============================================================ */
.fhcl-pilier-projets{padding:0 0 24px;}
/* « Projets à financer » = bande CRÈME pleine largeur (ISO). « Projets financés » reste BLANC. */
.fhcl-pilier-projets--encours{background:#FDF6F2;padding:80px 0 96px;}
.fhcl-pilier-projets__inner{
	max-width:1256px;
	margin:0 auto;
	padding:0 32px;
}
.fhcl-pilier-projets__title{
	margin:0 0 40px;
	text-align:center;
	font-size:48px;
	line-height:1.1;
	font-weight:var(--fw-semibold);
	color:var(--c-ink);
}
.fhcl-pilier-projets__grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:18px;
	align-items:start;
}
.fhcl-pilier-projets__grid>.fhcl-pcard{width:100%;}
.fhcl-pilier-projets__empty{
	grid-column:1/-1;
	text-align:center;
	color:var(--c-ink-60);
	font-weight:var(--fw-light);
}


/* ============================================================
   Mobile (≤ 900px)
   ============================================================ */
@media (max-width:900px){
	.fhcl-pilier-hero{min-height:540px;}
	.fhcl-pilier-hero__inner{padding:0 24px 64px 30px;}
	.fhcl-pilier-hero__content::before{left:-30px;width:6px;}
	.fhcl-pilier-hero__title,
	.fhcl-pilier-hero__accroche{font-size:30px;line-height:1.1;max-width:none;}
	.fhcl-pilier-hero__sub{font-size:15px;margin-top:16px;}
	/* Dégradé pleine base pour la lisibilité. */
	.fhcl-pilier-hero__scrim{
		background:linear-gradient(
			to top,
			rgba(21,27,39,.92) 0%,
			rgba(21,27,39,.55) 45%,
			rgba(21,27,39,0) 100%
		);
	}

	.fhcl-pilier-intro{padding:64px 24px 72px;}
	.fhcl-pilier-intro__deco{display:none;}
	.fhcl-pilier-intro__title{font-size:clamp(28px,7vw,40px);line-height:1.08;}
	.fhcl-pilier-intro__sub{font-size:16px;margin-top:24px;}
	.fhcl-pilier-intro__cta{margin-top:28px;}

	.fhcl-pilier-contenu__inner{padding:56px 24px;gap:56px;}
	/* Même répartition du gap mobile (56px) entre les deux blocs du bas. */
	.fhcl-pilier-contenu__inner--seul-haut{padding-bottom:28px;}
	.fhcl-pilier-contenu__inner--seul-bas{padding-top:28px;}

	.fhcl-pilier-row--quote{grid-template-columns:1fr;gap:32px;}
	.fhcl-pilier-quote{min-height:340px;}
	.fhcl-pilier-quote__panel{width:100%;max-width:100%;border-radius:0;}
	.fhcl-pilier-textblock__title{font-size:30px;line-height:1.12;}

	.fhcl-pilier-feats__title{margin-bottom:40px;}
	.fhcl-pilier-feats__list{grid-template-columns:repeat(2,1fr);gap:28px;}
	.fhcl-pilier-item{gap:18px;}

	.fhcl-pilier-row--side{grid-template-columns:1fr;gap:28px;}
	.fhcl-pilier-side__title{font-size:28px;}
	.fhcl-pilier-side__media img{height:280px;}

	.fhcl-pilier-projets__inner{padding:0 24px;}
	.fhcl-pilier-projets__grid{grid-template-columns:1fr;gap:24px;}
	.fhcl-pilier-projets__title{font-size:clamp(30px,6vw,40px);margin-bottom:28px;}
}

@media (max-width:560px){
	.fhcl-pilier-feats__list{grid-template-columns:1fr;}
}