/**
 * Page « Qui sommes-nous » — feuille de style
 *
 * Écrite mobile d'abord, comme la feuille des pages mandataires, dont elle reprend les
 * mêmes variables et les mêmes proportions. La maquette est figée à 1400 px ; les
 * valeurs y sont reprises à partir de 1024 px et redistribuées en dessous.
 *
 * AUCUNE TAILLE DE POLICE N'EST ÉCRITE ICI. Elles viennent toutes de assets/css/socle.css,
 * qui porte l'échelle du site — sept pas, ceux relevés dans le rendu réel des pages Divi.
 * Cette feuille en avait inventé onze de plus, dont cinq demi-pixels. Si un pas manque,
 * on prend le voisin : on n'en ajoute pas un douzième.
 *
 * Les deux exceptions, signalées à l'endroit où elles vivent, sont des ornements — une
 * initiale géante dans un carré vide — et non du texte à lire.
 *
 * @package DiviExapret
 */

/* La palette et l'échelle viennent du socle, sur « :root ». Ne reste ici que ce qui
   appartient à cette page seule — la largeur de sa gouttière. */
.exa-equipe {
	--exa-gouttiere: 20px;

	background: var(--exa-fond);
	color: var(--exa-texte);
	font-family: var(--exa-police);
	font-size: var(--exa-fs-base);
	font-weight: var(--exa-w-corps);
	line-height: var(--exa-lh-corps);
}

.exa-equipe p {
	margin: 0;
}

.exa-conteneur {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--exa-gouttiere);
}

.exa-conteneur--etroit {
	max-width: 900px;
}

.exa-section {
	padding-block: 44px;
}

.exa-titre1 {
	margin: 0;
	color: var(--exa-noir);
	font-size: var(--exa-fs-2xl);
	font-weight: var(--exa-w-titre);
	line-height: var(--exa-lh-gros);
	text-align: center;
}

.exa-titre2 {
	margin: 0;
	color: var(--exa-noir);
	font-size: var(--exa-fs-xl);
	font-weight: var(--exa-w-titre);
	line-height: var(--exa-lh-titre);
}

.exa-hors-ecran {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ------------------------------------------------------------------------ Bandeau. */

/* Hauteur calée sur le bandeau des pages de service (Divi) : mesuré le 2026-08-19,
   il fait 400 px sous 768 px de large, puis 490 à 530 px au-delà. Les paliers ci-dessous
   reprennent cette courbe aux ruptures maison (600 et 1024) plutôt que d'en inventer
   une troisième. Sans cela, le bandeau des pages maison faisait la moitié de celui des
   pages de service, et l'écart sautait aux yeux d'une page à l'autre. */
.exa-hero {
	position: relative;
	min-height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-position: center 35%;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: var(--exa-fond-alt);
}

.exa-hero__voile {
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(15, 9, 19, .18), rgba(15, 9, 19, .42));
}

.exa-hero__blocs {
	position: relative;
	display: inline-block;
	padding: 26px 0;
}

.exa-hero__surtitre,
.exa-hero__titre {
	display: block;
	width: max-content;
	max-width: min(88vw, 640px);
	color: #ffffff;
}

.exa-hero__surtitre {
	background: var(--exa-rose);
	font-size: var(--exa-fs-lg);
	font-weight: var(--exa-w-moyen);
	line-height: var(--exa-lh-titre);
	padding: 7px 24px 7px 18px;
}

/* Le décalage du second bloc reproduit le chevauchement de la maquette. */
.exa-hero__titre {
	background: #4e17a1;
	font-size: var(--exa-fs-2xl);
	font-weight: var(--exa-w-titre);
	line-height: var(--exa-lh-gros);
	letter-spacing: 2px;
	padding: 7px 30px;
	margin: -8px 0 0 32px;
}

/* -------------------------------------------------------------------- Introduction. */

.exa-intro {
	padding-block: 44px 12px;
	text-align: center;
}

/* Le chapeau est le seul texte courant que l'on monte d'un pas : il tient en trois
   lignes, centré, et sert d'entrée dans la page. Le corps du site reste en dessous. */
.exa-intro__texte {
	margin-top: 16px !important;
	font-size: var(--exa-fs-md);
	font-weight: var(--exa-w-corps);
	line-height: var(--exa-lh-corps);
	text-wrap: pretty;
}

.exa-intro__texte strong {
	font-weight: var(--exa-w-fort);
	color: var(--exa-noir);
}

/* -------------------------------------------------------------------------- Équipe. */

.exa-equipe__titre {
	margin-bottom: 22px;
	text-align: center;
}

.exa-equipe__grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.exa-fiche {
	display: flex;
	flex-direction: column;
	background: var(--exa-fond);
	border: 1px solid var(--exa-bord);
	border-radius: var(--exa-rayon);
	overflow: hidden;
	box-shadow: var(--exa-ombre-douce);
}

.exa-fiche__photo {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--exa-fond-alt);
	display: flex;
	align-items: center;
	justify-content: center;
}

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

/* ORNEMENT, pas du texte : l'initiale remplit un carré vide en attendant la photo.
   Sa taille suit le carré, pas l'échelle typographique. */
.exa-fiche__initiale {
	color: var(--exa-violet);
	font-size: 54px;
	font-weight: var(--exa-w-titre);
	line-height: 1;
}

.exa-fiche__corps {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 16px 18px 18px;
}

.exa-fiche__badge {
	align-self: flex-start;
	background: var(--exa-violet-pale);
	color: var(--exa-violet);
	font-size: var(--exa-fs-xs);
	font-weight: var(--exa-w-fort);
	line-height: 1.2;
	letter-spacing: .6px;
	text-transform: uppercase;
	border-radius: 3px;
	padding: 4px 8px;
}

/* Une agence se distingue d'un secteur : c'est un lieu où l'on peut se rendre. */
.exa-fiche__badge:is([data-agence], .est-agence) {
	background: var(--exa-rose-pale);
	color: var(--exa-rose);
}

.exa-fiche__nom {
	margin: 0;
	color: var(--exa-noir);
	font-size: var(--exa-fs-md);
	font-weight: var(--exa-w-titre);
	line-height: var(--exa-lh-titre);
}

/* Courtier ou mandataire. Volontairement plus discret que la pastille de lieu — c'est
   une précision de statut, pas une accroche — mais plus marqué que le téléphone, qui
   le suit. */
.exa-fiche__qualite {
	align-self: flex-start;
	display: block;
	color: var(--exa-violet);
	font-size: var(--exa-fs-xs);
	font-weight: var(--exa-w-fort);
	line-height: 1.3;
}

/* Le nom est le chemin vers la page de la personne. Il ne s'annonce pas comme un lien
   au repos — ce serait quatre traits bleus dans une grille de portraits — mais il le
   devient franchement au survol et il l'est toujours au clavier. */
.exa-fiche__lien {
	color: inherit;
	text-decoration: none;
}

.exa-fiche__lien:hover,
.exa-fiche__lien:focus-visible {
	color: var(--exa-violet);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.exa-fiche__mention {
	font-size: var(--exa-fs-sm);
	font-weight: var(--exa-w-corps);
	line-height: var(--exa-lh-serre);
	color: var(--exa-gris);
}

.exa-fiche__actions {
	display: flex;
	gap: 9px;
	margin-top: auto;
	padding-top: 6px;
}

.exa-bouton {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	border: 1.5px solid var(--exa-violet);
	border-radius: 4px;
	background: var(--exa-violet);
	color: #ffffff;
	font-family: inherit;
	font-size: var(--exa-fs-sm);
	font-weight: var(--exa-w-fort);
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
}

.exa-bouton:hover {
	background: var(--exa-violet-fonce);
	border-color: var(--exa-violet-fonce);
	color: #ffffff;
}

.exa-bouton:focus-visible {
	outline: 2px solid var(--exa-noir);
	outline-offset: 2px;
}

/* -------------------------------------------------------------- Zone d'intervention. */

.exa-zone {
	background: var(--exa-fond-alt);
	text-align: center;
}

.exa-zone__texte {
	margin: 14px auto 0 !important;
	max-width: 720px;
	font-size: var(--exa-fs-base);
	font-weight: var(--exa-w-corps);
	line-height: var(--exa-lh-corps);
	text-wrap: pretty;
}

/* La toile garde la MÊME hauteur avant et après le chargement. Elle a d'abord été
   basculée en position absolue tant que la carte n'était pas construite : Leaflet
   mesurait alors un conteneur plus court que celui qu'il occuperait ensuite, et ne
   demandait les tuiles que pour la moitié haute — la carte arrivait coupée. Le message
   de repli est donc superposé, jamais substitué. */
.exa-zone__carte {
	position: relative;
	margin-top: 26px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--exa-fond-alt);
	box-shadow: var(--exa-ombre);
}

.exa-carte__toile {
	width: 100%;
	height: 300px;
}

.exa-carte__repli {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 20px;
	text-align: center;
	color: var(--exa-gris);
	font-size: var(--exa-fs-sm);
	font-weight: var(--exa-w-corps);
	line-height: var(--exa-lh-serre);
}

.exa-zone__carte.est-chargee .exa-carte__repli {
	display: none;
}

.exa-carte__accord {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: 22px;
	transform: translateX(-50%);
	flex: 0 0 auto;
	width: auto;
}

/* Le fond de carte est ramené vers le gris de la charte : la couleur appartient aux
   repères, pas au décor. */
.exa-zone__carte .leaflet-tile-pane {
	filter: grayscale(.92) brightness(1.04) contrast(.97);
}

/* Repères et légende : mêmes formes que sur les pages mandataires, pour qu'une épingle
   veuille dire la même chose d'une page à l'autre. */
.exa-carte__legende {
	position: absolute;
	z-index: 500;
	right: 12px;
	top: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px 14px;
	border-radius: var(--exa-rayon);
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 2px 10px rgba(15, 9, 19, .14);
	font-size: var(--exa-fs-xs);
	line-height: var(--exa-lh-serre);
	text-align: left;
}

.exa-carte__legende b {
	font-size: var(--exa-fs-xs);
	font-weight: var(--exa-w-fort);
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--exa-noir);
}

.exa-carte__legende span {
	display: flex;
	align-items: center;
	gap: 8px;
}

.exa-puce {
	width: 12px;
	height: 12px;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	background: var(--exa-violet);
}

.exa-puce--agence { background: var(--exa-rose); }
.exa-puce--avenir { background: var(--exa-gris); }

/* La zone du secteur : un carré, comme l'aplat qu'il désigne, et non une épingle. */
.exa-puce--zone {
	border-radius: 2px;
	transform: none;
	border: 1px solid var(--exa-violet);
	background: rgba(112, 35, 209, .16);
}

.exa-point {
	position: relative;
	width: 28px;
	height: 28px;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	background: var(--exa-violet);
	box-shadow: 0 2px 6px rgba(15, 9, 19, .35);
}

.exa-point::after {
	content: "";
	position: absolute;
	inset: 8px;
	background: #ffffff;
	border-radius: 50%;
}

.exa-point--agence { background: var(--exa-rose); }
.exa-point--avenir { background: var(--exa-gris); }

.exa-infobulle__ville {
	color: var(--exa-noir);
	font-size: var(--exa-fs-md);
	font-weight: var(--exa-w-titre);
	line-height: var(--exa-lh-titre);
}

.exa-infobulle__mention {
	display: inline-block;
	margin: 4px 0 8px;
	padding: 3px 7px;
	border-radius: 3px;
	background: var(--exa-violet-pale);
	color: var(--exa-violet);
	font-size: var(--exa-fs-xs);
	font-weight: var(--exa-w-fort);
	line-height: 1.2;
	letter-spacing: .4px;
	text-transform: uppercase;
}

.exa-infobulle__mention--rose {
	background: var(--exa-rose-pale);
	color: var(--exa-rose);
}

.exa-infobulle__personne {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 5px 0;
	border-top: 1px solid #f0edf3;
	font-size: var(--exa-fs-sm);
}

.exa-infobulle__bouton {
	flex: none;
	padding: 6px 12px;
	border: none;
	border-radius: 4px;
	background: var(--exa-violet);
	color: #ffffff;
	font-family: var(--exa-police);
	font-size: var(--exa-fs-xs);
	font-weight: var(--exa-w-fort);
	cursor: pointer;
}

.exa-infobulle__bouton:hover { background: var(--exa-violet-fonce); }

.exa-zone__carte .leaflet-popup-content-wrapper {
	border-radius: var(--exa-rayon);
	box-shadow: 0 8px 24px rgba(15, 9, 19, .18);
}

.exa-zone__carte .leaflet-popup-content {
	margin: 14px 16px;
	font-family: var(--exa-police);
	color: var(--exa-texte);
}

.exa-zone__pastilles {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 9px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.exa-zone__pastilles li {
	background: var(--exa-fond);
	border: 1px solid #e4dfe9;
	border-radius: 999px;
	padding: 7px 15px;
	color: var(--exa-noir);
	font-size: var(--exa-fs-sm);
	font-weight: var(--exa-w-moyen);
	line-height: 1.4;
}

/* ------------------------------------------------------------------------ Accroche. */

.exa-accroche {
	text-align: center;
}

.exa-accroche__titre {
	margin: 0 !important;
	color: var(--exa-noir);
	font-size: var(--exa-fs-xl);
	font-weight: var(--exa-w-titre);
	line-height: var(--exa-lh-titre);
	text-wrap: pretty;
}

.exa-accroche__texte {
	margin-top: 16px !important;
	color: var(--exa-noir);
	font-size: var(--exa-fs-lg);
	font-weight: var(--exa-w-corps);
	line-height: var(--exa-lh-serre);
	text-wrap: pretty;
}

/* ------------------------------------------------------- Fiche de contact (dialogue). */

.exa-fiches[hidden] {
	display: none;
}

/* Le dialogue est déplacé dans <body> pour se superposer à la page : il sort donc de
   « .exa-equipe » et n'hérite plus de rien. Il repose sa base typographique lui-même. */
.exa-dialogue {
	position: fixed;
	inset: 0;
	z-index: 9998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	background: rgba(15, 9, 19, .62);
	color: var(--exa-texte);
	font-family: var(--exa-police);
	font-size: var(--exa-fs-base);
	font-weight: var(--exa-w-corps);
	line-height: var(--exa-lh-corps);
	animation: exaFondu .2s;
}

.exa-dialogue[hidden] {
	display: none;
}

.exa-dialogue p {
	margin: 0;
}

/* Sans rembourrage : ce sont les deux colonnes qui portent le leur, sinon l'aplat
   violet du formulaire flotterait dans une marge blanche au lieu d'atteindre le bord. */
.exa-dialogue__boite {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(880px, 96vw);
	max-height: 88vh;
	overflow: auto;
	background: var(--exa-fond);
	border-radius: 10px;
	animation: exaEntree .28s ease-out;
}

/* La fiche occupe toute la boîte : sans cela, l'aplat violet s'arrête avant le bas et
   laisse une bande blanche sous la colonne la plus courte. */
.exa-dialogue__boite > .exa-fiche-detail {
	flex: 1;
}

/* Au-dessus des deux colonnes, et lisible sur les deux fonds : le blanc opaque tient
   aussi bien sur le violet du formulaire que sur le blanc des informations. */
.exa-dialogue__fermer {
	position: absolute;
	z-index: 2;
	top: 10px;
	right: 10px;
	width: 34px;
	height: 34px;
	border: none;
	border-radius: 50%;
	background: var(--exa-fond);
	color: var(--exa-noir);
	font-size: var(--exa-fs-lg);
	line-height: 1;
	box-shadow: 0 1px 6px rgba(15, 9, 19, .2);
	cursor: pointer;
}

.exa-dialogue__fermer:hover {
	background: #e8e4ee;
}

/* Une colonne sur téléphone — les informations, puis le formulaire —, deux dès qu'il y
   a la place. C'est la disposition de la section « Contact » des pages mandataires. */
.exa-fiche-detail {
	display: grid;
	align-items: stretch;
}

.exa-fiche-detail__infos {
	padding: 28px 24px 26px;
}

.exa-fiche-detail__identite {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-right: 34px;
}

.exa-fiche-detail__photo,
.exa-fiche-detail__initiale {
	width: 84px;
	height: 84px;
	flex: none;
	border-radius: 50%;
	object-fit: cover;
}

/* ORNEMENT, comme sur la vignette : une lettre qui occupe un rond vide. */
.exa-fiche-detail__initiale {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--exa-violet-pale);
	color: var(--exa-violet);
	font-size: 34px;
	font-weight: var(--exa-w-titre);
	line-height: 1;
}

.exa-fiche-detail__nom {
	margin: 0 0 8px;
	color: var(--exa-noir);
	font-size: var(--exa-fs-lg);
	font-weight: var(--exa-w-titre);
	line-height: var(--exa-lh-titre);
}

.exa-fiche-detail__bio {
	margin-top: 18px !important;
	font-size: var(--exa-fs-base);
	font-weight: var(--exa-w-corps);
	line-height: var(--exa-lh-corps);
	text-wrap: pretty;
}

.exa-fiche-detail__bio + .exa-fiche-detail__bio {
	margin-top: 10px !important;
}

.exa-fiche-detail__coordonnees {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.exa-coord {
	position: relative;
	padding-left: 26px;
	font-size: var(--exa-fs-base);
	line-height: var(--exa-lh-serre);
}

/* Les repères sont dessinés en CSS : trois icônes ne valent pas une requête. */
.exa-coord::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 15px;
	height: 15px;
	background: var(--exa-violet);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.exa-coord--lieu::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s-8-6.3-8-12.5A8 8 0 0 1 20 9.5C20 15.7 12 22 12 22zm0-9.5a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s-8-6.3-8-12.5A8 8 0 0 1 20 9.5C20 15.7 12 22 12 22zm0-9.5a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'/%3E%3C/svg%3E");
}

.exa-coord--tel::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 15.5a12.8 12.8 0 0 1-4-.6 1 1 0 0 0-1 .2l-1.8 1.8a15 15 0 0 1-6.1-6.1l1.8-1.8a1 1 0 0 0 .2-1 12.8 12.8 0 0 1-.6-4 1 1 0 0 0-1-1H4a1 1 0 0 0-1 1A17 17 0 0 0 20 21a1 1 0 0 0 1-1v-3.5a1 1 0 0 0-1-1z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 15.5a12.8 12.8 0 0 1-4-.6 1 1 0 0 0-1 .2l-1.8 1.8a15 15 0 0 1-6.1-6.1l1.8-1.8a1 1 0 0 0 .2-1 12.8 12.8 0 0 1-.6-4 1 1 0 0 0-1-1H4a1 1 0 0 0-1 1A17 17 0 0 0 20 21a1 1 0 0 0 1-1v-3.5a1 1 0 0 0-1-1z'/%3E%3C/svg%3E");
}

.exa-coord--mail::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm8 7.2L20.3 6H3.7L12 11.2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm8 7.2L20.3 6H3.7L12 11.2z'/%3E%3C/svg%3E");
}

.exa-coord--page::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.4l-8.3 8.3-1.4-1.4L17.6 5H14V3zM5 5h5v2H6v11h11v-4h2v6H5V5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.4l-8.3 8.3-1.4-1.4L17.6 5H14V3zM5 5h5v2H6v11h11v-4h2v6H5V5z'/%3E%3C/svg%3E");
}

.exa-coord a {
	color: var(--exa-texte);
	text-decoration: none;
}

.exa-coord a:hover {
	color: var(--exa-violet);
	text-decoration: underline;
}

/* -------------------------------------------- Formulaire de contact (dans le dialogue).
 *
 * Le balisage reste celui de Contact Form 7 ; seules les classes « exa-form__* » du
 * corps du formulaire sont à nous. Ce sont EXACTEMENT celles qu'attend déjà
 * assets/css/mandataire.css pour le formulaire de la page mandataire : un seul jeu de
 * noms pour un seul formulaire, rendu ici sur fond blanc et là sur fond violet.
 */

.exa-fiche-detail__formulaire {
	padding: 28px 24px 26px;
	background: var(--exa-violet);
	color: #ffffff;
}

.exa-form__invite {
	margin: 0 0 16px !important;
	color: #ffffff;
	font-size: var(--exa-fs-base);
	font-weight: var(--exa-w-moyen);
	line-height: var(--exa-lh-serre);
}

.exa-fiche-detail__formulaire .wpcf7 form > p,
.exa-fiche-detail__formulaire .wpcf7 form > div > p {
	margin: 0;
}

.exa-fiche-detail__formulaire .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.exa-fiche-detail__formulaire .exa-form__ligne {
	display: grid;
	gap: 12px;
}

.exa-fiche-detail__formulaire input[type="text"],
.exa-fiche-detail__formulaire input[type="email"],
.exa-fiche-detail__formulaire input[type="tel"],
.exa-fiche-detail__formulaire textarea {
	width: 100%;
	padding: 12px 14px;
	border: none;
	border-radius: 4px;
	background: var(--exa-fond);
	color: var(--exa-noir);
	font-family: var(--exa-police);
	font-size: var(--exa-fs-saisie);
	font-weight: var(--exa-w-corps);
	line-height: var(--exa-lh-serre);
}

/* Sur l'aplat violet, un contour violet ne se verrait pas : le repère de focus est blanc. */
.exa-fiche-detail__formulaire input[type="text"]:focus,
.exa-fiche-detail__formulaire input[type="email"]:focus,
.exa-fiche-detail__formulaire input[type="tel"]:focus,
.exa-fiche-detail__formulaire textarea:focus {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.exa-fiche-detail__formulaire textarea {
	min-height: 110px;
	resize: vertical;
}

.exa-fiche-detail__formulaire ::placeholder {
	color: #9b93a4;
	opacity: 1;
}

/* La case et son libellé : c'est le <label> que Contact Form 7 place à l'intérieur du
   bloc qu'il faut aligner, pas le bloc lui-même — il ne contient qu'une enveloppe. */
.exa-fiche-detail__formulaire .exa-form__rgpd label,
.exa-fiche-detail__formulaire .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	color: #ffffff;
	font-size: var(--exa-fs-xs);
	font-weight: var(--exa-w-corps);
	line-height: var(--exa-lh-serre);
	cursor: pointer;
}

.exa-fiche-detail__formulaire .wpcf7-list-item {
	margin: 0;
}

.exa-fiche-detail__formulaire input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-top: 1px;
	flex: none;
	accent-color: #ffffff;
}

.exa-fiche-detail__formulaire .exa-form__mentions {
	color: rgba(255, 255, 255, .82);
	font-size: var(--exa-fs-xs);
	line-height: var(--exa-lh-serre);
}

.exa-fiche-detail__formulaire a {
	color: #ffffff;
	text-decoration: underline;
}

.exa-fiche-detail__formulaire .exa-form__envoi {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

/* Contact Form 7 place son témoin d'envoi APRÈS le bouton, avec 24 px de marge de part
   et d'autre : laissé tel quel, il décolle le bouton du bord droit. On le renvoie à
   gauche, où il reste visible pendant l'envoi. */
.exa-fiche-detail__formulaire .exa-form__envoi .wpcf7-spinner {
	order: -1;
}

.exa-fiche-detail__formulaire .wpcf7-submit {
	min-height: 44px;
	padding: 10px 35px;
	border: none;
	border-radius: 4px;
	background: #ffffff;
	color: var(--exa-violet);
	font-family: var(--exa-police);
	font-size: var(--exa-fs-base);
	font-weight: var(--exa-w-titre);
	cursor: pointer;
	transition: background-color .2s ease;
}

.exa-fiche-detail__formulaire .wpcf7-submit:hover {
	background: var(--exa-violet-pale);
}

/* Messages de Contact Form 7 : lisibles sur le fond violet. */
.exa-fiche-detail__formulaire .wpcf7-response-output {
	margin: 4px 0 0 !important;
	padding: 12px 14px;
	border-radius: 4px;
	border: 1px solid rgba(255, 255, 255, .45);
	font-size: var(--exa-fs-sm);
	line-height: var(--exa-lh-serre);
}

.exa-fiche-detail__formulaire .wpcf7-not-valid-tip {
	margin-top: 4px;
	color: #ffe4ef;
	font-size: var(--exa-fs-xs);
}

.exa-fiche-detail__formulaire .wpcf7-spinner {
	background-color: rgba(255, 255, 255, .6);
}

@keyframes exaFondu {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes exaEntree {
	from { opacity: 0; transform: translateY(14px) scale(.985); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.exa-dialogue,
	.exa-dialogue__boite {
		animation: none;
	}
}

/* --------------------------------------------------------------------- Écrans larges.
 *
 * Les points de rupture sont ceux de la feuille des pages mandataires — 600 et 1024 —
 * et non plus 700 et 1024. Deux gabarits voisins qui basculent à des largeurs
 * différentes se répondent mal quand on passe de l'un à l'autre en redimensionnant.
 *
 * Les tailles de police, elles, ne figurent plus ici : c'est le socle qui redéfinit
 * l'échelle aux mêmes largeurs, et toutes les règles ci-dessus suivent d'elles-mêmes.
 */

@media screen and (min-width: 600px) {
	.exa-section { padding-block: 56px; }
	.exa-hero { min-height: 440px; }
	.exa-hero__surtitre { padding: 8px 30px 8px 22px; }
	.exa-hero__titre { padding: 8px 38px; margin-left: 52px; }
	.exa-carte__toile { height: 420px; }
	.exa-fiche-detail__photo,
	.exa-fiche-detail__initiale { width: 96px; height: 96px; }

	/* Nom et adresse électronique côte à côte, comme sur la page mandataire : c'est le
	   même formulaire, il doit se plier de la même façon. */
	.exa-fiche-detail__formulaire .exa-form__ligne {
		grid-template-columns: 1fr 1fr;
	}
}

/* Les deux colonnes du dialogue n'arrivent qu'ici : plus tôt, la boîte suit la largeur
   de l'écran et chaque colonne tomberait sous les 320 px — le formulaire y serait à
   l'étroit et les coordonnées se couperaient en deux lignes chacune. Rupture à 900 px,
   comme la feuille des pages mandataires, et non à une valeur inventée pour l'occasion. */
@media screen and (min-width: 900px) {
	.exa-fiche-detail {
		grid-template-columns: 1fr 1.05fr;
	}

	.exa-fiche-detail__infos {
		padding: 34px 28px 32px;
	}

	.exa-fiche-detail__formulaire {
		padding: 34px 30px 32px;
	}
}

@media screen and (min-width: 1024px) {
	.exa-equipe { --exa-gouttiere: 32px; }
	.exa-section { padding-block: 64px; }
	.exa-hero { min-height: 500px; }
	.exa-hero__surtitre { padding: 8px 34px 8px 26px; }
	.exa-hero__titre { padding: 8px 44px; margin: -12px 0 0 64px; }
	.exa-intro { padding-block: 64px 20px; }
	.exa-equipe__grille { grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 26px; }
	.exa-zone { padding-block: 68px 76px; }
	.exa-carte__toile { height: 500px; }
	.exa-accroche { padding-block: 78px; }
}