/**
 * Section — Présentation de l'avocate.
 *
 * Géométrie relevée sur la maquette (cadre de 1920 px) :
 *   bande sombre    0 → 1920, hauteur 986
 *   photo           0 → 763   (39,74 %), pleine hauteur, arrondie à droite
 *   colonne texte   x 1000    (52,08 %), largeur 554
 *   cartes chiffres 237 × 109, écart 26
 */

.presentation {
	position: relative;
	z-index: 1; /* passe sous la carte des services, qui la recouvre */
	background-color: var(--anidjar-fond-sombre);
	color: var(--anidjar-texte-inverse);
}

/* La carte des services déborde de 77 px sur la bande sombre (1972 − 1895).
   Le débordement suit la largeur de l'écran mais ne dépasse jamais 77 px. */
.services:has(+ .presentation) {
	padding-bottom: 0;
}

.services + .presentation {
	margin-top: max(-77px, -4.0104vw);
}

.presentation__inner {
	display: grid;
	grid-template-columns: 39.7396% 12.3438% minmax(0, 554px) 1fr; /* 763 / 237 / 554 / reste */
	min-height: min(986px, 51.354vw);
}

/* ---------------------------------------------------------------------------
 * Photo
 * ------------------------------------------------------------------------ */

.presentation__media {
	grid-column: 1;
	grid-row: 1;
	align-self: stretch;
	overflow: hidden;
	border-radius: 0 var(--anidjar-rayon-carte) var(--anidjar-rayon-carte) 0;
}

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

/* ---------------------------------------------------------------------------
 * Contenu
 * ------------------------------------------------------------------------ */

.presentation__content {
	grid-column: 3;
	grid-row: 1;
	align-self: start;
	padding-block: clamp(3rem, 15.156vw, 291px) clamp(3rem, 13.542vw, 260px);
}

.presentation__eyebrow {
	margin: 0;
	color: var(--anidjar-texte-accent);
	font-size: var(--anidjar-fs-sm);
	line-height: normal; /* Figma : interligne normal, pas le 1,8 du corps de texte */
	letter-spacing: var(--anidjar-interlettre-capitales);
	text-transform: uppercase;
}

.presentation__title {
	margin: var(--anidjar-espace-md) 0 0;
	max-width: 372px;
	font-size: var(--anidjar-fs-lg);
}

.presentation__text {
	margin-top: var(--anidjar-espace-md);
}

.presentation__text p {
	margin: 0;
	font-size: var(--anidjar-fs-md);
	line-height: var(--anidjar-interligne-texte);
}

.presentation__text p + p {
	margin-top: var(--anidjar-espace-sm);
}

/* ---------------------------------------------------------------------------
 * Chiffres clés
 * ------------------------------------------------------------------------ */

/* align-items par défaut (stretch) : les cartes d'une même ligne prennent la
   hauteur de la plus haute. C'est ce qui aligne la carte d'avis sur celle des
   chiffres, quelle que soit la hauteur du widget. */
.presentation__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	margin: 33px 0 0;
	padding: 0;
	list-style: none;
}

.presentation__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 237px;
	min-height: 109px;
	padding: var(--anidjar-espace-md) var(--anidjar-espace-sm);
	border-radius: var(--anidjar-rayon-carte);
	background-color: var(--anidjar-surface-carte);
	box-shadow: var(--anidjar-ombre-carte);
	color: var(--anidjar-texte);
	text-align: center;
}

.presentation__stat-value {
	font-size: var(--anidjar-fs-sm);
	font-weight: var(--anidjar-graisse-titre);
	line-height: var(--anidjar-interligne-titre);
	letter-spacing: var(--anidjar-interlettre-capitales);
	text-transform: uppercase;

	/* L'interlettrage ajoute une espace après la dernière lettre : on la retire
	   pour que le texte reste optiquement centré. */
	margin-right: calc(-1 * var(--anidjar-interlettre-capitales));
}

.presentation__stat-label {
	margin-top: 11px;
	font-size: 0.8125rem; /* 13px */
	font-weight: var(--anidjar-graisse-titre);
	line-height: var(--anidjar-interligne-titre);
}

/* ---------------------------------------------------------------------------
 * Carte d'avis Google (widget Trustindex)
 *
 * Le widget dessine sa propre carte : fond blanc, bordure 1px #d9d9d9, rayon
 * 12px et 20px de padding, portés par son `.ti-header`. On la désamorce pour
 * que ce soit notre <li> — donc la surface crème, l'arrondi et l'ombre de la
 * charte — qui fasse la carte. Ses règles étant en !important, les nôtres le
 * sont aussi ; la classe supplémentaire nous donne la spécificité qui tranche.
 * ------------------------------------------------------------------------ */

.presentation__stat--reviews .ti-widget.ti-goog > .ti-widget-container > .ti-header,
.presentation__stat--reviews .ti-widget.ti-goog .ti-header,
.presentation__stat--reviews .ti-widget.ti-goog a.ti-header:hover {
	padding: 0 !important;
	border-width: 0 !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	box-shadow: none !important;

	/* Le widget aligne son contenu à gauche ; les cartes de la ligne sont
	   centrées. */
	align-items: center !important;
	text-align: center !important;
}

/* Le widget occupe la carte sans jamais la déborder : sa largeur naturelle
   dépasse parfois les 237 px du gabarit. */
.presentation__stat--reviews .ti-widget,
.presentation__stat--reviews .ti-widget-container,
.presentation__stat--reviews .ti-header {
	max-width: 100% !important;
	margin: 0 !important;
}

/* ---------------------------------------------------------------------------
 * Mobile et tablette
 * ------------------------------------------------------------------------ */

@media (max-width: 900px) {
	.services:has(+ .presentation) {
		padding-bottom: clamp(3rem, 5vw, 6rem);
	}

	.services + .presentation {
		margin-top: 0;
	}

	.presentation__inner {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.presentation__media {
		grid-column: 1;
		grid-row: 1;
		aspect-ratio: 763 / 986;
		max-height: 70vh;
		border-radius: 0;
	}

	.presentation__content {
		grid-column: 1;
		grid-row: 2;
		padding: var(--anidjar-espace-2xl) var(--anidjar-gouttiere);
	}

	.presentation__title,
	.presentation__text {
		max-width: none;
	}

	.presentation__stat {
		flex: 1 1 180px;
		width: auto;
	}
}

/* ---------------------------------------------------------------------------
 * Variante claire — bloc dans le flux d'une page (« À propos »).
 *
 * Fond transparent (la page est blanche), texte sombre, photo contenue et
 * arrondie sur les quatre coins, layout à deux colonnes centré.
 * ------------------------------------------------------------------------ */

.presentation--light {
	background-color: transparent;
	color: var(--anidjar-texte);
}

.presentation--light .presentation__inner {
	grid-template-columns: minmax(0, 700px) minmax(0, 700px);
	justify-content: space-between;
	align-items: center;
	gap: clamp(2rem, 6.93vw, 133px); /* 945 − 812 */
	min-height: 0;
	box-sizing: border-box;
	max-width: 1499px; /* 252 → 1499 */
	margin-inline: auto;
	padding: clamp(2.5rem, 5vw, 96px) var(--anidjar-gouttiere) clamp(3rem, 6vw, 116px);
}

.presentation--light .presentation__media {
	grid-column: 1;
	align-self: stretch;
	aspect-ratio: 560 / 581;
	border-radius: var(--anidjar-rayon-carte); /* les quatre coins */
}

.presentation--light .presentation__content {
	grid-column: 2;
	padding-block: 0;
}

@media (max-width: 900px) {
	.presentation--light .presentation__inner {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		gap: var(--anidjar-espace-xl);
	}

	.presentation--light .presentation__media {
		grid-column: 1;
		max-width: 420px;
	}

	.presentation--light .presentation__content {
		grid-column: 1;
	}
}