/*
 * Racines sur ciel : feuille de styles du thème.
 *
 * Parti pris (maquette validée le 16 octobre 2026) : fond crème du logo,
 * bandeaux pleine largeur prune, sauge et ocre, titres en Playfair Display,
 * texte, menus et étiquettes en Jost. Un seul thème clair.
 */

/* ---------- Polices (auto-hébergées, licence OFL) ---------- */

@font-face {
	font-family: "Jost";
	src: url("../fonts/jost-normal.woff2") format("woff2");
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Playfair Display";
	src: url("../fonts/playfair-display-normal.woff2") format("woff2");
	font-weight: 600 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Playfair Display";
	src: url("../fonts/playfair-display-italic.woff2") format("woff2");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

/* ---------- Jetons ---------- */

:root {
	/* Palette simplifiée (16 octobre 2026) : quatre couleurs et un accent. */
	--creme: #fff6e5;
	--prune: #875d63;
	--sauge: #acbba1;
	--encre: #3a2a2d;
	--argile: #e2b4ac;
	/* Dérivés, pas des couleurs de la palette. */
	--filet: rgba(135, 93, 99, .25);
	--fond-photo: rgba(58, 42, 45, .06);

	--titre: "Playfair Display", "Didot", Georgia, serif;
	--texte: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

	--cadre: 72rem;
	--mesure: 40rem;
	--mesure-page: 60rem;
	--gouttiere: clamp(1rem, 4vw, 2.5rem);

	/* Échelle des tailles de texte : 7 tailles (16 octobre 2026). */
	--t-1: .8rem;                                  /* étiquettes en capitales, mentions */
	--t-2: .9rem;                                  /* petit texte */
	--t-3: clamp(1.0625rem, 1vw + .6rem, 1.15rem); /* texte courant */
	--t-4: clamp(1.15rem, 2vw, 1.4rem);            /* intros, chapeaux, intertitres */
	--t-5: clamp(1.4rem, 2.4vw, 1.8rem);           /* titres de cartes et de blocs */
	--t-6: clamp(1.8rem, 3.6vw, 2.6rem);           /* titres de section */
	--t-7: clamp(2.2rem, 5vw, 3.6rem);             /* grands titres (h1) */

	color-scheme: light;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--creme);
	color: var(--encre);
	font: 400 var(--t-3)/1.65 var(--texte);
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
	text-underline-offset: .2em;
}

:focus-visible {
	outline: 2px solid var(--prune);
	outline-offset: 3px;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3 {
	text-wrap: balance;
}

.cadre {
	width: 100%;
	max-width: var(--cadre);
	margin-inline: auto;
	padding-inline: var(--gouttiere);
}

.saut-contenu {
	position: absolute;
	left: var(--gouttiere);
	top: -10rem;
	z-index: 100;
	padding: .75rem 1rem;
	background: var(--encre);
	color: var(--creme);
}

.saut-contenu:focus {
	top: .5rem;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------- Boutons ---------- */

.bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .85rem 1.5rem;
	border: 1.5px solid currentColor;
	font: 600 var(--t-1)/1 var(--texte);
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .2s, color .2s, border-color .2s;
}

.bouton--plein {
	background: var(--prune);
	border-color: var(--prune);
	color: var(--creme);
}

.bouton--plein:hover {
	background: var(--encre);
	border-color: var(--encre);
}

.bouton--contour {
	color: var(--prune);
}

.bouton--contour:hover {
	background: var(--prune);
	border-color: var(--prune);
	color: var(--creme);
}

.surtitre {
	margin: 0;
	color: var(--prune);
	font: 600 var(--t-1)/1.2 var(--texte);
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* ---------- Bandeau d’annonce ---------- */

.annonce {
	margin: 0;
	padding: .55rem var(--gouttiere);
	background: var(--prune);
	color: var(--creme);
	font-size: var(--t-2);
	text-align: center;
}

.annonce a {
	font-weight: 500;
	white-space: nowrap;
}

/* ---------- En-tête et menu principal ---------- */

.entete {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--creme);
	border-bottom: 1px solid var(--filet);
}

.admin-bar .entete {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.entete__barre {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 2rem;
	min-height: 5.5rem;
	/* De l’air au-dessus et au-dessous du logo : sans cela, « sur ciel »
	   touche le filet du bas de l’en-tête. */
	padding-block: .9rem;
}

.entete__logo {
	display: block;
	grid-column: 2;
	grid-row: 1;
}

.entete__logo {
	color: var(--prune);
	text-decoration: none;
}

/* Logo en texte seul, composé comme le logo dessiné. */
.logo-texte {
	display: grid;
	justify-items: center;
	line-height: 1;
}

.logo-texte__nom {
	font: 700 2rem/1 var(--titre);
	letter-spacing: .03em;
	text-transform: uppercase;
}

.logo-texte__suite {
	margin-top: .35rem;
	/* L’espacement s’ajoute aussi après la dernière lettre : on le compense
	   à gauche pour que « sur ciel » reste centré sous « RACINES ». */
	padding-left: .4em;
	font: 400 var(--t-1)/1 var(--texte);
	letter-spacing: .4em;
}

.nav {
	display: contents;
}

.menu {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.4vw, 2.2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu--gauche {
	grid-column: 1;
	grid-row: 1;
	justify-content: flex-end;
}

.menu--droite {
	grid-column: 3;
	grid-row: 1;
}

.menu a {
	display: inline-block;
	padding-block: .5rem;
	background: linear-gradient(var(--prune), var(--prune)) left bottom / 0 1.5px no-repeat;
	font: 500 var(--t-1)/1 var(--texte);
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-size .25s;
}

.menu a:hover,
.menu a[aria-current="page"] {
	background-size: 100% 1.5px;
}

.menu .menu__bouton a {
	padding: .65rem 1rem;
	background: var(--argile);
	color: var(--encre);
	transition: background-color .2s, color .2s;
}

.menu .menu__bouton a:hover,
.menu .menu__bouton a[aria-current="page"] {
	background: var(--prune);
	color: var(--creme);
}

.entete__bascule {
	display: none;
}

@media (max-width: 62rem) {
	.entete__barre {
		grid-template-columns: auto 1fr;
		gap: 1rem;
		min-height: 4.5rem;
		padding-block: .6rem;
	}

	.entete__logo {
		grid-column: 1;
	}

	.logo-texte {
		justify-items: start;
	}

	.logo-texte__nom {
		font-size: 1.6rem;
	}

	.logo-texte__suite {
		padding-left: 0;
		font-size: var(--t-1);
	}

	.entete__bascule {
		display: inline-flex;
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		align-items: center;
		gap: .6rem;
		padding: .75rem 0;
		border: 0;
		background: none;
		color: var(--encre);
		font: 600 var(--t-1)/1 var(--texte);
		letter-spacing: .14em;
		text-transform: uppercase;
		cursor: pointer;
	}

	.entete__bascule-traits {
		display: block;
		width: 1.4rem;
		height: 1.5px;
		background: currentColor;
		box-shadow: 0 -6px currentColor, 0 6px currentColor;
		transition: transform .2s, box-shadow .2s;
	}

	.entete.est-ouvert .entete__bascule-traits {
		transform: rotate(45deg);
		box-shadow: 0 0 currentColor, 0 0 currentColor;
	}

	.nav {
		display: none;
		grid-column: 1 / -1;
		padding-bottom: 1.5rem;
	}

	.entete.est-ouvert .nav {
		display: block;
	}

	.menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.menu a {
		display: block;
		padding-block: .9rem;
		border-top: 1px solid var(--filet);
		background: none;
		font-size: var(--t-2);
	}

	.menu a[aria-current="page"] {
		color: var(--prune);
	}

	.menu .menu__bouton a {
		margin-top: 1rem;
		border: 0;
		text-align: center;
	}
}

@media (max-width: 62rem) and (max-height: 40rem) {
	/* Sur un téléphone à l’horizontale, le menu ouvert ne doit pas déborder. */
	.entete.est-ouvert .nav {
		max-height: calc(100vh - 4.5rem);
		overflow-y: auto;
	}
}

/* ---------- Contenu courant (gabarit par défaut) ---------- */

.contenu {
	padding-block: clamp(3rem, 7vw, 5rem);
}

.contenu__titre {
	margin: 0 0 2rem;
	color: var(--encre);
	font: 700 var(--t-7)/1.08 var(--titre);
}

.contenu__titre--liste {
	font-size: var(--t-5);
	margin-bottom: 1rem;
}

.contenu__titre a {
	text-decoration: none;
}

.contenu__article + .contenu__article {
	margin-top: 3rem;
}

.prose {
	max-width: var(--mesure);
}

.prose > * + * {
	margin-top: 1.1em;
}

.prose h2,
.prose h3 {
	margin-top: 2em;
	color: var(--encre);
	font-family: var(--titre);
	line-height: 1.2;
}

/* ---------- Accueil ---------- */

.grand-titre {
	margin: 0;
	color: var(--prune);
	font: 700 var(--t-7)/1 var(--titre);
	letter-spacing: .02em;
	text-transform: uppercase;
}

.accueil-section {
	padding-block: clamp(4rem, 9vw, 7rem);
}

.accueil-tete {
	display: grid;
	justify-items: center;
	gap: .9rem;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
	text-align: center;
}

.accueil-tete__chapeau {
	max-width: 36rem;
	margin: 0;
	color: var(--prune);
	font: italic 500 var(--t-4)/1.4 var(--titre);
}

.accueil-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

/* Ouverture : deux photos côte à côte, une carte crème posée au centre. */
/* Ouverture : le texte à gauche, deux photos en portrait (4:5) de même
   hauteur à droite, dans la largeur du cadre. Sur téléphone, le texte puis les deux photos
   côte à côte. */
.accueil-ouverture {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
	/* Mêmes bords que les autres sections (comme .cadre). */
	width: 100%;
	max-width: var(--cadre);
	margin-inline: auto;
	padding: clamp(2.5rem, 5vw, 4rem) var(--gouttiere) clamp(1rem, 2vw, 1.5rem);
}

.accueil-ouverture__photos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(.75rem, 1.5vw, 1.25rem);
	order: 2;
}

.accueil-ouverture__photo {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: var(--fond-photo);
}

.accueil-ouverture__carte {
	display: grid;
	justify-items: start;
	gap: 1.1rem;
	order: 1;
}

.accueil-ouverture__titre {
	margin: 0;
	color: var(--encre);
	font: 700 var(--t-7)/1.1 var(--titre);
	text-wrap: balance;
}

.accueil-ouverture__texte {
	margin: 0;
	color: var(--prune);
	font-size: var(--t-4);
}

.accueil-ouverture .accueil-actions {
	margin-top: .4rem;
}

@media (max-width: 48rem) {
	.accueil-ouverture {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

/* Présentation de l’association : texte et photo. */
.accueil-presentation__grille {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
}

.accueil-presentation__texte {
	display: grid;
	justify-items: start;
	gap: 1.4rem;
}

.accueil-presentation__intro {
	margin: 0;
	color: var(--encre);
	font: 600 var(--t-5)/1.45 var(--titre);
}

.accueil-presentation__photo {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

@media (max-width: 52rem) {
	.accueil-presentation__grille {
		grid-template-columns: 1fr;
	}

	.accueil-presentation__photo {
		aspect-ratio: 4 / 3;
	}
}

/* Ateliers : quatre cartes. */
.accueil-ateliers {
	padding-top: 0;
}

.ateliers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}


.atelier__lien {
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	gap: .7rem;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.atelier__photo {
	display: block;
	margin-bottom: .5rem;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--fond-photo);
}

.atelier__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}

.atelier__lien:hover .atelier__photo img {
	transform: scale(1.04);
}

.atelier__titre {
	color: var(--encre);
	font: 700 var(--t-5)/1.15 var(--titre);
	text-wrap: balance;
}

.atelier__texte {
	color: var(--prune);
	font-size: var(--t-3);
}

.atelier__plus {
	color: var(--prune);
	font: 600 var(--t-1)/1 var(--texte);
	letter-spacing: .14em;
	text-transform: uppercase;
}

.atelier__lien:hover .atelier__titre,
.atelier__lien:focus-visible .atelier__titre {
	text-decoration: underline;
	text-underline-offset: .2em;
}

/* Podcast : bandeau prune. */
.accueil-podcast {
	background: var(--prune);
	color: var(--creme);
}

.accueil-podcast__grille {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
}

.accueil-podcast__photo {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.accueil-podcast__texte {
	display: grid;
	gap: 1.25rem;
}

.accueil-podcast__texte p {
	max-width: 34rem;
	margin: 0;
}

.accueil-podcast .surtitre {
	color: var(--creme);
}

.accueil-podcast__titre {
	margin: 0;
	font: 700 var(--t-7)/.95 var(--titre);
	letter-spacing: .02em;
	text-transform: uppercase;
}

.accueil-podcast__texte .accueil-podcast__accroche {
	color: var(--creme);
	font: italic 500 var(--t-5)/1.3 var(--titre);
}

.accueil-podcast .accueil-actions {
	margin-top: .5rem;
}

.accueil-podcast .bouton--plein {
	background: var(--argile);
	border-color: var(--argile);
	color: var(--encre);
}

.accueil-podcast .bouton--plein:hover {
	background: var(--creme);
	border-color: var(--creme);
}

.accueil-podcast .bouton--contour {
	color: var(--creme);
}

.accueil-podcast .bouton--contour:hover {
	background: var(--creme);
	border-color: var(--creme);
	color: var(--encre);
}

@media (max-width: 52rem) {
	.accueil-podcast__grille {
		grid-template-columns: 1fr;
	}
}

/* Citation. */
.accueil-citation__figure {
	display: grid;
	justify-items: center;
	gap: 1.5rem;
	max-width: 52rem;
	margin: 0 auto;
	text-align: center;
}

.accueil-citation__texte {
	margin: 0;
	color: var(--encre);
	font: italic 500 var(--t-5)/1.4 var(--titre);
}

.accueil-citation__source {
	display: grid;
	gap: .2rem;
	color: var(--prune);
}

.accueil-citation__source cite {
	font-style: italic;
}

/* Soutien : bandeau ocre. */
.accueil-soutien {
	background: var(--argile);
	color: var(--encre);
}

.accueil-soutien__interieur {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 3rem;
	padding-block: clamp(2.5rem, 6vw, 4rem);
}

.accueil-soutien__titre {
	margin: 0;
	font: 700 var(--t-6)/1.1 var(--titre);
}

.accueil-soutien p {
	max-width: 40rem;
	margin: .6rem 0 0;
}

/* ---------- Pages (éditeur classique) ---------- */

.page-tete {
	border-bottom: 1px solid var(--filet);
	text-align: center;
}

.page-tete__interieur {
	display: grid;
	justify-items: center;
	gap: 1rem;
	padding-block: clamp(3rem, 7vw, 5rem);
}

.page-tete__titre {
	margin: 0;
	color: var(--prune);
	font: 700 var(--t-7)/1 var(--titre);
	letter-spacing: .02em;
	text-transform: uppercase;
}

.page-tete__chapeau {
	max-width: 34rem;
	margin: 0;
	color: var(--prune);
	font: italic 500 var(--t-4)/1.4 var(--titre);
}

/* Le contenu occupe toute la largeur du cadre, comme l’en-tête, avec un seul
   bord gauche ; seuls les paragraphes et listes sont limités en largeur pour
   rester lisibles. */
.page-corps {
	padding-block: clamp(3rem, 7vw, 5rem) clamp(4rem, 9vw, 6.5rem);
	font-size: var(--t-3);
}

.page-corps > * {
	margin-inline: 0;
}

.page-corps > p,
.page-corps > ul,
.page-corps > ol,
.page-corps > blockquote {
	max-width: var(--mesure-page);
}

.page-corps > * + * {
	margin-top: 1.1em;
}

/* La grille est une liste : on annule le retrait et la limite des listes. */
.page-corps > ul.equipe {
	justify-content: start;
	max-width: none;
	margin-top: 2rem;
	padding-left: 0;
}

.page-corps > h2 {
	margin-top: clamp(3rem, 6vw, 4.5rem);
	color: var(--encre);
	font: 700 var(--t-5)/1.2 var(--titre);
}

.page-corps > .equipe + h2,
.page-corps > hr + h2 {
	margin-top: clamp(3rem, 6vw, 4.5rem);
}

.page-corps > h3 {
	margin-top: 2.2em;
	color: var(--prune);
	font: 600 var(--t-2)/1.3 var(--texte);
	letter-spacing: .14em;
	text-transform: uppercase;
}

.page-corps > hr {
	height: 0;
	margin-block: clamp(3.5rem, 7vw, 5rem) 0;
	border: 0;
	border-top: 1px solid var(--filet);
}

.page-corps ul {
	padding-left: 1.2rem;
}

.page-corps li + li {
	margin-top: .5rem;
}

.page-corps li::marker {
	color: var(--prune);
}

.page-corps strong,
.page-corps b {
	color: var(--encre);
	font-weight: 600;
}

.page-corps > p:last-child:has(> em:only-child) {
	margin-top: 3rem;
	color: var(--prune);
}

/* Ancres (#expressioncitoyenne…) : le titre ne passe pas sous le menu collant. */
.page-corps [id] {
	scroll-margin-top: 9rem;
}

/* Bande de photos : un paragraphe « photos » qui ne contient que des images. */
.page-corps > p.photos,
.membre__bio > p.photos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 16rem));
	gap: 1rem;
	max-width: none;
	margin-top: 2rem;
}

.page-corps > p.photos br,
.membre__bio > p.photos br {
	display: none;
}

.page-corps > p.photos img,
.membre__bio > p.photos img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: var(--fond-photo);
}

/* Sur téléphone, deux photos par ligne plutôt qu’une colonne étroite. */
@media (max-width: 36rem) {
	.page-corps > p.photos,
	.membre__bio > p.photos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .75rem;
	}
}

/* Tableau « Informations pratiques ». */
.page-corps > table.infos {
	width: 100%;
	max-width: 44rem;
	margin-top: 2rem;
	border-collapse: collapse;
	border-top: 2px solid var(--prune);
	font-size: var(--t-2);
}

.page-corps > table.infos th,
.page-corps > table.infos td {
	padding: .7rem 0;
	border-bottom: 1px solid var(--filet);
	text-align: left;
	vertical-align: top;
}

.page-corps > table.infos tr:first-child th {
	padding-top: 1rem;
	color: var(--prune);
	font: 600 var(--t-1)/1.2 var(--texte);
	letter-spacing: .16em;
	text-transform: uppercase;
}

.page-corps > table.infos th[scope="row"] {
	width: 11rem;
	padding-right: 1.5rem;
	color: var(--encre);
	font-weight: 600;
}

@media (max-width: 34rem) {
	.page-corps > table.infos th[scope="row"] {
		width: 7.5rem;
		padding-right: 1rem;
	}
}

/* Lien mis en forme comme un bouton plein. */
.page-corps > p.bouton-lien {
	margin-top: 2rem;
}

.page-corps > p.bouton-lien a {
	display: inline-flex;
	padding: .85rem 1.5rem;
	border: 1.5px solid var(--prune);
	background: var(--prune);
	color: var(--creme);
	font: 600 var(--t-1)/1 var(--texte);
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .2s, border-color .2s;
}

.page-corps > p.bouton-lien a:hover {
	background: var(--encre);
	border-color: var(--encre);
}

/* Phrase mise en exergue. */
.page-corps > p.exergue {
	margin-block: 2.5rem;
	padding-left: 1.5rem;
	border-left: 3px solid var(--prune);
	color: var(--prune);
	font: italic 500 var(--t-5)/1.4 var(--titre);
}

/* Lecteur du podcast, chargé au clic. */
.lecteur-podcast {
	display: grid;
	gap: 1rem;
	max-width: 48rem;
	margin-top: 2.5rem;
	padding: 1.75rem 2rem;
	background: var(--prune);
	color: var(--creme);
}

.lecteur-podcast.est-charge {
	padding: 0;
	background: none;
}

.lecteur-podcast__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin: 0;
}

.lecteur-podcast__lien {
	color: var(--creme);
}

.lecteur-podcast.est-charge .lecteur-podcast__lien {
	color: var(--prune);
}

.lecteur-podcast__cadre {
	display: block;
	width: 100%;
	height: 420px;
	border: 0;
}

/* Liste « Pour nous soutenir » : un bandeau sauge pleine largeur, deux
   colonnes séparées par un filet, pas de cartes. Toute la colonne est
   cliquable. */
.page-corps > ul.soutiens {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: 0;
	max-width: none;
	margin-top: 1.5rem;
	padding: clamp(2rem, 4vw, 3rem) 0;
	list-style: none;
	background: var(--sauge);
	/* Le fond déborde jusqu’aux bords de l’écran sans créer de défilement. */
	box-shadow: 0 0 0 100vmax var(--sauge);
	clip-path: inset(0 -100vmax);
}

.page-corps > ul.soutiens li {
	position: relative;
	display: grid;
	align-content: start;
	gap: .75rem;
	margin: 0;
	padding: .5rem clamp(1.5rem, 4vw, 3.5rem) .5rem 0;
	color: var(--encre);
}

.page-corps > ul.soutiens li + li {
	padding-left: clamp(1.5rem, 4vw, 3.5rem);
	border-left: 1px solid rgba(58, 42, 45, .3);
}

.page-corps > ul.soutiens b {
	display: block;
	color: var(--encre);
	font: 700 var(--t-5)/1.15 var(--titre);
}

.page-corps > ul.soutiens .soutiens__bouton {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	justify-self: start;
	margin-top: .5rem;
	color: var(--encre);
	font: 600 var(--t-2)/1.2 var(--texte);
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: .35em;
}

/* Icône devant le lien. Propriétés détaillées : le raccourci « background »
   effaçait l’image des règles d’icône. */
.page-corps > ul.soutiens .soutiens__bouton::before {
	content: "";
	flex: none;
	width: 1.4rem;
	height: 1.4rem;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.page-corps > ul.soutiens .soutiens__bouton--instagram::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a2a2d' stroke-width='1.6'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.4' cy='6.6' r='.9' fill='%233a2a2d' stroke='none'/%3E%3C/svg%3E");
}

.page-corps > ul.soutiens .soutiens__bouton--podcast::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a2a2d' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3M8.5 21h7'/%3E%3C/svg%3E");
}

/* Toute la colonne est cliquable. */
.page-corps > ul.soutiens .soutiens__bouton::after {
	content: "";
	position: absolute;
	inset: 0;
}

.page-corps > ul.soutiens li:hover .soutiens__bouton,
.page-corps > ul.soutiens .soutiens__bouton:focus-visible {
	text-decoration-thickness: 3px;
}

.page-corps > ul.soutiens .soutiens__bouton:focus-visible {
	outline: 2px solid var(--encre);
	outline-offset: 4px;
}

@media (max-width: 44rem) {
	.page-corps > ul.soutiens li + li {
		margin-top: 1.5rem;
		padding: 1.5rem 0 .5rem;
		border-top: 1px solid rgba(58, 42, 45, .3);
		border-left: 0;
	}
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Page Nous soutenir : le texte à gauche, la carte de don à droite. */
@media (min-width: 62rem) {
	.page-corps:has(> .module-don) {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		/* La carte est plus haute que les deux paragraphes : c’est la deuxième
		   ligne qui absorbe la différence, pas l’écart entre eux. */
		grid-template-rows: auto 1fr;
		column-gap: clamp(3rem, 6vw, 6rem);
		align-items: start;
	}

	.page-corps:has(> .module-don) > * {
		grid-column: 1 / -1;
	}

	.page-corps:has(> .module-don) > p:nth-child(1),
	.page-corps:has(> .module-don) > p:nth-child(2) {
		grid-column: 1;
	}

	.page-corps:has(> .module-don) > p:nth-child(2) {
		align-self: start;
	}

	.page-corps:has(> .module-don) > .module-don {
		grid-column: 2;
		grid-row: 1 / span 2;
		margin-top: 0;
	}

	.page-corps:has(> .module-don) > p:nth-child(3) {
		margin-top: 3.5rem;
	}
}

/* Carte de don. */
.module-don {
	max-width: 32rem;
	margin-top: 2.5rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border-top: 3px solid var(--prune);
	background: var(--argile);
	color: var(--encre);
	scroll-margin-top: 9rem;
}

.don {
	display: grid;
	gap: 1.25rem;
}

.don__montants {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .6rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.don__titre {
	margin-bottom: 1rem;
	padding: 0;
	color: var(--encre);
	font: 700 var(--t-5)/1.2 var(--titre);
}

.don__choix {
	position: relative;
	cursor: pointer;
}

.don__choix input {
	position: absolute;
	opacity: 0;
}

.don__choix span {
	display: grid;
	place-items: center;
	min-height: 3.25rem;
	padding: .5rem;
	border: 1.5px solid var(--encre);
	background: rgba(255, 246, 229, .55);
	color: var(--encre);
	font: 600 var(--t-4)/1.2 var(--texte);
	transition: background-color .15s, color .15s;
}

.don__choix--libre {
	grid-column: 1 / -1;
}

.don__choix--libre span {
	font-size: var(--t-2);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.don__choix:hover span {
	background: var(--creme);
}

.don__choix input:checked + span {
	background: var(--encre);
	color: var(--creme);
}

.don__choix input:focus-visible + span {
	outline: 2px solid var(--encre);
	outline-offset: 2px;
}

.don__libre {
	display: grid;
	gap: .4rem;
	margin: 0;
}

.don__libre[hidden] {
	display: none;
}

.don__libre label {
	font: 600 var(--t-1)/1.2 var(--texte);
	letter-spacing: .12em;
	text-transform: uppercase;
}

.don__libre input {
	min-height: 3.1rem;
	padding: .7rem 1rem;
	border: 1.5px solid var(--encre);
	border-radius: 0;
	background: var(--creme);
	color: var(--encre);
	font: 600 var(--t-4)/1 var(--texte);
}

.don__libre input:focus {
	outline: 2px solid var(--encre);
	outline-offset: 1px;
}

.don__bouton {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.5rem;
	padding: 1rem 1.5rem;
	background: var(--prune);
	color: var(--creme);
	font: 600 var(--t-2)/1.2 var(--texte);
	letter-spacing: .14em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color .2s;
}

.don__bouton:hover,
.don__bouton:focus-visible {
	background: var(--encre);
}

/* Mention de paiement : le cadenas reste collé au début du texte, l’ensemble
   centré, même sur deux lignes. */
.don__securite {
	margin: 0;
	font-size: var(--t-2);
	line-height: 1.5;
	text-align: center;
	text-wrap: balance;
}

.don__securite svg {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: .4em;
	vertical-align: -.12em;
}

/* Page Contact : textes à gauche, formulaire à droite sur grand écran. */
@media (min-width: 62rem) {
	.page-corps:has(> .formulaire-contact) {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: clamp(3rem, 6vw, 6rem);
		align-items: start;
	}

	.page-corps:has(> .formulaire-contact) > * {
		grid-column: 1;
	}

	.page-corps:has(> .formulaire-contact) > .formulaire-contact {
		grid-column: 2;
		grid-row: 1 / span 20;
		margin-top: 0;
	}
}

.formulaire-contact {
	max-width: 44rem;
	margin-top: 2rem;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border-top: 3px solid var(--prune);
	background: var(--fond-photo);
}

/* ---------- Ateliers : liste et page d’un atelier ---------- */

/* La grille des ateliers placée dans une page (code court). */
.page-corps > ul.ateliers {
	max-width: none;
	margin-top: 0;
	padding: 0;
}

.page-corps .ateliers > li,
.atelier-page__suite .ateliers > li {
	margin: 0;
}

.atelier-page .surtitre a {
	text-decoration: none;
}

.atelier-page .surtitre a:hover {
	text-decoration: underline;
}

/* Les titres d’ateliers sont longs : un cran plus petits que ceux des pages. */
.atelier-page__titre {
	max-width: 52rem;
	font-size: var(--t-7);
	line-height: 1.08;
}

.atelier-page__grille {
	display: grid;
	grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
	gap: clamp(2.5rem, 5vw, 5rem);
	align-items: start;
	padding-block: clamp(3rem, 7vw, 5rem);
}

.atelier-page__texte.page-corps {
	padding: 0;
}

.atelier-page__texte > p.photos {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

.atelier-page__texte > p.photos img {
	aspect-ratio: 16 / 9;
}

.atelier-page__cote {
	position: sticky;
	top: 8rem;
	display: grid;
	gap: 1.1rem;
	justify-items: start;
	padding: 1.75rem;
	border-top: 3px solid var(--prune);
	background: var(--fond-photo);
}

.atelier-page__cote .surtitre {
	margin: 0;
}

.atelier-page__infos {
	display: grid;
	gap: .9rem;
	width: 100%;
	margin: 0;
}

.atelier-page__infos > div {
	padding-bottom: .9rem;
	border-bottom: 1px solid var(--filet);
}

.atelier-page__infos dt {
	color: var(--encre);
	font-weight: 600;
}

.atelier-page__infos dd {
	margin: .2rem 0 0;
	color: var(--encre);
}

.atelier-page__appel {
	margin: .4rem 0 0;
	color: var(--prune);
	font: italic 500 var(--t-4)/1.4 var(--titre);
}

.atelier-page__suite {
	display: grid;
	gap: 1.5rem;
	padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 8vw, 6rem);
	border-top: 1px solid var(--filet);
}

@media (max-width: 62rem) {
	.atelier-page__grille {
		grid-template-columns: 1fr;
	}

	.atelier-page__cote {
		position: static;
	}
}

/* Introduction d’une page (premier paragraphe mis en avant). */
.page-corps > p.intro {
	max-width: 52rem;
	color: var(--encre);
	font: 600 var(--t-4)/1.5 var(--titre);
}

.page-corps > p.intro + p {
	margin-top: 2rem;
}

/* Deux photos larges, côte à côte. */
.page-corps > p.photos--large {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	margin-top: 3rem;
}

.page-corps > p.photos--large img {
	aspect-ratio: 16 / 9;
}

/* Trois axes : bandeau sauge pleine largeur, trois colonnes. */
.page-corps > .axes-page {
	max-width: none;
	margin-top: clamp(3.5rem, 7vw, 5.5rem);
	padding-block: clamp(3rem, 6vw, 4.5rem);
	background: var(--sauge);
	box-shadow: 0 0 0 100vmax var(--sauge);
	clip-path: inset(0 -100vmax);
	color: var(--encre);
}

.axes-page h2 {
	max-width: 40rem;
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	color: var(--encre);
	font: 700 var(--t-6)/1.15 var(--titre);
}

.axes-page__liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: clamp(1.5rem, 4vw, 3.5rem);
}

.axes-page__axe {
	display: grid;
	align-content: start;
	gap: .8rem;
	padding-top: 1.25rem;
	border-top: 2px solid var(--encre);
}

.axes-page__axe h3 {
	margin: 0;
	color: var(--encre);
	font: 700 var(--t-4)/1.2 var(--titre);
	letter-spacing: 0;
	text-transform: none;
}

.axes-page__axe p {
	margin: 0;
}

/* Dernier bloc de la page : pas d’espace sous le bandeau. */
.page-corps:has(> .axes-page:last-child) {
	padding-bottom: 0;
}

.page-corps > .axes-page:last-child {
	margin-bottom: 0;
}

/* Adresse e-mail protégée : texte généré par le CSS, donc ni dans le HTML ni
   copiable ; un clic ouvre la messagerie. */
.courriel {
	display: inline;
	padding: 0;
	border: 0;
	background: none;
	color: var(--prune);
	font: inherit;
	text-decoration: underline;
	text-underline-offset: .2em;
	cursor: pointer;
	user-select: none;
}

.courriel[data-nom]::before {
	content: attr(data-nom) "\0040" attr(data-domaine);
}

.courriel:hover {
	text-decoration-thickness: 2px;
}

.courriel:focus-visible {
	outline: 2px solid var(--prune);
	outline-offset: 2px;
}

/* ---------- Podcast : liste et pages des épisodes ---------- */

.episodes {
	display: grid;
	gap: 1rem;
	max-width: none;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.episodes__titre {
	margin: 0;
}

.episodes__liste {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--filet);
}

.episodes__liste > li {
	margin: 0;
	border-bottom: 1px solid var(--filet);
}

.episode-ligne__lien {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	gap: 1.25rem;
	align-items: center;
	padding-block: 1.1rem;
	color: inherit;
	text-decoration: none;
}

.episode-ligne__image {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--fond-photo);
}

.episode-ligne__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.episode-ligne__texte {
	display: grid;
	gap: .3rem;
	min-width: 0;
}

.episode-ligne__theme,
.episode__theme {
	color: var(--prune);
	font: 600 var(--t-1)/1.3 var(--texte);
	letter-spacing: .14em;
	text-transform: uppercase;
}

.episode-ligne__citation {
	color: var(--encre);
	font: 600 var(--t-4)/1.35 var(--titre);
	text-wrap: balance;
}

.episode-ligne__infos,
.episode__infos {
	color: var(--prune);
	font-size: var(--t-2);
}

.episode-ligne__lien:hover .episode-ligne__citation {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
}

.episode-ligne__lien:focus-visible {
	outline: 2px solid var(--prune);
	outline-offset: 4px;
}

/* Page d’un épisode. */
.episode__theme,
.episode__infos {
	margin: 0;
}

.episode__titre {
	font-size: var(--t-6);
	text-wrap: balance;
}

.episode__grille {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.episode__image {
	margin: 0;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--fond-photo);
}

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

.episode__corps {
	display: grid;
	gap: 1.5rem;
	min-width: 0;
}

.episode__audio {
	display: block;
	width: 100%;
}

.episode__ecoute {
	margin: 0;
}

.episode__suite {
	padding-bottom: clamp(4rem, 8vw, 6rem);
}

.episode__suite .episodes {
	margin-top: 0;
}

@media (max-width: 48rem) {
	.episode__grille {
		grid-template-columns: 1fr;
	}

	.episode__image {
		max-width: 20rem;
	}

	.episode-ligne__lien {
		grid-template-columns: 4rem minmax(0, 1fr);
		gap: 1rem;
	}
}

/* ---------- Équipe : grille de membres ---------- */

/* Colonnes de largeur fixe, centrées : deux membres ne laissent pas une
   troisième colonne vide à droite. */
.equipe {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 16.5rem));
	justify-content: center;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.equipe__carte {
	display: grid;
	gap: .35rem;
	color: inherit;
	text-decoration: none;
}

.equipe__photo {
	display: block;
	margin-bottom: .75rem;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--fond-photo);
}

.equipe__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}

/* Les cartes sont des éléments de liste : pas d’espacement de liste à puces,
   sinon la première carte dépasse les autres. */
.page-corps .equipe > li,
.membre__suite .equipe > li {
	margin: 0;
}

.equipe__photo > .initiales {
	font-size: clamp(2.2rem, 4vw, 3rem);
}

.equipe__nom {
	color: var(--encre);
	font: 700 var(--t-4)/1.2 var(--titre);
}

.equipe__role {
	color: var(--prune);
	font-size: var(--t-2);
	line-height: 1.45;
}

.equipe__description {
	margin-top: .35rem;
	color: var(--encre);
	font-size: var(--t-2);
	line-height: 1.55;
}

/* Membre avec sa propre page : la description complète est sur sa page,
   la carte n’en montre que le début. */
.equipe__carte--lien .equipe__description {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
}

.equipe__plus {
	margin-top: .4rem;
	color: var(--prune);
	font: 600 var(--t-1)/1 var(--texte);
	letter-spacing: .14em;
	text-transform: uppercase;
}

.equipe__carte--lien:hover .equipe__photo img {
	transform: scale(1.04);
}

.equipe__carte--lien:hover .equipe__nom,
.equipe__carte--lien:focus-visible .equipe__nom {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
}

.initiales {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: var(--sauge);
	color: var(--encre);
	font: 600 clamp(2rem, 6vw, 3.2rem)/1 var(--titre);
	letter-spacing: .04em;
}

/* Réseaux d’un membre (page du membre, cartes des intervenantes). */
.reseaux {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.reseaux a {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: var(--prune);
	font: 500 var(--t-1)/1 var(--texte);
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
}

.reseaux a:hover span:first-of-type {
	text-decoration: underline;
	text-underline-offset: .25em;
}

.reseaux svg {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
}

.equipe__reseaux {
	margin-top: .75rem;
}

/* ---------- Page d’un membre ---------- */

.membre {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: start;
	padding-block: clamp(3rem, 7vw, 5.5rem);
}

.membre__photo {
	margin: 0;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--fond-photo);
}

.membre__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.membre__texte {
	display: grid;
	gap: 1rem;
	align-content: start;
}

.membre__surtitre a {
	text-decoration: none;
}

.membre__surtitre a:hover {
	text-decoration: underline;
}

.membre__nom {
	margin: 0;
	color: var(--encre);
	font: 700 var(--t-7)/1.05 var(--titre);
}

.membre__role {
	margin: 0;
	color: var(--prune);
	font: italic 500 var(--t-4)/1.35 var(--titre);
}

/* Logo de la structure partenaire du membre, sous son rôle. */
.membre__structure {
	margin: 0;
}

.membre__structure a {
	display: inline-block;
	transition: opacity .2s;
}

.membre__structure a:hover {
	opacity: .75;
}

.membre__structure img {
	display: block;
	width: auto;
	max-width: min(100%, 16rem);
	height: auto;
	max-height: 2.75rem;
}

/* Parcours : un paragraphe par étape, reliés par un filet vertical. */
.parcours {
	display: grid;
	gap: 1.4rem;
	max-width: 42rem;
	margin-top: 1rem;
	padding-left: 1.75rem;
	border-left: 1px solid var(--filet);
}

.parcours__etape {
	position: relative;
	margin: 0;
	line-height: 1.7;
}

/* Repère carré (angles droits, comme le reste du site). */
.parcours__etape::before {
	content: "";
	position: absolute;
	top: .6em;
	left: calc(-1.75rem - 4px);
	width: 7px;
	height: 7px;
	background: var(--prune);
}

/* La première étape sert d’introduction. */
.parcours__etape:first-child {
	color: var(--encre);
	font: 500 var(--t-4)/1.55 var(--titre);
}

.parcours__annee {
	color: var(--prune);
	font-weight: 600;
}

.membre__reseaux {
	margin-top: .25rem;
}

.membre__bio {
	margin-top: 1rem;
}

.membre__bio:empty {
	display: none;
}

.membre__lien {
	margin: .5rem 0 0;
}

.membre__suite {
	display: grid;
	gap: 1.5rem;
	padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 8vw, 6rem);
	border-top: 1px solid var(--filet);
}

/* Toute l’équipe sous la page d’un membre : colonnes qui remplissent la
   largeur (quatre en grand écran), alignées sur le bord gauche de la page,
   pour éviter une carte seule sur sa ligne. */
.membre__suite .equipe {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
	justify-content: stretch;
}

@media (max-width: 48rem) {
	.membre {
		grid-template-columns: 1fr;
	}

	.membre__photo {
		position: static;
		max-width: 22rem;
	}
}

/* ---------- Formulaires Fluent Forms ---------- */

/* Les styles de l’extension restent chargés ; on n’ajuste que l’habillage. */
.frm-fluent-form {
	font-family: var(--texte);
}

.frm-fluent-form .ff-el-group {
	margin-bottom: 1.5rem;
}

.frm-fluent-form .ff-el-input--label {
	margin-bottom: .5rem;
}

.frm-fluent-form .ff-el-input--label label {
	color: var(--encre);
	font: 600 var(--t-1)/1.3 var(--texte);
	letter-spacing: .14em;
	text-transform: uppercase;
}

.frm-fluent-form .ff-el-is-required.asterisk-right label::after {
	color: var(--prune);
}

.frm-fluent-form .ff-el-form-control,
.frm-fluent-form .ff-el-form-control:focus {
	display: block;
	width: 100%;
	min-height: 3.1rem;
	padding: .8rem 1rem;
	border: 1.5px solid var(--filet);
	border-radius: 0;
	background: rgba(255, 255, 255, .6);
	box-shadow: none;
	color: var(--encre);
	font: inherit;
	font-size: 1rem;
	transition: border-color .2s, background-color .2s;
}

.frm-fluent-form select.ff-el-form-control {
	padding-right: 2.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23875d63' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.frm-fluent-form textarea.ff-el-form-control {
	min-height: 11rem;
	resize: vertical;
}

.frm-fluent-form .ff-el-form-control:hover {
	border-color: rgba(135, 93, 99, .5);
}

.frm-fluent-form .ff-el-form-control:focus {
	border-color: var(--prune);
	background: rgba(255, 255, 255, .9);
	outline: 2px solid var(--prune);
	outline-offset: 1px;
}

/* Prénom et nom côte à côte, sous l’étiquette « Nom, prénom ». */
.frm-fluent-form .ff-name-field-wrapper .ff-t-container {
	gap: 1rem;
}

.frm-fluent-form .ff-name-field-wrapper .ff-el-input--label label {
	color: var(--prune);
	font-weight: 500;
	letter-spacing: .1em;
}

.frm-fluent-form .ff-btn-submit,
.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style) {
	padding: 1rem 2rem;
	border: 1.5px solid var(--prune);
	border-radius: 0;
	background: var(--prune);
	color: var(--creme);
	font: 600 var(--t-1)/1 var(--texte);
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .2s, border-color .2s;
}

.frm-fluent-form .ff-btn-submit:hover,
.frm-fluent-form .ff-btn-submit:focus-visible {
	background: var(--encre);
	border-color: var(--encre);
	opacity: 1;
}

.frm-fluent-form .ff-el-is-error .ff-el-form-control {
	border-color: #a3302f;
}

.frm-fluent-form .error,
.frm-fluent-form .text-danger {
	margin-top: .35rem;
	color: #a3302f;
	font-size: var(--t-2);
}

.ff-message-success {
	padding: 1.5rem 1.75rem;
	border: 0;
	border-left: 3px solid var(--sauge);
	background: rgba(255, 255, 255, .6);
	box-shadow: none;
	color: var(--encre);
	font: italic 500 var(--t-4)/1.45 var(--titre);
}

/* ---------- Pied de page ---------- */

.pied {
	background: var(--prune);
	color: var(--creme);
	font-size: var(--t-2);
}

.pied a {
	text-decoration: none;
}

.pied a:hover {
	text-decoration: underline;
}

.pied__haut {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
	gap: 2.5rem;
	padding-block: clamp(3.5rem, 7vw, 5rem);
}

.pied__marque {
	display: grid;
	align-content: start;
	gap: 1.1rem;
}

.pied__marque p {
	max-width: 20rem;
	margin: 0;
	color: var(--creme);
}

.pied__logo {
	width: 8.5rem;
}

.pied__titre {
	margin: 0 0 1.1rem;
	color: var(--creme);
	font: 600 var(--t-1)/1.2 var(--texte);
	letter-spacing: .16em;
	text-transform: uppercase;
}

.pied__liste {
	display: grid;
	gap: .55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pied__liste a[aria-current="page"] {
	text-decoration: underline;
}

.pied__adresse {
	display: grid;
	gap: .9rem;
	font-style: normal;
}


.pied__reseau {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
}

.pied__reseau svg {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
}

/* Partenaires : dans le pied de page prune, sans filet. Chaque logo est
   dans un encadré blanc de même hauteur, en couleur (le fond blanc de
   certains logos se fond dans l’encadré). Au survol, l’encadré disparaît
   et le logo passe en crème, la couleur du pied de page (les deux images
   sont superposées). Chaque logo reçoit ses proportions (--ratio) : sa
   hauteur en découle pour que tous pèsent à peu près autant. */
.pied__partenaires-interieur {
	display: grid;
	gap: 1.5rem;
	padding-block: 0 clamp(3rem, 6vw, 4.5rem);
}

.pied__partenaires .pied__titre {
	margin: 0;
}

.partenaires {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Écart réglé pour que les sept encadrés tiennent sur une ligne en grand écran. */
	gap: .75rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.partenaire {
	display: flex;
}

.partenaire > a,
.partenaire > span {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 4.5rem;
	padding-inline: 1rem;
	/* Blanc : la couleur de fond des logos eux-mêmes. */
	background: #fff;
	color: var(--encre);
	font: 600 var(--t-2)/1.2 var(--texte);
	text-decoration: none;
	transition: background-color .25s;
}

.partenaire > a:hover,
.partenaire > a:focus-visible {
	background-color: transparent;
}

.partenaire__logos {
	display: grid;
}

.partenaire__logos > img {
	grid-area: 1 / 1;
	transition: opacity .25s;
}

.partenaire__logos > .partenaire__creme {
	opacity: 0;
}

.partenaire > a:hover .partenaire__logos > .partenaire__creme,
.partenaire > a:focus-visible .partenaire__logos > .partenaire__creme {
	opacity: 1;
}

.partenaire > a:hover .partenaire__logos > .partenaire__couleur,
.partenaire > a:focus-visible .partenaire__logos > .partenaire__couleur {
	opacity: 0;
}

.partenaire > a:focus-visible {
	outline: 2px solid var(--creme);
	outline-offset: 3px;
}

.partenaire img {
	display: block;
	width: auto;
	max-width: 11rem;
	height: 2.6rem;
	height: clamp(1.5rem, calc(3.6rem / sqrt(var(--ratio, 2))), 3.3rem);
	object-fit: contain;
}

@media (max-width: 40rem) {
	.partenaires {
		gap: .6rem;
	}

	.partenaire > a,
	.partenaire > span {
		height: 3.5rem;
		padding-inline: .75rem;
	}

	.partenaire img {
		max-width: 8.5rem;
		height: clamp(1.2rem, calc(2.8rem / sqrt(var(--ratio, 2))), 2.5rem);
	}
}

.pied__bas-interieur {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .75rem 2rem;
	padding-block: 1.4rem;
	color: var(--creme);
	font-size: var(--t-1);
	letter-spacing: .04em;
}

.pied__bas-interieur p {
	margin: 0;
}

.pied__legal {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 62rem) {
	.pied__haut {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 34rem) {
	.pied__haut {
		grid-template-columns: 1fr;
	}
}

/* ---------- Visionneuse de photos ---------- */

img.agrandissable {
	cursor: zoom-in;
	transition: opacity .2s;
}

img.agrandissable:hover {
	opacity: .9;
}

.visionneuse-ouverte {
	overflow: hidden;
}

.visionneuse {
	width: 100vw;
	max-width: none;
	height: 100vh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(58, 42, 45, .96);
	color: var(--creme);
}

.visionneuse::backdrop {
	background: rgba(58, 42, 45, .6);
}

.visionneuse__cadre {
	display: grid;
	place-items: center;
	align-content: center;
	gap: 1rem;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 4.5rem clamp(1rem, 6vw, 5.5rem) 2rem;
}

.visionneuse__image {
	max-width: 100%;
	max-height: calc(100vh - 10rem);
	object-fit: contain;
	cursor: default;
}

.visionneuse__legende {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .25rem 1.5rem;
	max-width: 48rem;
	color: var(--creme);
	font-size: var(--t-2);
	text-align: center;
}

.visionneuse__compteur {
	font-variant-numeric: tabular-nums;
	letter-spacing: .1em;
}

.visionneuse__bouton {
	position: absolute;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 1.5px solid var(--creme);
	background: rgba(58, 42, 45, .5);
	color: var(--creme);
	font: 400 1.9rem/1 var(--texte);
	cursor: pointer;
	transition: background-color .2s, color .2s;
}

.visionneuse__bouton:hover,
.visionneuse__bouton:focus-visible {
	background: var(--creme);
	color: var(--encre);
}

.visionneuse__bouton:focus-visible {
	outline: 2px solid var(--creme);
	outline-offset: 3px;
}

.visionneuse__fermer {
	top: 1rem;
	right: 1rem;
}

.visionneuse__precedent,
.visionneuse__suivant {
	top: 50%;
	transform: translateY(-50%);
}

.visionneuse__precedent {
	left: clamp(.5rem, 2vw, 1.5rem);
}

.visionneuse__suivant {
	right: clamp(.5rem, 2vw, 1.5rem);
}

@media (max-width: 40rem) {
	/* Sur téléphone, les flèches passent en bas pour laisser la photo en grand. */
	.visionneuse__precedent,
	.visionneuse__suivant {
		top: auto;
		bottom: 1rem;
		transform: none;
	}

	.visionneuse__precedent {
		left: calc(50% - 3.5rem);
	}

	.visionneuse__suivant {
		right: calc(50% - 3.5rem);
	}

	.visionneuse__cadre {
		padding-bottom: 5rem;
	}
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
	}
}

/* ---------- Zones tactiles sur écran tactile ou étroit ----------
   Au moins 44 px de haut pour chaque lien ou bouton (recommandation
   d’accessibilité), sans changer l’apparence sur ordinateur. Pour les liens
   isolés dans un texte, la zone s’agrandit par une marge invisible
   (padding compensé par une marge négative) : rien ne bouge à l’écran. */
@media (max-width: 62rem), (pointer: coarse) {
	.pied__liste,
	.pied__adresse {
		gap: 0;
	}

	.pied__legal {
		gap: 0 1.5rem;
	}

	.pied__liste a,
	.pied__adresse a,
	.pied__legal a,
	.annonce a {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
	}

	.annonce {
		padding-block: 0;
	}

	.surtitre a,
	.reseaux a,
	.lecteur-podcast__lien {
		display: inline-block;
		padding-block: .9rem;
		margin-block: -.9rem;
	}

	.reseaux {
		row-gap: 1.5rem;
	}

	.entete__bascule {
		min-height: 2.75rem;
	}
}