/* ===================================================================
   EUROPRIVACY — Design tokens
   =================================================================== */

:root {
    /* Color — derived from the official EP logo */
    --color-blue: #1F52A3;
	--color-blue-heading : #244697;
    --color-blue-deep: #143868;
    --color-blue-table-header: #4A72CC;
	--color-blue-primary: #2051A4;
	--color-blue-bright-cta-action: #0388EB;
	--color-blue-dark-cta-action: #0270c4;
	--color-mid-blue: #396AE2;
    --color-red-negative: #E6340F;
    --color-green-positive: #8FFF22;
    --color-yellow: #FFF200;
    --color-yellow-warm: #FFD400;
    --color-bg: #F7F9FC;
    --color-white: #FFFFFF;
    --color-text: #1C2B3D;
    --color-text-soft: #5A6B85;
    --color-border: #E1E7F0;

    /* Type */
    --font-display: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    /*--font-display: 'Plus Jakarta Sans', sans-serif;*/
    --font-body: 'Inter', sans-serif;

    /* Scale */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 6rem;

    --radius: 8px;
    --radius-pill: 999px;
}

/* Greek: Nunito has no Greek glyphs, so headings switch to Inter, which
   does (its 700/800 weights are enqueued on Greek pages only, see
   functions.php). html:lang() outranks :root (0,1,1 vs 0,1,0). */
html:lang(el) {
    --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

/* ===================================================================
   EP CONTAINER — shared lateral-margin utility (Bitrix #2060)
   Mirrors the legacy site's .mw + .container behaviour: content is
   capped at a generous 1600px on very large screens, then shrinks
   through the classic Bootstrap-style breakpoints as the viewport
   narrows. Base rule MUST stay first, media queries MUST follow in
   ascending min-width order — a query placed before its base rule is
   silently overridden by it (bug already hit on Hero Variant B).
   =================================================================== */

.ep-container {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding-left: 12px;
	padding-right: 12px;
}

@media (min-width: 576px) {
	.ep-container {
		max-width: 540px;
	}
}

@media (min-width: 768px) {
	.ep-container {
		max-width: 720px;
	}
}

@media (min-width: 992px) {
	.ep-container {
		max-width: 960px;
	}
}

@media (min-width: 1200px) {
	.ep-container {
		max-width: 1140px;
	}
}

@media (min-width: 1400px) {
	.ep-container {
		max-width: 1320px;
	}
}

@media (min-width: 1600px) {
	.ep-container {
		max-width: 1600px;
	}
}

@media (max-width: 600px) {

}

/* Garde-fou global : empêche tout composant (carousel compris) de
   pouvoir élargir la page entière, quelle que soit la cause exacte
   du débordement local.
   Important : overflow-x seul (sans overflow-y) force le calcul de
   overflow-y à "auto" (règle CSS Overflow), ce qui transforme <body>
   en propre conteneur de scroll et casse position: sticky partout sur
   le site (header, sidebar...). "clip" évite ce couplage tout en
   bloquant le débordement horizontal. */
   html, body {
	max-width: 100%;
	overflow-x: clip;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}


/* ===================================================================
   SITE HEADER — Primary Navigation + Polylang Language Switcher
   =================================================================== */

   #site-header nav {
    display: flex;
    align-items: center;
}

/* Two separate <nav> elements now (see header.php): the main items
   grow to fill the space between the logo and the switcher, and are
   centered within it; the switcher doesn't grow, staying pinned to
   the header's right edge. */
#site-header nav#primary-nav {
    flex: 1;
    justify-content: center;
}

#site-header nav#lang-switcher-nav {
    flex-shrink: 0;
    /* Also pins it to the right edge (left on RTL pages) once
       #primary-nav is taken out of flow on mobile (position: fixed, see
       the mobile burger menu rules below) — at desktop this is a no-op
       since #primary-nav's flex:1 already consumes all the free space
       either way. */
    margin-inline-start: auto;
}

#site-header nav > ul {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    list-style: none;
    margin: 0;
    padding: 0;
}

#site-header nav > ul > li {
    position: relative;
}

#site-header nav a {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-blue);
    text-decoration: none;
    padding: 0.5rem 0;
    transition: color 0.15s ease;
}

#site-header nav > ul > li > a:hover,
#site-header nav > ul > li > a:focus-visible {
    color: var(--color-blue);
}

/* --- Dropdown submenu (used for standard sub-pages AND the Polylang
   language switcher, which Polylang renders as a nested <ul class="sub-menu">
   rather than a native <select>) --- */

#site-header nav .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(20, 56, 104, 0.12);
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    z-index: 100;
}

#site-header nav li:hover > .sub-menu,
#site-header nav li:focus-within > .sub-menu {
    display: block;
}

/* Language switcher dropdown: its parent <li> sits at the header's far
   right edge (see #lang-switcher-nav), so the generic left: 0 alignment
   above pushes the ~200px-wide panel off-screen to the right. Also
   switched from hover-only (hard to open/close predictably with a
   mouse — moving toward the panel could close it) to click-toggled via
   assets/js/language-switcher.js.
   Selectors here are prefixed with "#site-header nav" (not just
   "#lang-switcher-nav") so their specificity (2 IDs) is strictly
   higher than the generic ".sub-menu"/":hover" rules above (1 ID) —
   a bare "#lang-switcher-nav .sub-menu" has LOWER specificity than
   "#site-header nav .sub-menu" (one less element in the selector) and
   silently loses to it regardless of source order, which is why the
   first attempt at this fix had no visible effect.
   Logical insets: on RTL pages (ar) the switcher sits at the header's
   left edge, so the panel is anchored there instead. */
#site-header nav#lang-switcher-nav .sub-menu {
    inset-inline-start: auto;
    inset-inline-end: 0;
    /* 20 languages ≈ 820px: the header is sticky, so a list taller than
       the viewport could never be scrolled into view — cap it and let it
       scroll on its own (6rem ≈ its top offset under the header + a
       margin). overscroll-behavior: no page scroll when it hits an end. */
    max-height: calc(100vh - 6rem);
    max-height: calc(100dvh - 6rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

/* Inside that scroll container, a focus ring drawn outside the
   (full-width) link would be clipped: draw it inside. */
#site-header nav#lang-switcher-nav .sub-menu a:focus-visible {
    outline-offset: -2px;
}

#site-header nav#lang-switcher-nav > ul > li.pll-parent-menu-item:hover > .sub-menu {
    display: none;
}

#site-header nav#lang-switcher-nav > ul > li.pll-parent-menu-item.is-open > .sub-menu {
    display: block;
}

#site-header nav .sub-menu li {
    width: 100%;
}

#site-header nav .sub-menu a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 1rem;
    font-weight: 500;
    white-space: nowrap;
}

#site-header nav .sub-menu a:hover,
#site-header nav .sub-menu a:focus-visible {
    background: var(--color-bg);
    color: var(--color-blue);
}

/* --- Top-level item that opens the language dropdown: small caret --- */

#site-header nav > ul > li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 0.4rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

/* --- Language flags rendered by Polylang (img.pll-flag) --- */

#site-header nav img.pll-flag {
    width: 18px;
    height: auto;
    margin-right: 0.4rem;
    flex-shrink: 0;
}

/* --- CTA button menu item ("Request a Quote"), added via Appearance >
   Menus by setting the CSS class "menu-cta-button" on a custom link
   item. WordPress puts custom classes on the <li>, never the <a>, so
   the selector targets the nested link explicitly. --- */

#site-header nav li.menu-cta-button > a {
    display: inline-block;
    background-color: var(--color-yellow-warm);
    color: var(--color-blue-deep);
    padding: 0.6rem 1.5rem;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.15s ease;
	box-shadow: 0 8px 22px rgba(255, 199, 44, .35);
}

#site-header nav li.menu-cta-button > a:hover {
	background: #e5a800;;
    color: #14203d;
    box-shadow: 0 14px 32px rgba(255, 199, 44, .42);
	transform: translateY(-2px);
}

#site-header nav li.menu-cta-button > a:hover,
#site-header nav li.menu-cta-button > a:focus-visible {
    background-color: #E6BF00;
}

/* ===================================================================
   RESPONSIVE — Header nav
   =================================================================== */

/* Narrow desktop band where nav labels wrap to two lines before the
   burger breakpoint kicks in — center the wrapped text instead of
   left-aligning it. */
@media (min-width: 1025px) and (max-width: 1221px) {
    #site-header nav a {
        text-align: center;
    }

	#site-header nav > ul {
		gap: var(--space-sm);
	}

	#site-header nav#primary-nav {
		margin-left: 10px;
	}
}

@media (min-width: 1025px) and (max-width: 1109px) {
    #site-header nav li.menu-cta-button > a {
        padding: 0.4rem 0.5rem;
		margin-right: 10px;
    }
}


@media (min-width: 1025px) and (max-width: 1298px) {
    #site-header nav > ul > li {
		text-align: center;
	}

	#site-header nav > ul {
		gap: var(--space-sm);
	}

	#site-header nav li.menu-cta-button > a {
		padding: 10px 12px;
	}

	#site-header nav > ul > li.menu-item-has-children.menu-cta-button > a::after {
		content: none;
		display: none !important;
	}

	#site-header nav > ul > li.menu-cta-button {
		margin-right: 10px;
	}
}


@media (min-width: 1110px) and (max-width: 1121px) {
    #site-header nav li.menu-cta-button > a {
        padding: 0.25rem 0.5rem;
		padding-right: 10px;
    	padding-left: 10px;
		margin-right: 10px;
    }
}


@media (max-width: 900px) {
    #site-header nav > ul {
        gap: var(--space-sm);
    }

    #site-header nav > ul > li > a {
        font-size: 0.875rem;
    }
}

/* ===================================================================
   MOBILE BURGER MENU (below 1024px — deliberately wider than the
   900px breakpoint used elsewhere in the header, so the nav switches
   to the burger before the centered desktop items get uncomfortably
   cramped)
   =================================================================== */

/* Hidden on desktop — #primary-nav stays inline there regardless of
   these classes/attributes (this rule wins over the mobile one below
   by appearing later in the file, at the same 0-specificity-ID level). */
#mobile-nav-toggle,
#mobile-nav-overlay {
    display: none;
}

#mobile-nav-toggle {
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-blue);
    cursor: pointer;
    flex-shrink: 0;
    /* Must stay above the off-canvas panel (z-index: 300) once it's
       open, otherwise the panel covers the button and its close (X)
       icon becomes invisible/unclickable. position is needed for
       z-index to have any effect on this otherwise static element. */
    position: relative;
    z-index: 310;
}

.mobile-nav-toggle__icon {
    width: 40px;
    height: 40px;
}

.mobile-nav-toggle__icon--close {
    display: none;
}

#mobile-nav-toggle.is-open .mobile-nav-toggle__icon--open {
    display: none;
}

#mobile-nav-toggle.is-open .mobile-nav-toggle__icon--close {
    display: block;
}

@media (max-width: 1024px) {
    #mobile-nav-toggle {
        display: flex;
        order: -1; /* before the logo, matches [burger][logo] ... [switcher] */
        margin-right: var(--space-xs);
    }

    #mobile-nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(20, 56, 104, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 290;
    }

    #mobile-nav-overlay.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    /* #primary-nav becomes an off-canvas panel — taken out of the header's
       flex flow (position: fixed), which is what naturally lets the
       language switcher's margin-inline-start: auto pin it to the header's
       right edge next to the logo/burger, with no space reserved for
       the (now hidden) nav in between. */
    #site-header nav#primary-nav {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 85%;
        max-width: 320px;
        flex: none;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        background: var(--color-white);
        padding: calc(var(--space-lg) + var(--space-md)) var(--space-md) var(--space-md);
        box-shadow: 8px 0 24px rgba(20, 56, 104, 0.15);
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 300;
    }

    #site-header nav#primary-nav.is-open {
        transform: translateX(0);
    }

    #site-header nav#primary-nav > ul {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 0;
    }

    #site-header nav#primary-nav > ul > li {
        width: 100%;
    }

    #site-header nav#primary-nav > ul > li > a {
        width: 100%;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--color-border);
        font-size: 1rem;
        color: var(--color-blue);
    }

    #site-header nav#primary-nav > ul > li.menu-cta-button {
        margin-top: var(--space-sm);
    }

    #site-header nav#primary-nav > ul > li.menu-cta-button > a {
        width: auto;
        display: inline-block;
        border-bottom: none;
        padding: 0.6rem 1.5rem;
    }

    /* Sub-menus (e.g. a submenu on a main item, unrelated to the
       switcher which now lives in its own separate nav) become static
       inline content instead of a hover dropdown — there's no hover on
       touch devices, and the panel already scrolls. */
    #site-header nav#primary-nav .sub-menu {
        display: block;
        position: static;
        box-shadow: none;
        border: none;
        padding-left: var(--space-sm);
    }

    body.mobile-nav-is-open {
        overflow: hidden;
    }
}



/* ===================================================================
   SITE HEADER
   =================================================================== */

   #site-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
}

#site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
}

/* Same fix as .page-wrap.ep-container above: plain .ep-container steps
   down through fixed Bootstrap-style breakpoints (1320px, 1140px,
   960px...), so its left/right whitespace jumps around independently
   of the page content, which already bypasses those steps for a flat
   1600px cap. Mirror that exact box model here (same max-width AND
   same padding values) so the header's logo/nav line up with the page
   content below at every viewport width, not just at the breakpoints
   where both systems happen to agree. */
#site-header-inner.ep-container {
    max-width: 1600px;
    padding-left: var(--space-md);
    padding-right: var(--space-sm);
}

#site-header .site-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    text-decoration: none;
    color: var(--color-blue);
}

/* Native WordPress custom logo (Appearance > Customize > Site Identity).
   #site-header is display:flex, so the link just needs to stop the
   image being stretched full-width by flex's default align-items. */
#site-header .custom-logo-link {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

#site-header .custom-logo {
    display: block;
    height: 40px;
    width: auto;
    max-width: 160px;
}

@media (max-width: 600px) {
    #site-header .custom-logo {
        height: 32px;
    }

    /* #site-header-inner.ep-container's flat 32px/16px padding (matching
       the page content columns, see the rule above) leaves too much
       empty space before the burger button on narrow phones — the
       burger already sits right at the header's edge visually. */
    #site-header-inner.ep-container {
        padding-left: var(--space-xs);
        padding-right: var(--space-sm);
    }

	#site-header-inner {
		padding-top: var(--space-xs);
		padding-bottom: var(--space-xs);
	}
}

/* ===================================================================
   HERO SECTION
   =================================================================== */

#hero-wrapper {
    background: linear-gradient(180deg, #FFFFFF 0%, var(--color-bg) 100%);
}

#hero {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-lg);
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg);
}

.hero-b-mobile-logo {
	display: none;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-blue);
    background: rgba(32, 81, 164, 0.08);
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-sm);
}

.hero-eyebrow::before {
    content: '';
    width: 7px;
    height: 7px;
    background: var(--color-yellow-warm);
    border-radius: 50%;
    display: inline-block;
}

.hero-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--color-blue-deep);
    margin: 0 0 var(--space-sm) 0;
    max-width: 16ch;
}

.hero-subtitle {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--color-text-soft);
    max-width: 38ch;
    margin: 0 0 var(--space-md) 0;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background: var(--color-yellow-warm);
    color: var(--color-blue-deep);
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    padding: 0.9rem 1.75rem;
    border-radius: var(--radius);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 0 rgba(20, 56, 104, 0.12);
}

.hero-cta:hover,
.hero-cta:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(255, 212, 0, 0.35);
}

.hero-cta:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 3px;
}

.hero-cta-secondary {
    font-weight: 600;
    color: var(--color-blue);
    text-decoration: none;
    border-bottom: 2px solid var(--color-yellow-warm);
    padding-bottom: 2px;
    transition: color 0.15s ease;
}

.hero-cta-secondary:hover {
    color: var(--color-blue-deep);
}

.hero-trust-line {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    color: var(--color-text-soft);
}

.hero-trust-line svg {
    width: 16px;
    height: 16px;
    color: var(--color-blue);
    flex-shrink: 0;
}

/* --- Visual side: logo + photo --- */

.hero-visual {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4 / 3.4;
    background: linear-gradient(160deg, var(--color-bg) 0%, #EAF0FA 100%);
    border: 1px solid var(--color-border);
}

.hero-visual img.hero-bg-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.12;
}



.hero-visual-logo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    z-index: 1;
}

.hero-visual-logo img {
    width: 100%;
    max-width: 260px;
    filter: drop-shadow(0 8px 24px rgba(32, 81, 164, 0.18));
}

/* ===================================================================
   RESPONSIVE — Hero
   =================================================================== */

@media (max-width: 900px) {
    #hero {
        grid-template-columns: 1fr;
        padding: var(--space-lg) var(--space-md);
    }

    .hero-visual {
        order: -1;
        aspect-ratio: 16 / 9;
    }

    .hero-title {
        max-width: none;
    }
}

@media (max-width: 600px) {
	.hero-b-mobile-logo {
		display: block;
		width: 140px;
		height: auto;
		margin: 0 auto var(--space-sm);
	}
}


/* ===================================================================
   SITE FOOTER
   =================================================================== */

#site-footer {
    padding: var(--space-md) var(--space-lg);
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    font-size: 0.875rem;
    color: var(--color-text-soft);
}

/* ===================================================================
   RECOGNITIONS / AUTHORITIES BANNER — Section 1 (WHAT?)
   =================================================================== */

#recognitions-banner {
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.recognitions-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    text-align: center;
}

.recognitions-text {
    font-family: var(--font-display);
    font-size: 2.375rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-blue-deep);
    max-width: 48ch;
    margin: 0;
}

.recognitions-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    list-style: none;
    margin: 0;
    padding: 0;
}

.recognitions-logo-item img {
    height: 96px;
    width: auto;
    max-width: 280px;
    object-fit: contain;
}

.recognitions-logo-item a:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 3px;
    border-radius: 4px;
}

.recognitions-cta {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-blue);
    text-decoration: none;
    border-bottom: 2px solid var(--color-yellow-warm);
    padding-bottom: 2px;
    transition: color 0.15s ease;
}

.recognitions-cta:hover,
.recognitions-cta:focus-visible {
    color: var(--color-blue-deep);
}

.recognitions-cta:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 3px;
}

/* ===================================================================
   RESPONSIVE — Recognitions banner
   =================================================================== */

@media (max-width: 900px) {
    .recognitions-inner {
        padding: var(--space-md) var(--space-md);
        gap: var(--space-md);
    }

    .recognitions-text {
        font-size: 1.5rem; /* 38px → 24px */
    }

    .recognitions-logos {
        gap: var(--space-md);
    }

    .recognitions-logo-item img {
        height: 64px;
        max-width: 200px;
    }
}


/* ===================================================================
   PARTNERS SCROLL BANNER — Section 1 (WHAT?), auto-scrolling
   worldwide partner ecosystem strip
   =================================================================== */

.partners-scroll-section {
	position: relative;
	overflow: hidden;
	background: var(--color-white);
	padding-top: var(--space-xs);
	padding-bottom: var(--space-xs);
}

.partners-scroll-section-linked {
	cursor: pointer;
}

.partners-scroll-inner {
	position: relative;
	z-index: 1;
	text-align: center;
	padding-bottom: 12px;
}

.partners-scroll-track-wrap {
	pointer-events: auto;
}

/* --- 3-star decoration --- */

.partners-scroll-stars {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	margin-bottom: var(--space-sm);
}

.partners-scroll-stars-line {
	width: 56px;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--color-yellow-warm));
}

.partners-scroll-stars-line:last-child {
	background: linear-gradient(to left, transparent, var(--color-yellow-warm));
}

.partners-scroll-star {
	display: inline-flex;
	color: var(--color-yellow-warm);
}

.partners-scroll-star-sm svg {
	width: 22px;
	height: 22px;
}

.partners-scroll-star-lg svg {
	width: 34px;
	height: 34px;
}

/* --- Title & subtitle --- */

.partners-scroll-title {
	font-family: var(--font-display);
	font-weight: 700;
	/*font-size: 32px;*/
	font-size: 0.85rem; /* ou 13.6px */
    letter-spacing: 0.12em;
    text-transform: uppercase;
	line-height: 1.2;
	color: var(--color-blue);
	margin: 0 0 var(--space-sm) 0;
}

.partners-scroll-subtitle {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--color-text-soft);
	max-width: 100%;
	margin: 0 auto var(--space-xs) auto;
}

/* --- White card wrapping the scrolling logos --- */

.partners-scroll-card {
	background: var(--color-white);
	border-radius: 20px;
	box-shadow: none;
	padding: var(--space-xs) 0;
}

.partners-scroll-track-wrap {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent 0, black 64px, black calc(100% - 64px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, black 64px, black calc(100% - 64px), transparent 100%);
}

.partners-scroll-track {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	width: max-content;
	animation: partners-scroll-marquee 32s linear infinite;
}

.partners-scroll-track-wrap:hover .partners-scroll-track {
	animation-play-state: paused;
}

.partners-scroll-item {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	border-right: 1px solid var(--color-border);
}

.partners-scroll-item img {
	height: 96px;
	width: auto;
	max-width: 280px;
	object-fit: contain;
}

.partners-scroll-item a:focus-visible {
	outline: 2px solid var(--color-blue);
	outline-offset: 3px;
	border-radius: 4px;
}

@keyframes partners-scroll-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* ===================================================================
   RESPONSIVE — Partners Scroll Banner
   =================================================================== */

@media (max-width: 900px) {
    .partners-scroll-section {
		padding-top: var(--space-xs); /* Bitrix #2072 — aligné sur le minimum desktop */
        padding-bottom: var(--space-xs);
	}

    .partners-scroll-stars {
		margin-bottom: var(--space-xs); /* var(--space-sm) → var(--space-xs), espace sous les étoiles réduit de moitié */
	}

	.partners-scroll-title {
		font-size: 0.9rem; /* clamp(1.875rem, 3.5vw, 2.75rem) → 24px fixe, cohérent avec .recognitions-text */
	}
    .partners-scroll-subtitle {
		font-size: 1rem; /* 1.0625rem → 16px */
		margin: 0 auto var(--space-xs) auto; /* Bitrix #2072 — aligné sur le minimum desktop */
	}
}

@media (max-width: 600px) {
	.partners-scroll-section {
		padding-top: var(--space-xs); /* Bitrix #2072 — aligné sur le minimum desktop */
        padding-bottom: var(--space-xs);
	}

	.partners-scroll-card {
		padding: var(--space-xs) 0;
	}

	.partners-scroll-item {
		padding: 0 var(--space-lg);
	}

	.partners-scroll-item img {
		height: 64px;
		max-width: 200px;
	}
}



/* ===================================================================
   WHY? INTRO & BENEFITS — Section 2, sub-block 1
   =================================================================== */

   #why-intro-benefits {
	background: var(--color-bg);
}


.why-intro-inner {
	padding-top: var(--space-sm);
	padding-bottom: var(--space-md); /* était var(--space-xl) */
}

/* --- Eyebrow row --- */

.why-intro-eyebrow-row {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	margin-bottom: var(--space-xs);
}

.why-intro-eyebrow-line {
	flex: 1;
	height: 1px;
	background: var(--color-border);
}

.why-intro-eyebrow {
    flex-shrink: 1;
    min-width: 0;
    word-break: break-word;
    /* font-size: 1.0625rem; */
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-blue);
}

/* --- Header: title/subtitle + illustration --- */
/*  */
.why-intro-header-grid {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: var(--space-sm);
	align-items: start;
	margin-bottom: 0;
}

@media (min-width: 1400px) {
	.why-intro-header-grid {
		grid-template-columns: 3fr 2fr;
	}
}
.why-intro-header-text {
	padding-top: var(--space-xs);
	padding-right: var(--space-md);
}



/* --- Video (replaces the former 3D illustration). Direct Vimeo embed, native player controls. --- */
.why-intro-video {
	margin-bottom: var(--space-sm);
}
.why-intro-video-container {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	background-color: var(--color-bg);
	aspect-ratio: 16 / 9;
}

.why-intro-video-fullscreen-btn {
	position: absolute;
	bottom: 12px;
	right: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.55);
	cursor: pointer;
	transition: background 0.15s ease;
}
.why-intro-video-fullscreen-btn:hover,
.why-intro-video-fullscreen-btn:focus-visible {
	background: rgba(0, 0, 0, 0.8);
}
.why-intro-video-fullscreen-btn svg {
	width: 18px;
	height: 18px;
}
.why-intro-video-container iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

.why-intro-video-caption {
	text-align: center;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-blue-deep);
	margin-top: var(--space-sm);
}

.why-intro-video-caption p,
.why-intro-video-caption h5 {
        margin: 0;
}

.why-intro-video-caption a {
	color: var(--color-blue);
	text-decoration: underline;
}
.why-intro-cta-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	text-align: center;
	margin-top: var(--space-sm);
	padding-bottom: var(--space-md);
}

.why-intro-cta-wrap-no-border {
	margin-top: var(--space-sm);
	padding-bottom: 0;
	border-bottom: none;
}

.why-intro-cta {
	display: inline-flex;
	align-items: center;
	background-color: var(--color-blue-bright-cta-action);
	color: var(--color-white);
	text-decoration: none;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.9375rem;
	padding: 0.75rem 1.5rem;
	/* border-radius: var(--radius); */
	border-radius: 4px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.why-intro-cta:hover,
.why-intro-cta:focus-visible {
	transform: translateY(-1px);
	background-color: var(--color-blue-dark-cta-action);
	box-shadow: 0 4px 10px rgba(3, 136, 235, 0.35);
}

.why-intro-cta-secondary {
	background-color: var(--color-white);
	color: var(--color-blue-bright-cta-action);
	border: 1.5px solid var(--color-blue-bright-cta-action);
}

.why-intro-cta-secondary:hover,
.why-intro-cta-secondary:focus-visible {
	background-color: var(--color-blue-bright-cta-action);
	color: var(--color-white);
	box-shadow: 0 4px 10px rgba(3, 136, 235, 0.2);
}

.why-intro-cta:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
}

.why-intro-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 2rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--color-blue-heading);
	text-align: center;
	max-width: 1400px;
	margin: 0 auto var(--space-sm);
}

.why-intro-subtitle {
	font-size: 17px;
	line-height: 1.6;
	color: var(--color-blue-heading);
	text-align: justify;
	margin: 0;
}

.why-intro-subtitle p {
	margin: 0;
}
.why-intro-subtitle p + p {
	margin-top: 0.75em;
}
#why-benefits-grid {
	background-color: #D1F5FF;
	padding-top: var(--space-md);
	padding-bottom: var(--space-sm);
}

.benefit-cards-subtitle {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 2rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--color-blue-heading);
	text-align: center;
	max-width: 1400px;
	margin: 0 auto var(--space-sm);
}


/* --- Benefit cards grid (irregular: last card spans full width) --- */

.benefit-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(var(--benefit-rows, 6), auto);
	grid-auto-flow: column;
	gap: var(--space-sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.benefit-card {
	position: relative;
	display: flex;
	align-items: center;
	/* gap: var(--space-sm); */
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	/* padding: var(--space-sm); */
	overflow: hidden;
}

.benefit-card-top {
	flex-shrink: 0;
}

.benefit-card-icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 100px;
	flex-shrink: 0;
	overflow: hidden;
}

.benefit-card-icon-wrap img.benefit-card-icon {
	width: 60px;
	height: 60px;
	object-fit: contain;
	/* The uploaded icon SVGs bake in ~31% padding (scale(0.69 0.69) in their markup);
	   scale the rendered image up to crop that padding out so the glyph fills the box. */
	/* transform: scale(1.449); */
}

.benefit-card-content {
	flex: 1;
	min-width: 0;
	position: relative;
	z-index: 1;
}

.benefit-card-title-row {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin-bottom: 0.3rem;
}

.benefit-card-number {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 0;
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 4.4rem;
	line-height: 1;
	color: rgba(3, 136, 235, 0.09);
	pointer-events: none;
	user-select: none;
}

.benefit-card-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--color-blue-deep);
	margin: 0;
}

.benefit-card-text {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--color-text-soft);
	margin: 0;
}

/* --- "Show more" toggle (mobile only) --- */

.benefit-card-toggle-checkbox {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.benefit-card-toggle-btn {
	display: none; /* hidden on desktop — text is always visible there */
}

/* ===================================================================
   RESPONSIVE — Why Intro & Benefits
   =================================================================== */

/* Video stacked above the text below 1200px (side-by-side was too cramped
   between 900px and 1200px). */
@media (max-width: 1199px) {
	.why-intro-header-grid {
		grid-template-columns: 1fr;
		gap: var(--space-xs);
	}
	.why-intro-header-text {
		padding-top: 0;
		padding-right: 0;
	}
	.why-intro-video {
		order: -1;
		margin-bottom: 6px;
	}
	.why-intro-video-caption {
		margin-top: 4px;
		margin-bottom: 0;
	}
}

@media (max-width: 900px) {
	.why-intro-inner {
			padding: var(--space-md) var(--space-sm);
	}
	.benefit-cards {
			grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.benefit-cards {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-auto-flow: row;
		gap: var(--space-xs);
	}

	.why-intro-inner {
		padding: var(--space-sm) var(--space-sm);
	}

	.why-intro-eyebrow-row {
		flex-wrap: wrap;
		justify-content: center;
	}

	.why-intro-eyebrow-line {
		display: none;
	}


	.why-intro-eyebrow {
		font-size: 14px;
		text-align: center;
	}


    .why-intro-title {
		font-size: 1.5rem; /* clamp(2rem, 3.5vw, 2.75rem) → 26px fixe */
		text-align: center;
	}

	.why-intro-title::after {
		left: 50%;
		transform: translateX(-50%);
	}

	.why-intro-subtitle,
	.why-intro-subtitle p {
			font-size: 16px;
			text-align: justify;
			padding-bottom: 0;
	}

	#why-benefits-grid {	
		padding-top: 0;	
	}

	.benefit-card-title {
		font-size: 1.0rem;
	}

	.benefit-cards-subtitle {
		font-size: 1.625rem;
		margin: var(--space-sm) auto var(--space-xs);
	}

	/* Reduce icon size on mobile */
	.benefit-card-icon-wrap {
		width: 64px;
		height: 64px;
	}
	.benefit-card-icon-wrap img.benefit-card-icon {
		width: 45px;
		height: 45px;
	}

	.benefit-card-number {
		display: none;
	}

	/* Card layout: icon + content row, vertically centered */
	.benefit-card {
		align-items: center;
		/* padding: var(--space-xs); */
	}

	/* Content as a grid: title+toggle on row 1, text spanning row 2 */
	.benefit-card-content {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"title  toggle"
			"text   text";
		align-items: center;
		column-gap: 0.5rem;
		row-gap: 0.4rem;
		width: 100%;
	}
	.benefit-card-title-row {
		grid-area: title;
		margin-bottom: 0;
	}
	.benefit-card-toggle-btn {
		margin-right: 5px;
		grid-area: toggle;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		cursor: pointer;
	}
	.benefit-card-text {
		grid-area: text;
		display: none;
	}
	.benefit-card-toggle-checkbox:checked ~ .benefit-card-text {
		display: block;
	}
	.benefit-card-toggle-btn img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		transition: transform 0.2s ease;
	}
	.benefit-card-toggle-checkbox:checked ~ .benefit-card-toggle-btn img {
		transform: rotate(45deg); /* le "+" devient un "×" visuellement à l'ouverture */
	}
	.benefit-card-toggle-checkbox:focus-visible ~ .benefit-card-toggle-btn {
		outline: 2px solid var(--color-blue);
		outline-offset: 2px;
		border-radius: 50%;
	}
}


/* ===================================================================
   WHY? KEY FIGURES — Section 2, sub-block 2
   =================================================================== */

   #why-key-figures {
    background: white;
}

.why-key-figures-inner {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
}

.key-figures {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.key-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 1 200px;
}

.key-figure-icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
    margin-bottom: var(--space-sm);
}

.key-figure-number {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1;
    color: var(--color-blue);
    margin-bottom: 0.25rem;
}

.key-figure-text {
    display: flex;
    flex-direction: column;
}

.key-figure-label {
    font-size: 0.9375rem;
    color: var(--color-text-soft);
}

/* ===================================================================
   RESPONSIVE — Why Key Figures
   =================================================================== */

   @media (max-width: 900px) {
    .key-figures {
        gap: var(--space-lg) var(--space-md);
    }
}

@media (max-width: 600px) {
    .key-figures {
        flex-direction: column;
        gap: var(--space-md);
    }

	.why-key-figures-inner {
		padding-top: var(--space-sm);
		padding-bottom: var(--space-sm);
	}

	.why-key-figures-inner.ep-container {
		padding-left: var(--space-md);	;
		padding-right: var(--space-sm);
	}

    .key-figure {
		flex: 0 1 auto;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: var(--space-sm);
        width: 100%;
        text-align: left;
    }

    .key-figure-icon {
        width: 60px;
        height: 60px;
        flex-shrink: 0;
        margin-bottom: 0;
    }

	.key-figure-text {
        display: flex;
        flex-direction: column;
		width: 100%;
		text-align: center;
    }

    .key-figure-number {
        margin-bottom: 0;
		text-align: center;
    }

    .key-figure-label {
        line-height: 1.3;
    }
}



/* ===================================================================
   WHY? OTHER ADVANTAGES — Section 2, sub-block 3
   =================================================================== */

#why-advantages {
	margin: 0;
	background: #d1f5ff30;
}

.why-advantages-inner {
	padding-top: var(--space-md);
	padding-bottom: var(--space-lg);
}

.why-advantages-eyebrow {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	color: var(--color-blue-dark-cta-action);
	margin: 0 0 var(--space-xs);
}

.why-advantages-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 2rem;
	line-height: 1.2;
	text-align: center;
	color: var(--color-blue-heading);
	margin: 0 0 var(--space-xs);
}

.why-advantages-subtitle {
	text-align: center;
	color: var(--color-text-soft);
	max-width: 640px;
	margin: 0 auto var(--space-md);
}

/* Column count follows the number of pillars actually filled in
   (1/2/3), not just the breakpoint — see .advantages-grid--N below.
   align-items: start keeps each pillar's own height independent so an
   expanded panel never stretches its siblings' row. */
.advantages-grid {
	display: grid;
	gap: var(--space-md);
	align-items: start;
}

.advantages-grid--1 {
	grid-template-columns: 1fr;
}

.advantages-grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

.advantages-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.advantages-pillar {
	display: flex;
	flex-direction: column;
}

.advantages-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	width: 100%;
	border: none;
	border-radius: var(--radius);
	padding: var(--space-sm) var(--space-sm);
	background: linear-gradient(135deg, #2F80ED 0%, #56CCF2 100%);
	color: var(--color-white);
	font-family: inherit;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(20, 56, 104, 0.25);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.advantages-card:hover,
.advantages-card:focus-visible {
	box-shadow: 0 10px 24px rgba(20, 56, 104, 0.35);
	transform: translateY(-2px);
}

.advantages-card:focus-visible {
	outline: 2px solid var(--color-yellow-warm);
	outline-offset: 2px;
}

.advantages-card-icon {
	width: 60px;
	height: 60px;
	flex-shrink: 0;
}

.advantages-card-title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.0625rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.advantages-card-btn {
	/* display: none; /* hidden on desktop, only shown on mobile */ 
	
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.3rem 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 600; 
	display: none;
}

.advantages-card-btn-symbol {
	font-size: 0.9375rem;
	line-height: 1;
	transition: transform 0.2s ease;
}

.advantages-card[aria-expanded="true"] .advantages-card-btn-symbol {
	transform: rotate(45deg);
}

.advantages-panel {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-top: none;
	border-radius: 0 0 var(--radius) var(--radius);
	padding: var(--space-sm) var(--space-sm) var(--space-md);
	margin-top: -1px;
}

.advantages-items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.advantages-item {
	display: flex;
	flex-direction: column;
}

.advantages-item-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.0625rem;
	color: #0388EB;
}

.advantages-item-desc {
	font-size: 0.875rem;
	color: var(--color-text-soft);
}

/* ===================================================================
   RESPONSIVE — Why Other Advantages
   =================================================================== */

@media (max-width: 1280px) {
	.advantages-grid--3 {
		gap: var(--space-sm);
	}
}

@media (max-width: 1024px) {
	.advantages-grid--2,
	.advantages-grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.advantages-grid--1,
	.advantages-grid--2,
	.advantages-grid--3 {
		grid-template-columns: 1fr;
	}

	.why-advantages-title {
		font-size: 1.5rem;
	}
}

@media (max-width: 480px) {
	.why-advantages-inner {
		padding-top: var(--space-md);
		padding-bottom: var(--space-md);
	}

	.advantages-card {
		padding: var(--space-sm);
	}
}


/* ===================================================================
   WHY? ROI CALCULATOR — Section 2, sub-block 3
   =================================================================== */

#why-roi-calculator {
    position: relative;
    background: var(--color-blue);
    padding-bottom: var(--space-md);
}
.roi-header {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    padding-top: var(--space-md);
    padding-bottom: var(--space-sm);
    text-align: center;
}

.roi-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    line-height: 1.2;
    color: var(--color-white);
    margin: 0 0 var(--space-sm) 0;
}

.roi-text {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}

.roi-panels {
    position: relative;
    z-index: 3;
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: start;
}


.roi-panel {
    position: relative;
    z-index: 1;
    background: var(--color-white);
    border-radius: 24px;
    box-shadow: 0 16px 40px rgba(20, 56, 104, 0.18);
    padding: var(--space-md);
}

.roi-panel-form {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.roi-panel-result {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
    min-height: 548px;
}

.roi-subheading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-blue-deep);
    margin: var(--space-md) 0 var(--space-sm) 0;
}

.roi-subheading:first-of-type {
    margin-top: 0;
}

.roi-field-row {
    margin-bottom: var(--space-sm);
}

.roi-currency-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.roi-currency-row .roi-label {
    margin-bottom: 0;
}

.roi-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.35rem;
}

/* --- Collapsed intro state (default on page load) --- */

.roi-intro {
    text-align: center;
    padding: 0 0 var(--space-sm);
}

.roi-intro-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    margin: 0 auto var(--space-md);
    border-radius: 50%;
    background: rgba(32, 81, 164, 0.08);
}

.roi-intro-icon-wrap img {
    width: 76px;
    height: 76px;
    object-fit: contain;
}

.roi-intro-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.375rem;
    line-height: 1.3;
    color: var(--color-blue-deep);
    margin: 0 0 var(--space-sm) 0;
}

.roi-intro-subtitle {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-text-soft);
    max-width: 65ch;
    margin: 0 auto var(--space-xs) auto;
}

.roi-trust-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: var(--color-text-soft);
    margin: var(--space-sm) 0 0 0;
}

.roi-trust-line img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* --- "Cancel" button (expanded state) --- */

#roi-cancel-btn {
    margin-bottom: var(--space-md);
}

/* --- Fields block (expanded state) --- */

.roi-fields-collapsible {
    margin-top: 0;
}

.roi-fields-collapsible .roi-subheading:first-of-type {
    margin-top: 0;
}



/* --- Inputs & selects --- */

.roi-input,
.roi-select {
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-text);
    background: var(--color-white);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.65rem 0.85rem;
    transition: border-color 0.15s ease;
}

.roi-input:focus,
.roi-select:focus {
    outline: none;
    border-color: var(--color-blue);
}

.roi-currency-row .roi-select {
    width: auto;
}

.roi-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.roi-input-wrap .roi-input {
    padding-right: 2.5rem;
}

.roi-input-suffix {
    position: absolute;
    right: 0.85rem;
    font-size: 0.9375rem;
    color: var(--color-text-soft);
    pointer-events: none;
}

/* --- Calculate button --- */

.roi-calculate-btn {
    display: block;
    width: 100%;
    background: var(--color-yellow-warm);
    color: var(--color-blue-deep);
    border: none;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    padding: 0.9rem 1.5rem;
    cursor: pointer;
    margin-top: var(--space-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* [hidden] has lower specificity than the class above on its own,
   so .roi-calculate-btn's display:block silently wins over the
   hidden attribute unless we say so explicitly here. */
.roi-calculate-btn[hidden] {
    display: none;
}

.roi-calculate-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(255, 212, 0, 0.35);
}

.roi-calculate-btn:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 3px;
}

/* --- Error message --- */

.roi-error-message {
    background: #FCE4EC;
    color: #9D2A56;
    border-radius: var(--radius);
    padding: 0.7rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    margin: var(--space-sm) 0 0 0;
}

/* --- Result panel --- */

.roi-result-heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--color-blue-deep);
    margin: 0 0 var(--space-md) 0;
}

.roi-result-block {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.roi-result-icon-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(32, 81, 164, 0.08);
}

.roi-result-icon-wrap img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.roi-result-block-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    min-width: 0;
}

.roi-result-label {
    font-size: 0.875rem;
    color: var(--color-text-soft);
}

.roi-result-value {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.75rem;
    color: var(--color-blue-deep);
}

.roi-result-block-roi .roi-result-value {
    color: var(--color-blue);
}

.roi-disclaimer {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-soft);
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}


/* ===================================================================
   RESPONSIVE — ROI Calculator panels
   =================================================================== */

@media (max-width: 900px) {
    .roi-panels {
        grid-template-columns: 1fr;
        gap: var(--space-md); /* 4rem → 2rem entre les deux cartes */
    }

    .roi-panel-form {
        margin-top: var(--space-sm); /* 4rem → 1rem, espace au-dessus de "Currency" */
		margin-bottom: var(--space-md); /* 4rem → 2rem sous le formulaire */        
	}

    .roi-panel-result {
        margin-top: 0;
    }
}

@media (max-width: 600px) {
	.roi-header {
		padding-top: var(--space-md); /* 4rem → 2rem au-dessus du titre */
		padding-left: var(--space-md);
		padding-right: var(--space-md);
        padding-bottom: var(--space-md);
	}

    .roi-title {
        font-size: 1.625rem; /* clamp(2rem, 3.5vw, 2.75rem) → 26px fixe, cohérent avec why-intro-title */
    }
    
    .roi-text {
        font-size: 0.9375rem; /* 17px → 15px */
    }

	.roi-panels {
		padding-left: var(--space-md); /* 4rem → 2rem de chaque côté */
		padding-right: var(--space-md);
        gap: var(--space-md); /* 4rem → 2rem entre les deux cartes */
	}

    .roi-panel-form {
        margin-top: var(--space-sm); /* 4rem → 1rem, espace au-dessus de "Currency" */
		margin-bottom: var(--space-md); /* 4rem → 2rem sous le formulaire */
	}

    .roi-panel-result {
        margin-bottom: var(--space-xs);
    }

	#why-roi-calculator {
		padding-bottom: var(--space-md); /* 2rem en bas de toute la section */
	}
}



/* ===================================================================
   WHY? GDPR MECHANISMS COMPARISON TABLE — Section 2, sub-block 4a
   =================================================================== */

   #why-gdpr-table {
    background: white;
}

.gdpr-table-inner {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
}

.gdpr-table-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    color: var(--color-blue-heading);
    margin: 0 auto var(--space-xs) auto;
    max-width: 60ch;
    text-align: center;
}

.gdpr-table-intro {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--color-text-soft);
    max-width: 90%;
    margin: 0 auto var(--space-sm) auto;
    text-align: center;
}

/* Bitrix #2101: neutralize the browser default <p> margin for the
   wysiwyg field's own paragraphs — keeps a single paragraph visually
   identical to before, and gives multi-paragraph intros a consistent
   gap instead of the browser's default ~1em. */
.gdpr-table-intro p {
    margin: 0 0 var(--space-xs) 0;
}

.gdpr-table-intro p:last-child {
    margin-bottom: 0;
}

.gdpr-table-scroll {
    overflow-x: auto;
    background: var(--color-white);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    box-shadow: 0 8px 24px rgba(20, 56, 104, 0.08);
    max-width: 1000px;
    margin: 0 auto;
}

.gdpr-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    min-width: 640px;
    border: 1px solid #000000;
}

.gdpr-table th,
.gdpr-table td {
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
}

.gdpr-table thead th {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: #FFFFFF;
    text-align: center;
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-blue-table-header);
}

.gdpr-table-criterion-head {
    width: 40%;
    background: transparent;
}

.gdpr-table thead th:not(.gdpr-table-criterion-head) {
    width: 10%;
}

.gdpr-table tbody th.gdpr-table-criterion {
    text-align: left;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    color: var(--color-text);
    padding: var(--space-xs) var(--space-sm);
    vertical-align: middle;
}

.gdpr-table tbody td {
    width: 10%;
    text-align: center;
    padding: var(--space-xs);
    vertical-align: middle;
}

.gdpr-table tbody tr:nth-child(even) {
    background: rgba(32, 81, 164, 0.025);
}

/* --- Yes/No traffic-light cells (full-cell background) --- */

.gdpr-table tbody td.gdpr-cell-yes,
.gdpr-table tbody td.gdpr-cell-no {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    color: #000000;
}

.gdpr-table tbody td.gdpr-cell-yes {
    background: var(--color-green-positive);
}

.gdpr-table tbody td.gdpr-cell-no {
    background: var(--color-red-negative);
}

/* --- Certification column emphasis (non Yes/No cells only) --- */

.gdpr-table-cert-col:not(.gdpr-cell-yes):not(.gdpr-cell-no) {
    background: rgba(32, 81, 164, 0.06);
}

.gdpr-table tbody tr:nth-child(even) .gdpr-table-cert-col:not(.gdpr-cell-yes):not(.gdpr-cell-no) {
    background: rgba(32, 81, 164, 0.09);
}

/* --- Footer row (GDPR references) --- */

.gdpr-table tfoot th,
.gdpr-table tfoot td {
    border-top: 1px solid #000000;
    padding: var(--space-xs) var(--space-md);
}

.gdpr-table tfoot th {
    text-align: left;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.125rem;
    color: #000000;
}

.gdpr-table-ref-value {
    text-align: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--color-text);
}

.gdpr-table-cta-wrap {
	text-align: center;
	margin-top: var(--space-sm);
}

.gdpr-table-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	background-color: var(--color-mid-blue);
	color: #FFFFFF;
	text-decoration: none;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.9375rem;
	padding: 0.8rem 1.5rem;
	border-radius: var(--radius);
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.gdpr-table-cta:hover,
.gdpr-table-cta:focus-visible {
	background-color: #3058b9;
	box-shadow: 0 4px 10px rgba(3, 136, 235, 0.35);
	transform: translateY(-1px);
}

.gdpr-table-cta:focus-visible {
	outline: 2px solid var(--color-blue-deep);
	outline-offset: 3px;
}

.gdpr-table-cta svg {
	width: 16px;
	height: 16px;
}

/* ===================================================================
   RESPONSIVE — GDPR Mechanisms table
   =================================================================== */


@media (max-width: 1200px) {
	.gdpr-table tbody th.gdpr-table-criterion {
		padding: var(--space-xs) var(--space-xs);
	}
}


@media (max-width: 1000px) {
    /* "Certification" is the longest header word and has no natural break
       point. table-layout:fixed sizes every column from a fixed
       width/percentage regardless of content, which is why a guessed
       ch-based width was either too tight (wrapped) or too generous
       (excess left/right padding) — it can never truly "fit the text".
       Switching to table-layout:auto below 1000px lets each column size
       itself to its own content's natural width instead (nowrap keeps
       "Certification" from wrapping while auto-layout hugs it tightly).
       .gdpr-table-scroll already scrolls horizontally if the total content
       width exceeds the viewport. */
    .gdpr-table-scroll .gdpr-table {
        table-layout: auto;
    }

    .gdpr-table-scroll .gdpr-table thead th.gdpr-table-cert-head {
        white-space: nowrap;
    }
}

@media (max-width: 700px) {
    .gdpr-table-inner {
        padding: var(--space-sm) var(--space-sm);
    }

	.gdpr-table-cta-wrap {
		margin-top: var(--space-sm);
	}
}

@media (max-width: 600px) {
    .gdpr-table-title {
        font-size: 1.5rem; /* clamp(1.75rem, 3vw, 2.5rem) → 24px fixe */
    }

    .gdpr-table-intro {
        font-size: 0.9375rem; /* 17px → 15px */	
		text-align: justify;
    }

	.gdpr-table tbody th.gdpr-table-criterion {
		padding: var(--space-xs) var(--space-xs);
	}

	.gdpr-table thead th {
		padding: var(--space-xs) var(--space-xs);
	}

}


@media (max-width: 500px) {
    .gdpr-table-intro {
        font-size: 0.9375rem; /* 17px → 15px */
    }

}
/* ===================================================================
   CERTIFICATIONS COMPARISON — Section 2, sub-block 4b
   =================================================================== */

   .cert-comparison-section {
	background: white;
	/* background: linear-gradient(160deg, #EEF3FB 0%, #E3EBFB 100%); */
	padding-top: var(--space-md);
	padding-bottom: var(--space-md);
}

.cert-comparison-card {
	background: var(--color-white);
	border-radius: 24px;
	box-shadow: 0 4px 10px rgba(20, 56, 104, 0.12);
	/* box-shadow: 0 24px 60px rgba(20, 56, 104, 0.12); */
	overflow: hidden;
}

/* --- Top: text + illustration --- */

.cert-comparison-top {
	display: grid;
	grid-template-columns: 1.3fr 0.7fr;
	gap: var(--space-lg);
	align-items: flex-start;
	padding: 0 var(--space-lg) 0;
}

.cert-comparison-left {
	max-width: 880px;
}

.cert-comparison-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 2rem;
	line-height: 1.25;
	color: var(--color-blue-heading);
	text-align: center;
	margin: 0;
	padding: var(--space-md) var(--space-lg) var(--space-sm);
 }

.cert-comparison-description {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--color-text-soft);
	margin: 0 0 var(--space-md) 0;
}

.cert-comparison-description p {
	margin: 0 0 var(--space-sm) 0;
}

.cert-comparison-description ul,
.cert-comparison-description ol {
	margin: 0 0 var(--space-sm) 0;
	padding-left: 1.25em;
}

.cert-comparison-description ul {
	list-style: none;
	padding-left: 0;
}

.cert-comparison-description ul li {
	position: relative;
	padding-left: 1.6em;
	margin-bottom: 0.4em;
}

.cert-comparison-description ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.15em;
	height: 1.15em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23396AE2'/%3E%3Cpath d='M6 10.3l2.4 2.4L14.2 7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

.cert-comparison-description ul li:last-child {
	margin-bottom: 0;
}

.cert-comparison-description > :last-child {
	margin-bottom: 0;
}

.cert-comparison-cta-wrap {
	display: flex;
	justify-content: center;
	padding: 0 var(--space-lg) var(--space-lg);
	padding-bottom: var(--space-md);
}
/*
.cert-comparison-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	background: #396AE2;
	color: #FFFFFF;
	text-decoration: none;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.9375rem;
	padding: 0.85rem 1.75rem;
	border-radius: 8px;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.cert-comparison-cta:hover,
.cert-comparison-cta:focus-visible {
	background: var(--color-blue-dark-cta-action);
	transform: translateY(-1px);
}
	 */


.cert-comparison-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	background: #396AE2;
	/*background: var(--color-blue-bright-cta-action);*/
	color: #FFFFFF;
	text-decoration: none;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.9375rem;
	padding: 0.85rem 1.75rem;
	border-radius: 4px;
	transition: background-color 0.15s ease, transform 0.15s ease;
}


.cert-comparison-cta:hover,
.cert-comparison-cta:focus-visible {
	background: #3058b9;
	box-shadow: 0 4px 10px rgba(3, 136, 235, 0.35);
	transform: translateY(-1px);
}

.cert-comparison-cta:focus-visible {
	outline: 2px solid var(--color-blue-deep);
	outline-offset: 3px;
}

.cert-comparison-cta svg {
	width: 16px;
	height: 16px;
}

/* --- Visual (right side) --- */

.cert-comparison-visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 260px;
}

.cert-comparison-illustration {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 380px;
	height: auto;
}

/* --- Bottom strip --- */

.cert-comparison-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-md);
	margin-top: var(--space-sm);
	border-top: 1px solid var(--color-border);
	padding: var(--space-sm) var(--space-lg) var(--space-sm);
	background: #FAFBFE;
 }

.cert-comparison-bottom-left {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.cert-comparison-bottom-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #FFFFFF;
	border: 1.5px solid rgba(32, 81, 164, 0.2);
}

.cert-comparison-bottom-icon-inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 12px;
	background: #0243FB;
	color: #FFFFFF;
}

.cert-comparison-bottom-icon-inner svg {
	width: 20px;
	height: 20px;
}

.cert-comparison-bottom-icon-inner img {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.cert-comparison-bottom-content {
	min-width: 0;
}

.cert-comparison-bottom-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--color-blue-deep);
	margin: 0 0 0.15rem 0;
}

.cert-comparison-bottom-text {
	font-size: 0.875rem;
	color: var(--color-text-soft);
	margin: 0;
}

.cert-comparison-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cert-comparison-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: rgba(32, 81, 164, 0.06);
	color: #0243FB;
	font-size: 0.8125rem;
	font-weight: 600;
	padding: 0.5rem 0.9rem;
	border-radius: var(--radius-pill);
}

.cert-comparison-pill svg {
	width: 14px;
	height: 14px;
	color: #0243FB;
	flex-shrink: 0;
}

@media (min-width: 993px) {
	.cert-comparison-inner.ep-container {
		max-width: 1000px;
	}
}



/* ===================================================================
   RESPONSIVE — Certifications Comparison
   =================================================================== */

@media (max-width: 900px) {
	.cert-comparison-top {
		grid-template-columns: 1fr;
		padding: var(--space-md) var(--space-md); /* var(--space-lg) → var(--space-md) en haut */
		gap: var(--space-sm); /* 4rem → 1rem entre l'illustration et le contenu texte */
	}

	.cert-comparison-visual {
		order: -1;
		min-height: 260px;
	}

    .cert-comparison-left {
		max-width: none; /* supprime la contrainte 560px qui créait une marge droite */
        text-align: center;
	}

    .cert-comparison-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: var(--space-md);
    }

    .cert-comparison-bottom-icon {
		display: none;
	}
    
    .cert-comparison-bottom-left {
        flex-direction: column;
        align-items: center;
    }
    
    .cert-comparison-pills {
        justify-content: center;
    }

}

@media (max-width: 600px) {
	.cert-comparison-section {
		padding: var(--space-sm) var(--space-xs);
	}

    .cert-comparison-left {
		text-align: center;
	}

	.cert-comparison-title {
		font-size: 1.5rem; /* clamp(1.75rem, 3vw, 2.5rem) → 26px fixe */
		padding-left: var(--space-xs);
		padding-right: var(--space-xs);
		padding-bottom: var(--space-xs);
		padding-top: var(--space-md);
	}

	.cert-comparison-description {
		font-size: 0.9375rem; /* 17px → 15px */		
		text-align: justify;
        margin-bottom: var(--space-xs);
		padding-right: var(--space-xs);
		padding-left: var(--space-xs);
	}
}


/* ===================================================================
   WHY? WHITE PAPER — Section 2, sub-block 5
   =================================================================== */

   #why-whitepaper {
	position: relative;
	overflow: hidden;
	background: #d1f5ff4f !important;
}



.whitepaper-inner {
	position: relative;
	z-index: 1;
	padding-top: var(--space-md);
	padding-bottom: var(--space-md);
}

/* --- Centered header --- */

.whitepaper-header {
	text-align: center;
	max-width: 60ch;
	margin: 0 auto var(--space-md) auto;
}

.whitepaper-eyebrow {
	display: inline-block;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-soft);
	margin-bottom: var(--space-sm);
}

.whitepaper-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.25;
	color: var(--color-blue-deep);
	margin: 0;
}

/* --- Book + CTA row, sitting close together --- */

.whitepaper-content {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: var(--space-sm);
	align-items: center;
}

.whitepaper-visual {
	display: flex;
	justify-content: center;
	align-items: center;
}

.whitepaper-visual img {
	width: auto;
	height: auto;
	max-height: 480px;
	max-width: 100%;
	object-fit: contain;
	filter: drop-shadow(0 16px 32px rgba(20, 56, 104, 0.25));
}

.whitepaper-visual a {
	display: block;
	transition: transform 0.15s ease;
}
.whitepaper-visual a:hover,
.whitepaper-visual a:focus-visible {
	transform: translateY(-2px);
}
.whitepaper-visual a:focus-visible {
	outline: 2px solid var(--color-blue);
	outline-offset: 4px;
	border-radius: 4px;
}

/* --- CTA, placed in the right-hand column next to the book --- */

.whitepaper-cta-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.whitepaper-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	background: var(--color-yellow-warm);
	color: var(--color-blue-deep);
	text-decoration: none;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1rem;
	padding: 0.9rem 1.75rem;
	border-radius: var(--radius);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	box-shadow: 0 2px 0 rgba(20, 56, 104, 0.12);
}

.whitepaper-cta:hover,
.whitepaper-cta:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(255, 212, 0, 0.35);
}

.whitepaper-cta:focus-visible {
	outline: 2px solid var(--color-blue);
	outline-offset: 3px;
}

.prose img.flag-white-paper {
	width: 30px;
	height: auto;
	border-radius: 0;
}

.prose img.flag-white-paper + a {
    border-bottom: none;
}

/*
.prose .whitepaper-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 2rem;
}

.prose .whitepaper-links p {
    margin: 0;
}*/

/* ===================================================================
   RESPONSIVE — White Paper
   =================================================================== */

   @media (max-width: 800px) {
	.whitepaper-content {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.whitepaper-visual {
		margin-bottom: var(--space-md);
	}

	.whitepaper-visual img {
		height: auto;
		width: 60%;
		max-width: 320px;
	}
}


@media (max-width: 600px) {

	.whitepaper-title {
		font-size: 1.5rem;
	}

	.whitepaper-header {
		margin-bottom: var(--space-sm);
	}

	.whitepaper-visual {
		margin-bottom: 0;
	}
}

/* ===================================================================
   VALUE PROPOSITION BY AUDIENCE — Section 3
   =================================================================== */

   #audience-selector {
    background: var(--color-bg);
}

.audience-inner {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
}

.audience-header {
    text-align: center;
    margin-bottom: var(--space-sm);
}

.audience-eyebrow {
    display: inline-block;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-blue);
    margin-bottom: var(--space-sm);
}

.audience-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    line-height: 1.3;
    color: var(--color-blue-deep);
    margin: 0;
}

/* --- Tabs --- */

.audience-tabs {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-sm);
}

.audience-tab {
    text-align: center;
}

.audience-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.6rem 0.1rem 0.85rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-soft);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.audience-tab:hover {
    color: var(--color-blue);
}

.audience-tab.is-active {
    color: var(--color-blue-deep);
    border-bottom-color: var(--color-yellow-warm);
}

.audience-tab:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
}

/* --- Panels --- */

.audience-panels {
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(20, 56, 104, 0.08);
    overflow: hidden;
}

.audience-panel {
    display: none;
}

.audience-panel.is-active {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
}

.audience-panel-image {
    position: relative;
    min-height: 320px;
}

.audience-panel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.audience-panel-image.has-fallback-bg {
    background: linear-gradient(140deg, var(--color-blue) 0%, var(--color-blue-deep) 100%);
}

.audience-panel-text {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.audience-card-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.375rem;
    color: var(--color-blue-deep);
    margin: 0 0 var(--space-md) 0;
}

.audience-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.audience-bullet {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-text);
}

.audience-bullet svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 0.2rem;
    color: var(--color-yellow-warm);
}

/* --- CTA --- */

.audience-cta-wrap {
    text-align: center;
    margin-top: var(--space-sm);
}

.audience-cta {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-blue);
    text-decoration: none;
    border-bottom: 2px solid var(--color-yellow-warm);
    padding-bottom: 2px;
    transition: color 0.15s ease;
}

.audience-cta:hover,
.audience-cta:focus-visible {
    color: var(--color-blue-deep);
}

/* ===================================================================
   RESPONSIVE — Audience selector
   =================================================================== */
   @media (max-width: 900px) {
        .audience-inner {
            padding-top: var(--space-md);
            padding-bottom: var(--space-md);
        }

        .audience-header {
            margin-bottom: var(--space-md); /* 4rem → 2rem avant les tabs */
        }

        .audience-cta-wrap {
            margin-top: var(--space-md); /* 4rem → 2rem avant le lien "Explore..." */
        }
    }


   @media (max-width: 600px) {
	.cert-comparison-visual {
		display: none;
	}

    .audience-tabs {
        gap: var(--space-sm);
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding-bottom: 2px;
    }

    .audience-tabs {
		-webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
		mask-image: linear-gradient(to right, black 85%, transparent 100%);
	}

    .audience-tab {
        flex-shrink: 0;
    }

    .audience-inner {
        padding: var(--space-sm) var(--space-sm);
    }

    .audience-panel.is-active {
        grid-template-columns: 1fr;
    }

    .audience-panel-image {
        min-height: 200px;
    }

    .audience-card-title {
        font-size: 1.5rem; /* 22px → 19px */
        line-height: 1.3;
		padding-top: var(--space-sm);
		margin-bottom: var(--space-sm);
    }

    .audience-panel-text {
        padding: var(--space-sm) var(--space-sm);
    }

	.cert-comparison-top {
		padding: var(--space-sm) var(--space-xs);
	}

	.audience-title {
		font-size: 1.5rem;
	}

	.audience-header {
        margin-bottom: var(--space-sm);
    }

}

    @media (min-width: 601px) {
        .audience-cta {
            font-size: 1.0625rem; /* 15px → 17px */
        }
    }


/* ===================================================================
   DEDICATED INDUSTRY PAGES — Section 4
   =================================================================== */

   #industry-selector {
    background: #EBEBEB;
}

.industry-inner {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

.industry-header {
    margin-bottom: var(--space-lg);
}

.industry-eyebrow {
    display: block;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-blue);
    margin-bottom: var(--space-xs);
}

.industry-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    line-height: 1.25;
    color: var(--color-blue-deep);
    margin: 0;
    max-width: 50ch;
}

/* --- Tabs --- */

.industry-tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid var(--color-border);
    background: var(--color-white);
}

.industry-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-xs) 0.9rem;
    cursor: pointer;
    background: var(--color-white);
    border: none;
    border-right: 1px solid var(--color-border);
    border-bottom: 3px solid transparent;
    color: var(--color-text-soft);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.industry-tab:last-child {
    border-right: none;
}

.industry-tab:hover {
    color: var(--color-blue);
}

.industry-tab.is-active {
    color: var(--color-blue-deep);
    border-bottom-color: var(--color-yellow-warm);
}

.industry-tab:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
}

.industry-tab-icon {
    width: 26px;
    height: 26px;
}

/* --- Panels --- */

.industry-panels {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-lg);
}

.industry-panel {
    display: none;
}

.industry-panel.is-active {
    display: grid;
    grid-template-columns: 46% 54%;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(20, 56, 104, 0.12);
}

.industry-panel-text {
    background: var(--color-white);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
}

.industry-panel-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.625rem;
    line-height: 1.25;
    color: var(--color-blue-deep);
    margin: 0 0 var(--space-sm) 0;
}

.industry-panel-desc {
    font-size: 0.9375rem;
    color: var(--color-text-soft);
    line-height: 1.65;
    margin: 0 0 var(--space-md) 0;
}

.industry-sub-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.35rem 0;
}

.industry-sub-desc {
    font-size: 0.875rem;
    color: var(--color-text-soft);
    line-height: 1.6;
    flex-grow: 1;
    margin: 0 0 var(--space-md) 0;
}

.industry-panel-cta {
    display: inline-block;
    background: var(--color-yellow-warm);
    color: var(--color-blue-deep);
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.75rem 1.375rem;
    border-radius: var(--radius);
    text-decoration: none;
    align-self: flex-start;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.industry-panel-cta:hover,
.industry-panel-cta:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(255, 212, 0, 0.35);
}

.industry-panel-cta:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 3px;
}

/* --- Panel image side --- */

.industry-panel-image {
    position: relative;
    min-height: 360px;
    overflow: hidden;
}

.industry-panel-image.has-fallback-bg {
    background: linear-gradient(140deg, var(--color-blue) 0%, var(--color-blue-deep) 60%, #0A1F3A 100%);
}

.industry-panel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.industry-image-arrow {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    width: 40px;
    height: 40px;
    background: var(--color-yellow-warm);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-blue-deep);
    text-decoration: none;
    z-index: 3;
    transition: transform 0.15s ease;
}

.industry-image-arrow:hover,
.industry-image-arrow:focus-visible {
    transform: translateY(-1px);
}

.industry-image-arrow:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
}

.industry-image-arrow svg {
    width: 17px;
    height: 17px;
}

.industry-image-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3.5rem var(--space-md) var(--space-sm);
    background: linear-gradient(transparent, rgba(10, 31, 58, 0.85));
    color: var(--color-white);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    z-index: 2;
}

/* ===================================================================
   RESPONSIVE — Industry selector
   =================================================================== */


   @media (max-width: 900px) {
	.industry-inner {
		padding-top: var(--space-lg); /* 6rem → 4rem */
		padding-bottom: var(--space-lg);
	}

	.industry-header {
		text-align: center;
		margin-bottom: var(--space-md); /* 4rem → 2rem */
	}

	.industry-panels {
		padding-top: var(--space-md); /* 4rem → 2rem */
	}
}

@media (max-width: 800px) {
    .industry-panel.is-active {
        grid-template-columns: 1fr;
    }

    .industry-panel-image {
        min-height: 240px;
    }
}

@media (max-width: 767px) {
    .industry-tabs {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        overflow: hidden;
    }

    .industry-tab {
        flex-direction: row;
        justify-content: flex-start;
        gap: var(--space-sm);
        padding: 0.9rem var(--space-md);
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        border-left: 4px solid transparent;
        font-size: 0.875rem;
        text-align: left;
    }

    .industry-tab:last-child {
        border-bottom: none;
    }

    .industry-tab.is-active {
        border-left-color: var(--color-yellow-warm);
        background: var(--color-bg);
    }

    .industry-tab-icon {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }
}

@media (max-width: 600px) {
	.industry-eyebrow {
		font-size: 0.9375rem; /* 17px → 15px */
	}

	.industry-title {
		font-size: 1.5rem; /* clamp(1.75rem, 3vw, 2.25rem) → 24px fixe */
	}

	.industry-panel-title {
		font-size: 1.375rem; /* 26px → 22px */
	}
}

@media (max-width: 500px) {

    .industry-inner {
        padding: var(--space-md) var(--space-md);
    }

    .industry-panel-text {
        padding: var(--space-md);
    }
}


/* ===================================================================
   PROCUREMENT TEASER — Section 5
   =================================================================== */

   .procurement-section {
	background: white;
	/* background: linear-gradient(160deg, #EEF3FB 0%, #E3EBFB 100%); */
	padding-top:  var(--space-sm);
	padding-bottom: var(--space-sm);
}

.procurement-card {
	background: var(--color-white);
	border-radius: 24px;
	box-shadow: 0 5px 12px rgba(20, 56, 104, 0.12);
	overflow: hidden;
}

/* --- Top: visual + content --- */

.procurement-top {
	display: grid;
	grid-template-columns: 3fr 2fr;
 }
 
 .procurement-content {
	order: 1;
 }

.procurement-visual {
	order: 2;
	position: relative;
	background: #010809;
	padding: var(--space-md) var(--space-md);
	padding-right: 10px;
	padding-left: 0;
	min-height: 420px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.procurement-logo {
	position: absolute;
	top: var(--space-md);
	left: var(--space-md);
	z-index: 2;
}

.procurement-logo img {
	height: 56px;
	width: auto;
}

.procurement-illustration-wrap {
	position: relative;
	width: 100%;
	max-width: 520px;
}

.procurement-illustration {
	width: 100%;
	height: auto;
	display: block;
}

.procurement-badges {
	list-style: none;
	margin: 0;
	padding: 0;
}

.procurement-badge {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	text-align: center;
}

.procurement-badge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--color-white);
	box-shadow: 0 8px 20px rgba(20, 56, 104, 0.12);
	color: var(--color-blue);
}

.procurement-badge-icon svg {
	width: 30px;
	height: 30px;
}

.procurement-badge-icon img {
	width: 50px;
	height: 50px;
	object-fit: contain;
}

.procurement-badge-label {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--color-blue-deep);
	white-space: nowrap;
}

.procurement-badge-top-left {
	top: 12%;
	left: -4%;
}

.procurement-badge-top-right {
	top: 12%;
	right: -4%;
}

.procurement-badge-bottom-center {
	bottom: -22%;
	left: 50%;
	transform: translateX(-50%);
}

/* --- Content (right side) --- */

.procurement-content {
	padding: var(--space-md) var(--space-lg);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.procurement-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	align-self: flex-start;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #044EF8;
	background: rgba(4, 78, 248, 0.06);
	border: 1px solid rgba(4, 78, 248, 0.18);
	padding: 0.6rem 1.1rem;
	border-radius: var(--radius-pill);
	margin-bottom: var(--space-md);
}

.procurement-eyebrow-icon {
	display: inline-flex;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.procurement-eyebrow-icon svg {
	width: 100%;
	height: 100%;
}

.procurement-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.8rem;
	line-height: 1.25;
	color: var(--color-blue-heading);
	margin: 0 0 var(--space-sm) 0;
}



.procurement-text {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-text-soft);
	margin: 0 0 var(--space-md) 0;
}

.procurement-text p {
	margin: 0 0 var(--space-sm) 0;
}

.procurement-text ul,
.procurement-text ol {
	margin: 0 0 var(--space-sm) 0;
	padding-left: 1.25em;
}

.procurement-text > :last-child {
	margin-bottom: 0;
}

.procurement-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	align-self: flex-start;
	/* background: var(--color-blue); */
	background: var(--color-blue-deep);
	color: #FFFFFF;
	text-decoration: none;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.9375rem;
	padding: 0.85rem 1.75rem;
	border-radius: 4px;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.procurement-cta:hover,
.procurement-cta:focus-visible {
	background: #235faf;
	box-shadow: 0 4px 10px rgba(3, 136, 235, 0.35);
	transform: translateY(-1px);
}

.procurement-cta:focus-visible {
	outline: 2px solid var(--color-blue-deep);
	outline-offset: 3px;
}

.procurement-cta svg {
	width: 16px;
	height: 16px;
}

/* --- Bottom strip --- */

.procurement-bottom {
	border-top: 1px solid var(--color-border);
	background: #FAFBFE;
	padding: var(--space-md) var(--space-lg);
}

.procurement-bottom-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.procurement-bottom-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
}

.procurement-bottom-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: rgba(32, 81, 164, 0.06);
	color: var(--color-blue);
}

.procurement-bottom-icon svg {
	width: 32px;
	height: 32px;
}

.procurement-bottom-icon img {
	width: 50px;
	height: 50px;
	object-fit: contain;
}

.procurement-bottom-content {
	min-width: 0;
}

.procurement-bottom-item-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
	color: var(--color-blue-deep);
	margin: 0 0 0.2rem 0;
}

.procurement-bottom-item-text {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--color-text-soft);
	margin: 0;
}

/* ===================================================================
   RESPONSIVE — Procurement Teaser
   =================================================================== */

@media (max-width: 900px) {

	.procurement-top {
		grid-template-columns: 1fr;
	}

	.procurement-visual {
		min-height: 360px;
		padding-top: 64px;
	}

    .procurement-badges {
		display: none; /* badges "Reduce risks / Save costs / Expert support" masqués <900px */
	}

	.procurement-content {
		padding: var(--space-lg) var(--space-md);
	}

	.procurement-eyebrow,
	.procurement-cta {
		align-self: center;
	}

	.procurement-bottom-grid {
		grid-template-columns: repeat(2, 1fr);
	}

    .procurement-logo {
		top: var(--space-sm); /* var(--space-lg) → var(--space-sm), remonte le logo */
		left: var(--space-sm); /* var(--space-lg) → var(--space-sm), repositionne à gauche */
	}

    .procurement-logo img {
		height: 40px; /* 56px → 40px */
	}
}

@media (max-width: 600px) {
	.procurement-section {
		padding: var(--space-sm) var(--space-sm);
	}

	.procurement-inner.ep-container {
		padding-left: 0;
		padding-right: 0;
	}

	.procurement-visual {
		min-height: 0;
		padding: var(--space-md) 0 var(--space-sm);
	}

	.procurement-illustration-wrap {
		max-width: none;
		margin: 0;
	}

	.procurement-logo {
		top: var(--space-sm);
		left: var(--space-sm);
	}

	.procurement-logo img {
		height: 40px;
	}

	.procurement-content {
		padding-top: var(--space-sm);
        padding-bottom: var(--space-sm);
		padding-left: var(--space-sm);
		padding-right: var(--space-sm);
		align-items: center;
	}

	.procurement-eyebrow {
		font-size: 0.8125rem;
	}

	.procurement-title {
		font-size: 1.5rem;
		text-align: center;
	}



	.procurement-text {
		font-size: 0.9375rem;
		text-align: justify;
        margin-bottom: 0;
	}

	.procurement-cta {
		justify-content: center;
		text-align: center;
		margin-top: var(--space-sm);
		margin-bottom: var(--space-sm);
	}

	.procurement-bottom-grid {
		grid-template-columns: 1fr;
	}

    .procurement-bottom {
        padding-right: var(--space-sm);
        padding-left: var(--space-sm);
    }
}

/* Section 6 — Testimonials Carousel (Proof) */
.testimonials-section {
	width: 100%;
	background-color: white;
	padding: 64px 0;
	padding-top: var(--space-md);
	padding-bottom: var(--space-md);
	overflow-x: hidden; /* prevents the carousel's intentional peek-overflow from ever widening the page on any breakpoint */
}

.testimonials-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 32px;
	/* No overflow rule here on desktop — the track is allowed to peek
	   past this container's right edge, which is what creates the
	   "next card" preview effect. */
}

.testimonials-title {
	font-family: var(--font-display);
	font-size: 2rem;
	color: var(--color-blue);
	text-align: center;
	margin: 0 0 32px;
}

.testimonials-carousel {
	position: relative;
}

.testimonials-track {
	display: flex;
	gap: 32px;
	transition: transform 0.5s ease;
}

@media (max-width: 768px) {
	/* On mobile each card is 100% width, so the 2nd card peeking past
	   the container would be a near-full-width duplicate, not a subtle
	   preview — visually pointless and what caused the page-widening
	   bug. So on mobile only, clip it at the inner container's edge. */
	.testimonials-inner {
		overflow: hidden;
	}
}

/* --- Base (s'applique à tous les breakpoints sauf override) --- */
.testimonial-card {
	position: relative;
	flex: 0 0 calc(50% - 16px);
	background-color: #FFFFFF;
	border: 1px solid #E6EAF2;
	border-radius: 12px;
	padding: 28px;
	overflow: hidden; /* établit un block formatting context pour que la hauteur du card englobe correctement la photo flottante + le texte qui l'entoure */
}

.testimonial-photo {
	border-radius: 8px;
	overflow: hidden;
	background-color: var(--color-bg);
}

.testimonial-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.testimonial-photo.has-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #B7C0D1;
}

.testimonial-photo.has-fallback svg {
	width: 48px;
	height: 48px;
}

.testimonial-content {
	/* Ne pas établir de nouveau block formatting context ici (pas de
	   overflow, display:flex, etc.) : le texte doit pouvoir reprendre
	   toute la largeur de la carte une fois passé le bas de la photo
	   flottante. Le confinement de hauteur du float est déjà géré par
	   overflow:hidden sur .testimonial-card. */
}

.testimonial-author {
	clear: both; /* utilisé en mobile où l'identité reste en flux normal (voir media queries) */
}

.testimonial-quote {
	font-family: var(--font-body);
	font-style: italic;
	font-size: 0.95rem;
	line-height: 1.65;
	color: #3D4759;
	margin: 0 0 20px;
}

.testimonial-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
	color: var(--color-blue);
	margin: 0;
}

.testimonial-role {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--color-blue);
	margin: 2px 0 0;
}

.testimonial-company {
	font-family: var(--font-body);
	font-size: 0.85rem;
	color: #8993A6;
	margin: 2px 0 0;
}

.testimonials-controls {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 24px;
}

.testimonials-arrow {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid #D7DEEA;
	background-color: #FFFFFF;
	color: var(--color-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.testimonials-arrow svg {
	width: 18px;
	height: 18px;
}

.testimonials-arrow:hover:not(:disabled) {
	background-color: var(--color-blue);
	color: #FFFFFF;
}

.testimonials-arrow:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.testimonials-cta-wrap {
	text-align: center;
	margin-top: var(--space-sm);
}

.testimonials-cta {
	display: inline-flex;
	align-items: center;
	background-color: var(--color-blue-bright-cta-action);
	color: white !important;
	text-decoration: none;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.9375rem;
	padding: 0.75rem 1.5rem;
	border-radius: var(--radius);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.testimonials-cta:hover,
.testimonials-cta:focus-visible {
	transform: translateY(-1px);
	/* box-shadow: 0 4px 10px var(--color-blue); */
	background-color: var(--color-blue-dark-cta-action);
	box-shadow: 0 4px 10px rgba(3, 136, 235, 0.35);
}

.testimonials-cta:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
}

/* Variante "page-generic" (block-testimonials-carousel.php) : réplique du
   carousel homepage ci-dessus à l'identique (mêmes classes .testimonials-*
   / .testimonial-*), sauf le débordement plein écran — ici le carousel
   doit rester confiné à la largeur de .page-wrap. .testimonials-inner n'a
   par défaut aucune règle overflow sur desktop (cf. commentaire plus haut),
   ce qui laisse le track déborder jusqu'au bord du viewport ; on force ici
   l'overflow:hidden à tous les breakpoints pour clipper au bord du
   conteneur local au lieu du viewport. */
.pg-testimonials-carousel {
	margin: 0;
}

.pg-testimonials-carousel .testimonials-inner {
	overflow: hidden;
	max-width: 100%;
}



/* --- Desktop (≥769px) : photo flottante, texte qui wrap autour --- */
@media (min-width: 769px) {
	.testimonial-photo {
			float: left;
			width: 180px;
			height: 180px;
			margin: 0 24px 16px 0;
			shape-outside: margin-box;
	}

	.testimonial-content {
			padding-bottom: 90px; /* réserve l'espace occupé par le bloc identité ancré en absolu, pour éviter que la citation ne passe dessous */
	}

	.testimonial-author {
			position: absolute;
			left: 28px;
			right: 28px;
			bottom: 28px;
			text-align: left;
	}
}


@media (max-width: 768px) {
    .testimonials-track {
		align-items: flex-start;
	}

	.testimonials-inner {
		overflow: hidden;
	}

	/* Only one card is shown at a time on mobile, but the flex row's
	   height is still the tallest of ALL cards (they're just laid out
	   side by side, not clipped vertically) — leaving a big gap below
	   shorter quotes. JS (testimonials-carousel.js) sets this wrapper's
	   height to match the currently active card only; overflow:hidden
	   crops the taller siblings sitting beside it out of view. */
	.testimonials-viewport {
		overflow: hidden;
		transition: height 0.3s ease;
	}

	.testimonial-card {
		flex: 0 0 100%;
		text-align: center;
		height: auto;
	}

	.testimonial-photo {
		width: 260px;
		height: 260px;
		max-width: 80%;
		margin: 0 auto 20px;
		float: none;
	}

    /*
	.testimonial-content {
		align-items: center;
	}
        */

    .testimonial-quote {
		text-align: justify;
	}
}

@media (max-width: 900px) {
	.testimonials-section {
		padding-top: var(--space-md);
		padding-bottom: var(--space-md);
	}
}

@media (max-width: 600px) {
	.testimonials-title {
		font-size: 1.5rem; /* 32px → 24px */
	}
}


/* Section 6 — Video Testimonials (Proof) */
.video-testimonials-section {
	width: 100%;
	position: relative;
	background: linear-gradient(160deg, #EEF3FB 0%, #E3EBFB 100%);
	padding: var(--space-md) 0;
	overflow: hidden;
}

.video-testimonials-inner {
	position: relative;
	z-index: 1;
}

.video-testimonials-title {
	font-family: var(--font-display);
	font-size: 2rem;
	color: var(--color-blue);
	text-align: center;
	margin: 0 0 16px;
}

.video-testimonials-intro {
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--color-text-soft);
	text-align: center;
	max-width: 760px;
	margin: 0 auto var(--space-md);
}

.video-testimonials-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 32px;
}

.video-testimonial-card {
	background-color: #FFFFFF;
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.video-testimonial-header {
	padding: 16px 24px;
	text-align: center;
	background-color: var(--color-yellow-warm);
}

.video-testimonial-company {
	font-family: var(--font-display);
	font-weight: 700;
	font-style: italic;
	font-size: 1.4rem;
	color: var(--color-blue-deep);
}

.video-testimonial-content {
	padding: 20px 24px 24px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.video-testimonial-desc {
	font-family: var(--font-body);
	font-size: 0.9rem;
	line-height: 1.5;
	color: #3D4759;
	text-align: justify;
	margin: 0 0 16px;
}

.video-thumb-container {
	position: relative;
	margin-top: auto;
	border-radius: 10px;
	overflow: hidden;
	background-color: var(--color-bg);
	cursor: pointer;
	aspect-ratio: 2.06 / 1; /* keeps the logo header + text/photo middle band, crops out only the 31px URL footer (measured: 849x443 source, 412px kept) */
}

.video-thumb-image {
	display: none; /* the <img> tag stays in the DOM for alt text / accessibility / SEO, but is visually replaced by the background-image below for precise cropping */
}

.video-thumb-bg {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-size: 100% 107.52%; /* scales the full source image just enough that only the bottom URL band falls outside the visible container */
	background-position: left top; /* top-aligned: keeps the logo fully visible, excess is cropped from the bottom only */
}



.video-thumb-fallback {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--color-blue-deep) 0%, var(--color-blue) 100%);
}

.video-play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: rgba(20, 56, 104, 0.9);
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.video-play-button svg {
	width: 22px;
	height: 22px;
}

.video-thumb-container:hover .video-play-button {
	background-color: var(--color-blue);
	transform: translate(-50%, -50%) scale(1.08);
}

/* Lightbox modal — blue/50%-opacity/blurred backdrop, per spec
   (reusing the pattern already validated on privacy-elite.com). */
.video-modal {
	display: none;
	position: fixed;
	z-index: 1000;
	inset: 0;
	background: rgba(20, 56, 104, 0.5); /* --color-blue-deep at 50% opacity */
	backdrop-filter: blur(5px);
	align-items: center;
	justify-content: center;
}

.video-modal.is-active {
	display: flex;
}

.video-modal-content {
	position: relative;
	width: 95%;
	max-width: 1000px;
	aspect-ratio: 16 / 9;
	background-color: #000000;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.video-modal-frame-container {
	width: 100%;
	height: 100%;
}

.video-modal-close {
	position: absolute;
	top: -50px;
	right: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background-color: #FFFFFF;
	color: var(--color-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.video-modal-close svg {
	width: 18px;
	height: 18px;
}

.video-modal-close:hover {
	background-color: var(--color-blue);
	color: #FFFFFF;
}

@media (max-width: 768px) {
	.video-testimonials-grid {
		grid-template-columns: 1fr;
	}
	.video-modal-close {
		top: -45px;
		width: 35px;
		height: 35px;
	}
}

@media (max-width: 600px) {
	.video-testimonials-section {
		display: none;
		/* font-size: 1.5rem; */
	}
}


/* ===================================================================
   CERTIFICATION JOURNEY — Section 7 (HOW?)
   =================================================================== */

   .journey-section {
	width: 100%;
	background-color: white;
	padding: 48px 0;
	position: relative;
	overflow: hidden;
}

.journey-inner {
	position: relative;
	z-index: 1;
}

.journey-header {
	text-align: center;
	max-width: 1100px;
	margin: 0 auto var(--space-sm) auto;
}

.journey-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #1F52A3;
	margin-bottom: var(--space-sm);
}

.journey-eyebrow::before,
.journey-eyebrow::after {
	content: '';
	width: 24px;
	height: 1px;
	background: var(--color-yellow-warm);
}

.journey-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 2rem;
	line-height: 1.2;
	color: var(--color-blue-heading);
	margin: 0 0 var(--space-sm) 0;
	position: relative;
	padding-bottom: 0;
}

.journey-title::after {
	/*
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 48px;
	height: 3px;
	background: var(--color-yellow-warm);
	border-radius: var(--radius-pill); */
}

.journey-steps-panel {
	position: relative;
	background: #FFFFFF;
	border: 1px solid var(--color-border);
	border-radius: 20px;
	padding: 0 var(--space-md) var(--space-lg);
	padding-left: 0;
    padding-right: 0;
	padding-bottom: var(--space-sm);
	margin: 0 0 var(--space-md);
}

.journey-steps {
	list-style: none;
	/* Pulls the grid (and the markers, its first child in each column) up so the
	   numbered circles straddle the panel's top border, matching the mockup. */
	margin: -28px 0 0;
	padding: 0;
	display: grid;
	/* minmax(0, 1fr) instead of a bare 1fr: without it, a track's default min
	   size is its content's intrinsic width, so the column with the longest
	   step title ends up wider than the other two despite all being "1fr". */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	position: relative;
}

/* Connecting line, drawn behind the markers, spanning step 1 to step 3. */
.journey-steps::before {
	content: '';
	position: absolute;
	top: 28px; /* vertically centers on the step marker (56px tall) */
	left: calc(100% / 6); /* centers on the middle of step 1's column */
	right: calc(100% / 6); /* centers on the middle of step 3's column */
	height: 2px;
	background: repeating-linear-gradient(
		to right,
		var(--color-border) 0,
		var(--color-border) 8px,
		transparent 8px,
		transparent 16px
	);
	z-index: 0;
}

.journey-step {
	position: relative;
	z-index: 1;
	text-align: center;
	display: flex;
	flex-direction: column;
}

.journey-step-marker {
	position: relative;
	z-index: 2;
	width: 56px;
	height: 56px;
	margin: 0 auto -20px;
	background-color: var(--color-yellow-warm);
	border: 3px solid var(--color-blue);
	box-sizing: border-box;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.journey-step-number {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.375rem;
	color: var(--color-blue-deep);
}

.journey-step-card {
	position: relative;
	z-index: 1;
	flex: 1;
	padding: 8px var(--space-md) 0;
}

.journey-step:not(:last-child) .journey-step-card {
	border-right: 1px solid var(--color-border);
}

.journey-step-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-sm);
	width: fit-content;
	max-width: 100%;
	margin: 0 auto var(--space-xs);
	margin-top: 24px;
	line-height: 25px;
	text-align: left;
}

.journey-step-icon-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
}

.journey-step-icon-glow {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	/* background: radial-gradient(circle, rgba(255, 212, 0, 0.25) 0%, rgba(255, 212, 0, 0) 70%); */
}

.journey-step-icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--color-blue-deep);
}

.journey-step-icon svg {
	width: 32px;
	height: 32px;
}

.journey-step-icon img {
	width: 80px;
    height: 80px;
	object-fit: contain;
}

.journey-step-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.25rem;
	color: #1F52A3;
	margin: 0;
	position: relative;
	display: inline-block;
	padding-bottom: var(--space-xs);
	line-height: 25px;
}

.journey-step-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 32px;
	height: 3px;
	background: var(--color-yellow-warm);
	border-radius: var(--radius-pill);
}

.journey-step-text {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--color-text-soft);
	max-width: 32ch;
	margin: 0 auto;
}

.journey-step-text a {
	color: var(--color-blue);
	text-decoration: underline;
	text-decoration-color: rgba(31, 82, 163, 0.4);
	transition: text-decoration-color 0.15s ease;
}

.journey-step-text a:hover,
.journey-step-text a:focus-visible {
	text-decoration-color: var(--color-blue);
}

.journey-step-text a:focus-visible {
	outline: 2px solid var(--color-blue);
	outline-offset: 2px;
}

.journey-step-text p {
	margin: 0;
}

.journey-cta-wrap {
	text-align: center;
}

.journey-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	background-color: var(--color-yellow-warm);
	color: var(--color-blue-deep);
	text-decoration: none;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.9375rem;
	padding: 0.85rem 1.75rem;
	border-radius: 8px;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.journey-cta:hover,
.journey-cta:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(20, 56, 104, 0.18);
}

.journey-cta:focus-visible {
	outline: 2px solid var(--color-blue-deep);
	outline-offset: 3px;
}

.journey-cta svg {
	width: 16px;
	height: 16px;
}

/* ===================================================================
   RESPONSIVE — Certification Journey
   =================================================================== */

@media (max-width: 768px) {
	.journey-steps {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

	.journey-steps::before {
		display: none; /* the connecting line only makes sense in a horizontal 3-column layout */
	}

	/* Stacked layout: the vertical column divider becomes a horizontal
	   one between steps instead. */
	.journey-step-card {
		padding: 8px 0 var(--space-md);
	}

	.journey-step:not(:last-child) .journey-step-card {
		border-right: none;
		border-bottom: 1px solid var(--color-border);
	}

	.journey-step-text {
		max-width: 44ch;
	}

	.journey-title {
		font-size: 1.5rem;
	}

	.journey-intro,
	.journey-outro {
		text-align: justify;
		padding-left: 10px;
		padding-right: 10px;
	}


	.journey-steps-panel {
		padding-left: 10px;
		padding-right: 10px;
	}
}

.journey-intro {
	max-width: 1200px;
	margin: 0 auto var(--space-sm) auto;
	margin-bottom: 50px;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--color-text-soft);
	text-align: center;
}

.journey-intro p,
.journey-outro p {
	margin: 0 0 var(--space-sm) 0;
}

.journey-intro p:last-child,
.journey-outro p:last-child {
	margin-bottom: 0;
}

/* Optional text between the steps panel and the CTA button. */
.journey-outro {
	max-width: 1200px;
	margin: 0 auto var(--space-md) auto;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--color-text-soft);
	text-align: center;
}

.journey-intro a,
.journey-outro a {
	color: var(--color-blue);
	text-decoration: underline;
	text-decoration-color: rgba(31, 82, 163, 0.4);
	transition: text-decoration-color 0.15s ease;
}

.journey-intro a:hover,
.journey-intro a:focus-visible,
.journey-outro a:hover,
.journey-outro a:focus-visible {
	text-decoration-color: var(--color-blue);
}

.journey-intro a:focus-visible,
.journey-outro a:focus-visible {
	outline: 2px solid var(--color-blue);
	outline-offset: 2px;
}


/* ===================================================================
   RESOURCE HUB — Section 11
   =================================================================== */

.resource-hub-section {
	background-color: #d1f5ff57;
	padding: var(--space-md) 0 var(--space-md);
}

.resource-hub-header {
	text-align: center;
	max-width: 640px;
	margin: 0 auto var(--space-lg);
	margin-bottom: var(--space-sm);
}

.resource-hub-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 2rem;
	color: var(--color-blue-heading);
	margin: 0 0 var(--space-xs) 0;
}

.resource-hub-subtitle {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-text-soft);
	margin: 0;
}

.resource-hub-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
}

.resource-item {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: #FFFFFF;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.resource-item:hover,
.resource-item:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(20, 56, 104, 0.1);
}

.resource-item-image {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--color-bg);
}

.resource-item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.resource-item-image.has-fallback {
	background: linear-gradient(140deg, var(--color-blue) 0%, var(--color-blue-deep) 100%);
}

.resource-item-content {
	flex: 1;
	display: flex;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-md) var(--space-md);
	padding-right: var(--space-sm);
}

.resource-item-body {
	flex: 1;
	min-width: 0;
}

.resource-item-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.3;
	color: var(--color-blue);
	margin: 0 0 0.4rem 0;
}

.resource-item-text {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--color-text-soft);
	margin: 0;
}

.resource-item-arrow {
	align-self: flex-end;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1.5px solid var(--color-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-blue-deep);
	background-color: #FFFFFF;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.resource-item-arrow svg {
	width: 14px;
	height: 14px;
}

.resource-item:hover .resource-item-arrow,
.resource-item:focus-visible .resource-item-arrow {
	background-color: var(--color-blue);
	border-color: var(--color-blue);
	color: #FFFFFF;
}

/* --- Global CTA --- */

.resource-hub-global-cta-wrap {
	text-align: center;
}

.resource-hub-global-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	background-color: var(--color-blue-bright-cta-action);
	color: #FFFFFF;
	text-decoration: none;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.9375rem;
	padding: 0.85rem 1.75rem;
	border-radius: 10px;
	border: none;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.resource-hub-global-cta svg {
	width: 16px;
	height: 16px;
}

.resource-hub-global-cta:hover,
.resource-hub-global-cta:focus-visible {
	background-color: var(--color-blue-dark-cta-action);
	box-shadow: 0 4px 10px rgba(3, 136, 235, 0.35);
	color: #FFFFFF;
	transform: translateY(-1px);
}

.resource-hub-global-cta:focus-visible {
	outline: 2px solid var(--color-blue-deep);
	outline-offset: 3px;
}

/* ===================================================================
   RELATED SITES — Section 11b
   =================================================================== */

.related-sites-section {
	/* Hidden on request (2026-08) — keep markup/CSS in place, not deleted,
	   in case the section needs to come back later. Remove this line to
	   re-enable it. */
	display: none;
	background-color: #d1f5ff57;
	padding: var(--space-md) 0 var(--space-xl);
}

.related-sites-header {
	text-align: center;
	max-width: 640px;
	margin: 0 auto var(--space-sm);
}

.related-sites-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 2rem;
	color: var(--color-blue-heading);
	margin: 0 0 var(--space-xs) 0;
}

.related-sites-subtitle {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-text-soft);
	margin: 0;
}

.related-sites-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-lg);
}

.related-site-card {
	display: flex;
	flex-direction: column;
	background-color: #FFFFFF;
	border: 1px solid var(--color-border);
	border-radius: 20px;
	overflow: hidden;
}

.related-site-image {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--color-bg);
}

.related-site-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.related-site-image.has-fallback {
	background: linear-gradient(140deg, var(--color-blue) 0%, var(--color-blue-deep) 100%);
}

.related-site-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
    padding: var(--space-sm);
    padding-left: 22px;
    padding-right: 20px;
}

.related-site-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--color-blue);
	margin: 0 0 0.4rem 0;
}

.related-site-text {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--color-text-soft);
    margin: 0 0 var(--space-sm) 0;
    flex: 1;
}

.related-site-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	width: fit-content;
	background-color: #FFFFFF;
	color: #0388EB;
	text-decoration: none;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.97rem;
	line-height: 1.2;
	padding: 0.7rem 1.5rem;
	border: 2px solid #0388EB;
	border-radius: var(--radius-pill);
	box-sizing: border-box;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.related-site-cta svg {
	width: 14px;
	height: 14px;
}

.related-site-cta:hover,
.related-site-cta:focus-visible {
	background-color: #0388EB;
	color: #FFFFFF;
	transform: translateY(-1px);
}

.related-site-cta:focus-visible {
	outline: 2px solid var(--color-blue-deep);
	outline-offset: 3px;
}

/* ===================================================================
   RESPONSIVE — Resource Hub / Related Sites
   =================================================================== */

@media (max-width: 1024px) {
	.resource-hub-grid,
	.related-sites-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.resource-hub-section {
		padding-top: var(--space-lg); /* var(--space-xl) → var(--space-lg), 6rem → 4rem */
	}

	.related-sites-section {
		padding-bottom: var(--space-lg);
	}
}

@media (max-width: 768px) {
	.resource-hub-grid,
	.related-sites-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {

	.resource-hub-section {
		padding-top: var(--space-md); /* var(--space-xl) → var(--space-lg), 6rem → 4rem */
	}

	.related-sites-section {
		padding-bottom: var(--space-md);
	}

	.resource-hub-inner,
	.related-sites-inner {
		padding: 0 var(--space-md);
	}

	.resource-hub-header,
	.related-sites-header {
		text-align: left;
		margin-left: 0;
		margin-right: 0;
	}
}

/* ===================================================================
   HERO — VARIANT B (Bitrix #2066 — compact, left-aligned, closer to
   the legacy site: binary-digital blue background, EP logo with
   embedded world map on the right, ~50vh desktop / ~310px mobile)
   =================================================================== */

   .hero-b-section {
	position: relative;
	width: 100%;
	/* min-height: 50vh; */
	display: flex;
	align-items: center;
	overflow: hidden;
	background-color: var(--navy-900, #071A45);
	background-image: var(--hero-b-bg-image, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding-top: var(--space-sm);
	padding-bottom: var(--space-sm);
}

.hero-b-section::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(90deg, rgba(0,0,0,.65) 0, rgba(0,0,0,.13) 100%, transparent 0);
	pointer-events: none;
}

.hero-b-inner {
	position: relative;
	z-index: 1;
	width: 100%;
}

.hero-b-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-lg);
	align-items: center;
}

.hero-b-content {
	text-align: left;
}

.hero-b-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	padding: 0.45rem 1rem;
	border-radius: var(--radius-pill);
	margin-bottom: var(--space-sm);
}

.hero-b-eyebrow-dot {
	width: 7px;
	height: 7px;
	background: var(--color-yellow-warm);
	border-radius: 50%;
	flex-shrink: 0;
}

.hero-b-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.75rem, 2.6vw, 2.5rem);
	line-height: 1.18;
	letter-spacing: -0.01em;
	margin: 0 0 var(--space-sm) 0;
}

.hero-b-title-line1,
.hero-b-title-line2 {
	display: block;
}

.hero-b-title-line1 {
	color: #FFFFFF;
}

.hero-b-title-line2 {
	color: #A9C5F5;
}

.hero-b-subtitle {
	font-size: 1.25rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.75);
	max-width: 64ch;
	margin: 0 0 var(--space-md) 0;
}

.hero-b-actions {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	flex-wrap: wrap;
	margin-bottom: var(--space-sm);
}

.hero-b-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	text-decoration: none;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1.0625rem;
	padding: 0.8rem 1.5rem;
	border-radius: var(--radius);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.hero-b-cta-primary {
	background-color: var(--color-yellow-warm);
	color: var(--color-blue-deep);
	/* box-shadow: 0 8px 22px rgba(255, 199, 44, .35); */
}

.hero-b-cta-primary:hover,
.hero-b-cta-primary:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(255, 199, 44, .35);
}

.hero-b-cta-secondary {
	background: none;
	padding: 0.8rem 0;
	color: #FFFFFF;
	font-weight: 700;
	border-bottom: 2px solid var(--color-yellow-warm);
	padding-bottom: 2px;
	border-radius: 0;
	transition: color 0.15s ease;
}

.hero-b-cta-secondary:hover,
.hero-b-cta-secondary:focus-visible {
	color: var(--color-yellow-warm);
	transform: none;
	background: none;
}

.hero-b-cta:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
}

.hero-b-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	padding: var(--space-sm) 0 0;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.65);
}

.hero-b-badge svg {
	width: 13px;
	height: 13px;
	color: var(--color-yellow-warm);
	flex-shrink: 0;
}

/* Approval mention — sits right under the H1, highlighted box.
   Supports multi-line text (ACF textarea, line breaks via nl2br). */
/*   
.hero-b-approval {
	display: inline-block;
	margin: 0 0 var(--space-sm) 0;
	padding: 0.6rem 1.25rem;
	background: rgba(255, 233, 150, 0.9);
	border-radius: 9px;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.35;
	text-align: center;
	color: var(--color-blue-deep);
} */
 .hero-b-approval {
	display: none;
 }

.hero-b-visual {
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-b-visual img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

.hero-b-logo-fallback {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.5rem;
	color: #FFFFFF;
}

/* ===================================================================
   RESPONSIVE — Hero Variant B
   =================================================================== */

@media (min-width: 901px) and (max-width: 1600px) {
	.hero-b-grid {
		grid-template-columns: 3fr 2fr;
		gap: var(--space-lg);
	}
 }


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

	.hero-b-visual {
		display: none;
	}

	.hero-b-content {
		text-align: center;
	}

	.hero-b-actions {
		justify-content: center;
	}

	.hero-b-badge {
		justify-content: center;
	}

	.hero-b-approval {
		justify-content: center;
	}
}

@media (max-width: 600px) {
	.hero-b-section {
			min-height: 310px;
			padding-top: var(--space-md);
			padding-bottom: var(--space-md);
			background-image: none;
			background-color: #1F52A3;
	}

	.hero-b-eyebrow,
	.hero-b-badge,
	.hero-b-approval {
		display: none;
	}

	.hero-b-title {
		font-size: 1.5rem;
		margin-bottom: var(--space-xs);
	}

	.hero-b-subtitle {
		font-size: 16px;
		margin-bottom: var(--space-sm);
	}

	.hero-b-cta {
		font-size: 0.875rem;
		padding: 0.7rem 1.25rem;
	}
}


/* ===================================================================
   HERO — VARIANT B LEGACY (frozen snapshot, Bitrix #2066 — pre-redesign
   version, kept only for template-homepage-variant-b.php comparison)
   =================================================================== */

   .hero-b-legacy-section {
	position: relative;
	width: 100%;
	min-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	--accent-700: #1D3095;
	--navy-900: #071A45;
	background: radial-gradient(120% 130% at 80% 0%, var(--color-blue), var(--navy-900));
	padding-top: var(--space-xl);
	padding-bottom: var(--space-xl);
}

/* --- Centered concentric arcs, behind logo/title, spanning full width --- */

.hero-b-legacy-arcs {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1px;
	height: 1px;
	pointer-events: none;
	z-index: 0;
}

.hero-b-legacy-arc {
	position: absolute;
	top: 50%;
	left: 50%;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.hero-b-legacy-arc-1 { width: 640px;  height: 640px;  border-color: rgba(255, 255, 255, 0.12); }
.hero-b-legacy-arc-2 { width: 1100px; height: 1100px; border-color: rgba(255, 255, 255, 0.10); }
.hero-b-legacy-arc-3 { width: 1600px; height: 1600px; border-color: rgba(255, 255, 255, 0.08); }
.hero-b-legacy-arc-4 { width: 2200px; height: 2200px; border-color: rgba(255, 255, 255, 0.06); }

.hero-b-legacy-inner {
	position: relative;
	z-index: 1;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.hero-b-legacy-logo-card {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, var(--color-bg) 0%, #EAF0FA 100%);
	border: 1px solid var(--color-border);
	border-radius: 6px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
	padding: var(--space-sm) var(--space-md);
	margin-bottom: var(--space-md);
}

.hero-b-legacy-logo-card img {
	height: 160px;
	width: auto;
	max-width: 100%;
}

.hero-b-legacy-logo-fallback {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.5rem;
	color: var(--color-blue);
}

.hero-b-legacy-title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2.5rem, 6vw, 5.5rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
	max-width: 100%;
	white-space: nowrap;
	margin: 0 0 var(--space-md) 0;
}

.hero-b-legacy-title-line1,
.hero-b-legacy-title-line2 {
	display: block;
}

.hero-b-legacy-title-line1 {
	color: #FFFFFF;
}

.hero-b-legacy-title-line2 {
	color: #A9C5F5; /* bleu ciel clair, comme la maquette Trajectory */
}

.hero-b-legacy-subtitle {
	font-size: 1.1875rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
	max-width: 56ch;
	margin: 0 0 var(--space-lg) 0;
}

.hero-b-legacy-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
	flex-wrap: wrap;
	margin-bottom: var(--space-md);
}

.hero-b-legacy-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	text-decoration: none;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1rem;
	padding: 0.9rem 1.75rem;
	border-radius: var(--radius);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.hero-b-legacy-cta-primary {
	background-color: var(--color-yellow-warm);
	color: var(--color-blue-deep);
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
}

.hero-b-legacy-cta-primary:hover,
.hero-b-legacy-cta-primary:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(255, 212, 0, 0.35);
}

.hero-b-legacy-cta-secondary {
	background: none;
	padding: 0.9rem 0;
	border: none;
	color: #FFFFFF;
	font-weight: 600;
	border-bottom: 2px solid var(--color-yellow-warm);
	padding-bottom: 2px;
	border-radius: 0;
	transition: color 0.15s ease;
}

.hero-b-legacy-cta-secondary:hover,
.hero-b-legacy-cta-secondary:focus-visible {
	color: var(--color-yellow-warm);
	transform: none;
	background: none;
}

.hero-b-legacy-cta:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
}

.hero-b-legacy-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	background: none;
	border: none;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	padding: var(--space-sm) 0 0;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.65);
}

.hero-b-legacy-badge svg {
	width: 13px;
	height: 13px;
	color: var(--color-yellow-warm);
	flex-shrink: 0
    
    ;
}

.hero-b-legacy-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	padding: 0.45rem 1rem;
	border-radius: var(--radius-pill);
	margin-bottom: var(--space-md);
}

.hero-b-legacy-eyebrow-dot {
	width: 7px;
	height: 7px;
	background: var(--color-yellow-warm);
	border-radius: 50%;
	flex-shrink: 0;
}

.hero-b-legacy-map-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 65%;
	z-index: 0;
	pointer-events: none;
	background-image: url('../images/europe-network-map.png');
	background-repeat: no-repeat;
	background-position: right center;
	background-size: cover;
	opacity: var(--hero-b-legacy-map-opacity, 0.4);
	-webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
	mask-image: linear-gradient(to left, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
}


/* ===================================================================
   RESPONSIVE — Hero Variant B Legacy
   =================================================================== */

@media (max-width: 900px) {
	.hero-b-legacy-section {
		min-height: 0;
		padding: var(--space-lg) var(--space-md);
	}

	.hero-b-legacy-logo img {
		height: 88px;
	}

    .hero-b-legacy-logo-card img {
        height: 120px;
    }

    .hero-b-legacy-actions {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    .hero-b-legacy-cta {
        justify-content: center;
        width: auto;
        max-width: 320px;
    }

    .hero-b-legacy-title {
        white-space: normal;
    }
}


@media (max-width: 479px) {
    .hero-b-legacy-section {
		padding-top: var(--space-md); /* 2rem au lieu de 6rem au-dessus du logo */
	}

	.hero-b-legacy-logo-card {
		margin-bottom: var(--space-sm); /* 1rem au lieu de 2rem */
	}

	.hero-b-legacy-subtitle {
		font-size: 1rem; /* 19px → 16px */
		margin-bottom: var(--space-md); /* 2rem au lieu de 4rem, avant le 1er CTA */
	}
    
	.hero-b-legacy-eyebrow-dot {
		display: none;
	}

	.hero-b-legacy-eyebrow {
		font-size: 0.6875rem;
		padding: 0.4rem 0.85rem;
	}
}


/* ===================================================================
   PARTNERS & PROVIDERS — Section 9 (WHO?)
   =================================================================== */

   .partners-section {
	background-color: var(--color-white);
	padding: var(--space-md) 0;
}

.partners-header {
	text-align: center;
	max-width: 1200px;
	margin: 0 auto var(--space-md) auto;
}

.partners-eyebrow {
	display: inline-block;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-blue);
	margin-bottom: var(--space-sm);
}

.partners-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.25;
	color: var(--color-blue-deep);
	margin: 0 0 var(--space-sm) 0;
}

.partners-description {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--color-text-soft);
	margin: 0;
}

/* --- Groups --- */

.partners-group {
	padding-top: var(--space-md);
	margin-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}

.partners-group-first {
	padding-top: 0;
	margin-top: 0;
	border-top: none;
}

.partners-group-title {
	text-align: center;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.8rem;
	color: var(--color-blue);
	margin: 0 0 var(--space-md) 0;
	position: relative;
	padding-bottom: var(--space-sm);
}

.partners-group-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 32px;
	height: 3px;
	background: var(--color-yellow-warm);
	border-radius: var(--radius-pill);
}

.partners-logos-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-lg) var(--space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.partners-logo-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 96px;
}

.partners-logo-item img {
	max-height: 120px;
	max-width: 100%;
	width: auto;
	object-fit: contain;
	transition: transform 0.2s ease;
}

.partners-logo-item a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.partners-logo-item a:hover img,
.partners-logo-item a:focus-visible img {
	transform: scale(1.06);
}

/* "Learn more →" — only present when the logo has a link (see
   template-parts/partners.php and block-partners-grid.php). Absolutely
   positioned below the logo so it overlays the row gap on hover instead
   of pushing the grid row — matches the TRUST project's partners page. */
.partners-logo-item__cta {
	position: absolute;
	top: 100%;
	left: 50%;
	margin-top: 0.4rem;
	transform: translate(-50%, -4px);
	font-size: 0.8125rem;
	font-weight: 600;
	/* color: var(--color-blue); */
	color: var(--color-blue-primary);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.partners-logo-item a:hover .partners-logo-item__cta,
.partners-logo-item a:focus-visible .partners-logo-item__cta {
	opacity: 1;
	transform: translate(-50%, 0);
}

.partners-logo-item a:focus-visible {
	outline: 2px solid var(--color-blue);
	outline-offset: 4px;
	border-radius: 4px;
}

/* --- CTA --- */

.partners-cta-wrap {
	text-align: center;
	margin-top: var(--space-md);
}

.partners-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	background: var(--color-yellow-warm);
	color: var(--color-blue-deep);
	text-decoration: none;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1rem;
	padding: 0.9rem 1.75rem;
	border-radius: var(--radius);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	box-shadow: 0 2px 0 rgba(20, 56, 104, 0.12);
}

.partners-cta:hover,
.partners-cta:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(255, 212, 0, 0.35);
}

.partners-cta:focus-visible {
	outline: 2px solid var(--color-blue);
	outline-offset: 3px;
}

/* ===================================================================
   RESPONSIVE — Partners & Providers
   =================================================================== */

@media (max-width: 900px) {
	.partners-logos-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 600px) {
	.partners-inner {
		padding: 0 var(--space-md);
	}

	.partners-logos-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-md);
	}

	.partners-group {
		padding-top: var(--space-md);
		margin-top: var(--space-md);
	}
}



/* ===================================================================
   JOIN THE ECOSYSTEM — Section 9b (Partner CTA)
   =================================================================== */

   .join-ecosystem-section {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--color-bg);
	padding-top: var(--space-md);
	padding-bottom: var(--space-md);
}

/* --- Centered concentric arcs, light variant of the Hero B motif --- */

.join-ecosystem-arcs {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1px;
	height: 1px;
	pointer-events: none;
	z-index: 0;
}

.join-ecosystem-arc {
	position: absolute;
	top: 50%;
	left: 50%;
	border: 1px solid rgba(32, 81, 164, 0.10);
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.join-ecosystem-arc-1 { width: 420px;  height: 420px;  border-color: rgba(32, 81, 164, 0.14); }
.join-ecosystem-arc-2 { width: 760px;  height: 760px;  border-color: rgba(32, 81, 164, 0.11); }
.join-ecosystem-arc-3 { width: 1120px; height: 1120px; border-color: rgba(32, 81, 164, 0.08); }
.join-ecosystem-arc-4 { width: 1520px; height: 1520px; border-color: rgba(32, 81, 164, 0.05); }

/* --- Optional decorative map overlay (toggle in ACF) --- */

.join-ecosystem-map-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 65%;
	z-index: 0;
	pointer-events: none;
	background-image: url('../images/europe-map-blue.png');
	background-repeat: no-repeat;
	background-position: right center;
	background-size: cover;
	opacity: 0.4;
	-webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
	mask-image: linear-gradient(to left, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
}

.join-ecosystem-inner {
	position: relative;
	z-index: 1;
	text-align: center;
}

.join-ecosystem-eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-blue);
	margin-bottom: var(--space-sm);
}

.join-ecosystem-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--color-blue-deep);
	margin: 0 0 var(--space-sm) 0;
}

.join-ecosystem-description {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--color-text-soft);
	margin: 0 0 var(--space-md) 0;
}

.join-ecosystem-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	background: var(--color-blue);
	color: #FFFFFF;
	text-decoration: none;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1rem;
	padding: 0.9rem 2rem;
	border-radius: var(--radius-pill);
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.join-ecosystem-cta:hover,
.join-ecosystem-cta:focus-visible {
	background: var(--color-blue-deep);
	transform: translateY(-1px);
}

.join-ecosystem-cta:focus-visible {
	outline: 2px solid var(--color-blue-deep);
	outline-offset: 3px;
}

/* ===================================================================
   RESPONSIVE — Join the Ecosystem
   =================================================================== */

@media (max-width: 600px) {
	.join-ecosystem-section {
		padding: var(--space-lg) var(--space-md);
	}
}



/* ===================================================================
   TAKE ACTION NOW — Section 10
   =================================================================== */

   .take-action-section {
	display: grid;
	grid-template-columns: 1.7fr 1fr;
	/* min-height: 100vh; */
	background: #D1F5FF;
}

/* --- Left column --- */

.take-action-left {
	padding: var(--space-lg) var(--space-lg);
	padding-top: var(--space-md);
	padding-bottom: 0;
	width: 100%;
}

.take-action-header {
	text-align: center;
	margin-bottom: var(--space-sm);
}

.take-action-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 2rem;
	line-height: 1.3;
	color: var(--color-blue-heading);
	margin: 0 0 var(--space-sm) 0;
}

.take-action-subtitle {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-text-soft);
	margin: 0;
}

/* --- Secondary cards grid --- */

.take-action-cards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-sm);
	margin-bottom: var(--space-sm);
}

.take-action-card {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-sm);
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.take-action-card:hover,
.take-action-card:focus-visible {
	border-color: var(--color-blue);
	transform: translateY(-1px);
}

.take-action-card:focus-visible {
	outline: 2px solid var(--color-blue-deep);
	outline-offset: 3px;
}

.take-action-card-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	/* border-radius: 50%; */
}

.take-action-card-icon img {
	width: 50px; /* 40px */
	height: 50px; /* 40px */
	object-fit: contain;
}

/*
.take-action-card-icon-blue   { background: rgba(32, 81, 164, 0.10); color: var(--color-blue); }
.take-action-card-icon-green  { background: rgba(46, 158, 91, 0.12); color: #2E9E5B; }
.take-action-card-icon-purple { background: rgba(124, 58, 237, 0.10); color: #7C3AED; }
.take-action-card-icon-yellow { background: rgba(255, 212, 0, 0.18); color: #8A6D00; }
.take-action-card-icon-orange { background: rgba(237, 124, 58, 0.12); color: #D9651E; } */

.take-action-card-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
	color: var(--color-blue-deep);
	margin: 0;
}

/* --- Stay connected bar --- */

.take-action-social-bar {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	background: white;
	border-radius: var(--radius);
	padding: var(--space-md);
	padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
	flex-wrap: wrap;
	/* Now a grid item inside .take-action-cards-grid (3 columns): with 7
	   secondary cards, this bar sits on row 3 next to the 7th card and
	   takes up the width of 2 cards instead of the full row. */
	grid-column: span 2;
}

.take-action-social-icon-wrap {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-blue);
}

.take-action-social-icon-wrap img {
	width: 50px;
	height: 50px;
	object-fit: contain;
}

.take-action-social-icon-wrap svg {
	width: 22px;
	height: 22px;
}

.take-action-social-content {
	flex: 1;
	min-width: 160px;
}

.take-action-social-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--color-blue-deep);
	margin: 0 0 0.2rem 0;
}

.take-action-social-text {
	font-size: 0.8125rem;
	color: var(--color-text-soft);
	margin: 0;
}

.take-action-social-links {
	display: flex;
	gap: var(--space-md);
	list-style: none;
	margin: 0;
	padding: 0;
	flex-shrink: 0;
}

.take-action-social-link a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	text-decoration: none;
	color: var(--color-text-soft);
}

.take-action-social-link-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: var(--color-white);
	color: var(--color-blue);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.take-action-social-link-icon svg {
	width: 18px;
	height: 18px;
}

.take-action-social-link a:hover .take-action-social-link-icon,
.take-action-social-link a:focus-visible .take-action-social-link-icon {
	background: var(--color-blue);
	color: #FFFFFF;
}

.take-action-social-link-label {
	font-size: 0.75rem;
	font-weight: 600;
}

/* --- Right column: photo --- */

.take-action-right {
	position: relative;
	min-height: 480px;
	background-size: cover;
	background-position: center;
}

.take-action-right-img-a11y {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* ===================================================================
   RESPONSIVE — Take Action Now
   =================================================================== */

   @media (max-width: 1000px) {
	.take-action-section {
		grid-template-columns: 1fr;
	}

	.take-action-right {
		order: -1;
		min-height: 700px;
	}
}

@media (max-width: 900px) {
	.take-action-cards-grid {
		grid-template-columns: repeat(2, 1fr); /* 3 → 2 colonnes dès 900px, pas seulement 700px */
	}

	.take-action-card {
		min-width: 0; /* neutralise le piège min-width:auto qui causait le débordement */
	}
}

@media (max-width: 700px) {
	.take-action-cards-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.take-action-left {
		padding: var(--space-lg) var(--space-md);
	}

	.take-action-social-icon-wrap {
		display: none;
	}

	.take-action-social-bar {
		gap: var(--space-xs);
	}
}

@media (max-width: 600px) {
	.take-action-right {
		height: 400px;
    	min-height: 300px;
	}

	.take-action-left {
		padding: var(--space-sm) var(--space-sm);
	}
}

@media (max-width: 480px) {
	.take-action-cards-grid {
		grid-template-columns: 1fr;
	}

	.take-action-social-bar {
		grid-column: 1 / -1;
		flex-direction: column;
		align-items: flex-start;
	}

	.take-action-social-links {
		width: 100%;
		justify-content: center;
	}
}



/* ===================================================================
   VERIFY AUTHENTICITY — Section 11
   =================================================================== */

   .verify-section {
	background: var(--color-bg);
}

.verify-inner {
	padding-top: var(--space-md);
	padding-bottom: var(--space-xs);
}

/* --- Eyebrow row --- */

.verify-eyebrow-row {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	margin-bottom: var(--space-md);
}

.verify-eyebrow-line {
	flex: 1;
	height: 1px;
	background: var(--color-border);
}

.verify-eyebrow {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-blue);
}

.verify-eyebrow svg {
	width: 20px;
	height: 20px;
}

/* --- Grid --- */

.verify-grid {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: var(--space-xl);
	align-items: start;
}

/* --- Left column --- */

.verify-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2rem, 3.5vw, 2.75rem);
	line-height: 1.15;
	color: var(--color-blue-deep);
	text-align: center;
	margin: 0 0 var(--space-md) 0;
}

.verify-intro {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--color-text-soft);
	margin-bottom: var(--space-md);
}

.verify-intro p {
	margin: 0 0 var(--space-sm) 0;
}

.verify-intro p:last-child {
	margin-bottom: 0;
}

.verify-intro a {
	color: var(--color-blue);
	font-weight: 600;
}

.verify-items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.verify-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
}

.verify-item-icon {
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 1.5px solid rgba(32, 81, 164, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
}

.verify-item-icon img {
	width: 30px;
	height: 30px;
	object-fit: contain;
}

.verify-item-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--color-blue-deep);
	margin: 0 0 0.2rem 0;
}

.verify-item-text {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--color-text-soft);
	margin: 0;
}

/* --- Right column --- */

.verify-right {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.verify-mockup {
	width: 100%;
	margin-bottom: 0;
}

.verify-mockup img {
	width: 100%;
	height: auto;
	display: block;
}

.verify-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	background: var(--color-white);
	border: 1.5px solid var(--color-blue);
	color: var(--color-blue);
	text-decoration: none;
	padding: var(--space-sm) var(--space-lg);
	border-radius: var(--radius);
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.verify-cta:hover,
.verify-cta:focus-visible {
	background: rgba(32, 81, 164, 0.06);
	transform: translateY(-1px);
}

.verify-cta:focus-visible {
	outline: 2px solid var(--color-blue);
	outline-offset: 3px;
}

.verify-cta svg {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

.verify-cta span {
	display: flex;
	flex-direction: column;
}

.verify-cta strong {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
}

.verify-cta em {
	font-style: normal;
	font-size: 0.875rem;
	color: var(--color-text-soft);
}

/* --- Trust strip (bottom, fixed 3 columns) --- */

.verify-trust-strip {
	background: var(--color-white);
	border-top: 1px solid var(--color-border);
}

.verify-trust-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: var(--space-md) var(--space-lg);
	padding-top: var(--space-sm);
	padding-bottom: var(--space-sm);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
}

.verify-trust-col {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	padding-left: var(--space-lg);
	border-left: 1px solid var(--color-border);
}

.verify-trust-col:first-child {
	padding-left: 0;
	border-left: none;
}

.verify-trust-icon {
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 1.5px solid rgba(32, 81, 164, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
}

.verify-trust-icon img {
	width: 30px;
	height: 30px;
	object-fit: contain;
}

.verify-trust-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
	color: var(--color-blue-deep);
	margin: 0 0 0.2rem 0;
}

.verify-trust-text {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--color-text-soft);
	margin: 0;
}

/* ===================================================================
   RESPONSIVE — Verify Authenticity
   =================================================================== */

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

	.verify-inner {
		padding-top: var(--space-md); /* 6rem → 4rem au-dessus de l'eyebrow */
	}

	.verify-eyebrow-row {
		margin-bottom: var(--space-md); /* 6rem → 4rem en dessous */
	}

	.verify-trust-inner {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

	.verify-trust-col {
		padding-left: 0;
		border-left: none;
		padding-top: var(--space-md);
		border-top: 1px solid var(--color-border);
	}

	.verify-trust-col:first-child {
		padding-top: 0;
		border-top: none;
	}
}

@media (max-width: 600px) {
	.verify-grid {
		gap: var(--space-sm);
	}
	.verify-inner {
		padding: var(--space-md) var(--space-md);
	}

	.verify-eyebrow-row {
		flex-wrap: wrap;
		justify-content: center;
		margin-bottom: var(--space-md); /* encore réduit par rapport au 900px */
	}

	.verify-trust-inner {
		padding-left: var(--space-sm);
		padding-right: var(--space-sm);
		gap: var(--space-sm);
	}

	.verify-eyebrow-line {
		display: none;
	}

	.verify-title {
		font-size: 1.625rem; /* clamp(2rem, 3.5vw, 2.75rem) → 26px fixe */
		margin-bottom: var(--space-xs); /* espace avant le 1er paragraphe */
	}

	.verify-intro {
		margin-bottom: var(--space-sm); /* var(--space-lg) → var(--space-sm), avant "Prevent fraud" */
	}

	.verify-intro p {
		margin-bottom: var(--space-xs); /* entre les deux paragraphes */
	}
}


/* ==========================================================================
   SITE FOOTER
   ========================================================================== */

   .site-footer {
    position: relative;
    background: var(--color-blue);
    color: #ffffff;
    overflow: hidden;
    padding: 3rem 0 0;
}

.site-footer__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
}

/* ---------- Newsletter bar ---------- */

.footer-newsletter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    padding: 1.75rem 2rem;
    margin-bottom: 3.5rem;
}

.footer-newsletter__text {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1 1 320px;
}

.footer-newsletter__icon {
    flex-shrink: 0;
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-newsletter__icon-star {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-yellow-warm, #FFD400);
}

.footer-newsletter__icon-star svg {
    width: 100%;
    height: 100%;
}

.footer-newsletter__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.35;
    margin: 0 0 0.35rem;
}

.footer-newsletter__subtitle {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}


.footer-newsletter__input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 0 0.9rem;
}

.footer-newsletter__input-icon {
    opacity: 0.7;
    font-size: 0.9rem;
}

.footer-newsletter__input {
    background: transparent;
    border: none;
    color: #ffffff;
    padding: 0.75rem 0;
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.9rem;
}

.footer-newsletter__input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.footer-newsletter__input:disabled {
    cursor: not-allowed;
}

.footer-newsletter__button {
    background: var(--color-yellow-warm, #FFD400);
    color: var(--color-blue-deep, #143868);
    border: none;
    border-radius: 10px;
    padding: 0.85rem 1.4rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    cursor: not-allowed; /* UI statique pour cette itération */
    display: flex;
    align-items: center;
    gap: 0.4rem;
    opacity: 0.92;
}

.footer-newsletter__form-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
    flex: 0 1 460px;
    width: 100%;
    max-width: 460px;
}

.footer-newsletter__form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.footer-newsletter__note {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* ---------- Columns grid ---------- */

.footer-columns {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: 2rem;
    padding-bottom: 3rem;
}

.footer-columns__recognitions {
    position: relative;
}

.footer-columns__recognitions::before {
    content: "";
    position: absolute;
    left: -1rem;
    top: 0.2rem;
    bottom: 0.2rem;
    width: 1px;
    background: rgba(255, 255, 255, 0.15);
}

/* Vertical divider on the brand column's own right edge — it now spans
   both grid rows (grid-row: span 2 below), so the divider must live on
   the brand box itself rather than "whatever comes right after it" in
   the DOM, which used to be reliably a .footer-columns__col but is now
   the first CTA button. */
.footer-columns__brand {
    position: relative;
    grid-row: 1 / span 2;
}

.footer-columns__brand::after {
    content: "";
    position: absolute;
    right: -1rem;
    top: 0.2rem;
    bottom: 0.2rem;
    width: 1px;
    background: rgba(255, 255, 255, 0.15);
}

.footer-columns__logo {
    height: 80px;
    width: auto;
    margin-bottom: 1.25rem;
}

.footer-columns__desc {
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 1.25rem;
}

.footer-columns__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    padding: 0.55rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    margin-bottom: 1.5rem;
    transition: background 0.2s ease;
}

.footer-columns__cta:hover {
    background: rgba(255, 255, 255, 0.08);
}

.footer-columns__socials-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 0.6rem;
}

.footer-columns__socials {
    display: flex;
    gap: 0.6rem;
}

.footer-social-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: background 0.2s ease;
}

.footer-social-icon:hover {
    background: rgba(255, 255, 255, 0.18);
}

.footer-columns__col-title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-yellow-warm, #FFD400);
    margin: 0 0 1.1rem;
}

.footer-columns__col-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.footer-columns__col-list a {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: 0.88rem;
    transition: color 0.2s ease;
}

.footer-columns__col-list a:hover,
.footer-columns__col-list a:focus-visible {
    color: #FFD400;
}

.footer-recognitions__logos {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
}

.footer-recognition-logo img {
    max-height: 80px;
    height: 80px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

/* ---------- Bottom bar ---------- */

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding: 1.5rem 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.65);
}

.footer-bottom__lang {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.footer-bottom__lang svg {
    flex-shrink: 0;
}

.footer-bottom__badge-icon {
    width: 18px;
    height: 18px;
    display: block;
}

.footer-bottom__copyright {
    margin: 0;
}

.footer-bottom__badges {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.footer-bottom__badge {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.footer-bottom__sep {
    opacity: 0.4;
}


/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
    .footer-columns {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .footer-columns__brand {
        grid-column: 1 / -1;
        grid-row: auto;
        margin-bottom: 1rem;
    }

    .footer-columns__brand::after,
    .footer-columns__recognitions::before {
        display: none;
    }
}

@media (max-width: 640px) {
	.footer-newsletter {
		flex-direction: column;
		align-items: stretch;
		flex-wrap: nowrap; /* neutralise le wrap hérité du desktop qui causait les hauteurs 320px/460px erratiques */
		padding: 1.5rem;
	}

	.footer-newsletter__text,
	.footer-newsletter__form-wrap {
		flex: none; /* neutralise le flex-grow:1 hérité, qui n'a plus de sens en colonne sans hauteur de conteneur définie */
		width: 100%;
		height: auto;
		max-width: none;
	}

	.footer-newsletter__form-wrap {
		align-items: stretch; /* le formulaire (input+bouton) s'étire sur toute la largeur au lieu de rester coincé à droite (flex-end hérité) */
	}
    .footer-newsletter__form {
        flex-direction: column;
        max-width: none;
    }
    .footer-columns {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    /* Without this, each grid item's default min-width:auto resolves to its
       min-content (longest unbreakable word/icon/button), which can exceed
       the 1fr track width and blow the whole footer past the viewport edge
       on narrow phones (e.g. iPhone SE, 375px). */
    .footer-columns > * {
        min-width: 0;
    }

    .footer-cta-btn span,
    .footer-columns__col-list a {
        overflow-wrap: anywhere;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ===================================================================
   SECTION NAVIGATION BAR — WHAT / WHY / WHO / HOW anchor menu
   =================================================================== */

   .section-nav-bar {
	background: var(--color-white);
	padding: var(--space-sm) 0;
}

.section-nav-inner {
	display: flex;
	justify-content: center;
}

.section-nav-list {
	display: flex;
	align-items: stretch;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	background: linear-gradient(180deg, #FFFFFF 0%, #D9EBFE 100%);
	border-radius: 14px;
	border: 1px solid var(--color-border);
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(20, 56, 104, 0.1);
}

.section-nav-item {
	flex: 1;
}

.section-nav-item {
	border-right: 1px solid var(--color-border);
}
.section-nav-item:last-child {
	border-right: none;
}

.section-nav-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	height: 100%;
	padding: 0.9rem 1.5rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-blue);
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease;
}
.section-nav-link:hover,
.section-nav-link:focus-visible {
	background: #F2F7FE;
}

.section-nav-chevron {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* ===================================================================
   RESPONSIVE — Section Navigation Bar
   =================================================================== */

@media (max-width: 900px) {
	.section-nav-list {
		flex-wrap: wrap;
		border-radius: 14px;
		width: 100%;
	}
	.section-nav-item {
		flex: 1 1 50%;
		border-right: none;
		border-bottom: 1px solid var(--color-border);
	}
	.section-nav-item:nth-child(2n) {
		border-left: 1px solid var(--color-border);
	}
	.section-nav-link {
		justify-content: center;
		padding: 0.75rem 1rem;
		font-size: 0.8125rem;
	}
}

/* --- "Back to nav" floating button --- */

.back-to-nav-btn {
	position: fixed;
	bottom: 28px;
	right: 28px;
	z-index: 150;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--color-blue);
	color: var(--color-white);
	box-shadow: 0 6px 18px rgba(20, 56, 104, 0.25);
	cursor: pointer;
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s ease;
}

.back-to-nav-btn.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.back-to-nav-btn:hover,
.back-to-nav-btn:focus-visible {
	background: var(--color-blue-deep);
}

.back-to-nav-btn svg {
	width: 22px;
	height: 22px;
}

@media (max-width: 600px) {
	.back-to-nav-btn {
		bottom: 18px;
		right: 18px;
		width: 44px;
		height: 44px;
	}
	.back-to-nav-btn svg {
		width: 20px;
		height: 20px;
	}
}


/* ===================================================================
   PRIVACY ELITE — Section 6b (replaces Video Testimonials)
   =================================================================== */

   .privacy-elite-section {
	background: var(--color-white);
	padding-top: var(--space-md);
	padding-bottom: var(--space-md);
}

.privacy-elite-inner {
	text-align: center;
}

.privacy-elite-card {
	background: var(--color-white);
	border-radius: 20px;
	box-shadow: 0 12px 40px rgba(20, 56, 104, 0.18);
	padding: var(--space-md);
}

.privacy-elite-eyebrow-row {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	margin-bottom: var(--space-xs);
}

.privacy-elite-eyebrow-line {
	flex: 1;
	height: 1px;
	background: var(--color-border);
}

.privacy-elite-eyebrow {
	flex-shrink: 1;
	min-width: 0;
	word-break: break-word;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-blue);
}

.privacy-elite-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 2rem;
    color: var(--color-blue);
	line-height: 1.2;
	margin: 0 0 var(--space-md);
}

.privacy-elite-banner {
	display: block;
	margin: 0 auto var(--space-md);
	max-width: 90%;
}

.privacy-elite-banner img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 20px;
}

.privacy-elite-description {
	max-width: 720px;
	margin: 0 auto var(--space-md);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--color-text-soft);
}

.privacy-elite-cta-wrap {
	text-align: center;
}

.privacy-elite-cta {
	display: inline-flex;
	align-items: center;
	background-color: var(--color-yellow-warm);
	color: var(--color-blue-deep);
	text-decoration: none;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.9375rem;
	padding: 0.75rem 1.5rem;
	border-radius: var(--radius);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.privacy-elite-cta:hover,
.privacy-elite-cta:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(255, 212, 0, 0.35);
}

.privacy-elite-cta:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
}



/* ===================================================================
   RESPONSIVE — Section Privacy Elite
   =================================================================== */

   

@media (max-width: 600px) {
	.privacy-elite-section {
		padding-top: var(--space-sm);
		padding-bottom: var(--space-sm);
	}
	.privacy-elite-title {	
		font-size: 1.5rem;
		margin-bottom: var(--space-sm);
	}

	.privacy-elite-card {
		padding: var(--space-sm) var(--space-sm);
		padding-top: var(--space-md);
		padding-bottom: var(--space-md);
	}

	.privacy-elite-banner {
		margin-bottom: var(--space-sm);
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}

	.privacy-elite-description {
		text-align: justify;
		margin-bottom: var(--space-sm);
	}
}
/* ===================================================================
   PAGE GÉNÉRIQUE — Layout deux colonnes (page-generic.php)
   Bitrix #2045 — New EP Website 2026
   =================================================================== */

.page-wrap {
	/* La largeur et le padding horizontal viennent de la classe .ep-container
	   (déjà présente sur le div, cf. page-generic.php) — ne pas redéfinir
	   max-width/margin/padding-left/right ici, sous peine de dupliquer un
	   système de contraintes parallèle à celui déjà établi sur le site. */
	padding-top: var(--space-sm);
	padding-bottom: var(--space-xl);
	display: grid;
	grid-template-columns: 1fr 260px;
	gap: var(--space-md);
	align-items: start;
}

/* .ep-container descend par paliers façon Bootstrap (1140px entre 1200 et
   1400px de viewport, 960px entre 992 et 1200px, etc.) — pensé pour des
   sections marketing centrées avec beaucoup de blanc autour. Un layout
   contenu+sidebar a besoin de toute la largeur disponible : cette règle
   (spécificité .page-wrap.ep-container > .ep-container seul) neutralise
   les paliers intermédiaires et n'applique qu'un seul plafond à 1600px,
   quelle que soit la largeur d'écran en dessous — corrige le grand vide
   observé sur écran laptop (~1280-1366px logiques, ex. Dell 1920px
   physiques @150%). */
.page-wrap.ep-container {
	max-width: 1600px;
	padding-left: var(--space-md);
	padding-right: var(--space-sm);
}

.main-col {
	min-width: 0; /* empêche le contenu (images, tableaux) de forcer la colonne à s'élargir */
}

.breadcrumb {
	font-size: 0.8125rem;
	color: var(--color-text-soft);
	margin-bottom: var(--space-sm);
}

.breadcrumb a {
	color: var(--color-text-soft);
	text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
	color: var(--color-blue);
}

.breadcrumb .sep {
	margin: 0 0.4rem;
}

/* Old style h1 
.page-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.75rem, 3vw, 2.375rem);
	line-height: 1.2;
	color: #244697;
	margin: 0 0 var(--space-sm) 0;
} */

/* New style h1 */
.page-title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.75rem, 3vw, 2.375rem);
	line-height: 1.2;
	background: #2051A4;
    color: white;
    padding-bottom: 6px;
    padding-top: 4px;
	padding-left: 6px;
	margin: 0 0 var(--space-sm) 0;
}

.hero-photo {
	width: 100%;
	aspect-ratio: 3.41 / 1;
	border-radius: var(--radius);
	overflow: hidden;
	margin-bottom: var(--space-md);
	background: var(--color-bg);
}

.hero-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.page-blocks {
	display: flex;
	flex-direction: column;
	/*gap: var(--space-md);*/
	gap: var(--space-sm); /* Espacement vertical entre deux blocs */
}

.page-generic__fallback {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--color-text);
}

/* ===================================================================
   SIDEBAR CONTEXTUELLE — Main sections + Section pages
   =================================================================== */
.side-block-icon {
	width: 25px;
	height: 25px;
	flex-shrink: 0;
	color: #fff;
}

.sidebar-col {
	/* la grille .page-wrap est en align-items: start, donc cette cellule ne
	   s'étire pas par défaut sur la hauteur de la ligne — on force le
	   stretch pour que .sidebar-col__sticky ait toute la hauteur de la
	   colonne principale dans laquelle se déplacer en restant collée. */
	align-self: stretch;
}

.sidebar-col__sticky {
	position: sticky;
	top: calc(var(--space-md) + 64px); /* dégage la hauteur du header sticky */
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.side-block {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-xs);
	box-shadow: 0 2px 4px rgba(20, 56, 104, 0.06), 0 8px 20px rgba(20, 56, 104, 0.08);
}

.side-block h4 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: white;
	background: var(--color-blue);
	margin: calc(var(--space-xs) * -1) calc(var(--space-xs) * -1) var(--space-xs) calc(var(--space-xs) * -1);
	padding: var(--space-sm);
	border-radius: var(--radius) var(--radius) 0 0;
}

.side-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.side-list li {
	position: relative;
}

.side-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	border-radius: 0;
	background: transparent;
}

.side-list li:has(a.current)::before {
	background: var(--color-blue);
}

.side-list li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.55rem 0.6rem;
	border-radius: var(--radius);
	font-size: 0.875rem;
	color: var(--color-text);
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.side-list li a:hover,
.side-list li a:focus-visible {
	background: var(--color-bg);
}

.side-list li a.current {
	background: rgba(31, 82, 163, 0.08);
	color: var(--color-blue);
	font-weight: 600;
}

.side-list li a .chevron {
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
}

/* ===================================================================
   RESPONSIVE — Page générique + sidebar
   =================================================================== */

@media (max-width: 900px) {
	.page-wrap {
		grid-template-columns: 1fr;
		padding-top: var(--space-md);
		padding-bottom: var(--space-lg);
	}

	.sidebar-col {
		align-self: auto;
		order: 2;
	}

	.sidebar-col__sticky {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.side-block {
		flex: 1 1 260px;
	}
}

@media (max-width: 600px) {
	.page-wrap {
		padding-top: var(--space-sm);
		padding-bottom: var(--space-md);
	}

	.sidebar-col__sticky {
		flex-direction: column;
	}

	/* .side-block's `flex: 1 1 260px` (set for the row/wrap layout at
	   ≤900px) is read as a HEIGHT once the sidebar stacks in a column
	   here, forcing every block — "Important" included — to stretch to
	   a tall, mostly empty box. Reset it back to content-based height. */
	.side-block {
		flex: 0 0 auto;
	}

	/* Page ROI Calculator : une fois la sidebar empilée en une seule
	   colonne, "Calculation Summary" et "Important" (spécifiques à
	   cette page, injectées via le hook europrivacy_sidebar_extra_blocks)
	   doivent apparaître avant la navigation générique "Main sections" /
	   "Section pages", qui elle reste identique sur toutes les pages. */
	.pg-roi-calculator__summary-block,
	.pg-roi-calculator__important-block {
		order: -1;
	}

	.hero-photo {
		aspect-ratio: 16 / 9; /* le ratio 3.41:1 devient trop bas en colonne étroite */
	}
}


/* ===================================================================
   BLOC — HERO (pages Hub uniquement)
   =================================================================== */

.block-hero {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	background: linear-gradient(140deg, var(--color-blue) 0%, var(--color-blue-deep) 100%);
	background-size: cover;
	background-position: center;
	margin-bottom: var(--space-md);
}

.block-hero__inner {
	position: relative;
	z-index: 1;
	padding: var(--space-lg) var(--space-md);
	text-align: center;
}

.block-hero__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	line-height: 1.2;
	color: #FFFFFF;
	margin: 0 0 var(--space-sm) 0;
}

.block-hero__subtitle {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
	max-width: 56ch;
	margin: 0 auto var(--space-md) auto;
}

.block-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	background: var(--color-yellow-warm);
	color: var(--color-blue-deep);
	text-decoration: none;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1rem;
	padding: 0.85rem 1.75rem;
	border-radius: var(--radius);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.block-hero__cta:hover,
.block-hero__cta:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(255, 212, 0, 0.35);
}

.block-hero__cta:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
}

/* ===================================================================
   BLOC — TEXTE RICHE
   =================================================================== */

.block-rich-text__heading {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.375rem;
	color: var(--color-blue-primary);
	margin: 0 0 var(--space-xs) 0;
}

.block-rich-text__content {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--color-text);
}

.block-rich-text__content p {
	margin: 0 0 var(--space-sm) 0;
}

.block-rich-text__content p:last-child {
	margin-bottom: 0;
}
/*
.block-rich-text__content a {
	color: var(--color-blue);
	text-decoration: underline;
	text-decoration-color: rgba(31, 82, 163, 0.35);
}*/
.page-blocks a {
	color: var(--color-blue);
	text-decoration: none;
	border-bottom: 1px solid #85B7EB;
}
.page-blocks a:hover,
.page-blocks a:focus-visible {
	border-bottom-color: var(--color-blue);
}

/* .btn links (Button block, CTA banner...) keep their own colors, not the
   generic ".page-blocks a" link styling above (higher specificity would
   otherwise force the blue underlined link color onto button text). */
.page-blocks a.btn,
.page-blocks a.btn:hover,
.page-blocks a.btn:focus-visible {
	border-bottom: none;
}

.page-blocks a.btn--blue,
.page-blocks a.btn--blue-deep-dark,
.page-blocks a.btn--blue-medium,
.page-blocks a.btn--blue-vivid {
	color: #FFFFFF;
}

.page-blocks a.btn--primary {
	color: var(--color-blue-deep);
}

.page-blocks a.btn--secondary {
	color: var(--color-blue);
}

/* Partner logo links (block-partners-grid) are plain image wrappers, not
   text links — same exemption as .btn above, needed because the generic
   ".page-blocks a" rule (same specificity, defined earlier) would
   otherwise draw its blue underline under every logo that has a link. */
.page-blocks .partners-logo-item a,
.page-blocks .partners-logo-item a:hover,
.page-blocks .partners-logo-item a:focus-visible {
	border-bottom: none;
}

/* Same reasoning as the partner logo exemption above: the round arrow
   CTA (block-media-text-cards) is a button, not a text link — it must
   not pick up the generic ".page-blocks a" underline/blue text color
   (higher specificity than the plain ".block-media-text-cards__arrow"
   rule further down, so it would otherwise win despite coming first). */
.page-blocks .block-media-text-cards__arrow,
.page-blocks .block-media-text-cards__arrow:hover,
.page-blocks .block-media-text-cards__arrow:focus-visible {
	border-bottom: none;
	color: var(--color-white);
}

/* Same again for the card image and title, now also wrapped in a link
   to the same CTA: the image must not get a text-link underline, and
   the title keeps its own blue color + underline-on-hover-only instead
   of the generic rich-text link styling. */
.page-blocks .block-media-text-cards__image,
.page-blocks .block-media-text-cards__image:hover,
.page-blocks .block-media-text-cards__image:focus-visible {
	border-bottom: none;
}

.page-blocks .block-media-text-cards__title a,
.page-blocks .block-media-text-cards__title a:hover,
.page-blocks .block-media-text-cards__title a:focus-visible {
	color: var(--color-blue);
	border-bottom: none;
}

.block-rich-text__content a:hover,
.block-rich-text__content a:focus-visible {
	text-decoration-color: var(--color-blue);
}

.block-rich-text__content ul,
.block-rich-text__content ol {
	margin: 0 0 var(--space-sm) 0;
	padding-left: 1.4rem;
}

.block-rich-text__content li {
	margin-bottom: 0.4rem;
	line-height: 1.6;
}

/* Images insérées directement dans le WYSIWYG (bouton "Ajouter média" de
   l'éditeur) — sans cette règle, WordPress affiche l'image à sa taille
   littérale ("Medium" = 300px par défaut) collée à gauche. Pour un vrai
   diagramme/illustration en pleine largeur, préférer le bloc dédié
   "Illustration" plutôt que d'insérer l'image ici. */
/* Respecte le contrôle "Align" du panneau WordPress natif (Image details)
   plutôt que d'imposer un comportement unique à toutes les images — None
   reste None, Center reste explicitement choisi par l'éditeur, pas
   imposé par défaut. */
.block-rich-text__content img,
.prose img {
	width: auto;
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
}

.block-rich-text__content img.alignnone {
	display: block;
	margin: var(--space-sm) 0;
}

.block-rich-text__content img.aligncenter {
	display: block;
	margin: var(--space-sm) auto;
}

.block-rich-text__content img.alignleft {
	float: left;
	margin: 0.3rem var(--space-sm) var(--space-sm) 0;
	max-width: 45%;
}

.block-rich-text__content img.alignright {
	float: right;
	margin: 0.3rem 0 var(--space-sm) var(--space-sm);
	max-width: 45%;
}

/* ===================================================================
   BLOC — ILLUSTRATION
   =================================================================== */

.block-illustration {
	margin: 0;
	text-align: center;
}

.block-illustration img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
	border: 1px solid var(--color-border);
}

.block-illustration--full img {
	width: 100%;
}

.block-illustration figcaption {
	font-size: 0.8125rem;
	color: var(--color-text-soft);
	margin-top: var(--space-xs);
}

/* ===================================================================
   BLOC — STAT GRID
   =================================================================== */

.block-stat-grid__heading {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--color-blue-deep);
	margin: 0 0 var(--space-sm) 0;
	text-align: center;
}

.block-stat-grid__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--space-sm);
	background: var(--color-bg);
	border-radius: var(--radius);
	padding: var(--space-md);
}

.block-stat-grid__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.block-stat-grid__value {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: var(--color-blue);
	line-height: 1;
	margin-bottom: 0.3rem;
}

.block-stat-grid__label {
	font-size: 0.8125rem;
	color: var(--color-text-soft);
}

/* ===================================================================
   BLOC — COMPARISON TABLE
   =================================================================== */

.block-comparison-table__heading {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--color-blue-deep);
	margin: 0 0 var(--space-sm) 0;
	text-align: center;
}

.block-comparison-table__scroll {
	overflow-x: auto;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.block-comparison-table__table {
	width: 100%;
	border-collapse: collapse;
	min-width: 480px;
}

.block-comparison-table__table th,
.block-comparison-table__table td {
	border-bottom: 1px solid var(--color-border);
	padding: 0.65rem var(--space-sm);
	font-size: 0.9375rem;
}

.block-comparison-table__table thead th {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.875rem;
	color: #FFFFFF;
	background: var(--color-blue-table-header);
	text-align: center;
}

.block-comparison-table__table thead th:first-child {
	text-align: left;
	background: transparent;
	color: var(--color-text);
}

.block-comparison-table__table tbody th {
	text-align: left;
	font-weight: 400;
	color: var(--color-text);
}

.block-comparison-table__table tbody td {
	text-align: center;
	color: var(--color-text-soft);
}

.block-comparison-table__table tbody tr:nth-child(even) {
	background: rgba(31, 82, 163, 0.025);
}

/* ===================================================================
   BLOC — TESTIMONIAL GRID
   =================================================================== */

.block-testimonial-grid__heading {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.375rem;
	color: var(--color-blue-deep);
	margin: 0 0 var(--space-sm) 0;
	text-align: center;
}

.block-testimonial-grid__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--space-sm);
}

.block-testimonial-grid__card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-sm);
}

.block-testimonial-grid__logo {
	height: 32px;
	width: auto;
	max-width: 140px;
	object-fit: contain;
	margin-bottom: var(--space-xs);
}

.block-testimonial-grid__quote {
	font-style: italic;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--color-text);
	margin: 0 0 var(--space-xs) 0;
}

.block-testimonial-grid__challenge,
.block-testimonial-grid__results {
	font-size: 0.8125rem;
	color: var(--color-text-soft);
	margin: 0 0 0.35rem 0;
}

.block-testimonial-grid__video-link {
	display: inline-block;
	margin-top: var(--space-xs);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-blue);
	text-decoration: none;
	border-bottom: 1.5px solid var(--color-yellow-warm);
}

/* ===================================================================
   BLOC — VIDEO GRID
   =================================================================== */

.block-video-grid__heading {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--color-blue-deep);
	margin: 0 0 var(--space-sm) 0;
	text-align: center;
}

.block-video-grid__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-sm);
}

.block-video-grid__item {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	text-align: left;
}

.block-video-grid__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.block-video-grid__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(20, 56, 104, 0.85);
}

.block-video-grid__play::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent #FFFFFF;
}

.block-video-grid__title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--space-sm) var(--space-sm) 0.6rem;
	background: linear-gradient(transparent, rgba(10, 31, 58, 0.85));
	color: #FFFFFF;
	font-size: 0.8125rem;
	font-weight: 600;
}

/* ===================================================================
   BLOC — CTA BANNER
   =================================================================== */

.block-cta-banner {
	background: var(--color-bg);
	border: 1px solid rgba(20, 56, 104, 0.12);
	border-radius: var(--radius);
	padding: var(--space-md);
	text-align: center;
}

.block-cta-banner__icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--color-blue-deep);
}

.block-cta-banner__icon {
	width: 30px;
	height: 30px;
	color: #fff;
}

.page-whitepaper .block-cta-banner {
	padding: var(--space-sm) var(--space-md);
}

.page-whitepaper .block-cta-banner__inner {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	text-align: left;
}

@media (max-width: 1120px) {
	.page-whitepaper .block-cta-banner__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.page-whitepaper .block-cta-banner__buttons {
		width: 100%;
	}

	.page-whitepaper .block-cta-banner__buttons .btn {
		width: 100%;
		justify-content: center;
	}
}



.page-whitepaper .block-cta-banner__body {
	flex: 1;
}

.page-whitepaper .block-cta-banner__heading {
	margin: 0;
}

.page-whitepaper .block-cta-banner__text {
	margin: 2px 0 0 0;
	max-width: none;
}

.page-whitepaper .block-cta-banner .btn--primary {
	background: var(--color-blue-deep);
	color: #fff;
}

.page-whitepaper .block-cta-banner .btn--primary:hover,
.page-whitepaper .block-cta-banner .btn--primary:focus-visible {
	box-shadow: 0 4px 10px rgba(20, 56, 104, 0.35);
}


.block-cta-banner__heading {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.375rem;
	color: var(--color-blue-deep);
	margin: 0 0 var(--space-xs) 0;
}

.block-cta-banner__text {
	font-size: 0.9375rem;
	color: var(--color-text-soft);
	max-width: 56ch;
	margin: 0 auto var(--space-sm) auto;
}

.block-cta-banner__buttons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	flex-wrap: wrap;
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	text-decoration: none;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.9375rem;
	padding: 0.8rem 1.5rem;
	border-radius: var(--radius);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn--primary {
	background: var(--color-yellow-warm);
	color: var(--color-blue-deep);
}

.btn--primary:hover,
.btn--primary:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(255, 212, 0, 0.35);
}

.btn--secondary {
	background: var(--color-white);
	border: 1.5px solid var(--color-blue);
	color: var(--color-blue);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
	background: rgba(31, 82, 163, 0.06);
}

.btn--blue {
	background: var(--color-blue);
	color: #FFFFFF;
}

.btn--blue:hover,
.btn--blue:focus-visible {
	background: var(--color-blue-deep);
	transform: translateY(-1px);
}

.btn--blue-deep-dark {
	background: #143868;
	color: #FFFFFF;
}

.btn--blue-deep-dark:hover,
.btn--blue-deep-dark:focus-visible {
	filter: brightness(1.15);
	transform: translateY(-1px);
}

.btn--blue-medium {
	background: #2145E6;
	color: #FFFFFF;
}

.btn--blue-medium:hover,
.btn--blue-medium:focus-visible {
	filter: brightness(0.9);
	transform: translateY(-1px);
}

.btn--blue-vivid {
	background: #0388EB;
	color: #FFFFFF;
}

.page-community .btn--blue-vivid {
	background: #1F52A3;
	color: #FFFFFF;
}

.btn--blue-vivid:hover,
.btn--blue-vivid:focus-visible {
	filter: brightness(0.9);
	transform: translateY(-1px);
}

.btn:focus-visible {
	outline: 2px solid var(--color-blue);
	outline-offset: 3px;
}

.btn__icon {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
}

.page-whitepaper .block-cta-banner__buttons {
	justify-content: flex-end;
	flex-shrink: 0;
}


/* ===================================================================
   BLOC — STAKEHOLDER SECTION (page unique /why-europrivacy/stakeholders)
   =================================================================== */

.block-stakeholder-section {
	border-bottom: 1px solid var(--color-border);
	padding-bottom: var(--space-md);
}

.block-stakeholder-section:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.block-stakeholder-section__inner {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
}

.block-stakeholder-section__icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	object-fit: contain;
}

.block-stakeholder-section__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--color-blue-deep);
	margin: 0 0 0.4rem 0;
}

.block-stakeholder-section__text {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--color-text-soft);
}

/* ===================================================================
   BLOC — INDUSTRY SECTION (page unique /why-europrivacy/industry)
   =================================================================== */

.block-industry-section {
	border-bottom: 1px solid var(--color-border);
	padding-bottom: var(--space-md);
}

.block-industry-section:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.block-industry-section__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--color-blue-deep);
	margin: 0 0 var(--space-sm) 0;
}

.block-industry-section__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-sm);
	margin-bottom: var(--space-sm);
}

.block-industry-section__col h4 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--color-blue);
	margin: 0 0 0.4rem 0;
}

.block-industry-section__col .prose {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--color-text-soft);
}

.block-industry-section__case-study-link {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-blue);
	text-decoration: none;
	border-bottom: 1.5px solid var(--color-yellow-warm);
}

/* ===================================================================
   BLOC — RESOURCE LINK CARD
   =================================================================== */

.block-resource-link-card {
	background: var(--color-bg);
	border-radius: var(--radius);
	padding: var(--space-md);
	text-align: center;
}

.block-resource-link-card__heading {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--color-blue-deep);
	margin: 0 0 var(--space-xs) 0;
}

.block-resource-link-card__text {
	font-size: 0.9375rem;
	color: var(--color-text-soft);
	max-width: 56ch;
	margin: 0 auto var(--space-sm) auto;
}

/* ===================================================================
   BLOC — OUTILS (ROI Calculator / Provider Search)
   Enveloppe minimale : le ROI Calculator réutilise déjà les classes
   .roi-* existantes via son template-part, pas de nouveau style requis
   ici hormis le titre/texte d'intro.
   =================================================================== */

.block-roi-calculator-tool__heading,
.block-provider-search-tool__heading {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.375rem;
	color: var(--color-blue-deep);
	margin: 0 0 var(--space-xs) 0;
	text-align: center;
}

.block-roi-calculator-tool__intro,
.block-provider-search-tool__intro {
	font-size: 0.9375rem;
	color: var(--color-text-soft);
	max-width: 60ch;
	margin: 0 auto var(--space-md) auto;
	text-align: center;
}

.block-provider-search-tool__filters {
	display: flex;
	gap: var(--space-sm);
	justify-content: center;
	margin-bottom: var(--space-md);
	flex-wrap: wrap;
}

.block-provider-search-tool__filters label {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-text);
}

.block-provider-search-tool__filters select {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	padding: 0.55rem 0.75rem;
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-white);
	min-width: 180px;
}

/* ===================================================================
   RESPONSIVE — Blocs page générique
   =================================================================== */

@media (max-width: 700px) {
	.block-industry-section__grid {
		grid-template-columns: 1fr;
	}

	.block-hero__inner {
		padding: var(--space-md) var(--space-sm);
	}
}

@media (max-width: 600px) {
	.block-stat-grid__items,
	.block-cta-banner,
	.block-resource-link-card {
		padding: var(--space-sm);
	}

	.block-stakeholder-section__inner {
		flex-direction: column;
	}
}

/* ===================================================================
   BLOC — HUB GRID (sous-pages automatiques)
   =================================================================== */

.block-hub-grid__heading {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.375rem;
	color: var(--color-blue-deep);
	margin: 0 0 var(--space-sm) 0;
}

.block-hub-grid__items {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-sm);
}

.block-hub-grid__card {
	display: block;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background: var(--color-white);
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.block-hub-grid__card:hover,
.block-hub-grid__card:focus-visible {
	border-color: var(--color-blue);
	transform: translateY(-2px);
}

.block-hub-grid__image {
  aspect-ratio: 1170 / 345;
  overflow: hidden;
}

.block-hub-grid__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.block-hub-grid__image-fallback {
	width: 100%;
	height: 100%;
	background: linear-gradient(140deg, var(--color-blue) 0%, var(--color-blue-deep) 100%);
}

.block-hub-grid__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.75rem var(--space-sm);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--color-blue);
}

.block-hub-grid__title .chevron {
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
}

.block-hub-grid__empty {
	font-size: 0.9375rem;
	color: var(--color-text-soft);
	background: var(--color-bg);
	border-radius: var(--radius);
	padding: var(--space-sm);
}

@media (max-width: 900px) {
	.block-hub-grid__items {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.block-hub-grid__items {
		grid-template-columns: 1fr;
	}
}

/* ===================================================================
   BLOC — PARTNERS LOGO GRID (logos groupés par catégorie)
   Réutilise .partners-group / .partners-group-title / .partners-logos-grid /
   .partners-logo-item (section "PARTNERS & PROVIDERS" plus haut dans ce
   fichier) — seul le titre de bloc ci-dessous est spécifique.
   =================================================================== */

.block-partners-grid__heading {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.375rem;
	color: var(--color-blue-deep);
	margin: 0 0 var(--space-sm) 0;
}

/* ===================================================================
   BLOC — TEXTE DEUX COLONNES
   =================================================================== */

.block-two-column-text {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-lg);
}

.block-two-column-text__heading {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.375rem;
	color: var(--color-blue-deep);
	margin: 0 0 var(--space-sm) 0;
}

.block-two-column-text__content {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--color-text);
}

.block-two-column-text__content p {
	margin: 0 0 var(--space-sm) 0;
}

.block-two-column-text__content li p {
	/* Le contenu collé depuis Word contient parfois un saut de paragraphe
	   entre le titre gras et sa description (ex. "1. Identify and reduce
	   legal and financial risks" / "through a systematic gap analysis").
	   Sans cette règle, ce <p> imbriqué hérite de la marge ci-dessus et
	   crée un grand espace inattendu au milieu de la puce — on la
	   neutralise ici pour un rendu cohérent, que le contenu source ait
	   ou non ce saut de ligne. */
	margin: 0;
}

.block-two-column-text__content ol {
	margin: 0;
	padding-left: 1.4rem;
}

.block-two-column-text__content ul {
	margin: 0;
	padding-left: 1.4rem;
}

.block-two-column-text__content li {
	margin-bottom: 0.5rem;
	line-height: 1.6;
}

.page-whitepaper .block-two-column-text__col {
	/*background-color: var(--color-bg);*/
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(20, 56, 104, 0.08);
	padding: var(--space-sm);
}

.page-whitepaper .block-two-column-text__content ul {
	padding-left: 0;
	list-style: none;
}

.page-whitepaper .block-two-column-text__content ul li {
	position: relative;
	padding-left: 1.75rem;
}

.page-whitepaper .block-two-column-text__content ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	background-color: var(--color-blue-deep);
}

.page-whitepaper .block-two-column-text__content ul li::after {
	content: "";
	position: absolute;
	left: 0.28rem;
	top: 0.45em;
	width: 0.45rem;
	height: 0.25rem;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
}

.block-two-column-text__content strong {
	color: var(--color-blue-deep);
}

@media (max-width: 700px) {
	.block-two-column-text {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}
}

/* ===================================================================
   PAGE GÉNÉRIQUE — Ajustements demandés par Hervé (2026-07-23)
   =================================================================== */

/* Fond blanc pour les pages génériques (page-generic.php), au lieu du
   gris hérité de --color-bg sur le <body>. --color-bg reste inchangée
   et continue de servir de fond de bandes alternées ailleurs (homepage
   notamment) — ne pas toucher à la variable globale. */
body.page-template-page-generic {
        background: #FFFFFF;
}

/* Titres H2 tapés directement dans l'éditeur WYSIWYG du bloc "Texte
   riche" (champ "Contenu") — jusqu'ici non stylés, d'où l'héritage des
   marges par défaut du navigateur et le grand espace vertical visible
   sur "Comparing the GDPR Instruments...". #246FC6 est une couleur
   ponctuelle, hors palette --color-blue/--color-blue-deep actuelle —
   à réconcilier avec la palette officielle une fois tranchée avec
   Sébastien (cf. discordance #D1F5FF/#0388EB déjà identifiée). */
.block-rich-text__content h2 {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 1.375rem;
        color: #244697;
        margin: var(--space-md) 0 var(--space-xs) 0;
        line-height: 1.3;
}

/* Override — supprime le fond bleu/gris derrière le tableau GDPR
   mécanismes UNIQUEMENT sur la page dédiée (page-generic.php).
   La homepage (front-page.php) garde son fond var(--color-bg)
   d'origine, la règle #why-gdpr-table de base n'est pas touchée. */
body.page-template-page-generic #why-gdpr-table {
	background: transparent;
}

body.page-template-page-generic #why-gdpr-table .gdpr-table-inner {
	padding-top: 0;
}


/* ==========================================================================
   Block: Announcement banner
   ACF layout: announcement_banner (page-generic.php)
   ========================================================================== */

.page-whitepaper .page-blocks {
	gap: var(--space-sm);
}

/* Page ECCP — le bouton + le bloc Localisation (2 derniers blocs) côte à
   côte, chacun dans un encart ombré. Le reste des blocs reste empilé. */
.page-eccp .page-blocks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-md) var(--space-md);
}

.page-eccp .page-blocks > * {
	grid-column: 1 / -1;
}

.page-eccp .page-blocks > .pg-button-block,
.page-eccp .page-blocks > .pg-localisation {
	grid-column: span 1;
	background-color: var(--color-white);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(20, 56, 104, 0.08);
	padding: var(--space-md);
}

@media (max-width: 700px) {
	.page-eccp .page-blocks {
		grid-template-columns: 1fr;
	}

	.page-eccp .page-blocks > .pg-button-block,
	.page-eccp .page-blocks > .pg-localisation {
		grid-column: 1 / -1;
	}
}

.block-announcement-banner {
	display: flex;
	align-items: center;
	gap: 16px;
	background-color: var(--color-bg);
	border-left: 4px solid var(--color-blue);
	border-radius: 0 8px 8px 0;
	padding: 10px 24px;
	margin-bottom: 32px;
}

.block-announcement-banner__icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	color: var(--color-blue);
}

.block-announcement-banner__text {
	font-weight: 600;
	color: var(--color-blue-deep);
	line-height: 1.5;
}

.block-announcement-banner__text a {
	color: var(--color-blue);
}

/* ==========================================================================
   Block: Icon card grid
   ACF layout: icon_card_grid (page-generic.php)
   ========================================================================== */

.block-icon-card-grid {
	margin-bottom: 32px;
}

.page-whitepaper .block-icon-card-grid {
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(20, 56, 104, 0.08);
	padding: var(--space-sm);
}

.block-icon-card-grid__heading {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-blue);
	margin-bottom: 16px;
}

.block-icon-card-grid__cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.icon-card {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: 12px;
	row-gap: 2px;
	background-color: var(--color-bg);
	border-radius: 8px;
	padding: 20px;
}

.icon-card__icon {
	grid-column: 1;
	grid-row: 1 / 3;
	align-self: start;
	width: 22px;
	height: 22px;
	color: var(--color-blue-deep);
	margin-top: 2px;
}

.icon-card__title {
	grid-column: 2;
	grid-row: 1;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: var(--color-blue-deep);
	margin: 0;
}

/* Greek: Plus Jakarta Sans has no Greek glyphs (see html:lang(el)). */
html:lang(el) .icon-card__title {
	font-family: var(--font-display);
}

.icon-card__description {
	font-size: 14px;
	color: #5A6B85;
	margin: 0;
	line-height: 1.5;
}

@media (max-width: 640px) {
	.block-icon-card-grid__cards {
		grid-template-columns: 1fr;
	}
}


/* =====================================================
   BLOCK: Quote Callout
   ===================================================== */
.pg-quote-callout {
	border-left: 4px solid var(--color-blue);
	padding: 12px 28px;
	margin: 0 0;
}

.pg-quote-callout--corners-rounded {
	border-radius: 8px;
}

.pg-quote-callout--corners-square {
	border-radius: 0;
}

.pg-quote-callout--bg-blue {
	background-color: #EAF1FB;
}

.pg-quote-callout--bg-white {
	background-color: #FFFFFF;
}

.pg-quote-callout--bg-yellow {
	background-color: #FEF6E7;
}

.pg-quote-callout--bg-green {
	background-color: #E8F5EE;
}

.pg-quote-callout--bg-orange {
	background-color: #FDEEE0;
}

.pg-quote-callout--bg-purple {
	background-color: #F1EAFB;
}

.pg-quote-callout--border-blue {
	border-left-color: var(--color-blue);
}

.pg-quote-callout--border-yellow {
	border-left-color: var(--color-yellow-warm);
}

.pg-quote-callout--border-green {
	border-left-color: #1E8E5A;
}

.pg-quote-callout--border-orange {
	border-left-color: #E8A83C;
}

.pg-quote-callout--border-purple {
	border-left-color: #7C4DFF;
}

.pg-quote-callout__text {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.5;
}

.pg-quote-callout__text p {
	margin: 0;
}

.pg-quote-callout__text p + p {
	margin-top: 10px;
}

.pg-quote-callout__text--italic {
	font-style: italic;
}

.pg-quote-callout__text--normal {
	font-style: normal;
}

.pg-quote-callout__text--bold {
	font-style: normal;
	font-weight: 700;
}

.pg-quote-callout__text--blue {
	color: var(--color-blue-primary);
}

.pg-quote-callout__text--blue-deep {
	color: var(--color-blue-deep);
}

.pg-quote-callout__text--text {
	color: var(--color-text);
}

.pg-quote-callout__source {
	display: block;
	margin-top: 5px;
	font-style: italic;
	font-size: 0.9rem;
	color: #5a6b85;
}

/* =====================================================
   BLOCK: Numbered Steps Block
   ===================================================== */
.pg-numbered-steps {
        margin: 10px 0;
        background-color: var(--color-bg);
        border: 1px solid #E2E8F2;
        border-radius: 10px;
        padding: 24px 28px;
}
.pg-numbered-steps__header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 20px;
}
.pg-numbered-steps__icon {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        object-fit: contain;
        background-color: var(--color-blue);
        border-radius: 50%;
        padding: 8px;
        box-sizing: border-box;
}
.pg-numbered-steps__title {
        margin: 0;
        font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
        font-size: 1.3rem;
        color: var(--color-blue-primary);
}
.pg-numbered-steps__list {
        /* cadre déplacé sur .pg-numbered-steps (parent) */
}

.pg-numbered-steps__step {
	display: flex;
	gap: 16px;
	position: relative;
	padding-bottom: 24px;
}

.pg-numbered-steps__step:last-child {
	padding-bottom: 0;
}

/* ligne verticale reliant les numéros, sauf après le dernier step */
.pg-numbered-steps__step:not(:last-child)::before {
	content: '';
	position: absolute;
	left: 15px;
	top: 34px;
	bottom: 0;
	width: 2px;
	background-color: #C9D6EA;
}

.pg-numbered-steps__number {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--color-blue);
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.95rem;
	z-index: 1;
}

.pg-numbered-steps__content {
        padding-top: 4px;
        flex: 1 1 auto;
        min-width: 0;
}

.pg-numbered-steps__content > strong {
        display: block;
        margin-bottom: 4px;
        color: var(--color-blue-deep);
        font-size: 1rem;
}

.pg-numbered-steps__content p {
	margin: 0;
	line-height: 1.5;
}

/* =====================================================
   BLOCK: Icon Highlight Box
   ===================================================== */
.pg-icon-highlight {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	border: 1px solid #E2E8F2;
	border-radius: 10px;
	padding: 32px;
	margin: 24px 0;
	background-color: #FFFFFF;
}

.pg-icon-highlight__left {
	flex: 1 1 260px;
	text-align: center;
}

.pg-icon-highlight__icon {
	max-width: 200px;
	height: auto;
	margin-bottom: 16px;
}

.pg-icon-highlight__criteria {
	font-weight: 600;
	color: var(--color-blue-deep);
	line-height: 1.5;
}

.pg-icon-highlight__criteria p {
	margin: 0 0 4px;
}

.pg-icon-highlight__right {
	flex: 1 1 320px;
	border-left: 1px solid #E2E8F2;
	padding-left: 32px;
}

.pg-icon-highlight__benefits-title {
	display: block;
	margin-bottom: 12px;
	color: var(--color-blue-deep);
	font-size: 1rem;
}

.pg-icon-highlight__benefits {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.pg-icon-highlight__benefits li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 8px;
	line-height: 1.5;
}

.pg-icon-highlight__benefits li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: #2E9E5B;
	font-weight: 700;
}

.pg-icon-highlight__cta-label {
	margin: 0 0 4px;
	font-weight: 600;
	color: var(--color-blue-deep);
}

.pg-icon-highlight__cta-link {
	color: var(--color-blue);
	text-decoration: underline;
}

.pg-icon-highlight__cta-link:hover {
	color: var(--color-blue-deep);
}

/* Empilement en colonne unique sous 640px */
@media (max-width: 640px) {
	.pg-icon-highlight__right {
		border-left: none;
		padding-left: 0;
		border-top: 1px solid #E2E8F2;
		padding-top: 24px;
	}
}



/* ==========================================================================
   CHECKLIST BLOCK (layout_pg_checklist_block)
   Liste de coches en carte unique — item = icône check + texte riche
   (gras/lien via WYSIWYG minimal). Introduit pour la page
   "Prepare your Certification", pensé réutilisable (Welcome Pack,
   Europrivacy Criteria...).
   Piège hérité de numbered_steps_block : .page-blocks est en
   flex-column avec gap:var(--space-md) → toujours margin:0 sur le
   bloc racine .pg-checklist, jamais de margin vertical individuel.
   ========================================================================== */

.pg-checklist {
    background-color: var(--color-bg);
    border: 1px solid rgba(20, 56, 104, 0.12);
    border-radius: 12px;
    padding: var(--space-md);
	padding-top: var(--space-sm);	
    margin: 0;
    box-shadow: 0 8px 24px rgba(20, 56, 104, 0.12);
}

.pg-checklist__title {
    margin: 0 0 var(--space-sm) 0;
}

.pg-checklist__intro {
    margin: 0 0 var(--space-sm) 0;
	margin-bottom: var(--space-sm);
    color: var(--color-text);
}

.pg-checklist__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.pg-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.pg-checklist__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background-color: var(--color-blue);
    border-radius: 50%;
    margin-top: 2px;
}

.pg-checklist__content {
    flex: 1 1 auto;
    min-width: 0;
}

.pg-checklist__content p {
    margin: 0;
}

.pg-checklist__content strong {
    color: var(--color-blue-deep);
}

/* ==========================================================================
   Block: Icon + Title (layout_pg_icon_title_block)
   Badge rond bleu clair (10% opacité --color-blue) + titre H2 aligné.
   margin:0 sur le conteneur racine — .page-blocks gère l'espacement via gap.
   ========================================================================== */
.pg-icon-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
}
.pg-icon-title__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(32, 81, 164, 0.1);
    flex-shrink: 0;
}
.pg-icon-title__icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.pg-icon-title__title {
    color: var(--color-blue-deep);
    margin: 0;
}
/* =====================================================
   BLOCK: Callout Box (warning / info)
   ===================================================== */
.pg-callout-box {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	border-radius: 8px;
	padding: 18px 24px;
	margin: 0;
}

.pg-callout-box__icon-svg {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	margin-top: 2px;
}

.pg-callout-box__text {
	font-size: 0.98rem;
	line-height: 1.6;
}

.pg-callout-box__text p {
	margin: 0;
}

.pg-callout-box__text p + p {
	margin-top: 10px;
}

.pg-callout-box--bg-yellow {
	background-color: #FEF6E7;
}

.pg-callout-box--bg-blue {
	background-color: #EAF1FB;
}

.pg-callout-box--bg-green {
	background-color: #E8F5EE;
}

.pg-callout-box--bg-orange {
	background-color: #FDEEE0;
}

.pg-callout-box--bg-purple {
	background-color: #F1EAFB;
}

.pg-callout-box--bg-white {
	background-color: #FFFFFF;
}

.pg-callout-box--border-yellow {
	border: 1px solid var(--color-yellow-warm);
}

.pg-callout-box--border-blue {
	border: 1px solid var(--color-blue);
}

.pg-callout-box--border-green {
	border: 1px solid #1E8E5A;
}

.pg-callout-box--border-orange {
	border: 1px solid #E8A83C;
}

.pg-callout-box--border-purple {
	border: 1px solid #7C4DFF;
}

.pg-callout-box__icon-svg--yellow {
	color: var(--color-yellow-warm);
}

.pg-callout-box__icon-svg--blue {
	color: var(--color-blue);
}

.pg-callout-box__icon-svg--green {
	color: #1E8E5A;
}

.pg-callout-box__icon-svg--orange {
	color: #E8A83C;
}

.pg-callout-box__icon-svg--purple {
	color: #7C4DFF;
}

/* =====================================================
   BLOCK: Icon List Section
   ===================================================== */
.pg-icon-list-section {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--space-md);
	background-color: var(--color-white);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(20, 56, 104, 0.08);
	padding: var(--space-sm);
	margin: 0;
}

.pg-icon-list-section__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	flex-shrink: 0;
}

.pg-icon-list-section__icon-svg {
	width: 30px;
	height: 30px;
}

.pg-icon-list-section--blue .pg-icon-list-section__icon {
	background-color: var(--color-blue);
}

.pg-icon-list-section--blue .pg-icon-list-section__icon-svg {
	color: #FFFFFF;
}

.pg-icon-list-section--blue-pale .pg-icon-list-section__icon {
	background-color: rgba(31, 82, 163, 0.12);
}

.pg-icon-list-section--blue-pale .pg-icon-list-section__icon-svg {
	color: var(--color-blue);
}

.pg-icon-list-section--blue-deep .pg-icon-list-section__icon {
	background-color: rgba(20, 56, 104, 0.12);
}

.pg-icon-list-section--blue-deep .pg-icon-list-section__icon-svg {
	color: var(--color-blue-deep);
}

.pg-icon-list-section--yellow .pg-icon-list-section__icon {
	background-color: rgba(255, 212, 0, 0.2);
}

.pg-icon-list-section--yellow .pg-icon-list-section__icon-svg {
	color: #A67F00;
}

.pg-icon-list-section--green .pg-icon-list-section__icon {
	background-color: rgba(30, 142, 90, 0.14);
}

.pg-icon-list-section--green .pg-icon-list-section__icon-svg {
	color: #1E8E5A;
}

.pg-icon-list-section__body {
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 4px;
}

.pg-icon-list-section__title {
	margin: 0 0 var(--space-xs) 0;
	color: var(--color-blue-primary);
}

.pg-icon-list-section__intro {
	margin: 0 0 var(--space-xs) 0;
	color: var(--color-text);
}

.pg-icon-list-section__columns {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: var(--space-md);
}

.pg-icon-list-section__columns--two {
	grid-template-columns: 1fr 1fr;
}

.pg-icon-list-section__column ul {
	margin: 0;
	padding-left: 1.2em;
	list-style: disc;
}

.pg-icon-list-section__column li {
	margin-bottom: 4px;
}

.pg-icon-list-section--marker-arrow .pg-icon-list-section__column ul,
.pg-icon-list-section--marker-dash .pg-icon-list-section__column ul {
	list-style: none;
	padding-left: 1.2em;
}

.pg-icon-list-section--marker-arrow .pg-icon-list-section__column li,
.pg-icon-list-section--marker-dash .pg-icon-list-section__column li {
	position: relative;
}

.pg-icon-list-section--marker-arrow .pg-icon-list-section__column li::before {
	content: '\25B8';
	position: absolute;
	left: -1.1em;
	color: var(--color-blue);
}

.pg-icon-list-section--marker-dash .pg-icon-list-section__column li::before {
	content: '\2013';
	position: absolute;
	left: -1.1em;
	color: var(--color-text-soft);
}

.pg-icon-list-section__column p:first-child {
	margin-top: 0;
}

.pg-icon-list-section__column p:last-child {
	margin-bottom: 0;
}

@media (max-width: 640px) {
	.pg-icon-list-section__columns--two {
		grid-template-columns: 1fr;
	}
}

/* Numbered list variant (Icon Numbered List Section) */
.pg-icon-numbered-list {
	display: flex;
	flex-direction: column;
}

.pg-icon-numbered-list__step {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	position: relative;
	padding-bottom: 14px;
}

.pg-icon-numbered-list__step:last-child {
	padding-bottom: 0;
}

.pg-icon-numbered-list__step:not(:last-child)::before {
	content: '';
	position: absolute;
	left: 11px;
	top: 24px;
	bottom: 0;
	border-left: 2px dotted var(--color-border);
}

.pg-icon-numbered-list__number {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: var(--color-blue);
	color: #FFFFFF;
	font-size: 0.75rem;
	font-weight: 700;
	z-index: 1;
}

.pg-icon-numbered-list__text {
	padding-top: 3px;
	line-height: 1.5;
	color: var(--color-text);
}

/* =====================================================
   BLOCK: Button (standalone CTA)
   ===================================================== */
.pg-button-block {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	margin: 0;
}

.pg-button-block--left {
	align-items: flex-start;
}

.pg-button-block--center {
	align-items: center;
}

.pg-button-block--right {
	align-items: flex-end;
}

.pg-button-block__above {
	display: flex;
	align-items: center;
	gap: 10px;
}

.pg-button-block__above-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	color: var(--color-blue);
}

.pg-button-block__above-text {
	color: var(--color-text);
}

.pg-button-block__above-text p {
	margin: 0;
}

/* =====================================================
   BLOCK: Card (simple, rounded, shadow)
   ===================================================== */
.pg-card {
	background-color: var(--color-white);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(20, 56, 104, 0.08);
	padding: var(--space-sm) var(--space-md);
	margin: 0;
}

.pg-card__title {
	color: var(--color-blue-primary);
	margin: 0 0 var(--space-xs) 0;
}

.pg-card__title:last-child {
	margin-bottom: 0;
}

.pg-card__text {
	font-size: 0.98rem;
	line-height: 1.6;
}

.pg-card__text p {
	margin: 0;
}

.pg-card__text p + p {
	margin-top: 10px;
}

.pg-card__text--text {
	color: var(--color-text);
}

.pg-card__text--blue {
	color: var(--color-blue-primary);
}

.pg-card__text--blue-deep {
	color: var(--color-blue-deep);
}

/* =====================================================
   BLOCK: Intro Highlight
   ===================================================== */
.pg-intro-highlight {
	border-left: 4px solid var(--color-yellow-warm);
	padding: 4px 20px;
	margin: 0;
	font-style: italic;
	font-size: 1.05rem;
	line-height: 1.5;
	color: var(--color-blue-primary);
}

/* =====================================================
   BLOCK: Numbered Badge Steps
   ===================================================== */
.pg-numbered-badge-steps {
	margin: 0;
}

.pg-numbered-badge-steps__step {
	display: flex;
	gap: 20px;
	position: relative;
	padding-bottom: var(--space-md);
}

.pg-numbered-badge-steps__step:last-child {
	padding-bottom: 0;
}

.pg-numbered-badge-steps__step:not(:last-child)::before {
	content: '';
	position: absolute;
	left: 23px;
	top: 48px;
	bottom: 0;
	width: 2px;
	background-color: var(--color-border);
}

.pg-numbered-badge-steps__number {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: #FFFBEA;
	border: 1.5px solid var(--color-blue);
	color: var(--color-blue);
	font-weight: 500;
	font-size: 13px;
	z-index: 1;
}

.pg-numbered-badge-steps__content {
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 6px;
}

.pg-numbered-badge-steps__badge {
	display: inline-block;
	background-color: #EAF1FB;
	color: var(--color-blue-primary);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 4px;
	margin-bottom: 8px;
}

.pg-numbered-badge-steps__text {
	line-height: 1.6;
}

.pg-numbered-badge-steps__text p {
	margin: 0;
}

.pg-numbered-badge-steps__text strong {
	color: #185FA5;
	font-weight: bolder;
}

.pg-numbered-badge-steps__text p + p {
	margin-top: 10px;
}

/* =====================================================
   BLOCK: Localisation
   ===================================================== */
.pg-localisation {
	margin: 0;
}

.pg-localisation__header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.pg-localisation__icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--color-blue);
}

.pg-localisation__title {
	margin: 0;
	font-size: 1.1rem;
	color: var(--color-blue-primary);
}

.pg-localisation__address {
	border-left: 3px solid var(--color-yellow-warm);
	padding: 2px 0 2px 16px;
}

.pg-localisation__address p {
	margin: 0 0 4px 0;
	color: var(--color-text);
}

.pg-localisation__address p:last-child {
	margin-bottom: 0;
}

.pg-localisation__address--yellow {
	border-left-color: var(--color-yellow-warm);
}

.pg-localisation__address--blue {
	border-left-color: var(--color-blue);
}

.pg-localisation__address--blue-deep {
	border-left-color: var(--color-blue-deep);
}

.pg-localisation__address--green {
	border-left-color: #1E8E5A;
}


/* Page Academy */
.page-academy .pg-button-block .btn {
	padding: 0.8rem 18px;
}

.page-antibribery-charter .pg-icon-list-section__icon-svg {
    width: 40px;
    height: 40px;
}

.page-privacy .block-rich-text__content img {
	width: 80px;
}

/* ===================================================================
   PAGE "TESTIMONIALS" (dédiée) — Hero / Video Testimonials /
   Written Testimonials. Trois layouts flexible content page-generic
   indépendants, pensés pour être posés à la suite les uns des autres
   sur une seule page. Le bloc CTA de fin de page réutilise le layout
   existant "CTA banner" (.block-cta-banner, déjà stylé plus haut) —
   rien à ajouter ici pour lui.
   =================================================================== */

/* --- Bloc 1 : Testimonials Hero --- */
.pg-testimonials-hero {
	position: relative;
	margin: 0;
	border-radius: var(--radius);
	overflow: hidden;
	background-size: cover;
	background-position: center;
	min-height: 260px;
	display: flex;
	align-items: center;
}

.pg-testimonials-hero__overlay {
	position: absolute;
	inset: 0;
	/* Dégradé appliqué en couche séparée (jamais de filter/brightness sur
	   l'image elle-même) : sombre et opaque à gauche pour la lisibilité
	   du texte, qui s'éclaircit vers la droite pour laisser deviner le
	   visuel de fond. */
	background: linear-gradient(90deg,
		rgba(20, 56, 104, 0.92) 0%,
		rgba(20, 56, 104, 0.80) 40%,
		rgba(20, 56, 104, 0.35) 70%,
		rgba(20, 56, 104, 0.10) 100%);
}

.pg-testimonials-hero__content {
	position: relative;
	z-index: 1;
	max-width: 560px;
	padding: var(--space-md) var(--space-md);
	text-align: left;
}

.pg-testimonials-hero__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.3;
	color: #FFFFFF;
	margin: 0 0 var(--space-sm) 0;
}

.pg-testimonials-hero__subtitle {
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
}

@media (max-width: 600px) {
	.pg-testimonials-hero {
		min-height: 0;
	}

	.pg-testimonials-hero__overlay {
		/* Sur mobile, l'image de fond garde peu de place visible autour
		   du texte : un voile uniforme et bien plus opaque garantit la
		   lisibilité quel que soit le sujet de la photo. */
		background: rgba(20, 56, 104, 0.88);
	}

	.pg-testimonials-hero__content {
		max-width: 100%;
		padding: var(--space-md) var(--space-sm);
	}

	.pg-testimonials-hero__title {
		font-size: 1.375rem;
	}

	.pg-testimonials-hero__subtitle {
		font-size: 0.9375rem;
	}
}

/* --- Bloc 2 : Video Testimonials --- */
.pg-video-testimonials {
	margin: 0;
}

.pg-testimonials-title-row {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	margin: 0 0 var(--space-xs) 0;
}

.pg-testimonials-title-icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid var(--color-blue-primary);
	display: flex;
	align-items: center;
	justify-content: center;
}

.pg-testimonials-title-icon__svg {
	width: 20px;
	height: 20px;
	color: var(--color-blue-primary);
}

/* Le triangle "play" (contrairement au picto "quote", symétrique) a
   besoin d'un léger décalage pour paraître centré optiquement dans
   son cercle. */
.pg-video-testimonials .pg-testimonials-title-icon__svg {
	margin-left: 1px;
}

.pg-video-testimonials__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.375rem;
	color: var(--color-blue-primary);
	margin: 0;
}

.pg-video-testimonials__subtitle {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	color: var(--color-text-soft, #5B6472);
	margin: 0 0 var(--space-sm) 0;
}

.pg-video-testimonials__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-sm);
}

.pg-video-card {
	background-color: var(--color-white, #FFFFFF);
	border: 1px solid #E6EAF2;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(20, 56, 104, 0.12);
}

.pg-video-card__thumb-wrap {
	position: relative;
	aspect-ratio: 16 / 9;
	cursor: pointer;
	background-color: var(--color-bg);
}

.pg-video-card__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pg-video-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(20, 56, 104, 0.75);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.pg-video-card__thumb-wrap:hover .pg-video-card__play,
.pg-video-card__thumb-wrap:focus-visible .pg-video-card__play {
	background: var(--color-blue);
	transform: translate(-50%, -50%) scale(1.08);
}

.pg-video-card__play-icon {
	width: 18px;
	height: 18px;
	color: #FFFFFF;
	margin-left: 3px; /* recentre visuellement le triangle plein dans le cercle */
}

.pg-video-card__body {
	padding: var(--space-sm);
}

.pg-video-card__name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
	color: var(--color-blue-primary);
	margin: 0;
}

.pg-video-card__role {
	font-family: var(--font-body);
	font-size: 0.875rem;
	color: var(--color-text-soft, #5B6472);
	margin: 2px 0 0;
}

.pg-video-card__company {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--color-blue);
	margin: 2px 0 0;
}

/* Spécificité égale à la règle générique ".page-blocks a" (élément +
   classe) pour pouvoir la remplacer par la couleur/épaisseur voulues
   ici, au lieu du fin soulignement bleu appliqué par défaut à tous les
   liens des blocs flexible content. */
a.pg-video-card__company {
	text-decoration: none;
	border-bottom: 2px solid #EECA0D;
}

.pg-video-card__caption {
	font-family: var(--font-body);
	font-style: italic;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--color-text-soft, #5B6472);
	margin: var(--space-xs) 0 0;
}

@media (max-width: 900px) {
	.pg-video-testimonials__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.pg-video-testimonials__grid {
		grid-template-columns: 1fr;
	}
}

/* Lightbox modal partagée par les cartes d'un même bloc "Video
   Testimonials" (une instance de modal par bloc — cf. block-video-
   testimonials.php et assets/js/block-video-testimonials.js). */
.pg-video-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(10, 20, 35, 0.85);
	align-items: center;
	justify-content: center;
	padding: var(--space-md);
}

.pg-video-modal.is-active {
	display: flex;
}

.pg-video-modal__content {
	position: relative;
	width: 100%;
	max-width: 960px;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--radius);
	overflow: hidden;
}

.pg-video-modal__frame-container {
	width: 100%;
	height: 100%;
}

.pg-video-modal__close {
	position: absolute;
	top: -44px;
	right: 0;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	color: #FFFFFF;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pg-video-modal__close svg {
	width: 22px;
	height: 22px;
}

@media (max-width: 600px) {
	.pg-video-modal__close {
		top: -38px;
	}
}

/* --- Bloc 3 : Written Testimonials --- */
.pg-written-testimonials {
	margin: 0;
}

.pg-written-testimonials__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.375rem;
	color: var(--color-blue-primary);
	margin: 0;
}

.pg-written-testimonials__subtitle {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	color: var(--color-text-soft, #5B6472);
	margin: 0 0 var(--space-sm) 0;
}

.pg-written-testimonials__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.pg-written-testimonial {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	background-color: var(--color-white, #FFFFFF);
	border: 1px solid #E6EAF2;
	border-radius: var(--radius);
	padding: var(--space-sm);
}

.pg-written-testimonial__avatar {
	flex-shrink: 0;
	width: 120px;
	height: 120px;
	border-radius: var(--radius);
	overflow: hidden;
	background-color: var(--color-bg);
}

.pg-written-testimonial__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pg-written-testimonial__avatar.has-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #B7C0D1;
}

.pg-written-testimonial__avatar.has-fallback svg {
	width: 36px;
	height: 36px;
}

.pg-written-testimonial__identity {
	flex: 0 0 160px;
	min-width: 0;
}

.pg-written-testimonial__name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--color-blue-deep);
	margin: 0;
}

.pg-written-testimonial__role {
	font-family: var(--font-body);
	font-size: 0.8125rem;
	color: var(--color-text-soft, #5B6472);
	margin: 2px 0 0;
}

.pg-written-testimonial__company {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.8125rem;
	color: var(--color-blue);
	margin: 2px 0 0;
}

/* Même raison que .pg-video-card__company ci-dessus : égaler la
   spécificité de ".page-blocks a" pour contrôler explicitement ce
   soulignement plutôt que d'hériter de sa couleur par défaut. */
a.pg-written-testimonial__company {
	text-decoration: none;
	border-bottom: 1px solid var(--color-blue);
}

.pg-written-testimonial__quote {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: flex-start;
	gap: 6px;
}

.pg-written-testimonial__quote-mark {
	flex-shrink: 0;
	color: #C9D6EA;
}

.pg-written-testimonial__quote-mark--open {
	margin-top: 2px;
}

.pg-written-testimonial__quote-mark--close {
	align-self: flex-end;
	transform: rotate(180deg);
}

.pg-written-testimonial__quote-mark-svg {
	width: 40px;
	height: 40px;
}

.pg-written-testimonial__quote-text {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--font-body);
	font-style: italic;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #3D4759;
}

.pg-written-testimonial__quote-text p {
	margin: 0;
}

.pg-written-testimonial__quote-text p + p {
	margin-top: 10px;
}

@media (max-width: 768px) {
	.pg-written-testimonial {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.pg-written-testimonial__identity {
		flex: 0 0 auto;
	}

	.pg-written-testimonial__quote {
		text-align: left;
	}
}

/* ===================================================================
   PAGE DÉDIÉE "ROI Calculator" — GDPR Certification Cost Saving
   Estimator (block-roi-calculator-block.php). Réplique fonctionnelle
   de l'ancien outil Drupal : calcul transparent étape par étape
   (STEP 1 / STEP 2), jamais de résultat "boîte noire" — voir le
   commentaire en tête de block-roi-calculator-block.php pour le
   contexte juridique de cette exigence.
   =================================================================== */

.pg-roi-calculator {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

/* --- Bandeau intro : la carte bleue se superpose à l'image (comme la
   maquette), elle n'est pas une colonne à part dans une grille. --- */
.pg-roi-calculator__intro {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 3 / 1;
	background-color: var(--color-bg);
}

.pg-roi-calculator__intro-image {
	position: absolute;
	inset: 0;
}

.pg-roi-calculator__intro-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pg-roi-calculator__intro-panel {
	position: absolute;
	top: var(--space-sm);
	right: var(--space-sm);
	bottom: var(--space-sm);
	width: 46%;
	max-width: 420px;
	background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-blue-deep) 100%);
	border-radius: var(--radius);
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.pg-roi-calculator__intro-title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.375rem;
	line-height: 1.3;
	color: #FFFFFF;
	margin: 0 0 var(--space-xs) 0;
}

.pg-roi-calculator__intro-text {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
}

@media (max-width: 768px) {
	/* La carte en superposition ne laisse pas assez de place pour le
	   texte sur une image réduite à la largeur mobile : on repasse en
	   empilement statique (image, puis carte pleine largeur dessous). */
	.pg-roi-calculator__intro {
		position: static;
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
	}

	.pg-roi-calculator__intro-image {
		position: static;
		aspect-ratio: 16 / 9;
	}

	.pg-roi-calculator__intro-panel {
		position: static;
		width: auto;
		max-width: none;
	}
}

/* --- Disclaimer --- */
.pg-roi-calculator__disclaimer {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	background: #EEF3FB;
	border-radius: var(--radius);
	padding: var(--space-sm);
}

.pg-roi-calculator__disclaimer-icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--color-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 2px;
}

.pg-roi-calculator__disclaimer-icon-svg {
	width: 40px;
	height: 40px;
	color: #FFFFFF;
}

.pg-roi-calculator__disclaimer-text {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--color-text);
}

.pg-roi-calculator__disclaimer-text p {
	margin: 0 0 8px;
}

.pg-roi-calculator__disclaimer-text p:last-child {
	margin-bottom: 0;
}

/* --- Champ "Company name" --- */
.pg-roi-calculator__field-row--company {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	flex-wrap: wrap;
}

.pg-roi-calculator__field-row--company label {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--color-text);
}

.pg-roi-calculator__text-input {
	flex: 1 1 260px;
	max-width: 360px;
	padding: 0.55rem 0.75rem;
	border: 1px solid #D7DEEA;
	border-radius: 6px;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	color: var(--color-text);
}

/* --- Cartes STEP 1 / STEP 2 --- */
.pg-roi-calculator__card {
	background: var(--color-white);
	border: 1px solid #E6EAF2;
	border-radius: var(--radius);
	padding: var(--space-md);
	box-shadow: 0 8px 24px rgba(20, 56, 104, 0.06);
}

.pg-roi-calculator__card-header {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-sm);
	padding-bottom: var(--space-sm);
	border-bottom: 2px solid var(--color-yellow-warm);
}

.pg-roi-calculator__step-badge {
	flex-shrink: 0;
	width: 50px;
	height: 50px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--color-blue);
	color: #FFFFFF;
	border-radius: 8px;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.125rem;
	line-height: 1.1;
}

.pg-roi-calculator__step-badge small {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.pg-roi-calculator__card-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--color-blue-primary);
	margin: 0;
}

.pg-roi-calculator__col-headers {
	display: grid;
	grid-template-columns: 3fr 1fr;
	gap: var(--space-sm);
	margin-bottom: var(--space-xs);
}

.pg-roi-calculator__col-header {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--color-text-soft);
}

/* Colonne "AUTOMATIC CALCULATION" : même barre verticale grise que les
   lignes ci-dessous (cf. .pg-roi-calculator__row-output), pour que la
   démarcation coure sans interruption depuis l'en-tête. */
.pg-roi-calculator__col-header:last-child:not(:only-child) {
	border-left: 1px solid #E1E5EC;
	padding-left: var(--space-sm);
}

.pg-roi-calculator__col-header small {
	display: block;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.85rem;
	color: #8993A6;
}

.pg-roi-calculator__col-header-icon {
	width: 25px;
	height: 25px;
	color: var(--color-blue);
	flex-shrink: 0;
}

.pg-roi-calculator__rows {
	display: flex;
	flex-direction: column;
}

.pg-roi-calculator__row {
	display: grid;
	grid-template-columns: 3fr 1fr;
	gap: var(--space-sm);
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid #EEF1F7;
}

.pg-roi-calculator__row:last-child {
	border-bottom: none;
}

/* Libellé + champ alignés sur la même ligne, le champ juste après le
   texte du libellé (comme la maquette) — pas une colonne à largeur
   fixe plaquée contre la bordure droite, qui écrasait le suffixe
   "years" et n'affichait pas le placeholder "Enter amount" en entier.
   Chaque type de champ garde sa propre largeur, dimensionnée à son
   contenu (voir .pg-roi-calculator__select /
   .pg-roi-calculator__number-input plus bas). Le libellé peut passer
   sur 2 lignes si besoin (flex-wrap), le champ ne rétrécit jamais. */
.pg-roi-calculator__row-input {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--space-sm);
}

.pg-roi-calculator__row-input label {
	/* grow:0 — le libellé ne s'étire pas pour occuper l'espace libre
	   (ce qui plaquait le champ contre le bord droit) ; il ne prend que
	   la place dont son texte a besoin, et repasse sur 2 lignes plutôt
	   que de pousser le champ hors de vue si la ligne est trop étroite. */
	flex: 0 1 auto;
	min-width: 0;
	font-size: 0.9rem;
	color: var(--color-blue);
	margin-bottom: 0;
}

.pg-roi-calculator__row-input .pg-roi-calculator__select,
.pg-roi-calculator__row-input .pg-roi-calculator__input-inline {
	flex: 0 0 auto;
}

/* .pg-roi-calculator__text-input (Company name) was originally only used
   in the standalone .field-row--company row, with its own
   `flex: 1 1 260px; max-width: 360px;` sized for a horizontal flex row.
   Now that it also lives inside .pg-roi-calculator__row-input (which
   flips to flex-direction:column on narrow screens, see the ≤700px
   query below), that flex-basis was read as a HEIGHT instead of a
   width, producing a huge ~260px tall input box. Reset it here so this
   field behaves like every other input in a STEP card. */
.pg-roi-calculator__row-input .pg-roi-calculator__text-input {
	flex: 0 0 auto;
	max-width: none;
}

/* Alignement vertical demandé sur 2 groupes de lignes : le libellé
   reçoit une largeur fixe partagée par les lignes du même groupe (au
   lieu de s'ajuster à son propre texte), pour que leurs champs
   démarrent tous à la même position — le "point de départ" étant le
   libellé le plus long du groupe.
   --align-a : years / currency / valuation / turnover.
   --align-b : bankruptcy % / private % / public % (le plus long,
   "privately owned company...", passe volontairement sur 2 lignes). */
.pg-roi-calculator__row-input--align-a label {
	flex: 0 0 430px;
}

.pg-roi-calculator__row-input--align-b label {
	flex: 0 0 600px;
}

.pg-roi-calculator__row--calc-only .pg-roi-calculator__row-input {
	display: flex;
	align-items: center;
}

.pg-roi-calculator__calc-label {
	font-size: 0.9rem;
	/* font-style: italic; */
	color: var(--color-text);
}

/* Art. 83 legal reference (in EUR) under the "Potential Maximal GDPR
   fine" label: own line, smaller and muted, wraps freely. */
.pg-roi-calculator__legal-ref {
	display: block;
	margin-top: 2px;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--color-text-soft);
}

/* "Converted from EUR at indicative exchange rates…" note under the
   calculator — shown only when the selected currency is not EUR. */
.pg-roi-calculator__currency-note {
	margin: var(--space-sm) 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--color-text-soft);
	text-align: center;
}

/* Small "(i)" badge appended to a calc-label, with a CSS-only tooltip
   (no JS) showing the calculation formula on hover/keyboard focus. */
.pg-roi-calculator__info-badge {
	display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    border-radius: 50%;
    background: rgba(31, 82, 163, 0.12);
    color: var(--color-blue);
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 22px;
    vertical-align: middle;
    cursor: help;
    position: relative;
    text-align: center;
    padding: 0;
	/*
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin-left: 4px;
	border-radius: 50%;
	background: rgba(31, 82, 163, 0.12);
	color: var(--color-blue);
	font-family: var(--font-body);
	font-style: normal;
	font-weight: 700;
	font-size: 0.65rem;
	line-height: 1;
	vertical-align: middle;
	cursor: help;
	position: relative; */
}

.pg-roi-calculator__info-badge::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 130%;
	left: 50%;
	transform: translateX(-50%);
	background: var(--color-blue-deep);
	color: #FFFFFF;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 0.75rem;
	font-weight: 500;
	font-style: normal;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease;
	pointer-events: none;
	z-index: 5;
}

.pg-roi-calculator__info-badge:hover::after,
.pg-roi-calculator__info-badge:focus-visible::after {
	opacity: 1;
	visibility: visible;
}

/* Mobile : l'infobulle ancrée sur le badge déborde de l'écran (texte
   long, badge parfois près du bord). On la sort du flux et on la fixe
   au centre du viewport, largeur limitée + texte sur plusieurs lignes,
   pour qu'elle tienne toujours entièrement à l'écran. */
@media (max-width: 700px) {
	.pg-roi-calculator__info-badge::after {
		position: fixed;
		top: 50%;
		left: 50%;
		right: auto;
		bottom: auto;
		transform: translate(-50%, -50%);
		width: min(80vw, 320px);
		max-width: 80vw;
		white-space: normal;
		text-align: center;
		line-height: 1.4;
		padding: 12px 16px;
		box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
		z-index: 9999;
	}

	/* Sur écran tactile, le premier tap donne le focus (pas forcément
	   :focus-visible) — on déclenche aussi sur :focus. */
	.pg-roi-calculator__info-badge:focus::after {
		opacity: 1;
		visibility: visible;
	}
}

.pg-roi-calculator__row-output {
	background: #F3F5F9;
	border-radius: 6px;
	padding: 0.55rem 0.75rem;
	padding-left: var(--space-sm);
	font-size: 0.875rem;
	color: #8993A6;
	text-align: right;
}

.pg-roi-calculator__row-output--calculated {
	font-weight: 600;
	color: var(--color-blue-deep);
	background-color: #c6dcf98f
	/* background-color: #ffffe0 */
}

/* Devise affichée à droite de la valeur calculée, à l'intérieur du
   cadre : plus légère que le montant, sans casser sur une 2e ligne.
   opacity (plutôt qu'une couleur fixe) pour rester lisible aussi sur
   les lignes à fond foncé (Total Hidden Costs / Total gross saving). */
.pg-roi-calculator__output-unit {
	margin-left: 0.35em;
	font-weight: 400;
	font-size: 0.85em;
	opacity: 0.65;
	white-space: nowrap;
}

/* Lignes "YOUR INPUT" sans résultat calculé (années, devise, montants
   saisis, %...) : leur case "AUTOMATIC CALCULATION" n'affiche jamais
   qu'un tiret fixe, jamais mis à jour par le JS — pur bruit visuel.
   On la rend invisible (fond + texte) tout en gardant sa bordure
   gauche, pour que la barre verticale de démarcation reste continue. */
.pg-roi-calculator__row-output:not(.pg-roi-calculator__row-output--calculated) {
	background: transparent;
	color: transparent;
}

.pg-roi-calculator__input-inline {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pg-roi-calculator__select,
.pg-roi-calculator__number-input {
	width: 110px;
	padding: 0.5rem 0.65rem;
	border: 1px solid #D7DEEA;
	border-radius: 6px;
	font-family: var(--font-body);
	font-size: 0.875rem;
	color: var(--color-text);
	background: var(--color-white);
}

/* Montants (valuation, turnover, budget) : le placeholder "Enter
   amount" a besoin de plus de place que les champs pourcentage. */
.pg-roi-calculator__number-input--wide {
	width: 190px;
}

/* Valeurs numériques (montants "X XXX XXX", pourcentages, nombre
   d'années) alignées à droite : les chiffres restent au bord du
   suffixe (CHF, %, years) et les groupes de milliers restent lisibles. */
.pg-roi-calculator__number-input {
	text-align: right;
}

/* Sébastien : pas de flèches +/- sur les champs "years" et "%" —
   saisie numérique libre au clavier uniquement. */
.pg-roi-calculator__number-input::-webkit-outer-spin-button,
.pg-roi-calculator__number-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.pg-roi-calculator__number-input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.pg-roi-calculator__input-suffix {
	flex-shrink: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #8993A6;
}

.pg-roi-calculator__subheading {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--color-blue);
	margin: var(--space-sm) 0 var(--space-xs);
}

/* Used when the question is embedded directly in a
   .pg-roi-calculator__row-input--align-b row (so the % field sits on the
   same line) instead of standing alone as a full-width block above the
   row — the shared "label { flex: 0 0 450px }" rule from --align-b caps
   its width and lets the long question text wrap within that column. */
.pg-roi-calculator__subheading--inline {
	margin: 0;
}

.pg-roi-calculator__row--highlight,
.pg-roi-calculator__row--positive {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-sm);
	border-radius: 8px;
	padding: 0.85rem 1rem;
	margin-top: 8px;
}

.pg-roi-calculator__row--highlight {
	background: var(--color-blue-deep);
}

.pg-roi-calculator__row--positive {
	background: #E6F6EC;
}

.pg-roi-calculator__row--highlight .pg-roi-calculator__calc-label {
	color: #FFFFFF;
	font-style: normal;
	font-weight: 700;
}

.pg-roi-calculator__row--positive .pg-roi-calculator__calc-label {
	color: #166B3C;
	font-style: normal;
	font-weight: 700;
}

.pg-roi-calculator__row--highlight .pg-roi-calculator__row-output {
	background: transparent;
	color: #FFFFFF;
	font-weight: 800;
	font-size: 1rem;
	padding: 0;
}

.pg-roi-calculator__row--positive .pg-roi-calculator__row-output {
	background: transparent;
	color: #166B3C;
	font-weight: 800;
	font-size: 1rem;
	padding: 0;
}

.pg-roi-calculator__formula-bar {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--color-bg);
	border-radius: 8px;
	padding: var(--space-sm);
	margin-top: var(--space-sm);
}

.pg-roi-calculator__formula-header {
	display: flex;
	align-items: center;
	gap: 10px;
}

.pg-roi-calculator__formula-icon-svg {
	width: 30px;
	height: 30px;
	color: var(--color-blue);
	flex-shrink: 0;
}

.pg-roi-calculator__formula-text {
	font-size: 0.9rem;
	color: var(--color-blue);
	margin: 0;
}

.pg-roi-calculator__formula-pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.pg-roi-calculator__pill {
	background: var(--color-white);
	border: 1px solid #D7DEEA;
	border-radius: 8px;
	padding: 4px 12px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-text);
	white-space: nowrap;
}

.pg-roi-calculator__pill--result {
	background: #3677db;
	/* border-color: var(--color-blue); */
	color: #FFFFFF;
	min-width: 120px;
	text-align: center;
}

.pg-roi-calculator__op {
	font-weight: 700;
	color: #8993A6;
}

/* --- Sub-section titles ("2.1 Administrative Fine Risk...") inside a
   STEP card — smaller than the card's own STEP title, same blue/bold
   family so it reads as a nested heading, not a new visual system. --- */
.pg-roi-calculator__subsection-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--color-blue);
	margin: var(--space-md) 0 var(--space-xs);
}

.pg-roi-calculator__rows + .pg-roi-calculator__subsection-title {
	margin-top: var(--space-md);
}

/* --- Secondary helper text under a field (e.g. company valuation
   guidance, financial-loss-% guidance) --- */
.pg-roi-calculator__helper-text {
	font-size: 0.8125rem;
	color: var(--color-text-soft);
	margin: 4px 0 0;
	padding-bottom: 10px;
	line-height: 1.5;
	border-bottom: 1px solid #EEF1F7;
}

/* The helper text belongs to the row right above it (it explains that
   field), so the row/field separator line must sit below the helper
   text, not between the field and its own explanation. */
.pg-roi-calculator__row:has( + .pg-roi-calculator__helper-text ) {
	border-bottom: none;
}

/* --- Lightweight info note (STEP 3 risk-reduction explanation) reusing
   the same icon+text pairing as .pg-roi-calculator__formula-header --- */
.pg-roi-calculator__note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: var(--color-bg);
	border-radius: 8px;
	padding: var(--space-sm);
	margin: var(--space-xs) 0 var(--space-sm);
}

.pg-roi-calculator__note-icon {
	width: 22px;
	height: 22px;
	color: var(--color-blue);
	flex-shrink: 0;
	margin-top: 1px;
}

.pg-roi-calculator__note-text {
	font-size: 0.85rem;
	color: var(--color-blue);
	margin: 0;
}

/* --- "Total Hidden Costs" / "Total Cost Saving" breakdown mini-list,
   shown just above their dark-blue total bar --- */
.pg-roi-calculator__breakdown {
	background: var(--color-bg);
	border-radius: 8px;
	padding: var(--space-sm);
	margin-top: var(--space-sm);
}

.pg-roi-calculator__breakdown-title {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--color-blue);
	margin-bottom: 8px;
}

.pg-roi-calculator__breakdown-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-sm);
	padding: 4px 0;
	font-size: 0.875rem;
	color: var(--color-text);
}

/* --- Boutons d'action --- */
.pg-roi-calculator__actions {
	/* Deux boutons centrés horizontalement et de largeur identique : la
	   grille est dimensionnée sur son contenu (width: fit-content) puis
	   centrée (margin-inline: auto) ; les colonnes 1fr égalisent la
	   largeur des deux boutons sur celle du plus large. */
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-sm);
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

.pg-roi-calculator__action-btn {
	/* Largeur pilotée par la grille .pg-roi-calculator__actions ;
	   display:flex ici ne sert qu'à disposer l'icône + le texte. */
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0.85rem 1.25rem;
	border-radius: var(--radius);
	font-family: var(--font-body);
	text-decoration: none;
	cursor: pointer;
	border: none;
	text-align: left;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pg-roi-calculator__action-btn:hover,
.pg-roi-calculator__action-btn:focus-visible {
	transform: translateY(-1px);
}

.pg-roi-calculator__action-btn span {
	display: flex;
	flex-direction: column;
	font-size: 0.95rem;
}

.pg-roi-calculator__action-btn small {
	font-weight: 400;
	font-size: 0.75rem;
	opacity: 0.85;
}

.pg-roi-calculator__action-btn-icon {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
}

.pg-roi-calculator__action-btn--primary {
	background: var(--color-blue);
	color: #FFFFFF;
	font-weight: 700;
}

.pg-roi-calculator__action-btn--secondary {
	background: var(--color-white);
	border: 1px solid #D7DEEA;
	color: var(--color-blue-deep);
	font-weight: 700;
}

#rc-print-btn {
	background: lightyellow;
}

.pg-roi-calculator__error-message {
	background: #FDEDEC;
	border: 1px solid #E57373;
	color: #B3261E;
	border-radius: var(--radius);
	padding: var(--space-sm);
	font-size: 0.875rem;
	font-weight: 600;
}

/* Field flagged as invalid or as an empty required field
   (aria-invalid="true", set by the JS): same red as the error message
   above, border only — no layout change. Covers the currency select. */
.pg-roi-calculator__number-input[aria-invalid="true"],
.pg-roi-calculator__select[aria-invalid="true"] {
	border-color: #E57373;
	box-shadow: 0 0 0 1px #E57373;
}

/* Decimal field (input + suffix) with its inline error message stacked
   underneath, left-aligned with the input. Takes the place the bare
   .input-inline had in the row (flex: 0 0 auto). */
.pg-roi-calculator__field {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 0 0 auto;
}

/* Inline error — same red as .pg-roi-calculator__error-message (no
   colour token exists for errors; --color-red-negative is too light
   for small text on white). Hidden via [hidden] when there is no error,
   so no empty space is reserved. width: 0 + min-width: 100% makes the
   message wrap within the input + suffix width instead of widening the
   column (which would squeeze labels sized flex: 0 1 auto). */
.pg-roi-calculator__field-error {
	width: 0;
	min-width: 100%;
	margin: 4px 0 0;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.35;
	color: #B3261E;
	text-align: left;
}


@media (max-width: 1440px) {
	.pg-roi-calculator__row-input--align-a label {
		flex: 0 0 380px;
	}

	.pg-roi-calculator__row-input--align-b label {
		flex: 0 0 550px;
	}
}

@media (max-width: 1100px) {
	.pg-roi-calculator__row-input--align-b label {
		flex: 0 0 450px;
	}
}


@media (max-width: 1000px) {
	.pg-roi-calculator__row-input--align-b label {
		flex: 0 0 370px;
	}
}



@media (max-width: 700px) {
	.pg-roi-calculator__row {
		grid-template-columns: 1fr;
	}

	.pg-roi-calculator__row-input {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.pg-roi-calculator__row-input .pg-roi-calculator__select,
	.pg-roi-calculator__row-input .pg-roi-calculator__input-inline,
	.pg-roi-calculator__row-input .pg-roi-calculator__text-input,
	.pg-roi-calculator__row-input .pg-roi-calculator__field {
		flex: 0 0 auto;
		width: 100%;
	}

	/* Le select "years" a un suffixe texte à côté de lui à l'intérieur de
	   .input-inline — lui laisser aussi width:100% (hérité de la règle
	   ci-dessus, qui cible tout .select dans .row-input, y compris ceux
	   nichés dans .input-inline) le fait déborder par-dessus "years". On
	   le repasse en répartition flexible : le select prend l'espace
	   restant, le suffixe garde sa largeur naturelle. */
	.pg-roi-calculator__input-inline .pg-roi-calculator__select,
	.pg-roi-calculator__input-inline .pg-roi-calculator__number-input {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}

	/* En colonne (mobile), une largeur fixe sur le libellé s'appliquerait
	   à sa hauteur, pas à sa largeur — on revient à une largeur naturelle. */
	.pg-roi-calculator__row-input--align-a label,
	.pg-roi-calculator__row-input--align-b label {
		flex-basis: auto;
	}

	/* Lignes sans résultat calculé : sur desktop elles sont rendues
	   invisibles (fond/texte transparents) mais gardent leur place pour
	   la barre verticale — inutile en colonne mobile (pas de barre à
	   maintenir), donc on les retire complètement pour ne pas laisser un
	   espace vide sous chaque champ. Les lignes de total (--highlight /
	   --positive) portent aussi .row-output sans --calculated mais leur
	   valeur DOIT rester visible : on les exclut. */
	.pg-roi-calculator__row:not(.pg-roi-calculator__row--highlight):not(.pg-roi-calculator__row--positive) .pg-roi-calculator__row-output:not(.pg-roi-calculator__row-output--calculated) {
		display: none;
	}

	/* Ligne de total en colonne : le libellé au-dessus, la valeur
	   (montant + devise) en dessous, sans césure au milieu du nombre. */
	.pg-roi-calculator__row--highlight,
	.pg-roi-calculator__row--positive {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.pg-roi-calculator__row--highlight .pg-roi-calculator__row-output,
	.pg-roi-calculator__row--positive .pg-roi-calculator__row-output {
		white-space: nowrap;
	}

	/* Récap "Total ... Estimates" : garder "montant + devise" d'un seul
	   tenant à droite, c'est le libellé qui passe sur plusieurs lignes. */
	.pg-roi-calculator__breakdown-row > span:last-child {
		flex-shrink: 0;
		white-space: nowrap;
	}

	.pg-roi-calculator__row-output {
		text-align: left;
		border-left: none;
		padding-left: 0.75rem;
	}

	/* "YOUR INPUT" / "AUTOMATIC CALCULATION" perdent leur sens de
	   colonnes une fois empilés (le résultat de chaque champ, s'il y en
	   a un, apparaît juste en dessous de lui, pas regroupé à part) — on
	   masque l'en-tête entier plutôt que de l'afficher à moitié cassé. */
	.pg-roi-calculator__col-headers {
		display: none;
	}

	/* Empilés en pleine largeur sur mobile. */
	.pg-roi-calculator__actions {
		grid-template-columns: 1fr;
		width: auto;
	}
}

/* --- Sidebar "Calculation Summary" + "Important" (injectées via le
   hook europrivacy_sidebar_extra_blocks, cf. sidebar-context-nav.php) --- */
.pg-roi-calculator__summary-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pg-roi-calculator__summary-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding-bottom: 12px;
	border-bottom: 1px solid #EEF1F7;
}

.pg-roi-calculator__summary-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.pg-roi-calculator__summary-icon {
	flex-shrink: 0;
	width: 25px;
	height: 25px;
	margin-top: 2px;
}

.pg-roi-calculator__summary-icon--warning {
	color: #D97706;
}

.pg-roi-calculator__summary-icon--success {
	color: #1E8E5A;
}

.pg-roi-calculator__summary-icon--info {
	color: var(--color-blue);
}

.pg-roi-calculator__summary-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.pg-roi-calculator__summary-label {
	font-size: 0.8rem;
	color: var(--color-text-soft);
}

.pg-roi-calculator__summary-value {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--color-blue-deep);
}

.pg-roi-calculator__summary-badge {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	align-self: flex-start;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 2px 8px;
	border-radius: 999px;
}

.pg-roi-calculator__summary-badge small {
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	opacity: 0.75;
}

.pg-roi-calculator__summary-badge--calculated {
	background: rgba(31, 82, 163, 0.1);
	color: var(--color-blue);
}

.pg-roi-calculator__summary-badge--input {
	background: rgba(30, 142, 90, 0.12);
	color: #1E8E5A;
}

.pg-roi-calculator__important-block .side-block-title {
	background: var(--color-yellow-warm);
	color: var(--color-blue-deep);
}

.pg-roi-calculator__important-text {
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--color-text);
}

.pg-roi-calculator__important-text p {
	margin: 0 0 8px;
}

.pg-roi-calculator__important-text p:last-child {
	margin-bottom: 0;
}


@media (max-width: 1440px) {
	.pg-roi-calculator__summary-icon {
		width: 20px;
		height: 20px;
	}

	.pg-roi-calculator__summary-label {
		font-size: 0.75rem;
	}

}




/* --- Impression : n'affiche que le contenu du calculateur --- */
@media print {
	#site-header,
	.breadcrumb,
	.sidebar-col,
	.pg-roi-calculator__actions,
	.pg-roi-calculator__error-message,
	.site-footer {
		display: none !important;
	}

	.page-wrap {
		display: block !important;
	}

	.pg-roi-calculator__card {
		box-shadow: none;
		break-inside: avoid;
	}
}

/* =========================================================
   Contact page (page-contact.php)
   ========================================================= */

/* Contact reuses .page-wrap for width/padding but doesn't have a second
   grid child (no generic sidebar-context-nav) — collapse its 2-column
   grid down to one so .main-col takes the full width. */
.page-wrap.page-contact {
	grid-template-columns: 1fr;
}

.ep-contact-subtitle {
	color: var(--color-text-soft);
	max-width: 640px;
	margin: 0 0 var(--space-sm);
}

.ep-contact-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 2rem;
	align-items: start;
}

.ep-contact-form-panel {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	padding: 2rem;
}

.ep-contact-form-title {
	color: var(--color-blue);
	margin: 0 0 0.5rem;
}

.ep-contact-form-description {
	color: var(--color-text-soft);
	margin: 0 0 1.5rem;
}

.ep-contact-form-description p:last-child {
	margin-bottom: 0;
}

.ep-contact-form-description a {
	color: var(--color-blue);
}

.ep-contact-form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.ep-contact-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ep-contact-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

.ep-contact-field label {
	display: block;
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 0.4rem;
	font-size: 0.9rem;
}

.ep-contact-required {
	color: var(--color-red-negative);
}

.ep-contact-field input,
.ep-contact-field select,
.ep-contact-field textarea {
	width: 100%;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	font: inherit;
	color: var(--color-text);
	background: var(--color-white);
}

.ep-contact-field input:focus,
.ep-contact-field select:focus,
.ep-contact-field textarea:focus {
	outline: 2px solid var(--color-blue);
	outline-offset: 1px;
}

.ep-contact-field input.has-error,
.ep-contact-field select.has-error,
.ep-contact-field textarea.has-error {
	border-color: var(--color-red-negative);
}

/* Category field only: highlighted once an option is selected
   (class toggled by contact-form.js). */
#ep-contact-category.has-value {
	background-color: #0388eb21;
}

.ep-contact-error {
	display: block;
	color: var(--color-red-negative);
	font-size: 0.8rem;
	margin-top: 0.3rem;
	min-height: 1em;
}

.ep-contact-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.9rem;
	color: var(--color-text-soft);
}

.ep-contact-consent input {
	margin-top: 0.2rem;
}

.ep-contact-consent a {
	color: var(--color-blue);
}

.ep-contact-submit {
	align-self: flex-start;
	background: var(--color-yellow-warm);
	color: var(--color-blue-deep);
	border: none;
	border-radius: 8px;
	padding: 0.8rem 1.75rem;
	font-weight: 700;
	cursor: pointer;
}

.ep-contact-submit:hover,
.ep-contact-submit:focus-visible {
	filter: brightness(0.95);
}

.ep-contact-submit.is-loading {
	opacity: 0.7;
	cursor: wait;
}

.ep-contact-form-feedback {
	font-weight: 600;
	margin: 0;
}

.ep-contact-form-feedback.is-success {
	color: var(--color-blue);
}

.ep-contact-form-feedback.is-error {
	color: var(--color-red-negative);
}

.ep-contact-sidebar {
	background: linear-gradient(160deg, var(--color-blue) 0%, var(--color-blue-deep) 100%);
	color: var(--color-white);
	border-radius: 12px;
	padding: 1.75rem;
}

.ep-contact-sidebar-title {
	color: var(--color-white);
	margin: 0 0 1.25rem;
	position: relative;
	padding-bottom: 0.75rem;
}

.ep-contact-sidebar-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2.5rem;
	height: 3px;
	background: var(--color-yellow-warm);
}

.ep-contact-sidebar-list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.ep-contact-sidebar-item {
	display: flex;
	gap: 0.75rem;
}

.ep-contact-sidebar-icon {
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.12);
	border-radius: 50%;
}

.ep-contact-sidebar-icon .icon {
	width: 1.1rem;
	height: 1.1rem;
	color: var(--color-white);
}

.ep-contact-sidebar-label {
	color: var(--color-white);
	font-size: 1rem;
	margin: 0 0 0.35rem;
}

.ep-contact-sidebar-value {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.9rem;
	margin: 0;
	line-height: 1.5;
}

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

@media (max-width: 600px) {
	.ep-contact-row {
		grid-template-columns: 1fr;
	}
}


/* =========================================================
   Homepage — News Feed block (block-homepage-news-feed.php)
   ========================================================= */

.block-homepage-news-feed {
	background: var(--color-bg);
	padding: var(--space-lg) 0;
}

.block-homepage-news-feed__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 2rem;
	color: var(--color-blue-heading);
	text-align: center;
	margin: 0 0 var(--space-md) 0;
}

.block-homepage-news-feed__columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-md);
	/* Default grid stretch: both columns match the row's tallest card,
	   even when one feed has noticeably more/longer titles than the other. */
	align-items: stretch;
}

.block-homepage-news-feed__column {
	display: flex;
	flex-direction: column;
	background: var(--color-white);
	border-radius: var(--radius-lg, 16px);
	box-shadow: 0 4px 20px rgba(20, 56, 104, 0.08);
	padding: var(--space-md);
}

.block-homepage-news-feed__column-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.375rem;
	color: var(--color-blue);
	margin: 0 0 var(--space-sm) 0;
	position: relative;
	padding-bottom: var(--space-xs);
	display: inline-block;
}

.block-homepage-news-feed__column-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 32px;
	height: 3px;
	background: var(--color-yellow-warm);
	border-radius: var(--radius-pill);
}

.block-homepage-news-feed__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.block-homepage-news-feed__item {
	background: #00adef21;
	border-left: 4px solid var(--color-yellow-warm);
	overflow: hidden;
}

.block-homepage-news-feed__item-link {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: 0.875rem 1rem;
	text-decoration: none;
	color: inherit;
}

.block-homepage-news-feed__item-date {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.1;
	min-width: 2.75rem;
}

.block-homepage-news-feed__item-date-month {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-blue);
}

.block-homepage-news-feed__item-date-day {
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--color-blue-deep);
}

.block-homepage-news-feed__item-date-year {
	font-size: 0.6875rem;
	color: var(--color-text-soft);
}

.block-homepage-news-feed__item-title {
	flex: 1;
	color: var(--color-blue-deep);
	font-weight: 600;
	line-height: 1.4;
}

.block-homepage-news-feed__item-arrow {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-blue);
	transition: transform 0.15s ease;
}

.block-homepage-news-feed__item-link:hover .block-homepage-news-feed__item-arrow,
.block-homepage-news-feed__item-link:focus-visible .block-homepage-news-feed__item-arrow {
	transform: translateX(3px);
}

.block-homepage-news-feed__item-link:hover .block-homepage-news-feed__item-title,
.block-homepage-news-feed__item-link:focus-visible .block-homepage-news-feed__item-title {
	text-decoration: underline;
}

@media (max-width: 700px) {
	.block-homepage-news-feed__columns {
		grid-template-columns: 1fr;
	}
}


/* =========================================================
   BLOC — MEDIA + TEXT CARDS (image + titre + texte riche + flèche)
   ========================================================= */

.block-media-text-cards__heading {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.375rem;
	color: var(--color-blue-deep);
	margin: 0 0 var(--space-sm) 0;
}

.block-media-text-cards__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.block-media-text-cards__item {
	display: flex;
	align-items: stretch;
	gap: var(--space-md);
	background: var(--color-white);
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(20, 56, 104, 0.08);
	padding: var(--space-sm);
}

.block-media-text-cards__image {
	display: block;
	flex: 0 0 280px;
	border-radius: 12px;
	overflow: hidden;
}

.block-media-text-cards__image img {
	width: 100%;
	height: 100%;
	min-height: 180px;
	object-fit: cover;
	display: block;
	transition: transform 0.2s ease;
}

.block-media-text-cards__image:hover img,
.block-media-text-cards__image:focus-visible img {
	transform: scale(1.04);
}

.block-media-text-cards__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: var(--space-xs) var(--space-xs) var(--space-xs) 0;
}

.block-media-text-cards__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.375rem;
	color: var(--color-blue);
	margin: 0 0 var(--space-xs) 0;
}

.block-media-text-cards__title a {
	color: inherit;
	text-decoration: none;
}

.block-media-text-cards__title a:hover,
.block-media-text-cards__title a:focus-visible {
	text-decoration: underline;
}

.block-media-text-cards__description {
	color: var(--color-text-soft);
	line-height: 1.65;
	margin-bottom: var(--space-sm);
}

.block-media-text-cards__description p {
	margin: 0 0 0.75rem 0;
}

.block-media-text-cards__description p:last-child {
	margin-bottom: 0;
}

.block-media-text-cards__description a {
	color: var(--color-blue);
}

.block-media-text-cards__arrow {
	align-self: flex-end;
	margin-top: auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-yellow-warm);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.15s ease;
}

.block-media-text-cards__arrow svg {
	width: 16px;
	height: 16px;
}

.block-media-text-cards__arrow:hover,
.block-media-text-cards__arrow:focus-visible {
	transform: scale(1.08);
}

@media (max-width: 700px) {
	.block-media-text-cards__item {
		flex-direction: column;
	}

	.block-media-text-cards__image {
		flex-basis: auto;
	}

	.block-media-text-cards__image img {
		min-height: 160px;
	}

	.block-media-text-cards__body {
		padding: 0;
	}
}


/* =========================================================
   Footer — CTA buttons row (Share / Welcome Pack / Partners Offers / Contact Us)
   ========================================================= */

/* The 4 CTA buttons are direct grid items of .footer-columns itself
   (see template-parts/site-footer.php) — same grid as the brand column
   and the 4 link columns, not a separate nested grid. .footer-columns'
   default align-items: stretch already makes each button fill its
   row's height (e.g. "Share"/"Contact Us" are one line, "Request a
   Welcome Pack" wraps to two — all four still match). */
.footer-cta-row__item {
	display: flex;
}

.footer-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	background: var(--color-white);
	color: var(--color-blue);
	border: none;
	border-radius: 12px;
	padding: 0 1.25rem;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.9rem;
	line-height: 1.25;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.footer-cta-btn:hover,
.footer-cta-btn:focus-visible {
	background: var(--color-yellow-warm);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(20, 56, 104, 0.25);
}

.footer-cta-btn__icon {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
}

/* Blue rounded-square badge behind the leading icon (LinkedIn, gift,
   handshake, mail) — matches the mockup. Not used for the plain
   copy-link icon inside the "Share" button, which sits directly on
   the yellow pill with no badge. */
.footer-cta-btn__icon-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 7px;
	background: var(--color-blue);
	color: var(--color-white);
	flex-shrink: 0;
}

.footer-cta-btn__icon-badge .footer-cta-btn__icon {
	width: 18px;
	height: 18px;
}

/* Custom uploaded icon (Footer Settings > Custom Icons) — shown exactly
   as uploaded, own colors/background if any, no forced blue badge. Just
   capped to a sensible size so an oversized upload doesn't blow up the
   button's height. */
.footer-cta-btn__icon-custom {
	display: block;
	width: 30px;
	height: 30px;
	object-fit: contain;
	flex-shrink: 0;
}

/* "Share" — two click zones (LinkedIn / copy) inside one pill */
.footer-cta-btn--share {
	padding: 0;
	/* No overflow: hidden here (would clip the copy button's tooltip,
	   which is absolutely positioned above the pill) — instead each
	   inner zone rounds its own outer corner to match the pill shape. */
}

.footer-cta-btn__linkedin {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1rem 0.7rem 1.25rem;
	color: inherit;
	text-decoration: none;
	border-radius: 12px 0 0 12px;
}

.footer-cta-btn__divider {
	width: 1px;
	align-self: stretch;
	background: rgba(31, 82, 163, 0.25);
}

.footer-cta-btn__copy {
	position: relative;
	display: inline-flex;
	align-items: center;
	/* justify-content: center; */
	align-self: stretch;
	width: 44px;
	background: none;
	border: none;
	border-radius: 0 12px 12px 0;
	color: inherit;
	cursor: pointer;
	padding: 0;
}

.footer-cta-btn__copy-icon--copied {
	display: none;
}

.footer-cta-btn__copy.is-copied .footer-cta-btn__copy-icon--default {
	display: none;
}

.footer-cta-btn__copy.is-copied .footer-cta-btn__copy-icon--copied {
	display: inline-flex;
}

/* Tooltips: "Copy link" on hover/focus, "Link copied!" for a couple
   seconds after the click (driven by the same .is-copied class as the
   icon swap above, not by :hover — it must show even without the
   pointer staying over the button). */
.footer-cta-btn__tooltip {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translate(-50%, 4px);
	margin-bottom: 8px;
	background: var(--color-blue-deep);
	color: var(--color-white);
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
	padding: 0.35rem 0.65rem;
	border-radius: 6px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 5;
}

.footer-cta-btn__tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: var(--color-blue-deep);
}

.footer-cta-btn__copy:hover .footer-cta-btn__tooltip--default,
.footer-cta-btn__copy:focus-visible .footer-cta-btn__tooltip--default {
	opacity: 1;
	transform: translate(-50%, 0);
}

.footer-cta-btn__copy.is-copied .footer-cta-btn__tooltip--default {
	opacity: 0;
}

.footer-cta-btn__copy.is-copied .footer-cta-btn__tooltip--copied {
	opacity: 1;
	transform: translate(-50%, 0);
}

@media (max-width: 640px) {
	.footer-cta-btn {
		width: 100%;
		min-height: 52px;
		justify-content: center;
	}

	.footer-cta-btn:not(.footer-cta-btn--share) {
		padding: 0.7rem 1.25rem;
	}

	.footer-cta-btn--share {
		justify-content: space-between;
	}
}