/**
 * Single Programmes — Hero
 */

.ri-programme-hero-breadcrumb {
	padding: 24px 24px 24px 64px;
	background-color: var(--ri-color-grey-soft);
}

.ri-programme-hero {
	width: 100%;
	padding-block: 0 var(--ri-block-padding-xl);
	background-color: var(--ri-color-grey-soft);
}

/* ========================================
   Inner : 540px de hauteur, position relative
   ======================================== */

.ri-programme-hero .inner {
	position: relative;
	height: 540px;
}

/* ========================================
   Image de fond (featured image) — plein inner
   ======================================== */

.ri-programme-hero .hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.ri-programme-hero .hero-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.ri-programme-hero .deco {
	position: absolute;
	width: 16px;
	background-color: var(--ri-color-grey-soft);
	z-index: 1;
	pointer-events: none;
}

.ri-programme-hero .deco--tl {
	top: 0;
	left: 0;
	height: 81px;
}

.ri-programme-hero .deco--br {
	bottom: 0;
	right: 0;
	height: 42px;
}

/* ========================================
   Haut gauche : surtitre + titre
   ======================================== */

.ri-programme-hero .hero-content {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 484px;
	height: 218px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: var(--ri-space-md);
	background-color: var(--ri-color-grey-soft);
}

.ri-programme-hero .surtitre {
	align-self: stretch;
	margin: 0;
	font: 700 14px/1.2 var(--ri-font-1);
	text-transform: none;
	letter-spacing: normal;
}

.ri-programme-hero .titre {
	align-self: stretch;
	margin: 0;
	font: 700 80px/0.8 var(--ri-font-1);
	text-transform: uppercase;
}

/* ========================================
   Bas droite : référent
   ======================================== */

.ri-programme-hero .hero-referent {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	height: 140px;
	width: 650px;
	background-color: var(--ri-color-grey-soft);
}

.ri-programme-hero .referent-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	transform: translateX(-70px);
}

.ri-programme-hero .referent-avatar {
	flex-shrink: 0;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	border: 10px solid var(--ri-color-yellow);
	overflow: hidden;
	box-sizing: border-box;
}

.ri-programme-hero .referent-img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.ri-programme-hero .referent-img--placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--ri-color-gray);
	border-radius: 50%;
}

.ri-programme-hero .referent-info {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
}

.ri-programme-hero .referent-nom {
	font: 700 24px/1.4 var(--ri-font-1);
}

.ri-programme-hero .referent-role {
	font: 500 var(--ri-size-text-body-xl) / 1.5 var(--ri-font-1);
}


/* ========================================
   Témoignage du coordinateur
   ======================================== */

.ri-programme-temoignage {
	position: relative;
	width: 100%;
	padding-block: var(--ri-block-padding-xl);
	background-color: var(--ri-color-yellow);
	overflow: hidden;
}

.ri-programme-temoignage .deco {
	position: absolute;
	top: 50%;
	right: -120px;
	width: 509px;
	height: 452px;
	opacity: 0.3;
	transform: translateY(-50%) rotate(-90deg);
	pointer-events: none;
	user-select: none;
}

.ri-programme-temoignage .label {
	margin: 0 0 32px;
	font: 700 24px/1.3 var(--ri-font-1);
}

.ri-programme-temoignage .inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}

.ri-programme-temoignage .auteur {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 16px;
}

.ri-programme-temoignage .avatar {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
}

.ri-programme-temoignage .avatar-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.ri-programme-temoignage .avatar-img--placeholder {
	background-color: var(--ri-color-teal);
	opacity: 0.2;
}

.ri-programme-temoignage .identite {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ri-programme-temoignage .nom,
.ri-programme-temoignage .role {
	font: 700 18px/1.4 var(--ri-font-1);
}

.ri-programme-temoignage .citation {
	margin: 0;
	font: 500 var(--ri-size-title-h2) / 1.5 var(--ri-font-1);
	font-style: italic;
	color: var(--ri-color-teal);
	max-width: 80%;
}

/* ========================================
   Contexte et finalité de nos travaux
   ======================================== */

.ri-programme-contexte {
	width: 100%;
	padding-block: var(--ri-block-padding-xl);
	background-color: var(--ri-color-teal);
}

.ri-programme-contexte .section-titre {
	margin: 0 0 var(--ri-space-lg);
	font: 700 var(--ri-size-title-h2) / 1.4 var(--ri-font-1);
}

.ri-programme-contexte .titre-jaune {
	color: var(--ri-color-yellow);
}

.ri-programme-contexte .titre-clair {
	color: var(--ri-color-grey-mid);
}

.ri-programme-contexte .cartes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.ri-programme-contexte .carte {
	background-color: var(--ri-color-grey-soft);
	display: flex;
	flex-direction: column;
}

.ri-programme-contexte .carte-body {
	flex: 1;
	padding: var(--ri-space-md);
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ri-programme-contexte .carte-objectif {
	padding: 24px;
	background-color: var(--ri-color-grey);
}

.ri-programme-contexte .objectif-texte {
	margin: 0;
	font: 400 16px/1.5 var(--ri-font-1);
}

.ri-programme-contexte .objectif-label {
	font-weight: 700;
	color: var(--ri-color-yellow);
}

.ri-programme-contexte .icone {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
}

.ri-programme-contexte .icone-img {
	display: block;
	width: 40px;
	height: 40px;
}

.ri-programme-contexte .carte-titre {
	margin: 0;
	font: 700 var(--ri-size-text-body-xxl) / 1.2 var(--ri-font-1);
}

.ri-programme-contexte .carte-texte {
	font: 400 var(--ri-size-text-body) / 1.5 var(--ri-font-1);
}

.ri-programme-contexte .carte-texte p {
	margin: 0 0 16px;
}

.ri-programme-contexte .carte-texte p:last-child {
	margin-bottom: 0;
}

.ri-programme-contexte .carte-texte ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ri-programme-contexte .carte-texte li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	font: 400 var(--ri-size-text-body) / 1.4 var(--ri-font-1);
}

.ri-programme-contexte .carte-texte li::before {
	content: "";
	display: block;
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	margin-top: 7px;
	background-color: var(--ri-color-yellow);
}

/* ========================================
   Projets phares
   ======================================== */

.ri-programme-projets {
	width: 100%;
	padding-block: var(--ri-block-padding-xl);
}

.ri-programme-projets .section-titre {
	margin: 0 0 var(--ri-space-lg);
	font: 700 var(--ri-size-title-h2) / 1.4 var(--ri-font-1);
}

.ri-programme-projets .projets-list {
	display: flex;
	flex-direction: column;
	gap: var(--ri-space-lg);
}

.ri-programme-projets .projet {
	display: flex;
	align-items: stretch;
	gap: var(--ri-space-lg);
	background-color: var(--ri-color-grey-soft);
	overflow: hidden;
	min-height: 540px;
	padding: var(--ri-space-md);
}

.ri-programme-projets .projet-media {
	flex-shrink: 0;
	width: 302px;
}

.ri-programme-projets .projet-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ri-programme-projets .projet-contenu {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--ri-space-md);
}

.ri-programme-projets .projet-nom {
	margin: 0;
	font: 700 var(--ri-size-title-h2) / 1.4 var(--ri-font-1);
	max-width: 411px;
}

.ri-programme-projets .projet-colonnes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
	flex: 1;
}

.ri-programme-projets .col-label {
	display: block;
	margin-bottom: var(--ri-space-md);
	font: 400 12px/normal var(--ri-font-1);
	color: var(--ri-color-teal);
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-color: var(--ri-color-yellow);
	text-decoration-thickness: 10%;
	text-underline-offset: 25%;
	text-underline-position: from-font;
	text-decoration-skip-ink: auto;
}

.ri-programme-projets .col-texte {
	margin: 0;
	font: 500 18px/1.5 var(--ri-font-1);
}

.ri-programme-projets .objectifs-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ri-programme-projets .objectifs-list li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	font: 400 var(--ri-size-text-body) / 1.4 var(--ri-font-1);
}

.ri-programme-projets .objectifs-list li::before {
	content: "";
	display: block;
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	margin-top: 7px;
	background-color: var(--ri-color-yellow);
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 782px) {

	.ri-programme-hero {
		padding-block: 24px;
	}

	.ri-programme-hero .inner {
		height: auto;
		display: flex;
		flex-direction: column;
	}

	/* hero-content : flux normal, padding latéral */
	.ri-programme-hero .hero-content {
		position: static;
		width: auto;
		height: auto;
	}

	.ri-programme-hero .surtitre {
		font-size: 12px;
		line-height: 1.2;
	}

	.ri-programme-hero .titre {
		font-size: 32px;
		line-height: 1.2;
		padding-bottom: 24px;
	}

	/* hero-media : flux normal, pleine largeur */
	.ri-programme-hero .hero-media {
		position: relative;
		height: 160px;
		margin-inline: calc(-1 * var(--ri-container-padding, 1rem));
	}

	/* hero-referent : flux normal, pas de transform */
	.ri-programme-hero .hero-referent {
		position: static;
		width: auto;
		height: auto;
		padding-top: 16px;
	}

	.ri-programme-hero .referent-inner {
		transform: none;
		gap: 16px;
	}

	.ri-programme-hero .referent-avatar {
		width: 72px;
		height: 72px;
		border-width: 4px;
	}

	.ri-programme-hero .referent-info {
		flex: 1;
	}

	.ri-programme-hero .referent-nom {
		font-size: 15px;
		line-height: 1.5;
	}

	.ri-programme-le-projet .colonnes {
		grid-template-columns: 1fr;
		gap: var(--ri-space-lg);
	}

	.ri-programme-temoignage .deco {
		display: none;
	}

	.ri-programme-temoignage .label {
		font-size: 18px;
		margin-bottom: 24px;
	}

	.ri-programme-temoignage .inner {
		gap: 24px;
	}

	.ri-programme-temoignage .nom,
	.ri-programme-temoignage .role {
		font-size: 15px;
	}

	.ri-programme-contexte .cartes {
		grid-template-columns: 1fr;
	}

	.ri-programme-projets .projet {
		flex-direction: column;
		min-height: 0;
	}

	.ri-programme-projets .projet-media {
		width: 100%;
		height: 220px;
	}

	.ri-programme-projets .projet-colonnes {
		grid-template-columns: 1fr;
		gap: var(--ri-space-md);
	}

	.ri-programme-projets .col-texte {
		font-size: 14px;
	}
}

/* ========================================
   Ajustements de spacing single programme
   ======================================== */

.single-nos-programmes .ri-titre-texte {
	padding-bottom: 0;
}

.single-nos-programmes .ri-texte-colonnes {
	padding-top: 0;
}

/* ========================================
   Nav ancres — fixed mobile
   ======================================== */

@media (max-width: 782px) {

	.single-nos-programmes .ri-titre-texte {
		padding-bottom: var(--ri-block-padding-xl);
	}

	.single-nos-programmes .ri-nav-ancres {
		position: fixed;
		top: var(--ri-header-height, 60px);
		left: 0;
		right: 0;
		z-index: 200;
		box-shadow: 0 4px 20px rgba(208, 208, 208, 0.5);
		border: none;
		transition: top var(--ri-transition-slow);
	}

	.single-nos-programmes .ri-nav-ancres.header-hidden {
		top: 0;
	}

	.single-nos-programmes .ri-nav-ancres .container {
		padding-inline: 0;
		width: 100%;
		max-width: 100%;
		margin-inline: 0;
		overflow: hidden;
	}

	.single-nos-programmes .ri-nav-ancres .nav-inner {
		justify-content: flex-start;
		padding: 0;
		gap: 32px;
		height: 60px;
		box-sizing: border-box;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.single-nos-programmes .ri-nav-ancres .nav-inner::-webkit-scrollbar {
		display: none;
	}

	.single-nos-programmes .ri-nav-ancres .nav-lien {
		font: 400 14px / 21px var(--ri-font-1);
		opacity: 0.5;
		text-decoration: none;
	}

	.single-nos-programmes .ri-nav-ancres .nav-lien:first-child {
		margin-left: 16px;
	}

	.single-nos-programmes .ri-nav-ancres .nav-lien:last-child {
		margin-right: 16px;
	}

	.single-nos-programmes .ri-nav-ancres .nav-lien.is-active {
		font-weight: 700;
		text-decoration-line: underline;
		text-decoration-style: solid;
		text-decoration-color: var(--ri-color-yellow);
		text-decoration-thickness: 10%;
		text-decoration-skip-ink: auto;
		opacity: 1;
	}
}