/* =========================================================================
   Page « Projets & Impacts » (archive du CPT projet), node 153:35
   Styles propres à la page. Réutilise design-system.css + home.css.
   Les blocs des composants (.fhcl-pi-*) sont ajoutés ci-dessous.
   ========================================================================= */

.fhcl-pi{overflow-x:hidden;}

/* ── Compat Elementor ─────────────────────────────────────────────────────
   Le kit global Elementor charge `.elementor-kit-N button{background:#C75000;
   border-radius:4px}` (spéc. 0,0,1,1) qui colore TOUS nos <button> en orange.
   On réaffirme nos styles de boutons avec une spécificité supérieure (0,0,2,0). */
.fhcl-pi .fhcl-pi-grid__tab{background:none;border-radius:0;color:var(--c-ink);}
.fhcl-pi .fhcl-pi-avantapres__pill{background:transparent;border-radius:999px;color:#fff;}
.fhcl-pi .fhcl-pi-avantapres__pill.is-active{background:#fff;color:var(--c-navy);}

/* CTA bas de page (réutilise .fhcl-donband) */
.fhcl-pi-cta{max-width:1256px;margin:0 auto;padding:80px 32px 120px;}


/* ============================================================
   Héro « Projets & Impacts », node Figma 207:203
   Plein cadre, image de fond + dégradé sombre bas-gauche.
   ============================================================ */
.fhcl-pi-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é sombre bas-gauche → transparent haut-droite (50.78deg dans Figma). */
.fhcl-pi-hero__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		51deg,
		rgba(21, 27, 39, 0.85) 30%,
		rgba(21, 27, 39, 0.45) 70%,
		rgba(21, 27, 39, 0) 102%
	);
}

/* Contenu : bas-gauche, aligné sur la largeur de contenu (1256px + padding 32px). */
.fhcl-pi-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1256px;
	margin: 0 auto;
	/* padding-gauche 39px : le contenu démarre à 39px du bord conteneur (Figma left 131 vs 92). */
	padding: 0 32px 88px 39px;
}

/* Liseré orange : enfant du bloc de contenu (top:0/bottom:0) → il épouse la hauteur
   du contenu quel que soit le nombre de lignes du titre. Placé à -39px = bord gauche
   du conteneur (Figma 207:214) ; écart liseré ↔ texte = 31px. */
.fhcl-pi-hero__content {
	position: relative;
}
.fhcl-pi-hero__content::before {
	content: "";
	position: absolute;
	left: -39px;
	top: 0;
	bottom: 0;
	width: 8px;
	background: var(--c-orange);
}

/* --- Ligne de badges --- */
.fhcl-pi-hero__badges {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}

.fhcl-pi-hero__badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 8px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--r-xs, 2px);
	font-size: 14px;
	font-weight: var(--fw-regular, 400);
	line-height: 1;
	color: #fff;
}

.fhcl-pi-hero__time {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 8px;
	border-radius: var(--r-xs, 2px);
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	font-size: 14px;
	font-weight: var(--fw-light, 300);
	line-height: 1;
	color: rgba(255, 255, 255, 0.85);
}

.fhcl-pi-hero__clock {
	flex: 0 0 auto;
}

/* --- Titre --- */
.fhcl-pi-hero__title {
	margin: 0;
	max-width: 613px;
	font-size: 48px;
	line-height: 48px;
	font-weight: var(--fw-semibold, 600);
	color: #fff;
}

/* --- Sous-titre --- */
.fhcl-pi-hero__sub {
	margin: 24px 0 0;
	max-width: 613px;
	font-size: 16px;
	line-height: 1.5;
	font-weight: var(--fw-light, 300);
	color: rgba(255, 255, 255, 0.6);
}

/* --- Bouton « Lire » (ghost, soulignement orange) --- */
.fhcl-pi-hero__lire {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 28px;
	padding: 8px 4px;
	font-size: 16px;
	font-weight: var(--fw-medium, 500);
	color: #fff;
	text-decoration: none;
	border-bottom: 2px solid var(--c-orange);
	width: max-content;
	transition: opacity 0.15s ease;
}

.fhcl-pi-hero__lire svg {
	flex: 0 0 auto;
	transition: transform 0.2s ease;
}

.fhcl-pi-hero__lire:hover {
	opacity: 0.85;
}

.fhcl-pi-hero__lire:hover svg {
	transform: translateX(3px);
}

/* --- Pagination à points (bas-droite) --- */
.fhcl-pi-hero__pager {
	position: absolute;
	z-index: 1;
	right: max(32px, calc((100% - 1256px) / 2 + 32px));
	bottom: 96px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.fhcl-pi-hero__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.7);
}

.fhcl-pi-hero__dots {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.fhcl-pi-hero__dot {
	display: block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
}

.fhcl-pi-hero__dot.is-active {
	width: 9px;
	height: 9px;
	background: var(--c-orange);
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 900px) {
	.fhcl-pi-hero {
		min-height: 520px;
	}

	.fhcl-pi-hero__inner {
		padding: 0 24px 64px 30px;
	}

	.fhcl-pi-hero__content::before {
		left: -30px;
		width: 6px;
	}

	.fhcl-pi-hero__title {
		font-size: 32px;
	}

	.fhcl-pi-hero__sub {
		font-size: 15px;
		margin-top: 16px;
	}

	.fhcl-pi-hero__pager {
		display: none;
	}

	/* Le dégradé couvre toute la base sur mobile pour la lisibilité. */
	.fhcl-pi-hero__scrim {
		background: linear-gradient(
			to top,
			rgba(21, 27, 39, 0.9) 0%,
			rgba(21, 27, 39, 0.55) 45%,
			rgba(21, 27, 39, 0) 100%
		);
	}
}

/* ===== Section « Chaque don, une histoire vraie », page Projets & Impacts ===== */
.fhcl-pi-histoire{padding:96px 0;}
.fhcl-pi-histoire__wrap{max-width:1256px;margin:0 auto;padding:0 32px;}

/* --- En-tête --- */
.fhcl-pi-histoire__head{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:42px;}
.fhcl-pi-histoire__headtext{flex:1;min-width:0;}
.fhcl-pi-histoire__surtitle{display:inline-flex;align-items:center;border:1px solid rgba(168,68,0,.55);color:var(--c-orange-text);font-weight:var(--fw-regular);font-size:14px;line-height:1;padding:5px 9px;border-radius:var(--r-xs);margin-bottom:16px;}
.fhcl-pi-histoire__title{margin:0;color:var(--c-ink);font-weight:var(--fw-semibold);font-size:clamp(34px,4vw,52px);line-height:1.05;letter-spacing:-.01em;}
.fhcl-pi-histoire__sub{margin:14px 0 0;max-width:725px;color:var(--c-ink-60);font-size:17px;font-weight:var(--fw-regular);line-height:1.5;}
.fhcl-pi-histoire__deco{flex:none;width:170px;height:auto;margin-top:6px;pointer-events:none;user-select:none;}

/* --- Grille : grande carte + colonne de 2 mini-cartes --- */
.fhcl-pi-histoire__grid{display:grid;grid-template-columns:minmax(0,620fr) minmax(0,626fr);gap:24px;align-items:stretch;}
.fhcl-pi-histoire__col{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;}

/* --- Pastilles communes (localisation / statut) --- */
.fhcl-pi-histoire__loc{position:absolute;top:15px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;background:var(--c-orange);color:#fff;font-size:14px;font-weight:var(--fw-regular);line-height:1;padding:5px 9px;border-radius:var(--r-xs);}
.fhcl-pi-histoire__loc svg{display:block;}
.fhcl-pi-histoire__loc--static{position:static;}
.fhcl-pi-histoire__loc--ghost{background:rgba(0,0,0,.22);backdrop-filter:blur(2px);}
.fhcl-pi-histoire__status{display:inline-flex;align-items:center;color:#fff;font-size:14px;font-weight:var(--fw-regular);line-height:1;padding:5px 9px;border-radius:var(--r-xs);}
.fhcl-pi-histoire__status--orange,
.fhcl-pi-histoire__status--ghost-orange{background:rgba(199,80,0,.15);border:1px solid rgba(168,68,0,.55);backdrop-filter:blur(2px);}

/* ============ Grande carte featured (gauche) ============ */
.fhcl-pi-histoire__feat{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:462px;background:var(--c-navy);background-size:cover;background-position:center;border-radius:var(--r-md);overflow:hidden;}
.fhcl-pi-histoire__feat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,14,9,0) 38%,rgba(24,14,9,.7) 92%);z-index:1;}
.fhcl-pi-histoire__feat-top{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:16px 14px 0;}
.fhcl-pi-histoire__feat-top .fhcl-pi-histoire__loc{position:static;}
.fhcl-pi-histoire__feat-bottom{position:relative;z-index:2;display:flex;flex-direction:column;gap:11px;padding:0 14px 14px;}
.fhcl-pi-histoire__feat-stats{display:flex;align-items:stretch;gap:16px;color:#fff;}
.fhcl-pi-histoire__obj{flex:1;display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(208,85,3,.3);backdrop-filter:blur(2px);border-radius:var(--r-sm);padding:11px 16px 11px 15px;}
.fhcl-pi-histoire__obj span{font-size:24px;font-weight:var(--fw-medium);line-height:1.1;}
.fhcl-pi-histoire__obj strong{font-size:32px;font-weight:var(--fw-bold);line-height:1;letter-spacing:-.01em;white-space:nowrap;}
.fhcl-pi-histoire__launch{display:flex;flex-direction:column;justify-content:center;gap:1px;width:118px;flex:none;background:rgba(255,255,255,.15);backdrop-filter:blur(2px);border-radius:var(--r-sm);padding:4px 9px 6px 7px;}
.fhcl-pi-histoire__launch span{font-size:14px;font-weight:var(--fw-regular);color:rgba(255,255,255,.6);line-height:1.2;}
.fhcl-pi-histoire__launch strong{font-size:18px;font-weight:var(--fw-medium);line-height:1.1;}
.fhcl-pi-histoire__feat-ctas{display:flex;gap:16px;}
.fhcl-pi-histoire__more,
.fhcl-pi-histoire__don{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:53px;font-weight:var(--fw-medium);font-size:16px;line-height:1;padding:8px 16px;border-radius:var(--r-sm);text-decoration:none;transition:background .2s,color .2s;}
.fhcl-pi-histoire__more{background:#f3f3f3;color:var(--c-orange-text);}
.fhcl-pi-histoire__more:hover{background:#fff;color:var(--c-orange-hover);}
.fhcl-pi-histoire__more svg{display:block;}
.fhcl-pi-histoire__don{background:var(--c-orange);color:#fff;font-size:17px;}
.fhcl-pi-histoire__don:hover{background:var(--c-orange-hover);color:#fff;}
.fhcl-pi-histoire__don svg{display:block;}

/* ============ Mini-cartes (droite) ============ */
.fhcl-pi-histoire__mini{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--c-cream);}
.fhcl-pi-histoire__mini-body{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:8px;}
.fhcl-pi-histoire__mini-title{margin:0;color:#000;font-size:24px;font-weight:var(--fw-semibold);line-height:1.2;letter-spacing:-.02em;}
.fhcl-pi-histoire__cta{margin-top:8px;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:53px;background:var(--c-orange);color:#fff;font-weight:var(--fw-medium);font-size:17px;line-height:1;padding:8px;border-radius:var(--r-sm);text-decoration:none;transition:background .2s;}
.fhcl-pi-histoire__cta:hover{background:var(--c-orange-hover);color:#fff;}
.fhcl-pi-histoire__cta svg{display:block;}

/* Mini « financé » : média photo + badges + verbatim + pastille montant */
.fhcl-pi-histoire__mini--photo .fhcl-pi-histoire__mini-media{position:relative;height:256px;flex:none;display:flex;flex-direction:column;padding:15px 14px;background-size:cover;background-position:center;}
.fhcl-pi-histoire__mini--photo .fhcl-pi-histoire__mini-media::after{content:"";position:absolute;inset:0;background:#151b27;mix-blend-mode:hard-light;opacity:.55;z-index:1;}
.fhcl-pi-histoire__badges{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:8px;}
.fhcl-pi-histoire__badges .fhcl-pi-histoire__loc{position:static;}
.fhcl-pi-histoire__verb{position:relative;z-index:2;margin:12px 0 auto;color:#fff;font-size:14px;font-weight:var(--fw-regular);line-height:1.45;}
.fhcl-pi-histoire__pill{position:relative;z-index:2;display:flex;flex-direction:column;gap:2px;background:rgba(255,255,255,.3);backdrop-filter:blur(2px);border-radius:var(--r-sm);padding:6px 16px;}
.fhcl-pi-histoire__pill span{font-size:14px;font-weight:var(--fw-medium);color:rgba(255,255,255,.6);}
.fhcl-pi-histoire__pill strong{font-size:24px;font-weight:var(--fw-bold);color:#fff;line-height:1.25;}

/* Mini « rétrospective » : fond orange plein */
.fhcl-pi-histoire__mini--retro{background:var(--c-orange);border-color:var(--c-orange-text);}
.fhcl-pi-histoire__retro-media{position:relative;height:256px;flex:none;display:flex;flex-direction:column;padding:15px 11px;}
/* La pastille de localisation était en position:absolute : la description
   remontait donc sous elle et venait la toucher. On la remet dans le flux, le
   flex gère alors l'espacement (recettage : « laisser un espace entre la
   localisation et la description du projet »). */
.fhcl-pi-histoire__retro-media .fhcl-pi-histoire__loc{position:static;align-self:flex-start;}
.fhcl-pi-histoire__retro-text{margin:14px 0 auto;color:#fff;font-size:14px;font-weight:var(--fw-semibold);line-height:1.45;}
.fhcl-pi-histoire__pill--ghost{background:rgba(0,0,0,.22);}
.fhcl-pi-histoire__pill--ghost span{color:#fff;}
.fhcl-pi-histoire__mini--retro .fhcl-pi-histoire__mini-body{background:var(--c-orange);}
.fhcl-pi-histoire__mini--retro .fhcl-pi-histoire__mini-title{color:#fff;}
.fhcl-pi-histoire__mini--retro .fhcl-tag--pilier{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(0,0,0,.14);}
.fhcl-pi-histoire__mini--retro .fhcl-pi-histoire__cta{background:#fff;color:var(--c-orange-text);}
.fhcl-pi-histoire__mini--retro .fhcl-pi-histoire__cta:hover{background:#fdf0e7;color:var(--c-orange-hover);}

/* ============ Responsive ============ */
@media(max-width:1100px){
	.fhcl-pi-histoire__grid{grid-template-columns:1fr;}
}
@media(max-width:900px){
	.fhcl-pi-histoire{padding:64px 0;}
	.fhcl-pi-histoire__wrap{padding:0 20px;}
	.fhcl-pi-histoire__deco{display:none;}
	.fhcl-pi-histoire__head{margin-bottom:32px;}
	.fhcl-pi-histoire__feat-ctas{flex-direction:column;}
	.fhcl-pi-histoire__col{grid-template-columns:1fr;}
	.fhcl-pi-histoire__obj span{font-size:20px;}
	.fhcl-pi-histoire__obj strong{font-size:26px;}
}

/* =========================================================
   Bloc « à cœur », Projets & Impacts (node 155:998)
   Carte crème (logo + texte) + 2 photos top-right,
   bande orange large (3 stats + bouton) chevauchant le bas.
   ========================================================= */
.fhcl-pi-acoeur{background:#fff;padding:88px 0 96px;}
.fhcl-pi-acoeur__inner{
  position:relative;max-width:1256px;margin:0 auto;padding:0 32px;
}

/* --- Rangée haute : carte crème (gauche) + 2 photos (droite) --- */
.fhcl-pi-acoeur__top{
  display:grid;grid-template-columns:minmax(0,724fr) minmax(0,617fr);
  gap:24px;align-items:center;
  /* on réserve l'espace bas pour la bande orange qui remonte */
  padding-bottom:120px;
}

/* --- Carte crème arrondie : logo manuscrit orange + paragraphe --- */
.fhcl-pi-acoeur__card{
  background:#FDF6F2;border-radius:var(--r-md,24px);
  padding:56px 56px 64px;
  display:flex;flex-direction:column;align-items:flex-start;
}
.fhcl-pi-acoeur__logo{display:block;width:100%;max-width:448px;height:auto;margin:0 0 32px;}
.fhcl-pi-acoeur__logo-txt{margin:0 0 32px;line-height:1;color:var(--c-orange-text);}
.fhcl-pi-acoeur__logo-txt span{display:block;font-weight:var(--fw-semibold);font-size:28px;letter-spacing:.04em;text-transform:uppercase;}
.fhcl-pi-acoeur__logo-txt em{display:block;margin-top:4px;font-style:normal;font-weight:var(--fw-bold);font-size:64px;}
.fhcl-pi-acoeur__lead{
  margin:0;max-width:448px;color:var(--c-ink-60);
  font-weight:var(--fw-light);font-size:18px;line-height:1.55;
}

/* --- Visuel composite (2 photos + décos cœur), en haut à droite (asset 168:2066) --- */
.fhcl-pi-acoeur__photos{align-self:center;}
.fhcl-pi-acoeur__photos-img{display:block;width:100%;height:auto;}

/* --- Bande orange large (remonte sur le bas de la carte crème) --- */
.fhcl-pi-acoeur__band{
  position:relative;z-index:2;
  width:100%;max-width:832px;margin:-150px auto 0;
  background:var(--c-orange);border-radius:var(--r-sm,8px);
  padding:48px 72px 44px;
  display:flex;flex-direction:column;align-items:center;gap:36px;
}

/* Rangée de 3 stats séparées par des points blancs */
.fhcl-pi-acoeur__stats{
  display:flex;align-items:flex-start;justify-content:center;gap:48px;
  flex-wrap:wrap;width:100%;
}
.fhcl-pi-acoeur__stat{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  width:160px;text-align:center;word-break:break-word;
}
.fhcl-pi-acoeur__num{
  font-weight:var(--fw-semibold);font-size:48px;line-height:1;color:#fff;
}
.fhcl-pi-acoeur__label{
  font-weight:var(--fw-medium);font-size:16px;line-height:1.25;
  color:#fff;
}
.fhcl-pi-acoeur__sep{
  flex:none;width:8px;height:8px;margin-top:20px;border-radius:50%;
  background:#fff;
}

/* Bouton blanc « Je fais un don » (texte orange + cœur), centré */
.fhcl-pi-acoeur__cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:#fff;color:var(--c-orange-text);
  font-family:var(--font-base);font-weight:var(--fw-medium);font-size:16px;
  text-decoration:none;border-radius:var(--r-sm);
  padding:14px 28px;border:1px solid transparent;
  transition:background .2s,color .2s,box-shadow .2s;
}
.fhcl-pi-acoeur__cta:hover{background:#FDF6F2;color:var(--c-orange-hover);box-shadow:0 6px 18px rgba(0,0,0,.12);}
.fhcl-pi-acoeur__heart{display:block;flex:none;}

/* --- Tablette : photos sous la carte, bande pleine largeur --- */
@media(max-width:1024px){
  .fhcl-pi-acoeur__top{grid-template-columns:1fr;gap:24px;padding-bottom:0;}
  .fhcl-pi-acoeur__photos{grid-template-columns:1fr 1fr;}
  .fhcl-pi-acoeur__photo{min-height:200px;}
  .fhcl-pi-acoeur__band{width:100%;margin:32px 0 0;padding:44px 40px 40px;}
}

/* --- Mobile --- */
@media(max-width:760px){
  .fhcl-pi-acoeur{padding:56px 0 64px;}
  .fhcl-pi-acoeur__card{padding:40px 28px 44px;align-items:center;text-align:center;}
  .fhcl-pi-acoeur__logo{margin-left:auto;margin-right:auto;}
  .fhcl-pi-acoeur__lead{max-width:none;}
  .fhcl-pi-acoeur__photos{grid-template-columns:1fr 1fr;gap:16px;}
  .fhcl-pi-acoeur__photo{min-height:160px;}
  .fhcl-pi-acoeur__band{padding:36px 24px 32px;gap:28px;}
  .fhcl-pi-acoeur__stats{gap:28px 16px;}
  .fhcl-pi-acoeur__sep{display:none;}
  .fhcl-pi-acoeur__stat{width:140px;}
  .fhcl-pi-acoeur__num{font-size:40px;}
}

/* === Section « Toutes les projets » (node 155:1002 / barre de filtres 155:1003 / grille 3 col) === */
.fhcl-pi-grid{padding:84px 0;}
.fhcl-pi-grid__wrap{max-width:1256px;margin:0 auto;padding:0 32px;}

/* En-tête : titre 64px navy à gauche + barre de filtres à droite (Figma : titre y=2831, barre y=2841 → +10px) */
.fhcl-pi-grid__head{display:flex;align-items:flex-start;justify-content:space-between;gap:60px;flex-wrap:wrap;margin-bottom:44px;}
.fhcl-pi-grid__title{margin:0;color:var(--c-navy);font-weight:var(--fw-semibold);font-size:clamp(34px,4.6vw,64px);line-height:1.0;}

/* Barre de filtres (Figma 155:1003) : 2 COLONNES de 2 onglets, remplissage colonne par colonne.
   col-gap 60px, row-gap 24px → ligne 1 « Tous | Financés », ligne 2 « En cours | Rétrospectives ». */
.fhcl-pi-grid__tabs{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-template-columns:none;column-gap:60px;row-gap:24px;padding-top:10px;}
.fhcl-pi-grid__tab{display:inline-flex;align-items:center;gap:16px;background:none;border:0;padding:0;margin:0;cursor:pointer;font-family:inherit;font-size:16px;font-weight:var(--fw-light);color:var(--c-ink);line-height:1.25;white-space:nowrap;transition:color .15s;}
.fhcl-pi-grid__tab:hover{color:var(--c-orange-text);}
.fhcl-pi-grid__tab.is-active{font-weight:var(--fw-medium);color:var(--c-ink);}

/* Pastille : carré 8px contour noir 1px par défaut, plein orange (sans contour) si actif (Figma 155:1006/1009) */
.fhcl-pi-grid__dot{flex:none;width:8px;height:8px;border:1px solid var(--c-ink);background:transparent;transition:background .15s,border-color .15s;}
.fhcl-pi-grid__tab.is-active .fhcl-pi-grid__dot{background:var(--c-orange);border-color:var(--c-orange-text);}
.fhcl-pi-grid__tab:hover .fhcl-pi-grid__dot{border-color:var(--c-orange-text);}

/* Grille 3 colonnes, gap 18px */
.fhcl-pi-grid__list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start;}
.fhcl-pi-grid__cell{display:flex;min-width:0;}
.fhcl-pi-grid__cell>.fhcl-pcard{width:100%;}
.fhcl-pi-grid__cell.is-hidden{display:none;}

.fhcl-pi-grid__empty{grid-column:1/-1;margin:0;color:var(--c-ink-60);font-size:16px;}

/* Tablette : 2 colonnes */
@media(max-width:1100px){
	.fhcl-pi-grid__list{grid-template-columns:repeat(2,1fr);}
}

/* Mobile */
@media(max-width:900px){
	.fhcl-pi-grid{padding:56px 0;}
	.fhcl-pi-grid__head{flex-direction:column;gap:28px;margin-bottom:32px;}
	.fhcl-pi-grid__tabs{grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-template-columns:none;column-gap:40px;row-gap:18px;padding-top:0;}
	.fhcl-pi-grid__list{grid-template-columns:1fr;gap:24px;}
}

/* ===== « À quoi servent vos dons », Avant / Après (.fhcl-pi-avantapres) ===== */
.fhcl-pi-avantapres{padding:96px 0;}
.fhcl-pi-avantapres__wrap{max-width:1256px;margin:0 auto;padding:0 32px;}

/* En-tête : surtitre + titre 56px + déco trait orange à droite */
.fhcl-pi-avantapres__head{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px;}
.fhcl-pi-avantapres__head-text{display:flex;flex-direction:column;align-items:flex-start;}
.fhcl-pi-avantapres__head .fhcl-h-surtitle{margin-bottom:18px;}
.fhcl-pi-avantapres__title{margin:0;color:var(--c-ink);font-weight:var(--fw-semibold);font-size:clamp(34px,4.6vw,56px);line-height:1.02;}
.fhcl-pi-avantapres__deco{flex:none;width:clamp(140px,16vw,232px);height:auto;align-self:center;pointer-events:none;}

/* Grille : carte sombre (1fr) + colonne citation (446px), cf. Figma 155:1730 */
.fhcl-pi-avantapres__grid{display:grid;grid-template-columns:minmax(0,1fr) 446px;gap:32px;align-items:stretch;}

/* ---- Carte sombre (image plein cadre + overlay) ---- */
.fhcl-pi-avantapres__media{position:relative;min-height:600px;border-radius:var(--r-md);overflow:hidden;background:var(--c-navy);isolation:isolate;}
.fhcl-pi-avantapres__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease;z-index:0;}
.fhcl-pi-avantapres__img.is-active{opacity:1;}
/* dégradé navy bas-gauche -> transparent haut-droit (cf. Figma) pour lisibilité du texte */
.fhcl-pi-avantapres__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(112deg,rgba(21,27,39,0) 0%,rgba(21,27,39,.05) 55%,rgba(21,27,39,.78) 100%),
             linear-gradient(to top,rgba(21,27,39,.92) 0%,rgba(21,27,39,.45) 32%,rgba(21,27,39,0) 60%);}

/* Barre du haut : toggle (gauche) + badge (droite) */
.fhcl-pi-avantapres__top{position:absolute;z-index:2;top:24px;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.fhcl-pi-avantapres__toggle{display:inline-flex;padding:4px;gap:4px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.fhcl-pi-avantapres__pill{appearance:none;border:0;cursor:pointer;font-family:inherit;font-size:14px;font-weight:var(--fw-medium);line-height:1;color:#fff;background:transparent;padding:8px 18px;border-radius:999px;transition:background .2s,color .2s;}
.fhcl-pi-avantapres__pill:hover{background:rgba(255,255,255,.16);}
.fhcl-pi-avantapres__pill.is-active{background:#fff;color:var(--c-navy);font-weight:var(--fw-semibold);}
.fhcl-pi-avantapres__pill:focus-visible{outline:2px solid var(--c-orange);outline-offset:2px;}
.fhcl-pi-avantapres__badge{max-width:60%;color:#fff;font-size:14px;font-weight:var(--fw-medium);line-height:1.2;padding:8px 14px;border-radius:var(--r-sm);background:rgba(21,27,39,.55);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);text-align:right;}

/* Bas : 2 blocs texte côte à côte */
.fhcl-pi-avantapres__blocks{position:absolute;z-index:2;left:32px;right:32px;bottom:32px;display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.fhcl-pi-avantapres__block{max-width:42ch;}
.fhcl-pi-avantapres__block-kicker{display:inline-block;margin-bottom:10px;font-size:13px;font-weight:var(--fw-semibold);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);}
.fhcl-pi-avantapres__block-kicker--now{color:var(--c-orange-on-dark);}
.fhcl-pi-avantapres__block-text{margin:0;color:#fff;font-size:15px;font-weight:var(--fw-light);line-height:1.5;}

/* ---- Colonne citation (droite) : texte nu sur fond page, PAS de carte (cf. Figma 155:1730) ---- */
.fhcl-pi-avantapres__quote{margin:0;display:flex;flex-direction:column;justify-content:center;gap:24px;padding:0;background:none;border-radius:0;}
.fhcl-pi-avantapres__quote-text{margin:0;position:relative;padding-left:18px;color:var(--c-ink);font-size:18px;font-weight:var(--fw-light);line-height:1.5;}
/* filet orange vertical ~66px, centré sur le bloc citation */
.fhcl-pi-avantapres__quote-text::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:66px;width:2px;border-radius:2px;background:var(--c-orange);}
.fhcl-pi-avantapres__author{display:flex;align-items:center;gap:18px;}
.fhcl-pi-avantapres__avatar{flex:none;width:42px;height:42px;border-radius:50%;object-fit:cover;}
.fhcl-pi-avantapres__author-id{display:flex;flex-direction:column;gap:4px;}
.fhcl-pi-avantapres__author-name{color:var(--c-orange-text);font-size:16px;font-weight:var(--fw-semibold);font-style:normal;line-height:1;}
.fhcl-pi-avantapres__author-role{color:var(--c-ink-60);font-size:14px;font-weight:var(--fw-light);font-style:normal;line-height:1;}

/* ---- Responsive ---- */
@media(max-width:1100px){
  .fhcl-pi-avantapres__grid{grid-template-columns:1fr;}
  .fhcl-pi-avantapres__quote{justify-content:flex-start;}
}
@media(max-width:900px){
  .fhcl-pi-avantapres{padding:64px 0;}
  .fhcl-pi-avantapres__wrap{padding:0 20px;}
  .fhcl-pi-avantapres__head{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:28px;}
  .fhcl-pi-avantapres__deco{display:none;}
  .fhcl-pi-avantapres__media{min-height:0;aspect-ratio:auto;}
  /* image en haut, blocs texte sous l'image (plus de superposition serrée) */
  .fhcl-pi-avantapres__media{display:flex;flex-direction:column;padding-bottom:0;}
  .fhcl-pi-avantapres__img{position:relative;height:auto;aspect-ratio:16/11;}
  .fhcl-pi-avantapres__img:not(.is-active){display:none;}
  .fhcl-pi-avantapres__scrim{display:none;}
  .fhcl-pi-avantapres__top{position:relative;inset:auto;top:auto;left:auto;right:auto;padding:16px 16px 0;}
  .fhcl-pi-avantapres__badge{max-width:none;background:rgba(21,27,39,.85);}
  .fhcl-pi-avantapres__blocks{position:relative;inset:auto;left:auto;right:auto;bottom:auto;grid-template-columns:1fr;gap:20px;padding:20px;}
  .fhcl-pi-avantapres__block{max-width:none;}
  .fhcl-pi-avantapres__quote-text::before{top:4px;transform:none;height:auto;bottom:4px;}
}

.fhcl-pi-podcast{position:relative;background:#FDF6F2;padding:96px 0 110px;overflow:hidden;}
.fhcl-pi-podcast__wrap{position:relative;z-index:2;max-width:1256px;margin:0 auto;padding:0 32px;}

/* Décor : cœur fil bleu (haut-gauche) + courbe bleue (haut, traversante) + carré navy (haut-droite) */
.fhcl-pi-podcast__deco{position:absolute;pointer-events:none;z-index:1;height:auto;}
.fhcl-pi-podcast__deco--heart{top:24px;left:0;width:420px;max-width:40vw;}
.fhcl-pi-podcast__deco--curve{top:108px;right:-40px;width:560px;max-width:48vw;}
/* Carrés déco haut-droite (même motif que la page Actualités, node 53:1642) :
   carré BLANC 113px collé au coin + carré NAVY 69px en escalier bas-gauche. */
.fhcl-pi-podcast__square{position:absolute;top:0;right:0;width:113px;height:113px;background:#fff;z-index:1;}
.fhcl-pi-podcast__square-accent{position:absolute;top:100%;right:100%;width:69px;height:69px;background:#003863;}

/* En-tête centré : surtitre (pastille orange) + titre 56px */
.fhcl-pi-podcast__head{margin-bottom:48px;text-align:center;}
.fhcl-pi-podcast__surtitle{display:inline-flex;align-items:center;border:1px solid rgba(0,56,99,.3);color:var(--c-blue);font-weight:var(--fw-regular);font-size:14px;padding:4px 8px;border-radius:var(--r-xs);margin-bottom:16px;}
.fhcl-pi-podcast__title{margin:0;color:var(--c-ink);font-weight:var(--fw-semibold);font-size:56px;line-height:1.04;letter-spacing:-.01em;}

/* Grille de 3 cartes */
.fhcl-pi-podcast__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.fhcl-pi-podcast__card{display:flex;flex-direction:column;}

/* Média 3:2 (≈407×264) + overlay + play, coins francs */
.fhcl-pi-podcast__media{position:relative;display:block;aspect-ratio:407/264;overflow:hidden;text-decoration:none;}
.fhcl-pi-podcast__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
.fhcl-pi-podcast__overlay{position:absolute;inset:0;background:rgba(0,0,0,.3);transition:background .25s ease;}
.fhcl-pi-podcast__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;display:block;transition:transform .25s ease;}
.fhcl-pi-podcast__play svg{display:block;width:100%;height:100%;}
a.fhcl-pi-podcast__media:hover img{transform:scale(1.04);}
a.fhcl-pi-podcast__media:hover .fhcl-pi-podcast__overlay{background:rgba(0,0,0,.22);}
a.fhcl-pi-podcast__media:hover .fhcl-pi-podcast__play{transform:translate(-50%,-50%) scale(1.06);}

/* Corps sous l'image */
.fhcl-pi-podcast__body{padding-top:8px;}
.fhcl-pi-podcast__meta{display:flex;align-items:center;gap:16px;margin-bottom:8px;}
.fhcl-pi-podcast__badge{display:inline-flex;align-items:center;justify-content:center;background:#003863;color:#fff;font-weight:var(--fw-regular);font-size:14px;line-height:1;padding:4px 8px;border-radius:var(--r-xs);}
.fhcl-pi-podcast__date,.fhcl-pi-podcast__duree{color:var(--c-ink-60);font-weight:var(--fw-light);font-size:14px;line-height:1;white-space:nowrap;}
.fhcl-pi-podcast__duree{display:inline-flex;align-items:center;gap:6px;}
.fhcl-pi-podcast__timer{flex:none;}
.fhcl-pi-podcast__dot{flex:none;width:4px;height:4px;background:var(--c-ink);}
.fhcl-pi-podcast__ctitle{margin:0;color:#180E09;font-weight:var(--fw-medium);font-size:24px;line-height:24px;}
.fhcl-pi-podcast__ctitle a{color:inherit;text-decoration:none;transition:color .2s;}
.fhcl-pi-podcast__ctitle a:hover{color:var(--c-orange-text);}
.fhcl-pi-podcast__chapeau{margin:8px 0 0;color:var(--c-ink-60);font-weight:var(--fw-light);font-size:16px;line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;}

@media(max-width:900px){
	.fhcl-pi-podcast{padding:64px 0 72px;}
	.fhcl-pi-podcast__title{font-size:38px;}
	.fhcl-pi-podcast__grid{grid-template-columns:1fr;gap:28px;}
	/* Décos cœur+courbe masquées en mobile (en-tête centré → elles chevauchaient le titre),
	   comme les décos cœur de l'intro home. Les carrés déco restent. */
	.fhcl-pi-podcast__deco--heart{display:none;}
	.fhcl-pi-podcast__deco--curve{display:none;}
	.fhcl-pi-podcast__square{width:72px;height:72px;}
	.fhcl-pi-podcast__square-accent{display:block;width:44px;height:44px;}
	.fhcl-pi-podcast__head{margin-bottom:32px;}
}

/* ── Recherche par mots-clés de la grille projets (demande Fondation, même
   principe que la liste des actualités). Le filtrage est instantané : tous les
   projets sont déjà dans la page. ── */
.fhcl-pi-grid__tools{display:flex;flex-direction:column;gap:20px;}
.fhcl-pi-grid__search{display:flex;gap:8px;align-items:stretch;max-width:520px;}
.fhcl-pi-grid__input{
	flex:1 1 auto;min-width:0;padding:12px 16px;border:1px solid rgba(24,14,9,.22);
	border-radius:var(--r-sm);background:#fff;color:var(--c-ink);
	font-family:inherit;font-size:15px;
}
.fhcl-pi-grid__input::placeholder{color:rgba(24,14,9,.6);}
.fhcl-pi-grid__input:focus{outline:2px solid var(--c-orange);outline-offset:2px;border-color:var(--c-orange-text);}
.fhcl-pi-grid__submit{
	flex:none;display:inline-flex;align-items:center;gap:8px;padding:12px 18px;
	border:0;border-radius:var(--r-sm);background:var(--c-orange);color:#fff;
	font-family:inherit;font-size:15px;font-weight:var(--fw-medium);cursor:pointer;
	transition:background .2s;
}
.fhcl-pi-grid__submit:hover{background:var(--c-orange-hover);}
.fhcl-pi-grid__count{margin:12px 0 0;color:var(--c-ink-60);font-size:14px;}
.fhcl-pi-grid__noresult{
	grid-column:1/-1;margin:32px 0;text-align:center;
	color:var(--c-ink-60);font-size:16px;
}
@media(max-width:900px){
	.fhcl-pi-grid__search{flex-wrap:wrap;max-width:none;}
	.fhcl-pi-grid__input{flex:1 1 100%;}
	.fhcl-pi-grid__submit{width:100%;justify-content:center;}
}