/**
 * Single Projet — CPT "projets"
 * Styles propres à ce template uniquement.
 * Les blocs réutilisés (ri-hero-banner, ri-mosaique, etc.) ont leur propre CSS.
 */

/* Source unique de la hauteur fluide du hero pour ce template : consommée
   par le hero (.ri-hero-banner) ET par la marge négative de la méta. */
.single-nos-projets {
	--ri-hero-featured-h: clamp(200px, max(2.06rem + 21.37vw, -32.59rem + 65.71vw), 530px);
}

/* ========================================
   Sections communes
   ======================================== */

.ri-projet-lots,
.ri-projet-etapes,
.ri-projet-partenaires {
	width: 100%;
	padding-block: var(--ri-block-padding-xl);
}

.ri-projet-intro {
	padding-block: var(--ri-block-padding-xl) 48px;
	background-color: var(--ri-color-white);
}

.ri-projet-planning {
	padding-block: 0 48px;
}

/* ========================================
   Hero meta — subvention + image sous le banner
   ======================================== */

.ri-projet-hero-meta {
	position: relative;
	overflow: visible;
	z-index: 2;

	/* Remonte la méta par-dessus le hero en suivant sa hauteur fluide
	   (--ri-hero-featured-h) : laisse une bande constante de 140px de hero
	   visible au-dessus, au lieu d'un -390px figé qui ne s'alignait qu'à
	   une seule largeur de viewport. */
	margin-top: calc(140px - var(--ri-hero-featured-h));
	padding-top: 0;
	padding-bottom: 0;
}

.ri-projet-hero-meta .ri-container {
	display: grid;
	grid-template-columns: 730fr 550fr;
	align-items: end;
	gap: 24px;
}

.ri-projet-hero-meta .subvention {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.ri-projet-hero-meta .subvention-texte {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ri-projet-hero-meta .subvention-label {
	margin: 0;
	font: 700 var(--ri-size-suptitle) / 1.2 var(--ri-font-1);
}

.ri-projet-hero-meta .subvention-nom {
	margin: 0;
	font: 400 var(--ri-size-text-body-sm) / 1.4 var(--ri-font-1);
}

.ri-projet-hero-meta .subvention-logos {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ri-projet-hero-meta .subvention-logo {
	display: block;
	max-width: 163px;
	max-height: 51px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.ri-projet-hero-meta .meta-image {
	align-self: end;
}

.ri-projet-hero-meta .projet-featured-img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.ri-projet-hero-meta .meta-aside {
	align-self: end;
	width: 100%;
}

@media (max-width: 782px) {

	/* Hero mobile = hauteur fixe 260px (cf. ri-hero-banner.css). On met à
	   jour la variable : la marge négative de la méta suit automatiquement
	   via le même calc(140px - var()). */
	.single-nos-projets {
		--ri-hero-featured-h: 260px;
	}

	.ri-projet-hero-meta .ri-container {
		display: flex;
		flex-direction: column;
		gap: var(--ri-space-md);
	}
}

/* ========================================
   Intro
   ======================================== */

.ri-projet-intro .intro-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--ri-space-lg);
	margin-bottom: var(--ri-space-lg);
}

.ri-projet-intro .intro-content {
	display: flex;
	flex-direction: column;
	gap: var(--ri-space-md);
}

.ri-projet-intro .surtitre,
.ri-projet-intro .titre {
	margin: 0;
}

.ri-projet-intro .surtitre {
	font: 700 var(--ri-size-suptitle) / 1.2 var(--ri-font-1);
}

.ri-projet-intro .titre {
	font: 700 var(--ri-size-title-h1-xl) / 0.8 var(--ri-font-2);
}

.ri-projet-intro .logo {
	flex-shrink: 0;
	margin: 0;
	width: 188px;
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ri-projet-intro .logo-img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.ri-projet-intro .description,
.ri-projet-intro .precisions {
	font: 500 var(--ri-size-title-h2) / 1.4 var(--ri-font-1);
}

.ri-projet-intro .description {
	color: var(--ri-color-grey);
}

.ri-projet-intro .precisions {
	margin-top: 65px;
}

.ri-projet-intro .description p,
.ri-projet-intro .precisions p {
	margin: 0 0 var(--ri-space-sm);
}

.ri-projet-intro .description p:last-child,
.ri-projet-intro .precisions p:last-child {
	margin-bottom: 0;
}

/* ========================================
   Planning
   ======================================== */

.ri-projet-planning .planning-inner {
	outline: 1px solid var(--ri-color-grey);
	padding: var(--ri-space-md);
	display: flex;
	flex-direction: column;
	gap: var(--ri-gap-lg);
}

.ri-projet-planning .planning-titre {
	margin: 0;
	font: 700 var(--ri-size-title-h2) / 1.4 var(--ri-font-1);
}

.ri-projet-planning .planning-barres {
	display: flex;
	flex-direction: column;
	gap: var(--ri-sep-gap);
}

.ri-projet-planning .barre {
	display: block;
	height: var(--ri-sep-width);
	background-color: var(--ri-sep-color);
}

.ri-projet-planning .planning-cols {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 8px;
}

.ri-projet-planning .col {
	display: flex;
	flex-direction: column;
	gap: var(--ri-gap-md);
}

.ri-projet-planning .col--fin {
	align-items: flex-end;
	text-align: right;
}

.ri-projet-planning .col-label {
	margin: 0;
	font: 500 var(--ri-size-text-body-xxl) / 1.2 var(--ri-font-1);
}

.ri-projet-planning .col-date {
	font: 700 clamp(32px, 1.56rem + 1.96vw, 50px) / 1 var(--ri-font-2);
}

/* ========================================
   Lots techniques (accordéon)
   ======================================== */

.ri-projet-lots {
	background-color: var(--ri-color-grey-mid);
}

.ri-projet-lots .lots-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--ri-space-lg);
	margin-bottom: var(--ri-space-md);
}

.ri-projet-lots .lots-header .titre {
	margin: 0;
	font: 700 var(--ri-size-title-h2) / 1.4 var(--ri-font-1);
	color: var(--ri-color-teal);
	flex: 0 0 411px;
}

.ri-projet-lots .lots-header .description {
	margin: 0;
	font: 400 var(--ri-size-body) / 1.7 var(--ri-font-1);
	text-align: right;
	flex: 1 1 auto;
	align-self: center;
}

.ri-projet-lots .accordeon {
	display: flex;
	flex-direction: column;
	gap: var(--ri-gap-md);
}

.ri-projet-lots .lot-item .lot-header {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: var(--ri-space-md);
	background-color: var(--ri-color-grey-soft);
	border: none;
	cursor: pointer;
	text-align: left;
	color: var(--ri-color-teal);
}

.ri-projet-lots .lot-header-content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ri-projet-lots .lot-item.is-open .lot-header {
	background-color: var(--ri-color-white);
}

.ri-projet-lots .lot-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.ri-projet-lots .lot-numero {
	font: 700 var(--ri-size-text-body-xl) / 1.5 var(--ri-font-1);
	color: var(--ri-color-grey);
	white-space: nowrap;
}

.ri-projet-lots .lot-partenaire {
	font: 700 var(--ri-size-title-h2) / 1.2 var(--ri-font-2);
}

.ri-projet-lots .lot-nom {
	font: 700 var(--ri-size-text-body-xxl) / 1.4 var(--ri-font-1);
	max-width: 730px;
}

.ri-projet-lots .chevron {
	flex-shrink: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 9px 7px 0;
	border-color: var(--ri-color-teal) transparent transparent;
	transition: transform var(--ri-transition-base), border-color var(--ri-transition-base);
}

.ri-projet-lots .lot-item.is-open .chevron {
	transform: rotate(180deg);
	border-color: var(--ri-color-yellow) transparent transparent;
}

.ri-projet-lots .lot-body {
	padding: 0 24px 24px;
	background-color: var(--ri-color-white);
}

.ri-projet-lots .lot-description {
	font: 500 var(--ri-size-text-body-xl) / 1.5 var(--ri-font-1);
}

.ri-projet-lots .lot-body .lot-description p {
	margin: 0 0 16px;
}

.ri-projet-lots .lot-body .lot-description p:last-child {
	margin-bottom: 0;
}

.ri-projet-lots .lot-description ul {
	list-style: none;
	margin: 0;
	padding-left: 48px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ri-projet-lots .lot-description li {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.ri-projet-lots .lot-description li::before {
	content: "";
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	margin-top: 9px;
	background-color: var(--ri-color-yellow);
}

/* ========================================
   Étapes — Timeline 2 colonnes
   ======================================== */

.ri-projet-etapes {
	background-color: var(--ri-color-teal);
	overflow-x: auto;
}

.ri-projet-etapes .etapes-top {
	display: flex;
	flex-direction: column;
	gap: var(--ri-space-md);
	margin-bottom: 16px;
}

.ri-projet-etapes .etapes-top .titre {
	margin: 0;
	font: 700 var(--ri-size-title-h2) / 1.4 var(--ri-font-1);
	color: var(--ri-color-white);
}

.ri-projet-etapes .legende {
	display: flex;
	justify-content: space-between;
}

.ri-projet-etapes .legende-item {
	display: flex;
	align-items: center;
	gap: 16px;
	font: 500 var(--ri-size-title-h2) / 1.4 var(--ri-font-1);
}

.ri-projet-etapes .legende-gauche {
	color: var(--ri-color-yellow);
}

.ri-projet-etapes .legende-droite {
	color: var(--ri-color-grey-mid);
}

/* Dots légende + points axe : même forme */
.ri-projet-etapes .dot,
.ri-projet-etapes .axe-point {
	width: 16px;
	height: 16px;
	border-radius: 50%;
}

.ri-projet-etapes .dot {
	flex-shrink: 0;
}

.ri-projet-etapes .dot--jaune,
.ri-projet-etapes .axe-point--projet {
	background-color: var(--ri-color-yellow);
}

.ri-projet-etapes .dot--blanc,
.ri-projet-etapes .axe-point--contribution {
	background-color: var(--ri-color-white);
}

/* Timeline */

.ri-projet-etapes .timeline {
	display: grid;
	grid-template-columns: 1fr 80px 1fr;
	row-gap: 80px;
	position: relative;
	min-width: 350px;
}

/* Lignes verticales (axe gris, fondu sur les extrémités) */
.ri-projet-etapes .timeline::before,
.ri-projet-etapes .timeline::after {
	content: "";
	position: absolute;
	inset: 0 auto;
	width: 3px;
	background-color: #5d7c7d;
	mask-image: linear-gradient(transparent 0%, #000 10%, #000 90%, transparent 100%);
	pointer-events: none;
	z-index: 0;
}

.ri-projet-etapes .timeline::before {
	left: calc(50% - 6px);
}

.ri-projet-etapes .timeline::after {
	left: calc(50% + 3px);
}

/* Jauge jaune — se remplit avec le scroll via --ri-jauge-progress.
   Superposée aux 2 lignes, même fondu, révélée par clip-path. */
.ri-projet-etapes .timeline .jauge {
	position: absolute;
	top: 0;
	width: 3px;
	height: 100%;
	pointer-events: none;
	z-index: 1;
	background-color: var(--ri-color-yellow);
	mask-image: linear-gradient(transparent 0%, #000 10%, #000 90%, transparent 100%);
	clip-path: inset(0 0 calc(100% - var(--ri-jauge-progress, 0%)) 0);
}

.ri-projet-etapes .timeline .jauge-gauche {
	left: calc(50% - 6px);
}

.ri-projet-etapes .timeline .jauge-droite {
	left: calc(50% + 3px);
}

/* Lignes mobiles : cachées en desktop */
.ri-projet-etapes .timeline-ligne {
	display: none;
}

/* Mode JS : les cartes et points sont en position absolue */
.ri-projet-etapes .timeline.is-js-layout {
	display: block;
}

/* Point */
.ri-projet-etapes .axe-point {
	align-self: start;
	justify-self: center;
	margin-top: 50px;
	position: relative;
	z-index: 2;
}

/* Cartes */
.ri-projet-etapes .etape-card {
	padding: 32px;
	display: flex;
	flex-direction: column;
	position: relative;
	align-self: start;
}

.ri-projet-etapes .card--projet {
	outline: 1px solid var(--ri-color-yellow);
	background-color: transparent;
	align-items: flex-end;
}

.ri-projet-etapes .card--contribution {
	background-color: #d4dbdb;
	align-items: flex-start;
}

/* Traits horizontaux carte → point */
.ri-projet-etapes .card--contribution::after,
.ri-projet-etapes .card--projet::after {
	content: "";
	position: absolute;
	top: 58px;
	width: 32px;
	height: 1px;
	pointer-events: none;
}

.ri-projet-etapes .card--projet::after {
	right: -32px;
	background-color: var(--ri-color-yellow);
}

.ri-projet-etapes .card--contribution::after {
	left: -32px;
	background-color: var(--ri-color-grey-mid);
}

/* Textes cartes */
.ri-projet-etapes .card-meta {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 16px;
}

.ri-projet-etapes .card--projet .card-meta {
	align-items: flex-end;
}

.ri-projet-etapes .card-date {
	font: 700 var(--ri-size-text-body-xxl) / 1.2 var(--ri-font-1);
	color: var(--ri-color-teal);
}

.ri-projet-etapes .card-lot {
	font: 700 var(--ri-size-text-body-xxl) / 1.2 var(--ri-font-1);
	font-weight: 500;
}

.ri-projet-etapes .card-titre,
.ri-projet-etapes .card-sous-titre {
	margin: 0;
}

.ri-projet-etapes .card-titre {
	font: 700 var(--ri-size-title-special) / 1 var(--ri-font-2);
	margin-bottom: 8px;
}

.ri-projet-etapes .card-sous-titre {
	font: 500 var(--ri-size-text-body-xl) / 1.5 var(--ri-font-1);
}

.ri-projet-etapes .card--projet .card-date {
	color: #d4dbdb;
}

.ri-projet-etapes .card--projet .card-lot {
	color: var(--ri-color-yellow);
}

.ri-projet-etapes .card--projet .card-titre,
.ri-projet-etapes .card--projet .card-sous-titre {
	color: var(--ri-color-white);
	text-align: right;
}

@media (min-width: 1250px) {

	.ri-projet-etapes .card--projet .card-titre {
		max-width: 60%;
	}
}

/* ========================================
   Partenaires
   ======================================== */

.ri-projet-partenaires {
	background-color: var(--ri-color-white);
}

.ri-projet-partenaires .ri-container {
	display: flex;
	flex-direction: column;
	gap: var(--ri-gap-lg);
}

.ri-projet-partenaires .partenaires-header {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ri-projet-partenaires .partenaires-header .titre,
.ri-projet-partenaires .partenaires-header .description {
	margin: 0;
}

.ri-projet-partenaires .partenaires-header .titre {
	font: 700 var(--ri-size-title-h2) / 1.4 var(--ri-font-1);
}

.ri-projet-partenaires .partenaires-header .description {
	font: 500 var(--ri-size-text-body-xl) / 1.5 var(--ri-font-1);
}

.ri-projet-partenaires .colonnes {
	display: grid;
	grid-template-columns: 1fr auto 1fr auto 1fr;
	align-items: stretch;
	gap: var(--ri-space-lg);
}

.ri-projet-partenaires .colonne {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ri-projet-partenaires .separateur {
	display: flex;
	flex-direction: row;
	gap: var(--ri-sep-gap);
	align-self: stretch;
}

.ri-projet-partenaires .separateur::before,
.ri-projet-partenaires .separateur::after {
	content: "";
	display: block;
	width: var(--ri-sep-width);
	background-color: var(--ri-sep-color);
}

.ri-projet-partenaires .partenaire-badge {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

.ri-projet-partenaires .partenaire-nom {
	display: inline-block;
	padding: 0 8px;
	background-color: var(--ri-color-grey-soft);
	border-radius: var(--ri-radius-md);
	font: 700 var(--ri-size-text-body-xl) / 1.5 var(--ri-font-1);
	text-decoration: none;
}

.ri-projet-partenaires .partenaire-pays {
	font: 400 var(--ri-size-suptitle) / 1.2 var(--ri-font-1);
}

.ri-projet-partenaires .partenaires-liens {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var(--ri-space-lg);
}


.ri-projet-partenaires .btn-principal {
	display: inline-block;
	padding: 12px 16px;
	background-color: var(--ri-color-teal);
	font: 700 var(--ri-size-text-body-sm) / 1 var(--ri-font-1);
	color: var(--ri-color-grey-mid);
	text-decoration: none;
	transition: background-color var(--ri-transition-base), color var(--ri-transition-base);
}

.ri-projet-partenaires .btn-principal:hover {
	background-color: var(--ri-color-yellow);
}

.single-nos-projets .ri-mosaique {
	padding-block: 0 var(--ri-block-padding-xl);
}

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

@media (max-width: 782px) {

	.ri-projet-hero-meta .subvention-texte {
		gap: 0;
	}

	.ri-projet-hero-meta .subvention-nom {
		font-size: 12px;
	}

	.ri-projet-hero-meta .subvention-logo {
		max-width: 90px;
		max-height: none;
	}

	.ri-projet-intro .intro-header {
		align-items: flex-start;
	}

	.ri-projet-intro .logo {
		width: 56px;
		height: auto;
	}

	.ri-projet-planning .col-label {
		font-size: 16px;
	}

	.ri-projet-lots .lots-header {
		flex-direction: column;
		gap: var(--ri-gap-sm);
		margin-bottom: var(--ri-space-sm);
	}

	.ri-projet-lots .lots-header .titre {
		flex: none;
	}

	.ri-projet-lots .lots-header .description {
		text-align: left;
		align-self: flex-start;
	}

	.ri-projet-lots .lot-description ul {
		padding-left: 0;
	}

	.ri-projet-etapes .etapes-top {
		margin-bottom: var(--ri-block-padding-xl);
	}

	.ri-projet-etapes .legende {
		gap: var(--ri-space-sm);
	}

	.ri-projet-etapes .legende-item {
		gap: 8px;
	}

	.ri-projet-etapes .dot {
		width: 12px;
		height: 12px;
	}

	/* Timeline mobile : flex colonne, cartes centrées */
	.ri-projet-etapes .timeline {
		display: flex;
		flex-direction: column;
		gap: 24px;
		position: relative;
	}

	/* Masquer les lignes desktop (pseudo-éléments centraux) */
	.ri-projet-etapes .timeline::before,
	.ri-projet-etapes .timeline::after {
		display: none;
	}

	/* La section est le contexte de positionnement des lignes mobiles */
	.ri-projet-etapes {
		position: relative;
	}

	/* Lignes mobiles dédiées : fixées aux bords de la section */
	.ri-projet-etapes .timeline-ligne {
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		width: 2px;
		background: linear-gradient(180deg, transparent 0%, #5d7c7d 10%, #5d7c7d 90%, transparent 100%);
		pointer-events: none;
		z-index: 0;
	}

	/* 2ème ligne de chaque paire via ::after (gradient identique) */
	.ri-projet-etapes .timeline-ligne::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		width: 2px;
		background: linear-gradient(180deg, transparent 0%, #5d7c7d 10%, #5d7c7d 90%, transparent 100%);
	}

	/* Paire gauche : collée au bord gauche, 2ème ligne à droite */
	.ri-projet-etapes .timeline-ligne--gauche {
		left: 0;
	}

	.ri-projet-etapes .timeline-ligne--gauche::after {
		left: 4px;
	}

	/* Paire droite : collée au bord droit, 2ème ligne à gauche */
	.ri-projet-etapes .timeline-ligne--droite {
		right: 0;
		left: auto;
	}

	.ri-projet-etapes .timeline-ligne--droite::after {
		right: 4px;
		left: auto;
	}

	/* Jauge mobile : superposée aux 2 lignes latérales, se remplit au
	   scroll via --ri-jauge-progress (même variable que le desktop).
	   Box de 6px peignant 2 bandes (0-2px et 4-6px) via un gradient
	   horizontal — un seul clip pour les 2 lignes, alignement garanti. */
	.ri-projet-etapes .timeline .jauge {
		display: block;
		top: 0;
		bottom: 0;
		height: auto;
		width: 6px;
		background: linear-gradient(90deg, var(--ri-color-yellow) 0 2px, transparent 2px 4px, var(--ri-color-yellow) 4px 6px);
		mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
		clip-path: inset(0 0 calc(100% - var(--ri-jauge-progress, 0%)) 0);
	}

	.ri-projet-etapes .timeline .jauge-gauche {
		left: 0;
	}

	.ri-projet-etapes .timeline .jauge-droite {
		right: 0;
		left: auto;
	}

	/* Cartes avec marge pour laisser la place aux lignes + traits */
	.ri-projet-etapes .etape-card {
		grid-column: unset !important;
		grid-row: unset !important;
		margin-inline: 32px;
		position: relative;
		z-index: 1;
		padding: 12px 16px;
	}

	/* Traits vers les lignes latérales */
	.ri-projet-etapes .card--projet::after {
		left: -32px;
		right: auto;
		width: 32px;
		top: 30px;
		transform-origin: left center;
		background-color: var(--ri-color-yellow);
	}

	.ri-projet-etapes .card--contribution::after {
		right: -32px;
		left: auto;
		width: 32px;
		top: 30px;
		transform-origin: right center;
		background-color: #d4dbdb;
	}

	/* Cacher les axe-point en mobile */
	.ri-projet-etapes .axe-point {
		display: none !important;
	}

	/* Point au bout du trait via ::before de la carte */
	.ri-projet-etapes .etape-card::before {
		content: "";
		position: absolute;
		top: calc(30px - 6px);
		width: 12px;
		height: 12px;
		border-radius: 50%;
		z-index: 2;
	}

	.ri-projet-etapes .card--projet::before {
		left: calc(-32px - 2.5px);
		background-color: var(--ri-color-yellow);
	}

	.ri-projet-etapes .card--contribution::before {
		right: calc(-32px - 2.5px);
		left: auto;
		background-color: #d4dbdb;
	}

	/* Alignement texte : tout à gauche sur mobile */
	.ri-projet-etapes .card--projet,
	.ri-projet-etapes .card--projet .card-meta {
		align-items: flex-start;
	}

	.ri-projet-etapes .card--projet .card-titre,
	.ri-projet-etapes .card--projet .card-sous-titre {
		text-align: left;
	}

	.ri-projet-etapes .card--projet .card-titre {
		max-width: 100%;
	}

	.ri-projet-partenaires .colonnes {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.ri-projet-partenaires .colonne:first-child {
		padding-block-start: 0;
	}

	.ri-projet-partenaires .colonne:last-child {
		padding-block-end: 0;
	}

	.ri-projet-partenaires .separateur {
		display: none;
	}

	.ri-projet-intro {
		padding-block-end: 40px;
	}
}