/* G3 Theme — Pages classiques (page.php) — handoff page-legal.jsx (ContentPage)
   Title block + contenu en colonne centrée, sections numérotées (compteur CSS). */

/* ============================================================
   TITLE BLOCK
   ============================================================ */
.g3-page-head {
	border-top: 2px solid var(--g3-ink);
	padding: 88px 56px 64px;
}
.g3-page-h1 {
	font-family: var(--g3-font-display);
	font-size: clamp(46px, 9vw, 128px);
	line-height: 0.94;
	letter-spacing: -0.025em;
	color: var(--g3-ink);
	margin: 0;
	text-transform: uppercase;
}
.g3-page-intro {
	font-family: var(--g3-font-body);
	font-size: 19px;
	line-height: 1.6;
	color: var(--g3-ink-soft);
	margin: 36px 0 0;
	max-width: 760px;
}

/* ============================================================
   CONTENU — sections numérotées
   ============================================================ */
.g3-page-body-section {
	padding: 24px 0 110px;
}
.g3-page-body {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 56px;
	counter-reset: g3sec;
	font-family: var(--g3-font-body);
	font-size: 17.5px;
	line-height: 1.7;
	color: var(--g3-ink);
}
.g3-page-body h2 {
	counter-increment: g3sec;
	border-top: 2px solid var(--g3-ink);
	padding-top: 36px;
	margin: 56px 0 18px;
	font-family: var(--g3-font-display);
	font-size: clamp(28px, 5vw, 38px);
	line-height: 1.02;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--g3-ink);
}
.g3-page-body h2::before {
	content: counter(g3sec, decimal-leading-zero);
	display: block;
	font-family: var(--g3-font-display);
	font-size: 40px;
	line-height: 0.9;
	letter-spacing: -0.02em;
	color: var(--g3-accent);
	margin-bottom: 10px;
}
.g3-page-body > h2:first-child {
	margin-top: 0;
}
.g3-page-body h3 {
	font-family: var(--g3-font-display);
	font-size: 24px;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	margin: 36px 0 14px;
	color: var(--g3-ink);
}
.g3-page-body p {
	margin: 0 0 18px;
}
.g3-page-body a {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--g3-accent);
	text-underline-offset: 2px;
}
.g3-page-body strong {
	font-weight: 700;
}
.g3-page-body em {
	font-style: italic;
}
.g3-page-body ul,
.g3-page-body ol {
	margin: 0 0 18px;
	padding-left: 1.4em;
}
.g3-page-body li {
	margin: 0 0 8px;
}
.g3-page-body blockquote {
	margin: 36px 0;
	padding: 18px 0 18px 24px;
	border-left: 4px solid var(--g3-accent);
	font-size: 21px;
	line-height: 1.4;
	color: var(--g3-ink);
}
.g3-page-body img {
	max-width: 100%;
	height: auto;
}

/* ============================================================
   BLOC CONTACT (shortcode [g3-contact-form])
   ============================================================
   Plus de formulaire : une adresse et un lien mailto. */
.g3-contact-direct {
	margin: 48px 0 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 18px;
}

/* Sélecteur volontairement plus spécifique que la règle de couleur des liens du
   corps de page, sinon le libellé sort dans la couleur d'accent sur un fond de
   la même couleur, donc invisible. */
.g3-contact-direct a.g3-contact-direct__mail {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--g3-accent);
	color: var(--g3-paper);
	padding: 18px 32px;
	border: var(--g3-border-medium);
	border-radius: 0;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none;
	box-shadow: var(--g3-shadow-6);
	min-height: 44px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.g3-contact-direct a.g3-contact-direct__mail:hover {
	transform: translate(-2px, -2px);
	box-shadow: var(--g3-shadow-8);
}

.g3-contact-direct__icon {
	display: inline-flex;
}

.g3-contact-direct__note {
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
	opacity: 0.75;
}

@media (max-width: 720px) {
	.g3-contact-direct a.g3-contact-direct__mail {
		font-size: 16px;
		padding: 16px 22px;
	}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 760px) {
	.g3-page-head {
		padding: 52px 20px 40px;
	}
	.g3-page-h1 {
		font-size: clamp(46px, 14vw, 78px);
	}
	.g3-page-intro {
		font-size: 16px;
		margin-top: 24px;
	}
	.g3-page-body {
		padding: 0 20px;
	}
	.g3-page-body h2 {
		margin: 40px 0 16px;
	}
	.g3-page-body h2::before {
		font-size: 32px;
	}
	.g3-contact-form {
		padding: 24px 20px;
	}
}