/* =========================================================================
   Julien Le Peintre — blog theme layer
   Loaded after Divi + child stylesheet. Editorial blog look, mobile first.
   ========================================================================= */

:root {
	--jlp-ink: #14223d;
	--jlp-ink-soft: #47546f;
	--jlp-line: #e3e7ee;
	--jlp-surface: #ffffff;
	--jlp-surface-alt: #f5f7fa;
	--jlp-brand: #0d6fb8;
	--jlp-brand-dark: #0a558d;
	--jlp-accent: #e2622a;
	--jlp-radius: 14px;
	--jlp-shadow: 0 1px 2px rgba(20, 34, 61, .06), 0 8px 24px rgba(20, 34, 61, .07);
	--jlp-wrap: 1180px;
}

/* ---------- 1. Global reset of Divi's overflow problems ---------- */

html {
	overflow-x: hidden;
}

body,
#page-container {
	overflow-x: clip;
	max-width: 100vw;
}

img,
video,
iframe,
table,
pre {
	max-width: 100%;
	height: auto;
}

/* Long unbroken URLs in article bodies were pushing the layout sideways. */
#main-content .entry-content,
#main-content .entry-content li,
#main-content .entry-content p {
	overflow-wrap: anywhere;
}

body {
	background: var(--jlp-surface-alt);
	color: var(--jlp-ink);
	font-size: 17px;
	line-height: 1.7;
	-webkit-text-size-adjust: 100%;
}

/* ---------- 2. Container ---------- */

.container,
.et_pb_row {
	width: 92%;
	max-width: var(--jlp-wrap);
}

@media (max-width: 980px) {
	.container,
	.et_pb_row {
		width: 100%;
		padding-left: 18px;
		padding-right: 18px;
	}
}

/* ---------- 3. Header ---------- */

#main-header {
	background: var(--jlp-surface);
	box-shadow: 0 1px 0 var(--jlp-line);
	padding: 0;
}

body.et_transparent_nav #main-header {
	background: var(--jlp-surface) !important;
}

/* The transparent-nav body class left a ~200px empty band above the content. */
#page-container {
	padding-top: 0 !important;
}

#main-header .logo_container {
	height: 68px;
}

#logo {
	max-height: 46px;
	width: auto;
}

#et-top-navigation {
	padding-top: 20px !important;
}

#top-menu li a {
	color: var(--jlp-ink);
	font-size: 15px;
	font-weight: 600;
	padding-bottom: 20px;
}

#top-menu li a:hover,
#top-menu li.current-menu-item > a {
	color: var(--jlp-brand);
	opacity: 1;
}

@media (max-width: 980px) {
	#main-header .logo_container {
		height: 60px;
	}

	#logo {
		max-height: 38px;
	}

	.et_mobile_menu {
		border-top-color: var(--jlp-brand);
	}

	.et_mobile_menu li a {
		color: var(--jlp-ink);
		font-weight: 600;
	}

	/* Divi hides the toggle when the nav is set to fullwidth. Force it back. */
	.mobile_menu_bar {
		display: block !important;
	}

	#et_mobile_nav_menu {
		display: block !important;
	}

	#top-menu-nav {
		display: none !important;
	}
}

/* ---------- 4. Layout ---------- */

#main-content {
	background: transparent;
}

#main-content .container {
	padding-top: 34px;
}

#main-content .container::before {
	display: none;
}

#left-area {
	background: var(--jlp-surface);
	border: 1px solid var(--jlp-line);
	border-radius: var(--jlp-radius);
	box-shadow: var(--jlp-shadow);
	padding: 34px 38px 40px;
	width: 68%;
}

#sidebar {
	width: 29%;
}

@media (max-width: 980px) {
	#left-area,
	#sidebar {
		width: 100%;
		float: none;
	}

	#left-area {
		padding: 24px 20px 30px;
		border-radius: 10px;
	}

	#sidebar {
		margin-top: 26px;
	}
}

/* ---------- 5. Typography ---------- */

h1,
h2,
h3,
h4 {
	color: var(--jlp-ink);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
}

.entry-title,
h1.entry-title {
	font-size: clamp(28px, 4.4vw, 42px);
	margin-bottom: 14px;
}

#left-area h2 {
	font-size: clamp(23px, 3vw, 30px);
	margin: 42px 0 16px;
	padding-top: 22px;
	border-top: 3px solid var(--jlp-line);
}

#left-area h3 {
	font-size: clamp(19px, 2.4vw, 23px);
	margin: 30px 0 12px;
}

#left-area p {
	margin-bottom: 1.15em;
	color: var(--jlp-ink-soft);
}

#left-area a {
	color: var(--jlp-brand-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(13, 111, 184, .35);
}

#left-area a:hover {
	color: var(--jlp-accent);
	text-decoration-color: var(--jlp-accent);
}

#left-area ul,
#left-area ol {
	padding-left: 1.25em;
	margin-bottom: 1.4em;
}

#left-area li {
	margin-bottom: .5em;
}

#left-area table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.6em 0;
	font-size: 15px;
}

#left-area table th,
#left-area table td {
	border: 1px solid var(--jlp-line);
	padding: 10px 12px;
	text-align: left;
}

#left-area table th {
	background: var(--jlp-surface-alt);
	font-weight: 700;
}

/* Tables are the one block that may not shrink; let them scroll on their own. */
@media (max-width: 700px) {
	#left-area table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}

/* ---------- 6. Blog index: link lists become cards ---------- */

.jlp-cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 16px;
	margin: 26px 0 40px;
	padding: 0;
	list-style: none;
}

.jlp-cat-grid li {
	margin: 0;
}

.jlp-cat-grid a {
	display: block;
	height: 100%;
	background: var(--jlp-surface);
	border: 1px solid var(--jlp-line);
	border-radius: 12px;
	padding: 16px 18px;
	font-weight: 600;
	font-size: 15.5px;
	line-height: 1.45;
	color: var(--jlp-ink) !important;
	text-decoration: none !important;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.jlp-cat-grid a:hover {
	transform: translateY(-2px);
	border-color: var(--jlp-brand);
	box-shadow: var(--jlp-shadow);
	color: var(--jlp-brand-dark) !important;
}

/* Blog archive entries */
.et_pb_post {
	background: var(--jlp-surface);
	border: 1px solid var(--jlp-line);
	border-radius: var(--jlp-radius);
	padding: 24px 26px;
	margin-bottom: 22px;
	box-shadow: var(--jlp-shadow);
}

.et_pb_post .entry-featured-image-url img {
	border-radius: 10px;
}

.et_pb_post h2.entry-title a {
	text-decoration: none;
}

.post-meta {
	font-size: 13.5px;
	color: var(--jlp-ink-soft);
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* ---------- 7. Sidebar ---------- */

#sidebar .et_pb_widget {
	background: var(--jlp-surface);
	border: 1px solid var(--jlp-line);
	border-radius: var(--jlp-radius);
	padding: 20px 22px;
	margin-bottom: 20px;
	box-shadow: var(--jlp-shadow);
	float: none;
	width: 100%;
}

#sidebar .widgettitle {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--jlp-brand);
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--jlp-line);
}

#sidebar li {
	border-bottom: 1px solid var(--jlp-line);
	padding: 9px 0;
}

#sidebar li:last-child {
	border-bottom: 0;
}

#sidebar a {
	color: var(--jlp-ink);
	font-size: 15px;
	line-height: 1.45;
	text-decoration: none;
}

#sidebar a:hover {
	color: var(--jlp-brand);
}

/* ---------- 8. Ad slots ---------- */

.jlp-ad {
	margin: 30px 0;
	text-align: center;
	min-height: 90px;
}

.jlp-ad::before {
	content: "Publicité";
	display: block;
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #9aa4b8;
	margin-bottom: 6px;
}

.jlp-ad ins {
	display: block;
}

.jlp-ad--sidebar {
	margin: 0 0 20px;
}

/* ---------- 9. Partner banner slot ---------- */

.jlp-banner {
	background: linear-gradient(135deg, #12365c 0%, #0d6fb8 100%);
	border-radius: var(--jlp-radius);
	color: #fff;
	padding: 26px 26px 28px;
	margin: 34px 0;
	box-shadow: var(--jlp-shadow);
}

.jlp-banner__kicker {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #a9d4f5;
	margin-bottom: 8px;
}

.jlp-banner__title {
	color: #fff;
	font-size: clamp(20px, 2.6vw, 26px);
	line-height: 1.3;
	margin: 0 0 10px;
}

.jlp-banner__text {
	color: #dbeaf8 !important;
	font-size: 15.5px;
	margin: 0 0 18px !important;
}

.jlp-banner__cta {
	display: inline-block;
	background: var(--jlp-accent);
	color: #fff !important;
	font-weight: 700;
	font-size: 15px;
	padding: 12px 24px;
	border-radius: 999px;
	text-decoration: none !important;
	transition: background .15s ease, transform .15s ease;
}

.jlp-banner__cta:hover {
	background: #c9501d;
	transform: translateY(-1px);
	color: #fff !important;
}

.jlp-banner--sidebar {
	padding: 22px 20px;
	margin: 0 0 20px;
	text-align: center;
}

/* ---------- 10. Partner contact form ---------- */

.jlp-form {
	background: var(--jlp-surface);
	border: 1px solid var(--jlp-line);
	border-radius: var(--jlp-radius);
	padding: 26px 26px 30px;
	box-shadow: var(--jlp-shadow);
	margin: 30px 0;
}

.jlp-form .wpcf7-form-control-wrap {
	display: block;
	margin-bottom: 14px;
}

.jlp-form label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
}

.jlp-form input[type="text"],
.jlp-form input[type="email"],
.jlp-form textarea {
	width: 100%;
	border: 1px solid var(--jlp-line);
	border-radius: 9px;
	padding: 12px 14px;
	font-size: 16px;
	background: #fff;
	color: var(--jlp-ink);
}

.jlp-form input:focus,
.jlp-form textarea:focus {
	outline: 2px solid var(--jlp-brand);
	outline-offset: 1px;
	border-color: var(--jlp-brand);
}

.jlp-form input[type="submit"] {
	background: var(--jlp-accent);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 13px 30px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	width: auto;
}

.jlp-form input[type="submit"]:hover {
	background: #c9501d;
}

/* Two-up on wide screens, stacked on phones. */
.jlp-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 16px;
}

@media (max-width: 620px) {
	.jlp-form__row {
		grid-template-columns: 1fr;
	}
}

/* ---------- 11. Footer ---------- */

#main-footer {
	background: var(--jlp-ink);
}

#footer-widgets .footer-widget h4 {
	color: #fff;
}

#footer-bottom {
	background: #0d1830;
}

/* ---------- 12. Accessibility ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 3px solid var(--jlp-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
	}
}

/* ---------- 13. Blog home hero ---------- */

.jlp-hero {
	background: linear-gradient(135deg, #0f2c4d 0%, #0d6fb8 100%);
	color: #fff;
	border-radius: var(--jlp-radius);
	padding: 34px 34px 36px;
	margin: 0 0 34px;
	box-shadow: var(--jlp-shadow);
}

.jlp-hero__kicker {
	font-size: 11.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #a9d4f5 !important;
	margin: 0 0 10px !important;
}

.jlp-hero__title {
	color: #fff;
	font-size: clamp(24px, 3.6vw, 36px);
	line-height: 1.2;
	margin: 0 0 12px;
	border: 0 !important;
	padding-top: 0 !important;
}

.jlp-hero__text {
	color: #dbeaf8 !important;
	font-size: 16.5px;
	margin: 0 !important;
	max-width: 62ch;
}

@media (max-width: 620px) {
	.jlp-hero {
		padding: 24px 20px 26px;
	}
}

/* ---------- 14. Overrides that must beat Divi's own selectors ---------- */

/* Divi sets list-style + padding on #left-area ul, so the grid needs the same weight. */
#left-area ul.jlp-cat-grid,
.entry-content ul.jlp-cat-grid {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

#left-area ul.jlp-cat-grid li,
.entry-content ul.jlp-cat-grid li {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

#left-area ul.jlp-cat-grid li::marker,
.entry-content ul.jlp-cat-grid li::marker {
	content: "";
}

/* The theme ships Libre Baskerville in caps for headings. Reads as a 2012
   brochure, not a blog — and caps hurt scanability on phones. */
h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
#left-area h1,
#left-area h2,
#left-area h3,
#sidebar .widgettitle,
.jlp-hero__title,
.jlp-banner__title {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	text-transform: none;
}

#sidebar .widgettitle {
	text-transform: uppercase;
}

.entry-title,
#left-area h1,
#left-area h2 {
	color: var(--jlp-ink);
}

/* Divi's fixed header reserves vertical space even when the nav is short. */
#main-content > .container {
	padding-top: 30px !important;
}

body.et_fixed_nav #page-container {
	padding-top: 68px !important;
}

@media (max-width: 980px) {
	body.et_fixed_nav #page-container {
		padding-top: 60px !important;
	}
}

/* ---------- 15. Hard mobile clamp ---------- */

/* Divi's layout widths are declared in several places (theme, Divi Extended
   Column Layouts, gutter classes). Rather than chase each one, clamp every
   structural wrapper on small screens. */
@media (max-width: 980px) {
	#page-container,
	#et-main-area,
	#main-content,
	#main-content .container,
	#content-area,
	#left-area,
	#sidebar,
	#main-header,
	#main-header .container,
	#et-top-navigation,
	#footer-widgets,
	#footer-bottom,
	#main-footer .container {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		float: none !important;
		box-sizing: border-box;
	}

	#main-content .container::before {
		display: none !important;
	}

	/* Divi's fullwidth-nav variant keeps the desktop menu visible and the
	   toggle hidden, which pushed the header past the viewport edge. */
	#top-menu-nav,
	#top-menu {
		display: none !important;
	}

	#et_mobile_nav_menu {
		display: block !important;
		float: right;
	}

	.et_header_style_left #et-top-navigation {
		padding-top: 18px !important;
	}

	.et_header_style_left .mobile_menu_bar {
		padding-bottom: 18px;
	}
}

/* ---------- 16. Fixes found on a real mobile viewport ---------- */

/* Section 14 recolours every heading under #left-area, which also caught the
   hero and banner titles sitting on a dark gradient. Restore them last. */
.jlp-hero .jlp-hero__title,
#left-area .jlp-hero__title,
.jlp-banner .jlp-banner__title,
#left-area .jlp-banner__title {
	color: #fff !important;
	border-top: 0 !important;
	padding-top: 0 !important;
	margin-top: 0 !important;
}

.jlp-hero .jlp-hero__text,
#left-area .jlp-hero__text {
	line-height: 1.55;
}

/* The header container's 18px side padding was added on top of a 100% width. */
#main-header .container,
#main-header .logo_container,
#et-top-navigation {
	box-sizing: border-box;
	max-width: 100%;
}

/* reCAPTCHA's floating badge hangs off the right edge on phones. Google allows
   hiding it when the required notice is shown in the form instead. */
.grecaptcha-badge {
	visibility: hidden;
}

/* Divi does not apply border-box to .container, so the 18px side padding added
   above was landing outside the 100% width and pushing 18px of page scroll. */
@media (max-width: 980px) {
	.container,
	.et_pb_row,
	.logo_container {
		box-sizing: border-box !important;
	}

	#main-header .logo_container {
		width: auto !important;
		max-width: 60% !important;
	}
}

/* Google ships the badge with inline styles, so the earlier rule lost. */
.grecaptcha-badge {
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* The fixed header was clipping the top of the first sidebar widget. */
#main-content > .container {
	padding-top: 46px !important;
}