/*
Theme Name: MAHE
Theme URI: https://maherecrutement.fr
Description: Thème de blocs autonome de MAHE RECRUTEMENT, construit depuis la maquette validée (août 2026). Aucun thème parent, aucune dépendance tierce : MAHE est propriétaire de son thème.
Version: 0.99.53
Requires at least: 6.7
Requires PHP: 8.2
Author: MAHE RECRUTEMENT (via A2RU)
License: GPL-2.0-or-later
Text Domain: mahe
Tags: block-theme
*/

/* ══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHIE — RÈGLE STRUCTURANTE (15/09/2026)
   ══════════════════════════════════════════════════════════════════════════
   Aucune font-size en valeur brute (rem, px, em) dans ce fichier : uniquement
   les neuf tailles de theme.json, par var(--wp--preset--font-size--…).
     surtitre .72 · small .875 · medium 1 · large 1.15 · x-large 1.45
     chiffre 2.4 · huge 2.7 · display 3.4 · hero 3.8
   Pourquoi : le 14/09, MAHE a vu « des différences de taille de temps en temps ».
   Mesuré : 33 tailles rendues pour 10 déclarées, dont 14 entre 12 et 16 px,
   séparées de 0,16 à 0,32 px — 111 déclarations en dur, chacune raisonnable
   seule, insensées ensemble. Le contrôle R18 de la recette rend ce fichier rouge
   dès qu'une valeur brute y revient. */

/* ══════════════════════════════════════════════════════════════════════════
   Feuille du thème — ce qui ne s'exprime PAS en theme.json.
   Les jetons (couleurs, tailles, espacements, ombres, rayons) vivent dans
   theme.json ; ici, uniquement les comportements et les motifs de la maquette
   portés sur les classes de blocs (wp-block-*).
   Port de maquettes/assets/mahe.css : en cours (étape 2 de la reprise thème).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Base ── */

/* ⚠️ Le réglage le plus important du fichier, et il manquait : sans lui, un élément
   en `width: 100%` avec du padding DÉBORDE de sa colonne. C'est ce qui faisait se
   toucher les deux champs d'une même ligne du formulaire de contact, avec des
   largeurs inégales (mesuré au pixel le 31/08). La feuille de la maquette l'avait
   dans son reset ; en réécrivant le thème, je l'ai perdu. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	/* L en-tete est colle en haut : sans cela, un lien d ancre (#approche,
	   #methode, #contact) amene sa cible SOUS la barre. On reserve la hauteur de
	   l en-tete condense, plus une respiration.
	   Ni le theme ni la maquette ne le posaient — le defaut restait invisible tant
	   que le collant ne fonctionnait pas (voir la note sur l enveloppe de la
	   partie de gabarit, plus bas). */
	scroll-padding-top: calc(clamp(64px, 4.45vw + 20px, 84px) + 16px);
}

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

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2 {
	text-wrap: balance;
}

::selection {
	background: var(--wp--preset--color--rose);
	color: var(--wp--preset--color--blanc);
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--blanc);
	box-shadow: 0 0 0 4px var(--wp--preset--color--rose-fonce);
	border-radius: 3px;
}

/* ── Les liens de navigation, boutons et titres ne sont pas soulignés
      (le soulignement AA ne vise que les liens du texte courant) ── */
.wp-block-navigation a,
.wp-block-button a,
h1 a, h2 a, h3 a, h4 a,
.wp-block-post-title a,
.wp-block-social-links a {
	text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   EN-TÊTE — port de `header.site` / `nav.main` / `.mnav` de la maquette
   sur le balisage de blocs (core/navigation, core/site-logo).
   ══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ Le collant se pose sur l ENVELOPPE de la partie de gabarit, pas sur
   `.mahe-header`. WordPress rend `<header class="wp-block-template-part">` autour
   de `<header class="wp-block-group mahe-header">` ; cette enveloppe ne fait que la
   hauteur de l en-tete. Or un element collant ne peut pas sortir de son bloc
   conteneur : pose sur `.mahe-header`, il n avait AUCUNE course et disparaissait
   des le premier defilement (verifie en capture au 31/08 — barre absente en haut
   de la fenetre apres un saut d ancre). Pose sur l enveloppe, dont le parent est
   `.wp-site-blocks`, il tient sur toute la page. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 60;
}

.mahe-header {
	transition: padding .35s var(--wp--custom--transition), background .35s var(--wp--custom--transition), box-shadow .35s var(--wp--custom--transition);
}

/* Condensé au défilement (classe posée par assets/js/mahe.js) */
.mahe-header.is-small {
	background: rgba(247, 245, 242, .9);
	backdrop-filter: blur(10px);
	box-shadow: 0 1px 0 var(--wp--preset--color--ligne);
}

.mahe-header__bar {
	/* La hauteur suit celle du logo (fluide) : a 88px fixes dans une barre de 84px,
	   le logo debordait. 6.1vw = la hauteur du logo, +24px de respiration. */
	height: clamp(84px, calc(6.1vw + 24px), 112px);
	gap: 2rem;
	transition: height .35s var(--wp--custom--transition);
}

.mahe-header.is-small .mahe-header__bar {
	/* Etat condense : l en-tete etant desormais reellement collant, il faut qu il
	   rende la place au contenu des qu on defile. */
	height: clamp(64px, calc(4.45vw + 20px), 84px);
}

/* Le logo est servi depuis le thème (SVG, net à toutes les tailles) plutôt que
   depuis la bibliothèque de médias : rien à téléverser, et pas de question de
   téléversement SVG à trancher. Pour le changer : remplacer
   assets/images/logo.svg. */
/* Bouton « Contact » de l en-tete.
   ⚠️ NE PAS reduire `font-size` : le blanc sur `rose` #BA596B donne 4,44:1, soit
   sous le seuil AA du texte courant (4,5:1). C est la taille du texte qui le fait
   passer en « texte large » (seuil 3:1) — amelioration A-04, assumee et tracee.
   Rudy signale le 31/08 que l encadre est trop gros : on rogne donc le PADDING,
   qui ne joue sur aucun contraste. Repere : la maquette rend 117x58px. */
.mahe-header__cta .wp-block-button__link {
	/* Le padding vertical est le seul levier sur la hauteur : la police reste a sa
	   valeur (contrainte d accessibilite A-04, voir ci-dessus). */
	padding: 0.4em 1.15em;
	line-height: 1.35;
}

.mahe-header__logo {
	margin: 0;
}

.mahe-header__logo img {
	/* 38px dans la maquette. Trois passes d essai de Rudy le 31/08 (46 puis 58,
	   toujours juge trop petit) : porte a 88px sur grand ecran, soit x1.5 sur la
	   valeur precedente et x2,3 sur la maquette.
	   ⚠️ Hauteur FLUIDE et non fixe : a 88px fixes, le rendu casse des 960px — le
	   menu passait a la ligne et le libelle du bouton se scindait en « Conta / ct »
	   (constate au rendu du 31/08). Le clamp rend les 88px a 1440px et redescend a
	   56px a 920px, ou la bascule mobile prend le relais. */
	--mahe-logo-h: clamp(56px, 6.1vw, 88px);
	height: var(--mahe-logo-h);
	width: auto;
	/* ⚠️ Compensation du blanc interne du SVG. `logo.svg` a un viewBox de
	   `0 0 98.38 36.77` mais son encre ne commence qu a x=7.22 : le logo se posait
	   donc 0,196 x sa hauteur trop a droite, et son « M » ne tombait pas sur la
	   colonne de contenu (mesure du 31/08 : encre a 169px pour une colonne a 152).
	   La compensation est proportionnelle, elle suit donc le clamp et l etat
	   condense sans second reglage. Si le fichier logo change, revoir ce 0.196. */
	margin-left: calc(var(--mahe-logo-h) * -0.196);
	transition: height .35s var(--wp--custom--transition), margin-left .35s var(--wp--custom--transition);
}

.mahe-header.is-small .mahe-header__logo img {
	/* La marge de compensation suit, elle est exprimee a partir de la variable. */
	--mahe-logo-h: clamp(44px, 4.45vw, 64px);
	height: var(--mahe-logo-h);
}

.mahe-header__right {
	gap: 1.2rem;
}

/* ── Menu principal : soulignement animé, page courante en rose ── */
.mahe-nav {
	font-size: var(--wp--preset--font-size--medium);
	margin-left: auto;
}

.mahe-nav .wp-block-navigation__container {
	gap: 1.7rem;
}

.mahe-nav .wp-block-navigation-item__content {
	position: relative;
	padding: .4em 0;
	color: var(--wp--preset--color--contraste);
}

.mahe-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: .1em;
	width: 100%;
	height: 1.5px;
	background: var(--wp--preset--color--contraste);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s var(--wp--custom--transition);
}

.mahe-nav .wp-block-navigation-item__content:hover::after {
	transform: scaleX(1);
}

.mahe-nav .current-menu-item > .wp-block-navigation-item__content {
	font-weight: 600;
}

.mahe-nav .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
	background: var(--wp--preset--color--rose);
}

/* ── Téléphone : serif gras, insécable ── */
.mahe-tel {
	margin: 0;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 700;
}

.mahe-tel a {
	color: var(--wp--preset--color--contraste);
	text-decoration: none;
}

/* ── Bascule bureau ↔ mobile à 1023px (et non les 600px natifs du bloc) ──
   La maquette basculait a 920px, avec un logo de 38px. Le logo porte a 88px
   (demande de Rudy, 31/08) ne laisse plus la place au menu complet entre 921 et
   ~1000px : le menu passait a la ligne et le libelle du bouton se scindait en
   « Conta / ct » (mesure : pastille de 60px de haut au lieu de 42 a 940px).
   Verifie : a 1024px la barre tient avec de la marge. */
@media (max-width: 1023px) {
	.mahe-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.mahe-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.mahe-tel {
		display: none;
	}

	/* Le logo de 88px du bureau ne tient pas ici : a 390px il ecrasait le bouton
	   « Contact », dont le libelle se scindait en deux lignes dans la pastille
	   (constate au rendu du 31/08). On le ramene a une taille qui laisse la place
	   au bouton et au menu. */
	.mahe-header__logo img,
	.mahe-header.is-small .mahe-header__logo img {
		--mahe-logo-h: 56px;
		height: var(--mahe-logo-h);
	}

	/* le bouton d'ouverture passe après le bouton Contact, comme dans la maquette */
	.mahe-header__right .mahe-nav {
		order: 3;
	}

	.mahe-header__bar {
		height: 72px;
		gap: 1rem;
	}
}

/* ── Panneau mobile : déroulant sous la barre (et non plein écran) ──
   ⚠️ 15/09 — LE MENU MOBILE ÉTAIT INUTILISABLE, et personne ne l'avait ouvert.
   Le CSS du cœur pose `position: relative` sur `.wp-block-navigation` (24 px de
   large : la taille du bouton). Le panneau en `absolute; left: 0; right: 0` se
   calait donc sur ces 24 px — une bande étroite à droite, le bouton « fermer »
   visible, les cinq liens hors champ. Mesuré à 390 px : panneau 24×292, liens à
   x=224–358, `elementFromPoint` au centre d'un lien renvoyait la page derrière.
   Le bloc repasse en `static` sous le point de rupture : le panneau s'ancre
   alors sur `.mahe-header` (relative), c'est-à-dire sur toute la barre. */
@media (max-width: 1023px) {
	.mahe-nav.wp-block-navigation {
		position: static;
	}

	/* Cibles tactiles : les boutons ouvrir / fermer du cœur font 24 × 24 px.
	   On les porte à 44 × 44 par le remplissage, sans grossir l'icône. */
	.mahe-nav .wp-block-navigation__responsive-container-open,
	.mahe-nav .wp-block-navigation__responsive-container-close {
		padding: 10px;
		margin: -10px;
		box-sizing: content-box;
	}

	/* Le bouton « fermer » : le cœur le colle en top: 0 / right: 0, et la marge
	   négative ci-dessus le poussait jusqu'à déborder de 10 px à droite du
	   panneau (mesuré : x = 356–400 pour 390 px d'écran). Rudy, 15/09 : un peu
	   plus bas, un peu plus à gauche. La liste descend d'autant. */
	.mahe-nav .wp-block-navigation__responsive-container-close {
		margin: 0;
		top: 14px;
		right: 22px;
	}

	/* Le numéro de téléphone est masqué dans la barre en mobile (pas la place) :
	   il rejoint le panneau, en premier — c'est sur téléphone qu'on appelle. */
	.mahe-nav .mahe-nav__tel {
		display: block;
	}
}

.mahe-nav .mahe-nav__tel {
	display: none;
}

.mahe-nav .wp-block-navigation__responsive-container.is-menu-open {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	bottom: auto;
	padding: 10px 0;
	background-color: var(--wp--preset--color--creme);
	border-top: 1px solid var(--wp--preset--color--ligne);
	border-radius: 0 0 var(--wp--custom--rayon--lg) var(--wp--custom--rayon--lg);
	box-shadow: var(--wp--preset--shadow--ombre-menu);
}

.mahe-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 0;
	/* Le cœur aligne ce conteneur « à droite » (align-items: flex-end) pour
	   suivre la justification du bloc : la liste ne faisait que 168 px. */
	align-items: stretch;
}

.mahe-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.is-responsive {
	width: 100%;
}

.mahe-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	align-items: stretch;
	/* Le bloc est « justifié à droite » pour la barre bureau ; dans le panneau,
	   ça collait les liens au bord droit sur 134 px de large. Ici ils prennent
	   toute la largeur, texte à gauche — et le premier commence SOUS le bouton
	   « fermer », que le cœur pose en haut à droite du panneau. */
	justify-content: flex-start;
	flex-direction: column;
	/* 15/09 (Rudy) : le numéro de téléphone s'aligne sur la croix de fermeture,
	   sur la même ligne — le numéro à gauche, la croix à droite. */
	padding-top: 12px;
}

.mahe-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	justify-content: flex-start;
}

.mahe-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	text-align: left;
	padding: 13px 32px;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
}

.mahe-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	content: none;
}

.mahe-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--fond-doux);
}

.mahe-nav .wp-block-navigation__responsive-container.is-menu-open .mahe-nav__tel .wp-block-navigation-item__content {
	font-weight: 700;
	border-bottom: 1px solid var(--wp--preset--color--ligne);
	margin-bottom: 6px;
	/* la croix occupe le coin droit : le lien s'arrête avant, pour que la zone
	   tactile du numéro ne passe pas sous celle de la croix. `margin-inline-end:
	   auto` le maintient à gauche — le cœur justifie ce li à droite. */
	width: calc(100% - 88px);
	margin-inline-end: auto;
}

.mahe-nav .wp-block-navigation__responsive-container-open,
.mahe-nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--contraste);
}

/* ══════════════════════════════════════════════════════════════════════════
   PIED DE PAGE — port de `footer.site` (4 colonnes + barre basse)
   ══════════════════════════════════════════════════════════════════════════ */

.mahe-footer a {
	color: rgba(255, 255, 255, .82);
	font-size: var(--wp--preset--font-size--small);
	line-height: 2.1;
	text-decoration: none;
}

/* Survol des liens du pied de page — DEMANDE DE RUDY, 01/09/2026 : reprendre
   `rose-survol`, la teinte retenue le matin meme pour les boutons, pour n avoir
   qu un seul geste de survol sur tout le site.

   ⚠️ LE CHIFFRE, ecrit pour qu il ne se perde pas : sur le fond nuit #2C3944,
   `rose-survol` #C46A7C donne 3,21:1, contre 4,74:1 pour le `rose-clair` qu il
   remplace. Les liens font 0,92rem — du texte normal, donc seuil AA a 4,5:1 : l etat
   de SURVOL passe sous le seuil. L etat au repos (blanc a 82 %) n est pas touche,
   le texte reste lisible en permanence ; c est la teinte transitoire qui baisse.

   Pourquoi aucune teinte intermediaire n existe : pour tenir 4,5:1 sur ce fond il
   faut une luminance >= 0,350 ; `rose-survol` est a 0,235. L ecart n est pas un
   reglage, il est structurel — `rose-survol` est une couleur de REMPLISSAGE, pensee
   pour porter du texte blanc, et on l emploie ici comme couleur de TEXTE sur fond
   sombre. Meme famille, roles opposes.

   RETOUR ARRIERE le 01/09 au vu du rendu : Rudy a essaye `rose-survol` et le
   survol ne se detache pas. C est le 3,21:1 ci-dessus, vu a l oeil.
   `rose-clair` #D2939F est retabli : 4,74:1.

   Et la coherence demandee n est PAS perdue — c est la MEME teinte (348,9°) et la
   MEME saturation (0,413) que `rose-survol`, seule la luminosite change (0,54 →
   0,70) pour tenir sur fond sombre. Un seul rose de survol sur le site, decline
   selon le fond : `rose-survol` sur clair, `rose-clair` sur sombre. */
.mahe-footer a:hover {
	color: var(--wp--preset--color--rose-clair);
}

/* ── Comptes sociaux du pied de page ─────────────────────────────────────────
   ⚠️ Cette regle DOIT rester apres `.mahe-footer a:hover` : meme specificite
   (0,2,1), c est l ordre source qui tranche. Placee avant, le glyphe passait au
   rose clair sur le rose de survol — deux roses l un sur l autre.
   Le survol reprend `--wp--custom--rose-survol`, la teinte decidee le 01/09 pour
   les boutons : un seul geste de survol sur tout le site. Blanc dessus : 3,68:1,
   au-dessus du seuil de 3:1 des elements graphiques. */
.mahe-reseaux {
	display: flex;
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 20px 0 0;
}

/* `a` ET `span` : une entree sans URL est rendue en <span> — meme pastille a
   l ecran, mais rien de cliquable. La geometrie est commune, la couleur depend du
   fond : le pied de page est sombre, le heros est creme. */
.mahe-reseaux a,
.mahe-reseaux > li > span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid;
	transition: background-color .3s var(--wp--custom--transition), border-color .3s var(--wp--custom--transition), color .3s var(--wp--custom--transition);
}

.mahe-reseaux svg {
	display: block;
	fill: currentColor;
}

.mahe-footer .mahe-reseaux a,
.mahe-footer .mahe-reseaux > li > span {
	color: var(--wp--preset--color--blanc);
	border-color: rgba(255, 255, 255, .22);
}

.mahe-hero .mahe-reseaux a,
.mahe-hero .mahe-reseaux > li > span {
	color: var(--wp--preset--color--contraste);
	border-color: rgba(44, 57, 68, .2);
}

/* Seuls les LIENS reagissent au survol. Une pastille sans URL ne bouge pas : elle
   ne promet pas une action qu elle ne peut pas tenir.
   Specificite 0,3,1 — passe devant `.mahe-footer a:hover` (0,2,1), sinon le glyphe
   virerait au rose clair sur le rose de survol. */
.mahe-footer .mahe-reseaux a:hover,
.mahe-hero .mahe-reseaux a:hover {
	color: var(--wp--preset--color--blanc);
	background-color: var(--wp--custom--rose-survol);
	border-color: var(--wp--custom--rose-survol);
}

/* La bande creme de 24px que Rudy voit au-dessus du pied de page n est pas un
   parti pris : c est la marge de bloc par defaut de WordPress
   (`:where(.wp-site-blocks) > * { margin-block-start: 24px }`) qui s applique aussi
   entre le dernier bloc de contenu et le pied de page. Mesuree : y 7975 → 7998. */
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

/* Meme cause, ailleurs : entre deux sections pleine largeur QUI PORTENT TOUTES
   DEUX UN FOND, la marge de bloc par defaut de WordPress laisse voir 24px de
   creme — une bande parasite. Elle passe inapercue quand la section suivante n a
   pas de fond (rien ne trahit la marge), d ou un defaut visible seulement a
   certaines jonctions : 7 cas mesures sur 15 gabarits le 31/08 (accueil, avis,
   cabinet, entreprises, secteur, ville).
   Ces sections portent chacune leur propre padding (92 a 112px) : la marge
   inter-blocs n y est jamais souhaitee. */
/* `.mahe-page-main` est indispensable : sur l accueil, `front-page.html` pose les
   sections directement dans le <main>, sans passer par le bloc de contenu — la
   premiere version de cette regle laissait donc l accueil non corrige. */
:where(.entry-content, .wp-block-post-content, .wp-site-blocks, .mahe-page-main) > .alignfull + .alignfull {
	margin-block-start: 0;
}

.mahe-footer__logo img {
	/* 36px dans la maquette ; double a la demande de Rudy (essai du 31/08). */
	--mahe-logo-h: 72px;
	height: var(--mahe-logo-h);
	width: auto;
	filter: brightness(0) invert(1);
	/* ⚠️ Compensation du blanc interne du SVG. `logo.svg` a un viewBox de
	   `0 0 98.38 36.77` mais son encre ne commence qu a x=7.22 : le logo se posait
	   donc 0,196 x sa hauteur trop a droite, et son « M » ne tombait pas sur la
	   colonne de contenu (mesure du 31/08 : encre a 169px pour une colonne a 152).
	   La compensation est proportionnelle, elle suit donc le clamp et l etat
	   condense sans second reglage. Si le fichier logo change, revoir ce 0.196. */
	margin-left: calc(var(--mahe-logo-h) * -0.196);
	margin-bottom: 1.1rem;
}

.mahe-footer__titre {
	color: var(--wp--preset--color--blanc);
	margin-bottom: 1.1rem;
}

.mahe-footer__baseline {
	color: rgba(255, 255, 255, .72);
	max-width: 270px;
	line-height: 1.7;
}

.mahe-footer__contact {
	margin-top: 1rem;
}

.mahe-footer__adresses {
	/* 15/09 (Rudy) : les trois adresses quittent la colonne « Nos implantations »,
	   où chacune se repliait sur deux lignes, pour une ligne pleine largeur
	   au-dessus du trait de séparation. Une adresse par ligne en mobile. */
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 2.4rem;
	margin: 2.2rem 0 1.4rem;
	color: rgba(255, 255, 255, .82);
}

.mahe-footer__adr {
	white-space: nowrap;
}

@media (max-width: 920px) {
	.mahe-footer__adr {
		white-space: normal;
		flex-basis: 100%;
	}
}

.mahe-footer__nav .wp-block-navigation__container {
	gap: 0;
}

.mahe-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .15);
	color: rgba(255, 255, 255, .6);
}

.mahe-footer__bottom p {
	margin: 0;
}

.mahe-footer__bottom a {
	color: rgba(255, 255, 255, .6);
	font-size: inherit;
	line-height: inherit;
}

/* Le cœur force `flex-wrap: nowrap !important` sur .wp-block-columns au-dessus de
   782px : sans `!important` ici, les colonnes ne s'empileraient pas à 920px
   (constaté au rendu le 29/08, pas en théorie). */
@media (max-width: 920px) {
	.mahe-footer__grid {
		flex-wrap: wrap !important;
	}

	.mahe-footer__grid > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ══ Mouvement réduit : on respecte le réglage système ══ */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}

	/* Sans animation, l'apparition au défilement n'a plus de sens : le contenu
	   doit être visible d'emblée, sinon il resterait caché jusqu'au scroll. */
	.mahe-js .mahe-reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   ÉLÉMENTS PARTAGÉS DE LA MAQUETTE (surtitre, accroche, filé, note, reveal)
   ══════════════════════════════════════════════════════════════════════════ */

.mahe-eyebrow {
	font-weight: 600;
	letter-spacing: var(--wp--custom--interlettrage--large);
	text-transform: uppercase;
	color: var(--wp--preset--color--bleu-lien);
	margin: 0;
}

.mahe-lead {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--bleu-lien);
	max-width: 30ch;
	text-wrap: pretty;
}

/* Héros de l'accueil : la phrase doit tenir sur DEUX lignes (Rudy, 01/09). Ses
   100 caracteres a 30ch en prenaient quatre. On leve le plafond — la colonne de
   gauche (54 %) fixe alors la largeur — et `balance` egalise les deux lignes au
   lieu de laisser un orphelin.

   ⚠️ Portee `.mahe-hero` DELIBEREE : `.mahe-lead` habille dix compositions
   (entreprise, candidat, contact, cabinet, ville, offres, secteurs, avis,
   secteur, accueil). Elargir la classe elle-meme aurait deregle les neuf autres —
   c est exactement l incident `.mahe-proof` du 01/09, ou une classe partagee
   modifiee sans regarder ses autres emplois a casse la page Avis.

   Bureau seulement : en dessous de 921px les colonnes du heros s empilent (cf. la
   media query des colonnes), et la phrase doit alors reprendre sa largeur de
   lecture. */
@media (min-width: 921px) {
	.mahe-hero .mahe-lead {
		max-width: none;
		text-wrap: balance;
		/* 15/09 : échelle à neuf tailles — le lead est en `large` partout, hero
		   compris. À 1,15rem la phrase de 121 signes tient sur deux lignes. */
		font-size: var(--wp--preset--font-size--large);
	}
}

/* Surlignage filé sous un fragment de titre */
.mahe-fil {
	position: relative;
	white-space: nowrap;
}

.mahe-fil::after {
	content: "";
	position: absolute;
	left: -.04em;
	right: -.04em;
	bottom: .08em;
	height: .3em;
	background: var(--wp--preset--color--rose);
	opacity: .3;
	border-radius: 3px;
	z-index: -1;
}

.mahe-note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--gris-texte);
	font-style: italic;
}

/* Bouton secondaire « lien souligné à l'ouverture » (ex .link-u) */
.wp-block-button.is-style-mahe-lien .wp-block-button__link {
	/* Le seuil « texte large » (A-04) ne concerne QUE le bouton plein, où le blanc
	   sur rose est à 4,44:1. Ce lien-ci est bleu sur crème (6,03:1) : il reprend la
	   taille de la maquette. Sans cette ligne il héritait des 1,2rem du bouton et
	   écrasait la hiérarchie entre action principale et action secondaire. */
	font-size: var(--wp--preset--font-size--medium);
	background: none;
	color: var(--wp--preset--color--bleu-lien);
	padding: 0;
	border-radius: 0;
	position: relative;
}

.wp-block-button.is-style-mahe-lien .wp-block-button__link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1.5px;
	background: var(--wp--preset--color--rose);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .4s var(--wp--custom--transition);
}

.wp-block-button.is-style-mahe-lien .wp-block-button__link:hover::after {
	transform: scaleX(1);
}

.wp-block-button.is-style-mahe-lien .wp-block-button__link:hover {
	background: none;
	color: var(--wp--preset--color--bleu-lien);
}

/* ══════════════════════════════════════════════════════════════════════════
   SURVOL DU BOUTON PLEIN — le balayage progressif de la maquette
   ══════════════════════════════════════════════════════════════════════════

   La maquette n anime pas une couleur, elle DEPLACE un degrade : `.btn` porte un
   fond de 200 % de large cale a droite (`background-position: 100% 0`), et le
   survol le ramene a gauche (`0 0`) en 0,55 s. La teinte foncee entre donc
   PROGRESSIVEMENT PAR LA GAUCHE — c est le mecanisme que Rudy avait en tete.
   Mon theme se contentait d un `background-color` qui basculait d un coup.

   ⚠️ Le degrade est bati sur le ROSE MAHE, pas sur le corail `#E76B74` de la
   maquette : decision F, la charte prime.

   SENS DU BALAYAGE — Rudy, 01/09/2026 : la teinte qui entre par la gauche est plus
   CLAIRE que celle du repos, et non plus foncee. La maquette assombrissait ; le
   choix retenu eclaircit. Le mecanisme, lui, ne bouge pas.

   La teinte d arrivee ne pouvait PAS etre `rose-clair` (#D2939F) : blanc dessus =
   2,50:1, sous le seuil « texte large » de 3:1 sur lequel repose l amelioration
   A-04. D ou un jeton dedie `--wp--custom--rose-survol` (#C46A7C) : blanc = 3,68:1,
   seuil tenu avec de la marge. L ecart de luminance au repos est le miroir de
   l ancien balayage (+0,049 contre -0,046) : l animation garde exactement le meme
   poids visuel, elle est seulement inversee.

   `background-color` reste pose par theme.json : c est le repli si le degrade ne
   peint pas. Le style « lien souligne » n est pas concerne, sa regle `background:
   none` remet a zero image, taille et position. */
.wp-block-button:not(.is-style-mahe-lien) .wp-block-button__link,
.wpcf7 input.mahe-submit {
	background-image: linear-gradient(90deg, var(--wp--custom--rose-survol), var(--wp--preset--color--rose) 60%);
	background-size: 200% 100%;
	background-position: 100% 0;
	box-shadow: 0 8px 18px -8px rgba(163, 78, 94, .55);
	transition: background-position .55s var(--wp--custom--transition), transform .14s var(--wp--custom--transition), box-shadow .25s var(--wp--custom--transition);
}

.wp-block-button:not(.is-style-mahe-lien) .wp-block-button__link:hover,
.wpcf7 input.mahe-submit:hover {
	background-position: 0 0;
	/* L ombre passe de portee a interieure : le bouton s enfonce au lieu de flotter. */
	transform: translateY(1.5px);
	box-shadow: 0 3px 9px -6px rgba(163, 78, 94, .5), inset 0 1px 3px rgba(95, 35, 45, .14);
}

/* Flèche des boutons d'action : avance au survol */
.mahe-arw {
	display: inline-block;
	margin-left: .6em;
	transition: transform .35s var(--wp--custom--transition);
}

.wp-block-button__link:hover .mahe-arw {
	transform: translateX(4px);
}

/* Apparition au défilement — active seulement si le JS a pris la main */
.mahe-js .mahe-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s var(--wp--custom--transition), transform .7s var(--wp--custom--transition);
}

.mahe-js .mahe-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   HÉROS ÉDITORIAL DE L'ACCUEIL
   ══════════════════════════════════════════════════════════════════════════ */

/* `padding-block` et jamais le raccourci `padding` : le raccourci remettrait à 0
   les marges latérales globales (`.has-global-padding`) et le contenu toucherait
   le bord de l'écran sur mobile (constaté au rendu à 760px le 29/08). */
.mahe-hero {
	padding-block: 64px 40px;
}

.mahe-hero__grid {
	gap: 64px;
}

.mahe-hero__titre {
	line-height: 1.06;
	letter-spacing: -.02em;
	margin: 1.4rem 0 1.5rem;
}

.mahe-hero .mahe-lead {
	margin-bottom: 2rem;
}

.mahe-hero .mahe-actions {
	gap: 1rem;
	margin-bottom: 1.8rem;
}

/* ⚠️ `.mahe-proof` sert à TROIS endroits : le héros de l accueil, l en-tête de
   /avis/ et le bloc témoignages. Le comportement par défaut reste donc une rangée
   qui s enroule — c est ce qu attendent les deux derniers.
   Le 01/09, j ai d abord passé cette règle en colonne pour satisfaire une demande
   qui ne concernait QUE l accueil : sur /avis/, le point séparateur s est retrouvé
   seul sur une ligne entre les deux mentions. Une modification de composant partagé
   faite sans regarder ses autres usages. D où le variant explicite ci-dessous. */
.mahe-proof {
	display: flex;
	gap: 1.1rem;
	align-items: center;
	flex-wrap: wrap;
	color: var(--wp--preset--color--contraste-doux);
	margin: 0;
}

/* Variant de l accueil seul (demande de Rudy, 01/09) : la note Google sur sa ligne,
   les deux gages ensemble en dessous. Tenu par la STRUCTURE — deux groupes empilés —
   plutôt que par un retour à la ligne forcé, qui aurait cédé au premier changement
   de largeur. */
.mahe-proof--empile {
	flex-direction: column;
	align-items: flex-start;
	gap: .55rem;
}

.mahe-proof__note,
.mahe-proof__gages {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	flex-wrap: wrap;
}

.mahe-proof b {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--medium);
	/* Pas de `font-weight: 400` : la maquette laisse le <b> en gras (`.proof b` ne
	   touche qu a la famille et a la taille). Un serif MAIGRE au milieu d une ligne
	   sans-serif se lit comme un bug de police, pas comme une emphase — signale par
	   Rudy a l essai du 31/08. Le gras rend l intention lisible. */
}

/* Pastilles sociales DANS la ligne de preuve du héros (Rudy, 08/09). Plus petites
   qu'au pied de page : à 38px elles écrasaient une ligne de texte de 0,92rem et
   la faisaient paraître décalée. 30px tient la ligne. */
.mahe-proof__note .mahe-reseaux {
	margin: 0 0 0 .3rem;
	gap: 8px;
}

.mahe-proof__note .mahe-reseaux a,
.mahe-proof__note .mahe-reseaux > li > span {
	width: 30px;
	height: 30px;
}

.mahe-proof__note .mahe-reseaux svg {
	width: 15px;
	height: 15px;
}

.mahe-proof__point {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--wp--preset--color--rose);
}

.mahe-proof__etoiles {
	color: var(--wp--preset--color--rose-fonce);
	letter-spacing: .06em;
}

/* ── Étoiles au prorata de la note (inc/avis.php, 15/09) ──
   Deux rangs superposés : le gris en fond, le coloré par-dessus, rogné à
   `note / 5` de sa largeur. Une note de 4,6 montre donc 4 étoiles et 6 dixièmes,
   pas 5 pleines. `white-space: nowrap` sur les deux : si le rang du dessus se
   repliait, le rognage n'aurait plus de sens. */
.mahe-etoiles {
	position: relative;
	display: inline-block;
	letter-spacing: .06em;
	line-height: 1;
	vertical-align: -.08em;
}

.mahe-etoiles__fond,
.mahe-etoiles__plein {
	white-space: nowrap;
}

.mahe-etoiles__fond {
	color: currentColor;
	opacity: .22;
}

.mahe-etoiles__plein {
	position: absolute;
	inset: 0 auto 0 0;
	overflow: hidden;
	color: var(--wp--preset--color--rose-fonce);
}

.mahe-avis__note {
	margin-left: .15em;
}

.mahe-avis__sur {
	font-weight: 400;
	opacity: .7;
	/* relatif à la note qui le précède, quelle que soit sa taille — `smaller`
	   plutôt qu'une valeur brute, que R18 interdit à raison */
	font-size: smaller;
}

/* ── Composition photo : arche + deux cartes flottantes ── */
.mahe-hv {
	position: relative;
	width: 100%;
	max-width: 460px;
	aspect-ratio: 4 / 4.4;
	margin-inline: auto;
}

.mahe-hv__photo {
	position: absolute;
	inset: 0;
	margin: 0;
	border-radius: 220px 220px 20px 20px;
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--image);
}

.mahe-hv__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 14/09 : la photo (064, retour MAHE) est livrée recadrée au ratio exact du
	   cadre (4/4.4) — `cover` ne rogne plus rien. L'ancien `object-position: 36%`
	   compensait un paysage 3:2 forcé dans ce cadre portrait ; il n'a plus d'objet. */
}

.mahe-hv__statcard,
.mahe-hv__namecard {
	position: absolute;
	background: var(--wp--preset--color--creme);
	border: 1px solid var(--wp--preset--color--ligne);
	border-radius: var(--wp--custom--rayon--md);
}

.mahe-hv__statcard {
	left: -22px;
	/* Descendue sous le bas de la photo : a `bottom: 14px` (valeur de la maquette),
	   la carte masquait Marion du buste aux mains. */
	bottom: -18px;
	width: 206px;
	padding: 3px 17px;
	box-shadow: 0 18px 40px -22px rgba(44, 57, 68, .5);
}

.mahe-hv__row {
	padding: 7px 0;
	margin: 0;
	font-size: var(--wp--preset--font-size--surtitre);
	color: var(--wp--preset--color--contraste-doux);
	line-height: 1.3;
}

.mahe-hv__row + .mahe-hv__row {
	border-top: 1px solid var(--wp--preset--color--ligne);
}

.mahe-hv__row b {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--contraste);
	margin-right: .4rem;
	letter-spacing: -.01em;
}

.mahe-hv__namecard {
	right: -18px;
	top: 46px;
	padding: 11px 18px;
	box-shadow: 0 14px 30px -16px rgba(44, 57, 68, .35);
	white-space: nowrap;
}

.mahe-hv__namecard p {
	margin: 0;
}

.mahe-hv__namecard b {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--contraste);
	display: block;
	line-height: 1.1;
}

.mahe-hv__namecard span {
	font-size: var(--wp--preset--font-size--surtitre);
	color: var(--wp--preset--color--bleu-lien);
	display: block;
	margin-top: .35rem;
	line-height: 1.3;
	white-space: normal;
	max-width: 150px;
}

.mahe-u {
	color: var(--wp--preset--color--contraste-doux);
}

.mahe-u-accent {
	color: var(--wp--preset--color--rose);
}

/* ══════════════════════════════════════════════════════════════════════════
   CHIFFRES CLÉS
   ══════════════════════════════════════════════════════════════════════════ */

.mahe-chiffres {
	padding-block: 40px 80px;
}

.mahe-chiffres > .mahe-eyebrow {
	margin-bottom: 2.4rem;
}

.mahe-cnums {
	gap: 0;
}

.mahe-cnum {
	padding: 8px 20px;
	border-left: 1px solid var(--wp--preset--color--ligne);
	margin: 0;
}

.mahe-cnum:first-child {
	border-left: 0;
	padding-left: 0;
}

.mahe-cnum b {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--chiffre);
	color: var(--wp--preset--color--contraste);
	display: block;
	line-height: 1;
	letter-spacing: -.01em;
}

.mahe-cnum span {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contraste-doux);
	display: block;
	margin-top: .6rem;
	line-height: 1.35;
}

.mahe-cnum b .mahe-u,
.mahe-cnum b .mahe-u-accent {
	/* `​.mahe-cnum span` (bloc, .82rem) attrapait aussi l unite, nichee dans le <b> :
	   le « + », « sem. », « % » tombaient A LA LIGNE en petit sous le chiffre.
	   L unite appartient au nombre : meme corps, meme ligne de base. */
	display: inline;
	font-size: inherit;
	margin-top: 0;
	line-height: inherit;
}

.mahe-cnum b .mahe-u {
	color: var(--wp--preset--color--contraste-doux);
}

.mahe-cnum b .mahe-u-accent {
	/* `​.mahe-cnum span` (classe + element) l emportait sur `.mahe-u-accent` (classe
	   seule) et repeignait le « % » de 100 % en gris : l accent de la maquette
	   (`.cnum b .u-hl`) etait perdu. */
	color: var(--wp--preset--color--rose);
}

.mahe-cnum sup {
	color: var(--wp--preset--color--rose);
	font-weight: 600;
}

.mahe-engage {
	align-items: flex-start;
	gap: 18px;
	border: 1px solid var(--wp--preset--color--ligne);
	border-left: 3px solid var(--wp--preset--color--rose);
	background: var(--wp--preset--color--blanc);
	border-radius: var(--wp--custom--rayon--md);
	padding: 20px 26px;
	margin-top: 2.8rem;
}

.mahe-engage__ic {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--rose);
	line-height: 1.2;
	margin: 0;
}

.mahe-engage__titre {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--contraste);
	margin: 0 0 .2rem;
}

.mahe-engage__titre b {
	font-weight: 400;
}

.mahe-engage__texte {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contraste-doux);
	margin: 0;
	/* Plus de bride : dans une carte large de 1130px, un texte arrete a 62 signes
	   (~453px) laissait les deux tiers de l encadre vides. Il remplit sa carte. */
}

@media (max-width: 920px) {
	.mahe-hero__grid {
		gap: 32px;
	}

	.mahe-cnums {
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 24px 0;
	}

	.mahe-cnum:nth-child(3n+1) {
		border-left: 0;
		padding-left: 0;
	}
}

@media (max-width: 600px) {
	.mahe-header__logo img,
	.mahe-header.is-small .mahe-header__logo img {
		--mahe-logo-h: 44px;
		height: var(--mahe-logo-h);
	}

	.mahe-cnums {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.mahe-cnum:nth-child(3n+1) {
		border-left: 1px solid var(--wp--preset--color--ligne);
		padding-left: 20px;
	}

	.mahe-cnum:nth-child(2n+1) {
		border-left: 0;
		padding-left: 0;
	}

	.mahe-hv__statcard {
		left: 0;
	}

	/* 14/09 : avec la photo 064 (retour MAHE), les deux fondatrices sont centrées
	   et visibles en pied — la carte « Marion & Hélène », posée à 46 px du haut,
	   couvrait le bas du visage d'Hélène sous 600 px (mesuré en 390 px : carte à
	   70–149 px, visage à 40–100 px). En mobile elle SORT de la photo : posée sur
	   son bord supérieur, à cheval, au-dessus des têtes. */
	.mahe-hv__namecard {
		right: 0;
		top: -22px;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTIONS — rythme commun et en-tête de section
   ══════════════════════════════════════════════════════════════════════════ */

.mahe-blk {
	padding-block: 96px;
}

.mahe-blk--alt {
	background: var(--wp--preset--color--fond-doux);
}

.mahe-sec-head {
	margin-bottom: 3.4rem;
}

/* Largeur de lecture de l'en-tête de section : 640px, mais posée sur les ENFANTS.
   La poser sur le conteneur le ferait CENTRER — la mise en page « constrained »
   du cœur applique `margin-inline: auto` à ses enfants, et un bloc plus étroit
   que la colonne se retrouve au milieu au lieu d'être calé à gauche
   (constaté au rendu le 29/08 ; la maquette l'aligne à gauche). */
.mahe-sec-head:not(.mahe-sec-head--row) > * {
	/* 640px dans la maquette, puis 880px, puis PLEINE LARGEUR : Rudy a tranche le
	   31/08 apres avoir vu le rendu a 880 (« ce n est pas beau, le texte est coupe
	   a moitie »). Sa decision, prise en connaissance du cout en lisibilite
	   (~132 signes par ligne, au-dela des 45-75 recommandes). */
	max-width: none;
}

.mahe-sec-head h2 {
	line-height: 1.08;
	letter-spacing: -.015em;
	margin: .7rem 0 1rem;
}

.mahe-sec-head__texte {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--bleu-lien);
	text-wrap: pretty;
	margin: 0;
}

/* En-tête sur une ligne : titre à gauche, lien « voir tout » à droite */
.mahe-sec-head--row {
	gap: 24px;
}

.mahe-sec-head--row .mahe-sec-head__gauche {
	/* Meme elargissement que ci-dessus ; le lien « voir tout » reste a droite,
	   la mise en page flex lui garde sa place. */
	max-width: none;
}

.mahe-more-link {
	white-space: nowrap;
	padding-bottom: .5rem;
	margin: 0;
	font-weight: 600;
}

.mahe-more-link a {
	color: var(--wp--preset--color--bleu-lien);
	text-decoration: none;
}

.mahe-more-link a:hover {
	color: var(--wp--preset--color--rose-fonce);
}

/* Inverseur de fond : une composition partagée (approches, chiffres…) garde son
   fond par défaut, mais une page peut l'enrober pour retrouver l'alternance de la
   maquette — sans dupliquer la composition. */
.mahe-fond--alt > .mahe-blk,
.mahe-fond--alt > .mahe-chiffres {
	background: var(--wp--preset--color--fond-doux);
}

/* ── Approches ── */
.mahe-approche {
	gap: 40px;
}

.mahe-etape {
	padding-top: 22px;
	border-top: 1.5px solid var(--wp--preset--color--contraste);
}

.mahe-etape__num {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--rose-fonce);
	letter-spacing: .05em;
	margin: 0;
}

.mahe-etape h3 {
	margin: .7rem 0 .8rem;
}

/* ── Bandeau nuit ── */
.mahe-solo__titre {
	color: var(--wp--preset--color--blanc);
	line-height: 1.2;
	letter-spacing: -.015em;
	margin: 1rem 0 1.2rem;
}

.mahe-solo__accent {
	color: var(--wp--preset--color--rose-clair);
}

.mahe-eyebrow--rose {
	color: var(--wp--preset--color--rose-clair);
}

.mahe-solo__texte {
	color: rgba(255, 255, 255, .82);
	font-size: var(--wp--preset--font-size--large);
	/* 52ch dans la maquette : la phrase d engagement (« Pas de relais ni de perte
	   d information… », 250 signes) tenait sur 5 lignes etroites au centre d un
	   bandeau large. Debridee pour la ramener a 2 lignes sur grand ecran.
	   ⚠️ Pas de `max-width: none` ici : ce paragraphe est un enfant DIRECT d une
	   mise en page « constrained », dont la regle du coeur porte justement un
	   `max-width: <content-size>`. L annuler ne l elargit pas a la colonne, il le
	   fait DEBORDER (mesure : 81→1358 au lieu de 152→1288). On laisse donc la
	   regle du coeur plafonner a la colonne, et on retire seulement la bride 52ch. */
	margin-inline: auto;
}

/* ── Témoignages ── */
.mahe-temoins {
	gap: 28px;
}

.mahe-temoin {
	border-top: 1.5px solid var(--wp--preset--color--rose);
	padding-top: 24px;
}

.mahe-temoin__guillemet {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--huge);
	color: var(--wp--preset--color--rose);
	line-height: .5;
	height: .4em;
	margin: 0;
}

.mahe-temoin__texte {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contraste-doux);
	margin: 1.2rem 0 1.4rem;
}

.mahe-temoin__pied {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .15rem;
}

.mahe-temoin__pied cite {
	font-style: normal;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--bleu-lien);
}

.mahe-temoin__date {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--gris-texte);
}

/* `inline-flex` empêchait les marges automatiques de la mise en page
   « constrained » de s'appliquer : la ligne partait au bord de la page. */
.mahe-avis-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	margin-top: 2.8rem;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--bleu-lien);
}

.mahe-avis-note b {
	color: var(--wp--preset--color--contraste);
}

/* ── Fondatrices ── */
.mahe-team {
	background: var(--wp--preset--color--creme);
}

.mahe-team-grid {
	gap: 56px;
}

.mahe-membre {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 28px;
	align-items: start;
}

.mahe-membre__photo {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	border: 3px solid var(--wp--preset--color--contraste);
	overflow: hidden;
	margin: 0;
}

/* ⚠️ CORRIGE le 08/09/2026. Le regroupement du 31/08 avait mis dans la MÊME règle
   l'état de REPOS (`.mahe-membre__photo img`) et l'état de SURVOL
   (`.mahe-membre:hover …`), tous deux à `scale(1.05)`. Conséquence : les portraits
   étaient agrandis en permanence et le survol ne changeait rien. Aucune
   `transition` n'était déclarée non plus — l'effet était mort deux fois.
   Le sélecteur `.mahe-pimg-duo__ph img` disparaît avec le duo de portraits,
   remplacé par une photo unique dans l'en-tête du cabinet. */
.mahe-membre__photo img {
	transition: transform .45s var(--wp--custom--transition);
}

.mahe-membre:hover .mahe-membre__photo img {
	transform: scale(1.05);
}

.mahe-membre__role {
	font-size: var(--wp--preset--font-size--surtitre);
	letter-spacing: var(--wp--custom--interlettrage--moyen);
	text-transform: uppercase;
	color: var(--wp--preset--color--bleu-lien);
	font-weight: 600;
	margin: 0;
}

.mahe-membre__texte h3 {
	margin: .25rem 0 .7rem;
}

.mahe-membre__bio {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contraste-doux);
}

.mahe-membre__lien {
	margin-top: .9rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.mahe-membre__lien a {
	color: var(--wp--preset--color--bleu-lien);
	text-decoration: none;
}

.mahe-membre__lien a:hover {
	color: var(--wp--preset--color--rose-fonce);
}

/* ── Vidéo verticale de présentation ─────────────────────────────────────────
   Le fichier fait 478 × 850 : un format PORTRAIT. Servi en pleine largeur il
   aurait exigé des bandes noires ou un recadrage ; on lui donne un cadre étroit,
   centré sous les deux portraits. */
.mahe-video-verticale {
	max-width: 300px;
	margin: 56px auto 0;
	border-radius: var(--wp--custom--rayon--lg);
	overflow: hidden;
	box-shadow: 0 18px 40px -24px rgba(44, 57, 68, .45);
}

.mahe-video-verticale video {
	display: block;
	width: 100%;
	height: auto;
	/* Fond sombre : le temps que l'image d'attente se peigne, un cadre blanc
	   clignoterait sur le crème de la section. */
	background: var(--wp--preset--color--contraste);
}

/* Sur le bandeau sombre, l'ombre portée devient invisible : c'est un filet clair
   qui détache le cadre du fond, pas une ombre. */
.mahe-solo .mahe-video-verticale {
	max-width: 320px;
	margin: 0 auto;
	box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .6);
	outline: 1px solid rgba(255, 255, 255, .14);
	outline-offset: -1px;
}

/* La vidéo passe à GAUCHE sur grand écran, sans inverser le balisage : le DOM
   reste « texte puis vidéo », qui est le bon ordre de lecture une fois les
   colonnes empilées sous 920 px. `row-reverse` ne fait que l'affichage.
   ⚠️ Sous 921px, aucune règle : les colonnes retrouvent leur ordre naturel et la
   vidéo passe SOUS le texte — voulu, pas subi. */
@media (min-width: 921px) {
	.mahe-solo__grid {
		flex-direction: row-reverse;
	}

	.mahe-solo__media {
		/* Le cadre se cale à gauche de sa colonne plutôt qu'en son centre : il
		   longe alors le bord du contenu, comme la photo du héros à droite. */
		justify-content: flex-start;
	}

	.mahe-solo .mahe-video-verticale {
		margin-inline: 0;
	}
}

/* Bandeau image pleine largeur (page Avis). Hauteur bridée : une photo de 1,5:1
   servie sur 1136px ferait 757px de haut et repousserait les témoignages sous la
   ligne de flottaison — c'est l'inverse du but recherché. */
.mahe-bandeau-img {
	padding-block: 0 64px;
}

.mahe-bandeau-img .mahe-pimg img {
	width: 100%;
	max-height: 380px;
	object-fit: cover;
	object-position: center 38%;
	border-radius: var(--wp--custom--rayon--lg);
}

/* Sur la page Contact, l'image ferme la colonne des coordonnées. */
.mahe-coords__img {
	margin-top: 28px;
}

.mahe-coords__img img {
	width: 100%;
	border-radius: var(--wp--custom--rayon--md);
}

.mahe-coords__vide {
	display: none;
}

/* ── Secteurs ── */
.mahe-secteurs-grid {
	gap: 18px;
}

.mahe-secteur {
	aspect-ratio: 3 / 2.2;
	min-height: 0 !important;
	border-radius: var(--wp--custom--rayon--md);
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--vignette);
	align-items: flex-end;
	padding: 20px 22px;
}

.mahe-secteur .wp-block-cover__image-background {
	transition: transform .8s var(--wp--custom--transition);
}

/* Voile de la carte : la maquette l assombrit au survol (`.secteur:hover .ov`),
   le degrade passant de 26 %/.55/.92 a 14 %/.6/.95 — le titre se detache mieux.
   ⚠️ `!important` est ici indispensable et non paresseux : le bloc « Banniere » du
   coeur ecrit son degrade en STYLE EN LIGNE sur le <span>, ce qu aucun selecteur
   ne peut surpasser autrement.
   ⚠️ Et une limite a connaitre : un degrade ne s interpole pas d un etat a l autre.
   La transition declaree ci-dessous ne l animera donc pas, le changement est net —
   exactement comme dans la maquette, qui declare la meme transition sans effet. */
.mahe-secteur .wp-block-cover__background {
	transition: background .4s var(--wp--custom--transition);
}

.mahe-secteur:hover .wp-block-cover__background {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 14%, rgba(44, 57, 68, .6) 48%, rgba(30, 40, 48, .95) 100%) !important;
}

.mahe-secteur:hover .wp-block-cover__image-background {
	transform: scale(1.07);
}

.mahe-secteur__nom {
	margin: 0;
	line-height: 1.1;
	transition: transform .4s var(--wp--custom--transition);
}

.mahe-secteur__nom a {
	color: inherit;
	text-decoration: none;
}

/* La zone cliquable couvre toute la carte, le lien reste unique et lisible */
.mahe-secteur__nom a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.mahe-secteur:hover .mahe-secteur__nom {
	transform: translateY(-3px);
}

.mahe-secteur__postes {
	margin: .55rem 0 0;
	color: rgba(255, 255, 255, .88);
	line-height: 1.5;
	font-size: var(--wp--preset--font-size--small);
}

.mahe-secteur-plus {
	grid-column: span 2;
	border: 1px solid var(--wp--preset--color--ligne);
	border-radius: var(--wp--custom--rayon--md);
	padding: 26px 32px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--wp--preset--color--fond-doux);
}

.mahe-secteur-plus h3 {
	margin-bottom: .5rem;
}

/* ── Offres ── */
/* ⚠️ 08/09 : la grille était posée par le bloc « Groupe » du cœur
   (`layout:{type:grid,columnCount:3}`), pas par cette règle qui ne portait que
   l'écart. En passant le listing en `wp:html` — nécessaire pour les `data-*` de
   filtrage — les cartes se sont empilées en une colonne pleine largeur. La grille
   est donc déclarée ici, et `auto-fill` la rend indépendante d'un nombre écrit
   quelque part : 19 offres ou 3, elle s'ajuste. */
.mahe-offres-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
	gap: 20px;
	/* PAS `align-items: start` : les cartes d'une même rangée doivent partager
	   leur hauteur, sinon la grille fait des dents de scie (mesuré le 08/09 sur
	   les 19 offres, dont les intitulés vont de 17 à 70 signes). L'étirement,
	   combiné à la carte en colonne flex, aligne aussi les pieds entre eux. */
}

.mahe-offre {
	border: 1px solid var(--wp--preset--color--ligne);
	border-radius: var(--wp--custom--rayon--md);
	padding: 24px 24px 22px;
	background: var(--wp--preset--color--blanc);
	transition: transform .4s var(--wp--custom--transition), box-shadow .4s var(--wp--custom--transition);
}

/* ══════════════════════════════════════════════════════════════════════════
   CARTES CLIQUABLES — toute la carte, pas seulement son titre
   ══════════════════════════════════════════════════════════════════════════

   Constat de Rudy, 01/09 : sur les listes d offres, d articles et de secteurs,
   SEUL LE TEXTE DU TITRE ouvrait la page. Or la carte se soulève au survol, son
   image zoome, et celle des offres affiche même un « Voir l offre → » — qui
   n était pas un lien. Tout promettait une zone cliquable qui n existait pas :
   viser à côté du titre ne faisait rien.

   Correctif : le lien du titre reste le SEUL lien de la carte (un seul intitulé
   annoncé aux lecteurs d écran, une seule cible pour les moteurs), et son
   pseudo-élément s étend à toute la carte.
   ⚠️ Contrepartie connue de ce procédé : sélectionner du texte dans une carte
   devient malaisé. Acceptable ici — ce sont des vignettes, pas du texte à copier. */
.mahe-offre,
.mahe-article,
.mahe-secteur {
	position: relative;
}

.mahe-offre__titre a::after,
.mahe-article__titre a::after,
.mahe-secteur__nom a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* ⚠️ Cas particulier de la carte secteur, mesuré le 01/09 : elle est bâtie sur le
   bloc « Bannière » du cœur, dont le conteneur intérieur est en `position:
   relative`. C est donc LUI, et non la carte, qui sert d ancrage au pseudo-élément
   — la zone cliquable ne couvrait que la bande de texte du bas (323x75 au lieu de
   367x269). Le rendre statique casserait l empilement du cœur : le titre passerait
   sous le voile.
   On le fait donc déborder très largement, et c est l `overflow: hidden` de la
   carte qui le rogne exactement à ses bords.
   ⚠️ Cette règle DÉPEND de cet `overflow: hidden` : le retirer étendrait la zone
   cliquable bien au-delà de la carte. */
.mahe-secteur__nom a::after {
	inset: -1000px;
}

/* La catégorie d une carte d article est un second lien, vers l archive : il doit
   rester atteignable AU-DESSUS de la zone étendue, sinon il devient inerte. */
.mahe-article__cat a {
	position: relative;
	z-index: 2;
}

.mahe-offre:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--carte);
}

.mahe-offre__top {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin: 0 0 .9rem;
}

.mahe-offre__tag {
	font-size: var(--wp--preset--font-size--surtitre);
	font-weight: 600;
	letter-spacing: .03em;
	color: var(--wp--preset--color--rose-fonce);
	background: rgba(163, 78, 94, .1);
	padding: .32em .8em;
	border-radius: var(--wp--custom--rayon--pill);
}

.mahe-offre__contrat {
	font-size: var(--wp--preset--font-size--surtitre);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--bleu-lien);
}

.mahe-offre__titre {
	line-height: 1.25;
	margin: 0;
}

.mahe-offre__titre a {
	color: var(--wp--preset--color--contraste);
	text-decoration: none;
}

.mahe-offre__meta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contraste-doux);
	margin: .5rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: .15rem .5rem;
}

/* Ville et région se lisent d'un coup d'œil, séparées par un point médian
   dessiné — pas écrit : un séparateur en contenu textuel se retrouve dans le
   presse-papiers et se fait lire par les synthèses vocales. */
.mahe-offre__reg::before {
	content: "·";
	margin-right: .5rem;
	opacity: .5;   /* la couleur « ligne » était invisible sur fond blanc */
}

/* 08/09 : la carte ne portait que le lieu et la date, mêlés dans une même ligne.
   Le pied les sépare et ajoute la référence — celle que candidat et cabinet
   s'échangent au téléphone. */
.mahe-offre__pied {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .2rem .8rem;
	margin: .75rem 0 0;
	padding-top: .7rem;
	border-top: 1px solid var(--wp--preset--color--ligne);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contraste-doux);
}

.mahe-offre__ref {
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
}

/* La carte devient une colonne : le pied et le lien se posent en bas, quelle que
   soit la longueur de l'intitulé — les titres Jarvi vont de 17 à 70 signes, et
   des « Voir l'offre → » à des hauteurs différentes faisaient une grille bancale. */
.mahe-offre {
	display: flex;
	flex-direction: column;
}

.mahe-offre__titre {
	margin-bottom: auto;
}

.mahe-offre__lien {
	margin: 1.1rem 0 0;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--rose-fonce);
	transition: transform .35s var(--wp--custom--transition);
}

.mahe-offre:hover .mahe-offre__lien {
	transform: translateX(3px);
}

.mahe-cand-cta {
	margin-top: 1.8rem;
	display: flex;
	gap: .6rem 1rem;
	align-items: baseline;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contraste-doux);
	border-top: 1px solid var(--wp--preset--color--ligne);
	padding-top: 1.4rem;
}

.mahe-cand-cta a {
	font-weight: 600;
	color: var(--wp--preset--color--bleu-lien);
	text-decoration: none;
}

.mahe-cand-cta a:hover {
	color: var(--wp--preset--color--rose-fonce);
}

/* ── Articles ── */
.mahe-articles-grid {
	gap: 20px;
}

.mahe-article {
	height: 100%;
	border: 1px solid var(--wp--preset--color--ligne);
	border-radius: var(--wp--custom--rayon--md);
	padding: 24px;
	background: var(--wp--preset--color--blanc);
	display: flex;
	flex-direction: column;
	gap: .65rem;
}

.mahe-article__cat {
	font-size: var(--wp--preset--font-size--surtitre);
	font-weight: 600;
	letter-spacing: var(--wp--custom--interlettrage--moyen);
	text-transform: uppercase;
	color: var(--wp--preset--color--bleu-lien);
}

.mahe-article__cat a {
	color: inherit;
	text-decoration: none;
}

.mahe-article__titre {
	line-height: 1.22;
	margin: 0;
}

.mahe-article__titre a {
	color: var(--wp--preset--color--contraste);
	text-decoration: none;
}

.mahe-article__extrait {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contraste-doux);
	margin: 0;
}

/* ── FAQ ── */
.mahe-faq-grid {
	gap: 20px 48px;
}

.mahe-faq-item h3 {
	margin-bottom: .4rem;
}

.mahe-faq-item p {
	font-size: var(--wp--preset--font-size--medium);
	margin: 0;
}

/* ── CTA final ── */
.mahe-cta-final__head {
	max-width: 640px;
	margin-inline: auto;
}

.mahe-cta-final__head h2 {
	margin: .7rem 0 .9rem;
	letter-spacing: -.015em;
}

.mahe-cta-final__texte {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--bleu-lien);
	margin: 0;
}

.mahe-cta-final__actions {
	margin-top: 2.2rem;
}

.mahe-cta-final__reassure {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contraste-doux);
	margin-top: 1rem;
}

.mahe-villes {
	margin-top: 2.4rem;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--gris-texte);
	letter-spacing: .02em;
}

@media (max-width: 920px) {
	.mahe-blk {
		padding-block: 64px;
	}

	.mahe-approche,
	.mahe-team-grid,
	.mahe-temoins {
		flex-wrap: wrap !important;
	}

	.mahe-approche > .wp-block-column,
	.mahe-team-grid > .wp-block-column,
	.mahe-temoins > .wp-block-column {
		flex-basis: 100% !important;
	}

	.mahe-secteurs-grid,
	.mahe-offres-grid,
	.mahe-articles-grid,
	.mahe-faq-grid {
		grid-template-columns: 1fr !important;
	}

	.mahe-secteur-plus {
		grid-column: auto;
	}

	.mahe-sec-head--row {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (min-width: 601px) and (max-width: 920px) {
	.mahe-secteurs-grid,
	.mahe-offres-grid,
	.mahe-articles-grid,
	.mahe-faq-grid {
		grid-template-columns: 1fr 1fr !important;
	}
}

@media (max-width: 600px) {
	.mahe-membre {
		grid-template-columns: 1fr;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGES INTÉRIEURES — fil d'Ariane, en-tête de page, colonnes texte + image,
   processus en étapes, engagements.
   ══════════════════════════════════════════════════════════════════════════ */

.mahe-fil-ariane {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--gris-texte);
	padding-top: 26px;
	margin: 0;
}

.mahe-fil-ariane a {
	color: inherit;
	text-decoration: none;
}

.mahe-fil-ariane a:hover {
	color: var(--wp--preset--color--rose-fonce);
}

.mahe-fil-ariane__sep {
	margin: 0 .5em;
	opacity: .55;
}

/* ── En-tête de page ── */
.mahe-page-hero {
	padding-block: 40px 64px;
}

.mahe-page-hero__grid {
	gap: 64px;
}

.mahe-page-hero__titre {
	line-height: 1.08;
	letter-spacing: -.02em;
	margin: 1rem 0 1.4rem;
}

.mahe-page-hero .mahe-lead {
	font-family: var(--wp--preset--font-family--sans);
	font-style: normal;
	font-size: var(--wp--preset--font-size--large);
	max-width: 52ch;
}

.mahe-page-hero .mahe-actions {
	margin-top: 2rem;
	gap: 1rem;
}

/* Image d'illustration cadrée */
.mahe-pimg {
	border-radius: var(--wp--custom--rayon--lg);
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--image);
	aspect-ratio: 4 / 3.4;
	margin: 0;
}

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

/* ── Colonnes texte + image ── */
.mahe-split {
	gap: 56px;
}

.mahe-points {
	list-style: none;
	display: grid;
	gap: 1.3rem;
	padding: 0;
	margin: 0;
}

.mahe-points li {
	border-left: 2px solid var(--wp--preset--color--rose);
	padding-left: 18px;
}

.mahe-points strong {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--contraste);
	display: block;
	margin-bottom: .15rem;
}

.mahe-points span {
	color: var(--wp--preset--color--contraste-doux);
	font-size: var(--wp--preset--font-size--medium);
}

/* ── Processus en étapes (fil vertical) ── */
.mahe-process {
	display: grid;
}

.mahe-pstep {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 26px;
	padding-bottom: 38px;
	position: relative;
}

.mahe-pstep::before {
	content: "";
	position: absolute;
	left: 27px;
	top: 60px;
	bottom: -6px;
	width: 2px;
	background: var(--wp--preset--color--ligne);
}

.mahe-pstep:last-child {
	padding-bottom: 0;
}

.mahe-pstep:last-child::before {
	display: none;
}

.mahe-pstep__num {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	/* Rose MAHE de charte (#BA596B) — demande de Rudy, 05/10/2026. Avant : Nuit.
	   ⚠️ CONTRASTE MESURÉ : blanc sur #BA596B = 4,44:1. La recette
	      `logs/RECETTE-ACCESSIBILITE` retient 4,5:1 à plat sur ses quatorze
	      lignes : c'est donc le SEUL point du site juste en dessous, de 0,06.
	      Le chiffre fait 1,15 rem (18,4 px) sans graisse — il ne relève pas du
	      « grand texte » WCAG (24 px, ou 18,66 px en gras), dont le seuil serait
	      de 3:1 et largement tenu.
	   ⇒ Pour repasser au-dessus sans quitter la charte : `rose-fonce` (#A34E5E)
	     donne 5,51:1 — la même teinte, déjà servie ailleurs sur le site (survol
	     des boutons). Un mot à changer sur la ligne suivante. Arbitrage de Rudy. */
	background: var(--wp--preset--color--rose);
	color: var(--wp--preset--color--blanc);
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--large);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}

.mahe-pstep h3 {
	margin: .5rem 0 .4rem;
}

.mahe-pstep p:not(.mahe-pstep__num) {
	color: var(--wp--preset--color--contraste-doux);
	/* Bride de lecture retiree le 31/08 (arbitrage Rudy : les encadres et blocs de
	   page occupent leur conteneur). On SUPPRIME la declaration plutot que de poser
	   `max-width: none` : si l element est enfant direct d une mise en page
	   « constrained », `none` annulerait AUSSI le plafond du coeur et le ferait
	   deborder de la colonne — piege rencontre sur `.mahe-solo__texte`. */
	margin: 0;
}

/* ── Engagements + cadre tarifaire ── */
.mahe-engage-grid {
	gap: 44px;
	align-items: flex-start;
}

.mahe-pricing-card {
	background: var(--wp--preset--color--contraste);
	color: var(--wp--preset--color--blanc);
	border-radius: var(--wp--custom--rayon--lg);
	padding: 34px 32px;
}

.mahe-pricing-card__ic {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--rose);
	line-height: 1;
	margin: 0 0 .7rem;
}

.mahe-pricing-card h3 {
	color: var(--wp--preset--color--blanc);
	margin-bottom: .6rem;
}

.mahe-pricing-card p:not(.mahe-pricing-card__ic) {
	color: rgba(255, 255, 255, .82);
	font-size: var(--wp--preset--font-size--medium);
	margin: 0;
}

.mahe-engagements {
	list-style: none;
	display: grid;
	gap: 1.25rem;
	padding: 0;
	margin: 0;
}

.mahe-engagements li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 14px;
	align-items: baseline;
	color: var(--wp--preset--color--contraste-doux);
}

.mahe-engagements .mahe-mk {
	color: var(--wp--preset--color--rose);
	font-size: var(--wp--preset--font-size--small);
}

.mahe-engagements b {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	color: var(--wp--preset--color--contraste);
}

@media (max-width: 920px) {
	.mahe-page-hero__grid,
	.mahe-split,
	.mahe-engage-grid {
		flex-wrap: wrap !important;
	}

	.mahe-page-hero__grid > .wp-block-column,
	.mahe-split > .wp-block-column,
	.mahe-engage-grid > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ── Variantes de page ── */
.mahe-pimg--portrait {
	aspect-ratio: 3 / 3.7;
	max-width: 440px;
	margin-inline: auto;
}

.mahe-cnums--4 {
	grid-template-columns: repeat(4, 1fr);
}

.mahe-cand-quote {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--contraste);
	max-width: 760px;
	margin: 3.4rem auto 0;
	text-align: center;
	line-height: 1.45;
	border: 0;
	padding: 0;
}

.mahe-cand-quote cite {
	display: block;
	font-style: normal;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: var(--wp--custom--interlettrage--petit);
	text-transform: uppercase;
	color: var(--wp--preset--color--bleu-lien);
	margin-top: 1rem;
}

@media (max-width: 920px) {
	.mahe-cnums--4 {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.mahe-cnums--4 .mahe-cnum:nth-child(2n+1) {
		border-left: 0;
		padding-left: 0;
	}
}

/* ── Fondatrices, version détaillée ── */
.mahe-founders {
	display: grid;
	gap: 56px;
}

.mahe-founder {
	display: grid;
	grid-template-columns: 230px 1fr;
	gap: 44px;
	align-items: start;
}

.mahe-founder--rev {
	grid-template-columns: 1fr 230px;
}

.mahe-founder__ph {
	width: 230px;
	height: 280px;
	border-radius: var(--wp--custom--rayon--lg);
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--ligne);
	box-shadow: 0 20px 44px -26px rgba(44, 57, 68, .5);
	margin: 0;
}

.mahe-founder--rev .mahe-founder__ph {
	order: 2;
}

.mahe-founder__ph img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--wp--custom--transition);
}

.mahe-founder:hover .mahe-founder__ph img {
	transform: scale(1.04);
}

.mahe-founder__body h3 {
	margin: .3rem 0 1rem;
}

.mahe-founder__texte {
	/* Bride de lecture retiree le 31/08 (arbitrage Rudy : les encadres et blocs de
	   page occupent leur conteneur). On SUPPRIME la declaration plutot que de poser
	   `max-width: none` : si l element est enfant direct d une mise en page
	   « constrained », `none` annulerait AUSSI le plafond du coeur et le ferait
	   deborder de la colonne — piege rencontre sur `.mahe-solo__texte`. */
}

.mahe-founder__texte + .mahe-founder__texte {
	margin-top: .9rem;
}

/* ── Valeurs (I / II / III) ── */
.mahe-valeurs {
	gap: 44px;
}

.mahe-valeur__num {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--wp--preset--color--rose);
	color: var(--wp--preset--color--blanc);
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--x-large);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 1.2rem;
}

.mahe-valeur h3 {
	margin-bottom: .6rem;
}

/* ── Implantations ── */
.mahe-implants {
	gap: 20px;
}

.mahe-implant {
	border: 1px solid var(--wp--preset--color--ligne);
	border-radius: var(--wp--custom--rayon--md);
	padding: 26px 28px;
	background: var(--wp--preset--color--blanc);
}

.mahe-implant__pin {
	font-size: var(--wp--preset--font-size--surtitre);
	letter-spacing: var(--wp--custom--interlettrage--moyen);
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--rose-fonce);
	margin: 0 0 .7rem;
}

.mahe-implant h3 {
	margin-bottom: .5rem;
}

.mahe-implant__addr {
	color: var(--wp--preset--color--contraste-doux);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.65;
	margin: 0;
}

.mahe-implant__lien {
	margin-top: .8rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.mahe-implant__lien a,
.mahe-implant__addr a {
	color: var(--wp--preset--color--bleu-lien);
	text-decoration: none;
}

.mahe-implant__lien a:hover,
.mahe-implant__addr a:hover {
	color: var(--wp--preset--color--rose-fonce);
}

@media (max-width: 920px) {
	.mahe-founder,
	.mahe-founder--rev {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.mahe-founder--rev .mahe-founder__ph {
		order: 0;
	}

	.mahe-founder__ph {
		width: 200px;
		height: 240px;
	}

	.mahe-valeurs,
	.mahe-implants {
		grid-template-columns: 1fr !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   NOTE D'ACCESSIBILITÉ — taille du texte des boutons (registre A-04)
   Blanc sur le rose de la charte (#BA596B) donne **4,44:1**, soit juste sous le
   seuil AA de 4,5:1 pour du texte courant. Deux issues : assombrir le rose (c'est
   la couleur de marque — décision MAHE, pas la nôtre), ou passer le texte au seuil
   « texte large » (≥ 18,66 px gras), où le seuil tombe à 3:1.
   C'est la seconde qui est retenue depuis le 07/08 (A-04) : **1,2rem / 600**,
   soit 19,2 px gras. L'identité n'est pas touchée.
   ⚠️ Ne pas ramener ces boutons à 1rem sans assombrir le rose : ce serait
   repasser sous le seuil.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   PAGE CONTACT — formulaire (Contact Form 7) et bloc coordonnées
   Le visuel vient de la maquette ; le moteur est CF7 (décision actée 4).
   ══════════════════════════════════════════════════════════════════════════ */

/* Largeur de lecture posée sur les ENFANTS : sur le conteneur, la mise en page
   « constrained » du cœur la centrerait (même piège que les en-têtes de section). */
.mahe-contact-intro {
	margin-bottom: 2.4rem;
}

.mahe-contact-intro > * {
	/* Cette enveloppe sert d en-tete a 7 pages (blog, offres, secteurs, avis,
	   contact, mentions legales, confidentialite). Sa bride de 720px comprimait le
	   titre et le chapeau sur la gauche d une colonne de 1136 — meme symptome que
	   les en-tetes de section, signale par Rudy le 31/08 sur le Blog et les Offres.
	   Alignee sur l arbitrage deja pris pour `.mahe-sec-head` : pleine colonne. */
	max-width: none;
}

.mahe-page-hero--simple .mahe-lead {
	/* Idem pour le chapeau : `​.mahe-page-hero .mahe-lead` le bride a 52ch. On ne
	   leve la bride que sur la variante `--simple` (en-tete sur une seule colonne).
	   Sur les en-tetes a deux colonnes (entreprise, candidat, cabinet), c est la
	   colonne qui donne la largeur, et 52ch reste juste. */
	max-width: none;
}


.mahe-contact-layout {
	gap: 56px;
}

/* Sans ça, la colonne « coordonnées » s'étire à la hauteur du formulaire */
.mahe-contact-layout > .wp-block-column {
	align-self: flex-start;
}

.wpcf7 form.wpcf7-form {
	display: grid;
	gap: 16px;
}

.mahe-field {
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.mahe-frow {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.mahe-field label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--contraste-doux);
}

.mahe-field__opt {
	font-weight: 400;
	color: var(--wp--preset--color--gris-texte);
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	width: 100%;
	padding: .8em 1em;
	border: 1px solid var(--wp--preset--color--ligne);
	border-radius: var(--wp--custom--rayon--sm);
	background: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--contraste);
}

.wpcf7 textarea {
	min-height: 130px;
	resize: vertical;
}

.wpcf7 input:focus-visible,
.wpcf7 select:focus-visible,
.wpcf7 textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--rose-fonce);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--rose-fonce);
	box-shadow: none;
}

/* Question anti-robot : native à CF7, donc aucun appel à un service tiers */
.mahe-field--quiz .wpcf7-quiz-label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--contraste-doux);
	margin-bottom: .4rem;
}

.mahe-field--quiz input {
	max-width: 12rem;
}

/* Consentement RGPD : case JAMAIS pré-cochée (le contraire n'est pas un consentement) */
.mahe-consent {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contraste-doux);
	line-height: 1.5;
}

.mahe-consent .wpcf7-list-item {
	margin: 0;
}

.mahe-consent input[type="checkbox"] {
	margin-right: .5em;
	accent-color: var(--wp--preset--color--rose);
}

.mahe-submit-row {
	margin-top: .4rem;
}

/* 15/09 (Rudy) : la rassurance passe SOUS le bouton, plus à sa droite.
   ⚠️ Contact Form 7 enveloppe le bouton, son indicateur d'envoi (`.wpcf7-spinner`,
   24 px, invisible hors envoi) et le span dans un même <p>. C'est ce <p> qui
   dispose : bouton et indicateur sur la première ligne, la rassurance seule sur
   la seconde (`flex-basis: 100%`). Une première version en colonne laissait
   l'indicateur occuper une ligne à lui seul — 35 px d'écart au lieu de 6. */
.mahe-submit-row p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .85rem 12px;   /* 15/09, Rudy : 7 px collait, 14 px respire */
	margin: 0;
}

/* Même taille que les boutons du thème — voir la note d'accessibilité sur
   .wp-block-button__link (A-04). */
.wpcf7 input.mahe-submit {
	background: var(--wp--preset--color--rose);
	color: var(--wp--preset--color--blanc);
	border: none;
	border-radius: var(--wp--custom--rayon--pill);
	padding: .9em 1.7em;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	cursor: pointer;
	width: auto;
	/* Le fond, la transition et le survol sont pris en charge plus haut, avec les
	   boutons de blocs : `background` en raccourci ici ecraserait le degrade. */
}

.mahe-submit-row .wpcf7-spinner {
	margin: 0;
}

.mahe-reassure {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contraste-doux);
}

.mahe-submit-row .mahe-reassure {
	flex-basis: 100%;
	line-height: 1.3;
	padding-left: .35em;
}

/* Messages de CF7 aux couleurs du thème */
.wpcf7 .wpcf7-response-output {
	border-radius: var(--wp--custom--rayon--sm);
	border-width: 1px;
	padding: .8em 1em;
	font-size: var(--wp--preset--font-size--medium);
}

.wpcf7 .wpcf7-not-valid-tip {
	color: var(--wp--preset--color--rose-fonce);
	font-size: var(--wp--preset--font-size--small);
}

/* ── Coordonnées ── */
.mahe-coords {
	border: 1px solid var(--wp--preset--color--ligne);
	border-radius: var(--wp--custom--rayon--lg);
	padding: 30px;
	background: var(--wp--preset--color--blanc);
	display: grid;
	gap: 1.4rem;
	align-content: start;
}

.mahe-coords p {
	margin: 0;
}

.mahe-coords__lbl {
	font-size: var(--wp--preset--font-size--surtitre);
	letter-spacing: var(--wp--custom--interlettrage--moyen);
	text-transform: uppercase;
	color: var(--wp--preset--color--bleu-lien);
	font-weight: 600;
	margin-bottom: .35rem !important;
}

.mahe-coords__big a {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--contraste);
	text-decoration: none;
}

.mahe-coords a {
	color: var(--wp--preset--color--contraste);
	text-decoration: none;
}

.mahe-coords a:hover {
	color: var(--wp--preset--color--rose-fonce);
}

.mahe-coords__addr {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contraste-doux);
	line-height: 1.65;
}

.mahe-coords__note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contraste-doux);
	border-top: 1px solid var(--wp--preset--color--ligne);
	padding-top: 1.2rem;
}

@media (max-width: 920px) {
	.mahe-contact-layout {
		flex-wrap: wrap !important;
	}

	.mahe-contact-layout > .wp-block-column {
		flex-basis: 100% !important;
	}
}

@media (max-width: 600px) {
	.mahe-frow {
		grid-template-columns: 1fr;
	}
}

/* ── Pages secteurs : étiquettes de postes, prose, liens connexes ── */
.mahe-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 1.6rem 0 0;
}

.mahe-chips li {
	border: 1px solid var(--wp--preset--color--ligne);
	border-radius: var(--wp--custom--rayon--pill);
	padding: .42em 1.05em;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contraste-doux);
	background: var(--wp--preset--color--blanc);
}

.mahe-prose {
	color: var(--wp--preset--color--contraste-doux);
	/* Bride de lecture retiree le 31/08 (arbitrage Rudy : les encadres et blocs de
	   page occupent leur conteneur). On SUPPRIME la declaration plutot que de poser
	   `max-width: none` : si l element est enfant direct d une mise en page
	   « constrained », `none` annulerait AUSSI le plafond du coeur et le ferait
	   deborder de la colonne — piege rencontre sur `.mahe-solo__texte`. */
}

.mahe-prose + .mahe-prose {
	margin-top: .9rem;
}

.mahe-related-zone {
	padding-block: 0;
}

.mahe-related {
	border-top: 1px solid var(--wp--preset--color--ligne);
	padding: 26px 0;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contraste-doux);
	margin: 0;
}

.mahe-related__label {
	font-weight: 600;
	color: var(--wp--preset--color--contraste);
	margin-right: .4rem;
}

.mahe-related a {
	color: var(--wp--preset--color--bleu-lien);
	text-decoration: none;
	white-space: nowrap;
}

.mahe-related a:hover {
	color: var(--wp--preset--color--rose-fonce);
}

/* ── Variantes de rythme ── */
.mahe-page-hero--simple {
	padding-block: 40px 24px;
}

.mahe-blk--serre {
	padding-block: 24px 96px;
}

/* ── Pages légales ── */
.mahe-blk--legal {
	padding-block: 16px 96px;
}

/* ⚠️ RÈGLE DU THÈME (4e fois qu'elle mord) : une largeur de lecture se pose sur les
   ENFANTS, jamais sur un conteneur enfant direct d'une mise en page « constrained » —
   le cœur y applique `margin-inline: auto`, ce qui CENTRE le bloc au lieu de le caler
   à gauche. Voir aussi .mahe-sec-head et .mahe-contact-intro. */
.mahe-legal > * {
	max-width: 760px;
}

.mahe-legal h2 {
	margin-top: 2.4rem;
	margin-bottom: .6rem;
}

.mahe-legal__p {
	color: var(--wp--preset--color--contraste-doux);
	margin: 0;
}

.mahe-legal__p a {
	color: var(--wp--preset--color--bleu-lien);
}

/* Emplacement à compléter : visible d'un coup d'œil, impossible à publier par
   inadvertance sans le voir. */
.mahe-ph {
	background: rgba(186, 89, 107, .1);
	color: var(--wp--preset--color--rose-fonce);
	border-radius: 4px;
	padding: 0 .3em;
	font-style: italic;
}

.mahe-legal__maj {
	font-size: var(--wp--preset--font-size--medium);
	border-left: 3px solid var(--wp--preset--color--rose);
	padding-left: 14px;
	margin-bottom: 1.4rem;
}

/* ── Avis en grille (page dédiée) ── */
.mahe-temoins-grid {
	gap: 28px;
}

/* ── Bandeau presse ── */
.mahe-presse-logos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.mahe-plogo {
	border: 1px dashed var(--wp--preset--color--ligne);
	border-radius: var(--wp--custom--rayon--md);
	padding: 28px 18px;
	text-align: center;
	color: var(--wp--preset--color--gris-texte);
	font-size: var(--wp--preset--font-size--small);
	background: var(--wp--preset--color--blanc);
}

.mahe-pagination {
	margin-top: 3rem;
}

@media (max-width: 920px) {
	.mahe-temoins-grid,
	.mahe-presse-logos {
		grid-template-columns: 1fr 1fr !important;
	}
}

@media (max-width: 600px) {
	.mahe-temoins-grid,
	.mahe-presse-logos {
		grid-template-columns: 1fr !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE D'UNE OFFRE
   ══════════════════════════════════════════════════════════════════════════ */

.mahe-offer-head > * {
	/* Bride de lecture retiree le 31/08 (arbitrage Rudy : les encadres et blocs de
	   page occupent leur conteneur). On SUPPRIME la declaration plutot que de poser
	   `max-width: none` : si l element est enfant direct d une mise en page
	   « constrained », `none` annulerait AUSSI le plafond du coeur et le ferait
	   deborder de la colonne — piege rencontre sur `.mahe-solo__texte`. */
}

.mahe-offer-tags {
	display: flex;
	gap: .6rem;
	align-items: center;
	flex-wrap: wrap;
	margin: 0 0 1.1rem;
}

.mahe-offer-tags__ct {
	font-size: var(--wp--preset--font-size--surtitre);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blanc);
	background: var(--wp--preset--color--contraste);
	padding: .34em .85em;
	border-radius: var(--wp--custom--rayon--pill);
}

.mahe-offer-head__titre {
	line-height: 1.1;
	letter-spacing: -.02em;
	margin-bottom: 1rem;
}

.mahe-offer-metaline {
	display: flex;
	gap: .6rem 1.4rem;
	flex-wrap: wrap;
	color: var(--wp--preset--color--contraste-doux);
	font-size: var(--wp--preset--font-size--medium);
	margin: 0;
}

.mahe-offer-metaline__sep {
	color: var(--wp--preset--color--ligne);
}

.mahe-blk--offre {
	padding-block: 32px 96px;
}

.mahe-offer-body {
	gap: 56px;
	align-items: flex-start;
	margin-top: 2.6rem;
}

.mahe-offer-main h2 {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 2.2rem 0 .8rem;
}

.mahe-offer-main > *:first-child {
	margin-top: 0;
}

.mahe-offer-main p {
	color: var(--wp--preset--color--contraste-doux);
	/* Bride de lecture retiree le 31/08 (arbitrage Rudy : les encadres et blocs de
	   page occupent leur conteneur). On SUPPRIME la declaration plutot que de poser
	   `max-width: none` : si l element est enfant direct d une mise en page
	   « constrained », `none` annulerait AUSSI le plafond du coeur et le ferait
	   deborder de la colonne — piege rencontre sur `.mahe-solo__texte`. */
}

/* Listes à losanges du corps de l'offre (missions, profil) */
.mahe-offer-main ul {
	list-style: none;
	display: grid;
	gap: .7rem;
	margin: .4rem 0 1.4rem;
	padding: 0;
}

.mahe-offer-main ul li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	color: var(--wp--preset--color--contraste-doux);
}

.mahe-offer-main ul li::before {
	content: "◆";
	color: var(--wp--preset--color--rose);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.mahe-offer-side {
	position: sticky;
	top: 100px;
	display: grid;
	gap: 20px;
	align-self: flex-start;
}

.mahe-brief {
	border: 1px solid var(--wp--preset--color--ligne);
	border-radius: var(--wp--custom--rayon--lg);
	padding: 26px 28px;
	background: var(--wp--preset--color--blanc);
}

.mahe-brief dl {
	display: grid;
	gap: 1rem;
	margin: 0;
}

.mahe-brow dt {
	font-size: var(--wp--preset--font-size--surtitre);
	letter-spacing: var(--wp--custom--interlettrage--moyen);
	text-transform: uppercase;
	color: var(--wp--preset--color--bleu-lien);
	font-weight: 600;
	margin-bottom: .15rem;
}

.mahe-brow dd {
	margin: 0;
	color: var(--wp--preset--color--contraste);
	font-size: var(--wp--preset--font-size--medium);
}

.mahe-offer-side__actions .wp-block-button,
.mahe-offer-side__actions .wp-block-button__link {
	width: 100%;
	text-align: center;
}

.mahe-offer-side__conf {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contraste-doux);
	margin: 0;
}

.mahe-apply-panel {
	border: 1px dashed var(--wp--preset--color--ligne);
	border-radius: var(--wp--custom--rayon--lg);
	padding: 28px 30px;
	background: var(--wp--preset--color--fond-doux);
	margin-top: 2.6rem;
}

.mahe-apply-panel h2 {
	margin-bottom: .6rem;
}

.mahe-apply-panel p {
	color: var(--wp--preset--color--contraste-doux);
	/* Bride de lecture retiree le 31/08 (arbitrage Rudy : les encadres et blocs de
	   page occupent leur conteneur). On SUPPRIME la declaration plutot que de poser
	   `max-width: none` : si l element est enfant direct d une mise en page
	   « constrained », `none` annulerait AUSSI le plafond du coeur et le ferait
	   deborder de la colonne — piege rencontre sur `.mahe-solo__texte`. */
}

/* Ce qui reste à brancher est signalé, pas caché */
.mahe-apply-panel__attente {
	display: inline-block;
	margin-top: 1rem;
	font-size: var(--wp--preset--font-size--surtitre);
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--wp--preset--color--rose-fonce);
	background: rgba(163, 78, 94, .1);
	padding: .5em 1em;
	border-radius: var(--wp--custom--rayon--pill);
}

/* Offre pourvue (décision J-E) : bandeau + désindexation, l'URL survit */
.mahe-bandeau-pourvue {
	background: var(--wp--preset--color--contraste);
	color: var(--wp--preset--color--blanc);
	border-radius: var(--wp--custom--rayon--md);
	padding: 14px 20px;
	margin: 16px 0 0;
	font-size: var(--wp--preset--font-size--medium);
}

.mahe-bandeau-pourvue a {
	color: var(--wp--preset--color--blanc);
	text-decoration: underline;
}

.mahe-bandeau-pourvue a:hover {
	color: var(--wp--preset--color--rose-clair);
}

@media (max-width: 920px) {
	.mahe-offer-body {
		flex-wrap: wrap !important;
	}

	.mahe-offer-body > .wp-block-column {
		flex-basis: 100% !important;
	}

	.mahe-offer-side {
		position: static;
	}
}

/* Pagination des offres (ajoutée le 31/08, constat R6) */
.mahe-pagination-offres {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 2.4rem;
}

.mahe-pagination-offres a,
.mahe-pagination-offres span {
	border: 1px solid var(--wp--preset--color--ligne);
	border-radius: var(--wp--custom--rayon--pill);
	padding: .4em 1em;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--bleu-lien);
	text-decoration: none;
	background: var(--wp--preset--color--blanc);
}

.mahe-pagination-offres .current {
	background: var(--wp--preset--color--contraste);
	color: var(--wp--preset--color--blanc);
	border-color: var(--wp--preset--color--contraste);
}

/* ══════════════════════════════════════════════════════════════════════════
   VIDÉOS — vignette locale, chargement au clic (voir functions.php)
   Aucune requête vers YouTube avant que le visiteur ne le demande.
   ══════════════════════════════════════════════════════════════════════════ */

.mahe-video__cadre {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--wp--custom--rayon--md);
	overflow: hidden;
	background: var(--wp--preset--color--contraste);
}

.mahe-video__cadre iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.mahe-video__bouton {
	position: absolute;
	inset: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .8rem;
	padding: 24px;
	background: linear-gradient(160deg, #2C3944, #3A4A57);
	border: 0;
	cursor: pointer;
	color: var(--wp--preset--color--blanc);
	font-family: inherit;
	text-align: center;
}

.mahe-video__play {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--wp--preset--color--rose);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--wp--preset--font-size--x-large);
	padding-left: 4px;
	transition: transform .3s var(--wp--custom--transition), background .3s var(--wp--custom--transition);
}

.mahe-video__bouton:hover .mahe-video__play {
	transform: scale(1.08);
	background: var(--wp--custom--rose-survol);
}

.mahe-video__titre {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
}

.mahe-video__note {
	font-size: var(--wp--preset--font-size--small);
	color: rgba(255, 255, 255, .72);
	max-width: 46ch;
	line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE D'ARTICLE — conçue, pas reprise : la maquette n'en proposait aucun modèle.
   Deux formes à servir, mesurées sur le corpus : 4 articles de fond (370–650 mots)
   et 5 notes vidéo (9–34 mots). D'où le principe : le TEXTE tient dans une colonne
   de lecture étroite, les FIGURES et VIDÉOS en débordent. Sans ce débord, une note
   de douze mots n'est qu'un vide au-dessus d'une grande boîte noire.
   ══════════════════════════════════════════════════════════════════════════ */

.mahe-article-page {
	padding-block: 8px 0;
}

/* ── En-tête ── */
.mahe-article-tete {
	/* ⚠️ Surtout PAS de `max-width: none` ici : ce conteneur est un enfant direct
	   d'une mise en page « constrained », et le neutraliser le fait démarrer au bord
	   de l'écran au lieu de la colonne de contenu — le titre ne s'alignait plus sur
	   le fil d'Ariane ni sur le texte. (6e fois que ce piège mord ; voir la note
	   générale plus haut dans ce fichier.) */
	padding-bottom: 2.2rem;
	margin-bottom: 3rem;
	border-bottom: 1px solid var(--wp--preset--color--ligne);
}

.mahe-article-tete > * {
	max-width: 46rem;
}

.mahe-article-tete .mahe-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.mahe-article-tete .mahe-eyebrow a:hover {
	color: var(--wp--preset--color--rose-fonce);
}

.mahe-article-titre {
	line-height: 1.1;
	letter-spacing: -.02em;
	margin: .9rem 0 1.1rem;
}

.mahe-article-meta {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--gris-texte);
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 0;
}

.mahe-article-meta__sep {
	color: var(--wp--preset--color--ligne);
}

/* ── Vignette de carte : la vidéo se lance sur place ─────────────────────────
   Demande de MAHE, arbitrée par Rudy le 28/09. L'image d'un article vidéo est un
   BOUTON, pas un lien : le titre mène à l'article, l'image joue la vidéo. */
.mahe-article__media {
	margin: 0 0 .9rem;
	border-radius: var(--mahe-rayon, .5rem);
	overflow: hidden;
}

.mahe-article__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Le bouton remplit la vignette. `display: block` et non `inline-flex` : un
   bouton en ligne réserve un espace de descente sous l'image et laisse un liseré
   clair de quelques pixels au bas de la carte. */
.mahe-article__play {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: inherit;
}

.mahe-article__play-rond {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 3.5rem;
	height: 3.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	/* `x-large` (1,45rem) et non une valeur libre : l'échelle typographique est
	   arrêtée à neuf tailles, et le contrôle R18 refuse toute valeur brute — il
	   vient de m'attraper sur un 1.4rem posé par habitude. */
	font-size: var(--wp--preset--font-size--x-large);
	/* Le triangle ▶ est optiquement décentré vers la gauche dans son cadratin. */
	padding-left: .18em;
	transition: background-color .15s ease, transform .15s ease;
}

.mahe-article__play-note {
	position: absolute;
	left: .6rem;
	bottom: .6rem;
	padding: .2rem .5rem;
	border-radius: .25rem;
	background: rgba(0, 0, 0, .6);
	color: #fff;
	font-size: var(--wp--preset--font-size--petit, .8rem);
}

.mahe-article__play:hover .mahe-article__play-rond,
.mahe-article__play:focus-visible .mahe-article__play-rond {
	background: var(--wp--preset--color--rose, #BA596B);
	transform: scale(1.06);
}

/* Le focus doit se voir sur l'image, pas seulement sur le rond. */
.mahe-article__play:focus-visible {
	outline: 3px solid var(--wp--preset--color--rose, #BA596B);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.mahe-article__play-rond { transition: none; }
	.mahe-article__play:hover .mahe-article__play-rond { transform: none; }
}

/* ── Visuel de repli des articles sans image ─────────────────────────────────
   Dessiné, pas téléversé : rien à maintenir, et il porte la catégorie — il
   informe au lieu de meubler. Poser une image à la une le fait disparaître. */
.mahe-article__media--repli a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	aspect-ratio: 16 / 9;
	text-decoration: none;
	/* Deux teintes de la charte, pour que la grille ne soit pas monotone sans
	   en sortir. La diagonale évite l'aplat, qui ferait « image manquante ». */
	background-image: linear-gradient(135deg, var(--mahe-repli-a) 0%, var(--mahe-repli-b) 100%);
}

.mahe-article__media--rose { --mahe-repli-a: var(--wp--preset--color--rose); --mahe-repli-b: var(--wp--preset--color--rose-fonce); }
.mahe-article__media--bleu { --mahe-repli-a: var(--wp--preset--color--bleu); --mahe-repli-b: var(--wp--preset--color--bleu-lien); }

.mahe-article__repli-marque {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	letter-spacing: .22em;
	/* Le suivi ajoute un blanc à droite du dernier caractère ; sans ce retrait,
	   le mot paraît décalé vers la gauche dans son cadre. */
	text-indent: .22em;
	color: var(--wp--preset--color--blanc);
}

.mahe-article__repli-cat {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--blanc);
	opacity: .85;
	text-align: center;
	padding: 0 1rem;
}

/* ── Signature d'article : portrait, autrice, dates ──────────────────────────
   Demande de MAHE du 27/09. Le portrait est servi depuis la médiathèque, jamais
   par Gravatar — voir `inc/auteurs.php` pour la raison, qui n'est pas
   esthétique mais tient à la promesse « aucun traceur inter-sites ».

   `align-items: center` et non `baseline` : le portrait est rond et plus haut
   que le texte ; un alignement sur la ligne de base le ferait flotter. */
.mahe-article-meta--signature {
	align-items: center;
	gap: .9rem;
}

.mahe-article-meta__portrait {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	object-fit: cover;
	/* Le cadrage des portraits place le visage au-dessus du centre. Sans ce
	   décalage, un rognage circulaire coupe le menton. */
	object-position: center 22%;
	flex: 0 0 auto;
	border: 2px solid var(--wp--preset--color--ligne);
}

/* La colonne de droite : le nom au-dessus, les dates en dessous. Les deux
   étaient collés — « Marion CarlesPublié le » — parce que rien ne les séparait. */
.mahe-article-meta__texte {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	min-width: 0;
}

.mahe-article-meta__nom {
	font-weight: 600;
	color: var(--wp--preset--color--noir-texte, inherit);
}

.mahe-article-meta__dates {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .45rem;
	font-size: var(--wp--preset--font-size--petit, .875rem);
}

/* Le repli quand une autrice n'a pas de portrait : une initiale, plutôt qu'un
   trou — et surtout plutôt qu'un appel à gravatar.com. */
.mahe-avatar--lettre {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--wp--preset--color--ligne);
	color: var(--wp--preset--color--gris-texte);
	font-weight: 600;
	flex: 0 0 auto;
}

/* ── Colonne de lecture ─────────────────────────────────────────────────────
   ⚠️ `wp:post-content` enveloppe tout le contenu dans un `.entry-content`. Poser la
   largeur sur les enfants directs de la section revenait donc à la poser sur CETTE
   enveloppe : le texte était bien à la bonne largeur, mais les figures aussi — le
   débord des vidéos ne se produisait pas. On vise donc les éléments eux-mêmes. */
/* ══════════════════════════════════════════════════════════════════════════
   ARTICLE — colonne de lecture + rail de droite
   ══════════════════════════════════════════════════════════════════════════

   Le corps est bride a 38rem pour rester lisible (~70 signes par ligne). Sur une
   colonne de page de 1136px, cela laissait 531px vides a droite — mesure du 31/08.
   Rudy a demande d y lister les derniers articles et les annonces en ligne :
   la marge devient un rail, la largeur de lecture ne bouge pas. */
.mahe-article-layout {
	display: grid;
	grid-template-columns: minmax(0, 38rem) minmax(0, 1fr);
	gap: 80px;
	align-items: start;
}

/* Le rail occupait les 448px restants — trop large (Rudy, 31/08). On le borne a
   340px et on le pousse contre le bord DROIT de la colonne de page : les deux
   extremites restent ainsi calees sur 152 et 1288, comme partout ailleurs, et
   c est la gouttiere qui absorbe la difference. Le borner sans le pousser aurait
   simplement deplace le vide a l extreme droite. */
.mahe-article-rail {
	max-width: 340px;
	margin-left: auto;
}

/* ⚠️ Cette bascule doit venir APRES la regle ci-dessus, pas avant : une media
   query n ajoute aucune specificite, c est l ordre du fichier qui tranche. Posee
   plus haut dans le fichier (dans le bloc @media de l en-tete), elle etait ecrasee
   par la grille bureau et le rail restait a cote de l article a 390px, coupe par
   le bord de l ecran — constate au rendu du 31/08. */
@media (max-width: 1023px) {
	.mahe-article-layout {
		grid-template-columns: 1fr;
		gap: 56px;
	}

	/* Empile, donc plus de bornage ni de calage a droite. */
	.mahe-article-rail {
		max-width: none;
		margin-left: 0;
	}
}

/* ⚠️ Dans la colonne, figures et note des fondatrices etaient volontairement plus
   larges que le texte (52rem = 832px). La colonne n en fait plus que 608 : sans
   cette remise a 100 %, elles deborderaient de 224px sur le rail. */
.mahe-article-layout .mahe-article-corps :is( figure, .wp-block-image, .wp-block-embed, .mahe-video ),
.mahe-article-layout .mahe-note-fondatrices {
	max-width: 100%;
}

/* Separation demandee par Rudy entre la note des fondatrices et « A lire aussi » :
   sans elle, l encart sombre touchait presque la section suivante. */
.mahe-article-pied {
	padding-bottom: 8px;
}

.mahe-article-page {
	padding-bottom: 72px;
	border-bottom: 1px solid var(--wp--preset--color--ligne);
}

/* ── Le rail ── */
.mahe-article-rail {
	display: grid;
	gap: 40px;
	align-content: start;
}

.mahe-rail-titre {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--surtitre);
	font-weight: 700;
	letter-spacing: var(--wp--custom--interlettrage--large);
	text-transform: uppercase;
	color: var(--wp--preset--color--bleu-lien);
	margin: 0 0 1rem;
	padding-bottom: .8rem;
	border-bottom: 1px solid var(--wp--preset--color--ligne);
}

.mahe-rail-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .9rem;
}

.mahe-rail-liste li {
	line-height: 1.4;
}

.mahe-rail-liste a {
	display: block;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contraste);
	text-decoration: none;
}

.mahe-rail-liste a:hover {
	color: var(--wp--preset--color--rose-fonce);
}

.mahe-rail-meta {
	display: block;
	margin-top: .2rem;
	font-size: var(--wp--preset--font-size--surtitre);
	color: var(--wp--preset--color--gris-texte);
}

.mahe-rail-tout {
	margin: 1.2rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.mahe-rail-tout a {
	color: var(--wp--preset--color--bleu-lien);
	text-decoration: none;
}

.mahe-rail-tout a:hover {
	color: var(--wp--preset--color--rose-fonce);
}

.mahe-article-corps :is( p, ul, ol, h2, h3, h4, blockquote, .wp-block-table ) {
	max-width: 38rem;
}

/* Les figures respirent plus large que le texte : c'est ce qui fait tenir les notes
   vidéo, où la vidéo EST le contenu. */
.mahe-article-corps :is( figure, .wp-block-image, .wp-block-embed, .mahe-video ) {
	max-width: 52rem;
	margin-block: 2.4rem;
}

.mahe-article-corps :is( p, ul, ol ) {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.75;
	color: var(--wp--preset--color--contraste-doux);
}

.mahe-article-corps h2 {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 2.8rem 0 .8rem;
}

.mahe-article-corps h3 {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 2rem 0 .6rem;
}

.mahe-article-corps ul {
	list-style: none;
	padding-left: 0;
}

.mahe-article-corps ol {
	padding-left: 1.2rem;
}

.mahe-article-corps li {
	margin-bottom: .6rem;
}

.mahe-article-corps ul > li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
}

.mahe-article-corps ul > li::before {
	content: "◆";
	color: var(--wp--preset--color--rose);
	font-size: var(--wp--preset--font-size--surtitre);
	line-height: 1.9;
}

.mahe-article-corps blockquote {
	border-left: 2px solid var(--wp--preset--color--rose);
	padding-left: 20px;
	margin: 2rem 0;
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--contraste);
}

.mahe-article-pied {
	margin-top: 4rem;
}

/* ── Signature : le mot des fondatrices ─────────────────────────────────────
   Remplace l'appel à l'action générique. Sur un article de cabinet, la question
   du lecteur est « qui me dit ça ? » — on y répond, et on enchaîne. */
.mahe-note-fondatrices {
	max-width: 52rem;
	/* ⚠️ Cet encart est volontairement enveloppé dans `.mahe-article-pied` (voir
	   patterns/article.php). Sans cette enveloppe, il est un enfant DIRECT de la mise
	   en page « constrained », qui impose `margin-inline: auto !important` : il se
	   retrouvait centré (bord gauche à 268px) pendant que l'article est calé à 120px.
	   Et le forcer à `margin-left: 0` l'envoyait au bord de la page (33px), puisque la
	   colonne à 152px naît du centrage d'un bloc de 1136px, pas d'une marge.
	   L'enveloppe, elle, occupe la colonne : l'encart s'y aligne naturellement. */
	margin: 0;
	padding: 32px 36px;
	border-radius: var(--wp--custom--rayon--lg);
	background: var(--wp--preset--color--contraste);
	color: var(--wp--preset--color--blanc);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 28px;
	align-items: center;
}

.mahe-note-fondatrices__portraits {
	display: flex;
}

.mahe-note-fondatrices__portraits img {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--wp--preset--color--contraste);
}

.mahe-note-fondatrices__portraits img + img {
	margin-left: -14px;
}

/* Un liseré à la couleur du fond détache les deux visages l'un de l'autre. */
.mahe-note-fondatrices__portraits img {
	box-shadow: 0 0 0 2px var(--wp--preset--color--contraste);
}

.mahe-note-fondatrices p {
	margin: 0;
	color: rgba(255, 255, 255, .82);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.65;
}

.mahe-note-fondatrices__intro {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--blanc) !important;
	margin-bottom: .5rem !important;
}

.mahe-note-fondatrices__lien {
	margin-top: .9rem !important;
	font-weight: 600;
}

.mahe-note-fondatrices__lien a {
	color: var(--wp--preset--color--blanc);
	text-decoration: none;
	border-bottom: 1.5px solid var(--wp--preset--color--rose);
	padding-bottom: 2px;
}

.mahe-note-fondatrices__lien a:hover {
	color: var(--wp--preset--color--rose-clair);
}

@media (max-width: 600px) {
	.mahe-note-fondatrices {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 26px 24px;
	}
}

/* FAQ d'une annonce : même grille que les pages, resserrée dans la colonne du poste */
.mahe-offre-faq {
	margin-top: 2.8rem;
	padding-top: 2rem;
	border-top: 1px solid var(--wp--preset--color--ligne);
}

.mahe-offre-faq h2 {
	margin-bottom: 1.4rem;
}

/* Champ-piège anti-robot : hors de l'écran, hors des lecteurs d'écran, jamais
   atteignable au clavier. `display:none` serait détecté par les robots sérieux. */
.mahe-piege {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ── Formulaire de candidature (offre) ───────────────────────────────────────
   Il reprend l'habillage des champs du formulaire de contact plutôt que d'en
   inventer un second : ce sont les mêmes gestes pour le visiteur, ce doit être
   la même apparence. Seule la disposition change (paires côte à côte). */
.mahe-apply-form {
	margin-top: 26px;
}

.mahe-apply-form__duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 18px;
}

@media (max-width: 640px) {
	.mahe-apply-form__duo {
		grid-template-columns: 1fr;
	}
}

.mahe-apply-form p {
	margin: 0 0 14px;
}

.mahe-apply-form label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--contraste);
	margin-bottom: .35rem;
}

.mahe-apply-form__opt {
	font-weight: 400;
	color: var(--wp--preset--color--gris-texte);
}

.mahe-apply-form input[type="text"],
.mahe-apply-form input[type="email"],
.mahe-apply-form input[type="tel"],
.mahe-apply-form input[type="url"],
.mahe-apply-form input[type="file"],
.mahe-apply-form textarea {
	width: 100%;
	padding: .7rem .85rem;
	border: 1px solid var(--wp--preset--color--ligne);
	border-radius: var(--wp--custom--rayon--sm);
	background: var(--wp--preset--color--blanc);
	font: inherit;
	color: var(--wp--preset--color--contraste);
}

.mahe-apply-form textarea {
	resize: vertical;
}

.mahe-apply-form input:focus-visible,
.mahe-apply-form textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--rose-fonce);
	outline-offset: 1px;
}

/* La case de consentement est le seul endroit où l'étiquette suit le champ :
   elle se lit « je coche, donc j'accepte », pas l'inverse. */
.mahe-apply-form__consent {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	margin-bottom: 20px !important;
}

.mahe-apply-form__consent input {
	margin-top: .25rem;
	flex: 0 0 auto;
}

.mahe-apply-form__consent label {
	font-weight: 400;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--gris-texte);
	margin: 0;
}

/* L'état porte `role="status"` : il est annoncé aux lecteurs d'écran sans voler
   le focus. Vide au repos, il ne réserve donc aucune place. */
.mahe-apply-form__etat:empty {
	display: none;
}

.mahe-apply-form__etat {
	margin: 14px 0 0;
	padding: .7rem .9rem;
	border-radius: var(--wp--custom--rayon--sm);
	font-size: var(--wp--preset--font-size--medium);
}

.mahe-apply-form__etat--attente {
	background: var(--wp--preset--color--fond-doux);
	color: var(--wp--preset--color--contraste-doux);
}

.mahe-apply-form__etat--ok {
	background: rgba(93, 130, 161, .12);
	color: var(--wp--preset--color--bleu-lien);
}

.mahe-apply-form__etat--erreur {
	background: rgba(186, 89, 107, .12);
	color: var(--wp--preset--color--rose-fonce);
}

/* ── Annonce d'exemple ───────────────────────────────────────────────────────
   Posée par `mahe_offre_est_gabarit()`, jamais à la main (AUD-CLI-049 C1).
   Elle doit se lire AVANT le poste, pas se fondre dans la page : un
   avertissement discret n'avertit personne. */
.mahe-note--gabarit {
	margin: 0 0 1.5rem;
	padding: .85rem 1.1rem;
	border-left: 4px solid var(--wp--preset--color--rose);
	background: rgba(186, 89, 107, .09);
	color: var(--wp--preset--color--rose-fonce);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;   /* .mahe-note met en italique — un avertissement ne chuchote pas */
	line-height: 1.55;
}

/* Piège à robots. Volontairement PAS `display:none` ni `hidden` : les deux se
   repèrent trivialement. Le champ occupe zéro surface et sort du flux, sans
   annoncer qu'il se cache. `tabindex="-1"` le retire du parcours clavier et
   `aria-hidden` des lecteurs d'écran — un humain ne peut pas l'atteindre. */
.mahe-apply-form__miroir {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}


/* ══════════════════════════════════════════════════════════════════════════
   LISTING DES OFFRES — barre d'outils, cartes, tableau
   ══════════════════════════════════════════════════════════════════════════

   Demande de Rudy, 08/09/2026 : plus de pagination, un tri, et une seconde vue
   en tableau à colonnes triables. Les deux vues sont rendues par le serveur ;
   le JS ne fait que masquer, réordonner et basculer (assets/js/offres.js). */

/* ⚠️ RÈGLE STRUCTURANTE — à ne pas retirer.
   L'attribut `hidden` ne vaut que `display: none` dans la feuille du navigateur :
   n'importe quelle règle d'auteur portant un `display` le bat. Or la grille est
   en `display: grid` et la barre en `display: flex` — mesuré le 08/09, la bascule
   « Tableau » n'effaçait donc PAS les cartes (les deux vues s'empilaient), et
   sans JavaScript la barre d'outils s'affichait tout de même, inerte, alors que
   tout le parti pris 4 consiste à ne rien promettre qu'on ne sache faire.
   Le `!important` est ici la solution correcte, pas un contournement : il doit
   battre le `display` de chaque composant, et `hidden` est un état, pas un style. */
.mahe-listing [hidden] {
	display: none !important;
}

.mahe-listing__barre {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: .9rem 1.1rem;
	margin: 0 0 1.8rem;
	padding: 1.1rem 1.2rem;
	border: 1px solid var(--wp--preset--color--ligne);
	border-radius: var(--wp--custom--rayon--md);
	background: var(--wp--preset--color--blanc);
}

.mahe-listing__champ {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	min-width: 0;
}

.mahe-listing__champ label {
	font-size: var(--wp--preset--font-size--surtitre);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contraste-doux);
}

.mahe-listing__champ input,
.mahe-listing__champ select {
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
	padding: .5em .7em;
	border: 1px solid var(--wp--preset--color--ligne);
	border-radius: var(--wp--custom--rayon--sm);
	background: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--contraste);
	min-height: 42px;   /* cible tactile : 42px, pas 32 — on tape avec un pouce */
}

.mahe-listing__champ--rech {
	flex: 1 1 15rem;
}

.mahe-listing__champ--rech input {
	width: 100%;
}

.mahe-listing__champ input:focus-visible,
.mahe-listing__champ select:focus-visible,
.mahe-listing__vue:focus-visible,
.mahe-table-offres th button:focus-visible {
	outline: 2px solid var(--wp--preset--color--rose-fonce);
	outline-offset: 2px;
}

.mahe-listing__vues {
	display: flex;
	gap: 0;
	margin-left: auto;
	border: 1px solid var(--wp--preset--color--ligne);
	border-radius: var(--wp--custom--rayon--pill);
	overflow: hidden;
	align-self: flex-end;
}

.mahe-listing__vue {
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: .6em 1em;
	min-height: 42px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--contraste-doux);
	cursor: pointer;
	transition: background .25s var(--wp--custom--transition), color .25s var(--wp--custom--transition);
}

.mahe-listing__vue.is-actif {
	background: var(--wp--preset--color--rose-fonce);
	color: var(--wp--preset--color--blanc);
}

.mahe-listing__ico {
	margin-right: .35em;
}

.mahe-listing__compte {
	flex-basis: 100%;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contraste-doux);
}

.mahe-listing__raz,
.mahe-listing__raz-lien {
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--rose-fonce);
	text-decoration: underline;
	cursor: pointer;
}

.mahe-listing__vide {
	margin: 2rem 0;
	color: var(--wp--preset--color--contraste-doux);
}

/* ── La vue tableau ───────────────────────────────────────────────────────── */

/* Six colonnes ne tiennent pas sur un téléphone. Le tableau défile DANS son
   cadre — jamais la page — et le cadre est focalisable pour que ce défilement
   soit atteignable au clavier. */
.mahe-listing__tablewrap {
	overflow-x: auto;
	border: 1px solid var(--wp--preset--color--ligne);
	border-radius: var(--wp--custom--rayon--md);
	background: var(--wp--preset--color--blanc);
}

.mahe-table-offres {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--medium);
}

.mahe-table-offres thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 0;
	background: var(--wp--preset--color--blanc);
	border-bottom: 2px solid var(--wp--preset--color--ligne);
	text-align: left;
	white-space: nowrap;
}

.mahe-table-offres thead th button {
	font: inherit;
	font-size: var(--wp--preset--font-size--surtitre);
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contraste-doux);
	width: 100%;
	padding: .9em 1em;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
}

.mahe-table-offres thead th button:hover {
	color: var(--wp--preset--color--rose-fonce);
}

/* La flèche de tri est dessinée depuis `aria-sort` : l'état visible et l'état
   annoncé ne peuvent pas diverger, puisqu'ils n'ont qu'une seule source. */
.mahe-table-offres__fl::after {
	content: "↕";
	margin-left: .4em;
	opacity: .35;
}

.mahe-table-offres th[aria-sort="ascending"] .mahe-table-offres__fl::after  { content: "↑"; opacity: 1; }
.mahe-table-offres th[aria-sort="descending"] .mahe-table-offres__fl::after { content: "↓"; opacity: 1; }
.mahe-table-offres th[aria-sort]:not([aria-sort="none"]) button { color: var(--wp--preset--color--rose-fonce); }

.mahe-table-offres tbody th,
.mahe-table-offres tbody td {
	padding: .85em 1em;
	border-bottom: 1px solid var(--wp--preset--color--ligne);
	vertical-align: top;
	text-align: left;
	font-weight: 400;
	color: var(--wp--preset--color--contraste-doux);
}

.mahe-table-offres tbody tr:last-child th,
.mahe-table-offres tbody tr:last-child td {
	border-bottom: 0;
}

.mahe-table-offres tbody tr:hover th,
.mahe-table-offres tbody tr:hover td {
	background: rgba(186, 89, 107, .045);
}

.mahe-table-offres tbody th {
	min-width: 16rem;
	color: var(--wp--preset--color--contraste);
}

.mahe-table-offres tbody th a {
	font-weight: 600;
	color: var(--wp--preset--color--contraste);
	text-decoration: none;
}

.mahe-table-offres tbody th a:hover {
	color: var(--wp--preset--color--rose-fonce);
	text-decoration: underline;
}

/* Le secteur passe sous l'intitulé plutôt qu'en colonne : renseigné sur 7 offres
   sur 19, il aurait produit une colonne à moitié vide. */
.mahe-table-offres__sect {
	display: block;
	margin-top: .25rem;
	font-size: var(--wp--preset--font-size--surtitre);
	color: var(--wp--preset--color--rose-fonce);
}

.mahe-table-offres__ref {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

@media (max-width: 760px) {
	.mahe-listing__vues {
		margin-left: 0;
	}

	.mahe-listing__champ {
		flex: 1 1 100%;
	}

	.mahe-table-offres tbody th {
		min-width: 12rem;
	}
}

/* Le survol soulève la carte ; en tableau il n'y a rien à soulever. Rien à
   désactiver non plus — mais l'animation de révélation, elle, doit être neutre
   sur les lignes masquées, sinon une ligne filtrée réapparaît en fondu. */
@media (prefers-reduced-motion: reduce) {
	.mahe-offre,
	.mahe-listing__vue {
		transition: none;
	}
}


/* « Mise à jour le … » — visible seulement quand l'annonce a bougé depuis sa
   publication (mahe_offre_maj). Discrète : c'est un complément de la date de
   publication, pas une seconde information de même poids. */
.mahe-offre__maj {
	opacity: .85;
}

.mahe-table-offres__maj {
	display: block;
	margin-top: .2rem;
	font-size: var(--wp--preset--font-size--surtitre);
	color: var(--wp--preset--color--rose-fonce);
	white-space: nowrap;
}

/* Retour à la ligne demandé par MAHE (14/09) pour que l'encart candidat « tienne
   sur la même ligne » — une demande de BUREAU. En mobile, où le texte est déjà
   plié, un <br> inconditionnel laissait « tout au long du process — » orphelin
   sur sa ligne. Le saut n'existe donc qu'au-dessus du point de rupture des
   colonnes. */
@media (max-width: 920px) {
	.mahe-br-bureau {
		display: none;
	}
}

/* Accueil, cartes des fondatrices (14/09) : la bio y est courte et un lien mène
   au parcours complet sur la page Cabinet. Deux liens se suivent — parcours,
   puis LinkedIn. Le premier est l'action principale : il prend la couleur
   d'action du site, le second reste en bleu de lien. */
.mahe-membre__lien--suite {
	margin-top: 1rem;
}

.mahe-membre__lien--suite a {
	color: var(--wp--preset--color--rose-fonce);
}

.mahe-membre__lien--suite + .mahe-membre__lien {
	margin-top: .35rem;
	font-weight: 500;
}

/* Pied de page — trois adresses, chacune avec son statut (15/09, Rudy) : le
   50 rue de Bel Orme est le siège social, les bureaux sont à Léognan et à Paris.
   Le libellé est discret ; l'adresse reste ce qu'on lit en premier. */
.mahe-footer__adr-lbl {
	display: inline-block;
	margin-right: .5rem;
	font-size: var(--wp--preset--font-size--surtitre);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .72;
}


/* Implantations (15/09) : quatre cartes — siège, Léognan, Paris, France entière.
   Quatre colonnes en bureau, deux en tablette, une en mobile. */
@media (max-width: 920px) {
	.mahe-implants {
		grid-template-columns: 1fr 1fr !important;
	}
}

@media (max-width: 600px) {
	.mahe-implants {
		grid-template-columns: 1fr !important;
	}
}