/**
 * Archive : Nos Programmes
 */

/* ========================================
   Grille programmes
   ======================================== */

.ri-archive-programmes-grille {
	width: 100%;
	padding-block: var(--ri-block-padding-xl);
}

.ri-archive-programmes-grille .grille {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ========================================
   Carte programme
   ======================================== */

.ri-archive-programmes-grille .carte {
	flex: 1 1 0;
	min-width: 0;
	background-color: var(--ri-color-grey-mid);
	transition: background-color var(--ri-transition-base);
}

.ri-archive-programmes-grille .carte-link {
	display: flex;
	flex-direction: column;
	gap: 40px;
	height: 100%;
	padding: 24px;
	text-decoration: none;
}

.ri-archive-programmes-grille .carte-description {
	margin: 0;
	font: 500 18px/1.4 var(--ri-font-1);
	color: var(--ri-color-grey);
}

.ri-archive-programmes-grille .carte:hover {
	background-color: var(--ri-color-yellow);
}

.ri-archive-programmes-grille .carte:hover .carte-description {
	color: var(--ri-color-teal);
}

.ri-archive-programmes-grille .carte-icone {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
}

.ri-archive-programmes-grille .carte-icone img,
.ri-archive-programmes-grille .carte-icone svg {
	display: block;
	width: 80px;
	height: 80px;
	object-fit: contain;
}

.ri-archive-programmes-grille .carte-icone svg path {
	fill: var(--ri-color-grey);
	transition: fill var(--ri-transition-base);
}

.ri-archive-programmes-grille .carte:hover .carte-icone svg path {
	fill: var(--ri-color-teal);
}

.ri-archive-programmes-grille .carte-content {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ri-archive-programmes-grille .carte-titre {
	margin: 0;
	font: 700 var(--ri-size-title-h2) / 1.2 var(--ri-font-1);
	text-transform: uppercase;
	color: var(--ri-color-teal);
}

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

@media (max-width: 1024px) {

	.ri-archive-programmes-grille .grille {
		flex-wrap: wrap;
	}

	.ri-archive-programmes-grille .carte {
		flex: 1 1 calc(33.333% - 0px);
	}
}

@media (max-width: 782px) {

	.ri-archive-programmes-grille .carte {
		flex: 1 1 100%;
	}

	.ri-archive-programmes-grille .carte-link {
		flex-direction: row;
		align-items: center;
		gap: 24px;
		padding: 16px;
	}

	.ri-archive-programmes-grille .carte-icone {
		flex-shrink: 0;
		width: 64px;
		height: 64px;
	}

	.ri-archive-programmes-grille .carte-icone img {
		width: 64px;
		height: 64px;
	}

	.ri-archive-programmes-grille .carte-content {
		gap: 12px;
	}

	.ri-archive-programmes-grille .carte-description {
		font: 500 15px/1.5 var(--ri-font-1);
		max-width: 225px;
	}

}

/* ========================================
   Image + légende
   ======================================== */

.ri-archive-programmes-image {
	width: 100%;
	padding-block: var(--ri-block-padding-xl);
	background-color: var(--ri-color-bg);
}

.ri-archive-programmes-image .inner {
	display: flex;
	flex-direction: column;
}

.ri-archive-programmes-image .image-wrapper {
	outline: 1px solid var(--ri-color-yellow);
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.ri-archive-programmes-image .image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.ri-archive-programmes-image .legende {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ri-space-xl);
	padding: 0 24px 24px;
}

.ri-archive-programmes-image .legende-titre {
	margin: 0;
	font: 700 var(--ri-size-title-h2) / 1.4 var(--ri-font-1);
}

.ri-archive-programmes-image .legende-description {
	margin: 0;
	font: 400 var(--ri-size-text-body) / 1.7 var(--ri-font-1);
	color: var(--ri-color-grey);
}

@media (max-width: 782px) {

	.ri-archive-programmes-image .image-wrapper {
		gap: 24px;
	}

	.ri-archive-programmes-image .legende {
		grid-template-columns: 1fr;
		gap: var(--ri-space-md);
		padding: 0 16px 16px;
	}
}

/* ========================================
   Chaîne de valeur — frise chronologique
   ======================================== */

.ri-archive-chaine-valeur {
	width: 100%;
	padding-block: var(--ri-block-padding-xl);
	background-color: var(--ri-color-teal);
}

.ri-archive-chaine-valeur .inner {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: var(--ri-space-lg);
	align-items: start;
}

/* Intro */

.ri-archive-chaine-valeur .intro {
	display: flex;
	flex-direction: column;
	gap: var(--ri-space-md);
	position: sticky;
	top: var(--ri-space-xl);
}

.ri-archive-chaine-valeur .chaine-titre {
	margin: 0;
	font: 700 var(--ri-size-title-h2) / 1.4 var(--ri-font-1);
	color: var(--ri-color-white);
}

.ri-archive-chaine-valeur .chaine-titre .is-accent {
	color: var(--ri-color-yellow);
}

.ri-archive-chaine-valeur .chaine-description {
	margin: 0;
	font: 400 16px/1.7 var(--ri-font-1);
	color: var(--ri-color-grey);
}

@media (max-width: 782px) {

	.ri-archive-chaine-valeur .chaine-titre {
		max-width: 75%;
	}

	.ri-archive-chaine-valeur .chaine-description {
		font-size: 15px;
	}

}

/* ─────────────────────────────────────────
   Frise
   Axe central = 2 lignes de 3px, écart 5px.
   Centre de l'axe = 50% de .frise.
   Dot (16px) centré sur l'axe.
   is-impair → carte à droite de l'axe.
   is-pair   → carte à gauche de l'axe.
   ───────────────────────────────────────── */

.ri-archive-chaine-valeur .frise {
	--ri-jauge-progress: 0%;
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

/* Axe : 2 lignes verticales de 3px, écart 5px.
   Ligne gauche  : bord gauche à 50%-5.5px
   Ligne droite  : bord gauche à 50%+2.5px
   Centre de l'axe = 50% ✓
   Gradient vertical : fondu sur les extrémités */

.ri-archive-chaine-valeur .frise::before,
.ri-archive-chaine-valeur .frise::after {
	content: "";
	position: absolute;
	top: 0;
	width: 3px;
	height: 100%;
	pointer-events: none;
	background: linear-gradient(180deg, var(--ri-color-teal) 0%, #d4dbdb 18.27%, #d4dbdb 87.5%, var(--ri-color-teal) 100%);
}

.ri-archive-chaine-valeur .frise::before {
	left: calc(50% - 5.5px);
}

.ri-archive-chaine-valeur .frise::after {
	left: calc(50% + 2.5px);
}

/* Jauge accent — même masque fondu que les lignes */

.ri-archive-chaine-valeur .jauge {
	position: absolute;
	top: 0;
	width: 3px;
	height: 100%;
	pointer-events: none;
	z-index: 2;
	background-color: var(--ri-color-yellow);
	mask-image: linear-gradient(180deg, transparent 0%, #000 18.27%, #000 87.5%, transparent 100%);
	clip-path: inset(0 0 calc(100% - var(--ri-jauge-progress)) 0);
}

.ri-archive-chaine-valeur .jauge-gauche {
	left: calc(50% - 5.5px);
}

.ri-archive-chaine-valeur .jauge-droite {
	left: calc(50% + 2.5px);
}

/* Étape */

.ri-archive-chaine-valeur .etape {
	display: flex;
	align-items: flex-start;
	position: relative;
	z-index: 1;
}

/* is-impair → carte à DROITE : [dot|trait][carte]
   margin-left = 50% - 8px  → centre du dot (dia 16px) = 50% ✓ */

.ri-archive-chaine-valeur .etape.is-impair {
	flex-direction: row;
	margin-left: calc(50% - 8px);
	margin-top: 16px;
}

/* is-pair → carte à GAUCHE : [carte][trait|dot]
   width = 50% + 8px  → bord droit du dot = 50% + 8px, centre = 50% ✓ */

.ri-archive-chaine-valeur .etape.is-pair {
	flex-direction: row;
	width: calc(50% + 8px);
	justify-content: flex-end;
	margin-top: 16px;
}

/* Connecteur */

.ri-archive-chaine-valeur .connecteur {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	margin-top: 8px;
}

/* is-impair : dot d'abord, trait ensuite (dot côté axe) */
.ri-archive-chaine-valeur .etape.is-impair .connecteur {
	flex-direction: row;
}

/* is-pair : trait d'abord, dot ensuite (dot côté axe) */
.ri-archive-chaine-valeur .etape.is-pair .connecteur {
	flex-direction: row;
}

.ri-archive-chaine-valeur .dot {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--ri-color-grey-soft);
	transition: background-color 0.6s ease;
}

.ri-archive-chaine-valeur .trait {
	display: block;
	width: 40px;
	height: 1px;
	flex-shrink: 0;
	background-color: var(--ri-color-grey-soft);
	transition: background-color 0.6s ease;
}

.ri-archive-chaine-valeur .etape.is-accent {
	margin-top: 90px;
}

.ri-archive-chaine-valeur .etape.is-accent .connecteur {
	margin-top: 8px;
}

/* Carte */

.ri-archive-chaine-valeur .etape .carte {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px;
	background-color: var(--ri-color-grey-soft);
	transition: background-color 0.6s ease;
	color: var(--ri-color-teal);
}

.ri-archive-chaine-valeur .etape.is-pair .carte {
	align-items: flex-end;
	text-align: right;
}

.ri-archive-chaine-valeur .numero {
	display: block;
	font: 700 var(--ri-size-title-h1) / 1 var(--ri-font-2);
	transition: color 0.6s ease;
}

.ri-archive-chaine-valeur .etape-titre {
	margin: 0;
	font: 700 20px/1.2 var(--ri-font-1);
	transition: color 0.6s ease;
}

.ri-archive-chaine-valeur .etape-description {
	margin: 0;
	font: 500 var(--ri-size-text-body-xl) / 1.5 var(--ri-font-1);
	transition: color 0.6s ease;
}

/* État actif */

.ri-archive-chaine-valeur .etape.is-active .dot,
.ri-archive-chaine-valeur .etape.is-active .trait,
.ri-archive-chaine-valeur .etape.is-active .carte {
	background-color: var(--ri-color-yellow);
}

/* Responsive */

@media (max-width: 1024px) {

	.ri-archive-chaine-valeur .inner {
		grid-template-columns: 1fr;
	}

	.ri-archive-chaine-valeur .intro {
		position: static;
	}
}

@media (max-width: 782px) {

	/* Axe à gauche — centre de l'axe = 8px depuis le bord gauche de .frise */

	.ri-archive-chaine-valeur .frise {
		gap: 0;
	}

	.ri-archive-chaine-valeur .frise::before {
		left: calc(8px - 5.5px); /* = 2.5px */
	}

	.ri-archive-chaine-valeur .frise::after {
		left: calc(8px + 2.5px); /* = 10.5px */
	}

	/* Toutes les étapes : axe à gauche, connecteur à gauche,
	   carte à droite */

	.ri-archive-chaine-valeur .etape.is-impair,
	.ri-archive-chaine-valeur .etape.is-pair {
		flex-direction: row;
		margin-left: 0;
		margin-top: 24px;
		width: 100%;
		justify-content: flex-start;
	}

	.ri-archive-chaine-valeur .etape.is-accent {
		margin-top: 40px;
	}

	/* is-pair : on inverse [carte][trait|dot] → [dot|trait][carte] */

	.ri-archive-chaine-valeur .etape.is-pair,
	.ri-archive-chaine-valeur .etape.is-pair .connecteur {
		flex-direction: row-reverse;
	}

	.ri-archive-chaine-valeur .etape.is-pair .carte {
		align-items: flex-start;
		text-align: left;
	}

	.ri-archive-chaine-valeur .etape-titre {
		font: 700 17px/1.2 var(--ri-font-1);
	}

	.ri-archive-chaine-valeur .dot {
		width: 12px;
		height: 12px;
	}

	.ri-archive-chaine-valeur .trait {
		width: 32px;
	}

	.ri-archive-chaine-valeur .frise::before,
	.ri-archive-chaine-valeur .frise::after,
	.ri-archive-chaine-valeur .jauge {
		width: 2px;
	}

	.ri-archive-chaine-valeur .jauge-gauche {
		left: calc(8px - 5.5px);
	}

	.ri-archive-chaine-valeur .frise::after,
	.ri-archive-chaine-valeur .jauge-droite {
		left: calc(5px + 2.5px);
	}
}