/**
 * Liste de programmes (Figma 24935:5829).
 *
 * `igc-liste-programmes` et non `igc-programmes` : ce dernier nom appartient
 * déjà aux cartes de programmes du thème (Figma 24551:1207), qui imposent une
 * hauteur de 567px. La liste en héritait et s'y trouvait écrasée.
 *
 * L'en-tête met le titre à gauche et le texte à droite ; la liste est une
 * suite de lignes de 176px, vignette à gauche et flèche à droite.
 */

.igc-liste-programmes {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}

/* ---- En-tête ----
   744px de titre à gauche, 520px de texte à droite (Figma 24935:6090). Le
   texte s'aligne sur le bas du titre : la maquette le décale de 38px, ce que
   l'alignement en fin de ligne reproduit quel que soit le nombre de lignes. */

.igc-liste-programmes__entete {
	display: grid;
	/* Sans gouttière : les deux colonnes du Figma se touchent (744 + 520 =
	   1264), le titre s'arrêtant bien avant le bord de la sienne. */
	grid-template-columns: minmax(0, 744fr) minmax(0, 520fr);
	gap: 0;
	align-items: end;
}

.igc-liste-programmes__titres > * {
	margin-block: 0;
}

.igc-liste-programmes__titres > * + * {
	margin-top: var(--wp--preset--spacing--20);
}

.igc-liste-programmes__chapo {
	margin: 0;
}

/* ---- La liste ---- */

.igc-liste-programmes__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Un seul filet par intervalle : la maquette dessine bordure haute et basse
   sur chaque ligne, ce qui ferait 2px entre deux voisines. Le filet du haut
   n'est rendu que pour la première. */
.igc-programme-ligne {
	border-bottom: 1px solid var(--wp--preset--color--beige-20);
}

.igc-programme-ligne:first-child {
	border-top: 1px solid var(--wp--preset--color--beige-20);
}

.igc-programme-ligne__lien {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	padding: 8px var(--wp--preset--spacing--30) 8px 8px;
	color: inherit;
	text-decoration: none;
}

.igc-programme-ligne__lien:hover,
.igc-programme-ligne__lien:focus-visible {
	text-decoration: none;
}

/* Le survol remplit toute la ligne, comme la deuxième de la maquette. Le fond
   arrive en fondu et la vignette se rapproche — le même geste que sur les
   cartes du catalogue, pour que les deux listes se répondent. */
@media (hover: hover) {

	.igc-programme-ligne__lien:hover {
		background-color: var(--wp--preset--color--beige-20);
	}

	.igc-programme-ligne__visuel img {
		transform: scale(1);
	}

	.igc-programme-ligne__lien:hover .igc-programme-ligne__visuel img,
	.igc-programme-ligne__lien:focus-visible .igc-programme-ligne__visuel img {
		transform: scale(1.04);
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {

	.igc-programme-ligne__lien {
		transition: background-color var(--igc-duree) var(--igc-courbe);
	}

	/* La vignette met plus longtemps que le fond : c'est ce décalage qui donne
	   au survol son moelleux, plutôt qu'un basculement d'un bloc. */
	.igc-programme-ligne__visuel img {
		transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
		will-change: transform;
	}
}

.igc-programme-ligne__lien:focus-visible {
	outline: 2px solid var(--wp--preset--color--bleu-100);
	outline-offset: -2px;
}

/* ---- Vignette ---- */

.igc-programme-ligne__visuel {
	box-sizing: border-box;
	flex: 0 0 200px;
	height: 160px;
	border-radius: 8px;
	overflow: hidden;
	background-color: var(--wp--preset--color--beige-20);
}

.igc-programme-ligne__visuel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Corps ----
   Étiquette et nom en haut, résumé en bas : la maquette les écarte l'un de
   l'autre sur les 160px de la ligne, ce qui tient quel que soit le nombre de
   lignes du nom. */

/* La hauteur de 160px du Figma comprend son rembourrage : sans `border-box`
   la ligne ferait 210px au lieu de 176. */
.igc-programme-ligne__corps {
	box-sizing: border-box;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	min-width: 0;
	min-height: 160px;
	padding: var(--wp--preset--spacing--20);
}

.igc-programme-ligne__tete {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	align-items: flex-start;
}

.igc-programme-ligne__titre {
	color: var(--wp--preset--color--neutral-100);
	/* 45 Light : la Neue Haas ne sert qu'en Light dans la maquette. */
	font-weight: 300;
	line-height: 0.93;
	letter-spacing: -0.03em;
}

.igc-programme-ligne__resume {
	color: var(--wp--preset--color--neutral-100);
	font-family: var(--wp--preset--font-family--tag);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--body-16);
	line-height: 1.24;
	letter-spacing: -0.02em;
}

/* ---- Flèche ----
   Toujours visible ici, à la différence des offres d'emploi : la maquette la
   dessine sur les six lignes. Le chevron est tracé au filet plutôt qu'importé,
   comme partout ailleurs dans le site. */

.igc-programme-ligne__fleche {
	box-sizing: border-box;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--neutral-100) 10%, transparent);
	border-radius: 4px;
}

.igc-programme-ligne__fleche::after {
	width: 11px;
	height: 11px;
	border-top: 1px solid var(--wp--preset--color--neutral-100);
	border-right: 1px solid var(--wp--preset--color--neutral-100);
	content: "";
	rotate: 45deg;
	translate: -3px 0;
}

/* ---- État vide ---- */

.igc-liste-programmes__vide {
	margin: 0;
	padding: var(--wp--preset--spacing--80) 0;
	color: var(--wp--preset--color--neutral-100);
	font-size: var(--wp--preset--font-size--body-18);
	text-align: center;
}

/* --- Petits écrans ------------------------------------------------- */

@media (max-width: 900px) {

	/* Le titre passe au-dessus du texte : à deux colonnes, 520px de texte
	   tomberaient à moins de 300 et le chapô ferait dix lignes. */
	.igc-liste-programmes__entete {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--30);
		align-items: start;
	}

	/* La vignette perd son rôle de repère bien avant de devenir illisible :
	   on la rétrécit d'abord, on ne la retire qu'ensuite. */
	.igc-programme-ligne__visuel {
		flex-basis: 140px;
		height: 112px;
	}

	.igc-programme-ligne__corps {
		min-height: 112px;
	}
}

@media (max-width: 600px) {

	.igc-programme-ligne__lien {
		flex-wrap: wrap;
		padding: var(--wp--preset--spacing--20) 8px;
	}

	.igc-programme-ligne__visuel {
		flex: 0 0 96px;
		height: 96px;
	}

	.igc-programme-ligne__corps {
		min-height: 96px;
		padding: 0;
	}

	/* La flèche ne tient plus sur la ligne, et le doigt n'en a pas besoin :
	   toute la ligne est la cible. */
	.igc-programme-ligne__fleche {
		display: none;
	}
}

/* ===================================================================
   Catalogue — la grille filtrable (référence : hub immobilier classique)

   La même liste que sur un hub de ville, mais en cartes et précédée
   d'une barre de filtres. C'est la forme qui tiendra le volume : à
   plusieurs centaines de programmes, une suite de lignes ne se parcourt
   plus.
   =================================================================== */

.igc-liste-programmes--grille {
	gap: var(--wp--preset--spacing--40);
}

/* ---- La barre de filtres ----
   Elle s'enroule d'elle-même : cinq menus tiennent sur une ligne en
   1264px, sur deux dès qu'on descend, sans qu'aucun palier n'ait à le
   décider. */

.igc-catalogue__filtres {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.igc-catalogue__filtre {
	display: flex;
	flex: 1 1 200px;
	min-width: 0;
}

.igc-catalogue__filtre select {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 0 var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--20);
	border: 1px solid var(--wp--preset--color--beige-20);
	border-radius: 4px;
	background-color: var(--wp--preset--color--neutral-0);
	color: var(--wp--preset--color--neutral-100);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-16);
	line-height: 1.24;
	letter-spacing: -0.02em;

	/* Le chevron du système est remplacé par celui du site, tracé au
	   filet comme les autres flèches. */
	appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--wp--preset--color--neutral-100) 50%),
		linear-gradient(135deg, var(--wp--preset--color--neutral-100) 50%, transparent 50%);
	background-position:
		right 20px center,
		right 15px center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.igc-catalogue__filtre select:focus-visible {
	outline: 2px solid var(--wp--preset--color--bleu-100);
	outline-offset: -2px;
}

/* ---- Survol des filtres ----
   Un menu déroulant n'est pas un bouton : il n'a pas de pastille, et le geste
   juste est celui qu'on attend d'un champ — le filet se précise, le curseur
   annonce qu'on peut agir. Le menu déjà choisi garde son filet plus dense,
   pour qu'un filtre actif se voie sans qu'on ait à lire son intitulé. */

@media (hover: hover) {

	.igc-catalogue__filtre select {
		cursor: pointer;
	}

	.igc-catalogue__filtre select:hover {
		border-color: color-mix(in srgb, var(--wp--preset--color--neutral-100) 30%, transparent);
	}

	.igc-catalogue__valider:hover {
		background-color: var(--wp--preset--color--bleu-80);
	}

	.igc-catalogue__reinitialiser:hover {
		opacity: 0.7;
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {

	.igc-catalogue__filtre select,
	.igc-catalogue__valider,
	.igc-catalogue__reinitialiser {
		transition:
			border-color var(--igc-duree) var(--igc-courbe),
			background-color var(--igc-duree) var(--igc-courbe),
			opacity var(--igc-duree) var(--igc-courbe);
	}
}

.igc-catalogue__valider {
	height: 48px;
	padding: 0 var(--wp--preset--spacing--30);
	border: 0;
	border-radius: 4px;
	background-color: var(--wp--preset--color--bleu-100);
	color: var(--wp--preset--color--neutral-0);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-18);
	cursor: pointer;
}

/* Le bouton disparaît quand le script prend la main. */
.igc-catalogue__valider[hidden] {
	display: none;
}

.igc-catalogue__reinitialiser {
	color: var(--wp--preset--color--neutral-100);
	font-size: var(--wp--preset--font-size--body-16);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.igc-catalogue__compte {
	margin: 0;
	color: var(--wp--preset--color--neutral-100);
	font-size: var(--wp--preset--font-size--body-16);
	opacity: 0.7;
}

/* ---- La grille ---- */

.igc-catalogue__grille {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30) 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---- Une carte ----
   Même famille que les cartes de contenu : fond beige, rayon de 8, photo
   en tête. Le lien couvre la carte — le calque est porté par le lien
   lui-même et non par un pseudo-élément, faute de quoi la moindre
   opacité posée au survol le ferait retomber sous la photo. */

.igc-programme-carte {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 8px;
	border-radius: 8px;
	background-color: var(--wp--preset--color--beige-20);
	isolation: isolate;
}

.igc-programme-carte__lien {
	display: contents;
	color: inherit;
	text-decoration: none;
}

.igc-programme-carte__lien::after {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: 8px;
	content: "";
}

.igc-programme-carte__visuel {
	position: relative;
	display: block;
	height: 256px;
	border-radius: 4px;
	overflow: hidden;
	background-color: var(--wp--preset--color--beige-40);
}

.igc-programme-carte__visuel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.igc-programme-carte__statut {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 1;
}

.igc-programme-carte__corps {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	padding: var(--wp--preset--spacing--30);
}

.igc-programme-carte__nom {
	color: var(--wp--preset--color--neutral-100);
	/* 45 Light : la Neue Haas ne sert qu'en Light dans la maquette. */
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

/* Les trois faits sur une ligne, séparés par une puce : type, surface,
   pièces. Ils s'enroulent plutôt que de déborder. */
.igc-programme-carte__faits {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	color: var(--wp--preset--color--neutral-100);
	font-family: var(--wp--preset--font-family--tag);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--body-16);
	line-height: 1.24;
	letter-spacing: -0.02em;
	opacity: 0.7;
}

.igc-programme-carte__fait + .igc-programme-carte__fait::before {
	display: inline-block;
	width: 4px;
	height: 4px;
	margin-right: 8px;
	border-radius: 999px;
	background-color: currentcolor;
	content: "";
	vertical-align: middle;
}

.igc-programme-carte__prix {
	margin-top: 8px;
	color: var(--wp--preset--color--neutral-100);
	font-weight: 300;
	line-height: 0.93;
	letter-spacing: -0.03em;
}

.igc-programme-carte__lieu {
	margin-top: auto;
	padding-top: 8px;
	color: var(--wp--preset--color--neutral-100);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-16);
	opacity: 0.7;
}

/* --- Petits écrans ------------------------------------------------- */

@media (max-width: 900px) {

	.igc-catalogue__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {

	.igc-catalogue__grille {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Un menu par ligne : côte à côte, leurs intitulés se coupent. */
	.igc-catalogue__filtre {
		flex-basis: 100%;
	}
}

/* ---- Survol d'une carte ----
   Un lent rapprochement de la photo, rien d'autre : la carte est déjà sur
   fond beige, un changement de fond ne se verrait pas, et le voile des
   liens est exclu pour cette carte comme pour les lignes.

   Le cadre rogne déjà — c'est lui qui contient le débordement — et la courbe
   est celle des boutons du site, pour n'avoir qu'un vocabulaire de mouvement. */

@media (hover: hover) {

	.igc-programme-carte__visuel img {
		transform: scale(1);
	}

	.igc-programme-carte:hover .igc-programme-carte__visuel img,
	.igc-programme-carte:focus-within .igc-programme-carte__visuel img {
		transform: scale(1.04);
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {

	.igc-programme-carte__visuel img {
		transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
		will-change: transform;
	}
}

/* ---- Les villes, en entrée du catalogue ----
   Un nom, son nombre de programmes, et le lien vers son hub. Le compte est
   calculé à l'affichage : gravé dans la page, il vieillirait dès la
   publication suivante. */

.igc-villes__titre {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-weight: 300;
	letter-spacing: -0.02em;
}

.igc-villes__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.igc-villes__ville a {
	display: inline-flex;
	gap: 8px;
	align-items: baseline;
	padding: 10px var(--wp--preset--spacing--20);
	border: 1px solid var(--wp--preset--color--beige-20);
	border-radius: 4px;
	color: var(--wp--preset--color--neutral-100);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-16);
	text-decoration: none;
}

.igc-villes__ville a:hover,
.igc-villes__ville a:focus-visible {
	text-decoration: none;
}

.igc-villes__compte {
	opacity: 0.6;
	font-size: var(--wp--preset--font-size--body-14);
}

@media (hover: hover) {

	.igc-villes__ville a:hover {
		border-color: color-mix(in srgb, var(--wp--preset--color--neutral-100) 30%, transparent);
		background-color: var(--wp--preset--color--beige-20);
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {

	.igc-villes__ville a {
		transition:
			border-color var(--igc-duree) var(--igc-courbe),
			background-color var(--igc-duree) var(--igc-courbe);
	}
}