/*--------------------------------------------------------------
AGm² — Domaines et projets : feuille de style côté site
--------------------------------------------------------------
Chargée par l'extension APRÈS style.css (priorité 20 sur
wp_enqueue_scripts). Les règles qui reprennent la liste des projets
l'emportent donc naturellement sur celles du thème (le bloc
« Survol d'un projet » de style.css est désormais sans effet et peut
être supprimé).

Elle n'introduit aucune couleur nouvelle : tout passe par les
variables du thème (--color-*, --spacing-*, --fs-*), avec une
valeur de repli au cas où l'extension serait activée sur un autre
thème.

Sommaire :
  1. Liste des projets — miniature à gauche, agrandie au survol
  2. Page projet — image d'ouverture (extension plein écran)
  3. Page projet — tableau + description
  4. Page projet — galerie
  5. Page projet — retour
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# 1. Liste des projets — miniature à gauche, agrandie au survol
--------------------------------------------------------------
Chaque ligne affiche, à gauche, la photo principale du projet dans un
cadre de MÊME taille pour toutes les lignes (ratio 3/2). La photo est
recadrée (object-fit: cover), jamais déformée : un portrait et un
paysage occupent exactement le même cadre.

Au survol — ou au focus clavier — le cadre s'agrandit : sa largeur
passe de --projet-thumb-w à --projet-thumb-w-hover et sa hauteur suit,
le ratio étant conservé. La ligne grandit avec lui ; le titre, la
description et le lien restent centrés verticalement. Les autres
lignes s'estompent pour guider le regard.

Réglages (sur .projets-list, plus bas) :
  --projet-thumb-w        taille au repos
  --projet-thumb-w-hover  taille au survol
  --projet-thumb-ratio    proportions du cadre

Plus de JavaScript : l'ancienne photo flottante qui suivait le
curseur (agm2-projets.js) n'existe plus.

Disposition
  < 768 px   photo à gauche, texte empilé à droite
  768–1023   idem, avec une photo plus grande
  ≥ 1024 px  une seule ligne : n° | photo | titre | texte | lien
--------------------------------------------------------------*/

/* Neutralise l'ancien voile flouté plein écran de style.css. Le double
   sélecteur de classe (0,4,0) prend le pas même si la feuille du thème
   venait à être chargée après celle-ci. */
.projets-list.projets-list:has(.projet-row:hover)::before,
.projets-list.projets-list:has(.projet-row:focus-within)::before {
	content: none;
}

.projets-list {
	--projet-thumb-w: 6rem;
	--projet-thumb-w-hover: 9rem;
	--projet-thumb-ratio: 3 / 2;
	--projet-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Disposition mobile : photo | texte empilé ---------- */
.projets-list .projet-row-inner {
	grid-template-columns: auto minmax(0, 1fr);
	/* La dernière rangée (1fr) absorbe la hauteur de la photo quand elle
	   dépasse celle du texte : sans elle, l'excédent serait réparti entre
	   le numéro, le titre, la description et le lien, qui s'écarteraient. */
	grid-template-rows: auto auto auto auto 1fr;
	grid-template-areas:
		"photo index"
		"photo title"
		"photo text"
		"photo link"
		"photo .";
	column-gap: var(--spacing-md, 1.5rem);
	row-gap: 0.4rem;
	align-items: start;
	align-content: start;
}

.projets-list .projet-index { grid-area: index; }
.projets-list .projet-title { grid-area: title; }
.projets-list .projet-text  { grid-area: text; }
.projets-list .projet-link  { grid-area: link; justify-self: start; }

/* Ce rappel supprime le léger retrait de la ligne au survol défini dans
   style.css : avec une photo à gauche, il décalerait tout le bloc. */
.projets-list .projet-row-inner:hover,
.projets-list .projet-row-inner:focus-visible {
	padding-left: 0;
}

/* ---------- Le cadre de la photo ----------
   Écrase TOUT ce que style.css prévoit pour .projet-photo-wrap (cadre
   fixe de 50vw × 50vh, masqué, révélé au survol). Spécificité (0,4,0). */
.projets-list.projets-list .projet-row .projet-photo-wrap {
	grid-area: photo;
	align-self: start;
	position: relative;
	inset: auto;
	z-index: auto;
	width: var(--projet-thumb-w);
	height: auto;
	aspect-ratio: var(--projet-thumb-ratio);
	margin: 0;
	overflow: hidden;
	border: 0;
	background: var(--color-background-alt, #f5f4f1);
	box-shadow: none;
	opacity: 1;
	transform: none;
	translate: none;
	clip-path: none;
	pointer-events: auto;
	will-change: auto;
	transition: width 0.8s var(--projet-ease);
}

.projets-list.projets-list .projet-row .projet-photo-wrap .projet-photo {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Légèrement zoomée au repos : en s'ouvrant, la photo se « pose ». */
	transform: scale(1.12);
	transition: transform 1.2s var(--projet-ease);
}

/* ---------- Tablette : photo plus grande ---------- */
@media screen and (min-width: 48em) {
	.projets-list {
		--projet-thumb-w: 8rem;
		--projet-thumb-w-hover: 14rem;
	}
}

/* ---------- Ordinateur : une seule ligne ---------- */
@media screen and (min-width: 64em) {

	.projets-list {
		--projet-thumb-w: clamp(7rem, 11vw, 10rem);
		--projet-thumb-w-hover: clamp(15rem, 22vw, 22rem);
	}

	.projets-list .projet-row-inner {
		grid-template-columns: 3.5rem auto minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
		grid-template-rows: auto;
		grid-template-areas: "index photo title text link";
		column-gap: clamp(1.5rem, 3vw, 2.5rem);
		align-items: center;
		align-content: normal;
	}

	.projets-list.projets-list .projet-row .projet-photo-wrap {
		align-self: center;
	}
}

/* ---------- Agrandissement : appareils à pointeur précis ----------
   Sur écran tactile, :hover reste « collé » après un appui : le cadre
   resterait agrandi jusqu'au tap suivant. Les vignettes y restent donc
   à leur taille de repos, la ligne entière étant de toute façon
   cliquable. */
@media (hover: hover) and (pointer: fine) {

	.projet-row-inner {
		transition: opacity 0.5s var(--projet-ease, cubic-bezier(0.2, 0.7, 0.2, 1));
	}

	/* Les AUTRES lignes s'estompent */
	.projets-list:has(.projet-row:hover) .projet-row:not(:hover) .projet-row-inner,
	.projets-list:has(.projet-row:focus-within) .projet-row:not(:focus-within) .projet-row-inner {
		opacity: 0.25;
	}

	/* Leur filet de séparation aussi : sans cela, les lignes
	   disparaissaient mais leur grille restait bien visible. */
	.projets-list:has(.projet-row:hover) .projet-row:not(:hover) {
		border-color: transparent;
		transition: border-color 0.5s var(--projet-ease, cubic-bezier(0.2, 0.7, 0.2, 1));
	}

	/* Le cadre grandit (sa hauteur suit grâce au ratio) */
	.projets-list.projets-list .projet-row:hover .projet-photo-wrap:not(.projet-photo-wrap--vide),
	.projets-list.projets-list .projet-row:focus-within .projet-photo-wrap:not(.projet-photo-wrap--vide) {
		width: var(--projet-thumb-w-hover);
	}

	.projets-list.projets-list .projet-row:hover .projet-photo-wrap .projet-photo,
	.projets-list.projets-list .projet-row:focus-within .projet-photo-wrap .projet-photo {
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {

	/* Le cadre change de taille sans transition, l'image ne se pose plus */
	.projets-list.projets-list .projet-row .projet-photo-wrap {
		transition: none;
	}

	.projets-list.projets-list .projet-row .projet-photo-wrap .projet-photo {
		transform: none;
		transition: none;
	}
}

/*--------------------------------------------------------------
# 2. Page projet — image d'ouverture
--------------------------------------------------------------
La photo principale s'étend sur tout l'écran (sous l'en-tête).

À l'arrivée, elle apparaît dans un cadre central, légèrement zoomée,
puis ce cadre s'ouvre jusqu'aux bords de l'écran pendant que la photo
se dézoome : c'est l'effet « d'extension » en plein écran. Le titre
apparaît ensuite, en fondu.

Deux plans seulement :

  1. .projet-hero-media — la photo, recadrée pour remplir tout le
     cadre (`object-fit: cover`). Si ses proportions diffèrent de
     celles de l'écran, ses bords sont rognés, jamais déformés.
     `object-position` règle la zone conservée (centre par défaut).

  2. .projet-hero-caption — surtitre et titre, sur un dégradé sombre
     qui garantit la lisibilité quelle que soit la photo.

Réglages :
  clip-path: inset(...) dans @keyframes agm2-projet-ouverture
      → taille du cadre de départ (plus grand = effet plus discret)
  animation-duration de .projet-hero-media (1.6s)
      → vitesse de l'extension
--------------------------------------------------------------*/

/* Le gabarit est en pleine largeur : si le thème enveloppe <main>
   dans .site-content (max-width + padding), on neutralise le
   conteneur — même règle que pour .front-page dans style.css. */
.site-content:has(> .projet-page) {
	max-width: none;
	padding: 0;
}

.projet-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	/* 100svh : évite le saut lié à la barre d'URL mobile. On retranche
	   l'en-tête, qui est en flux au-dessus. */
	height: calc(100vh - var(--header-height, 4rem));
	height: calc(100svh - var(--header-height, 4rem));
	overflow: hidden;
	/* Le fond visible autour du cadre pendant son ouverture */
	background: #0f1012;
	isolation: isolate;
}

/* ---------- Plan 1 : la photo, qui s'étend ---------- */
.projet-hero-media {
	position: absolute;
	inset: 0;
	z-index: 1;
	animation: agm2-projet-ouverture 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.projet-hero-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	animation: agm2-projet-dezoom 1.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes agm2-projet-ouverture {
	from { clip-path: inset(12% 20% 12% 20%); }
	to   { clip-path: inset(0 0 0 0); }
}

@keyframes agm2-projet-dezoom {
	from { transform: scale(1.18); }
	to   { transform: scale(1); }
}

@keyframes agm2-projet-fondu {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ---------- Plan 2 : le titre ---------- */
.projet-hero-caption {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 8rem 0 var(--spacing-lg, 2.5rem);
	background: linear-gradient(
		to top,
		rgba(15, 16, 18, 0.78) 0%,
		rgba(15, 16, 18, 0.45) 40%,
		rgba(15, 16, 18, 0) 100%
	);
	pointer-events: none; /* seul le lien du surtitre reste cliquable */
	/* Le titre n'apparaît qu'une fois le cadre presque ouvert */
	animation: agm2-projet-fondu 1s ease 0.9s both;
}

.projet-hero-caption-inner {
	max-width: var(--container-width, 1400px);
	margin: 0 auto;
	padding: 0 var(--container-padding, 1.25rem);
	color: #fff;
}

.projet-hero-eyebrow {
	margin: 0 0 var(--spacing-sm, 1rem);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.28em;
}

/* Soulignement animé, motif commun à tout le thème */
.projet-hero-eyebrow a,
.projet-hero-eyebrow a:visited {
	position: relative;
	display: inline-block;
	pointer-events: auto;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

.projet-hero-eyebrow a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: 100%;
	transition: transform var(--transition-smooth, 0.6s cubic-bezier(0.2, 0.7, 0.2, 1));
}

.projet-hero-eyebrow a:hover,
.projet-hero-eyebrow a:focus-visible {
	color: #fff;
}

.projet-hero-eyebrow a:hover::after,
.projet-hero-eyebrow a:focus-visible::after {
	transform: scaleX(1);
	transform-origin: 0;
}

.projet-hero-title {
	margin: 0;
	max-width: 20em;
	color: #fff;
	font-family: var(--font-heading, Georgia, serif);
	font-weight: var(--heading-weight, 300);
	letter-spacing: var(--heading-letter-spacing, -0.02em);
	font-size: clamp(2.25rem, 1.2rem + 4.2vw, 5.5rem);
	line-height: 1;
	text-wrap: balance;
}

/* ---------- Variante sans image mise en avant ---------- */
.section-projet-titre {
	padding-top: var(--spacing-lg, 2.5rem);
	padding-bottom: var(--spacing-md, 1.5rem);
}

.section-projet-titre .domaine-retour a,
.section-projet-titre .domaine-retour a:visited {
	color: var(--color-text-light, #6c6e73);
	text-decoration: none;
	letter-spacing: 0.08em;
}

.projet-titre {
	margin: 0;
	max-width: 20em;
	color: var(--color-heading, #1a1b1f);
	font-family: var(--font-heading, Georgia, serif);
	font-weight: var(--heading-weight, 300);
	letter-spacing: var(--heading-letter-spacing, -0.02em);
	font-size: clamp(2.25rem, 1.2rem + 4vw, 5rem);
	line-height: 1.05;
	text-wrap: balance;
}

/* Mobile en paysage : la fenêtre est trop basse pour un plein écran,
   le titre viendrait manger la photo. */
@media screen and (max-height: 30em) and (orientation: landscape) {
	.projet-hero {
		height: 32rem;
	}

	.projet-hero-caption {
		padding-top: 4rem;
	}
}

@media (prefers-reduced-motion: reduce) {

	/* Pas d'extension : la photo est tout de suite en plein écran */
	.projet-hero-media,
	.projet-hero-img,
	.projet-hero-caption {
		animation: none;
	}
}

/*--------------------------------------------------------------
# 3. Page projet — tableau + description
--------------------------------------------------------------
Une colonne en mobile, deux dès 768 px : le tableau à gauche, plus
étroit, le texte à droite. Le filet vertical qui les sépare reprend
celui de la page contact.
--------------------------------------------------------------*/
.projet-detail-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-lg, 2.5rem);
}

.projet-fiche-col .section-eyebrow,
.projet-texte-col .section-eyebrow {
	position: relative;
	margin-bottom: var(--spacing-md, 1.5rem);
	padding-bottom: var(--spacing-sm, 1rem);
}

.projet-fiche-col .section-eyebrow::after,
.projet-texte-col .section-eyebrow::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2.5rem;
	height: 1px;
	background: var(--color-text, #1a1b1f);
}

/* ---------- Le tableau ----------
   Les bordures et l'aplat gris des <th> hérités de la règle générique
   `table th` de style.css sont neutralisés : ici, un seul filet
   horizontal par ligne, comme les fiches Fondateurs.

   La hauteur du tableau n'est jamais fixée : elle découle du nombre de
   lignes réellement produites par le gabarit. Trois renseignements
   saisis donnent trois lignes, cinq en donnent cinq. */
.projet-fiche {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	border-top: 1px solid var(--color-border, #e1e2e5);
}

.projet-fiche th,
.projet-fiche td {
	border: 0;
	border-bottom: 1px solid var(--color-border, #e1e2e5);
	background: none;
	padding: 1em 0;
	text-align: left;
	vertical-align: baseline;
}

.projet-fiche th {
	width: 42%;
	font-family: var(--font-body, sans-serif);
	font-size: 0.6875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	line-height: 1.6;
	color: var(--color-text-light, #6c6e73);
}

.projet-fiche td {
	font-family: var(--font-heading, Georgia, serif);
	font-size: var(--fs-h4, 1.2rem);
	font-weight: 400;
	color: var(--color-heading, #1a1b1f);
	overflow-wrap: anywhere;
}

/* Statut : pastille filaire. « Réalisé » est plein, « En cours » est
   simplement cerné et précédé d'un point — la charte étant monochrome,
   c'est le remplissage, et non la couleur, qui distingue les deux. */
.projet-statut {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.35em 0.9em;
	border: 1px solid var(--color-text, #1a1b1f);
	font-family: var(--font-body, sans-serif);
	font-size: 0.6875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	line-height: 1.4;
}

.projet-statut--realise {
	background: var(--color-text, #1a1b1f);
	color: var(--color-background, #fdfdfb);
}

.projet-statut--en-cours::before {
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: currentColor;
	/* Pulsation très lente : le chantier est « vivant ». */
	animation: agm2-pulse 2.6s ease-in-out infinite;
}

@keyframes agm2-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.25; }
}

/* ---------- Le texte ---------- */
.projet-texte {
	color: var(--color-text-light, #6c6e73);
	line-height: 1.8;
	max-width: 40em;
}

.projet-texte > :first-child {
	margin-top: 0;
}

.projet-texte > :last-child {
	margin-bottom: 0;
}

/* Premier paragraphe en légère accroche : un chapeau, pas un titre. */
.projet-texte > p:first-of-type {
	font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
	line-height: 1.7;
	color: var(--color-text, #1a1b1f);
}

.projet-texte h2,
.projet-texte h3 {
	margin-top: var(--spacing-lg, 2.5rem);
	color: var(--color-heading, #1a1b1f);
}

.projet-texte img {
	margin: var(--spacing-md, 1.5rem) 0;
}

@media (prefers-reduced-motion: reduce) {
	.projet-statut--en-cours::before {
		animation: none;
	}
}

/* ---------- 768 px et plus : deux colonnes ---------- */
@media screen and (min-width: 48em) {

	.projet-detail-grid {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr);
		column-gap: clamp(3rem, 6vw, 6rem);
		align-items: start;
	}

	/* Le tableau accompagne la lecture du texte, qui est plus long. */
	.projet-fiche-col {
		position: sticky;
		top: calc(var(--header-height, 5rem) + var(--spacing-lg, 2.5rem));
	}

	.projet-texte-col {
		padding-left: clamp(2rem, 4vw, 4rem);
		border-left: 1px solid var(--color-border, #e1e2e5);
	}

	/* Sans tableau, le texte reprend toute la largeur : ni colonne vide
	   ni filet vertical isolé. */
	.projet-detail-grid--sans-tableau {
		grid-template-columns: minmax(0, 1fr);
	}

	.projet-detail-grid--sans-tableau .projet-texte-col {
		padding-left: 0;
		border-left: none;
	}
}

/* Lignes à plusieurs éléments (partenaires, entreprises, équipements,
   autre) : le grand serif du tableau pèserait trop sur une liste, on
   repasse au corps courant. */
.projet-fiche-ligne--type-zone td {
	font-family: var(--font-body, sans-serif);
	font-size: var(--fs-base, 1rem);
	line-height: 1.7;
	color: var(--color-text, #1a1b1f);
}

/* Tableau long (plus de 8 lignes) : il peut dépasser la hauteur de la
   fenêtre, la colonne n'est alors plus collante — ses dernières lignes
   resteraient sinon hors de l'écran tant que le texte est plus long. */
.projet-detail-grid--long .projet-fiche-col {
	position: static;
}

/*--------------------------------------------------------------
# 4. Page projet — galerie
--------------------------------------------------------------
Deux images par ligne à partir de 600 px, une seule en dessous : sur
un téléphone, deux photos côte à côte deviennent des vignettes. Le
nombre de lignes n'est jamais déclaré — la grille en crée autant que
nécessaire, six photos donnant trois lignes, sept en donnant quatre.
--------------------------------------------------------------*/
.section-projet-galerie {
	padding-top: 0;
}

.section-projet-galerie .section-eyebrow {
	position: relative;
	margin-bottom: var(--spacing-lg, 2.5rem);
	padding-bottom: var(--spacing-sm, 1rem);
}

.section-projet-galerie .section-eyebrow::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2.5rem;
	height: 1px;
	background: var(--color-text, #1a1b1f);
}

.projet-galerie {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-md, 1.5rem);
}

.projet-galerie-item {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--color-background-alt, #f5f4f1);
	aspect-ratio: 4 / 3;
}

.projet-galerie-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.projet-galerie-item:hover .projet-galerie-img {
	transform: scale(1.05);
}

/* Légende de la médiathèque, si elle est renseignée : elle glisse
   depuis le bas au survol, sur un voile léger. */
.projet-galerie-legende {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.25rem 1.25rem 1rem;
	background: linear-gradient(to top, rgba(15, 16, 18, 0.7), rgba(15, 16, 18, 0));
	color: #fff;
	font-size: var(--fs-sm, 0.875rem);
	line-height: 1.5;
	opacity: 0;
	transform: translateY(0.75rem);
	transition: opacity var(--transition-smooth, 0.6s ease), transform var(--transition-smooth, 0.6s ease);
}

.projet-galerie-item:hover .projet-galerie-legende,
.projet-galerie-item:focus-within .projet-galerie-legende {
	opacity: 1;
	transform: none;
}

@media screen and (min-width: 37.5em) {
	.projet-galerie {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacing-lg, 2.5rem);
	}
}

@media (prefers-reduced-motion: reduce) {

	.projet-galerie-item:hover .projet-galerie-img {
		transform: none;
	}

	.projet-galerie-legende {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/*--------------------------------------------------------------
# 5. Page projet — retour
--------------------------------------------------------------*/
.section-projet-retour {
	padding-top: 0;
	padding-bottom: var(--spacing-xl, 4rem);
}

.projet-retour {
	margin: 0;
	padding-top: var(--spacing-md, 1.5rem);
	border-top: 1px solid var(--color-border, #e1e2e5);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
}

.projet-retour a,
.projet-retour a:visited {
	position: relative;
	display: inline-block;
	color: var(--color-text, #1a1b1f);
	text-decoration: none;
}

.projet-retour a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.25em;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: 100%;
	transition: transform var(--transition-smooth, 0.6s cubic-bezier(0.2, 0.7, 0.2, 1));
}

.projet-retour a:hover::after,
.projet-retour a:focus-visible::after {
	transform: scaleX(1);
	transform-origin: 0;
}

@media print {

	.projet-hero {
		height: auto;
	}

	.projet-hero-media {
		position: static;
		animation: none;
	}

	.projet-hero-img {
		height: auto;
		max-height: 12cm;
		object-fit: contain;
		animation: none;
	}

	.projet-hero-caption,
	.projet-photo-wrap {
		display: none;
	}

	.projet-galerie {
		grid-template-columns: repeat(2, 1fr);
	}
}