/* ==========================================================================
   En Aparté — tokens et socle
   --------------------------------------------------------------------------
   Pour changer la typographie du site : remplacer les .woff2 de assets/fonts
   et ajuster les deux variables --ea-font-ui / --ea-font-display. Rien d'autre
   dans la feuille ne nomme une police.
   ========================================================================== */

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

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

@font-face {
	font-family: "EAGeorgia";
	src: url("../fonts/georgia-bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "EAGeorgia";
	src: url("../fonts/georgia-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "EAGeorgia";
	src: url("../fonts/georgia-bolditalic.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

:root {
	--ea-bg: #f7f1ec;
	--ea-surface: #eee8e3;   /* blocs et bande de pied de page */
	--ea-cream: #f4f0e4;
	--ea-ink: #000;
	--ea-accent: #48232a;    /* bordeaux — bouton de chargement des ressources */
	--ea-marron: #291401;    /* couleur principale transmise par la cliente */
	--ea-cta-bg: var(--ea-marron); /* retour client : les CTA noirs passent au marron */
	--ea-cta-ink: #fbf4df;
	--ea-pill: rgba(0, 0, 0, .1);

	--ea-radius-pill: 18px;
	--ea-radius-card: 10px;

	/* Les deux seuls leviers typographiques du thème. */
	--ea-font-ui: "Questrial", system-ui, sans-serif;
	--ea-font-display: "EAGeorgia", Georgia, "Times New Roman", serif;

	/* La maquette est dessinée sur 1920 avec 73px de marge latérale. */
	--ea-max: 1920px;
	--ea-gutter: clamp(20px, 3.8vw, 73px);
}

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

/*
 * Le navigateur applique display:none à [hidden], mais toute règle d'auteur
 * qui pose un display (grid, flex…) la bat. Sans ce garde-fou, masquer un
 * élément par son attribut hidden n'a aucun effet visible : c'est ce qui
 * rendait le filtrage des ressources inopérant.
 */
[hidden] {
	display: none !important;
}

body {
	margin: 0;
	background: var(--ea-bg);
	color: var(--ea-ink);
	font-family: var(--ea-font-ui);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4,
.ea-display {
	font-family: var(--ea-font-display);
	font-weight: 400;
	margin: 0;
}

p {
	margin: 0 0 1em;
}

img,
svg {
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ea-shell {
	width: 100%;
	max-width: var(--ea-max);
	margin-inline: auto;
	padding-inline: var(--ea-gutter);
}

.ea-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Bouton pilule noir — CTA de l'en-tête et des cartes. */
.ea-cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 8px 19px;
	min-height: 36px;
	border-radius: var(--ea-radius-pill);
	background: var(--ea-cta-bg);
	color: var(--ea-cta-ink);
	font-size: 20px;
	line-height: 1;
	transition: padding .28s cubic-bezier(.22, .61, .36, 1);
}

/* La pilule s'élargit un peu au survol, et se referme au relâchement. */
.ea-cta:hover,
.ea-cta:focus-visible {
	padding-inline: 27px;
}

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

	.ea-cta {
		transition: none;
	}
}

.ea-cta svg {
	width: 16px;
	height: auto;
	flex: none;
	transform: rotate(45deg);
}

/*
 * Variante contour (projection client) : filet fin, fond transparent. En
 * currentColor, elle reste lisible sur fond clair comme sur fond marron.
 */
.ea-cta--contour {
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

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

/* Tête, bouton de rendez-vous et voile du tiroir : mobile uniquement. */
@media (min-width: 901px) {

	.ea-nav__tete,
	.ea-nav__logo,
	.ea-nav__cta,
	.ea-nav-backdrop {
		display: none;
	}
}

.ea-skip {
	position: absolute;
	left: -9999px;
	z-index: 100;
	padding: 12px 20px;
	background: var(--ea-ink);
	color: var(--ea-cta-ink);
}

.ea-skip:focus {
	left: 12px;
	top: 12px;
}

/* ==========================================================================
   En-tête
   ========================================================================== */

/*
 * Barre visible pendant le défilement (retour client) : sticky, avec un fond
 * opaque — beige par défaut, marron sur l'accueil.
 */
.ea-header {
	/* Maquette : logo à y=43, visuel de la home à y=165, bas du logo à y=122. */
	padding-block: 43px 43px;
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--ea-bg);
	/* La marge basse compense la barre compacte (header.js) : même rythme que le padding. */
	transition: padding .25s ease, margin-bottom .25s ease;
}

/* Barre compacte pendant le défilement : classe posée par header.js. */
.ea-header.is-compact {
	padding-block: 12px 12px;
}

.ea-header.is-compact .ea-logo {
	width: 180px;
}

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

	.ea-header,
	.ea-logo {
		transition: none;
	}
}

.home .ea-header {
	background: var(--ea-marron);
}

.ea-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
}

.ea-logo {
	flex: none;
	display: block;
	width: 285px;
	max-width: 40vw;
	color: var(--ea-ink);
	transition: width .25s ease;
}

.ea-logo__mot,
.ea-logo__complet {
	display: block;
	width: 100%;
	height: auto;
}

.ea-logo__baseline {
	display: block;
	width: 79.75%;        /* 227.3 / 285 */
	height: auto;
	/*
	 * Dans Figma la baseline démarre à y=66.42 alors que le mot se termine à
	 * y=70.58 : les deux se chevauchent de 4.16px, soit -1.46% de la largeur.
	 */
	margin: -1.46% 0 0 11.43%;
}

.ea-nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.ea-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(8px, 2.2vw, 40px);
}

.ea-nav__list a {
	display: inline-block;
	padding: 8px 19px;
	border-radius: var(--ea-radius-pill);
	font-size: clamp(15px, 1.05vw, 20px);
	line-height: 1;
	white-space: nowrap;
	transition: background-color .2s ease;
}

.ea-nav__list a:hover,
.ea-nav__list a:focus-visible {
	background: var(--ea-pill);
}

.ea-nav__list .current-menu-item > a,
.ea-nav__list .current_page_item > a {
	background: var(--ea-pill);
}

.ea-header__cta {
	flex: none;
}

.ea-burger {
	display: none;
	flex: none;
	width: 44px;
	height: 44px;
	margin-left: auto;
	padding: 10px;
	border: 0;
	background: none;
	cursor: pointer;
}

.ea-burger span {
	display: block;
	height: 2px;
	margin: 4px 0;
	background: var(--ea-ink);
	transition: transform .2s ease, opacity .2s ease;
}

.ea-burger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.ea-burger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.ea-burger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* ==========================================================================
   Accueil
   ========================================================================== */

/*
 * Le visuel n'est pas calé sur la gouttière de 73px : dans la maquette il est
 * inséré à 206px de chaque bord (1507 + 206 × 2 = 1919).
 */
.ea-home {
	padding-inline: clamp(20px, 10.73vw, 206px);
}

.ea-home__visuel {
	margin: 0;
}

.ea-home__visuel img,
.ea-home__video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1507 / 805;
	object-fit: cover;
	border-radius: var(--ea-radius-card);
}

@media (max-width: 700px) {

	.ea-home__visuel img,
	.ea-home__video {
		aspect-ratio: 3 / 4;
	}
}

/*
 * La vidéo n'a pas été tournée pour le cadre 1507/805 de la photo : ses
 * sous-titres incrustés se répartissent sur toute la largeur de l'image,
 * à des hauteurs variables selon les plans. Un cover sur un cadre au ratio
 * différent risquerait de rogner du texte. On calque donc le cadre sur le
 * ratio natif du fichier — 854/480 en desktop, l'inverse en mobile — pour
 * que le cover ne recadre jamais rien.
 */
/*
 * Alignée sur le contenu du pied de page : la home sert le pied de page
 * minimal, dont le contenu est retreint par --ea-gutter (55px à 1440). On
 * casse le padding-inline de .ea-home en 100vw, puis on réapplique cette même
 * gouttière — mentions légales, icônes et vidéo partagent ainsi le même bord.
 */
.ea-home__visuel--video {
	position: relative;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-inline: var(--ea-gutter);
}

/* Retour demandé : angles arrondis, comme le reste des cartes du site. */
.ea-home__visuel--video .ea-home__video {
	border-radius: var(--ea-radius-card);
}

/*
 * Courte révélation avant le démarrage : le cadre monte en fondu, puis la
 * lecture est lancée par home-video.js une fois la transition terminée.
 * Sous prefers-reduced-motion le bloc reste en place (état final direct).
 */
.ea-home__visuel--video {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
}

.ea-home__visuel--video.is-revele {
	opacity: 1;
	transform: none;
}

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

	.ea-home__visuel--video {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/*
 * La vidéo dépassait sous la ligne de flottaison : à 1440x900, l'en-tête
 * occupe 165px et la largeur du pied de page en réclamait 748 de haut, soit
 * 13px de trop. Elle n'était pas rognée par object-fit — c'est la fenêtre qui
 * la coupait.
 *
 * On plafonne donc sa largeur à ce que la hauteur disponible autorise, en
 * conservant le rapport natif : le bloc se rétrécit et se centre plutôt que
 * de déborder. Sur un écran assez haut la contrainte ne mord pas et la vidéo
 * reste alignée sur le pied de page.
 */
/*
 * Le plafond porte sur le cadre qui enveloppe la vidéo et ses boutons, pas
 * sur la vidéo seule : posé sur la vidéo, le bouton du son restait ancré au
 * figure pleine largeur et tombait dans la gouttière marron, hors de l'image
 * (retour client de septembre).
 */
.ea-home__cadre {
	position: relative;
	margin-inline: auto;
}

@media (min-width: 701px) {

	.ea-home__visuel--video .ea-home__cadre,
	.ea-home__visuel--youtube .ea-home__cadre {
		max-width: calc((100vh - 165px - 48px) * 854 / 480);
	}
}

/*
 * Retour client (« ajuster sa taille ? ») : en mobile aussi, la vidéo est
 * plafonnée par la hauteur disponible sous l'en-tête, rapport natif
 * conservé, centrée avec la gouttière — plus de bord à bord.
 */
@media (max-width: 700px) {

	.ea-home__visuel--video .ea-home__cadre {
		max-width: calc((100dvh - 150px) * 480 / 854);
	}
}

.ea-home__visuel--video .ea-home__video {
	aspect-ratio: 854 / 480;
	background: var(--ea-surface);
}

@media (max-width: 700px) {

	.ea-home__visuel--video .ea-home__video {
		aspect-ratio: 480 / 854;
	}
}

/*
 * Vidéo YouTube de repli : même gouttière et même plafond que la vidéo
 * maison, au format 16/9 d'une vidéo YouTube, sans animation de révélation
 * (pilotée par home-video.js, qui ne concerne que le lecteur maison).
 */
.ea-home__visuel--youtube {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-inline: var(--ea-gutter);
}

.ea-home__youtube {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--ea-radius-card);
	background: var(--ea-surface);
}

.ea-home__son,
.ea-home__lecture {
	position: absolute;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	color: var(--ea-cta-ink);
	cursor: pointer;
	transition: background-color .2s ease;
}

.ea-home__son:hover,
.ea-home__son:focus-visible,
.ea-home__lecture:hover,
.ea-home__lecture:focus-visible {
	background: rgba(0, 0, 0, .75);
}

.ea-home__son {
	right: 20px;
	bottom: 20px;
}

.ea-home__son svg {
	width: 20px;
	height: 20px;
}

/* Les deux glyphes sont inlinés, seul celui de l'état courant est visible. */
.ea-home__son-on {
	display: none;
}

.ea-home__son[aria-pressed="true"] .ea-home__son-on {
	display: block;
}

.ea-home__son[aria-pressed="true"] .ea-home__son-off {
	display: none;
}

.ea-home__lecture {
	inset: 0;
	margin: auto;
	width: 64px;
	height: 64px;
}

.ea-home__lecture svg {
	width: 28px;
	height: 28px;
}

/*
 * La marge haute du premier bloc de la page ne doit pas traverser .ea-main :
 * elle fusionnerait avec la marge basse de compensation de la barre compacte
 * (header.js), qui ne compenserait plus rien — la barre recommençait à
 * pulser sur À propos, dont la première section a 110 px de marge. Une boîte
 * vide en display: table bloque la fusion par le haut sans décaler le
 * contenu ; par le bas, rien ne change.
 */
.ea-main::before {
	content: "";
	display: table;
}

/* ==========================================================================
   Sections (commun aux pages intérieures)
   ========================================================================== */

.ea-sec {
	margin-block: clamp(48px, 6vw, 110px);
}

/* Retour client : premier mot droit, le reste du titre en italique. */
.ea-sec__titre {
	margin-bottom: clamp(24px, 3vw, 56px);
	font-size: clamp(20px, 1.7vw, 32px);
	font-style: italic;
	letter-spacing: .02em;
	text-align: center;
	text-transform: uppercase;
}

.ea-sec__titre-droit {
	font-style: normal;
}

/*
 * Pastille rotative. Le SVG d'origine embarque son texte en vectoriel, donc
 * non modifiable : on ne garde que la forme en fond et le texte vient d'ACF.
 */
.ea-pastille {
	display: grid;
	place-items: center;
	width: 161px;
	height: 116px;
	margin: 0;
	padding: 22px 30px;
	background: center / contain no-repeat;
	font-size: 10px;
	line-height: 1.3;
	letter-spacing: .06em;
	text-align: center;
	text-transform: uppercase;
}

/*
 * Retour client de septembre : le ruban penche dans l'autre sens (descendant
 * vers la droite) et passe en marron, écriture blanche, aux deux endroits
 * (Services et À propos).
 *
 * Quatrième retour : le ruban monte vers la droite, pour la dynamique — la
 * forme est servie dans son sens d'origine (plus de miroir dans le SVG,
 * renommé : l'ancien fichier, mis en cache, gardait le ruban descendant) et
 * le texte tourne de l'angle opposé, -16.43°.
 *
 * Troisième retour : l'écriture suit le ruban, alignée sur l'étiquette et
 * non sur les textes de la page. L'angle est celui des deux bords droits du
 * tracé (sticker-ruban-montant.svg), rigoureusement parallèles : 39.30 px de
 * dénivelé sur 133.25 px, soit 16.43°. L'ancien 14.84° laissait le texte de
 * travers dans la bande. Le centre de la bande coïncide avec celui de la
 * boîte (écart inférieur à 0.4 px) : une rotation autour du centre du texte
 * suffit, chaque ligne reste centrée sur l'axe du ruban.
 */
.ea-pastille span {
	display: block;
	transform: rotate(-16.43deg);
}

.ea-pastille--sombre,
.ea-pastille--clair {
	background-image: url("../img/sticker-ruban-montant.svg");
	color: #fff;
}

/* ==========================================================================
   Services — accompagnements
   ========================================================================== */

/* Maquette : emprise 117 → 1811 sur 1920, soit 6.09 % de chaque côté. */
.ea-acc {
	padding-inline: clamp(20px, 6.09vw, 117px);
}

/* Retour client : moins de vide entre le menu et la première section. */
.ea-page-services .ea-sec:first-of-type {
	margin-top: clamp(16px, 2vw, 40px);
}

.ea-acc__grille {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}

/*
 * Retour client : cartes marron, texte blanc. La carte est le carrousel
 * (projection de septembre) : flèches à mi-hauteur de part et d'autre des
 * vues, bouton de réservation en bas, points de navigation sous le bouton.
 * La rangée des vues prend toute la hauteur libre : boutons et points sont
 * à la même hauteur sur les deux cartes.
 */
.ea-acc__carte {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: 1fr auto auto;
	grid-template-areas:
		"prev vues next"
		". reserver ."
		". dots .";
	column-gap: clamp(16px, 2vw, 32px);
	padding: clamp(24px, 2.4vw, 46px);
	border-radius: var(--ea-radius-card);
	background: var(--ea-marron);
	color: #fff;
}

.ea-acc__reserver {
	grid-area: reserver;
	margin: 28px 0 0;
	text-align: center;
}

/*
 * Retour client : même police que les titres des blocs « Votre situation »
 * (.ea-cli__titre) — Questrial grasse, pas la serif du titre de section.
 * Tailles identiques aux deux endroits.
 */
.ea-acc__titre {
	font-family: var(--ea-font-ui);
	font-size: clamp(17px, 1.25vw, 24px);
	font-weight: 700;
	letter-spacing: .01em;
	text-align: center;
	text-transform: uppercase;
}

.ea-acc__surtitre {
	margin: 4px 0 0;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .75;
}

/*
 * Toutes les vues occupent la même cellule : la hauteur du bloc est celle de
 * la plus longue, donc le carrousel ne fait pas sauter la carte. Chaque vue
 * part du haut de la cellule : les textes démarrent tous à la même hauteur.
 */
.ea-carrousel__vues {
	grid-area: vues;
	display: grid;
	align-items: start;
}

/*
 * Passage d'une vue à l'autre en fondu flouté. La visibilité bascule sans
 * transition, mais avec un délai à la sortie : la vue quittée reste dans
 * l'arbre le temps de s'effacer.
 */
.ea-carrousel__vue {
	grid-area: 1 / 1;
	visibility: hidden;
	opacity: 0;
	filter: blur(7px);
	transform: scale(.99);
	transition:
		opacity .26s ease,
		filter .26s ease,
		transform .26s ease,
		visibility 0s linear .26s;
}

.ea-carrousel__vue[data-actif] {
	visibility: visible;
	opacity: 1;
	filter: blur(0);
	transform: none;
	transition:
		opacity .26s ease,
		filter .26s ease,
		transform .26s ease,
		visibility 0s;
}

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

	.ea-carrousel__vue,
	.ea-carrousel__vue[data-actif] {
		filter: none;
		transform: none;
		transition: none;
	}
}

/*
 * Positionnement harmonisé d'une vue à l'autre (retour client) : le titre
 * de la vue occupe la tête de carte, centré, dans le style du titre de
 * l'accompagnement ; le texte courant est aligné à gauche, même retrait et
 * même départ en haut pour toutes les vues.
 */
.ea-carrousel__vue .ea-acc__entete {
	margin-bottom: 22px;
}

.ea-carrousel__texte {
	font-size: 16px;
	line-height: 1.6;
}

.ea-carrousel__texte > :last-child {
	margin-bottom: 0;
}

/*
 * Retour client de septembre, première vue seulement : même écart entre les
 * flèches et le texte à gauche et à droite, et texte descendu. La vue
 * s'étire sur toute la cellule : le titre reste en tête, à la hauteur de
 * celui des autres vues, et le texte se centre dans la place libre dessous.
 * Horizontalement, carousel.js resserre le bloc sur sa ligne la plus longue
 * et il se centre : le texte reste aligné à gauche, mais le vide à droite
 * des lignes ne décale plus le bloc.
 */
.ea-carrousel__vue--intro {
	align-self: stretch;
	display: flex;
	flex-direction: column;
}

.ea-carrousel__vue--intro .ea-carrousel__texte {
	margin-block: auto;
	margin-inline: auto;
}

.ea-carrousel__fleche {
	align-self: center;
	width: 13px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	opacity: .8;
	transition: opacity .2s ease;
}

.ea-carrousel__fleche:hover,
.ea-carrousel__fleche:focus-visible {
	opacity: 1;
}

.ea-carrousel__fleche svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Le chevron exporté pointe à gauche : la flèche « suivante » le retourne. */
.ea-carrousel__fleche--next svg {
	transform: scaleX(-1);
}

.ea-carrousel__fleche--prev {
	grid-area: prev;
}

.ea-carrousel__fleche--next {
	grid-area: next;
}

.ea-carrousel__pastilles {
	grid-area: dots;
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 18px;
}

.ea-carrousel__pastille {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: currentColor;
	color: inherit;
	opacity: .35;
	cursor: pointer;
	transition: opacity .2s ease;
}

.ea-carrousel__pastille[aria-selected="true"] {
	opacity: 1;
}

/*
 * Mobile : retour client de septembre, les flèches reviennent sur les flancs,
 * à mi-hauteur, comme en desktop — posées sous le bouton, on ne les voyait pas
 * du premier coup. La largeur de lecture perdue est limitée en resserrant
 * la gouttière et le rembourrage de la carte ; la flèche garde une zone de
 * toucher de 24 px autour de son tracé de 13.
 */
@media (max-width: 700px) {

	.ea-acc__carte {
		column-gap: 8px;
		padding-inline: 10px;
	}

	.ea-carrousel__fleche {
		width: 24px;
		padding: 10px 5px;
	}
}

/* ==========================================================================
   Services — expertises
   ========================================================================== */

/* Maquette : emprise 80 → 1844, soit 4.17 %. */
.ea-exp {
	padding-inline: clamp(20px, 4.17vw, 80px);
}

.ea-exp__grille {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/*
 * La dernière colonne réserve sous son texte la hauteur de la pastille, qui
 * s'y superpose sinon. Dans la maquette cet espace existait naturellement :
 * le texte y était court. Les contenus fournis par le client sont plus longs
 * et remplissent la colonne, d'où cette réserve explicite.
 */
.ea-exp__colonne {
	padding: clamp(24px, 2.4vw, 46px);
	background: var(--ea-surface);
}

.ea-exp__colonne:last-of-type {
	padding-bottom: clamp(24px, 8vw, 130px);
}

.ea-exp__titre {
	font-size: clamp(20px, 1.5vw, 28px);
	text-align: center;
}

/* Le document les livre en italique : Georgia italique, comme convenu. */
.ea-exp__accroche {
	margin: 10px 0 32px;
	font-family: var(--ea-font-display);
	font-size: 16px;
	font-style: italic;
	text-align: center;
}

.ea-exp__points {
	display: grid;
	gap: 18px;
	font-size: 16px;
	line-height: 1.5;
}

/*
 * Retour client de septembre : présentation convenue au départ (maquette
 * Figma) — puce, intitulé en capitales suivi d'un deux-points, descriptif en
 * minuscules dessous, aligné sur l'intitulé par un retrait suspendu. Pas de
 * graisse : Questrial n'existe qu'en regular, le gras serait synthétique.
 */
.ea-exp__points li {
	position: relative;
	padding-left: 18px;
}

.ea-exp__points li::before {
	content: "\2022";
	position: absolute;
	left: 0;
}

.ea-exp__points strong {
	display: block;
	font-weight: 400;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.ea-exp__points span {
	display: block;
}

.ea-exp__grille .ea-pastille {
	position: absolute;
	right: 4%;
	bottom: -18px;
}

/* ==========================================================================
   Services — clients
   ========================================================================== */

/* Maquette : emprise 142 → 1776, soit 7.4 %. */
.ea-cli {
	padding-inline: clamp(20px, 7.4vw, 142px);
}

.ea-cli__grille {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 31px;
}

.ea-cli__carte,
.ea-cli__pave {
	display: flex;
	flex-direction: column;
	padding: clamp(24px, 2.6vw, 50px);
	background: var(--ea-surface);
}

/*
 * Retour client : marron sur le SEUL pavé « Parlons de votre stratégie
 * patrimoniale », texte blanc — les trois cartes de texte gardent leur fond
 * clair. Cette règle vient après la règle groupée ci-dessus et la recouvre
 * pour le pavé uniquement.
 */
.ea-cli__pave {
	background: var(--ea-marron);
	color: #fff;
}

/* Une pilule noire serait illisible sur le marron : variante crème. */
.ea-cli__pave .ea-cta {
	background: var(--ea-cta-ink);
	color: var(--ea-cta-bg);
}

.ea-cli__titre {
	margin-bottom: 20px;
	font-family: var(--ea-font-ui);
	font-size: clamp(17px, 1.25vw, 24px);
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
}

.ea-cli__texte {
	flex: 1;
	font-size: 16px;
	line-height: 1.6;
}

.ea-cli__bouton {
	align-self: flex-start;
	margin-top: 24px;
	font-size: 14px;
}

.ea-cli__pave {
	align-items: center;
	justify-content: center;
	gap: 28px;
	text-align: center;
}

.ea-cli__pave-titre {
	margin: 0;
	font-size: clamp(28px, 2.6vw, 50px);
	line-height: 1.15;
	text-transform: uppercase;
}

@media (max-width: 900px) {

	.ea-acc__grille,
	.ea-exp__grille,
	.ea-cli__grille {
		grid-template-columns: 1fr;
	}

	.ea-exp__grille .ea-pastille {
		position: static;
		margin: 8px auto 0;
	}
}

/* ==========================================================================
   À propos
   ========================================================================== */

/* Maquette : bloc de x226 à x1692, photo à x320, soit 94 px de retrait interne. */
.ea-apintro {
	padding-inline: clamp(16px, 11.77vw, 226px);
}

.ea-apintro__bloc {
	display: grid;
	grid-template-columns: 44% 1fr;
	gap: clamp(24px, 8.2vw, 158px);
	padding: clamp(24px, 5.3vw, 102px) clamp(20px, 4.9vw, 94px);
	background: var(--ea-surface);
}

/*
 * Photo nue, sans cadre ni ombre : légèrement inclinée dans le sens
 * antihoraire. Angle mesuré par régression sur 28 points du bord supérieur
 * dans le rendu Figma — -2.08 deg.
 */
.ea-apintro__photo {
	margin: 0;
	transform: rotate(-2.08deg);
}

.ea-apintro__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 565 / 700;
	object-fit: cover;
}

.ea-apintro__nom {
	margin-bottom: 14px;
	font-family: var(--ea-font-ui);
	font-size: clamp(16px, 1.15vw, 22px);
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.ea-apintro__corps {
	font-size: 16px;
	line-height: 1.6;
}

.ea-apintro__bouton {
	margin-top: 8px;
	font-size: 14px;
}

.ea-apintro__formations {
	margin-top: clamp(28px, 3.4vw, 66px);
}

.ea-apintro__formations-titre {
	margin-bottom: 12px;
	font-family: var(--ea-font-ui);
	font-size: clamp(15px, 1.05vw, 20px);
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.ea-apintro__formations li {
	padding-left: 14px;
	font-size: 16px;
	line-height: 1.5;
	text-indent: -14px;
}

.ea-apintro__formations li::before {
	content: "• ";
}

.ea-apmanif__titre {
	margin-bottom: clamp(36px, 4.5vw, 86px);
	font-size: clamp(30px, 3.4vw, 65px);
	line-height: 1.18;
	text-align: center;
	text-transform: uppercase;
}

/* Maquette : colonnes de x280 à x1576, gouttière de 104. */
/*
 * Une colonne centrée (retour client). Retour de septembre : la pastille
 * quitte le coin du bloc, où elle paraissait détachée du texte, et se pose
 * dans le flux sous le dernier paragraphe, centrée — à toutes les largeurs,
 * comme elle l'était déjà en mobile.
 */
.ea-apmanif__colonnes {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	max-width: 760px;
	margin-inline: auto;
	padding-inline: 16px;
	font-size: 16px;
	line-height: 1.6;
	text-align: center;
}

.ea-apmanif__colonnes .ea-pastille {
	margin: clamp(24px, 2.6vw, 40px) auto 0;
}

@media (max-width: 900px) {

	.ea-apintro__bloc {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Ressources
   ========================================================================== */

/* Maquette : cartes de x377 à x1542, soit 19.64 % de retrait. */
.ea-res {
	padding-inline: clamp(16px, 19.64vw, 377px);
}

.ea-res__titre-page {
	margin-block: clamp(40px, 5vw, 96px) clamp(32px, 4vw, 76px);
	font-size: clamp(26px, 2.3vw, 44px);
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
}

/* Maquette : trait de 573 px sur une zone de 1166, soit la moitié. */
.ea-res__recherche {
	display: flex;
	align-items: baseline;
	gap: 10px;
	width: 50%;
	margin-bottom: 28px;
	border-bottom: 1px solid rgba(0, 0, 0, .35);
	font-size: 14px;
}

.ea-res__recherche input {
	flex: 1;
	padding: 6px 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
}

.ea-res__recherche input:focus {
	outline: none;
}

.ea-res__recherche:focus-within {
	border-bottom-color: var(--ea-ink);
}

/*
 * Liste à hauteur fixe et défilement interne, comme dans la maquette : barre
 * de défilement à droite et dernière carte tronquée.
 */
.ea-res__liste {
	display: grid;
	gap: 20px;
	max-height: min(72vh, 1430px);
	padding-right: 12px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.ea-res__carte {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: clamp(16px, 2vw, 38px);
	padding: clamp(16px, 1.6vw, 30px);
	background: var(--ea-surface);
}

.ea-res__visuel {
	margin: 0;
	width: clamp(90px, 13vw, 250px);
}

.ea-res__visuel-lien {
	display: block;
}

.ea-res__visuel img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.ea-res__titre {
	margin-bottom: 12px;
	font-size: clamp(17px, 1.35vw, 26px);
	font-style: italic;
	line-height: 1.25;
}

.ea-res__extrait {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
}

/* Au survol, seule la flèche pivote : pas d'agrandissement du bouton. */
.ea-res__lien {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 50%;
	background: var(--ea-ink);
	color: var(--ea-cta-ink);
}

.ea-res__lien svg {
	width: 14px;
	height: auto;
	transform: rotate(135deg);
}

.ea-res__vide {
	margin-top: 24px;
	font-size: 14px;
	text-align: center;
}

.ea-res__plus {
	display: flex;
	justify-content: center;
	margin-top: clamp(28px, 3.4vw, 66px);
}

.ea-res__bouton {
	display: grid;
	place-items: center;
	width: 43px;
	height: 43px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ea-accent);
	color: var(--ea-cta-ink);
	cursor: pointer;
}

.ea-res__bouton svg {
	width: 16px;
	height: auto;
	transform: rotate(90deg);
}

@media (max-width: 700px) {

	.ea-res__carte {
		grid-template-columns: 1fr auto;
	}

	.ea-res__visuel {
		grid-column: 1 / -1;
		width: 100%;
	}

	/* Pleine largeur en mobile : à 375 px, la moitié ne laisse plus rien saisir. */
	.ea-res__recherche {
		width: 100%;
	}

	/*
	 * En mobile, pas de zone à défilement interne : deux défilements imbriqués
	 * sur un écran tactile se disputent le geste. Les ressources s'enchaînent
	 * dans le flux de la page.
	 */
	.ea-res__liste {
		max-height: none;
		padding-right: 0;
		overflow-y: visible;
	}
}

/* ==========================================================================
   Article — page de détail d'une ressource
   ========================================================================== */

/*
 * Colonne plus étroite que les autres pages : au-delà d'environ 75 signes par
 * ligne, un texte suivi devient pénible à lire.
 */
.ea-article {
	--ea-article-largeur: 820px;

	padding-inline: clamp(16px, 6vw, 116px);
	padding-block: clamp(32px, 4vw, 76px) 0;
}

.ea-article__corps,
.ea-article__nav,
.ea-article__cta {
	width: 100%;
	max-width: var(--ea-article-largeur);
	margin-inline: auto;
}

.ea-article__retour {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: clamp(24px, 3vw, 48px);
	font-size: 16px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ea-article__retour:hover {
	text-decoration: underline;
}

.ea-article__retour-fleche {
	width: 18px;
	height: auto;
	transform: rotate(180deg);
}

.ea-article__titre {
	font-size: clamp(28px, 3vw, 56px);
	font-style: italic;
	line-height: 1.15;
}

.ea-article__meta {
	margin-top: 16px;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .7;
}

.ea-article__sep {
	margin-inline: 8px;
}

.ea-article__visuel {
	margin: clamp(28px, 3.4vw, 60px) 0;
}

.ea-article__visuel img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--ea-radius-card);
}

.ea-article__texte {
	font-size: 16px;
	line-height: 1.75;
}

.ea-article__texte h2,
.ea-article__texte h3 {
	margin-top: 1.8em;
	margin-bottom: .5em;
	font-size: clamp(20px, 1.5vw, 28px);
}

.ea-article__texte ul {
	margin: 0 0 1em;
	list-style: disc;
	padding-left: 1.2em;
}

.ea-article__texte li {
	margin-bottom: .4em;
}

.ea-article__texte blockquote {
	margin: 1.6em 0;
	padding: 20px 26px;
	background: var(--ea-surface);
	font-family: var(--ea-font-display);
	font-size: 18px;
	font-style: italic;
}

.ea-article__nav {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-top: clamp(40px, 4.5vw, 86px);
}

.ea-article__voisin {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: clamp(18px, 1.8vw, 30px);
	background: var(--ea-surface);
	transition: background-color .2s ease;
}

.ea-article__voisin:hover {
	background: var(--ea-cream);
}

.ea-article__voisin--suiv {
	text-align: right;
}

.ea-article__voisin-label {
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .6;
}

.ea-article__voisin-titre {
	font-size: clamp(15px, 1.15vw, 20px);
	font-style: italic;
	line-height: 1.3;
}

.ea-article__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 26px;
	margin-top: clamp(40px, 4.5vw, 86px);
	padding: clamp(32px, 3.6vw, 68px);
	background: var(--ea-cream);
	text-align: center;
}

.ea-article__cta-titre {
	margin: 0;
	font-size: clamp(24px, 2.2vw, 42px);
	line-height: 1.15;
	text-transform: uppercase;
}

@media (max-width: 700px) {

	.ea-article__nav {
		grid-template-columns: 1fr;
	}

	.ea-article__voisin--suiv {
		text-align: left;
	}
}

/* ==========================================================================
   Page neutre — mentions légales, confidentialité, CGV…
   ========================================================================== */

.ea-neutre {
	padding-inline: clamp(16px, 6vw, 116px);
	padding-block: clamp(32px, 4vw, 76px) 0;
}

.ea-neutre__corps {
	width: 100%;
	max-width: 820px;
	margin-inline: auto;
}

.ea-neutre__entete {
	margin-bottom: clamp(28px, 3.4vw, 60px);
	padding-bottom: clamp(20px, 2.4vw, 40px);
	border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.ea-neutre__titre {
	font-size: clamp(28px, 3vw, 56px);
	line-height: 1.15;
}

/* Bouton du document à télécharger : cadre fin, flèche à droite. */
.ea-neutre__document {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-top: clamp(20px, 2vw, 32px);
	padding: 16px 24px;
	border: 1px solid currentColor;
	border-radius: 6px;
	font-size: 16px;
	line-height: 1.3;
	transition: background-color .2s ease, color .2s ease;
}

.ea-neutre__document svg {
	width: 16px;
	height: auto;
	flex: none;
}

.ea-neutre__document:hover,
.ea-neutre__document:focus-visible {
	background: var(--ea-marron);
	border-color: var(--ea-marron);
	color: #fff;
}

.ea-neutre__maj {
	margin: 14px 0 0;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .65;
}

.ea-neutre__contenu {
	font-size: 16px;
	line-height: 1.75;
}

.ea-neutre__contenu h2 {
	margin-top: 2em;
	margin-bottom: .6em;
	font-size: clamp(20px, 1.6vw, 30px);
}

.ea-neutre__contenu h3 {
	margin-top: 1.6em;
	margin-bottom: .4em;
	font-family: var(--ea-font-ui);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.ea-neutre__contenu ul,
.ea-neutre__contenu ol {
	margin: 0 0 1.2em;
	padding-left: 1.3em;
	list-style: disc;
}

.ea-neutre__contenu ol {
	list-style: decimal;
}

.ea-neutre__contenu li {
	margin-bottom: .4em;
}

.ea-neutre__contenu a {
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: opacity .2s ease;
}

.ea-neutre__contenu a:hover {
	opacity: .6;
}

.ea-neutre__contenu strong {
	font-weight: 700;
}

.ea-neutre__contenu blockquote {
	margin: 1.6em 0;
	padding: 20px 26px;
	background: var(--ea-surface);
	font-family: var(--ea-font-display);
	font-size: 18px;
	font-style: italic;
}

/* Les mentions légales sortent souvent des tableaux : ils doivent défiler seuls. */
.ea-neutre__contenu table {
	display: block;
	width: 100%;
	margin-bottom: 1.4em;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: 14px;
}

.ea-neutre__contenu th,
.ea-neutre__contenu td {
	padding: 10px 14px;
	border: 1px solid rgba(0, 0, 0, .12);
	text-align: left;
}

.ea-neutre__contenu th {
	background: var(--ea-surface);
	font-weight: 700;
}

/* ==========================================================================
   Pied de page
   ========================================================================== */

/*
 * Maquette : 135px entre le haut de la bande et le premier pixel d'encre du
 * menu, à 1920. On retranche les 5px d'interligne au-dessus des capitales
 * (mesurés sur la police), d'où 130px de padding.
 */
.ea-footer {
	margin-top: 80px;
	padding-top: clamp(55px, 6.77vw, 130px);
	background: var(--ea-surface);
}

/*
 * Grille à trois colonnes plutôt que space-between : le menu du pied de page
 * reste vide tant que l'arborescence n'est pas arrêtée, et un space-between
 * ferait alors remonter le bloc central à gauche.
 *
 * Le pied de page a son propre retrait, plus large que la gouttière du reste
 * du site : 162px à gauche et 111px à droite sur 1920 dans la maquette. Il ne
 * passe donc pas par .ea-shell.
 */
/*
 * Le retrait est porté par les colonnes latérales, pas par le conteneur : avec
 * un padding asymétrique sur le conteneur, les deux colonnes 1fr deviennent
 * inégales et la colonne centrale se décale de 19px. Posé sur les colonnes,
 * les 1fr restent égales et les icônes se centrent sur la page.
 */
.ea-footer__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: start;
	gap: 32px;
	max-width: var(--ea-max);
	margin-inline: auto;
}

/*
 * Les trois colonnes ne sont pas alignées en haut dans la maquette : mesurées
 * depuis le haut de la bande, le menu démarre à 135px, les icônes à 219 et le
 * bloc contact à 256. D'où ces décalages de 84 et 121px.
 */
.ea-footer__centre {
	margin-top: clamp(0px, 4.38vw, 84px);
}

/*
 * Le bas du bloc contact (l'adresse mail) doit tomber sur la même ligne que
 * le bas de « MENTIONS LÉGALES », quelle que soit la hauteur du bloc. Un
 * margin-top fixe ne peut viser qu'un cas ; align-self: end ancre le bloc au
 * bas de la rangée automatiquement, y compris si le texte du mail passe sur
 * deux lignes à l'étroit.
 */
.ea-footer__contact {
	align-self: end;
}

/*
 * Colonnes assignées explicitement : sans menu de pied de page, le placement
 * automatique ferait glisser le bloc central en colonne 1.
 */
.ea-footer__nav {
	grid-column: 1;
	padding-left: clamp(15px, 8.44vw, 162px);
}

.ea-footer__centre {
	grid-column: 2;
}

.ea-footer__contact {
	grid-column: 3;
	justify-self: end;
	padding-right: clamp(15px, 5.78vw, 111px);
}

.ea-footer__list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.ea-footer__centre {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

/* Mentions légales et CGV côte à côte, séparées par un point médian. */
.ea-footer__legaux {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 4px 12px;
}

.ea-footer__legaux > a + a::before {
	content: "·";
	display: inline-block;
	margin-right: 12px;
	font-weight: 400;
	opacity: 1;
}

.ea-footer__mentions {
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/*
 * Les deux lignes n'ont pas la même police dans la maquette : le libellé est
 * en Georgia, l'adresse en Questrial. Elles sont aussi l'une sous l'autre —
 * en inline elles se retrouvaient sur la même ligne.
 */
.ea-footer__contact {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	font-size: 14px;
	text-align: right;
}

.ea-footer__contact-label {
	font-family: var(--ea-font-display);
	font-size: 16px;
}

/* ---------------------------------------------------------------------- *
 * Survols du pied de page
 *
 * Ni couleur d'accent ni agrandissement, seulement un voile et une graisse.
 * ---------------------------------------------------------------------- */

.ea-footer__list a,
.ea-footer__mentions,
.ea-footer__contact a,
.ea-footer .social-links .social-link,
.ea-footer__mail,
.ea-footer__rdv {
	transition: opacity .2s ease;
}

.ea-footer__list a:hover,
.ea-footer__list a:focus-visible,
.ea-footer__mentions:hover,
.ea-footer__mentions:focus-visible,
.ea-footer__contact a:hover,
.ea-footer__contact a:focus-visible {
	opacity: .55;
	font-weight: 700;
	text-decoration: none;
}

.ea-footer .social-links .social-link:hover,
.ea-footer .social-links .social-link:focus-visible,
.ea-footer__mail:hover,
.ea-footer__mail:focus-visible,
.ea-footer__rdv:hover,
.ea-footer__rdv:focus-visible {
	transform: none;
	opacity: .55;
	color: inherit;
}

/*
 * Le logotype est volontairement rogné par le bas de page : la descendante du
 * « p » est coupée. Le tracé fait 1760 × 435.836 ; on n'en montre que 78 %.
 */
.ea-footer__logotype {
	display: block;
	width: 100%;
	margin-top: 40px;
	aspect-ratio: 1760 / 340;
	overflow: hidden;
	line-height: 0;
	color: var(--ea-ink);
}

.ea-footer__logotype svg {
	display: block;
	width: 100%;
	height: auto;
}

.ea-footer__logotype path {
	will-change: transform;
}

/* Variante home : une seule ligne, pas de bande ni de logotype. */
.ea-footer--minimal {
	margin-top: 0;
	padding-block: 24px 32px;
	background: transparent;
}

/*
 * La variante minimale ne veut ni la grille à trois colonnes, ni le retrait
 * élargi : sa maquette cale les mentions sur la gouttière habituelle de 73px,
 * pas sur les 162px du pied de page complet.
 */
.ea-footer--minimal .ea-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 24px;
	padding-inline: var(--ea-gutter);
}

.ea-footer--minimal .ea-footer__centre,
.ea-footer--minimal .ea-footer__contact,
.ea-footer--minimal .ea-footer__icones {
	margin-top: 0;
}

/*
 * Réseaux, mail (home) et rendez-vous (pages intérieures) : trois SVG du
 * thème, dans la même boîte de 24 px pour rester alignés.
 */
.ea-footer__icones {
	display: flex;
	align-items: center;
	gap: 20px;
}

.ea-footer__icones .social-links {
	display: inline-flex;
	align-items: center;
	gap: 20px;
}

.ea-footer__icones .social-link,
.ea-footer__mail,
.ea-footer__rdv {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	font-size: 22px;
	line-height: 1;
}

.ea-footer__icones .social-link svg,
.ea-footer__mail svg,
.ea-footer__rdv svg {
	display: block;
	width: 24px;
	height: 24px;
}

/* ==========================================================================
   Mobile
   ========================================================================== */

/*
 * Sous 700 px, toutes les marges latérales tombent à 15 px. Les retraits de la
 * maquette sont exprimés en pourcentage de 1920 : conservés tels quels sur un
 * téléphone, ils mangeaient jusqu'à 74 px de chaque côté sur la page
 * Ressources.
 */
@media (max-width: 700px) {

	:root {
		--ea-gutter: 15px;
	}

	.ea-home,
	.ea-acc,
	.ea-exp,
	.ea-cli,
	.ea-res,
	.ea-apintro,
	.ea-apmanif__colonnes,
	.ea-article,
	.ea-neutre,
	.ea-footer__inner {
		padding-inline: 15px;
	}
}

@media (max-width: 900px) {

	.ea-header {
		padding-block: 20px 24px;
	}

	.ea-header.is-compact {
		padding-block: 10px 12px;
	}

	.ea-header.is-compact .ea-logo {
		width: 118px;
	}

	/* Sans wrap, le CTA (335px) reste sur la première ligne et déborde. */
	.ea-header__inner {
		flex-wrap: wrap;
		gap: 12px;
	}

	.ea-burger {
		display: block;
		order: 2;
	}

	/*
	 * Menu pleine page (retour client de septembre, référence « Cézane
	 * Avocat », reprise à l'identique au second retour) : voile opaque du
	 * blanc chaud du site ; logo, entrées et bouton de rendez-vous forment un
	 * seul bloc centré dans l'écran, sur les mesures relevées sur la
	 * référence à 390 px — logo de 275 px, 31 px jusqu'à la première entrée,
	 * entrées de 27 px de haut espacées de 46, capitales de 18 px. Seul le
	 * bouton de fermeture reste en tête, à la place du burger. Toujours
	 * rendu, invisible au repos, pour que le fondu puisse jouer.
	 */
	.ea-nav {
		position: fixed;
		inset: 0;
		height: 100dvh;
		flex-direction: column;
		justify-content: safe center;
		align-items: center;
		gap: 0;
		/* Bas plus généreux que le haut : le bloc centré remonte de 12 px, logo au niveau de la référence. */
		padding: 72px var(--ea-gutter) 60px;
		background: var(--ea-bg);
		color: var(--ea-ink);
		text-align: center;
		overflow-y: auto;
		z-index: 200;
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s ease, visibility 0s linear .25s;
	}

	.ea-nav.is-open {
		opacity: 1;
		visibility: visible;
		transition: opacity .25s ease, visibility 0s;
	}

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

		.ea-nav,
		.ea-nav.is-open {
			transition: none;
		}
	}

	/* Sur l'accueil, le contour de focus blanc serait invisible sur le voile clair. */
	.ea-nav.is-open :focus-visible {
		outline-color: var(--ea-ink);
	}

	.ea-nav__tete {
		position: absolute;
		top: 20px;
		right: var(--ea-gutter);
	}

	.ea-nav__logo {
		display: block;
		flex: none;
		width: 275px;
		max-width: 70vw;
		/*
		 * Second retour : logo trop bas par rapport à la référence. Sur la
		 * capture iPhone de Cézane Avocat, 97 px séparent le bas du logo du
		 * haut des capitales de la première entrée ; 90 px de marge + les 7 px
		 * d'interligne au-dessus des capitales redonnent cet écart. Le bloc
		 * étant centré dans l'écran, l'écart agrandi remonte le logo d'autant.
		 */
		margin-bottom: 90px;
		color: var(--ea-ink);
	}

	.ea-nav__fermer {
		width: 44px;
		height: 44px;
		margin: -4px -10px 0 0;
		padding: 0;
		border: 0;
		background: none;
		color: var(--ea-ink);
		font-size: 34px;
		line-height: 1;
		cursor: pointer;
	}

	.ea-nav__list {
		flex-direction: column;
		align-items: center;
		gap: 46px;
		width: 100%;
	}

	.ea-nav__list a {
		padding: 0;
		font-size: 18px;
		line-height: 27px;
		letter-spacing: normal;
		text-transform: uppercase;
	}

	/*
	 * Les sélecteurs préfixés .home reprennent ceux de la section « Accueil en
	 * marron » : leur pilule blanche translucide transparaîtrait sur le voile.
	 */
	.ea-nav__list a:hover,
	.ea-nav__list a:focus-visible,
	.ea-nav__list .current-menu-item > a,
	.ea-nav__list .current_page_item > a,
	.home .ea-nav__list a:hover,
	.home .ea-nav__list a:focus-visible,
	.home .ea-nav__list .current-menu-item > a,
	.home .ea-nav__list .current_page_item > a {
		background: none;
		opacity: .6;
	}

	.ea-nav__cta {
		flex: none;
		margin-top: 40px;
		justify-content: center;
		background: var(--ea-marron);
		color: #fff;
		font-size: 17px;
	}

	/* Le menu couvre tout l'écran : plus de voile à afficher derrière. */
	.ea-nav-backdrop {
		display: none;
	}

	/* Retour client : plus de bouton sous le logo — il vit dans le tiroir. */
	.ea-header__cta {
		display: none;
	}

	.ea-footer__inner {
		grid-template-columns: 1fr;
		justify-items: center;
		padding-inline: var(--ea-gutter);
	}

	/*
	 * Le menu du pied de page double celui de l'en-tête, déjà accessible par
	 * le burger : redondant en mobile, où l'espace manque. Les blocs restants
	 * se centrent, la gouttière de la grille les espace verticalement — les
	 * décalages et retraits latéraux de la maquette desktop n'ont plus lieu
	 * d'être en colonne unique.
	 */
	.ea-footer__nav {
		display: none;
	}

	.ea-footer__centre,
	.ea-footer__contact {
		grid-column: 1;
		justify-self: center;
		margin-top: 0;
		padding-inline: 0;
	}

	.ea-footer--minimal .ea-footer__inner {
		flex-direction: column;
		align-items: center;
		flex-wrap: wrap;
	}

	.ea-footer__centre {
		align-items: center;
	}

	.ea-footer__contact {
		align-items: center;
		align-self: auto;
		text-align: center;
	}
}

/* ==========================================================================
   Accueil en marron
   --------------------------------------------------------------------------
   Retour client : la page d'accueil entière — en-tête et pied de page
   compris — passe en marron, texte blanc. La classe home n'est posée par
   WordPress que sur la page d'accueil statique : rien d'autre ne change.
   ========================================================================== */

.home {
	background: var(--ea-marron);
	color: #fff;
}

/* Les pilules noires translucides de la nav seraient invisibles. */
.home .ea-nav__list a:hover,
.home .ea-nav__list a:focus-visible,
.home .ea-nav__list .current-menu-item > a,
.home .ea-nav__list .current_page_item > a {
	background: rgba(255, 255, 255, .16);
}

/* Marron sur marron, le bouton disparaîtrait : il s'inverse. */
.home .ea-header__cta {
	background: var(--ea-cta-ink);
	color: var(--ea-marron);
}

.home .ea-burger span {
	background: #fff;
}

.home :focus-visible {
	outline-color: #fff;
}

/* ==========================================================================
   Animation d'introduction (?intro)
   ========================================================================== */

.ea-intro {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: grid;
	place-items: center;
	background: var(--ea-bg);
}

.ea-intro__logo {
	width: min(420px, 80vw);
	color: var(--ea-ink);
}

.ea-intro__mot {
	display: block;
	width: 100%;
	height: auto;
}

.ea-intro__baseline {
	display: block;
	width: 79.75%;
	height: auto;
	margin: -1.46% 0 0 11.43%;
}