/*
Theme Name:   GeneratePress Child - 3N Services
Theme URI:    https://3n-services.ma
Description:  Child theme GeneratePress pour 3N Services (partenaire d'externalisation et de services operationnels B2B - Maroc).
Author:       3N Services
Template:     generatepress
Version:      1.0.0
Text Domain:  generatepress-child
*/

/* ==========================================================================
   Font imports - Darker Grotesque (titres) / Inter (corps)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Brand tokens - 3N Services
   ========================================================================== */
:root {
	--color-primary: #0D1923;   /* Brand Dark - backgrounds & headers */
	--color-accent: #3575AE;    /* Accent Blue - numbers, badges, borders */
	--color-action: #1E5B8E;    /* Action Blue - primary buttons */
	--color-action-hover: #154269;
	--color-bg-light: #F8FAFC;  /* Neutral Light - alternating sections */
	--color-white: #FFFFFF;     /* Card White */

	--color-text-primary: #1E293B;
	--color-text-secondary: #475569;
	--color-text-muted: #64748B;

	--font-heading: "Darker Grotesque", sans-serif;
	--font-body: "Inter", sans-serif;

	--radius-base: 8px;
	--transition-base: all 0.2s ease-in-out;
}

/* ==========================================================================
   Base typography
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	overflow-x: hidden !important;
	max-width: 100% !important;
}

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	color: #1E293B !important;
	background-color: var(--color-bg-light);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-primary);
	line-height: 1.15;
}

h1,
h2,
h3,
h4,
.main-title {
	font-family: 'Darker Grotesque', sans-serif !important;
	letter-spacing: -0.01em;
}

a {
	color: var(--color-accent);
}

/* ==========================================================================
   CTA Signature - "Definir mon besoin"
   ========================================================================== */
.btn-signature-cta {
	display: inline-block;
	box-sizing: border-box;
	background-color: var(--color-action);
	color: #FFFFFF;
	font-family: 'Inter', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	padding: 14px 32px;
	border: 2px solid transparent;
	border-radius: 6px;
	text-decoration: none;
	transition: all 0.2s ease;
}

.btn-signature-cta:hover,
.btn-signature-cta:focus {
	background-color: var(--color-action-hover);
	color: #FFFFFF;
}

/* GeneratePress's own .entry-content a rule (class + element, specificity
   0,1,1) outranks the base .btn-signature-cta rule above (single class,
   0,1,0) even though neither uses !important - so inside post/page body
   content, this button's text was rendering in the parent theme's link
   blue instead of white, blending into its own blue background. Scoping
   to .entry-content a.btn-signature-cta (0,2,1) wins on specificity alone,
   with !important added as a safety net against any other theme link
   color rule. */
.entry-content a.btn-signature-cta {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-color: var(--color-action) !important;
	color: #FFFFFF !important;
	text-decoration: none !important;
	font-weight: 700 !important;
}

.entry-content a.btn-signature-cta:hover,
.entry-content a.btn-signature-cta:focus {
	background-color: var(--color-action-hover) !important;
	color: #FFFFFF !important;
	text-decoration: none !important;
}

/* Outline variant for use on dark backgrounds (hero, reassurance banner) */
.btn-signature-cta--outline {
	background-color: transparent;
	color: #FFFFFF;
	border-color: #FFFFFF;
}

.btn-signature-cta--outline:hover,
.btn-signature-cta--outline:focus {
	background-color: #FFFFFF;
	color: var(--color-primary);
}

/* Modifier for the outline variant when placed on a light background */
.btn-signature-cta--on-light {
	color: var(--color-action);
	border-color: var(--color-action);
}

.btn-signature-cta--on-light:hover,
.btn-signature-cta--on-light:focus {
	background-color: var(--color-action);
	color: #FFFFFF;
}

/* Hero action button group (used when a hero has two CTAs) */
.hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 8px;
}

/* ==========================================================================
   Structural wrappers - force full width (GeneratePress / WordPress core)
   ========================================================================== */
.site,
.site.grid-container,
#page,
.site-content,
.content-area,
.site-main,
article.type-page,
.inside-article,
.entry-content {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

/* Defensive fallback: normalize any legacy Gutenberg columns markup
   (un-migrated content still using wp:columns instead of .solutions-grid) */
.entry-content .wp-block-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2rem;
	width: 100%;
}

.entry-content .wp-block-columns > .wp-block-column {
	width: 100%;
	flex: none;
	margin: 0;
	min-width: 0;
}

/* ==========================================================================
   Hero (Dark Slate) - full width, constrained inner content
   ========================================================================== */
.hero-service {
	position: relative !important;
	min-height: 82vh !important;
	display: flex !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 180px 0 100px 0 !important;
	background: linear-gradient(180deg, rgba(11, 23, 36, 0.62) 0%, rgba(11, 23, 36, 0.82) 100%),
				url('/wp-content/uploads/2026/09/slider-last.jpg-scaled-1.webp') center 15%/cover no-repeat !important;
	background-attachment: scroll !important;
	color: #FFFFFF !important;
	width: 100%;
	box-sizing: border-box !important;
}

.hero-service__inner {
	position: relative !important;
	z-index: 2 !important;
	max-width: 1240px !important;
	margin: 0 auto !important;
	padding: 0 24px !important;
	box-sizing: border-box;
	text-align: left !important;
	width: 100% !important;
}

.hero-service__inner h1 {
	max-width: 960px !important;
	font-size: clamp(2.2rem, 3.8vw, 3.4rem) !important;
	font-weight: 800 !important;
	color: #FFFFFF !important;
	line-height: 1.18 !important;
	margin-bottom: 24px !important;
}

.hero-service__inner p {
	max-width: 860px !important;
	margin-left: 0 !important;
	color: #F1F5F9 !important;
	font-size: 1.1rem !important;
	line-height: 1.65 !important;
	margin-bottom: 16px !important;
}

/* ==========================================================================
   Section containers (center to 1200px with generous vertical rhythm)
   ========================================================================== */
.section-solutions,
.section-profils,
.section-figures,
.section-contact,
.reassurance-banner {
	max-width: 1240px !important;
	width: 92% !important;
	margin: 50px auto !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

.section-solutions h2,
.section-profils h2,
.section-approach h2,
.section-faq h2,
.section-figures h2,
.home-section h2 {
	font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
	font-weight: 700 !important;
	color: #0D1923 !important;
	line-height: 1.3 !important;
	margin-bottom: 20px !important;
}

/* ==========================================================================
   Homepage full-bleed section bands (background rhythm)
   ========================================================================== */
.home-section,
.section-approach {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.section-approach {
	margin: 0 !important;
	padding: 60px 0 !important;
}

.home-section {
	padding: 64px 0 !important;
	margin: 0 !important;
}

.section-inner {
	max-width: 1240px;
	width: 92%;
	margin: 0 auto;
	box-sizing: border-box;
}

.home-section--white,
.section-approach {
	background-color: #FFFFFF;
}

.home-section--soft {
	background-color: #F8FAFC;
}

.home-section--dark {
	background-color: #0D1923;
}

.home-section--dark h2 {
	color: #FFFFFF !important;
}

.home-section--dark p {
	color: #CBD5E1 !important;
}

/* ==========================================================================
   Homepage - "Preparer les services de demain" 2-column split
   (text-color rules below are scoped under .section-future-services so
   they out-specificity the .home-section--dark h2/p rules above)
   ========================================================================== */
.section-future-services {
	padding: 90px 0 !important;
	background-color: #0D1923 !important;
	position: relative !important;
	overflow: hidden !important;
}

.future-services__grid {
	display: grid !important;
	grid-template-columns: 1.15fr 1fr !important;
	gap: 64px !important;
	align-items: center !important;
	max-width: 1240px !important;
	margin: 0 auto !important;
	padding: 0 24px !important;
}

.section-future-services .future-services__eyebrow {
	color: #38BDF8 !important;
	font-size: 0.82rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	margin-bottom: 14px !important;
	display: inline-block !important;
}

.section-future-services .future-services__title {
	color: #FFFFFF !important;
	font-size: clamp(2rem, 3vw, 2.5rem) !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	margin-bottom: 20px !important;
}

.section-future-services .future-services__lead {
	font-size: 1.15rem !important;
	font-weight: 600 !important;
	color: #E2E8F0 !important;
	line-height: 1.5 !important;
	margin-bottom: 16px !important;
}

.section-future-services .future-services__text {
	color: #94A3B8 !important;
	font-size: 1rem !important;
	line-height: 1.65 !important;
	margin-bottom: 32px !important;
}

.future-services__actions {
	display: flex !important;
	align-items: center !important;
}

.future-services__media-frame {
	position: relative !important;
	border-radius: 18px !important;
	overflow: hidden !important;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.future-services__img {
	width: 100% !important;
	height: 100% !important;
	min-height: 400px !important;
	max-height: 460px !important;
	object-fit: cover !important;
	display: block !important;
	transition: transform 0.4s ease !important;
}

.future-services__media-frame:hover .future-services__img {
	transform: scale(1.04) !important;
}

.future-services__media-glow {
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient(180deg, transparent 40%, rgba(13, 25, 35, 0.6) 100%) !important;
	pointer-events: none !important;
}

@media (max-width: 991px) {
	.section-future-services {
		padding: 60px 0 !important;
	}
	.future-services__grid {
		grid-template-columns: 1fr !important;
		gap: 40px !important;
	}
	.future-services__img {
		min-height: 240px !important;
		max-height: 320px !important;
	}
}

.home-section p {
	color: var(--color-text-secondary);
	font-size: 1.05rem;
	line-height: 1.65;
	max-width: 800px;
	margin: 0 0 24px 0;
}

.home-section__split-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

@media (max-width: 700px) {
	.home-section__split-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   "Nos solutions" grid & cards
   (targets both the group itself and Gutenberg's inner-container wrapper,
   in case the block is rendered with or without it)
   ========================================================================== */
.solutions-grid,
.solutions-grid > .wp-block-group__inner-container {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 30px !important;
	width: 100% !important;
	align-items: start !important; /* Prevents artificial vertical stretching */
}

@media (max-width: 900px) {
	.solutions-grid,
	.solutions-grid > .wp-block-group__inner-container {
		grid-template-columns: 1fr !important;
	}
}

.card-service-box,
.process-step,
.card-solution {
	height: auto !important;
	min-height: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
	text-align: left !important;
	padding: 28px 24px !important;
	border-radius: 8px !important;
	box-shadow: 0 4px 12px rgba(13, 25, 35, 0.04) !important;
	border: 1px solid #E2E8F0 !important;
	background: #FFFFFF !important;
	transition: all 0.25s ease !important;
}

.card-service-box:hover,
.process-step:hover,
.card-solution:hover {
	transform: translateY(-4px) !important;
	border-color: #3575AE !important;
	box-shadow: 0 12px 28px rgba(13, 25, 35, 0.1) !important;
}

.card-service-box__icon {
	width: 48px;
	height: 48px;
	margin-bottom: 1rem;
	color: var(--color-accent);
}

.card-service-box__title,
.process-step__title,
.card-solution__title {
	text-align: left !important;
	margin: 0 0 12px 0 !important;
}

.card-service-box__title,
.card-solution__title {
	font-size: 1.75rem !important;
	font-weight: 800 !important;
	color: #0D1923 !important;
	line-height: 1.2 !important;
}

.card-service-box__excerpt,
.process-step__text,
.card-solution__text {
	text-align: left !important;
	margin: 0 !important;
	font-size: 1rem !important;
	line-height: 1.6 !important;
}

.card-service-box__excerpt,
.card-solution__text {
	color: #475569 !important;
}

.card-service-box__link {
	font-family: var(--font-body);
	font-weight: 600;
	color: var(--color-accent);
	text-decoration: none;
}

.card-service-box__link:hover {
	text-decoration: underline;
}

/* ==========================================================================
   "Notre approche" / "Notre methode" - numbered process steps
   (6 steps: strict 3-column grid, 3x2 on desktop)
   ========================================================================== */
.process-steps,
.process-steps > .wp-block-group__inner-container {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 24px !important;
	width: 100% !important;
	align-items: start !important; /* Prevents artificial vertical stretching */
}

@media (max-width: 900px) {
	.process-steps,
	.process-steps > .wp-block-group__inner-container {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 600px) {
	.process-steps,
	.process-steps > .wp-block-group__inner-container {
		grid-template-columns: 1fr !important;
	}
}

.process-step__number {
	font-family: 'Darker Grotesque', sans-serif !important;
	font-size: 1.8rem !important;
	font-weight: 800 !important;
	color: #3575AE !important;
	line-height: 1 !important;
	margin: 0 0 12px 0 !important;
	text-align: left !important;
}

.process-step__signature {
	font-family: var(--font-body);
	font-style: italic;
	font-weight: 600;
	font-size: 0.9rem;
	color: #3575AE;
	margin: 0 0 10px 0;
}

.process-step__title {
	font-size: 1.35rem !important;
	font-weight: 800 !important;
	color: #0D1923 !important;
	line-height: 1.2 !important;
}

.process-step__text {
	color: #475569 !important;
}

/* ==========================================================================
   "Notre methode" / "Notre approche" - connected timeline redesign
   (inspiration: ISS World) - overrides the grid/card rules above via
   source order (equal specificity, later wins)
   ========================================================================== */
.section-approach {
	padding: 80px 0 !important;
	background-color: #FFFFFF !important;
	position: relative !important;
}

.section-approach .section-inner > h2 {
	text-align: center !important;
	font-size: clamp(1.8rem, 2.5vw, 2.3rem) !important;
	font-weight: 800 !important;
	color: #0D1923 !important;
	margin-bottom: 56px !important;
}

.process-steps {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 32px !important;
	position: relative !important;
	margin-bottom: 56px !important;
}

.process-step {
	background: #FFFFFF !important;
	border: 1px solid #E2E8F0 !important;
	border-radius: 12px !important;
	padding: 32px 24px !important;
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease !important;
	overflow: hidden !important;
}

.process-step::before {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: 3px !important;
	background: #3575AE !important;
	opacity: 0 !important;
	transform: scaleX(0) !important;
	transform-origin: left !important;
	transition: opacity 0.25s ease, transform 0.25s ease !important;
}

.process-step:hover {
	transform: translateY(-6px) !important;
	border-color: #CBD5E1 !important;
	box-shadow: 0 16px 36px rgba(13, 25, 35, 0.08) !important;
}

.process-step:hover::before {
	opacity: 1 !important;
	transform: scaleX(1) !important;
}

.process-step__number {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	background-color: #F0F6FB !important;
	color: #1B4965 !important;
	font-size: 1.05rem !important;
	font-weight: 800 !important;
	margin-bottom: 18px !important;
	border: 1px solid rgba(53, 117, 174, 0.15) !important;
	transition: all 0.25s ease !important;
}

.process-step:hover .process-step__number {
	background-color: #1B4965 !important;
	color: #FFFFFF !important;
	border-color: #1B4965 !important;
	box-shadow: 0 4px 12px rgba(27, 73, 101, 0.25) !important;
}

.process-step__title {
	font-size: 1.3rem !important;
	font-weight: 700 !important;
	color: #0D1923 !important;
	margin-bottom: 6px !important;
}

.process-step__signature {
	font-size: 0.88rem !important;
	font-weight: 600 !important;
	color: #3575AE !important;
	font-style: italic !important;
	margin-bottom: 14px !important;
}

.process-step__text {
	color: #475569 !important;
	font-size: 0.94rem !important;
	line-height: 1.6 !important;
	margin: 0 !important;
}

.section-approach .section-inner > a.btn-signature-cta {
	display: table !important;
	margin: 0 auto !important;
}

@media (max-width: 991px) {
	.process-steps {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 20px !important;
	}
}

@media (max-width: 640px) {
	.process-steps {
		grid-template-columns: 1fr !important;
	}
	.section-approach {
		padding: 50px 0 !important;
	}
}

/* ==========================================================================
   "Profils mobilisables" pill badges
   ========================================================================== */
.profils-mobilisables {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	margin-top: 8px !important;
}

.pill-badge {
	background: #F1F5F9 !important;
	color: #0D1923 !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	padding: 10px 20px !important;
	border-radius: 999px !important;
	border: 1px solid #CBD5E1 !important;
	display: inline-block !important;
}

/* ==========================================================================
   FAQ (Gutenberg core/details blocks)
   ========================================================================== */
.wp-block-details {
	font-family: var(--font-body);
}

.wp-block-details summary {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	list-style: none;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::marker {
	content: "";
}

.wp-block-details summary::after {
	content: "+";
	flex-shrink: 0;
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-accent);
	transition: var(--transition-base);
}

.wp-block-details[open] summary {
	margin-bottom: 0.75rem;
}

.wp-block-details[open] summary::after {
	transform: rotate(45deg);
}

details.wp-block-details {
	background: #FFFFFF !important;
	border: 1px solid #E2E8F0 !important;
	border-radius: 8px !important;
	padding: 20px 28px !important;
	margin-bottom: 16px !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

details.wp-block-details[open] {
	border-color: #3575AE !important;
	box-shadow: 0 4px 12px rgba(53, 117, 174, 0.08) !important;
}

details.wp-block-details summary {
	font-family: 'Inter', sans-serif !important;
	font-size: 1.1rem !important;
	font-weight: 700 !important;
	color: #0D1923 !important;
	cursor: pointer !important;
}

details.wp-block-details p {
	font-size: 1rem !important;
	color: #475569 !important;
	line-height: 1.65 !important;
	margin-top: 14px !important;
}

/* ==========================================================================
   Reassurance banner
   ========================================================================== */
.reassurance-banner {
	background: linear-gradient(135deg, #3575AE 0%, #1E4E79 100%) !important;
	border-radius: 12px !important;
	padding: 56px 40px !important;
	text-align: center !important;
}

.reassurance-banner p {
	color: #FFFFFF !important;
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	margin-bottom: 24px !important;
	font-family: 'Darker Grotesque', sans-serif !important;
}

.reassurance-banner .btn-signature-cta {
	background-color: #0D1923 !important;
	color: #FFFFFF !important;
}

.reassurance-banner .btn-signature-cta:hover {
	background-color: #000000 !important;
}

/* ==========================================================================
   Homepage - services overview grid
   ========================================================================== */
.services-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	width: 100%;
	margin-top: 32px;
}

.service-overview-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	padding: 28px 24px;
	text-decoration: none;
	transition: all 0.25s ease;
}

.service-overview-card:hover {
	transform: translateY(-4px);
	border-color: #3575AE;
	box-shadow: 0 12px 28px rgba(13, 25, 35, 0.1);
}

.service-overview-card__icon {
	display: inline-flex;
	width: 44px;
	height: 44px;
	color: #3575AE;
	margin-bottom: 16px;
}

.service-overview-card__icon svg {
	width: 100%;
	height: 100%;
}

.service-overview-card__title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.35rem;
	color: #0D1923;
	margin: 0 0 8px 0;
}

.service-overview-card__excerpt {
	font-family: var(--font-body);
	font-size: 0.95rem;
	color: #475569;
	line-height: 1.55;
	margin: 0;
}

/* ==========================================================================
   Homepage - key figures ("chiffres cles")
   ========================================================================== */
.key-figures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
	width: 100%;
	margin-top: 32px;
}

.key-figure {
	background: #F8FAFC;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	padding: 28px 24px;
	text-align: left;
}

.key-figure__value {
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: 2.25rem;
	color: #3575AE;
	line-height: 1;
	margin: 0 0 8px 0;
}

.key-figure__label {
	font-family: var(--font-body);
	font-size: 0.95rem;
	color: #475569;
	line-height: 1.5;
	margin: 0;
}

/* ==========================================================================
   Contact page - two-column layout
   ========================================================================== */
.section-contact {
	display: grid;
	grid-template-columns: minmax(280px, 380px) 1fr;
	gap: 40px;
	align-items: start;
}

@media (max-width: 900px) {
	.section-contact {
		grid-template-columns: 1fr;
	}
}

.contact-info,
.contact-form-container {
	background: #F8FAFC;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	padding: 32px 28px;
	box-sizing: border-box;
}

.contact-form-container {
	background: #FFFFFF;
}

.contact-info h2 {
	margin-top: 0;
	font-size: 1.5rem;
}

.contact-info__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 20px;
}

.contact-info__item:last-child {
	margin-bottom: 0;
}

.contact-info__label {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #3575AE;
}

.contact-info__value {
	font-family: var(--font-body);
	font-size: 1rem;
	color: #0D1923;
	line-height: 1.5;
}

/* ==========================================================================
   Recrutement page - CV application form (page-recrutement.php). Shares
   .contact-info / .contact-form-container / .section-contact with the
   Contact page for layout consistency, but this form is a bespoke
   markup (not FluentForm), so it needs its own field styling.
   ========================================================================== */
.recruitment-form__honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.recruitment-form__row {
	margin-bottom: 20px;
}

.recruitment-form__row-group {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

@media (max-width: 560px) {
	.recruitment-form__row-group {
		grid-template-columns: 1fr;
	}
}

.recruitment-form label {
	display: block;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--color-primary);
	margin-bottom: 6px;
}

.recruitment-form__required {
	color: #DC2626;
}

.recruitment-form__hint {
	font-weight: 400;
	color: #64748B;
	text-transform: none;
	letter-spacing: normal;
}

.recruitment-form input[type="text"],
.recruitment-form input[type="email"],
.recruitment-form input[type="tel"],
.recruitment-form input[type="file"],
.recruitment-form select,
.recruitment-form textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--font-body);
	font-size: 1rem;
	color: #0D1923;
	background: #FFFFFF;
	border: 1px solid #CBD5E1;
	border-radius: var(--radius-base);
	padding: 12px 14px;
	transition: var(--transition-base);
}

.recruitment-form input[type="text"]:focus,
.recruitment-form input[type="email"]:focus,
.recruitment-form input[type="tel"]:focus,
.recruitment-form input[type="file"]:focus,
.recruitment-form select:focus,
.recruitment-form textarea:focus {
	outline: none;
	border-color: var(--color-action);
	box-shadow: 0 0 0 3px rgba(30, 91, 142, 0.15);
}

.recruitment-form textarea {
	resize: vertical;
	min-height: 100px;
}

.recruitment-form__row--checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	font-size: 0.9rem;
	color: #334155;
	cursor: pointer;
}

.recruitment-form__row--checkbox input[type="checkbox"] {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--color-action);
	cursor: pointer;
}

.recruitment-form__banner {
	border-radius: var(--radius-base);
	padding: 14px 16px;
	margin-bottom: 20px;
	font-family: var(--font-body);
	font-size: 0.9rem;
	line-height: 1.5;
}

.recruitment-form__banner--success {
	background: #ECFDF5;
	border: 1px solid #A7F3D0;
	color: #065F46;
}

.recruitment-form__banner--error {
	background: #FEF2F2;
	border: 1px solid #FECACA;
	color: #991B1B;
}

.recruitment-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: none;
	cursor: pointer;
	font-family: 'Inter', sans-serif;
}

.recruitment-form__submit:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

.recruitment-form__spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #FFFFFF;
	border-radius: 50%;
	animation: threen-recruitment-spin 0.7s linear infinite;
}

/* The class rule above's `display: inline-block` has higher specificity
   than the browser's default [hidden] { display: none } rule, so the
   spinner was overriding its own `hidden` attribute and rendering
   visible (and spinning, since the animation was also unconditional)
   on page load, before any submission. This restores the hidden state
   with equal specificity so the attribute actually takes effect. */
.recruitment-form__spinner[hidden] {
	display: none;
}

@keyframes threen-recruitment-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ==========================================================================
   Homepage - "4 key families" solutions grid
   ========================================================================== */
.solutions-families {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	width: 100%;
	margin: 8px 0 32px 0;
}

@media (max-width: 640px) {
	.solutions-families {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Homepage - engagements
   ========================================================================== */
.engagements-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	margin-top: 24px;
}

.engagement-tile {
	background: #F8FAFC;
	border: 1px solid #E2E8F0;
	border-radius: 8px;
	padding: 24px 20px;
	text-align: left;
}

.engagement-tile__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.1rem;
	color: #0D1923;
	margin: 0 0 10px 0;
}

.engagement-tile__text {
	font-family: var(--font-body);
	font-size: 0.9rem;
	color: var(--color-text-secondary);
	line-height: 1.55;
	margin: 0;
}

/* ==========================================================================
   Homepage - "Nos engagements" ISS World-inspired dark impact block
   (replaces the .engagements-grid / .engagement-tile white cards above,
   which are left in place unused in case a lighter variant is needed
   elsewhere)
   ========================================================================== */
.section-iss-impact {
	position: relative !important;
	overflow: hidden !important;
	padding: 100px 0 110px 0 !important;
	background-color: #0B1724 !important;
}

.iss-impact__backdrop {
	position: absolute !important;
	inset: 0 !important;
	z-index: 1 !important;
}

.iss-impact__bg-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	opacity: 0.35 !important;
	filter: grayscale(40%) contrast(110%) !important;
}

.iss-impact__overlay {
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient(180deg, rgba(11, 23, 36, 0.88) 0%, rgba(13, 25, 35, 0.95) 100%) !important;
}

.iss-impact__inner {
	position: relative !important;
	z-index: 2 !important;
	max-width: 1260px !important;
	margin: 0 auto !important;
	padding: 0 24px !important;
}

.section-iss-impact .iss-impact__header {
	text-align: center !important;
	max-width: 860px !important;
	margin: 0 auto 52px auto !important;
}

.section-iss-impact .iss-impact__eyebrow {
	color: #38BDF8 !important;
	font-size: 0.85rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	margin-bottom: 12px !important;
	display: inline-block !important;
	text-align: center !important;
}

.section-iss-impact .iss-impact__title {
	color: #FFFFFF !important;
	font-size: clamp(2rem, 3.2vw, 2.75rem) !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
	margin: 0 auto !important;
	text-align: center !important;
}

.section-iss-impact .iss-impact__cards {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: stretch !important;
	gap: 20px !important;
	max-width: 1320px !important;
	margin: 0 auto !important;
}

.iss-card {
	background: #0284C7 !important;
	color: #FFFFFF !important;
	border-radius: 20px !important;
	padding: 28px 22px !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25) !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease !important;
}

@media (min-width: 1025px) {
	.section-iss-impact .iss-card {
		flex: 1 1 200px !important;
		max-width: 240px !important;
		text-align: left !important;
	}
}

@media (max-width: 1024px) and (min-width: 641px) {
	.section-iss-impact .iss-card {
		flex: 1 1 260px !important;
		max-width: 320px !important;
	}
}

@media (max-width: 640px) {
	.section-iss-impact .iss-card {
		flex: 1 1 100% !important;
		max-width: 100% !important;
	}
}

.iss-card:hover {
	transform: translateY(-8px) !important;
	background-color: #0369A1 !important;
	box-shadow: 0 20px 40px rgba(2, 132, 199, 0.35) !important;
}

.iss-card__metric {
	font-size: clamp(1.4rem, 2vw, 1.8rem) !important;
	font-weight: 800 !important;
	color: #FFFFFF !important;
	letter-spacing: -0.02em !important;
	margin-bottom: 14px !important;
	line-height: 1.1 !important;
}

.iss-card__title {
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	color: #FFFFFF !important;
	margin-bottom: 10px !important;
	line-height: 1.3 !important;
}

.iss-card__desc {
	font-size: 0.86rem !important;
	line-height: 1.55 !important;
	color: rgba(255, 255, 255, 0.9) !important;
	margin: 0 !important;
}

@media (max-width: 768px) {
	.section-iss-impact {
		padding: 60px 0 !important;
	}
	.iss-card {
		border-radius: 16px !important;
		padding: 24px 20px !important;
	}
}

/* ==========================================================================
   Homepage - domaines d'intervention (editorial card grid)
   ========================================================================== */
.domaines-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin: 32px 0;
}

.domaine-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	border: 1px solid #E2E8F0;
	background: #FFFFFF;
	padding: 22px 18px;
	border-radius: 6px;
	color: #0D1923;
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	transition: all 0.25s ease;
}

.domaine-card::after {
	content: "\2192";
	position: absolute;
	right: 16px;
	bottom: 12px;
	color: #3575AE;
	font-weight: 700;
}

.domaine-card:hover,
.domaine-card:focus {
	border-color: #3575AE;
	border-left: 4px solid #3575AE;
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(13, 25, 35, 0.08);
}

/* ==========================================================================
   Homepage - "Domaines d'intervention" Onet-style immersive image cards
   (replaces the .domaines-grid / .domaine-card text buttons above, which
   are left in place unused)
   ========================================================================== */
.section-domaines {
	padding: 85px 0 !important;
	background-color: #FFFFFF !important;
}

.domaines-header {
	text-align: center !important;
	max-width: 820px !important;
	margin: 0 auto 52px auto !important;
}

.domaines-header .section-eyebrow {
	display: inline-block !important;
	font-size: 0.8rem !important;
	font-weight: 700 !important;
	color: #3575AE !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	margin-bottom: 12px !important;
}

.domaines-header h2 {
	font-size: clamp(1.8rem, 2.8vw, 2.35rem) !important;
	font-weight: 800 !important;
	color: #0D1923 !important;
	margin-bottom: 16px !important;
}

.domaines-header p {
	color: #64748B !important;
	font-size: 1.05rem !important;
	line-height: 1.65 !important;
	margin: 0 auto !important;
}

.domaines-grid-onet {
	display: grid !important;
	grid-template-columns: repeat(5, 1fr) !important;
	gap: 20px !important;
	max-width: 1260px !important;
	margin: 0 auto !important;
}

.domaine-card-onet {
	position: relative !important;
	height: 280px !important;
	border-radius: 20px !important;
	overflow: hidden !important;
	text-decoration: none !important;
	display: block !important;
	box-shadow: 0 8px 22px rgba(13, 25, 35, 0.08) !important;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important;
}

.domaine-card-onet img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.domaine-card-onet__overlay {
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient(180deg, rgba(13, 25, 35, 0.05) 30%, rgba(13, 25, 35, 0.85) 100%) !important;
	display: flex !important;
	align-items: flex-end !important;
	padding: 22px 18px !important;
	transition: background 0.3s ease !important;
}

.domaine-card-onet__title {
	color: #FFFFFF !important;
	font-size: 1.02rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
	transition: transform 0.25s ease !important;
}

.domaine-card-onet:hover {
	transform: translateY(-6px) !important;
	box-shadow: 0 16px 36px rgba(13, 25, 35, 0.16) !important;
}

.domaine-card-onet:hover img {
	transform: scale(1.08) !important;
}

.domaine-card-onet:hover .domaine-card-onet__overlay {
	background: linear-gradient(180deg, rgba(27, 73, 101, 0.2) 20%, rgba(13, 25, 35, 0.92) 100%) !important;
}

.domaine-card-onet:hover .domaine-card-onet__title {
	transform: translateY(-2px) !important;
	color: #E0F2FE !important;
}

@media (max-width: 1024px) {
	.domaines-grid-onet {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 768px) {
	.domaines-grid-onet {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 14px !important;
	}
	.domaine-card-onet {
		height: 210px !important;
		border-radius: 14px !important;
	}
	.domaine-card-onet__title {
		font-size: 0.92rem !important;
	}
}

@media (max-width: 480px) {
	.domaines-grid-onet {
		grid-template-columns: 1fr !important;
	}
	.domaine-card-onet {
		height: 190px !important;
	}
}

/* ==========================================================================
   Homepage - "Ils nous font confiance" infinite logo marquee (Onet style)
   ========================================================================== */
.trust-banner {
	background-color: #FFFFFF !important;
	border-bottom: 1px solid #E2E8F0 !important;
	padding: 24px 0 !important;
	margin: 0 !important;
	overflow: hidden !important;
	position: relative !important;
	width: 100% !important;
}

.trust-banner__inner {
	display: flex !important;
	align-items: center !important;
	max-width: 1320px !important;
	margin: 0 auto !important;
	padding: 0 24px !important;
	gap: 36px !important;
}

.trust-banner__title {
	font-size: 0.78rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.12em !important;
	color: #64748B !important;
	white-space: nowrap !important;
	padding-right: 28px !important;
	border-right: 1px solid #CBD5E1 !important;
	flex-shrink: 0 !important;
	text-transform: uppercase !important;
}

.trust-marquee-wrapper {
	overflow: hidden !important;
	position: relative !important;
	flex: 1 1 auto !important;
	width: 100% !important;
}

.trust-marquee-track {
	display: flex !important;
	align-items: center !important;
	gap: 52px !important;
	width: max-content !important;
	animation: trustScroll 28s linear infinite !important;
}

.trust-marquee-track:hover {
	animation-play-state: paused !important;
}

.trust-logo-item {
	flex-shrink: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: transform 0.2s ease !important;
}

.trust-logo-item:hover {
	transform: scale(1.06) !important;
}

/* Uniform treatment for the mixed SVG/WebP logo set - a CSS filter
   (rather than forcing `fill`) works identically on both formats and
   doesn't fight real multi-color vendor marks that set their own fills
   per path (e.g. Maersk), unlike the old single-path monochrome icons
   this replaced. */
.trust-logo-item svg,
.trust-logo-item img {
	display: block !important;
	height: 32px !important;
	width: auto !important;
	max-width: 140px !important;
	object-fit: contain !important;
	filter: grayscale(100%) opacity(0.7) !important;
	transition: filter 0.25s ease !important;
}

.trust-logo-item:hover svg,
.trust-logo-item:hover img {
	filter: grayscale(0%) opacity(1) !important;
}

@keyframes trustScroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
	.trust-banner__inner {
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
		gap: 16px !important;
	}
	.trust-banner__title {
		border-right: none !important;
		border-bottom: none !important;
		padding-right: 0 !important;
		padding-bottom: 0 !important;
		margin: 0 auto !important;
		text-align: center !important;
		width: 100% !important;
		display: block !important;
	}
	.trust-marquee-track {
		gap: 36px !important;
		animation-duration: 20s !important;
	}
}

/* ==========================================================================
   Section Conviction Split (Inspiration Derichebourg)
   ========================================================================== */
.section-conviction-split {
	padding: 80px 0 !important;
	background-color: #FFFFFF !important;
}

.conviction-split__grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 56px !important;
	align-items: center !important;
	max-width: 1240px !important;
	margin: 0 auto !important;
	padding: 0 24px !important;
}

.conviction-split__media {
	position: relative !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	box-shadow: 0 16px 40px rgba(13, 25, 35, 0.08) !important;
}

.conviction-split__img {
	width: 100% !important;
	height: 100% !important;
	min-height: 420px !important;
	object-fit: cover !important;
	display: block !important;
}

.conviction-split__content .section-eyebrow {
	display: inline-block !important;
	font-size: 0.8rem !important;
	font-weight: 700 !important;
	color: #3575AE !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	margin-bottom: 12px !important;
}

.conviction-split__content h2 {
	font-size: clamp(1.6rem, 2.4vw, 2.2rem) !important;
	font-weight: 800 !important;
	color: #0D1923 !important;
	line-height: 1.25 !important;
	margin-bottom: 20px !important;
}

.conviction-split__content .lead-text {
	font-size: 1.1rem !important;
	font-weight: 600 !important;
	color: #1E293B !important;
	line-height: 1.5 !important;
	margin-bottom: 14px !important;
}

.conviction-split__content p {
	color: #475569 !important;
	font-size: 1rem !important;
	line-height: 1.65 !important;
	margin-bottom: 24px !important;
}

.conviction-split__actions {
	margin-top: 10px !important;
}

@media (max-width: 991px) {
	.section-conviction-split {
		padding: 48px 0 !important;
	}
	.conviction-split__grid {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}
	.conviction-split__img {
		min-height: 280px !important;
		max-height: 380px !important;
	}
}

/* ==========================================================================
   Solutions Section Centering & Cards
   ========================================================================== */
.section-solutions .solutions-header {
	text-align: center !important;
	max-width: 820px !important;
	margin: 0 auto 48px auto !important;
}

.section-solutions .solutions-header h2 {
	font-size: clamp(1.8rem, 2.5vw, 2.3rem) !important;
	font-weight: 800 !important;
	color: #0D1923 !important;
	margin-bottom: 16px !important;
}

.section-solutions .solutions-header p {
	color: #64748B !important;
	font-size: 1.05rem !important;
	line-height: 1.65 !important;
	margin: 0 auto !important;
}

.solutions-families {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 30px !important;
	margin-bottom: 48px !important;
	align-items: stretch !important;
}

.card-solution {
	background: #FFFFFF !important;
	border: 1px solid #E2E8F0 !important;
	border-radius: 8px !important;
	padding: 32px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	box-shadow: 0 4px 16px rgba(13, 25, 35, 0.03) !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.card-solution:hover {
	transform: translateY(-3px) !important;
	border-color: #CBD5E1 !important;
	box-shadow: 0 10px 25px rgba(13, 25, 35, 0.08) !important;
}

.card-solution__icon {
	width: 52px !important;
	height: 52px !important;
	background: #F0F6FB !important;
	border-radius: 8px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-bottom: 20px !important;
	flex-shrink: 0 !important;
}

.card-solution__title {
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	color: #0D1923 !important;
	margin-bottom: 12px !important;
}

.card-solution__text {
	color: #475569 !important;
	font-size: 0.95rem !important;
	line-height: 1.6 !important;
	margin: 0 !important;
}

.solutions-footer-cta {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
}

@media (max-width: 768px) {
	.solutions-families {
		grid-template-columns: 1fr !important;
	}
}

/* ==========================================================================
   Homepage "Notre methode" - connected stepper timeline (no enclosed boxes)
   ========================================================================== */
.timeline-section {
	background-color: #F8FAFC !important;
	padding: 90px 0 !important;
	position: relative !important;
}

.timeline-header {
	text-align: center !important;
	max-width: 760px !important;
	margin: 0 auto 60px auto !important;
}

.timeline-header .section-eyebrow {
	display: inline-block !important;
	font-size: 0.8rem !important;
	font-weight: 700 !important;
	color: #3575AE !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	margin-bottom: 12px !important;
}

.timeline-header h2 {
	font-size: clamp(1.8rem, 2.8vw, 2.4rem) !important;
	font-weight: 800 !important;
	color: #0D1923 !important;
	margin-bottom: 14px !important;
}

.timeline-subtitle {
	color: #64748B !important;
	font-size: 1.05rem !important;
	line-height: 1.6 !important;
	margin: 0 auto !important;
}

.timeline-track-container {
	position: relative !important;
	max-width: 1200px !important;
	margin: 0 auto 50px auto !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 48px !important;
}

.timeline-row {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 36px !important;
	position: relative !important;
}

@media (min-width: 992px) {
	.timeline-row::before {
		content: '' !important;
		position: absolute !important;
		top: 26px !important;
		left: 12% !important;
		right: 12% !important;
		height: 2px !important;
		background: linear-gradient(90deg, #CBD5E1 0%, #3575AE 50%, #CBD5E1 100%) !important;
		z-index: 1 !important;
	}
}

.timeline-step {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	padding: 0 12px !important;
}

.timeline-marker {
	position: relative !important;
	width: 52px !important;
	height: 52px !important;
	background: #FFFFFF !important;
	border: 2px solid #CBD5E1 !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-bottom: 22px !important;
	z-index: 2 !important;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
	cursor: pointer !important;
}

.timeline-number {
	font-size: 0.95rem !important;
	font-weight: 800 !important;
	color: #334155 !important;
	transition: color 0.3s ease !important;
}

.timeline-pulse {
	position: absolute !important;
	inset: -6px !important;
	border-radius: 50% !important;
	background: rgba(53, 117, 174, 0.15) !important;
	opacity: 0 !important;
	transform: scale(0.8) !important;
	transition: all 0.3s ease !important;
	z-index: -1 !important;
}

.timeline-step:hover .timeline-marker {
	border-color: #3575AE !important;
	background: #1B4965 !important;
	transform: translateY(-4px) scale(1.08) !important;
	box-shadow: 0 8px 20px rgba(27, 73, 101, 0.25) !important;
}

.timeline-step:hover .timeline-number {
	color: #FFFFFF !important;
}

.timeline-step:hover .timeline-pulse {
	opacity: 1 !important;
	transform: scale(1.3) !important;
}

.timeline-title {
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	color: #0D1923 !important;
	margin-bottom: 6px !important;
	transition: color 0.2s ease !important;
}

.timeline-step:hover .timeline-title {
	color: #3575AE !important;
}

.timeline-signature {
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	color: #3575AE !important;
	font-style: italic !important;
	margin-bottom: 12px !important;
}

.timeline-text {
	color: #64748B !important;
	font-size: 0.92rem !important;
	line-height: 1.6 !important;
	margin: 0 !important;
	max-width: 320px !important;
}

.timeline-cta {
	text-align: center !important;
	margin-top: 10px !important;
}

@media (max-width: 991px) {
	.timeline-track-container {
		gap: 32px !important;
	}
	.timeline-row {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}
	.timeline-step {
		align-items: flex-start !important;
		text-align: left !important;
		padding-left: 70px !important;
	}
	.timeline-marker {
		position: absolute !important;
		left: 0 !important;
		top: 0 !important;
		margin-bottom: 0 !important;
	}
	.timeline-text {
		max-width: 100% !important;
	}
}

/* ==========================================================================
   "Notre methode" - alternating vertical corporate timeline
   (replaces the horizontal snake layout above; .timeline-track-container /
   .timeline-row / .timeline-step / .timeline-marker rules further up in
   this file are now dead for this section but left in place since
   .process-steps / .process-step still power the service-page "Notre
   approche" section separately)
   ========================================================================== */
.vertical-timeline-section {
	padding: 80px 0 !important;
	background-color: #FFFFFF !important;
}

.v-timeline {
	position: relative !important;
	max-width: 1080px !important;
	margin: 0 auto 56px auto !important;
	padding: 20px 0 !important;
}

.v-timeline__line {
	position: absolute !important;
	left: 50% !important;
	top: 30px !important;
	bottom: 40px !important;
	width: 2px !important;
	background-color: rgba(255, 255, 255, 0.18) !important;
	transform: translateX(-50%) !important;
	z-index: 1 !important;
	overflow: hidden !important;
	border-radius: 2px !important;
}

.v-timeline__line-fill {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 0;
	background: linear-gradient(180deg, #38BDF8 0%, #3575AE 100%) !important;
	box-shadow: 0 0 12px rgba(56, 189, 248, 0.6) !important;
	border-radius: 2px !important;
	transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.v-timeline__item {
	position: relative !important;
	width: 50% !important;
	padding-bottom: 48px !important;
	box-sizing: border-box !important;
	z-index: 2 !important;
}

.v-timeline__item:last-child {
	padding-bottom: 0 !important;
}

.v-timeline__item--left {
	left: 0 !important;
	padding-right: 56px !important;
	text-align: right !important;
}

.v-timeline__item--right {
	left: 50% !important;
	padding-left: 56px !important;
	text-align: left !important;
}

.v-timeline__marker {
	position: absolute !important;
	top: 0 !important;
	width: 48px !important;
	height: 48px !important;
	background: #FFFFFF !important;
	border: 2px solid #CBD5E1 !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 3 !important;
	box-shadow: 0 4px 10px rgba(0,0,0,0.04) !important;
	transition: all 0.25s ease !important;
}

.v-timeline__item--left .v-timeline__marker {
	right: -24px !important;
}

.v-timeline__item--right .v-timeline__marker {
	left: -24px !important;
}

.v-timeline__num {
	font-size: 0.92rem !important;
	font-weight: 800 !important;
	color: #64748B !important;
	transition: color 0.25s ease !important;
}

.v-timeline__card {
	background: #F8FAFC !important;
	border: 1px solid #E2E8F0 !important;
	border-radius: 12px !important;
	padding: 28px !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease !important;
}

.v-timeline__title {
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	color: #0D1923 !important;
	margin-bottom: 6px !important;
}

.v-timeline__sig {
	font-size: 0.88rem !important;
	font-weight: 600 !important;
	color: #3575AE !important;
	font-style: italic !important;
	margin-bottom: 12px !important;
}

.v-timeline__desc {
	color: #475569 !important;
	font-size: 0.94rem !important;
	line-height: 1.6 !important;
	margin: 0 !important;
}

.v-timeline__item:hover .v-timeline__card,
.v-timeline__item.is-active .v-timeline__card {
	background: #FFFFFF !important;
	border-color: #CBD5E1 !important;
	box-shadow: 0 12px 30px rgba(13, 25, 35, 0.08) !important;
	transform: translateY(-2px) !important;
}

.v-timeline__item:hover .v-timeline__marker,
.v-timeline__item.is-active .v-timeline__marker {
	border-color: #3575AE !important;
	background: #1B4965 !important;
	transform: scale(1.1) !important;
	box-shadow: 0 4px 14px rgba(27, 73, 101, 0.25) !important;
}

.v-timeline__item:hover .v-timeline__num,
.v-timeline__item.is-active .v-timeline__num {
	color: #FFFFFF !important;
}

@media (max-width: 767px) {
	.v-timeline__line {
		/* left:24px is deliberate, not left:20px from the audit brief's
		   illustrative value - it matches the marker's own horizontal
		   center (48px wide, left:0), so the spine stays visually
		   centered through the marker. */
		left: 24px !important;
		bottom: 30px !important;
	}
	.v-timeline__item {
		width: 100% !important;
		left: 0 !important;
		padding-left: 70px !important;
		padding-right: 0 !important;
		text-align: left !important;
	}
	.v-timeline__item--left .v-timeline__marker,
	.v-timeline__item--right .v-timeline__marker {
		left: 0 !important;
		right: auto !important;
	}
}

/* ==========================================================================
   Homepage - Carrieres split (2 columns) + standalone Blog preview
   (replaces the former joint .home-section__split-grid section)
   ========================================================================== */
.section-careers-split {
	padding: 85px 0 !important;
	background-color: #FFFFFF !important;
}

.careers-split__grid {
	display: grid !important;
	grid-template-columns: 1fr 1.15fr !important;
	gap: 60px !important;
	align-items: center !important;
	max-width: 1240px !important;
	margin: 0 auto !important;
	padding: 0 24px !important;
}

.careers-split__frame {
	border-radius: 16px !important;
	overflow: hidden !important;
	box-shadow: 0 16px 36px rgba(13, 25, 35, 0.08) !important;
}

.careers-split__img {
	width: 100% !important;
	height: 100% !important;
	min-height: 420px !important;
	object-fit: cover !important;
	display: block !important;
}

.careers-split__content .section-eyebrow {
	display: inline-block !important;
	font-size: 0.8rem !important;
	font-weight: 700 !important;
	color: #3575AE !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	margin-bottom: 12px !important;
}

.careers-split__content h2 {
	font-size: clamp(1.8rem, 2.6vw, 2.3rem) !important;
	font-weight: 800 !important;
	color: #0D1923 !important;
	line-height: 1.25 !important;
	margin-bottom: 18px !important;
}

.careers-split__lead {
	font-size: 1.1rem !important;
	font-weight: 600 !important;
	color: #1E293B !important;
	line-height: 1.5 !important;
	margin-bottom: 14px !important;
}

.careers-split__text {
	color: #64748B !important;
	font-size: 0.98rem !important;
	line-height: 1.65 !important;
	margin-bottom: 28px !important;
}

.section-blog-preview {
	padding: 64px 0 !important;
	background-color: #F8FAFC !important;
	border-top: 1px solid #E2E8F0 !important;
}

.blog-preview__inner {
	max-width: 1240px !important;
	margin: 0 auto !important;
	padding: 0 24px !important;
}

.blog-preview__header {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	gap: 32px !important;
}

.blog-preview__header .section-eyebrow {
	display: inline-block !important;
	font-size: 0.8rem !important;
	font-weight: 700 !important;
	color: #3575AE !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	margin-bottom: 12px !important;
}

.blog-preview__header h2 {
	font-size: clamp(1.6rem, 2.2vw, 2rem) !important;
	font-weight: 800 !important;
	color: #0D1923 !important;
	margin-bottom: 8px !important;
}

.blog-preview__header p {
	color: #64748B !important;
	font-size: 1rem !important;
	margin: 0 !important;
}

.blog-preview__cta-wrap {
	flex-shrink: 0 !important;
}

@media (max-width: 991px) {
	.section-careers-split {
		padding: 55px 0 !important;
	}
	.careers-split__grid {
		grid-template-columns: 1fr !important;
		gap: 36px !important;
	}
	.careers-split__img {
		min-height: 240px !important;
		max-height: 320px !important;
	}
	.blog-preview__header {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 20px !important;
	}
}

/* ==========================================================================
   Homepage - final reassurance banner, ISS World floating CTA card
   (replaces .reassurance-banner on the homepage only; that class/CSS is
   left untouched since all 8 service pages still use it)
   ========================================================================== */
.section-iss-cta-banner {
	padding: 50px 0 90px 0 !important;
	background-color: #FFFFFF !important;
}

.section-iss-cta-banner .section-inner {
	max-width: 1260px !important;
	margin: 0 auto !important;
	padding: 0 24px !important;
}

.iss-cta-card {
	background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
	border-radius: 28px !important;
	padding: 64px 56px !important;
	display: grid !important;
	grid-template-columns: 1.25fr 1fr !important;
	gap: 56px !important;
	align-items: center !important;
	box-shadow: 0 20px 48px rgba(2, 132, 199, 0.22) !important;
	position: relative !important;
	overflow: hidden !important;
}

.iss-cta-card__left {
	display: flex !important;
	flex-direction: column !important;
}

.iss-cta-card__eyebrow {
	color: rgba(255, 255, 255, 0.85) !important;
	font-size: 0.82rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	margin-bottom: 16px !important;
}

.iss-cta-card__title {
	color: #FFFFFF !important;
	font-size: clamp(2rem, 3.2vw, 2.8rem) !important;
	font-weight: 800 !important;
	line-height: 1.18 !important;
	margin: 0 !important;
	letter-spacing: -0.02em !important;
}

.iss-cta-card__right {
	display: flex !important;
	flex-direction: column !important;
	gap: 24px !important;
}

.iss-cta-card__desc {
	color: rgba(255, 255, 255, 0.95) !important;
	font-size: 1.05rem !important;
	line-height: 1.6 !important;
	margin: 0 !important;
}

.iss-cta-card__actions {
	display: flex !important;
	align-items: center !important;
	gap: 20px !important;
	flex-wrap: wrap !important;
}

.iss-cta-btn-primary {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-color: transparent !important;
	color: #FFFFFF !important;
	border: 2px solid #FFFFFF !important;
	border-radius: 9999px !important;
	padding: 14px 30px !important;
	font-size: 0.96rem !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.iss-cta-btn-primary:hover {
	background-color: #FFFFFF !important;
	color: #0369A1 !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

.iss-cta-btn-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	color: #FFFFFF !important;
	font-size: 0.96rem !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.iss-cta-btn-link:hover {
	opacity: 0.85 !important;
	transform: translateX(3px) !important;
}

.iss-cta-btn-link svg {
	transition: transform 0.2s ease !important;
}

.iss-cta-btn-link:hover svg {
	transform: translateX(4px) !important;
}

@media (max-width: 991px) {
	.iss-cta-card {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
		padding: 44px 32px !important;
		border-radius: 20px !important;
	}
	.iss-cta-card__actions {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 16px !important;
	}
	.iss-cta-btn-primary {
		width: 100% !important;
		text-align: center !important;
	}
}

/* ==========================================================================
   Operational media placeholder (art direction scaffolding for real
   operational photography - neutral, no stock imagery)
   ========================================================================== */
.operational-media {
	max-width: 1240px;
	width: 92%;
	margin: 0 auto 50px auto;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%);
	border: 1px solid #E2E8F0;
	border-radius: 8px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.operational-media--21x9 {
	aspect-ratio: 21 / 9;
}

.operational-media figcaption {
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-style: italic;
}

/* ==========================================================================
   Sticky mobile CTA bar - removed. Kept as a hard suppression rule in
   case the markup or a cached page still echoes the element anywhere.
   ========================================================================== */
.sticky-mobile-cta {
	display: none !important;
}

/* ==========================================================================
   Custom corporate footer (Onet / Derichebourg style, 4-column grid,
   replaces GeneratePress default copyright)
   ========================================================================== */
.site-footer {
	background-color: #0B1724 !important;
	color: #94A3B8 !important;
	padding: 80px 0 35px 0 !important;
	border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.footer-container {
	max-width: 1260px !important;
	margin: 0 auto !important;
	padding: 0 24px !important;
}

.footer-grid {
	display: grid !important;
	grid-template-columns: 1.3fr 1.2fr 1fr 1fr !important;
	gap: 48px !important;
	align-items: flex-start !important;
	margin-bottom: 60px !important;
	text-align: left !important;
}

.footer-col {
	text-align: left !important;
}

.footer-logo {
	max-width: 150px !important;
	height: auto !important;
	margin-bottom: 20px !important;
	display: block !important;
	filter: brightness(0) invert(1);
}

.footer-brand-desc {
	font-size: 0.92rem !important;
	line-height: 1.65 !important;
	color: #94A3B8 !important;
	margin-bottom: 16px !important;
}

/* GeneratePress's own link color rules use var(--contrast), which on
   this dark footer background resolves close to black - every state
   (hover/active/focus/visited) needs its own explicit override, not
   just the base state, or tapping/hovering a footer link (the
   tel:/mailto: links in .footer-contact-item in particular, which had
   no color rule of their own at all before this) turns it unreadable
   against the dark background. Placed here, BEFORE .footer-nav-list a
   and .footer-social__link below, so those two keep winning their own
   more deliberate hover accents (cyan, dark-on-cyan) via normal
   cascade order at equal specificity - this block only takes over
   anywhere nothing more specific already claimed the color. */
.site-footer a,
.site-footer a:link,
.site-footer a:visited,
.site-footer a:hover,
.site-footer a:active,
.site-footer a:focus {
	color: #FFFFFF !important;
}

.footer-contact-item a,
.footer-contact-item a:link,
.footer-contact-item a:visited,
.footer-contact-item a:hover,
.footer-contact-item a:active,
.footer-contact-item a:focus {
	color: #93C5FD !important;
	text-decoration: none !important;
}

.footer-social {
	display: flex !important;
	gap: 12px !important;
	margin-top: 4px !important;
}

a.footer-social__link {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	background-color: rgba(255, 255, 255, 0.08) !important;
	color: #FFFFFF !important;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
}

/* Specificity needs the "a" element too (matching .site-footer a:hover's
   own specificity above), otherwise the broader rule - which includes
   an element selector this one didn't - would win regardless of source
   order and force this icon white even while hovered over its own
   light cyan background. */
a.footer-social__link:hover,
a.footer-social__link:focus {
	background-color: #38BDF8 !important;
	color: #0B1724 !important;
	transform: translateY(-2px) !important;
}

.footer-badge-gov {
	display: inline-block !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	color: #38BDF8 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
}

.footer-heading {
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	color: #FFFFFF !important;
	letter-spacing: 0.04em !important;
	margin-bottom: 22px !important;
	position: relative !important;
	padding-bottom: 10px !important;
	text-transform: none !important;
}

.footer-heading::after {
	content: '' !important;
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	width: 28px !important;
	height: 2px !important;
	background-color: #3575AE !important;
}

.footer-nav-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.footer-nav-list li {
	margin-bottom: 11px !important;
	line-height: 1.4 !important;
}

.footer-nav-list a {
	color: #94A3B8 !important;
	font-size: 0.9rem !important;
	text-decoration: none !important;
	transition: color 0.2s ease, transform 0.2s ease !important;
	display: inline-block !important;
}

.footer-nav-list a:hover {
	color: #38BDF8 !important;
	transform: translateX(4px) !important;
}

.footer-contact-item {
	font-size: 0.9rem !important;
	line-height: 1.6 !important;
	color: #94A3B8 !important;
	margin-bottom: 12px !important;
}

.footer-contact-item strong {
	color: #E2E8F0 !important;
}

.footer-cta-box {
	margin-top: 24px !important;
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
	padding-top: 28px !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 16px !important;
}

.footer-signature {
	color: #E2E8F0 !important;
	font-size: 0.88rem !important;
	font-weight: 500 !important;
	font-style: italic !important;
	margin: 0 !important;
}

.footer-copy {
	color: #64748B !important;
	font-size: 0.84rem !important;
	margin: 0 !important;
}

@media (max-width: 1024px) {
	.footer-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 32px !important;
	}
}

@media (max-width: 768px) {
	.site-footer {
		padding: 55px 0 30px 0 !important;
	}
	.footer-grid {
		grid-template-columns: 1fr !important;
		gap: 28px !important;
	}
	.footer-bottom {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 8px !important;
	}
}

/* ==========================================================================
   Site header (logo + navigation) - dark header, single-line nav
   ========================================================================== */
.site-logo {
	display: inline-flex;
	align-items: center;
}

/* Hide the redundant text site title once a logo is active */
body.wp-custom-logo .main-title {
	display: none;
}

/* Parent header containers must never clip absolutely-positioned
   dropdown submenus (e.g. an overflow:hidden used for pill-clipping
   elsewhere would also hide the "Nos services" dropdown). */
.site-header,
.inside-header,
#site-navigation,
.main-navigation,
.inside-navigation {
	overflow: visible !important;
}

/* --- DESKTOP (min-width: 992px) - Armonia-style floating pill header --- */
@media (min-width: 992px) {
	.site-header {
		position: absolute !important;
		top: 24px !important;
		left: 0 !important;
		right: 0 !important;
		z-index: 1000 !important;
		background: transparent !important;
		border: none !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.inside-header {
		background: #FFFFFF !important;
		max-width: 1260px !important;
		width: 94% !important;
		margin: 0 auto !important;
		padding: 6px 14px 6px 20px !important;
		border-radius: 9999px !important;
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		box-sizing: border-box !important;
		overflow: visible !important;
	}

	.site-branding-container {
		flex-shrink: 0 !important;
		margin-right: 16px !important;
	}

	.site-logo img.header-image {
		max-height: 40px !important;
		width: auto !important;
		display: block !important;
		background: transparent !important;
		border: none !important;
		padding: 0 !important;
	}

	#site-navigation {
		margin-left: auto !important;
	}

	.main-navigation .main-nav > ul {
		display: flex !important;
		align-items: center !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		gap: 24px !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}

	.main-navigation .main-nav > ul > li > a {
		color: #1E293B !important;
		font-size: 0.82rem !important;
		font-weight: 600 !important;
		padding: 8px 9px !important;
		letter-spacing: -0.01em !important;
		line-height: 1 !important;
		white-space: nowrap !important;
		transition: color 0.2s ease !important;
	}

	.main-navigation .main-nav > ul > li:hover > a,
	.main-navigation .main-nav > ul > li.current-menu-item > a {
		color: #3575AE !important;
	}

	.main-navigation .main-nav > ul > li.menu-item-has-children {
		position: relative !important;
		padding-bottom: 8px !important;
		margin-bottom: -8px !important;
	}

	.main-navigation .main-nav ul ul.sub-menu {
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		min-width: 280px !important;
		background-color: #FFFFFF !important;
		border: 1px solid #E2E8F0 !important;
		border-radius: 8px !important;
		box-shadow: 0 14px 35px rgba(0, 0, 0, 0.15) !important;
		padding: 10px 0 !important;
		padding-top: 6px !important;
		margin-top: 8px !important;
		z-index: 99999 !important;
		list-style: none !important;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(6px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
		display: block !important;
	}

	/* Invisible hover bridge: covers the gap between the parent nav item
	   and the dropdown box so the cursor never "loses" hover while moving
	   down from the link to the submenu. */
	.main-navigation .main-nav ul ul.sub-menu::before {
		content: '' !important;
		position: absolute !important;
		top: -12px !important;
		left: 0 !important;
		right: 0 !important;
		height: 14px !important;
		background: transparent !important;
		display: block !important;
	}

	.main-navigation .main-nav ul li:hover > ul.sub-menu,
	.main-navigation .main-nav ul li.sfHover > ul.sub-menu {
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		transform: translateY(0) !important;
	}

	.main-navigation .main-nav ul ul.sub-menu li {
		display: block !important;
		width: 100% !important;
		float: none !important;
	}

	.main-navigation .main-nav ul ul.sub-menu li a {
		display: block !important;
		color: #1E293B !important;
		font-size: 0.85rem !important;
		font-weight: 500 !important;
		padding: 10px 18px !important;
		line-height: 1.3 !important;
		white-space: normal !important;
		text-align: left !important;
		transition: background-color 0.15s ease, color 0.15s ease !important;
	}

	.main-navigation .main-nav ul ul.sub-menu li a:hover {
		background-color: #F8FAFC !important;
		color: #3575AE !important;
	}

	/* Pill CTA Button */
	.main-navigation .main-nav > ul > li.btn-signature-cta {
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		padding: 0 !important;
		margin-left: 8px !important;
		margin-right: 2px !important;
		flex-shrink: 0 !important;
		display: inline-flex !important;
		align-items: center !important;
	}

	.main-navigation .main-nav > ul > li.btn-signature-cta a,
	.main-navigation .main-nav > ul > li.btn-signature-cta a.btn-signature-cta--header {
		background-color: #1B4965 !important;
		color: #FFFFFF !important;
		padding: 9px 18px !important;
		border-radius: 9999px !important;
		font-size: 0.82rem !important;
		font-weight: 700 !important;
		line-height: 1 !important;
		text-decoration: none !important;
		white-space: nowrap !important;
		display: inline-block !important;
		box-shadow: 0 2px 8px rgba(27, 73, 101, 0.25) !important;
		transition: background-color 0.2s ease !important;
	}

	.main-navigation .main-nav > ul > li.btn-signature-cta a:hover {
		background-color: #0D1923 !important;
	}
}

/* --- MOBILE & TABLET (< 992px) --- */
@media (max-width: 991px) {
	.site-header {
		background: #FFFFFF !important;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
		position: relative !important;
		top: 0 !important;
	}

	.inside-header {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		padding: 10px 16px !important;
		box-sizing: border-box !important;
		width: 100% !important;
	}

	.site-logo img.header-image {
		max-height: 34px !important;
		width: auto !important;
		background: transparent !important;
	}

	button.menu-toggle {
		background: transparent !important;
		color: #0D1923 !important;
		border: none !important;
		font-size: 1.2rem !important;
		padding: 6px 10px !important;
		min-width: 44px !important;
		min-height: 44px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	.main-navigation.toggled .main-nav > ul {
		background-color: #0D1923 !important;
		padding: 12px 0 !important;
	}

	.main-navigation.toggled .main-nav > ul > li > a {
		color: #CBD5E1 !important;
		padding: 12px 20px !important;
		display: block !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
	}

	.main-navigation.toggled .main-nav > ul > li.btn-signature-cta {
		padding: 12px 20px !important;
	}

	.hero-service {
		/* Header is position:fixed and no longer reserves flow space, so
		   this needs to clear its own rendered height (~62px) rather
		   than just add breathing room on top of it. Bumped from 90px to
		   160px per the responsive-audit brief's explicit "min 150px
		   clearance on mobile" requirement - 90px left only ~28px of
		   actual breathing room above the H1 once the fixed header's own
		   height was subtracted. */
		padding-top: 160px !important;
		padding-bottom: 60px !important;
		min-height: auto !important;
	}
}

/* ==========================================================================
   Mobile navigation - fullscreen drawer overhaul. GeneratePress's "inline
   mobile toggle" setting renders two separate menu-toggle buttons (one in
   #mobile-menu-control-wrapper next to the logo, one inside
   #site-navigation itself), both wired to the same drawer - this hides
   the duplicate, keeps the remaining one docked top-right (swapping to a
   persistent close/X icon while open), expands the drawer to full
   viewport, and hides the sticky CTA bar while the drawer is open.
   ========================================================================== */
@media (max-width: 768px) {
	.site-header .inside-header > .mobile-menu-control-wrapper {
		display: none !important;
	}

	.site-header .inside-header {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		padding: 14px 20px !important;
		position: relative !important;
		background: #FFFFFF !important;
	}

	.site-branding-container {
		margin: 0 !important;
		display: flex !important;
		align-items: center !important;
	}

	.site-logo img {
		height: 38px !important;
		width: auto !important;
		display: block !important;
	}

	#site-navigation {
		margin: 0 !important;
		position: static !important;
		display: flex !important;
		align-items: center !important;
	}

	#site-navigation button.menu-toggle {
		background: transparent !important;
		border: none !important;
		padding: 8px !important;
		margin: 0 !important;
		color: #0D1923 !important;
		font-size: 1.3rem !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		cursor: pointer !important;
		z-index: 100001 !important;
	}

	#site-navigation button.menu-toggle .mobile-menu {
		display: none !important;
	}

	/* Keep the close (X) icon visible and crisp when toggled */
	#site-navigation.toggled button.menu-toggle {
		position: fixed !important;
		top: 16px !important;
		right: 20px !important;
		color: #FFFFFF !important;
		z-index: 100002 !important;
	}

	#site-navigation.toggled button.menu-toggle .gp-icon svg:first-child {
		display: none !important;
	}

	#site-navigation.toggled button.menu-toggle .gp-icon svg:last-child {
		display: block !important;
		fill: #FFFFFF !important;
		width: 22px !important;
		height: 22px !important;
	}

	#site-navigation.toggled .main-nav {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		flex-direction: column !important;
		justify-content: space-between !important;
		position: fixed !important;
		inset: 0 !important;
		height: 100dvh !important;
		background-color: #0B1724 !important;
		padding: 80px 24px 32px 24px !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
		overscroll-behavior: contain !important;
		touch-action: pan-y !important;
		z-index: 100000 !important;
		box-sizing: border-box !important;
	}

	#site-navigation.toggled ul.sf-menu {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		flex-direction: column !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}

	#site-navigation.toggled ul.sf-menu > li {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		width: 100% !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
		text-align: left !important;
	}

	#site-navigation.toggled ul.sf-menu > li > a {
		color: #FFFFFF !important;
		-webkit-text-fill-color: #FFFFFF !important;
		font-size: 1.15rem !important;
		font-weight: 700 !important;
		padding: 16px 0 !important;
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		justify-content: space-between !important;
		align-items: center !important;
		text-decoration: none !important;
	}

	/* Color-only reinforcement against .is-scrolled - deliberately
	   separate from the rule above rather than added as a second
	   selector on it. Bundling .is-scrolled into that same declaration
	   block last round was the actual bug behind "CTA text snaps back
	   to left when scrolled": that selector's extra classes
	   (site-header + is-scrolled) gave it higher specificity than the
	   dedicated CTA rule below, so its justify-content:space-between
	   (meant for plain nav links with a dropdown arrow) was winning
	   over the CTA's justify-content:center whenever the header had
	   been scrolled. This rule now only ever touches color. */
	.site-header.is-scrolled #site-navigation.toggled ul.sf-menu > li > a {
		color: #FFFFFF !important;
		-webkit-text-fill-color: #FFFFFF !important;
	}

	#site-navigation.toggled ul.sf-menu > li > a:hover,
	#site-navigation.toggled ul.sf-menu > li.current-menu-item > a {
		color: #38BDF8 !important;
	}

	#site-navigation.toggled ul.sub-menu {
		background-color: rgba(255, 255, 255, 0.04) !important;
		border-radius: 8px !important;
		padding: 8px 16px !important;
		margin: 8px 0 14px 0 !important;
		list-style: none !important;
	}

	#site-navigation.toggled ul.sub-menu li a {
		color: #CBD5E1 !important;
		font-size: 0.95rem !important;
		padding: 10px 0 !important;
		display: block !important;
		text-decoration: none !important;
	}

	/* The dropdown arrow toggle (e.g. next to "Nos services") only had
	   color/fill styling scoped to min-width:992px elsewhere in this
	   file - unstyled inside the drawer, it was falling back to
	   GeneratePress core's own default (dark) icon color, low-contrast
	   or invisible against the drawer's dark navy background. */
	#site-navigation.toggled .dropdown-menu-toggle {
		color: #FFFFFF !important;
	}

	#site-navigation.toggled .dropdown-menu-toggle svg {
		fill: #FFFFFF !important;
	}

	/* "Definir mon besoin" CTA inside the mobile drawer - was rendering
	   as an oversized, misaligned rectangle because nothing in this
	   drawer's CSS targeted the link itself (only the generic
	   ul.sf-menu > li > a rule above), so it fell back to that plain
	   nav-link treatment instead of looking like a button. A previous
	   round's .main-navigation.toggled .main-nav > ul > li.btn-signature-
	   cta rule (no ID, still present further up this file) only ever
	   set the <li>'s padding, never the <a>'s - this rule's #site-
	   navigation ID prefix outranks it regardless of source order, on
	   both the <li> and the <a>. */
	#site-navigation.toggled ul.sf-menu > li.btn-signature-cta {
		display: block !important;
		margin: 24px 0 16px 0 !important;
		padding: 0 !important;
		width: 100% !important;
		text-align: center !important;
		border: none !important;
		border-bottom: none !important;
	}

	#site-navigation.toggled ul.sf-menu > li.btn-signature-cta > a,
	.site-header.is-scrolled #site-navigation.toggled ul.sf-menu > li.btn-signature-cta > a {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 52px !important;
		min-height: 52px !important;
		padding: 0 24px !important;
		background: #1D63B8 !important;
		background-color: #1D63B8 !important;
		color: #FFFFFF !important;
		-webkit-text-fill-color: #FFFFFF !important;
		font-size: 1rem !important;
		font-weight: 600 !important;
		letter-spacing: 0.01em !important;
		line-height: 1 !important;
		text-align: center !important;
		border-radius: 12px !important;
		box-shadow: 0 4px 14px rgba(29, 99, 184, 0.3) !important;
		text-decoration: none !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}

	#site-navigation.toggled ul.sf-menu > li.btn-signature-cta > a:hover,
	#site-navigation.toggled ul.sf-menu > li.btn-signature-cta > a:active {
		background: #154D91 !important;
		background-color: #154D91 !important;
		color: #FFFFFF !important;
	}

	#primary-menu .menu-item-62,
	#primary-menu .btn-signature-cta--header {
		display: none !important;
	}
}

/* ==========================================================================
   Mobile-first adjustments
   ========================================================================== */
@media (max-width: 480px) {
	.btn-signature-cta {
		width: 100%;
		font-size: 1rem;
	}

	/* The header CTA must stay compact and inline, never full-width/block,
	   even under the general mobile .btn-signature-cta width:100% rule. */
	.main-nav .btn-signature-cta--header {
		width: auto !important;
		display: inline-block !important;
	}

	.card-service-box,
	.process-step,
	.card-solution {
		padding: 1.25rem !important;
	}
}

/* ==========================================================================
   Mobile header - single-row fix (root cause: GeneratePress's own core
   rule ".has-inline-mobile-toggle #site-navigation{flex-basis:100%}" was
   never overridden, so #site-navigation always took its own full row and
   wrapped below the logo, independent of the mobile-menu-control-wrapper
   hide/drawer work done in earlier rounds - confirmed by inspecting
   GeneratePress's own inline CSS on the live site before writing this).
   ========================================================================== */
@media (max-width: 768px) {
	.site-header .inside-header {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		padding: 12px 20px !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.site-branding-container {
		flex: 0 0 auto !important;
		margin: 0 !important;
		padding: 0 !important;
		order: 1 !important;
	}

	.site-logo img {
		height: 36px !important;
		width: auto !important;
		max-width: 150px !important;
		display: block !important;
	}

	.site-header .mobile-menu-control-wrapper {
		display: none !important;
		visibility: hidden !important;
		width: 0 !important;
		height: 0 !important;
	}

	.has-inline-mobile-toggle #site-navigation {
		flex: 0 0 auto !important;
		order: 2 !important;
		margin: 0 !important;
		padding: 0 !important;
		background: transparent !important;
		width: auto !important;
		display: block !important;
	}

	#site-navigation .inside-navigation {
		padding: 0 !important;
		margin: 0 !important;
		display: flex !important;
		align-items: center !important;
	}

	#site-navigation button.menu-toggle {
		background: transparent !important;
		border: none !important;
		padding: 6px !important;
		margin: 0 !important;
		color: #0D1923 !important;
		font-size: 1.4rem !important;
		line-height: 1 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		cursor: pointer !important;
	}

	#site-navigation button.menu-toggle .mobile-menu {
		display: none !important;
	}

	#site-navigation.toggled button.menu-toggle {
		position: fixed !important;
		top: 16px !important;
		right: 20px !important;
		z-index: 100002 !important;
		color: #FFFFFF !important;
	}

	#site-navigation.toggled .main-nav {
		display: flex !important;
		flex-direction: column !important;
		justify-content: space-between !important;
		position: fixed !important;
		inset: 0 !important;
		height: 100dvh !important;
		background-color: #0B1724 !important;
		padding: 80px 24px 32px 24px !important;
		overflow-y: auto !important;
		overscroll-behavior: contain !important;
		touch-action: pan-y !important;
		z-index: 100000 !important;
		box-sizing: border-box !important;
	}
}

/* ==========================================================================
   "Notre methode" vertical timeline - smooth mobile scroll-driven fill
   ========================================================================== */
@media (max-width: 768px) {
	.v-timeline__line-fill {
		transition: height 0.25s ease-out !important;
	}
	.v-timeline__item {
		transition: opacity 0.3s ease !important;
	}
	.v-timeline__item:not(.is-active) {
		opacity: 0.65 !important;
	}
	.v-timeline__item.is-active {
		opacity: 1 !important;
	}
}

/* ==========================================================================
   Center all CTA buttons on mobile (sticky-mobile-cta removed, so every
   section's CTA needs to stand on its own as a centered target)
   ========================================================================== */
@media (max-width: 768px) {
	.btn-signature-cta,
	.iss-cta-btn-primary,
	.iss-cta-btn-link {
		display: inline-flex !important;
		justify-content: center !important;
		align-items: center !important;
		text-align: center !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.hero-actions {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		gap: 12px !important;
	}

	.hero-actions .btn-signature-cta {
		width: 100% !important;
		max-width: 320px !important;
	}

	.conviction-split__actions,
	.solutions-footer-cta,
	.timeline-cta,
	.future-services__actions,
	.careers-split__actions,
	.blog-preview__cta-wrap,
	.iss-cta-card__actions,
	.footer-cta-box {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
		text-align: center !important;
		margin: 0 auto !important;
	}

	.conviction-split__actions .btn-signature-cta,
	.solutions-footer-cta .btn-signature-cta,
	.timeline-cta .btn-signature-cta,
	.future-services__actions .btn-signature-cta,
	.careers-split__actions .btn-signature-cta,
	.blog-preview__cta-wrap .btn-signature-cta,
	.iss-cta-card__actions .iss-cta-btn-primary,
	.footer-cta-box .btn-signature-cta {
		width: 100% !important;
		max-width: 340px !important;
	}

	.iss-cta-card__actions {
		flex-direction: column !important;
		gap: 16px !important;
	}

	.iss-cta-btn-link {
		width: auto !important;
	}
}

/* ==========================================================================
   Header - definitive full-width sticky architecture (v1.8.3). Replaces
   every prior header positioning/background round (the position:fixed
   centered-pill base, the v1.8.0 compact-capsule .inside-header paint,
   and the v1.8.1 ghost-pill strip) wholesale instead of stacking a 4th
   layer on top - all three are consolidated here as a single source of
   truth to stop the repeated double-background/ghost-pill regressions.

   header.site-header is now a full-width (left:0/right:0/width:100%)
   transparent shell at all times; .inside-header carries 100% of the
   visual pill/bar styling, toggled by the .is-scrolled class from the
   scroll listener in functions.php:
     - not scrolled: shell is transparent, .inside-header is a centered
       floating white pill (border-radius:9999px, max-width:1220px)
     - scrolled: shell itself becomes the solid white bar (full width,
       bottom border), .inside-header goes transparent/square/full-width
       so only ONE element is ever painting a background at a time.

   backdrop-filter is explicitly cleared on the not-scrolled shell: the
   old base rule set backdrop-filter:blur(12px) on a narrow centered
   pill, which was harmless there, but this shell is now full-width, so
   an inherited blur would smear across the ENTIRE top of the viewport
   (not just the visible pill) if left unset.
   ========================================================================== */
header.site-header {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 99999 !important;
	transition: background 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease !important;
}

header.site-header:not(.is-scrolled) {
	background: transparent !important;
	background-color: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	box-shadow: none !important;
	border: none !important;
	padding-top: 18px !important;
	padding-bottom: 0 !important;
}

header.site-header:not(.is-scrolled) .inside-header {
	background: #FFFFFF !important;
	border-radius: 9999px !important;
	box-shadow: 0 10px 35px rgba(0, 0, 0, 0.12) !important;
	border: 1px solid rgba(226, 232, 240, 0.8) !important;
	max-width: 1220px !important;
	margin: 0 auto !important;
	padding: 6px 16px 6px 22px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	box-sizing: border-box !important;
}

header.site-header.is-scrolled {
	background: #FFFFFF !important;
	background-color: #FFFFFF !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	border-bottom: 1px solid #E2E8F0 !important;
}

header.site-header.is-scrolled .inside-header {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border: none !important;
	border-radius: 0 !important;
	max-width: 1380px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 10px 24px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	box-sizing: border-box !important;
}

/* Nav links contrast guarantee against the solid white scrolled bar -
   desktop only. Root cause of a real bug found here: .is-scrolled is
   toggled by a single window-level scroll listener with no viewport
   gate, and the actual <ul> is id="menu-main-menu" AND class="sf-menu"
   at once (confirmed on the live markup), so this rule's ID-based
   specificity (1,3,3) was beating the mobile drawer's own white-text
   rule #site-navigation.toggled ul.sf-menu > li > a (1,2,3) whenever
   .is-scrolled was present - making every drawer link render dark
   navy (#0F172A) on the drawer's dark navy (#0B1724) background,
   i.e. invisible, exactly reproducing "text disappears on scroll,
   dividers/CTA still visible" (those aren't text-color dependent).
   This rule only ever needed to apply to the real desktop horizontal
   bar in the first place - wrapping it in min-width:769px fixes the
   conflict at its source instead of trying to out-specificity it from
   the mobile side. */
@media (min-width: 769px) {
	.site-header.is-scrolled .main-navigation ul#menu-main-menu > li > a {
		color: #0F172A !important;
	}
}

/* Mobile keeps the pre-v1.8.3, validated behaviour: always a solid,
   flush white bar (no floating pill state) so it stays a stable anchor
   for the fullscreen drawer toggle regardless of scroll position. Same
   selectors as the base rules above, placed after them in source order
   so they win at this breakpoint on specificity ties. */
@media (max-width: 768px) {
	header.site-header,
	header.site-header:not(.is-scrolled) {
		background: #FFFFFF !important;
		background-color: #FFFFFF !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
		border-bottom: 1px solid #E2E8F0 !important;
		border-top: none !important;
		border-left: none !important;
		border-right: none !important;
		padding-top: 0 !important;
	}
	header.site-header:not(.is-scrolled) .inside-header,
	header.site-header.is-scrolled .inside-header {
		background: transparent !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		border: none !important;
		max-width: 100% !important;
		padding: 12px 20px !important;
	}
}

.main-navigation .main-nav ul li a {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Since .site-header is now position:fixed (out of normal document flow),
   the page content needs top clearance so it doesn't start underneath
   the floating header - the hero section's own increased top padding
   (see below) handles this on the homepage, but other templates whose
   first element isn't a full-bleed hero need it directly on the page.

   Service pages are explicitly excluded here too: template-service.php
   ALSO opens with a full-bleed .hero-service, same as the homepage, so
   this rule was wrongly catching it - it pushed the entire hero section
   (photo background included) down by 96px, leaving a 96px gap of bare
   page background between the floating header and the top of the
   hero's own photo instead of the photo extending behind the header
   the way it's meant to. The service hero's own padding-top (see the
   body.page-template-template-service-php .hero-service rule below)
   already provides the header clearance directly, the same way the
   homepage's does. */
body:not(.page-template-template-home-php):not(.page-template-template-service-php):not(.page-template-template-histoire-vision-php):not(.page-template-template-methode-php):not(.page-template-template-domaines-php):not(.page-template-template-carrieres-php):not(.page-template-template-services-hub-php):not(.page-template-template-blog-php):not(.page-template-template-contact-php):not(.page-template-page-recrutement-php):not(.single-post) .site-content {
	padding-top: 96px !important;
}

/* ==========================================================================
   Header menu inner background fix - GeneratePress injects its own
   background on #site-navigation/.inside-navigation/.main-nav/ul.sf-menu,
   which shows as a mismatched white/grey rectangle behind the links
   inside the floating capsule. Scoped to desktop (min-width:992px) -
   the "capsule" is a desktop-only shape (the mobile header is a flat
   bar), and several of these selectors tie in specificity with the
   fullscreen mobile drawer's own item-divider borders and sub-menu
   background (both #site-navigation.toggled ...), which would otherwise
   lose the source-order tiebreak and go missing/wrong on mobile.
   ========================================================================== */
@media (min-width: 992px) {
	.site-header #site-navigation,
	.site-header #site-navigation .inside-navigation,
	.site-header #site-navigation .main-nav,
	.site-header #site-navigation .main-nav > ul,
	.site-header #site-navigation ul.sf-menu,
	.site-header #site-navigation ul.sf-menu > li,
	.site-header #site-navigation ul.sf-menu > li > a {
		background: transparent !important;
		background-color: transparent !important;
		box-shadow: none !important;
		border: none !important;
	}

	.site-header #site-navigation ul.sub-menu {
		background-color: #FFFFFF !important;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
		border-radius: 8px !important;
		border: 1px solid #E2E8F0 !important;
	}

	.site-header #site-navigation ul.sub-menu li a {
		background-color: transparent !important;
	}

	.site-header #site-navigation ul.sub-menu li a:hover {
		background-color: #F8FAFC !important;
		color: #3575AE !important;
	}

	.site-header #site-navigation ul.sf-menu > li.btn-signature-cta a {
		background-color: #1E3A5F !important;
		color: #FFFFFF !important;
	}
}

/* ==========================================================================
   Client revisions - C. Systematic section color alternation
   ========================================================================== */
.home-section--dark {
	background-color: #0B1724 !important;
	color: #FFFFFF !important;
}

.home-section--white {
	background-color: #FFFFFF !important;
}

.home-section--soft {
	background-color: #0F2032 !important;
	color: #FFFFFF !important;
}

.home-section--soft h2,
.home-section--soft h3 {
	color: #FFFFFF !important;
}

.home-section--soft p {
	color: #94A3B8 !important;
}

/* .home-section--soft now renders dark, but the "Blog" section that
   also uses it has its own higher-specificity heading/paragraph color
   rules from earlier rounds (all !important) that would otherwise keep
   rendering dark text on this now-dark background - explicit override
   below so it stays legible. The "Notre methode" section is dark for
   the same reason but uses its own custom .vertical-timeline-section
   class rather than .home-section--dark, so it needs its own explicit
   dark treatment too.

   The Solutions section itself is reverted back to a light "soft" band
   below (see "Mobile contrast fix" block further down) - it turned out
   the mobile-only contrast bug reported for .card-solution was rooted
   here: this section rendering dark while its cards stayed white made
   the title/body text on those cards fall back to this file's dark-
   section defaults (invisible white title, low-contrast grey body) on
   any viewport where the desktop-only 2-class override wasn't also
   declared. Reverting Solutions to light removes the dark/light clash
   at its source instead of patching around it per-breakpoint. */
.blog-preview__header .section-eyebrow {
	color: #38BDF8 !important;
}

.blog-preview__header h2 {
	color: #FFFFFF !important;
}

.blog-preview__header p {
	color: #94A3B8 !important;
}

.vertical-timeline-section {
	background-color: #0B1724 !important;
}

/* Solutions section - validated dark design, shared identically by
   both templates (no per-template override left anywhere for this
   section - see the removed service-page block further down). The
   compound second selector below isn't redundant: an element matching
   both .section-solutions (1 class) and .home-section--soft.section-
   solutions (2 classes) gets the higher-specificity match, which is
   what actually guarantees this beats .home-section--soft{background-
   color:#0F2032} above regardless of source order. */
.section-solutions,
.home-section--soft.section-solutions {
	background-color: #0B1724 !important;
	background: #0B1724 !important;
	color: #FFFFFF !important;
	padding: 90px 20px !important;
}

.section-solutions .solutions-header h2 {
	color: #FFFFFF !important;
	font-size: 2.25rem !important;
	font-weight: 700 !important;
	text-align: center !important;
	margin-bottom: 16px !important;
}

.section-solutions .solutions-header p {
	color: #94A3B8 !important;
	font-size: 1.05rem !important;
	line-height: 1.6 !important;
	max-width: 780px !important;
	margin: 0 auto 48px auto !important;
	text-align: center !important;
}

/* Service pages now match the homepage's dark Solutions treatment
   exactly - the previous round's body.page-template-template-service-php
   .section-solutions light-override block (and its matching
   .card-solution light border/shadow override) has been removed rather
   than layered over again, so both templates fall through to the one
   shared dark rule above with no per-template divergence left to go
   stale next time this section changes. */

/* Service pages reuse the homepage's .domaines-grid-onet/.domaine-card-onet
   system for "Profils mobilisables" (Onet-style overlay cards) instead
   of the flatter .profils-grid-onet system built earlier - scoped by
   body class so the homepage's fixed 10-tile 5-column grid is
   untouched. Profil count varies per service (4-6), so auto-fit
   replaces the homepage's hardcoded repeat(5,1fr): a fixed 5-column
   track would leave a bare empty column for any service with fewer
   than 5 profils. */
body.page-template-template-service-php .domaines-grid-onet {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

/* Service page FAQ section - full-bleed soft band matching the section
   rhythm of Solutions/Profils/etc, instead of the old bare narrow
   container it used to be. .section-faq keeps the light #F8FAFC it's
   given here rather than inheriting .home-section--soft's dark navy,
   since (unlike Solutions) this section has no homepage counterpart to
   stay consistent with - it only exists on service pages. */
.section-faq {
	background-color: #F8FAFC !important;
}

.faq-header {
	text-align: center !important;
	max-width: 780px !important;
	margin: 0 auto 40px auto !important;
}

.faq-header .section-eyebrow {
	display: inline-block !important;
	font-size: 0.8rem !important;
	font-weight: 700 !important;
	color: #3575AE !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	margin-bottom: 12px !important;
}

.faq-header h2 {
	font-size: clamp(1.8rem, 2.8vw, 2.35rem) !important;
	font-weight: 800 !important;
	color: #0F172A !important;
	margin-bottom: 0 !important;
}

.faq-list {
	max-width: 860px !important;
	margin: 0 auto !important;
}

.timeline-header .section-eyebrow {
	color: #38BDF8 !important;
}

.timeline-header h2 {
	color: #FFFFFF !important;
}

.timeline-subtitle {
	color: #94A3B8 !important;
}

/* ==========================================================================
   Client revisions - D. Solution card "Exemples" tag
   ========================================================================== */
.card-solution__examples {
	margin-top: 14px !important;
	padding-top: 12px !important;
	/* .card-solution is a white card, so the rgba(255,255,255,0.1)
	   separator this was originally specified with would be invisible;
	   using the same light border color .card-solution itself uses. */
	border-top: 1px solid #E2E8F0 !important;
	font-size: 0.85rem !important;
	color: #1E5B8E !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
}

/* ==========================================================================
   Client revisions - E. Blog teaser cards grid
   ========================================================================== */
.section-blog-preview .blog-preview__grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 30px !important;
	margin-top: 48px !important;
}

/* Text-color rules below are scoped as ".blog-card .blog-card__x" (two
   classes) rather than the plain ".blog-card__x" this was originally
   specified with - the dark-section-on-white-card bug from the last two
   rounds applies here too: .home-section--soft h2,h3{color:#FFFFFF} and
   .home-section--soft p{color:#E2E8F0} are higher-specificity descendant
   selectors declared later in the file, so a plain single-class
   .blog-card__title/.blog-card__excerpt rule would keep losing to them
   exactly like .card-solution__title did - confirmed the same root
   cause the report describes (invisible white-on-white titles) before
   writing this fix. */
.blog-card {
	background-color: #FFFFFF !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	text-decoration: none !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important;
}

.blog-card:hover {
	transform: translateY(-8px) !important;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28) !important;
}

.blog-card__thumb {
	width: 100% !important;
	height: 200px !important;
	object-fit: cover !important;
	display: block !important;
	transition: transform 0.4s ease !important;
}

.blog-card:hover .blog-card__thumb {
	transform: scale(1.04) !important;
}

.blog-card .blog-card__body {
	padding: 24px !important;
	display: flex !important;
	flex-direction: column !important;
	flex-grow: 1 !important;
	background-color: #FFFFFF !important;
}

.blog-card .blog-card__tag {
	display: inline-block !important;
	font-size: 0.75rem !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	color: #1E3A5F !important;
	background-color: #EFF6FF !important;
	padding: 4px 10px !important;
	border-radius: 4px !important;
	margin-bottom: 12px !important;
	align-self: flex-start !important;
}

.blog-card .blog-card__title {
	font-size: 1.15rem !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	color: #0F172A !important;
	margin: 0 0 12px 0 !important;
	transition: color 0.2s ease !important;
}

.blog-card:hover .blog-card__title {
	color: #3575AE !important;
}

.blog-card .blog-card__excerpt {
	font-size: 0.92rem !important;
	line-height: 1.6 !important;
	color: #475569 !important;
	margin: 0 0 20px 0 !important;
	flex-grow: 1 !important;
}

.blog-card .blog-card__link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 0.88rem !important;
	font-weight: 700 !important;
	color: #3575AE !important;
	margin-top: auto !important;
	transition: gap 0.2s ease !important;
}

.blog-card:hover .blog-card__link {
	gap: 12px !important;
	color: #1E3A5F !important;
}

.blog-card__link svg {
	width: 16px !important;
	height: 16px !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 2.5 !important;
}

@media (max-width: 991px) {
	.section-blog-preview .blog-preview__grid {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}
}

/* ==========================================================================
   WCAG AA contrast fixes - dark sections and white solution cards

   Real bug found before applying this: .card-solution__title (an <h3>)
   and .card-solution__text/.card-solution__examples (all <p>) are plain
   single-class selectors from earlier rounds. The "systematic section
   color alternation" round's .home-section--soft h2,h3{color:#FFFFFF}
   and .home-section--soft p{color:#94A3B8} rules are descendant
   selectors (class+element = higher specificity than a single class)
   declared later in the file, so they've been silently winning ever
   since - the Solutions section's white cards have likely been
   rendering with invisible white-on-white titles and low-contrast grey
   body text. Repeating the same single-class selectors (as originally
   specified for this fix) would not have actually solved it - every
   card-solution rule below is scoped with the .card-solution ancestor
   specifically to guarantee it outranks those section-level rules
   regardless of source order.
   ========================================================================== */

/* A. Paragraphs and eyebrows on dark backgrounds */
.home-section--dark p,
.home-section--soft p,
.section-solutions .solutions-header p,
.vertical-timeline-section .timeline-subtitle,
.section-future-services .future-services__text,
.section-blog-preview .blog-preview__header p,
.iss-impact__header p {
	color: #E2E8F0 !important;
	font-size: 1.05rem !important;
	line-height: 1.65 !important;
	opacity: 0.95 !important;
}

.section-future-services .future-services__lead {
	color: #F8FAFC !important;
	font-weight: 600 !important;
}

.home-section--dark .section-eyebrow,
.home-section--soft .section-eyebrow,
.vertical-timeline-section .section-eyebrow,
.section-future-services .section-eyebrow,
.section-blog-preview .section-eyebrow {
	color: #38BDF8 !important;
	font-weight: 800 !important;
	letter-spacing: 0.12em !important;
}

/* B. White solution cards - scoped under .card-solution to beat the
   section-level rules above regardless of source order. Desktop layout
   is a strict 4-row CSS Grid (icon/title/text/divider+examples) so each
   row occupies an identical vertical slot across every card, regardless
   of how many lines the title/text/examples wrap to - this is what
   actually guarantees the divider lands on the same horizontal line in
   every card (the previous flex + margin-top:auto approach could not:
   with margin-top:auto sitting on the whole examples block, a card
   whose examples text wrapped to 2 lines pushed its divider higher than
   a card whose examples fit on 1 line). */
@media (min-width: 769px) {
	.card-solution {
		background-color: #FFFFFF !important;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
		display: grid !important;
		grid-template-rows: 48px minmax(36px, auto) 1fr 80px !important;
		row-gap: 16px !important;
		padding: 32px !important;
		background: #FFFFFF !important;
		border-radius: 16px !important;
		border: 1px solid rgba(255, 255, 255, 0.08) !important;
		box-sizing: border-box !important;
		height: 100% !important;
	}

	.card-solution .card-solution__icon {
		margin: 0 !important;
		display: flex !important;
		align-items: center !important;
	}

	.card-solution .card-solution__title {
		margin: 0 !important;
		font-size: 1.25rem !important;
		font-weight: 700 !important;
		color: #0F172A !important;
		line-height: 1.3 !important;
		display: flex !important;
		align-items: flex-start !important;
	}

	.card-solution .card-solution__text {
		margin: 0 !important;
		color: #334155 !important;
		font-size: 0.95rem !important;
		line-height: 1.6 !important;
	}

	.card-solution .card-solution__examples {
		margin: 0 !important;
		padding-top: 14px !important;
		border-top: 1px solid #F1F5F9 !important;
		color: #0284C7 !important;
		font-size: 0.88rem !important;
		font-weight: 600 !important;
		line-height: 1.45 !important;
		box-sizing: border-box !important;
		display: flex !important;
		align-items: flex-start !important;
	}
}

/* Mobile card text color - previously missing entirely at this
   breakpoint. .card-solution .card-solution__title/__text were only
   ever declared inside the @media (min-width:769px) grid-layout block
   above, so on mobile the title/body text fell all the way back to
   this file's .home-section--soft h2,h3{color:#FFFFFF} and
   .home-section--soft p{color:#94A3B8} rules - a class+element
   descendant selector that out-specifies the plain single-class
   .card-solution__title/__text rules from way earlier in this file.
   That's the actual bug: an invisible white title and low-contrast
   grey text on a white card, on mobile only. Declared here with the
   same .card-solution ancestor-scoped 2-class pattern the desktop
   block already uses, which is what reliably beats that dark-section
   default regardless of viewport or source order. */
@media (max-width: 768px) {
	.section-solutions {
		padding: 48px 16px !important;
	}
	.section-solutions .solutions-header {
		text-align: left !important;
	}
	.section-solutions .solutions-header h2 {
		font-size: 1.65rem !important;
		line-height: 1.3 !important;
		text-align: left !important;
	}
	.section-solutions .solutions-header p {
		text-align: left !important;
	}
	.solutions-families {
		display: flex !important;
		flex-direction: column !important;
		gap: 20px !important;
		grid-template-columns: 1fr !important;
	}
	.card-solution {
		display: flex !important;
		flex-direction: column !important;
		gap: 14px !important;
		padding: 24px 20px !important;
		background-color: #FFFFFF !important;
		border: 1px solid rgba(255, 255, 255, 0.08) !important;
		border-radius: 16px !important;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
		box-sizing: border-box !important;
	}
	.card-solution .card-solution__title {
		margin: 0 !important;
		color: #0F172A !important;
		font-size: 1.25rem !important;
		font-weight: 700 !important;
		line-height: 1.3 !important;
	}
	.card-solution .card-solution__text {
		margin: 0 !important;
		color: #334155 !important;
		font-size: 0.95rem !important;
		line-height: 1.6 !important;
	}
	.card-solution .card-solution__examples {
		margin: 0 !important;
		border-top: 1px solid #F1F5F9 !important;
		padding-top: 12px !important;
		color: #0284C7 !important;
		font-size: 0.88rem !important;
		font-weight: 600 !important;
		line-height: 1.45 !important;
	}
}

/* C. Vertical timeline cards on the now-dark timeline section */
.v-timeline__card {
	background-color: #132235 !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.v-timeline__title {
	color: #FFFFFF !important;
}

.v-timeline__sig {
	color: #38BDF8 !important;
	font-weight: 600 !important;
}

.v-timeline__desc {
	color: #CBD5E1 !important;
	line-height: 1.6 !important;
}

/* The existing hover/active rule (further up this file) flips the card
   background to solid white on hover - with the card now dark by
   default and its title/desc text colored light for that dark
   background, a flip to white would make that same light text
   invisible against the newly-white hovered card. Overriding the
   hover/active background to a lighter dark shade instead (rather than
   white) keeps the existing light text readable in both states. */
.v-timeline__item:hover .v-timeline__card,
.v-timeline__item.is-active .v-timeline__card {
	background: #1B2F47 !important;
	border-color: #3575AE !important;
}

/* ==========================================================================
   Mobile/tablet responsiveness audit (360px-1024px) - real gaps found
   ========================================================================== */

/* Locks the page behind the fullscreen mobile drawer so it can't
   scroll/rubber-band through it while open (toggled via the
   MutationObserver in functions.php's threen_header_scroll_script()).
   overflow-x stays governed by the existing html,body rule; this only
   adds the y-axis lock so the two don't fight over the shorthand.

   html.nav-drawer-open added alongside body.nav-drawer-open (the JS
   sets the class on both) because body-only overflow:hidden is a
   well-known iOS Safari gap - the page can still rubber-band/scroll
   behind a fixed-position overlay unless html is locked too. height:
   100vh on both pins them to the viewport so there's no scrollable
   distance left for a stray touch/scroll to move.

   touch-action:none is a stronger guarantee on top of overflow:hidden
   - it tells the browser not to generate scroll gestures from touch
   input on these elements at all, rather than relying on overflow
   alone to stop a scroll that's already begun. Paired with overscroll-
   behavior:contain on the drawer's own scrollable .main-nav (below) so
   reaching the top/bottom of the drawer's own content can't "chain"
   into scrolling the page underneath it.

   position:fixed is the most reliable cross-browser technique for
   fully stopping scroll/rubber-band leaking behind a fixed overlay
   (overflow:hidden alone has known gaps even with touch-action:none
   layered on). It has one well-known side effect if done alone: the
   page visually snaps to scroll position 0 the instant body becomes
   position:fixed, and stays there after closing - functions.php's
   threen_header_scroll_script() saves window.scrollY before locking
   and restores it via window.scrollTo() after unlocking (using
   body.style.top to hold the visual position while locked), so this
   doesn't introduce that jump. */
html.nav-drawer-open {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
	touch-action: none !important;
	-webkit-overflow-scrolling: auto !important;
}

/* body deliberately does NOT get "top: 0 !important" here - the JS
   sets body.style.top inline (to the negative of the saved scroll
   offset) precisely so position:fixed doesn't visually snap the page
   to the top. A stylesheet !important on top would always beat that
   plain inline style and silently break the scroll-position
   preservation, even though this rule never touches top directly. */
body.nav-drawer-open {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
	touch-action: none !important;
	-webkit-overflow-scrolling: auto !important;
}

/* Marquee is a decorative, auto-animating track (not user-draggable) -
   pan-y keeps vertical page scroll gesture-priority over it on touch
   screens instead of the browser hesitating to disambiguate. */
.trust-marquee-wrapper {
	touch-action: pan-y !important;
}

/* .iss-cta-btn-link had no vertical padding, giving it a ~23px tall tap
   target (text line-height only) - under the 44px minimum, and it's the
   one action that stacks below the primary button on mobile. */
.iss-cta-btn-link {
	padding: 12px 4px !important;
	min-height: 44px !important;
	box-sizing: border-box !important;
}

/* ==========================================================================
   Header nav - permanent fix for the gap after "Nos services" dropdown
   toggle, including on service sub-pages where WordPress stacks extra
   current-page-ancestor/current-menu-parent/etc. classes onto the <li>.

   The li-level reset below uses an ID selector (#menu-main-menu), which
   is deliberately higher specificity than the dropdown hover-bridge fix
   further up this file (.main-navigation .main-nav > ul > li.menu-item-
   has-children { padding-bottom:8px; margin-bottom:-8px }, which keeps
   the submenu open while the cursor moves from the link down into it).
   To avoid silently reopening that bug, this reset uses horizontal-only
   longhand properties (margin-left/right, padding-left/right) rather
   than the margin/padding shorthand - the hover-bridge only relies on
   the vertical (bottom) properties, so it's untouched either way.
   ========================================================================== */
@media (min-width: 992px) {
	.site-header .main-navigation ul#menu-main-menu > li {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.site-header .main-navigation ul#menu-main-menu > li > a {
		display: inline-flex !important;
		align-items: center !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
		margin: 0 !important;
	}

	.site-header .main-navigation ul#menu-main-menu > li.menu-item-has-children > a {
		padding-right: 4px !important;
	}

	.site-header .main-navigation .dropdown-menu-toggle {
		margin: 0 0 0 4px !important;
		padding: 0 6px 0 0 !important;
		display: inline-flex !important;
		align-items: center !important;
		line-height: 1 !important;
	}

	.site-header .main-navigation .dropdown-menu-toggle .gp-icon {
		padding-right: 0 !important;
		display: inline-flex !important;
	}

	.site-header .main-navigation .dropdown-menu-toggle svg {
		width: 11px !important;
		height: 11px !important;
		margin: 0 !important;
	}
}

/* ==========================================================================
   Hero h1 - responsive type scale (comprehensive audit, mobile/desktop
   split at 768px per the audit brief's own two-tier clamp spec).

   Previously forced white-space:nowrap on desktop (>=1025px) to keep
   the headline on one line. Dropped here: the audit's desktop clamp
   minimum (2.4rem) is noticeably larger than the 2rem minimum this
   codebase had actually validated for single-line fit, and at this
   headline's length (~54 characters) nowrap text at that size measures
   wider than the available inner width at common laptop viewports
   (1025-1280px) before the max-width cap even engages - nowrap can
   only clip or force a horizontal scrollbar when that happens, never
   overflow gracefully. Letting the heading wrap - bounded by the base
   rule's max-width:960px above - guarantees zero overflow risk at
   every viewport regardless of exact font metrics, at the minor cost
   of the headline occasionally breaking onto 2 lines on desktop.
   ========================================================================== */
@media (max-width: 767px) {
	.hero-service__inner h1 {
		font-size: clamp(1.85rem, 6vw, 2.3rem) !important;
		line-height: 1.25 !important;
	}
}

@media (min-width: 768px) {
	.hero-service__inner h1 {
		font-size: clamp(2.4rem, 4vw, 3.2rem) !important;
		line-height: 1.2 !important;
		letter-spacing: -0.02em !important;
	}
}

/* ==========================================================================
   Conviction & Careers split images - consistent frame rendering.
   max-height:480px is scoped to >=992px - applied unscoped it would sit
   after (and override) the existing mobile max-height:380px/320px rules
   for these same images, undoing their tighter mobile sizing.
   ========================================================================== */
.conviction-split__img,
.careers-split__img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 12px !important;
	border: 1px solid #E2E8F0 !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
}

@media (min-width: 992px) {
	.conviction-split__img,
	.careers-split__img {
		max-height: 480px !important;
	}
}

/* ==========================================================================
   Service pages - "Nos solutions" 3-column grid. Reuses the homepage's
   .card-solution / .card-solution__icon / __title / __text / __examples
   components as-is (same rules, same specificity guarantees against the
   dark-section color-alternation rules) - only the grid wrapper itself
   is new, since the homepage's own .solutions-families is a 2-column
   grid sized for 4 cards, not 3.
   ========================================================================== */
.solutions-grid-3col {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 30px !important;
	align-items: stretch !important;
}

@media (max-width: 991px) {
	.solutions-grid-3col {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 640px) {
	.solutions-grid-3col {
		grid-template-columns: 1fr !important;
	}
}

/* Service page "Nos solutions" grid - 4-item modifier (Externalisation
   & Facility Management currently, any future 4-solution service too),
   added conditionally in the template. Forces all 4 cards onto one row
   on desktop, per explicit request - supersedes the previous round's
   2x2 choice.

   This block was previously placed BEFORE the base .solutions-grid-3col
   rule above, which was a real bug: both selectors are single classes
   (0,1,0 specificity) matching the same element (it carries both
   classes at once), so on an equal-specificity tie the LATER rule in
   source order wins regardless of which one is inside a narrower
   media query. The base rule's unconditional repeat(3,1fr) was
   declared after the modifier, so it silently won at every desktop
   width and the modifier never actually applied - producing exactly
   the reported "3 cards then 1 orphan" wrap. Fixed by moving this
   after the base rule instead of only changing the column count. */
@media (min-width: 992px) {
	.solutions-grid-3col--four {
		grid-template-columns: repeat(4, 1fr) !important;
		max-width: 1320px !important;
		margin: 0 auto !important;
	}
}

/* ==========================================================================
   Service pages - "Profils mobilisables" Onet-style visual grid
   ========================================================================== */
.profils-grid-onet {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
	gap: 20px !important;
}

.profil-card-onet {
	position: relative !important;
	height: 200px !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	border: 1px solid transparent !important;
	box-shadow: 0 8px 22px rgba(13, 25, 35, 0.08) !important;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.profil-card-onet img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.profil-card-onet__overlay {
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient(180deg, rgba(11, 23, 36, 0.1) 0%, rgba(11, 23, 36, 0.88) 100%) !important;
	display: flex !important;
	align-items: flex-end !important;
	padding: 18px !important;
}

.profil-card-onet__title {
	color: #FFFFFF !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

.profil-card-onet:hover {
	transform: translateY(-6px) !important;
	box-shadow: 0 16px 36px rgba(13, 25, 35, 0.16) !important;
	border-color: #38BDF8 !important;
}

.profil-card-onet:hover img {
	transform: scale(1.05) !important;
}

@media (max-width: 991px) {
	.profils-grid-onet {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 480px) {
	.profils-grid-onet {
		grid-template-columns: 1fr !important;
	}
	.profil-card-onet {
		height: 180px !important;
	}
}

/* ==========================================================================
   Service page hero - clone of the homepage hero's structure and
   behavior, built on the shared .hero-service/.hero-service__inner/
   .hero-actions classes both templates already use (there is no
   .hero-home__* class family anywhere in this codebase - the homepage
   hero itself is built on these same classes, so cloning its structure
   means reusing them, not inventing a parallel naming system).

   This round fixes two real, distinct bugs found by comparing the two
   templates directly, rather than the previously-assumed "needs a
   negative margin-top hack":

   1. Header/photo blending was actually broken by
      "body:not(.page-template-template-home-php) .site-content"
      above - it also caught service pages (which DO have their own
      full-bleed hero, same as home), pushing the whole hero section
      down 96px and leaving a visible gap of bare page background
      between the floating header and the hero photo. Fixed at that
      rule directly (excludes service-template pages now) rather than
      patched here with a negative margin, which would have fought
      that rule instead of fixing it.

   2. Center-alignment wasn't coming from anywhere in this file at all
      - template-service.php's hero-actions div carried an inline
      style="...justify-content: center..." the homepage's never had,
      and this file's own .hero-service__inner override forced
      text-align:center + margin-left/right:auto on the h1. Both
      removed/flipped below; the inline style is removed directly in
      the template.

   Background image is now a real local asset
   (assets/images/hero-facility.webp) instead of the external Unsplash
   URL used last round, since this exact local path has now been
   requested twice - same source photo (technician installing building
   access-control hardware), already verified on-topic and correctly
   toned for the gradient overlay.
   ========================================================================== */
body.page-template-template-service-php .hero-service {
	background: linear-gradient(180deg, rgba(11, 23, 36, 0.82) 0%, rgba(11, 23, 36, 0.92) 100%),
				url('/wp-content/themes/generatepress-child/assets/images/hero-facility.webp') center 15%/cover no-repeat !important;
	background-attachment: scroll !important;
	padding-top: 175px !important;
	text-align: left !important;
}

body.page-template-template-service-php .hero-service__inner {
	text-align: left !important;
}

@media (max-width: 768px) {
	body.page-template-template-service-php .hero-service {
		padding-top: 140px !important;
	}
}

/* ==========================================================================
   Homepage hero - v2.2.0: replaces the base .hero-service rule's
   generic uploads-folder photo (slider-last.jpg-scaled-1.webp) with the
   authentic Moroccan corporate composite generated for this page
   specifically, same local-asset pattern as hero-facility.webp above.
   ========================================================================== */
/* This round's brief requires BOTH background-size:cover-style framing
   AND a hard guarantee that no face is ever cropped (stated repeatedly:
   "ALL faces completely visible", "no cropped foreheads", "no cropped
   necks/shoulders", "all 3 rows... fully inside the visible viewport").
   Those two are mutually exclusive on a fixed/capped-height box unless
   the box's own aspect ratio happens to exactly equal the image's - the
   previous two rounds on this same hero demonstrated exactly that crop
   with a 580px/82vh-style box against this 1600x891 (~1.795:1) mosaic.
   Locking the box to the image's own ratio is the only way to honor
   both requirements at once: at matching ratios, cover crops nothing on
   either axis, by construction, on any viewport width - no min/max-
   height competing with it, since either would reintroduce the crop on
   viewports where they'd force a different ratio than the image's own. */
body.page-template-template-home-php .hero-service {
	min-height: 0 !important;
	aspect-ratio: 1600 / 891 !important;
	padding: 140px 0 48px 0 !important;
	background: linear-gradient(135deg, rgba(11, 23, 42, 0.78) 0%, rgba(15, 30, 54, 0.68) 100%),
				url('/wp-content/themes/generatepress-child/assets/images/terrain/morocco-home-hero-mosaic.webp?v=7.0.0') center top/cover no-repeat !important;
}

.hero-service__inner p.hero-service__lead {
	font-size: 1.25rem !important;
	font-weight: 600 !important;
	color: #F1F5F9 !important;
	max-width: 820px !important;
	margin: 0 0 16px 0 !important;
	line-height: 1.5 !important;
}

.hero-service__inner p.hero-service__subtext {
	font-weight: 500 !important;
	color: #FFFFFF !important;
	max-width: 760px !important;
	margin: 0 0 32px 0 !important;
	line-height: 1.6 !important;
}

/* On mobile, the aspect-ratio lock above forces a very short box at
   narrow widths (e.g. ~217px tall at 390px wide for this 1600:891
   image), which is what was actually causing the "massive cropping /
   text overflow" symptom - not the inline style itself, which only
   ever set the same background the CSS rule above already sets.
   Below this breakpoint we deliberately drop the aspect-ratio lock in
   favor of a fixed min-height + cover, matching the brief's explicit
   choice to prioritize readable, non-squished text over zero-crop
   faces once the viewport is this narrow. */
@media (max-width: 768px) {
	/* .site-header is position:fixed sitewide (top:0), so this hero's
	   own top padding is the only thing standing between the H1 and
	   the header - the previous 48px here was tuned for visual spacing
	   alone and didn't account for the fixed header sitting on top of
	   it, cropping the H1's top half. 135px clears the mobile header's
	   own rendered height with margin to spare, and center top keeps
	   the top row of faces anchored just below that clearance instead
	   of being centered/cropped by it. */
	/* background-size:cover (the desktop default this inherits otherwise)
	   scales the 1600x891 mosaic up to fill the box on whichever axis is
	   proportionally narrower - on a phone-width/short-box combination
	   that's almost always the box's aspect ratio being far wider/
	   shallower than the image's own, so cover crops hard on the left
	   and right to fill that width, cutting the outer portraits. 100%
	   auto instead locks the image to the box's own width with the
	   height following the image's native ratio - no horizontal
	   cropping is possible at any viewport width. The gradient layer
	   isn't given an explicit size of its own, so it keeps covering the
	   full box at 100% height regardless of what the photo layer's size
	   is set to - text contrast is unaffected by this change. overflow:
	   hidden is the safety net for the one tradeoff this introduces: if
	   the image's resulting height ever exceeds the box's own
	   (content-driven, since min-height is auto here), it clips cleanly
	   at the bottom edge instead of bleeding into the next section. */
	/* 100% auto (previous round) sizes the image to the box's width and
	   lets height follow the image's own ratio - on this content-driven
	   box (min-height:auto, height set by the text+padding, not the
	   image), that rendered image height came up shorter than the box
	   itself, leaving a flat gradient-only gap behind the buttons with
	   no photo in it. cover guarantees the image always fills the full
	   box on both axes with no gap, at the cost of cropping whichever
	   axis runs over - back to the tradeoff this hero has moved between
	   several times now. */
	body.page-template-template-home-php .hero-service {
		aspect-ratio: auto !important;
		min-height: auto !important;
		overflow: hidden !important;
		padding: 135px 20px 48px !important;
		background: linear-gradient(135deg, rgba(11, 23, 42, 0.88) 0%, rgba(15, 30, 54, 0.88) 100%),
					url('/wp-content/themes/generatepress-child/assets/images/terrain/morocco-home-hero-mosaic.webp?v=7.0.0') center center/cover no-repeat !important;
	}

	body.page-template-template-home-php .hero-service__inner {
		margin-top: 0 !important;
	}

	body.page-template-template-home-php .hero-service__inner h1 {
		margin-top: 0 !important;
		font-size: 1.65rem !important;
		line-height: 1.25 !important;
		margin-bottom: 14px !important;
	}

	body.page-template-template-home-php .hero-service__inner p.hero-service__lead,
	body.page-template-template-home-php .hero-service__inner p.hero-service__subtext {
		font-size: 1rem !important;
		line-height: 1.5 !important;
		margin-bottom: 20px !important;
	}
}

/* ==========================================================================
   Institutional pages (Histoire, Methode, Domaines, Carrieres) - each
   reuses the same .hero-service/.hero-service__inner/.hero-actions
   markup as the homepage and service pages (already left-aligned with
   the correct padding/typography by default, see the base .hero-service
   rule near the top of this file), with only its own background photo
   scoped per template here. No text-align/padding override needed
   since none of these change the base's left-aligned behavior.
   ========================================================================== */
body.page-template-template-histoire-vision-php .hero-service {
	background: linear-gradient(180deg, rgba(11, 23, 36, 0.82) 0%, rgba(11, 23, 36, 0.92) 100%),
				url('/wp-content/themes/generatepress-child/assets/images/terrain/morocco-histoire-partnership.webp') center 15%/cover no-repeat !important;
}

body.page-template-template-methode-php .hero-service {
	background: linear-gradient(180deg, rgba(11, 23, 36, 0.82) 0%, rgba(11, 23, 36, 0.92) 100%),
				url('/wp-content/themes/generatepress-child/assets/images/terrain/morocco-methode-process.webp') center 15%/cover no-repeat !important;
}

body.page-template-template-domaines-php .hero-service {
	background: linear-gradient(180deg, rgba(11, 23, 36, 0.82) 0%, rgba(11, 23, 36, 0.92) 100%),
				url('/wp-content/themes/generatepress-child/assets/images/terrain/morocco-facility-manager.webp') center 15%/cover no-repeat !important;
}

body.page-template-template-carrieres-php .hero-service {
	background: linear-gradient(180deg, rgba(11, 23, 36, 0.82) 0%, rgba(11, 23, 36, 0.92) 100%),
				url('/wp-content/themes/generatepress-child/assets/images/terrain/morocco-team-collaboration.webp') center 15%/cover no-repeat !important;
}

/* Candidature spontanee is now the last section on this page (the
   generic .section-iss-cta-banner that used to follow it was removed
   so the Careers page's final conversion point is strictly the
   candidate CTA) - extra bottom padding replaces the breathing room
   that banner used to provide before the footer. Scoped to the #id
   rather than .home-section--dark generally, so other dark sections
   elsewhere aren't affected. */
#candidature {
	padding-bottom: 96px !important;
}

body.page-template-template-services-hub-php .hero-service {
	background: linear-gradient(180deg, rgba(11, 23, 36, 0.82) 0%, rgba(11, 23, 36, 0.92) 100%),
				url('/wp-content/themes/generatepress-child/assets/images/hero-facility.webp') center 15%/cover no-repeat !important;
}

body.page-template-template-blog-php .hero-service {
	background: linear-gradient(180deg, rgba(11, 23, 36, 0.82) 0%, rgba(11, 23, 36, 0.92) 100%),
				url('/wp-content/themes/generatepress-child/assets/images/terrain/morocco-governance-leadership.webp') center 15%/cover no-repeat !important;
}

/* Feature grid - a simpler 4-card component than .card-solution (no
   icon/examples row, no rigid 4-row alignment grid), reused across
   these institutional pages: Histoire's Values, Methode's Gouvernance
   & Outils, Carrieres' "Why join". Follows the same soft-section /
   white-card pattern as the rest of the site. */
.feature-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 24px !important;
	max-width: 1240px !important;
	margin: 0 auto !important;
}

@media (max-width: 1023px) and (min-width: 641px) {
	.feature-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 640px) {
	.feature-grid {
		grid-template-columns: 1fr !important;
	}
}

.feature-card {
	background: #FFFFFF !important;
	border: 1px solid #E2E8F0 !important;
	border-radius: 16px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
	padding: 28px 24px !important;
}

.feature-card__icon {
	width: 48px !important;
	height: 48px !important;
	border-radius: 12px !important;
	background: #EFF6FF !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-bottom: 16px !important;
}

.feature-card__icon svg {
	width: 24px !important;
	height: 24px !important;
	stroke: #3575AE !important;
}

.feature-card__title {
	font-size: 1.1rem !important;
	font-weight: 700 !important;
	color: #0F172A !important;
	margin-bottom: 10px !important;
	line-height: 1.3 !important;
}

.feature-card__text {
	font-size: 0.92rem !important;
	line-height: 1.6 !important;
	color: #475569 !important;
	margin: 0 !important;
}

/* Section header block (eyebrow + h2 + optional intro), reused for
   every plain content section on the institutional pages that isn't
   already covered by an existing section-header pattern
   (.solutions-header, .domaines-header, .timeline-header, etc). */
.content-section-header {
	text-align: center !important;
	max-width: 780px !important;
	margin: 0 auto 48px auto !important;
}

.content-section-header .section-eyebrow {
	display: inline-block !important;
	font-size: 0.8rem !important;
	font-weight: 700 !important;
	color: #3575AE !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	margin-bottom: 12px !important;
}

.content-section-header h2 {
	font-size: clamp(1.8rem, 2.8vw, 2.35rem) !important;
	font-weight: 800 !important;
	color: #0D1923 !important;
	margin-bottom: 16px !important;
}

.content-section-header p {
	color: #64748B !important;
	font-size: 1.05rem !important;
	line-height: 1.65 !important;
	margin: 0 auto !important;
}

.home-section--dark .content-section-header h2 {
	color: #FFFFFF !important;
}

.home-section--dark .content-section-header p {
	color: #94A3B8 !important;
}

/* Light "soft" alternating band for the institutional pages -
   deliberately a NEW modifier rather than reusing .home-section--soft:
   that class was repurposed by an earlier round to mean dark navy
   (#0F2032), the opposite of what its name suggests. Reusing it here
   would silently pull these new pages into the same background as the
   homepage's dark Solutions/Blog sections instead of the light
   #F1F5F9 this task actually asks for. */
.home-section--light {
	background-color: #F1F5F9 !important;
}

/* ==========================================================================
   Services hub page (template-services-hub.php) - 8 service cards.
   Same responsive behavior as .feature-grid (4/2/1) but named/scoped
   for this section specifically, since each card here is a full link
   to a service page rather than a static feature blurb.
   ========================================================================== */
.services-hub-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 24px !important;
	max-width: 1240px !important;
	margin: 0 auto !important;
}

@media (max-width: 1023px) and (min-width: 641px) {
	.services-hub-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 640px) {
	.services-hub-grid {
		grid-template-columns: 1fr !important;
	}
}

.service-hub-card {
	display: flex !important;
	flex-direction: column !important;
	background: #FFFFFF !important;
	border: 1px solid #E2E8F0 !important;
	border-radius: 16px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
	padding: 28px 24px !important;
	text-decoration: none !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.service-hub-card:hover {
	transform: translateY(-6px) !important;
	box-shadow: 0 16px 32px rgba(13, 25, 35, 0.1) !important;
	border-color: #3575AE !important;
}

.service-hub-card__icon {
	width: 48px !important;
	height: 48px !important;
	border-radius: 12px !important;
	background: #EFF6FF !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-bottom: 16px !important;
}

.service-hub-card__icon svg {
	width: 24px !important;
	height: 24px !important;
	stroke: #3575AE !important;
}

.service-hub-card__title {
	font-size: 1.1rem !important;
	font-weight: 700 !important;
	color: #0F172A !important;
	margin-bottom: 10px !important;
	line-height: 1.3 !important;
}

.service-hub-card__text {
	font-size: 0.92rem !important;
	line-height: 1.6 !important;
	color: #475569 !important;
	margin: 0 0 20px 0 !important;
	flex-grow: 1 !important;
}

.service-hub-card__link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 0.88rem !important;
	font-weight: 700 !important;
	color: #3575AE !important;
	margin-top: auto !important;
	transition: gap 0.2s ease !important;
}

.service-hub-card:hover .service-hub-card__link {
	gap: 12px !important;
}

.service-hub-card__link svg {
	width: 16px !important;
	height: 16px !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 2.5 !important;
}

/* ==========================================================================
   Blog archive page (template-blog.php) - real article loop grid.
   Reuses the existing .blog-card component (already built for the
   homepage's dark blog-preview teaser) rather than a second parallel
   card system, but that component's border/shadow were tuned for a
   dark section backdrop (rgba(255,255,255,0.1) hairline border, heavy
   0.28-alpha hover shadow) - on this page's white/light section that
   border would be invisible, the same dark-vs-light mismatch already
   hit twice this project on .card-solution. Corrected below, scoped to
   this page only so the homepage's dark teaser cards are untouched.
   ========================================================================== */
.blog-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 30px !important;
}

@media (max-width: 1023px) and (min-width: 641px) {
	.blog-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 640px) {
	.blog-grid {
		grid-template-columns: 1fr !important;
	}
}

body.page-template-template-blog-php .blog-card {
	border: 1px solid #E2E8F0 !important;
	border-radius: 16px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

body.page-template-template-blog-php .blog-card:hover {
	box-shadow: 0 16px 32px rgba(13, 25, 35, 0.1) !important;
}

.blog-pagination {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 8px !important;
	margin-top: 48px !important;
	flex-wrap: wrap !important;
}

.blog-pagination .page-numbers {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 40px !important;
	height: 40px !important;
	padding: 0 12px !important;
	border-radius: 8px !important;
	border: 1px solid #E2E8F0 !important;
	background: #FFFFFF !important;
	color: #1E293B !important;
	font-size: 0.92rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
}

.blog-pagination .page-numbers:hover {
	border-color: #3575AE !important;
	color: #3575AE !important;
}

.blog-pagination .page-numbers.current {
	background: #1E5B8E !important;
	border-color: #1E5B8E !important;
	color: #FFFFFF !important;
}

.blog-pagination .page-numbers.dots {
	border: none !important;
	background: transparent !important;
}

/* ==========================================================================
   Single blog post (single.php) - hero meta row + editorial content
   typography. Hero itself reuses .hero-service/.hero-service__inner
   (same shared classes as every other hero on the site), so it already
   inherits the left-aligned text, photo background, gradient overlay
   and top padding for free - only the category badge and meta row
   (date + reading time) are new here.
   ========================================================================== */
.post-category-badge {
	display: inline-block !important;
	font-size: 0.78rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: #38BDF8 !important;
	background: rgba(56, 189, 248, 0.12) !important;
	padding: 6px 14px !important;
	border-radius: 999px !important;
	margin-bottom: 20px !important;
}

.post-hero-meta {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	color: #94A3B8 !important;
	font-size: 0.92rem !important;
	font-weight: 500 !important;
	margin-top: 20px !important;
}

.post-hero-meta__dot {
	width: 4px !important;
	height: 4px !important;
	border-radius: 50% !important;
	background: #94A3B8 !important;
	flex-shrink: 0 !important;
}

.single-post-content {
	max-width: 800px !important;
	margin: 0 auto !important;
	padding: 72px 24px !important;
	font-size: 1.125rem !important;
	line-height: 1.8 !important;
	color: #334155 !important;
}

.single-post-content p {
	margin: 0 0 28px 0 !important;
}

.single-post-content h2 {
	font-size: 1.65rem !important;
	font-weight: 800 !important;
	color: #0D1923 !important;
	margin: 48px 0 20px 0 !important;
	line-height: 1.3 !important;
}

.single-post-content h3 {
	font-size: 1.3rem !important;
	font-weight: 700 !important;
	color: #0D1923 !important;
	margin: 36px 0 16px 0 !important;
	line-height: 1.35 !important;
}

.single-post-content ul,
.single-post-content ol {
	margin: 0 0 28px 0 !important;
	padding-left: 24px !important;
}

.single-post-content li {
	margin-bottom: 10px !important;
}

.single-post-content a {
	color: #1E5B8E !important;
	text-decoration: underline !important;
}

/* single.php wraps its body in .single-post-content, not .entry-content
   (confirmed in the template) - the .entry-content a.btn-signature-cta
   rule added earlier never actually matched here, so this generic
   .single-post-content a rule above (!important, same blue as the
   button's own background) kept winning and rendering the CTA link's
   text invisible against its own background. Scoping with the extra
   .btn-signature-cta class outranks the plain "a" rule on specificity,
   with !important repeated as a safety net since the rule it has to
   beat already uses !important itself. */
.single-post-content a.btn-signature-cta {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-color: var(--color-action) !important;
	color: #FFFFFF !important;
	-webkit-text-fill-color: #FFFFFF !important;
	text-decoration: none !important;
	font-weight: 700 !important;
	box-shadow: 0 4px 12px rgba(30, 91, 142, 0.25) !important;
}

.single-post-content a.btn-signature-cta:hover,
.single-post-content a.btn-signature-cta:focus {
	background-color: var(--color-action-hover) !important;
	color: #FFFFFF !important;
	-webkit-text-fill-color: #FFFFFF !important;
	text-decoration: none !important;
	transform: translateY(-1px) !important;
}

.single-post-content img {
	max-width: 100% !important;
	height: auto !important;
	border-radius: 12px !important;
	margin: 32px 0 !important;
}

@media (max-width: 640px) {
	.single-post-content {
		padding: 48px 20px !important;
		font-size: 1.05rem !important;
	}
}

/* ==========================================================================
   Header - stable logo sizing (v1.7.4 state). The v1.7.5 laptop-width
   media queries (992-1280px / 1281-1440px) that resized the logo,
   nav-item padding, and CTA button for that range are removed - they
   blew up the logo's size/aspect ratio and clipped the CTA button
   against the pill's border-radius. This single unscoped rule, at the
   same specificity tier as (and positioned after) the original
   .site-logo img.header-image rule, is the sole authority on logo size
   again across every breakpoint.
   ========================================================================== */
.site-header .site-logo img {
	height: 40px !important;
	width: auto !important;
	max-height: 40px !important;
	display: block !important;
}

/* ==========================================================================
   Header - compact, content-hugging capsule (v1.8.0). Replaces the
   previous round's space-between/flex-grow model wholesale: that model
   let .inside-header inherit GeneratePress's .grid-container max-width
   (1550px) with justify-content:space-between, which stretched the
   capsule far wider than its actual content and left a large empty gap
   between the logo and the nav. This round switches to width:auto +
   justify-content:center + an explicit gap, so the capsule sizes to fit
   its contents and centers itself, instead of stretching to fill a
   max-width it never needed. #site-navigation/.inside-navigation go
   back to flex:0 0 auto (content-sized, not growing) to match - this is
   the same value the single-row-fix round originally used to defeat
   GeneratePress's own .has-inline-mobile-toggle #site-navigation{flex-
   basis:100%} bug, so that fix stays intact.
   ========================================================================== */
@media (min-width: 992px) {
	.site-header .site-branding-container {
		flex: 0 0 auto !important;
		margin: 0 !important;
		display: flex !important;
		align-items: center !important;
	}

	.site-header .site-logo img {
		height: 38px !important;
		width: auto !important;
		max-height: 38px !important;
		display: block !important;
	}

	.site-header #site-navigation,
	.site-header .inside-navigation {
		flex: 0 0 auto !important;
		display: flex !important;
		align-items: center !important;
		padding: 0 !important;
		margin: 0 !important;
		background: transparent !important;
	}

	.site-header .main-navigation ul#menu-main-menu {
		display: flex !important;
		align-items: center !important;
		gap: 4px !important;
		margin: 0 !important;
		padding: 0 !important;
		background: transparent !important;
	}

	.site-header .main-navigation ul#menu-main-menu > li > a {
		padding: 8px 10px !important;
		font-size: 0.88rem !important;
		font-weight: 500 !important;
		color: #1E293B !important;
		white-space: nowrap !important;
	}

	.site-header .main-navigation .dropdown-menu-toggle {
		margin-left: 2px !important;
		padding: 0 !important;
	}

	.site-header .main-navigation ul#menu-main-menu > li.btn-signature-cta {
		margin-left: 12px !important;
		margin-right: 0 !important;
	}

	.site-header .main-navigation ul#menu-main-menu > li.btn-signature-cta a,
	.site-header .main-navigation .btn-signature-cta--header {
		padding: 9px 18px !important;
		font-size: 0.85rem !important;
		font-weight: 600 !important;
		white-space: nowrap !important;
		border-radius: 9999px !important;
	}
}

@media (min-width: 992px) and (max-width: 1200px) {
	.site-header .site-logo img {
		height: 32px !important;
		max-height: 32px !important;
	}

	.site-header .main-navigation ul#menu-main-menu > li > a {
		padding: 6px 6px !important;
		font-size: 0.80rem !important;
	}

	.site-header .main-navigation ul#menu-main-menu > li.btn-signature-cta a,
	.site-header .main-navigation .btn-signature-cta--header {
		padding: 7px 12px !important;
		font-size: 0.78rem !important;
	}
}

/* ==========================================================================
   Sitewide floating call button (markup in functions.php, hooked on
   wp_footer - see threen_floating_call_button()). z-index sits below the
   fixed header (99999) and the mobile nav drawer (100001/100002) so it
   never floats above either, but above all normal page content.
   ========================================================================== */
.floating-call-btn {
	position: fixed !important;
	right: 24px !important;
	bottom: 24px !important;
	z-index: 9990 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 56px !important;
	height: 56px !important;
	border-radius: 50% !important;
	background-color: var(--color-action) !important;
	box-shadow: 0 6px 20px rgba(13, 25, 35, 0.3) !important;
	text-decoration: none !important;
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.floating-call-btn:hover,
.floating-call-btn:focus {
	background-color: var(--color-action-hover) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 10px 26px rgba(13, 25, 35, 0.35) !important;
}

.floating-call-btn__icon {
	width: 24px !important;
	height: 24px !important;
	flex-shrink: 0 !important;
}

/* Desktop-only hover tooltip, positioned to the left of the button so it
   never runs off the right edge of the viewport. */
.floating-call-btn__tooltip {
	position: absolute !important;
	right: calc(100% + 14px) !important;
	top: 50% !important;
	transform: translateY(-50%) translateX(8px) !important;
	background-color: #0D1923 !important;
	color: #FFFFFF !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	white-space: nowrap !important;
	padding: 8px 14px !important;
	border-radius: 6px !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.floating-call-btn__tooltip::after {
	content: "" !important;
	position: absolute !important;
	top: 50% !important;
	right: -5px !important;
	transform: translateY(-50%) !important;
	width: 0 !important;
	height: 0 !important;
	border-top: 5px solid transparent !important;
	border-bottom: 5px solid transparent !important;
	border-left: 5px solid #0D1923 !important;
}

.floating-call-btn:hover .floating-call-btn__tooltip,
.floating-call-btn:focus .floating-call-btn__tooltip {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(-50%) translateX(0) !important;
}

@media (max-width: 768px) {
	.floating-call-btn {
		right: 16px !important;
		bottom: 16px !important;
		width: 52px !important;
		height: 52px !important;
	}

	/* No hover state on touch devices - leaving the tooltip in the
	   layout would risk it getting stuck visible after a tap (no
	   :hover to clear it), so it's removed outright on mobile rather
	   than just hidden with opacity. */
	.floating-call-btn__tooltip {
		display: none !important;
	}
}