/* =============================================================================
   Diakonis — global front-end fixes (loaded on every page via the child theme,
   so it is not subject to Divi's dynamic/cached CSS).
   ============================================================================= */

/* --- Fix: Externalisation solution card (FR homepage) -----------------------
   Its title module was navy (#170B3A) and static, unlike its 3 siblings which
   are white and rise on hover. Force white + give it the same initial offset;
   the existing ".homeConsultCol:hover .homeConsultTitle{transform:unset}" rule
   (in Theme Options CSS) then animates it up on hover. Siblings keep their own
   inline transform, so they are unaffected. */
#page-container .homeConsultCol .homeConsultTitle h1,
#page-container .homeConsultCol .homeConsultTitle h2,
#page-container .homeConsultCol .homeConsultTitle h3,
#page-container .homeConsultCol .homeConsultTitle h4,
#page-container .homeConsultCol .homeConsultTitle p,
#page-container .homeConsultCol .homeConsultTitle span {
	color: #ffffff !important;
}
#page-container .homeConsultCol .homeConsultTitle {
	transform: translateY(30px);
}

/* --- Fix: footer social icons always fully circular (incl. YouTube) ---------
   The newly added YouTube network rendered as a rounded rectangle on the
   homepage (stale per-icon Divi CSS). Force all footer social icons circular. */
.et-l--footer .et_pb_social_media_follow li a,
#main-footer .et_pb_social_media_follow li a,
footer .et_pb_social_media_follow li a {
	border-radius: 50% !important;
	padding: 3px !important;
}

/* --- Fix: desktop "Solutions" capsules keep their tall box ------------------
   Adding the 5th (Digitalisation) capsule changed the desktop row from 4 to 5
   columns via a direct DB edit; Divi then regenerated the per-column CSS WITHOUT
   the padding / radius / shadow for the desktop columns (only the tablet 1/2
   variant kept them). Re-assert the capsule box so all 5 render at full height.
   The tablet variant already gets these from Divi, so we scope to the desktop
   section only. */
#page-container .home4ColDesktop .homeConsultCol {
	padding: 150px 20px 50px !important;
	border-radius: 10px !important;
	overflow: hidden !important;
	box-shadow: 0 0 18px rgba(0, 0, 0, 0.3);
	background-size: cover;
}
/* 5 narrower columns: the title (white-space:nowrap) must shrink so the longest
   word ("Externalisation") fits inside the card instead of being clipped. */
#page-container .home4ColDesktop .homeConsultTitle .nowrap-shrink,
#page-container .home4ColDesktop .homeConsultTitle h2 {
	font-size: clamp(14px, 1.35vw, 22px) !important;
}
/* On phone/tablet (≤980) the desktop section stacks full-width, but the clamp
   above bottoms out at its 14px floor — far too small for the large stacked
   cards. Give those titles a card-appropriate size that ramps up to the 30px the
   iPad-band cards (home4Colipad, 981–1190) already use. Desktop (≥1191) keeps the
   clamp; the longest word ("Externalisation") still fits the full-width card. */
@media (max-width: 980px) {
	#page-container .home4ColDesktop .homeConsultTitle .nowrap-shrink,
	#page-container .home4ColDesktop .homeConsultTitle h1,
	#page-container .home4ColDesktop .homeConsultTitle h2,
	#page-container .home4ColDesktop .homeConsultTitle h3,
	#page-container .home4ColDesktop .homeConsultTitle h4 {
		font-size: clamp(22px, 5.2vw, 30px) !important;
	}
}
/* Some capsule title modules carry max_width:80% WITHOUT Divi's centering (e.g.
   "Conseil RH" and the cloned "Digitalisation"), so their 80%-wide title box sat
   left-offset. Center every capsule title box within its card. */
#page-container .home4ColDesktop .homeConsultTitle,
#page-container .home4Colipad .homeConsultTitle {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* --- Fix: archive header (author / category / tag / date) -------------------
   Archives render through a Theme Builder body wrapper (.et-l--body) instead of
   the page wrapper (.et-l--post), so they missed the -96px pull-up that tucks the
   hero behind the transparent header. Without it the purple hero drops below the
   header and the white nav lands on the white page top → invisible. Match the
   page behaviour so the nav reads over the hero, exactly like the Blog page. */
@media (min-width: 1024px) {
	body.archive .et-l.et-l--body {
		margin-top: -96px;
	}
}

/* --- Fix: unify the Contact form submit button (FR "Soumettre" + EN "Submit") --
   Neither Divi contact form carried button styling, so the submit rendered as the
   Divi default — and inconsistently between languages. Force the brand primary
   dark-indigo pill (#170B3A / white), matching the client's screenshot. Both forms
   carry module_class="dk-contact-submit". Kept here (not Theme-Options Custom CSS)
   so it loads without depending on Divi's static-CSS regeneration. */
.dk-contact-submit .et_contact_bottom_container {
	display: flex !important;
	justify-content: flex-end !important;
	align-items: center !important;
	float: none !important;
	width: 100% !important;
	text-align: right !important;
	margin-top: 10px !important;
}
.dk-contact-submit .et_pb_button.et_pb_contact_submit {
	background-color: #170B3A !important;
	color: #FFFFFF !important;
	border: 0 !important;
	border-radius: 50px !important;
	padding: 14px 35px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.7em !important;
	letter-spacing: 0 !important;
	width: auto !important;
	float: none !important;
	flex: 0 0 auto !important;
}
.dk-contact-submit .et_pb_button.et_pb_contact_submit:hover {
	background-color: #170B3A !important;
	color: #FFFFFF !important;
	opacity: 1 !important;
	padding: 14px 35px !important;
}
.dk-contact-submit .et_pb_button.et_pb_contact_submit:after,
.dk-contact-submit .et_pb_button.et_pb_contact_submit:hover:after {
	display: none !important;
	content: "" !important;
}

/* --- Single post: rich-text article heading under the featured image --------
   The under-image headline on Blog / Actualité posts is now a dedicated
   WYSIWYG field (see lib/post-heading.php) instead of a hand-typed first <h1>.
   It is prepended to the article content, so it renders full-width and centered
   directly under the (now full-width) featured image, above the body / video
   rail. Editors set colour/size/weight inline from the field's toolbar; these
   rules only provide alignment + an on-brand navy (#170B3A) default. */
#page-container .dkPostHeading {
	text-align: center !important;
	margin: 0 0 24px !important;
}
#page-container .dkPostHeading > :first-child { margin-top: 0 !important; }
#page-container .dkPostHeading > :last-child  { margin-bottom: 0 !important; }
#page-container .dkPostHeading h1,
#page-container .dkPostHeading h2,
#page-container .dkPostHeading h3,
#page-container .dkPostHeading h4,
#page-container .dkPostHeading p {
	text-align: center !important;
	color: #170B3A;
	line-height: 1.3em;
}
/* A linked heading inherits the heading colour instead of the global coral link
   colour, so an unstyled title link still reads as a heading. */
#page-container .dkPostHeading a { color: inherit; text-decoration: none; }
#page-container .dkPostHeading a:hover { text-decoration: underline; }