:root {
	--p-title-text-color: #303030;
	--form-label-color: #683714;
	--form-text-border-color: #683714;
	--form-checkbox-border-color: #683714;
	--form-checkbox-checked-color: #683714;
	--main-menu-gpp-link-color-active: #683714;
	--main-menu-gpp-link-color-hover: #683714;
	--main-menu-gpp-link-border-color-active: #683714;
}

/* ===== Title-text: main h1 = gold; sections/body = dark ===== */

.p-title-text__title {
	color: #303030;
}

.p-title-text h1.p-title-text__title {
	color: #F2A900;
}

.p-title-text__subtitle {
	color: #303030;
}

.p-title-text__subtitle p {
	margin: 0 0 1rem;
}

/* Large centered banner headline, gold + brown.
   Front page (home) and the lead thank-you page (body class added in
   gpp_promo_theme_preprocess_html) share the same treatment. */

body.is-frontpage .p-title-text,
body.is-lead-thankyou .p-title-text {
	text-align: center;
}

body.is-frontpage .p-title-text .p-title-text__title,
body.is-frontpage .p-title-text .p-title-text__subtitle,
body.is-lead-thankyou .p-title-text .p-title-text__title,
body.is-lead-thankyou .p-title-text .p-title-text__subtitle {
	font-size: var(--font-size-h1);
	font-weight: 700;
	line-height: 1.05;
	margin: 0;
}

body.is-frontpage .p-title-text .p-title-text__title p,
body.is-frontpage .p-title-text .p-title-text__subtitle p,
body.is-lead-thankyou .p-title-text .p-title-text__title p,
body.is-lead-thankyou .p-title-text .p-title-text__subtitle p {
	margin: 0;
}

body.is-frontpage .p-title-text .p-title-text__title,
body.is-lead-thankyou .p-title-text .p-title-text__title {
	color: #F2A900;
}

body.is-frontpage .p-title-text .p-title-text__subtitle,
body.is-lead-thankyou .p-title-text .p-title-text__subtitle {
	color: #683714;
	margin-bottom: 1rem;
}

body.is-frontpage .p-title-text .p-title-text__text,
body.is-lead-thankyou .p-title-text .p-title-text__text {
	color: #303030;
	font-size: 1rem;
}

/* ===== Primary buttons (banner CTA + lead Register) → promo brown ===== */

.button.button-primary,
.button-primary {
	background-color: #683714;
	border-color: #683714;
	color: #fff;
}

.button.button-primary:hover,
.button.button-primary:focus,
.button-primary:hover,
.button-primary:focus {
	background-color: rgb(86.8903225806, 45.9516129032, 16.7096774194);
	border-color: rgb(86.8903225806, 45.9516129032, 16.7096774194);
	color: #fff;
}

/* ===== Social "If you like it, share it on" ===== */

.p-social {
	text-align: center;
}

.p-social__content {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-align: center;
	align-items: center;
}

.p-social__logo {
	margin-bottom: 0.5rem;
}

.p-social__logo img {
	display: inline-block;
	height: 5rem;
	width: auto;
}

.p-social--text {
	color: #303030;
	font-weight: 700;
	font-size: 1.88rem;
	margin-bottom: 1rem;
}

.p-social--icons .a2a_kit {
	display: -ms-inline-flexbox;
	display: inline-flex;
	gap: 1rem;
	-ms-flex-pack: center;
	justify-content: center;
}

.p-social--icons a {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: #683714;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: center;
	justify-content: center;
	cursor: pointer;
}

.p-social--icons a img {
	width: 1.38rem;
	height: 1.38rem;
	filter: brightness(0) invert(1);
}

/* ===== Menu (all pages): items gold by default, brown when active =====
   The active/hover item uses --main-menu-gpp-link-color-active (= brown, in :root):
   the base selector .main-menu-gpp__link.is-active has higher specificity than this
   default, so it wins on its own — no per-item override needed. */

.main-menu-gpp__link {
	color: #F2A900;
}

/* ===== lead/register ===== */

body.route-lead-registration_form .page-lead__title,
body.route-lead-registration_form .custom-service-page__title {
	display: none;
}

body.route-lead-registration_form .form-item__label:not(.option) {
	text-transform: uppercase;
}

body.route-lead-registration_form .form-required::after {
	color: #683714;
}

body.route-lead-registration_form .privacy-introduction {
	display: none;
}

body.route-lead-registration_form .form-item a {
	color: #000;
	font-weight: 700;
}

body.route-lead-registration_form .select-wrapper::after {
	color: #000;
}

/* ===== lead/thankyou (editorial node = lead.settings success/confirmation) =====
   Heading reuses the home banner treatment (above): field_title gold +
   field_subtitle brown. Only the "Read our Terms & Conditions" link remains
   (the "Back to homepage" button is removed from the node content). */

body.is-lead-thankyou .p-title-text__link {
	margin-top: 1.5rem;
}

body.is-lead-thankyou .p-title-text__link a {
	background: none;
	border: 0;
	padding: 0;
	color: #683714;
	font-weight: 400;
	text-decoration: underline;
}

body.is-lead-thankyou .p-title-text__link a:hover {
	text-decoration: none;
}

/* ===== T&C / page header: title size + tighter title_text spacing =====
   Page title (H1, e.g. "Règlement officiel") → 36px; the home/lead banner keeps
   its 40px (higher-specificity rule above wins there). Remove the default bottom
   padding on every title_text so blocks sit tighter, and keep the eyebrow
   ("Le Concours Nutella® Peanut…") close to the H1 that follows it. EN/FR alike. */

h1.p-title-text__title {
	font-size: 2.25rem;
}

.p-title-text {
	--p-title-text-pb: 0;
}

.p-title-text--default + .p-title-text--default {
	--p-title-text-pt: 0.5rem;
}

/* ===== Home hero (FR only): title + subtitle flow continuously =====
   The French copy reads as one sentence ("…l'un des 20 paniers-cadeaux…"), so
   the client wants the gold title and the brown subtitle to flow inline as one
   paragraph instead of two stacked blocks. English keeps the stacked layout. */

html[lang^=fr] body.is-frontpage .p-title-text .p-title-text__content {
	display: block;
}

html[lang^=fr] body.is-frontpage .p-title-text .p-title-text__title,
html[lang^=fr] body.is-frontpage .p-title-text .p-title-text__subtitle,
html[lang^=fr] body.is-frontpage .p-title-text .p-title-text__subtitle p {
	display: inline;
}

html[lang^=fr] body.is-frontpage .p-title-text .p-title-text__link {
	margin-top: 1.5rem;
}

@media (max-width: 767px) {

body.is-frontpage .p-title-text .p-title-text__title,
body.is-frontpage .p-title-text .p-title-text__subtitle,
body.is-lead-thankyou .p-title-text .p-title-text__title,
body.is-lead-thankyou .p-title-text .p-title-text__subtitle {
	font-size: 1.56rem;
}

.p-social {
	padding-bottom: 2rem;
}

.p-social--text {
	font-size: 1.25rem;
}

}