/* Gabarit Expertise — valeurs dérivées des nodes Figma (référence 1728).
   Sections : hero 88→669, situation 669→1148, grille 1148→1874,
   bandeau+notaire 1970→2831, piliers 2976→3223, publications 3387→3829,
   fiches 3972→4599, autres expertises 4723→5138. */

.expertise > section {
	position: relative;
}

/* ─────────────────────── Hero — y 88 → 669 (581) ────────────────────────── */

/* Variables propres à chaque page (posées en ligne depuis la metabox) :
   --split    frontière de colonne (779 ou 854 selon la maquette)
   --hero-h   hauteur du hero
   --hero-pad retrait haut du bloc de titre
   --sit-h    hauteur de la section situation
   --intro-w  largeur du chapô
   --band-gap écart entre la grille et le bandeau photo */
.exp-hero {
	display: grid;
	grid-template-columns: var(--split, 45.08102%) 1fr;
	min-height: var(--hero-h, clamp(22rem, 33.6227vw, 36.3125rem)); /* 581 */
}

.exp-hero__media {
	position: relative;
	overflow: hidden;
}

.exp-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover; /* asset déjà cadré sur la fenêtre 779×581 du node */
}

/* Deux bandes verticales posées sur la photo (nodes 327:2242 et 327:2243). */
.exp-hero__media::before,
.exp-hero__media::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
}

.exp-hero__media::before {
	left: 0;
	width: 20.28241%; /* 158 / 779 */
	background: rgba(48, 112, 171, 0.6);
}

.exp-hero__media::after {
	left: 8.98588%;  /* 70 / 779 */
	width: 22.85006%; /* 178 / 779 */
	background: var(--c-deep);
}

.exp-hero__body {
	padding-top: var(--hero-pad, min(8.10185vw, 8.75rem)); /* 140 */
	box-shadow: inset var(--rule) 0 0 var(--c-line); /* filet vertical x=779 */
}

.exp-hero__title {
	margin-left: clamp(1.25rem, 7.2338vw, 7.8125rem);  /* 125 */
	max-width: min(45.77546vw, 49.4375rem);            /* 791 */
	font-family: var(--ff-display);
	font-weight: 400;
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	color: var(--c-ink);
	/* « d'investissement » dépasse la largeur d'un mobile : on autorise la
	   césure plutôt qu'un débordement. */
	hyphens: auto;
	overflow-wrap: break-word;
}

.exp-hero__intro {
	margin-top: var(--intro-gap, min(1.33102vw, 1.4375rem)); /* 23 : 409 − (228+158) */
	margin-left: clamp(1.25rem, 7.5232vw, 8.125rem);   /* 130 */
	max-width: var(--intro-w, min(26.21528vw, 28.3125rem)); /* 453 */
}

/* ──────────────────── Situation — y 669 → 1148 (479) ───────────────────── */

.exp-situation {
	display: grid;
	grid-template-columns: var(--split, 45.08102%) 1fr;
	min-height: var(--sit-h, clamp(18rem, 27.7199vw, 29.9375rem)); /* 479 */
}

.exp-situation__body {
	padding-top: clamp(2.5rem, 4.8611vw, 5.25rem); /* 84 */
	/* Sans effet tant que le contenu tient dans le « min-height ». */
	padding-bottom: clamp(2.5rem, 4.8611vw, 5.25rem);
	box-shadow: inset calc(-1 * var(--rule)) 0 0 var(--c-line);
}

.exp-situation__title {
	margin-left: clamp(1.25rem, 2.7199vw, 2.9375rem); /* 47 */
	max-width: min(33.56481vw, 36.25rem);            /* 580 */
}

/* Les paragraphes du node sont espacés de 30 : Patrimoine 30+60+30+30 + 3×30
   = 240, Entreprise 4×60 + 3×30 = 330. Les deux hauteurs tombent juste. */
.exp-situation__list {
	display: grid;
	row-gap: clamp(1rem, 1.7361vw, 1.875rem); /* 30 */
	margin-top: clamp(1rem, 1.2731vw, 1.375rem); /* 22 : 859 − (753+84) */
	margin-left: var(--gutter-text); /* 50 */
	max-width: var(--check-w, min(40.50926vw, 43.75rem)); /* 700 — le node fait 649, DIN Pro y casserait la 1re ligne */
}

.exp-situation__item {
	display: grid;
	grid-template-columns: 20px 1fr;
	align-items: start;
	column-gap: 13px; /* 83 − (50+20) */
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-ink);
}

.exp-situation__check {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 5px; /* alignée sur la première ligne du libellé */
	color: var(--c-accent);
}

.exp-situation__check svg {
	width: 100%;
	height: 100%;
}

.exp-situation__media {
	position: relative;
	overflow: hidden;
}

.exp-situation__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ─────────────────────── Grille — y 1148 → 1874 (726) ──────────────────── */

.exp-grid {
	display: grid;
	grid-template-columns: 39.29398% 43.57639% 17.12963%; /* 679 | 753 | 296 */
	grid-template-rows: var(--grid-rows, auto); /* rangées calibrées dans la maquette */
}

.exp-grid__badge {
	position: absolute;
	top: -15px; /* node y=1133, rangée à 1148 */
	left: 3.06713%; /* 53 */
	z-index: 2;
}

.exp-grid__cell {
	box-shadow: inset 0 var(--rule) 0 var(--c-line);
	padding-top: var(--grid-pad, min(3.24074vw, 3.5rem)); /* 56 : 1204 − 1148 */
}

.exp-grid__cell--a { padding-left: 7.80560%; }  /* 53 / 679 */
.exp-grid__cell--b { padding-left: 6.63992%; box-shadow: inset var(--rule) 0 0 var(--c-line), inset 0 var(--rule) 0 var(--c-line); } /* 50 / 753 */

.exp-grid__deco {
	box-shadow: inset var(--rule) 0 0 var(--c-line), inset 0 var(--rule) 0 var(--c-line);
}

/* La colonne passe par une variable et non par un style en ligne : sinon la
   bascule mobile en une colonne ne pouvait pas s'appliquer. */
.exp-grid__cell,
.exp-grid__deco {
	grid-column: var(--col, auto);
}

.exp-grid__deco--deep { background: var(--c-deep); }
.exp-grid__deco--accent { background: var(--c-accent); }

.exp-grid__title {
	font-size: var(--fs-card);
	line-height: var(--lh-card);
	letter-spacing: var(--ls-card);
	color: var(--c-ink);
}

.exp-grid__text {
	margin-top: clamp(0.5rem, 0.9259vw, 1rem); /* 16 : 49 − 33 */
	max-width: min(31.8287vw, 34.375rem); /* 550 — les nodes vont de 462 à 549 */
}

/* Le dernier filet horizontal ferme la grille. */
.exp-grid::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--rule);
	background: var(--c-line);
	z-index: 2;
}

/* ──────────── Bandeau + notaire référent — y 1970 → 2831 (861) ─────────── */

.exp-notaire {
	margin-top: var(--band-gap, min(5.55556vw, 6rem)); /* 96 : 1970 − 1874 */
	min-height: clamp(30rem, 49.8264vw, 53.8125rem); /* 861 */
}

.exp-notaire__band {
	position: absolute;
	top: 0;
	left: 2.89352%;  /* 50 */
	width: 94.21296%; /* 1628 */
	aspect-ratio: 1628 / 637;
	overflow: hidden;
}

.exp-notaire__band img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.exp-notaire__portrait {
	position: absolute;
	top: 47.15447%;   /* 406 / 861 */
	left: 29.80324%;  /* 515 */
	width: 20.19676%; /* 349 */
	aspect-ratio: 349 / 455;
	overflow: hidden;
	z-index: 2;
}

.exp-notaire__portrait img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Aplat accent + photo à 20 % (node 327:2429), débordant à droite. */
.exp-notaire__aside {
	position: absolute;
	top: 47.15447%;
	left: 50%;        /* 864 */
	right: 0;
	/* Hauteur tirée de la LARGEUR, comme celle du portrait (« aspect-ratio »
	   sur une largeur en %), et non des 52,84 % de la hauteur de section : cette
	   hauteur vient d'un « min-height » en vw, donc barre de défilement comprise,
	   quand les % de largeur l'excluent. Les deux bases divergeaient de la
	   largeur de la barre et le bas du portrait ne tombait plus sur celui de
	   l'aplat. 864 × 455 = les dimensions de la maquette. */
	aspect-ratio: 864 / 455;
	background: var(--c-accent);
	/* Le portrait s'arrête pile sur le bord gauche de cet aplat (515 + 349 = 864
	   = 50 %). Le calcul tombe juste mais la trame d'affichage laisse un liseré
	   clair d'un pixel à la jointure. Cette ombre portée peint 1 px de plus vers
	   la gauche SANS toucher la boîte — donc sans déplacer la hauteur déduite du
	   ratio. Elle passe sous le portrait, qui est au-dessus. */
	box-shadow: -1px 0 0 0 var(--c-accent);
	overflow: hidden;
}

.exp-notaire__aside img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.2;
}

.exp-notaire__info {
	position: absolute;
	top: 79.67480%;  /* 686 : 2656 − 1970 */
	left: 2.89352%;  /* 50 */
	width: 24.30556%; /* 420 */
	z-index: 2;
}

.exp-notaire__name {
	margin-top: clamp(0.5rem, 0.9259vw, 1rem); /* 16 : 2703 − (2656+31) */
	font-size: var(--fs-card);
	line-height: var(--lh-card);
	letter-spacing: var(--ls-card);
	color: var(--c-ink);
}

.exp-notaire__role {
	margin-top: clamp(0.25rem, 0.2894vw, 0.3125rem); /* 5 : 2741 − (2703+33) */
	max-width: 374px;
}

/* ────────────────────── Piliers — y 2976 → 3223 (247) ─────────────────── */

.exp-pillars {
	margin-top: clamp(3.5rem, 8.3912vw, 9.0625rem); /* 145 : 2976 − 2831 */
}

.exp-pillars__title {
	max-width: 33.56481%; /* 580 */
	margin-inline: auto;
	text-align: center;
}

.exp-pillars__grid {
	display: grid;
	grid-template-columns: 36.28472% 28.06713% 35.64815%; /* filets à 627 et 1112 */
	margin-top: clamp(2rem, 3.1250vw, 3.375rem); /* 54 : 3114 − (2976+84) */
}

.exp-pillars__item {
	padding-inline: clamp(1rem, 2.0255vw, 2.1875rem);
	text-align: center;
}

/* Les trois blocs ne sont pas centrés dans leur colonne : la maquette les
   place sur 340, 865 et 1382. On décale chacun de l'écart mesuré. */
.exp-pillars__item:nth-child(1) { padding-left: 14.03509%; }  /* 88 sur 627 → centre 340 */
.exp-pillars__item:nth-child(2) { padding-right: 9.07216%; }  /* 44 sur 485 → centre 865 */
.exp-pillars__item:nth-child(3) { padding-right: 18.01948%; } /* 111 sur 616 → centre 1382 */

.exp-pillars__item + .exp-pillars__item {
	box-shadow: inset var(--rule) 0 0 var(--c-line);
}

.exp-pillars__item-title {
	font-size: var(--fs-card);
	line-height: var(--lh-card);
	letter-spacing: var(--ls-card);
	color: var(--c-ink);
}

.exp-pillars__item-text {
	margin-top: clamp(0.5rem, 0.9259vw, 1rem); /* 16 : 3163 − (3114+33) */
}

/* ─────────────────── Publications — y 3387 → 3829 (442) ────────────────── */

.exp-publications {
	margin-top: clamp(3.5rem, 9.4907vw, 10.25rem); /* 164 : 3387 − 3223 */
	text-align: center;
}

.exp-publications__grid {
	display: grid;
	grid-template-columns:
		18.40278%  /* 318 */
		20.25463% 1.21528%
		20.25463% 1.21528%
		20.25463%
		18.40278%;
	margin-top: clamp(1.5rem, 2.5463vw, 2.75rem); /* 44 : 3442 − (3387+11) */
	text-align: initial;
}

.exp-publications__card:nth-of-type(1) { grid-column: 2; }
.exp-publications__card:nth-of-type(2) { grid-column: 4; }
.exp-publications__card:nth-of-type(3) { grid-column: 6; }

/* ────────────────────── Fiches — y 3972 → 4599 (627) ──────────────────── */

.exp-fiches {
	margin-top: clamp(3.5rem, 8.2755vw, 8.9375rem); /* 143 : 3972 − 3829 */
	text-align: center;
}

.exp-fiches__grid {
	display: grid;
	grid-template-columns: 48.46437% 48.46437%; /* 789 sur une boîte de 1628 */
	justify-content: center;
	column-gap: 3.07125%; /* 50 */
	margin-top: clamp(1.25rem, 1.9676vw, 2.125rem); /* 34 : 4017 − (3972+11) */
	padding-inline: 2.89352%;
	row-gap: clamp(1.25rem, 1.9676vw, 2.125rem); /* 34 : pas de 154 − élément de 120 */
	text-align: initial;
}

/* Une seule fiche : la maquette la centre (boîte 470→1259). */
.exp-fiches__grid--single {
	grid-template-columns: 48.46437%;
}

/* ──────────── Autres expertises — y 4723 → 5138 (415) ─────────────────── */

.exp-more {
	display: grid;
	grid-template-columns: 24.30556% 20.19676% 55.49769%; /* 420 | 349 | 959 */
	margin-top: var(--more-gap, min(9.49074vw, 10.25rem)); /* 164 par défaut */
	min-height: clamp(20rem, 24.0162vw, 25.9375rem); /* 415 */
	box-shadow: inset 0 var(--rule) 0 var(--c-line);
}

.exp-more__intro {
	grid-column: 1;
	position: relative;
	padding-top: clamp(2rem, 2.8356vw, 3.0625rem); /* 49 : 4772 − 4723 */
	padding-left: 11.90476%; /* 50 / 420 */
}

.exp-more__text {
	margin-top: clamp(1rem, 1.9097vw, 2.0625rem); /* 33 : 4816 − (4772+11) */
	max-width: 374px;
}

.exp-more__cta {
	display: flex;
	margin-top: clamp(1.5rem, 10.1852vw, 11rem); /* 176 : 5082 − (4816+90) */
}

.exp-more__media {
	grid-column: 2;
	position: relative;
	overflow: hidden;
	box-shadow: inset calc(-1 * var(--rule)) 0 0 var(--c-line);
}

.exp-more__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.exp-more__list {
	grid-column: 3;
	padding-top: clamp(2rem, 2.8356vw, 3.0625rem); /* 49 */
}

.exp-more__eyebrow {
	margin-left: 7.29927%; /* 70 : 839 − 769, sur une colonne de 959 */
}

.exp-more__items {
	margin-top: clamp(0.75rem, 1.2731vw, 1.375rem); /* 22 : 4805 − (4772+11) */
}

.exp-more__item {
	position: relative;
}

.exp-more__item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 7.29927%; /* filets à x=839 */
	right: 0;
	height: var(--rule);
	background: var(--c-line);
	transition: left var(--t-fast);
}

/* La ligne survolée s'étend jusqu'au filet vertical (x=769). */
.exp-more__item:hover::before,
.exp-more__item:hover + .exp-more__item::before {
	left: 0;
}

.exp-more__link {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 1.2731vw, 1.375rem); /* 22 */
	min-height: clamp(3.5rem, 4.8032vw, 5.1875rem); /* 83 */
	padding-left: 7.29927%;
	padding-right: 3.12826%; /* 30 */
	font-size: var(--fs-list);
	line-height: var(--lh-list);
	letter-spacing: var(--ls-list);
	color: var(--c-ink);
	transition: background-color var(--t), color var(--t), padding-left var(--t);
}

.exp-more__item:hover .exp-more__link {
	background: var(--c-accent);
	color: var(--c-light);
	padding-left: 0;
}

.exp-more__label {
	padding-left: 0;
	transition: padding-left var(--t);
}

.exp-more__item:hover .exp-more__label {
	padding-left: 7.29927%;
}

/* Ici la flèche suit le libellé (node x=1059), contrairement à l'accueil. */
.exp-more__arrow {
	flex: none;
	display: grid;
	place-items: center;
	width: var(--dot);
	height: var(--dot);
	border: var(--rule) solid currentColor;
	border-radius: 50%;
	opacity: 0;
	transition: opacity var(--t);
}

.exp-more__arrow svg {
	width: 12px;
	height: 24px;
}

.exp-more__item:hover .exp-more__arrow {
	opacity: 1;
}

/* ───────────────────────────── Réagencements ──────────────────────────── */

@media (max-width: 1199px) {
	/* Sur-titres et titres sans gouttière propre (1 px de marge à 375). */
	.exp-pillars__title,
	.exp-publications > .eyebrow,
	.exp-fiches > .eyebrow {
		padding-inline: var(--gutter-text);
	}

	.exp-hero,
	.exp-situation,
	.exp-grid,
	.exp-more {
		grid-template-columns: 1fr;
	}

	.exp-grid__cell,
	.exp-grid__deco {
		grid-column: auto;
	}

	.exp-hero { min-height: 0; }
	.exp-hero__media { order: -1; aspect-ratio: 4 / 3; }

	/* Les deux bandes de couleur sont un dispositif desktop : empilées, elles
	   mangeaient un tiers de la largeur par-dessus la photo. */
	.exp-hero__media::before,
	.exp-hero__media::after {
		display: none;
	}
	.exp-hero__body { box-shadow: none; padding: clamp(2.5rem, 6vw, 4rem) var(--gutter-text); 	/* Le padding bas s'ajoutait à celui de la section suivante : 81 px de blanc
	   entre le chapô et le titre d'après. La section suivante suffit. */
	padding-bottom: 0;
}
	.exp-hero__title,
	.exp-hero__intro { margin-left: 0; max-width: 34ch; }

	.exp-situation { min-height: 0; }
	.exp-situation__media { aspect-ratio: 16 / 9; }
	.exp-situation__body { box-shadow: none; padding: clamp(2.5rem, 6vw, 4rem) var(--gutter-text); }
	.exp-situation__title,
	.exp-situation__list { margin-left: 0; max-width: 46ch; }

	.exp-grid__badge { position: static; margin: 0 var(--gutter-text) clamp(1rem, 3vw, 1.5rem); }
	/* Le padding vertical de la maquette vaut 3,24 vw, soit 13 px en mobile — et
	   uniquement en haut. Le texte arrivait donc contre le filet de la cellule
	   suivante. On rétablit une respiration égale au-dessus et au-dessous. */
	.exp-grid__cell {
		padding-inline: var(--gutter-text);
		padding-block: clamp(1.75rem, 6vw, 2.5rem);
	}
	/* Une colonne : sans remise à zéro, les grid-column créeraient des
	   colonnes implicites et la page déborderait. */
	.exp-grid { grid-template-rows: auto; }
	.exp-grid__cell--a,
	.exp-grid__cell--b { padding-left: var(--gutter-text); box-shadow: inset 0 var(--rule) 0 var(--c-line); }
	.exp-grid__deco,
	.exp-grid__cell--vide { display: none; }

	/* Le plafond de lecture est exprimé en « vw » pour la largeur de référence
	   (31,83 vw = 550 px à 1728) : en mobile il tombait à 124 px et le texte se
	   cassait après trois mots. La cellule a déjà ses gouttières. */
	.exp-grid__text { max-width: none; }

	.exp-notaire { min-height: 0; display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
	.exp-notaire__band,
	.exp-notaire__portrait,
	.exp-notaire__aside,
	.exp-notaire__info { position: static; width: auto; height: auto; inset: auto; }
	.exp-notaire__aside { display: none; }
	/* Portrait et informations centrés : empilés dans une colonne, le calage à
	   gauche de la composition desktop n'a plus de sens. */
	.exp-notaire__portrait { width: 60%; max-width: 349px; margin-inline: auto; }
	.exp-notaire__info { margin-inline: var(--gutter-text); text-align: center; }
	/* La pastille est en « display: block; width: fit-content » : le centrage du
	   texte ne la déplace pas, il faut centrer sa boîte. */
	.exp-notaire__info .badge { margin-inline: auto; }

	/* « text-align: center » centre le texte, pas une boîte à « max-width ». */
	.exp-notaire__role { margin-inline: auto; }

	.exp-pillars__title { max-width: 46ch; }
	.exp-pillars__grid { grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 2.5rem); padding-inline: var(--gutter-text); }
	.exp-pillars__item + .exp-pillars__item { box-shadow: inset 0 var(--rule) 0 var(--c-line); padding-top: clamp(1.5rem, 4vw, 2.5rem); }

	/* En colonne unique, le centrage et les paddings asymétriques — qui servent
	   à caler chaque pilier sur son centre de maquette en trois colonnes —
	   décalent le texte et jurent avec le reste de la page, aligné à gauche. */
	.exp-pillars__item,
	.exp-pillars__item:nth-child(1),
	.exp-pillars__item:nth-child(2),
	.exp-pillars__item:nth-child(3) {
		padding-inline: 0;
		text-align: left;
	}

	.exp-publications__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: clamp(1.5rem, 3vw, 2.5rem);
		padding-inline: var(--gutter-text);
	}
	.exp-publications__card:nth-of-type(1),
	.exp-publications__card:nth-of-type(2),
	.exp-publications__card:nth-of-type(3) { grid-column: auto; }

	/* En pourcentage la gouttière tombait à 11 px à 375 : on passe au pas fixe. */
	.exp-fiches__grid { grid-template-columns: 1fr; padding-inline: var(--gutter-text); }

	.exp-more { min-height: 0; }
	.exp-more__intro,
	.exp-more__media,
	.exp-more__list { grid-column: auto; }
	/* Sans padding bas, le lien « Nous contacter » venait coller la photo
	   suivante (écart mesuré : 0 px). */
	.exp-more__intro { padding: clamp(2.5rem, 6vw, 4rem) var(--gutter-text) clamp(2rem, 5vw, 3rem); }
	.exp-more__cta { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
	.exp-more__media { aspect-ratio: 16 / 9; box-shadow: none; }
	.exp-more__list { padding-top: clamp(2rem, 5vw, 3rem); }
	.exp-more__eyebrow { margin-left: var(--gutter-text); }
	.exp-more__link { padding-inline: var(--gutter-text); }
	.exp-more__item::before { left: 0; }
	.exp-more__item:hover .exp-more__link { padding-left: var(--gutter-text); }
	.exp-more__item:hover .exp-more__label { padding-left: 0; }
}

@media (max-width: 767px) {
	.exp-publications__grid { grid-template-columns: 1fr; }

	.exp-grid__cell,
	.exp-grid__cell--a,
	.exp-grid__cell--b {
		padding-left: 1.75rem;
		padding-right: 1.75rem;
	}

	.exp-pillars__title {
		text-align: left;
	}

	.exp-more__intro {
		padding-bottom: clamp(3.25rem, 13vw, 4.5rem);
	}
}