/**
 * Pages (légal, honoraires, contact, à propos).
 *
 * Géométrie relevée sur les maquettes « Legal » et « À propos » (cadre 1920) :
 *   hero     eyebrow y 308 x 243, titre y 350 (64px) x 240, filet y 486 (246→1492)
 *   décor    courbe optionnelle, x 183 y −479, 1856 × 1078 (À propos)
 *   contenu  colonne étroite centrée ~846 (légal), ou bloc présentation (à propos)
 */

.page {
	background-color: var(--anidjar-fond);
}

/* Variante fond blanc (page « À propos »). */
.page--white {
	background-color: var(--anidjar-blanc);
}

/* ---------------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------------ */

.page-hero {
	position: relative;
	overflow-x: clip;

	/* Espace après le filet, avant la section suivante. Le filet est calé sur ce
	   padding pour rester au bas du contenu du hero. */
	padding-bottom: clamp(2.5rem, 4vw, 77px);
}

/* Avec une image, le hero doit la contenir : sinon la courbe descend sur le
   contenu et le texte passe par-dessus. Bas du décor : −24.9479vw + 56.15vw. */
.page-hero--decor {
	min-height: 31.2vw;
}

/* Empilement : filet et filigrane derrière (0), image décorative au-dessus (1)
   pour la recouvrir, texte tout en haut (2) pour rester lisible. */
.page-hero__decor {
	position: absolute;
	top: -24.9479vw; /* −479 / 1920 */
	left: 9.5313vw; /* 183 / 1920 */
	z-index: 1;
	width: 96.6667vw; /* 1856 / 1920 */
	aspect-ratio: 2102 / 1221;
	pointer-events: none;
}

/* Filet du bas.
   - Avec image (.page-hero--decor) : aligné à gauche avec le texte, et passe
     SOUS l'image (z-index inférieur au décor), donc masqué là où elle est opaque.
   - Sans image : centré dans la page. */
/* Dans le flux, juste sous le contenu : il ne doit PAS suivre le bas du hero,
   que le min-height allonge pour contenir la courbe. Le padding-bottom du hero
   fournit l'espace sous le filet, comme avant. */
.page-hero__line {
	display: block;
	position: relative;
	z-index: 0;
	height: 1px;
	background-color: var(--anidjar-filet-fonce);

	/* Défaut (sans image) : centré. */
	width: min(1246px, 100% - 2 * var(--anidjar-gouttiere)); /* 246 → 1492 = 1246 */
	margin-inline: auto;
}

.page-hero--decor .page-hero__line {
	width: auto;
	margin-left: clamp(var(--anidjar-gouttiere), 12.5vw, 240px); /* aligné au texte */
	margin-right: var(--anidjar-gouttiere);
}

.page-hero__decor-svg {
	display: block;
	width: 100%;
	height: 100%;
}

.page-hero__watermark {
	position: absolute;
	top: 7.29vw; /* 140 / 1920 */
	left: -11.4063vw; /* −219 / 1920 */
	z-index: 0;
	width: 38.75vw; /* 744 / 1920 */
	color: var(--anidjar-or);
	opacity: 0.1;
	pointer-events: none;
}

.page-hero__watermark svg {
	display: block;
	width: 100%;
	height: auto;
}

.page-hero__inner {
	position: relative;
	z-index: 2; /* texte au-dessus du décor, pour rester lisible */
	box-sizing: border-box;
	padding-left: clamp(var(--anidjar-gouttiere), 12.5vw, 240px); /* 240 / 1920 */
	padding-right: var(--anidjar-gouttiere);
	padding-top: clamp(7rem, 16.04vw, 308px);
	padding-bottom: clamp(2rem, 4.9vw, 94px); /* jusqu'au filet, à 486 */
}

/* Sans image : le filet est centré ; on centre aussi le bloc de texte à la même
   largeur, pour que texte et filet partagent leur bord gauche. */
.page-hero:not(.page-hero--decor) .page-hero__inner {
	max-width: min(1246px, 100% - 2 * var(--anidjar-gouttiere));
	margin-inline: auto;
	padding-inline: 0;
}

/* Surtitre en <h1> : police et graisse redéclarées pour neutraliser la règle
   `h1, h2, h3` de style.css (police titre, graisse 700), qui changerait sinon
   son rendu. L'interligne est déjà fixé plus bas. */
.page-hero__eyebrow {
	margin: 0;
	color: var(--anidjar-texte-accent);
	font-family: var(--anidjar-police-texte);
	font-size: var(--anidjar-fs-sm);
	font-weight: var(--anidjar-graisse-texte);
	line-height: normal;
	letter-spacing: var(--anidjar-interlettre-capitales);
	text-transform: uppercase;
}

.page-hero__title {
	margin: 19px 0 0;
	max-width: 1004px;
	font-size: var(--anidjar-fs-xl);
	line-height: 1.21875;
}

/* Le filet est déjà centré dans la page (règle de base) ; rien de spécifique
   pour les pages étroites. */

/* ---------------------------------------------------------------------------
 * Corps
 * ------------------------------------------------------------------------ */

.page-body {
	position: relative;
	z-index: 2; /* au-dessus du décor du hero, qui déborde vers le bas */
	box-sizing: border-box;
	max-width: 1492px;
	margin-inline: auto;
	padding-inline: var(--anidjar-gouttiere);
	padding-bottom: clamp(3rem, 6vw, 116px);
}

/* Colonne de lecture centrée pour les pages légales et honoraires. */
.page-body--narrow .page-body__inner {
	max-width: 846px;
	margin-inline: auto;
}

/* ---------------------------------------------------------------------------
 * Bloc contact — deux colonnes (formulaire + informations)
 * ------------------------------------------------------------------------ */

.contact {
	position: relative;
	z-index: 2; /* au-dessus du décor du hero, qui déborde vers le bas */
}

.contact__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: clamp(2rem, 4.5vw, 86px);
	box-sizing: border-box;
	max-width: 1492px;
	margin-inline: auto;
	padding: clamp(1rem, 2vw, 40px) var(--anidjar-gouttiere) clamp(3rem, 6vw, 116px);
}

.contact__form {
	min-width: 0;
}

.contact__info {
	min-width: 0;
	padding: var(--anidjar-espace-xl);
	border-radius: var(--anidjar-rayon-carte);
	background-color: var(--anidjar-surface-carte);
	box-shadow: var(--anidjar-ombre-carte);
	align-self: start;
}

.contact__info-title {
	margin: 0 0 var(--anidjar-espace-md);
	font-size: var(--anidjar-fs-lg);
}

/* Appel direct + WhatsApp : rangée de boutons pleine largeur, icône + libellé. */
.contact__pills {
	flex-direction: column;
	align-items: stretch;
	gap: var(--anidjar-espace-sm);
	margin-bottom: var(--anidjar-espace-lg);
}

.contact__pills .contact-pill {
	gap: var(--anidjar-espace-md);
	padding: 6px;
	border-radius: var(--anidjar-rayon-pilule);
	background-color: var(--anidjar-creme);
	transition: background-color var(--anidjar-transition);
}

.contact__pills .contact-pill:hover {
	background-color: var(--anidjar-ivoire);
}

.contact__pills .contact-pill__label {
	font-size: var(--anidjar-fs-md);
}

.contact__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact__item {
	padding-block: var(--anidjar-espace-md);
	border-top: 1px solid var(--anidjar-filet-fonce);
}

.contact__item:first-child {
	border-top: 0;
	padding-top: 0;
}

.contact__label {
	display: block;
	margin-bottom: var(--anidjar-espace-3xs);
	color: var(--anidjar-texte-accent);
	font-size: var(--anidjar-fs-xs);
	letter-spacing: var(--anidjar-interlettre-capitales);
	text-transform: uppercase;
}

.contact__value {
	color: var(--anidjar-texte);
	font-size: var(--anidjar-fs-sm);
	line-height: var(--anidjar-interligne-texte);
	text-decoration: none;
}

a.contact__value:hover,
a.contact__value:focus {
	color: var(--anidjar-texte-accent);
}

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

@media (max-width: 900px) {
	.page-hero__inner {
		padding-inline: var(--anidjar-gouttiere);
	}

	/* Le filet doit suivre le contenu : celui-ci retombe à la gouttière en
	   mobile, alors que le filet gardait son retrait de 12.5vw (≈112px à 900),
	   d'où un titre désaligné avec la barre. */
	.page-hero--decor .page-hero__line {
		margin-left: var(--anidjar-gouttiere);
	}

	.contact__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--anidjar-espace-xl);
	}

	.page-hero__title {
		max-width: none;
	}

	/* Décor mobile : 140vw × 1221/2102 = 81.3vw de haut, à partir de −30vw. */
	.page-hero--decor {
		min-height: 51.3vw;
	}

	.page-hero__decor {
		top: -30vw;
		left: 0;
		width: 140vw;
	}
}

/* ---------------------------------------------------------------------------
 * Carte de téléchargement (modèle de document)
 * ------------------------------------------------------------------------ */

.document-download {
	box-sizing: border-box;
	max-width: 1492px;
	margin-inline: auto;
	padding: 0 var(--anidjar-gouttiere) clamp(3rem, 6vw, 116px);
}

.document-download__card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--anidjar-espace-lg);
	max-width: 846px;
	margin-inline: auto;
	padding: var(--anidjar-espace-xl);
	border-radius: var(--anidjar-rayon-carte);
	background-color: var(--anidjar-surface-carte);
	box-shadow: var(--anidjar-ombre-carte);
}

.document-download__label {
	margin: 0;
	color: var(--anidjar-texte-accent);
	font-size: var(--anidjar-fs-xs);
	letter-spacing: var(--anidjar-interlettre-capitales);
	text-transform: uppercase;
}

.document-download__name {
	margin: var(--anidjar-espace-2xs) 0 0;
	font-family: var(--anidjar-police-titre);
	font-size: var(--anidjar-fs-md);
	font-weight: var(--anidjar-graisse-titre);
}

.document-download__meta {
	display: inline-block;
	margin-left: var(--anidjar-espace-2xs);
	padding: 2px 8px;
	border-radius: 6px;
	background-color: var(--anidjar-creme);
	color: var(--anidjar-texte);
	font-family: var(--anidjar-police-texte);
	font-size: 0.75rem;
	font-weight: var(--anidjar-graisse-texte);
	letter-spacing: 0.08em;
	vertical-align: middle;
}

@media (max-width: 600px) {
	.document-download__card {
		flex-direction: column;
		align-items: flex-start;
	}
}