/* =========================================================
   CCSS — China Company Search Services
   V3 Hybrid (ALR) — V1 identity on V2 architecture
   EN GB · Hong Kong
   ========================================================= */

/* ---------- Fonts (local @font-face — offline ready) ----------
   Les fichiers sont les woff2 SOUS-ENSEMBLÉS de optfonts/, fabriqués par
   1. ALL/agent/faire_optfonts.py (latin étendu + vietnamien) : 25 à 60 Ko
   la graisse, contre 70 à 435 Ko pour les .ttf de fonts/. Les .ttf restent
   la source ; ils ne sont plus servis. Si une graisse manque dans optfonts/,
   relancer le script — ne pas remettre un .ttf ici.                     */
@font-face {
    font-family: 'Lato';
    src: url('../optfonts/Lato-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lato';
    src: url('../optfonts/Lato-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lato';
    src: url('../optfonts/Lato-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Lato';
    src: url('../optfonts/Lato-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lato';
    src: url('../optfonts/Lato-BoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Lato';
    src: url('../optfonts/Lato-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Serif Display';
    src: url('../optfonts/NotoSerifDisplay-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Serif Display';
    src: url('../optfonts/NotoSerifDisplay-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Serif Display';
    src: url('../optfonts/NotoSerifDisplay-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Serif Display';
    src: url('../optfonts/NotoSerifDisplay-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Serif Display';
    src: url('../optfonts/NotoSerifDisplay-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Serif Display';
    src: url('../optfonts/NotoSerifDisplay-BoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Copperplate CC';
    src: url('../optfonts/CopperplateCC-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Copperplate CC';
    src: url('../optfonts/CopperplateCC-Heavy.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ---------- Design tokens (V1 identity) ---------- */
:root {
    /* Brand palette (V1) */
    --brand-primary: #448ACC;
    --brand-primary-dark: #2E6BA8;
    --brand-primary-darker: #1E4F85;
    --brand-primary-light: #6BA6D8;
    --brand-accent: #DAE8F5;
    --brand-warm: #E67E22;
    --brand-warm-dark: #C75E0A;

    --text-dark: #3A3F48;
    --text-body: #495057;
    --text-muted: #5A6570; /* 5,3:1 sur #EEF3FA, 6:1 sur blanc — audit v4 (était #6C757D, 4,2:1) */

    --bg-white: #FFFFFF;
    --bg-light: #F8F9FA;
    --bg-subtle: #F0F5FA;
    --bg-border: #E0E6ED;

    --success: #198754;
    --warning: #FFC107;
    --danger: #DC3545;

    /* Typography */
    --font-body: 'Lato', 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Noto Serif Display', 'Georgia', 'Times New Roman', serif;
    --font-accent: 'Copperplate CC', 'Copperplate', 'Copperplate Gothic', serif;

    /* Radius & shadow */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    --shadow-sm: 0 1px 3px rgba(58, 63, 72, 0.08);
    --shadow-md: 0 4px 12px rgba(58, 63, 72, 0.10);
    --shadow-lg: 0 12px 32px rgba(58, 63, 72, 0.14);
    --shadow-xl: 0 20px 48px rgba(30, 79, 133, 0.22);

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: var(--font-body);
    color: var(--text-body);
    line-height: 1.65;
    background: var(--bg-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; height: auto; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--text-dark);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.25rem, 4.5vw, 3.25rem); font-weight: 900; }
h2 { font-size: clamp(1.75rem, 3vw, 2.4rem); }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.15rem; }
h5 { font-size: 1rem; }

p { margin-bottom: 1rem; }
a { color: var(--brand-primary); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--brand-primary-dark); }

ul, ol { padding-left: 1.25rem; margin-bottom: 1rem; }

/* ---------- Layout utilities ---------- */
.container { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; }
.container-narrow { max-width: 880px; margin: 0 auto; padding: 0 1.5rem; }
.text-center { text-align: center; }
.text-white { color: #fff !important; }
.text-primary { color: var(--brand-primary) !important; }
.text-muted { color: var(--text-muted) !important; }
.bg-white { background: var(--bg-white); }
.bg-light { background: var(--bg-light); }
.bg-subtle { background: var(--bg-subtle); }
.py-3 { padding: 2rem 0; }
.py-4 { padding: 3rem 0; }
.py-5 { padding: 4.5rem 0; }
.py-6 { padding: 6rem 0; }
.mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem; }
.mb-5 { margin-bottom: 3rem; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
}
.btn-sm { padding: 0.55rem 1.1rem; font-size: 0.875rem; }
.btn-primary {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
}
.btn-primary:hover { background: var(--brand-primary-dark); border-color: var(--brand-primary-dark); color: #fff; }
.btn-outline {
    background: transparent;
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-outline:hover { background: var(--brand-primary); color: #fff; }
.btn-outline-white {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,0.9);
}
.btn-outline-white:hover { background: #fff; color: var(--brand-primary-dark); }
.btn-accent {
    background: #fff;
    color: var(--brand-primary-dark);
    border-color: #fff;
}
.btn-accent:hover { background: var(--brand-accent); color: var(--brand-primary-darker); }
.btn-ghost {
    background: transparent;
    color: var(--text-dark);
    border-color: transparent;
}
.btn-ghost:hover { color: var(--brand-primary); }

/* Dedicated Log In button — warm accent pill, high visibility */
.btn-login {
    background: var(--brand-warm);
    color: #fff;
    border-color: var(--brand-warm);
    box-shadow: 0 4px 14px rgba(230, 126, 34, 0.35);
}
.btn-login:hover {
    background: var(--brand-warm-dark);
    border-color: var(--brand-warm-dark);
    color: #fff;
    box-shadow: 0 6px 18px rgba(230, 126, 34, 0.5);
    transform: translateY(-1px);
}

/* ---------- Header ---------- */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--bg-border);
    transition: background 0.35s ease, border-color 0.35s ease;
}

/* Two-row header inner (V1 style) — logo vertically centered across both rows */
.header-inner {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1.4rem 0 1.6rem;
}
.header-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}
.header-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transform: translateY(4px);
    position: relative;
    z-index: 3;
}
/* Lang-switcher promoted to first child of .header-top-row → pushed to the left */
.header-top-row > .lang-switcher {
    margin-right: auto;
}
.header-nav-row {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo img {
    height: 56px;
    width: auto;
    transition: opacity 0.3s ease, height 0.2s ease;
}
/* Progressive downsize so the logo never overlaps the nav row */
@media (max-width: 1200px) {
    .logo img { height: 48px; }
}
@media (max-width: 1024px) {
    .logo img { height: 42px; }
}
.logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.logo-light { display: none; }

.nav-menu {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    justify-content: center;
}
.nav-menu > li { position: relative; }
.nav-menu > li > a,
.nav-menu .dropdown-toggle {
    display: block;
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text-dark);
    cursor: pointer;
    transition: color 0.25s ease, background 0.25s ease;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.nav-menu > li > a:hover,
.nav-menu .dropdown-toggle:hover,
.nav-menu > li.active > a {
    color: var(--brand-primary);
    background: var(--bg-subtle);
}
.nav-menu .dropdown-toggle::after {
    content: '▾';
    margin-left: 0.3rem;
    font-size: 0.7rem;
    opacity: 0.6;
}

/* --- Header overlay variant (home page, fixed translucent, pages scroll behind) --- */
.header-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.35) 60%,
        rgba(0, 0, 0, 0.10) 90%,
        rgba(0, 0, 0, 0) 100%);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: none;
}
/* Align the overlay header inner container with the hero grid (same max-width and side padding)
   so the CCSS logo sits flush-left with the hero title "Greater China / Company Search Services". */
.header-overlay .container {
    max-width: 1480px;
    padding: 0 2.5rem;
}
.header-overlay .logo-dark { display: none; }
.header-overlay .logo-light { display: inline-block; }
.header-overlay .nav-menu > li > a,
.header-overlay .nav-menu .dropdown-toggle {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.header-overlay .nav-menu > li > a:hover,
.header-overlay .nav-menu .dropdown-toggle:hover,
.header-overlay .nav-menu > li.active > a {
    color: #fff;
    background: rgba(255,255,255,0.15);
}
.header-overlay .dropdown-menu a { color: var(--text-dark); text-shadow: none; }
.header-overlay .header-actions .btn-ghost { color: #fff; }
.header-overlay .header-actions .btn-ghost:hover { color: var(--brand-accent); background: rgba(255,255,255,0.12); }
.header-overlay .header-actions .btn-outline {
    color: #fff;
    border-color: rgba(255,255,255,0.85);
    background: transparent;
}
.header-overlay .header-actions .btn-outline:hover { background: #fff; color: var(--brand-primary-dark); border-color: #fff; }
.header-overlay .mobile-toggle { color: #fff; }

/* Scrolled state : same translucent gradient, no colour flip.
   Blur naturally keeps the white content legible behind the dark overlay. */
.header-overlay.scrolled {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
}

/* Dropdown */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(0.5rem);
    min-width: 260px;
    background: #fff;
    border: 1px solid var(--bg-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    pointer-events: none;
}
.dropdown:hover .dropdown-menu,
.dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.dropdown-menu a {
    display: block;
    padding: 0.6rem 0.9rem;
    color: var(--text-dark);
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}
.dropdown-menu a:hover {
    background: var(--bg-subtle);
    color: var(--brand-primary);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.header-actions .btn {
    font-size: 0.78rem;
    padding: 0.65rem 1.4rem;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
}

.mobile-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-dark);
    padding: 0.5rem;
}

/* ---------- Hero (V1-style massive serif text on photo) ---------- */
.hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: var(--text-dark);
    color: #fff;
}
.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.30) 25%,
        rgba(0, 0, 0, 0.25) 60%,
        rgba(0, 0, 0, 0.55) 100%);
    z-index: 1;
}

.hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    padding: 11rem 2.5rem 1.75rem;
    max-width: 1480px;
    margin: 0 auto;
    gap: 2.5rem 3rem;
    align-items: start;
}

/* Top row — both titles on the SAME level, facing each other.
   Left : "Company Search Services"   |   Right : "Greater China" */
.hero-title-bottom {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: start;
    text-align: left;
    font-family: var(--font-display);
    font-weight: 900;
    color: #fff;
    font-size: clamp(2.2rem, 6.2vw, 5.8rem);
    line-height: 0.92;
    letter-spacing: -0.02em;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
    margin: 0;
    text-transform: none;
}
.hero-title-top {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    text-align: right;
    font-family: var(--font-display);
    font-weight: 900;
    color: #fff;
    font-size: clamp(2.2rem, 6.2vw, 5.8rem);
    line-height: 0.92;
    letter-spacing: -0.02em;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
    margin: 0;
    text-transform: none;
}

.hero-title-tag {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.48em;
    letter-spacing: 0;
    line-height: 1.15;
    margin-top: 0.32em;
    text-transform: none;
}

/* Glassmorphism card — below both titles, spans full grid width, centered.
   Wide-and-short format : 2 columns inside (jurisdictions | description+CTAs) */
.hero-card {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: end;
    justify-self: center;
    width: 100%;
    max-width: 1040px;
    padding: 1.5rem 2.4rem;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(10.8px) saturate(130%);
    -webkit-backdrop-filter: blur(10.8px) saturate(130%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    color: #fff;

    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 2.2rem;
    row-gap: 0.6rem;
    align-items: center;
}
.hero-card-eyebrow {
    grid-column: 1 / -1;
    display: block;
    font-family: var(--font-accent, var(--font-body));
    font-size: 0.92rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    margin: 0;
}
.hero-jurisdictions {
    grid-column: 1;
    grid-row: 2 / span 5;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-end;
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    text-align: right;
    border-right: 1px solid rgba(255, 255, 255, 0.22);
    padding-right: 1.8rem;
}
.hero-jurisdictions li {
    font-size: clamp(1.4rem, 2vw, 1.85rem);
    line-height: 1.2;
    color: #fff;
    white-space: nowrap;
    letter-spacing: -0.01em;
}
.hero-promise {
    grid-column: 2;
    grid-row: 3;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
    margin: 0.9rem 0 0;
    align-self: start;
}
.hero-price {
    grid-column: 2;
    grid-row: 4;
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.92rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.82);
    margin: 0.1rem 0 0;
    align-self: start;
}
.hero-description {
    grid-column: 2;
    grid-row: 2;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    align-self: end;
}
.hero-card .btn {
    padding-top: 0.62rem;
    padding-bottom: 0.62rem;
}
.hero-cta-group {
    grid-column: 2;
    grid-row: 5;
    display: flex;
    gap: 0.7rem;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 0.9rem 0 0;
    align-self: start;
}
.hero-cta-group .btn {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-radius: 100px;
    font-size: 0.84rem;
    padding: 0.75rem 1.55rem;
}

/* Legacy — keep .hero-info as alias in case of stale markup */
.hero-info { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; max-width: 420px; color: #fff; }

/* ---------- Hero entry animations (V1 style — titles slide in; glass card is static) ---------- */
@keyframes hero-slide-in-left {
    0%   { opacity: 0; transform: translate3d(-60px, 0, 0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes hero-slide-in-right {
    0%   { opacity: 0; transform: translate3d(60px, 0, 0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

.hero-title-bottom {
    animation: hero-slide-in-left 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}
.hero-title-top {
    animation: hero-slide-in-right 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}
/* .hero-card is intentionally static — no entry animation. */

/* Honour users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .hero-title-bottom,
    .hero-title-top {
        animation: none;
    }
}

/* ---------- Trust bar ---------- */
.trust-bar {
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--bg-border);
    padding: 1rem 0;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* ---------- Section header ---------- */
.section-header { margin-bottom: 2.5rem; }
.section-eyebrow {
    display: inline-block;
    font-family: var(--font-accent);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: var(--brand-primary);
    font-weight: 700;
    margin-bottom: 0.75rem;
    padding: 0.35rem 0.9rem;
    background: var(--brand-accent);
    border-radius: 100px;
}
.section-header h2 { margin-bottom: 1rem; }
.section-header p { max-width: 780px; color: var(--text-muted); font-size: 1.05rem; }
.section-header.text-center p { margin-left: auto; margin-right: auto; }

/* ---------- Grids ---------- */
.grid { display: grid; gap: 1.75rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Cards ---------- */
.card {
    background: #fff;
    border: 1px solid var(--bg-border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    transition: var(--transition);
    position: relative;
}
.card:hover {
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}
.card h3 { margin-bottom: 0.75rem; color: var(--text-dark); }
.card p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 1rem; }
.card .learn-more {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--brand-primary);
    font-weight: 700;
    font-size: 0.88rem;
}
.card .learn-more:hover { gap: 0.6rem; }

.feature-icon {
    width: 54px;
    height: 54px;
    border-radius: var(--radius-md);
    background: var(--brand-accent);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.card-with-image { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card-with-image .card-img {
    height: 200px;
    overflow: hidden;
    background: var(--bg-light);
}
.card-with-image .card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card-with-image:hover .card-img img { transform: scale(1.04); }
.card-with-image .card-body { padding: 1.5rem 1.75rem 1.75rem; flex: 1; display: flex; flex-direction: column; }

/* ---------- Guide cover cards (landing "Onboard Quickly with Our User Guides") ---------- */
/* Cover fills the whole card, card-body overlays the bottom with 50% translucent white */
.guide-cover-cards .card-with-image {
    position: relative;
    aspect-ratio: 455 / 643;   /* matches the user-guide cover PDF aspect ratio */
    display: block;             /* cancel the flex-column layout for overlay positioning */
}
.guide-cover-cards .card-with-image .card-img {
    height: 100%;
    width: 100%;
    position: absolute;
    inset: 0;
    background: #fff;
}
.guide-cover-cards .card-with-image .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;  /* keep "USER GUIDE NO.X" aligned near the top edge */
}
.guide-cover-cards .card-with-image .card-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem 1.25rem 1.1rem;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.guide-cover-cards .card-with-image .card-body h3 {
    font-size: 1rem;
    line-height: 1.25;
    margin: 0;
    color: var(--text-dark);
}
.guide-cover-cards .card-with-image .card-body p {
    font-size: 0.82rem;
    line-height: 1.4;
    margin: 0;
    color: var(--text-body);
}
.guide-cover-cards .card-with-image .card-body .learn-more {
    font-size: 0.82rem;
    margin-top: 0.2rem;
}

/* Wrapper around each cover + caption so the grid-4 cell holds both */
.guide-cover-cards .guide-cover-item {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
/* External caption below each cover window */
.guide-cover-cards .guide-cover-caption {
    margin: 0;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-dark);
}

/* ---------- Report cards ---------- */
.report-card {
    background: #fff;
    border: 1px solid var(--bg-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}
.report-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.report-card .report-bar { height: 5px; width: 100%; }
.report-card .report-content { padding: 1.75rem; flex: 1; display: flex; flex-direction: column; }
.report-card h3 { font-size: 1.2rem; margin-bottom: 0.35rem; }
.report-card .subtitle { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 1rem; }
.report-card .price { font-family: var(--font-display); font-size: 1.6rem; font-weight: 900; color: var(--brand-primary); margin-bottom: 1rem; }
.report-card ul { list-style: none; padding: 0; margin: 0 0 1.5rem 0; font-size: 0.9rem; }
.report-card ul li { padding: 0.35rem 0 0.35rem 1.25rem; position: relative; color: var(--text-body); }
.report-card ul li::before { content: '✓'; position: absolute; left: 0; color: var(--success); font-weight: 700; }
.report-card .btn { margin-top: auto; }

/* ---------- Process steps ---------- */
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.process-step { text-align: center; padding: 1rem; position: relative; }
.step-number {
    width: 58px; height: 58px; border-radius: 50%;
    background: var(--brand-primary); color: #fff;
    font-family: var(--font-display); font-size: 1.5rem; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.25rem;
    box-shadow: 0 8px 20px rgba(68, 138, 204, 0.35);
    position: relative;
    z-index: 1;
}
.process-step h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.process-step p { color: var(--text-muted); font-size: 0.92rem; }

/* Arrow between the 4 steps — painted in the grid-gap on the circled-number row.
   Hidden on the first card and on responsive breakpoints where steps stack. */
.process-step + .process-step::before {
    content: "";
    position: absolute;
    top: 1rem;          /* matches .process-step padding-top (58/2 + 1rem lines up on circle midline) */
    left: -0.75rem;     /* centred in the 1.5rem gap */
    width: 1.5rem;
    height: 58px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23448ACC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='13 6 19 12 13 18'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
    opacity: 0.75;
    pointer-events: none;
}

/* ---------- Dark CTA band (V1 anthracite, vertical gradient deepening downward) ---------- */
.dark-band {
    background: linear-gradient(180deg, #3A3F48 0%, #2A2D33 55%, #1A1D21 100%);
    color: #fff;
}
/* Modifier — anthracite fading LIGHTER toward the bottom, for sections that
   sit immediately above a light (bg-light) section and need a natural transition. */
.dark-band.dark-band-fade {
    background: linear-gradient(180deg, #2A2D33 0%, #3A3F48 35%, #5A6068 75%, #8A9098 100%);
}
.dark-band h2, .dark-band h3, .dark-band h4 { color: #fff; }
.dark-band p, .dark-band li { color: rgba(255,255,255,0.88); }
.dark-band .section-eyebrow { background: rgba(255,255,255,0.14); color: var(--brand-accent); }
.dark-band ul.checklist { list-style: none; padding: 0; }
.dark-band ul.checklist li {
    position: relative; padding: 0.55rem 0 0.55rem 1.9rem;
}
.dark-band ul.checklist li::before {
    content: '✓';
    position: absolute; left: 0; top: 0.55rem;
    width: 22px; height: 22px;
    background: var(--brand-accent); color: var(--brand-primary-darker);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 900;
}
.dark-band img { border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); }

/* Cards keep their light background even inside a dark band — restore the
   dark text colours so titles and body text remain legible on the white card.
   Without this override, `.dark-band h3 / p` (white) would win over `.card h3 / p`
   (dark) because they have equal specificity and are declared later. */
.dark-band .card h3 { color: var(--text-dark); }
.dark-band .card p  { color: var(--text-muted); }
.dark-band .card li { color: var(--text-body); }

/* Pricing page — section sub-heading used between report families */
.pricing-family-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-dark);
    border-left: 4px solid var(--brand-primary);
    padding-left: 0.75rem;
    margin-bottom: 0.25rem;
}

/* ---------- Badges ---------- */
.badge {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border-radius: 100px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.badge-success { background: rgba(25,135,84,0.12); color: var(--success); border: 1px solid rgba(25,135,84,0.3); }
.badge-info    { background: rgba(68,138,204,0.12); color: var(--brand-primary); border: 1px solid rgba(68,138,204,0.3); }
.badge-warning { background: rgba(230,126,34,0.12); color: var(--brand-warm); border: 1px solid rgba(230,126,34,0.3); }

/* ---------- Check list (used on industry pages) ---------- */
.check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.check-list li {
    position: relative;
    padding: 0.5rem 0 0.5rem 1.9rem;
    color: var(--text-body);
    line-height: 1.55;
}
.check-list li::before {
    content: '✓';
    position: absolute; left: 0; top: 0.6rem;
    width: 20px; height: 20px;
    background: var(--brand-accent); color: var(--brand-primary-darker);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 900;
}
.dark-band .check-list li { color: rgba(255,255,255,0.9); }

/* ---------- Outline-primary button ---------- */
.btn-outline-primary {
    background: transparent;
    border: 1.5px solid var(--brand-primary);
    color: var(--brand-primary);
}
.btn-outline-primary:hover { background: var(--brand-primary); color: #fff; }

/* ---------- Legal-text prose ---------- */
.legal-text h2 {
    font-size: 1.5rem;
    margin: 2.5rem 0 1rem;
    color: var(--text-dark);
    font-weight: 700;
}
.legal-text h3 {
    font-size: 1.18rem;
    margin: 1.8rem 0 0.8rem;
    color: var(--text-dark);
    font-weight: 700;
}
.legal-text h4, .legal-text h5 {
    font-size: 1.02rem;
    margin: 1.4rem 0 0.6rem;
    color: var(--text-dark);
    font-weight: 700;
}
.legal-text p {
    margin: 0 0 1rem;
    color: var(--text-body);
    line-height: 1.7;
    font-size: 0.95rem;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.legal-text ul, .legal-text ol {
    margin: 0 0 1.2rem 1.3rem;
    padding: 0;
    color: var(--text-body);
    line-height: 1.7;
    font-size: 0.95rem;
}
.legal-text li {
    margin-bottom: 0.4rem;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.legal-text dl {
    margin: 0 0 1.2rem 0;
    color: var(--text-body);
    line-height: 1.7;
    font-size: 0.95rem;
}
.legal-text dt {
    font-weight: 700;
    color: var(--text-dark);
    margin-top: 0.8rem;
}
.legal-text dd {
    margin: 0.3rem 0 0.8rem 1.3rem;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.legal-text a { color: var(--brand-primary); text-decoration: underline; }
.legal-text a:hover { color: var(--brand-primary-dark); }
.legal-text table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2rem 0 1.8rem;
    font-size: 0.9rem;
}
.legal-text table th, .legal-text table td {
    border: 1px solid var(--bg-border);
    padding: 0.7rem 0.9rem;
    text-align: left;
    vertical-align: top;
    color: var(--text-body);
}
.legal-text table td {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.legal-text table th {
    background: var(--bg-light);
    font-weight: 700;
    color: var(--text-dark);
    text-align: left;
}
.legal-text blockquote {
    border-left: 3px solid var(--brand-primary);
    padding: 0.2rem 0 0.2rem 1.2rem;
    margin: 1.2rem 0;
    color: var(--text-muted);
    font-style: italic;
}
.legal-text strong { color: var(--text-dark); }
.legal-text hr {
    border: none;
    border-top: 1px solid var(--bg-border);
    margin: 2rem 0;
}

/* ---------- Testimonial ---------- */
/* Always rendered as a translucent anthracite banner with white copy — */
/*  reads correctly on dark-band, light-bg and photo sections alike.    */
.testimonial {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    padding: 2.25rem 2.25rem;
    background: rgba(30, 34, 44, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}
.testimonial p {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.3rem;
    line-height: 1.5;
    color: #fff;
    margin-bottom: 1.5rem;
}
.testimonial-author { font-weight: 700; color: var(--brand-accent); }
.testimonial-role { font-size: 0.88rem; color: rgba(255,255,255,0.80); }

/* ---------- V1-style photo banner (Control your costs) ---------- */
.photo-banner {
    position: relative;
    padding: 6rem 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    overflow: hidden;
}
.photo-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(26, 29, 33, 0.85) 0%,
        rgba(26, 29, 33, 0.55) 55%,
        rgba(26, 29, 33, 0.35) 100%);
    z-index: 1;
}
.photo-banner > .container {
    position: relative;
    z-index: 2;
}
.photo-banner .banner-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
}
.photo-banner .section-eyebrow {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    margin-bottom: 1rem;
}
.photo-banner h2 {
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    line-height: 1.2;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
/* Hero variant — first-section version that sits under the fixed translucent header.
   Top padding must clear the header height so the content is never masked. */
.photo-banner-hero {
    padding: 11rem 0 5rem;
    min-height: 56vh;
    display: flex;
    align-items: center;
}
.photo-banner-hero h2 {
    font-size: clamp(2rem, 3.6vw, 3rem);
    max-width: 780px;
}
.photo-banner-hero .breadcrumb-nav { margin-bottom: 1.2rem; }

/* Breadcrumb on dark/photo backgrounds — use white and a translucent separator. */
.breadcrumb-on-dark,
.photo-banner .breadcrumb-nav {
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.breadcrumb-on-dark a,
.photo-banner .breadcrumb-nav a {
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
}
.breadcrumb-on-dark a:hover,
.photo-banner .breadcrumb-nav a:hover { color: #fff; }

@media (max-width: 900px) {
    .photo-banner { padding: 4rem 0; }
    .photo-banner-hero { padding: 9rem 0 3.5rem; min-height: 0; }
    .photo-banner .banner-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ---------- Split sections ---------- */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
}
/*  `split-image` porte la classe SUR l'image, dans les cinq endroits où
    elle sert — l'accueil et les quatre pages pays. Le sélecteur visait
    une image DANS un conteneur portant la classe : il n'a jamais rien
    atteint, et ces cinq photos étaient les seules du site à angles
    droits. On garde les deux formes : celle qui existe, et celle qu'on
    écrirait si l'on enveloppait un jour l'image d'une légende.  */
img.split-image,
.split-image img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; }
.split-reverse .split-image { order: 0; }
.split-reverse > *:not(.split-image) { order: 1; }

/* ---------- Who we are : chiffres et volets ----------
   La bande de chiffres reprend des faits déjà écrits sur la page ; les
   trois volets disent ce que l'origine du cabinet donne au client. Les
   volets sont des cartes sans image, avec un filet de couleur en tête
   et un numéro en petites capitales, pour se distinguer des cartes de
   services qui suivent.                                              */
.about-figures {
    list-style: none;
    margin: 3rem 0 0;
    padding: 1.75rem 1rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    background: var(--bg-subtle);
    border: 1px solid var(--bg-border);
    border-radius: var(--radius-lg);
}
.about-figure {
    text-align: center;
    padding: 0 0.5rem;
}
.about-figure + .about-figure { border-left: 1px solid var(--bg-border); }
.about-figure-num {
    display: block;
    font-family: var(--font-accent);
    font-size: 2.35rem;
    line-height: 1;
    color: var(--brand-primary-darker);
    letter-spacing: 0.02em;
}
.about-figure-num small {
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-left: 0.35rem;
    color: var(--brand-primary);
}
.about-figure-word { font-size: 1.3rem; padding-top: 0.55rem; white-space: nowrap; }
.about-figure-label {
    display: block;
    margin-top: 0.55rem;
    font-size: 0.86rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.about-pillars { margin-top: 2.5rem; }
.about-pillar {
    position: relative;
    background: #fff;
    border: 1px solid var(--bg-border);
    border-top: 4px solid var(--brand-primary);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.6rem 1.6rem;
    box-shadow: var(--shadow-sm);
}
.about-pillar-num {
    display: inline-block;
    font-family: var(--font-accent);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    color: var(--brand-warm);
    margin-bottom: 0.6rem;
}
.about-pillar h3 { font-size: 1.12rem; margin-bottom: 0.6rem; }
.about-pillar p { color: var(--text-body); font-size: 0.95rem; line-height: 1.7; margin: 0; }

@media (max-width: 900px) {
    .about-figures { grid-template-columns: repeat(2, 1fr); row-gap: 1.75rem; }
    .about-figure + .about-figure { border-left: 0; }
    .about-figure:nth-child(even) { border-left: 1px solid var(--bg-border); }
}
@media (max-width: 640px) {
    .about-figures { grid-template-columns: 1fr; padding: 1.25rem 1rem; }
    .about-figure:nth-child(even) { border-left: 0; }
    .about-figure + .about-figure { border-top: 1px solid var(--bg-border); padding-top: 1.25rem; }
}

/* ---------- Page hero (interior pages) ---------- */
/* Top padding accounts for the fixed overlay header (2 rows) */
.page-hero {
    position: relative;
    padding: 10rem 0 3.5rem;
    background: linear-gradient(135deg, var(--brand-primary-darker) 0%, var(--brand-primary) 100%);
    color: #fff;
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 80% 30%, rgba(255,255,255,0.1) 0%, transparent 50%);
    pointer-events: none;
}
.page-hero h1 { color: #fff; margin-bottom: 0.75rem; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); }
.page-hero p { color: rgba(255,255,255,0.88); max-width: 700px; font-size: 1.1rem; }


.breadcrumb-nav {
    font-size: 0.85rem;
    margin-bottom: 1rem;
    color: rgba(255,255,255,0.7);
}
.breadcrumb-nav a { color: rgba(255,255,255,0.85); }
.breadcrumb-nav a:hover { color: #fff; }
.breadcrumb-nav .sep { margin: 0 0.4rem; }

/* ---------- Footer ---------- */
.footer {
    position: relative;
    background-color: var(--text-dark);
    background-image:
        linear-gradient(rgba(10, 14, 22, 0.68), rgba(10, 14, 22, 0.72)),
        url('../images/AdobeStock_754707719.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: rgba(255,255,255,0.75);
    padding: 3.5rem 0 1.5rem;
}
/* Note: CSS url() paths are resolved relative to the stylesheet,
   not to the HTML file — so one rule works for every page depth. */

/* ---------- Footer-CTA: extends the footer photo upward to the final
   call-to-action section. Both use `background-attachment: fixed` so the
   same image is positioned relative to the viewport — the photo appears
   continuous across .footer-cta and .footer (no duplication). ---------- */
.footer-cta {
    position: relative;
    background-color: var(--text-dark) !important;
    background-image:
        linear-gradient(rgba(10, 14, 22, 0.62), rgba(10, 14, 22, 0.72)),
        url('../images/AdobeStock_754707719.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    color: rgba(255,255,255,0.88);
}
.footer-cta > .container { position: relative; z-index: 1; }

/* Text legibility over the dark photo */
.footer-cta h1,
.footer-cta h2,
.footer-cta h3,
.footer-cta h4 { color: #fff !important; }
.footer-cta > .container > p,
.footer-cta > .container > div > p,
.footer-cta li { color: rgba(255,255,255,0.85) !important; }
.footer-cta a:not(.btn) { color: var(--brand-accent); }
.footer-cta .section-eyebrow {
    background: rgba(255,255,255,0.14);
    color: var(--brand-accent);
}

/* Buttons that were styled for a light background — keep visible on photo */
.footer-cta .btn-outline,
.footer-cta .btn-outline-primary {
    color: #fff;
    border-color: rgba(255,255,255,0.6);
    background: transparent;
}
.footer-cta .btn-outline:hover,
.footer-cta .btn-outline-primary:hover {
    background: rgba(255,255,255,0.12);
    border-color: #fff;
    color: #fff;
}

/* Cards inside a footer-cta keep their light surface for contrast */
.footer-cta .card { background: #fff; }

/* Neutralise the separating border that any `.dark-band` sibling would
   create between the CTA band and the photo gradient (keeps it seamless). */
.footer-cta.dark-band { background: transparent; }
.footer-cta.dark-band,
.footer-cta.bg-white,
.footer-cta.bg-light { background-color: transparent !important; }

/* Safari / iOS have historical issues with background-attachment: fixed on
   small viewports. Fall back to scroll (image tiled per element) — the two
   sections will still share the same photo theme and the user will see the
   overlap without the iOS rendering bug. */
@media (max-width: 768px) {
    .footer,
    .footer-cta {
        background-attachment: scroll !important;
    }
}
.footer > .container { position: relative; z-index: 1; }
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.3fr;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
}
.footer-brand img { height: 108px; width: auto; margin-bottom: 1.2rem; filter: brightness(1.05); }
.footer-brand p { color: rgba(255,255,255,0.65); font-size: 0.9rem; }
.footer h4, .footer .footer-heading {
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    margin-bottom: 1.15rem;
}
.footer ul { list-style: none; padding: 0; }
.footer ul li { margin-bottom: 0.5rem; line-height: 1.2; font-size: 0.82rem; color: rgba(255,255,255,0.55); }
.footer ul a { color: rgba(255,255,255,0.65); font-size: 0.9rem; }
.footer ul a:hover { color: var(--brand-accent); }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.55);
}
.footer-bottom p { margin: 0; }
.footer-social { display: flex; gap: 1.1rem; align-items: center; }
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: 0;
    background: transparent;
    border-radius: 0;
    text-decoration: none;
    transition: var(--transition);
    opacity: .85;
}
.footer-social a:hover {
    transform: translateY(-2px);
    opacity: 1;
}
.footer-social a svg {
    width: 26px;
    height: 26px;
    display: block;
    fill: #fff;
}
.footer-social a[aria-label="Instagram"] svg,
.footer-social a[aria-label="Facebook"] svg,
.footer-social a[aria-label="LinkedIn"]  svg { fill: #fff; }

/* ---------- Prose (legal / article pages) ---------- */
.prose {
    max-width: 860px;
    margin: 0 auto;
    font-size: 1.02rem;
    color: var(--text-body);
    line-height: 1.75;
}
.prose h1, .prose h2, .prose h3, .prose h4 { margin-top: 2rem; }
.prose h2 { font-size: 1.7rem; border-bottom: 2px solid var(--brand-accent); padding-bottom: 0.5rem; }
.prose h3 { font-size: 1.25rem; color: var(--brand-primary-dark); }
.prose p, .prose li { margin-bottom: 1rem; }
.prose ul, .prose ol { padding-left: 1.5rem; }
.prose ul li, .prose ol li { margin-bottom: 0.5rem; }
.prose a { text-decoration: underline; }
.prose strong { color: var(--text-dark); }
.prose .lead {
    font-size: 1.15rem;
    color: var(--text-dark);
    border-left: 4px solid var(--brand-primary);
    padding-left: 1.25rem;
    margin-bottom: 2rem;
}

/* ---------- FAQ accordion ---------- */
.faq-item {
    border-bottom: 1px solid var(--bg-border);
    padding: 1.25rem 0;
}
.faq-item summary {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-dark);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--brand-primary);
    transition: var(--transition);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding-top: 0.85rem; color: var(--text-muted); }

/* ---------- Contact layout ---------- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 3rem;
}
.contact-info-block {
    background: var(--bg-subtle);
    border-radius: var(--radius-lg);
    padding: 2rem;
}
.contact-info-block h4 { font-family: var(--font-body); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 0.5rem; }
.contact-info-block p { color: var(--text-dark); margin-bottom: 1.25rem; font-weight: 600; }
.contact-form label { display: block; margin-bottom: 0.4rem; font-weight: 700; font-size: 0.88rem; color: var(--text-dark); }
.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 0.75rem 0.95rem;
    border: 1px solid var(--bg-border);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-dark);
    margin-bottom: 1rem;
    background: #fff;
    transition: var(--transition);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(68,138,204,0.18);
}
.contact-form textarea { min-height: 140px; resize: vertical; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .nav-menu { display: none; }
    .mobile-toggle { display: inline-flex; }
    .header-nav-row { display: none; }
    /* Re-display the nav wrapper when the hamburger menu is open */
    .header-nav-row.is-open { display: block; }
    .header-actions .btn:not(.btn-primary) { display: none; }
    .nav-menu.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid var(--bg-border);
        padding: 1rem;
        gap: 0.25rem;
        align-items: flex-start;
        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
        max-height: calc(100vh - 100%);
        overflow-y: auto;
        z-index: 1001;
    }
    .nav-menu.open > li { width: 100%; }
    .nav-menu.open > li > a,
    .nav-menu.open .dropdown-toggle {
        color: var(--text-dark);
        text-shadow: none;
        display: block;
        width: 100%;
        padding: 0.65rem 0.75rem;
    }
    .nav-menu.open .dropdown-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        border: none;
        padding: 0 0 0 1rem;
        pointer-events: auto;
        margin: 0;
        display: block;
    }
    /* In overlay header mode, menu opens into white drop-down — override the
       forced-white text/shadow used on wide screens. */
    .header-overlay .nav-menu.open > li > a,
    .header-overlay .nav-menu.open .dropdown-toggle {
        color: var(--text-dark);
        text-shadow: none;
        background: transparent;
    }
    .header-overlay .nav-menu.open > li > a:hover,
    .header-overlay .nav-menu.open .dropdown-toggle:hover,
    .header-overlay .nav-menu.open > li.active > a {
        color: var(--brand-primary);
        background: rgba(13,43,103,0.06);
    }
}
@media (max-width: 900px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .process-steps { grid-template-columns: repeat(2, 1fr); }
    /* On tablet/mobile the 4 steps wrap — hide the row-spanning arrows. */
    .process-step + .process-step::before { display: none; }
    .split { grid-template-columns: 1fr; gap: 2rem; }
    .contact-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }

    /* Hero stacks on mobile */
    .hero-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        padding: 8rem 1.5rem 3rem;
        gap: 2rem;
    }
    .hero-title-top {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        text-align: left;
    }
    .hero-title-bottom {
        grid-column: 1;
        grid-row: 2;
    }
    .hero-card {
        grid-column: 1;
        grid-row: 3;
        justify-self: start;
        max-width: 100%;
        padding: 1.8rem 1.5rem;
        grid-template-columns: 1fr;
    }
    .hero-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .hero-card {
        min-width: 0;
    }
    .hero-cta-group .btn {
        white-space: normal;
        min-width: 0;
    }
    .hero-jurisdictions {
        grid-column: 1;
        grid-row: auto;
        align-self: auto;
        display: block;
        text-align: left;
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.22);
        padding-bottom: 0.8rem;
        margin-bottom: 0.2rem;
    }
    .hero-promise {
        grid-column: 1;
        grid-row: auto;
        align-self: auto;
    }
    .hero-price {
        grid-column: 1;
        grid-row: auto;
        align-self: auto;
    }
    .hero-description {
        grid-column: 1;
        grid-row: auto;
        align-self: auto;
    }
    .hero-cta-group {
        grid-column: 1;
        grid-row: auto;
        align-self: auto;
    }
    .hero-info {
        grid-column: 1;
        grid-row: 3;
        justify-self: start;
        text-align: left;
        max-width: 100%;
    }
    .hero-cta-group { justify-content: flex-start; }
}
@media (max-width: 640px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .process-steps { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .header-inner { gap: 1rem; }
    h1 { font-size: 2rem; }
    h2 { font-size: 1.6rem; }
    .hero { min-height: auto; }
    .logo img { height: 36px; }
}

/* ---------- Small utilities ---------- */
.divider-small { width: 60px; height: 4px; background: var(--brand-primary); border-radius: 2px; margin: 0 0 1.5rem; }
.text-center .divider-small { margin-left: auto; margin-right: auto; }
.small-muted { font-size: 0.85rem; color: var(--text-muted); }


/* ====================================================
   USE-CASE : CHINA SUPPLY CHAIN
   ==================================================== */

/* ----- Block A : supply-chain timeline (3 steps) ----- */
.supply-timeline {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 1rem;
    margin-top: 2.5rem;
}
.supply-step {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 14px;
    padding: 2rem 1.5rem 1.8rem;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
    position: relative;
    transition: var(--transition);
}
.supply-step:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08); }
.supply-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--brand-primary-light);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 1rem;
    font-family: var(--font-sans);
}
.supply-step-icon {
    color: var(--brand-primary);
    margin: 0 auto 1rem;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
}
.supply-step-icon svg { width: 100%; height: 100%; }
.supply-step h3 { font-size: 1.15rem; margin-bottom: 0.6rem; color: var(--text-dark); }
.supply-step p { color: var(--text-body); font-size: 0.92rem; line-height: 1.55; margin: 0; }
.supply-step-highlight {
    background: linear-gradient(180deg, #fff 0%, #f7fafc 100%);
    border: 2px solid var(--brand-accent);
    box-shadow: 0 10px 28px rgba(var(--brand-accent-rgb, 200, 160, 80), 0.15);
}
.supply-step-highlight .supply-step-number { background: var(--brand-accent); }
.supply-step-highlight .supply-step-icon { color: var(--brand-accent); }
.supply-arrow {
    display: flex; align-items: center; justify-content: center;
    color: var(--brand-primary-light);
    width: 32px;
}
.supply-arrow svg { width: 28px; height: 28px; }

@media (max-width: 900px) {
    .supply-timeline { grid-template-columns: 1fr; }
    .supply-arrow { transform: rotate(90deg); margin: 0.3rem auto; }
}

/* ----- Block B : risks table ----- */
.risk-table-wrapper { overflow-x: auto; margin-top: 2.5rem; }
.risk-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    font-size: 0.94rem;
}
.risk-table thead {
    background: var(--text-dark);
    color: #fff;
}
.risk-table thead th {
    text-align: left;
    padding: 1rem 1.1rem;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.risk-table tbody td {
    padding: 1rem 1.1rem;
    border-top: 1px solid rgba(0,0,0,0.06);
    vertical-align: top;
    color: var(--text-body);
    line-height: 1.55;
}
.risk-table tbody tr:hover { background: #fafbfd; }
.risk-col-num { width: 52px; }
.risk-col-what { width: 24%; }
.risk-col-report { width: 22%; white-space: nowrap; }
.risk-num {
    font-weight: 700;
    color: var(--brand-primary);
    font-family: var(--font-serif);
    font-size: 1rem;
    text-transform: lowercase;
}
.risk-what strong { color: var(--text-dark); }
/* Icon-based report pills in the risk table */
.risk-reports {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
}
.risk-report {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.7rem 0.4rem 0.5rem;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    white-space: nowrap;
    background: #fff;
    transition: var(--transition);
}
.risk-report img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}
.risk-report > span {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
}
/* Sub-category variant (Red-flag / Litigations, Red-flag / AML) — stacked labels */
.risk-report-sub .risk-report-parent {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 0.1rem;
}
.risk-report-sub .risk-report-sub-label {
    font-size: 0.82rem;
    font-weight: 700;
}

/* Colour variants — tint the icon and the label */
.risk-report-lite     { background: #E8F1FA; color: #0D47A1; border-color: #BBDEFB; }
.risk-report-basic    { background: #DCEDF7; color: #08507A; border-color: #B0D5E8; }
.risk-report-advanced { background: #C5DFF0; color: #023E66; border-color: #8FB9D4; }
.risk-report-ubo      { background: #AFCEE7; color: #012B4D; border-color: #6F9DC4; }
.risk-report-redflag  { background: #EFE4F5; color: #5D1A7B; border-color: #C8A8DA; }

@media (max-width: 720px) {
    .risk-table { font-size: 0.86rem; }
    .risk-table thead { display: none; }
    .risk-table tbody tr {
        display: block;
        padding: 1rem 1rem 0.8rem;
        border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    .risk-table tbody td {
        display: block;
        padding: 0.3rem 0;
        border: none;
    }
    .risk-table tbody td.risk-num { font-size: 1.2rem; padding-bottom: 0.5rem; }
}

/* ----- Block C : case studies cards ----- */
.case-grid { gap: 1.5rem; margin-top: 2.5rem; }
.case-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.8rem 1.6rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border-top: 4px solid var(--brand-primary-light);
    transition: var(--transition);
}
.case-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1); }
.case-card-lite     { border-top-color: #42A5F5; }
.case-card-basic    { border-top-color: #1976D2; }
.case-card-redflag  { border-top-color: #D84539; }
.case-card-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--brand-primary);
    margin-bottom: 0.6rem;
}
.case-card-lite .case-card-eyebrow    { color: #1976D2; }
.case-card-basic .case-card-eyebrow   { color: #0D47A1; }
.case-card-redflag .case-card-eyebrow { color: #5D1A7B; }
.case-card h3 { font-size: 1.2rem; margin-bottom: 0.8rem; color: var(--text-dark); font-family: var(--font-serif); font-weight: 700; }
.case-card p { color: var(--text-body); font-size: 0.92rem; line-height: 1.6; margin: 0; }

/* =========================================================
   Report Types — detailed in-extenso sections
   ========================================================= */
.report-detail {
    background: #fff;
    border-radius: 14px;
    padding: 2.5rem 2.2rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 6px 22px rgba(0, 40, 80, 0.06);
    border-top: 4px solid var(--brand-primary-light);
    scroll-margin-top: 120px;
}
.report-detail-header { margin-bottom: 1.5rem; border-bottom: 1px solid rgba(0,0,0,0.08); padding-bottom: 1.2rem; }
.report-detail-header h2 {
    font-family: var(--font-serif);
    font-size: 1.9rem;
    color: var(--text-dark);
    margin: 0.4rem 0 0.4rem;
}
.report-detail-header .report-detail-price {
    font-size: 0.92rem;
    color: #6B7280;
    margin: 0;
    font-style: italic;
}
.report-detail-chip {
    display: inline-block;
    padding: 0.28rem 0.75rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.report-detail-chip-lite     { background: #E8F1FA; color: #0D47A1; }
.report-detail-chip-basic    { background: #DCEDF7; color: #08507A; }
.report-detail-chip-advanced { background: #C5DFF0; color: #023E66; }
.report-detail-chip-ubo      { background: #AFCEE7; color: #012B4D; }
.report-detail-chip-redflag  { background: #EFE4F5; color: #5D1A7B; }

.report-detail > p {
    color: var(--text-body);
    line-height: 1.7;
    margin-bottom: 1.2rem;
}
.report-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.6rem;
    margin-top: 1.5rem;
}
.report-detail-grid section {
    background: #F8FAFC;
    border-radius: 10px;
    padding: 1.4rem 1.3rem;
    border-left: 3px solid var(--brand-primary);
}
.report-detail-grid section h3 {
    font-family: var(--font-serif);
    font-size: 1.08rem;
    color: var(--brand-primary-dark);
    margin: 0 0 0.6rem;
}
.report-detail-grid section h4 {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6B7280;
    margin: 1rem 0 0.4rem;
    font-weight: 700;
}
.report-detail-grid section p {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-body);
    margin: 0 0 0.6rem;
}
.report-detail-grid section ul {
    margin: 0.3rem 0 0.5rem;
    padding-left: 1.15rem;
}
.report-detail-grid section ul li {
    font-size: 0.9rem;
    line-height: 1.45;
    margin-bottom: 0.2rem;
    color: var(--text-body);
}

@media (max-width: 720px) {
    .report-detail { padding: 1.6rem 1.2rem; }
    .report-detail-header h2 { font-size: 1.4rem; }
    .report-detail-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Report detail — collapsible ("Detailed here") behaviour
   ========================================================= */
.report-detail { position: relative; }

.report-detail-body {
    position: relative;
    overflow: hidden;
}
.report-detail.is-collapsed .report-detail-body {
    max-height: 260px;
}
/* White fade-out at the bottom of the collapsed body */
.report-detail.is-collapsed .report-detail-body::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 200px;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.75) 55%,
        rgba(255, 255, 255, 1) 100%
    );
}

/* Toggle button — centred pill, slightly overlapping the fade */
.report-detail-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 1.2rem auto 0;
    padding: 0.7rem 1.9rem;
    background: var(--brand-primary);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(1, 43, 77, 0.22);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    position: relative;
    z-index: 2;
}
.report-detail.is-collapsed .report-detail-toggle {
    /* When collapsed, pull the button up so it sits in the fade zone */
    margin-top: -1.4rem;
}
.report-detail-toggle:hover {
    background: var(--brand-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(1, 43, 77, 0.28);
}
.report-detail-toggle:focus-visible {
    outline: 3px solid rgba(1, 43, 77, 0.35);
    outline-offset: 3px;
}
.report-detail-toggle::after {
    content: "▾";
    display: inline-block;
    font-size: 0.9rem;
    line-height: 1;
    transition: transform 0.25s ease;
}
.report-detail:not(.is-collapsed) .report-detail-toggle::after {
    transform: rotate(180deg);
}

/* Label swap: "Detailed here" when collapsed, "Collapse" when open */
.report-detail-toggle-label-expanded { display: none; }
.report-detail:not(.is-collapsed) .report-detail-toggle-label-collapsed { display: none; }
.report-detail:not(.is-collapsed) .report-detail-toggle-label-expanded { display: inline; }

@media (max-width: 720px) {
    .report-detail.is-collapsed .report-detail-body { max-height: 220px; }
}

/* =========================================================
   Family palette — shared tokens
   ========================================================= */
:root {
    --family-corporate: var(--brand-primary);
    --family-corporate-soft: #E8F1FA;
    --family-corporate-ink: #0D47A1;

    --family-redflag: #5D1A7B;
    --family-redflag-soft: #EFE4F5;
    --family-redflag-ink: #5D1A7B;

    --family-docs: #8B7D6B;           /* taupe */
    --family-docs-soft: #EFEAE2;
    --family-docs-ink: #5A4E40;
}

/* Extend the chip palette for Extracted Documents (taupe family) */
.report-detail-chip-docs { background: var(--family-docs-soft); color: var(--family-docs-ink); }

/* =========================================================
   REPORT HUB — top-of-page component
   Two-column CSS grid where each row = one rail segment + one family card.
   Thanks to `align-items: stretch`, the coloured segment height equals
   the card height automatically.
   ========================================================= */
.report-hub {
    display: grid;
    grid-template-columns: 10px 1fr;
    column-gap: 1.4rem;
    row-gap: 1.1rem;
    align-items: stretch;
    max-width: 960px;
    margin: 0 auto;
}

.rail-seg {
    display: block;
    border-radius: 999px;
    align-self: stretch;   /* full height of the row = height of its card */
    min-height: 40px;      /* safety when a card is very small */
}
.rail-seg--corporate { background: var(--family-corporate); }
.rail-seg--redflag   { background: var(--family-redflag); }
.rail-seg--docs      { background: var(--family-docs); }

.family-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 16px rgba(0, 40, 80, 0.04);
    overflow: hidden;
    position: relative;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.family-card:hover { box-shadow: 0 8px 24px rgba(0, 40, 80, 0.08); }

.family-card-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    width: 100%;
    padding: 1.3rem 1.6rem 1.3rem 1.9rem;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
}
.family-card-header:focus-visible {
    outline: 3px solid rgba(1, 43, 77, 0.25);
    outline-offset: -3px;
}

.family-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    flex: 0 0 auto;
}
.family-card--corporate .family-card-icon { background: var(--family-corporate-soft); color: var(--family-corporate-ink); }
.family-card--redflag   .family-card-icon { background: var(--family-redflag-soft); color: var(--family-redflag-ink); }
.family-card--docs      .family-card-icon { background: var(--family-docs-soft); color: var(--family-docs-ink); }

.family-card-title { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.family-card-name {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.2;
}
.family-card-lead {
    font-size: 0.88rem;
    color: var(--text-body);
    line-height: 1.4;
}

.family-card-chevron {
    font-size: 1.1rem;
    color: #9CA3AF;
    transition: transform 0.25s ease;
    flex: 0 0 auto;
}
.family-card-header[aria-expanded="false"] .family-card-chevron { transform: rotate(-90deg); }

.family-card-list {
    list-style: none;
    margin: 0;
    padding: 0.4rem 0.6rem 1rem 5rem;  /* aligns with icon */
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.family-card-header[aria-expanded="false"] + .family-card-list {
    display: none;
}
.family-card-list a {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.8rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-dark);
    font-size: 0.95rem;
    transition: background 0.15s ease, color 0.15s ease;
}
.family-card-list a:hover {
    background: rgba(0, 0, 0, 0.035);
    color: var(--text-dark);
}
.hub-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.family-card--corporate .hub-bullet { background: var(--family-corporate); }
.family-card--redflag   .hub-bullet { background: var(--family-redflag); }
.family-card--docs      .hub-bullet { background: var(--family-docs); }

.hub-item-name { font-weight: 600; }
.hub-item-status {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.1;
    flex-shrink: 0;
}
.hub-item-status--immediate {
    background: #E6F4EA;
    color: #1E7A3C;
}
.hub-item-status--on-request {
    background: #F3E8FF;
    color: #6B21A8;
}

@media (max-width: 720px) {
    .report-hub { grid-template-columns: 16px 1fr; gap: 0.8rem; }
    .family-card-header { padding: 1rem 1rem 1rem 1.3rem; gap: 0.7rem; }
    .family-card-icon { width: 40px; height: 40px; border-radius: 10px; }
    .family-card-name { font-size: 1.08rem; }
    .family-card-lead { font-size: 0.82rem; }
    .family-card-list { padding-left: 3.4rem; }
    .family-card-list a { font-size: 0.88rem; }
}

/* =========================================================
   FAMILY DIVIDERS — in-page headers between groups of reports
   ========================================================= */
.family-divider {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.4rem 1.6rem;
    border-radius: 12px;
    margin: 2.5rem 0 1.6rem;
    border-left: 6px solid transparent;
    scroll-margin-top: 120px;
}
.family-divider:first-of-type { margin-top: 0; }
.family-divider--corporate { background: var(--family-corporate-soft); border-left-color: var(--family-corporate); }
.family-divider--redflag   { background: var(--family-redflag-soft); border-left-color: var(--family-redflag); }
.family-divider--docs      { background: var(--family-docs-soft); border-left-color: var(--family-docs); }

.family-divider-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 12px;
    flex: 0 0 auto;
    background: rgba(255,255,255,0.7);
}
.family-divider--corporate .family-divider-icon { color: var(--family-corporate-ink); }
.family-divider--redflag   .family-divider-icon { color: var(--family-redflag-ink); }
.family-divider--docs      .family-divider-icon { color: var(--family-docs-ink); }

.family-divider-title {
    margin: 0 0 0.2rem;
    font-family: var(--font-serif);
    font-size: 1.35rem;
    color: var(--text-dark);
}
.family-divider-lead {
    margin: 0;
    color: var(--text-body);
    font-size: 0.92rem;
    line-height: 1.5;
    max-width: 680px;
}

@media (max-width: 720px) {
    .family-divider { padding: 1rem 1.1rem; gap: 0.8rem; }
    .family-divider-icon { width: 44px; height: 44px; }
    .family-divider-title { font-size: 1.15rem; }
    .family-divider-lead { font-size: 0.86rem; }
}

/* =====================================================================
   CLIENT PORTAL / WORKPLACE — ported in full from V1 (Nouvel Œil)
   Auth tabs + login form + registration form + 2FA panel
   ===================================================================== */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 60vh;
    padding: 2rem 1rem;
}

.auth-wrapper {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(13, 43, 103, 0.10);
    max-width: 720px;
    width: 100%;
    padding: 2.5rem;
    border: 1px solid rgba(13, 43, 103, 0.06);
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-header h1 {
    font-family: var(--font-serif);
    font-size: 2rem;
    color: var(--text-dark);
    margin: 0 0 0.5rem;
    line-height: 1.15;
}

.auth-header p {
    color: var(--text-body);
    margin: 0;
}

.auth-tabs {
    display: flex;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 2rem;
}

.auth-tab {
    flex: 1;
    padding: 0.9rem 1rem;
    background: none;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
    cursor: pointer;
    position: relative;
    transition: color 0.25s ease;
    font-family: inherit;
}

.auth-tab:hover { color: var(--text-dark); }

.auth-tab.active { color: var(--brand-primary); }

.auth-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--brand-primary);
    border-radius: 2px;
}

.auth-panel { display: none; }
.auth-panel.active { display: block; }

.auth-form .form-group {
    margin-bottom: 1.2rem;
}

.auth-form label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.45rem;
    color: var(--text-dark);
    font-size: 0.92rem;
}

.auth-form .required {
    color: #dc2626;
    font-weight: 600;
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="tel"],
.auth-form select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.98rem;
    font-family: inherit;
    color: var(--text-dark);
    background: #fff;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.auth-form input:focus,
.auth-form select:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(13, 43, 103, 0.12);
}

.auth-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* ==================== Login role picker (segmented control) ==================== */
.auth-form .role-picker {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
    padding: 0.3rem;
    background: #f3f5f8;
    border-radius: 10px;
    border: 1px solid #e3e7ed;
}

.auth-form .role-picker .role-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.5rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-body, #333);
    background: transparent;
    border-radius: 7px;
    cursor: pointer;
    text-align: center;
    line-height: 1.2;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
    margin-bottom: 0;
}

.auth-form .role-picker .role-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.auth-form .role-picker .role-option:hover {
    background: #e9edf3;
    color: var(--text-dark, #111);
}

.auth-form .role-picker .role-option:has(input:checked) {
    background: #ffffff;
    color: var(--brand-primary);
    box-shadow: 0 1px 3px rgba(13, 43, 103, 0.18);
    font-weight: 600;
}

.auth-form .role-picker .role-option:focus-within {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.auth-form .role-hint {
    font-size: 0.78rem;
    color: var(--text-muted, #6b7280);
    margin: 0.4rem 0 0;
    line-height: 1.4;
}

.auth-form .role-hint a {
    color: var(--brand-primary);
    text-decoration: none;
}

.auth-form .role-hint a:hover { text-decoration: underline; }

@media (max-width: 560px) {
    .auth-form .role-picker {
        grid-template-columns: 1fr;
    }
    .auth-form .role-picker .role-option {
        justify-content: flex-start;
        padding: 0.55rem 0.75rem;
    }
}
/* ==================== /Login role picker ==================== */


.auth-form .form-group-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.auth-form .checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    cursor: pointer;
    font-weight: normal !important;
    margin-bottom: 0;
}

.auth-form .checkbox-label input {
    margin-top: 0.2rem;
}

.auth-form .checkbox-label span {
    font-size: 0.9rem;
    color: var(--text-body);
    line-height: 1.45;
}

.auth-form .checkbox-label a {
    color: var(--brand-primary);
    text-decoration: underline;
}

.auth-form .forgot-password {
    font-size: 0.88rem;
    color: var(--brand-primary);
    text-decoration: none;
}
.auth-form .forgot-password:hover { text-decoration: underline; }

.auth-form .form-hint {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted, #6b7280);
    margin-top: 0.35rem;
    line-height: 1.35;
}

/* Primary button (scoped inside auth-form so it doesn't collide with global buttons) */
.auth-form .btn-primary,
.tfa-container .btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.95rem 2rem;
    background: var(--brand-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.25s, transform 0.15s;
}

.auth-form .btn-primary:hover,
.tfa-container .btn-primary:hover {
    background: var(--brand-primary-darker, #0a2050);
}

.auth-form .btn-primary:disabled,
.tfa-container .btn-primary:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

.auth-form .btn-full,
.tfa-container .btn-full { width: 100%; }

.spinner {
    animation: auth-rotate 1s linear infinite;
    width: 20px;
    height: 20px;
}
.spinner circle {
    stroke: #fff;
    stroke-linecap: round;
    animation: auth-dash 1.5s ease-in-out infinite;
}
@keyframes auth-rotate { 100% { transform: rotate(360deg); } }
@keyframes auth-dash {
    0%   { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
    50%  { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
    100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}

/* Form messages */
.form-message {
    padding: 0;
    margin-bottom: 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    display: none;
    line-height: 1.45;
}
.form-message.show {
    display: block;
    padding: 0.9rem 1rem;
}
.form-message.error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}
.form-message.success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

/* Info box */
.auth-info {
    display: flex;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: var(--text-body);
    line-height: 1.45;
}
.auth-info svg {
    flex-shrink: 0;
    color: var(--brand-primary);
    margin-top: 0.15rem;
}

/* 2FA panel */
.tfa-container {
    text-align: center;
}
.tfa-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}
.tfa-container h2 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--text-dark);
    margin: 0 0 0.5rem;
}
.tfa-subtitle {
    color: var(--text-body);
    margin: 0 0 2rem;
    font-size: 0.95rem;
}
.tfa-subtitle strong { color: var(--text-dark); }

.tfa-code-inputs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.tfa-digit {
    width: 52px;
    height: 60px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    border: 2px solid #d1d5db;
    border-radius: 10px;
    background: #f9fafb;
    color: var(--text-dark);
    transition: all 0.2s;
    caret-color: var(--brand-primary);
    font-family: inherit;
}
.tfa-digit:focus {
    outline: none;
    border-color: var(--brand-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(13, 43, 103, 0.15);
}
.tfa-digit.error   { border-color: #dc2626; background: #fef2f2; }
.tfa-digit.success { border-color: #16a34a; background: #f0fdf4; }

.tfa-separator {
    font-size: 1.25rem;
    color: #9ca3af;
    margin: 0 0.25rem;
}

.tfa-footer {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}
.tfa-footer p {
    color: var(--text-muted, #6b7280);
    font-size: 0.9rem;
    margin: 0 0 0.5rem;
}
.tfa-resend {
    background: none;
    border: none;
    color: var(--brand-primary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    font-family: inherit;
}
.tfa-resend:hover { text-decoration: underline; }
.tfa-resend:disabled {
    color: #9ca3af;
    cursor: not-allowed;
    text-decoration: none;
}
.tfa-timer {
    font-size: 0.85rem;
    color: var(--text-muted, #6b7280);
}
.tfa-back { margin-top: 1rem; }
.tfa-back-link {
    background: none;
    border: none;
    color: var(--text-muted, #6b7280);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
    font-family: inherit;
}
.tfa-back-link:hover { color: var(--text-dark); }

/* =====================================================================
   WORKPLACE DASHBOARD — placeholder post-login area
   (temporary — will be replaced once V1 post-login pages are mirrored)
   ===================================================================== */
.wp-user-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.header:not(.header-overlay) .wp-user-pill {
    background: var(--brand-primary, #0D2B67);
    border-color: var(--brand-primary, #0D2B67);
    color: #fff;
}

.page-hero--workplace {
    padding-top: 7rem;
    padding-bottom: 3rem;
}

.workplace-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 2rem;
    align-items: start;
}

.workplace-sidebar {
    position: sticky;
    top: 120px;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0.5rem 0.25rem;
}

.wp-user-card {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.4rem 0.5rem 0.75rem;
    margin-bottom: 0;
}
.wp-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand-primary, #0D2B67);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.wp-user-meta { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.wp-user-meta strong { font-size: 0.92rem; color: var(--text-dark); }
.wp-user-meta span { font-size: 0.78rem; color: var(--text-body); }
.wp-status {
    display: inline-block;
    margin-top: 0.3rem;
    padding: 0.15rem 0.5rem;
    border-radius: 100px;
    font-size: 0.68rem !important;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.wp-status--verified { background: #E6F4EA; color: #1E7A3C !important; }

.workplace-nav { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 1.25rem; }
.wp-nav-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.85rem;
    border-radius: 8px;
    color: var(--text-body);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.wp-nav-item:hover { background: #f3f4f6; color: var(--text-dark); }
.wp-nav-item.active {
    background: rgba(13,43,103,0.08);
    color: var(--brand-primary, #0D2B67);
    font-weight: 600;
}
.wp-nav-item svg { color: currentColor; flex-shrink: 0; }
.wp-nav-item--logout { margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid #e5e7eb; border-radius: 0 0 8px 8px; color: #b91c1c; }
.wp-nav-item--logout:hover { background: #fef2f2; color: #991b1b; }

.workplace-main { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }

.wp-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.wp-kpi-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.1rem 1.2rem;
    box-shadow: 0 2px 10px rgba(13,43,103,0.05);
    border: 1px solid rgba(13,43,103,0.06);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.wp-kpi-label { font-size: 0.78rem; color: var(--text-body); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.wp-kpi-value { font-family: var(--font-serif); font-size: 1.7rem; color: var(--text-dark); line-height: 1.1; }
.wp-kpi-link { margin-top: 0.2rem; font-size: 0.82rem; color: var(--brand-primary, #0D2B67); font-weight: 600; text-decoration: none; }
.wp-kpi-link:hover { text-decoration: underline; }

.wp-card {
    background: #fff;
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 4px 16px rgba(13,43,103,0.06);
    border: 1px solid rgba(13,43,103,0.06);
}
.wp-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1.2rem;
    gap: 1rem;
}
.wp-card-header h2 { font-family: var(--font-serif); font-size: 1.25rem; color: var(--text-dark); margin: 0; }
.wp-card-link { font-size: 0.85rem; color: var(--brand-primary, #0D2B67); font-weight: 600; text-decoration: none; flex-shrink: 0; }
.wp-card-link:hover { text-decoration: underline; }

.wp-quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.wp-quick-tile {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.1rem;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fafbff;
    text-decoration: none;
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.wp-quick-tile:hover {
    border-color: var(--brand-primary, #0D2B67);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(13,43,103,0.08);
}
.wp-quick-icon {
    width: 40px;
    height: 40px;
    background: rgba(13,43,103,0.08);
    color: var(--brand-primary, #0D2B67);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}
.wp-quick-tile strong { font-size: 0.95rem; color: var(--text-dark); }
.wp-quick-tile span { font-size: 0.8rem; color: var(--text-body); line-height: 1.4; }

.wp-table-wrap { overflow-x: auto; }
.wp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.wp-table th, .wp-table td {
    text-align: left;
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid #f1f2f6;
    vertical-align: middle;
}
.wp-table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-body);
    font-weight: 600;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}
.wp-table tr:hover td { background: #fafbff; }

.wp-pill {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.wp-pill--done     { background: #E6F4EA; color: #1E7A3C; }
.wp-pill--progress { background: #FEF3C7; color: #92400E; }
.wp-pill--review   { background: #E0E7FF; color: #3730A3; }
.wp-pill--ok       { background: #F3F4F6; color: #374151; }
.wp-pill--alert    { background: #FEE2E2; color: #991B1B; }

.wp-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.wp-credits-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.2rem;
    background: #fafbff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 1rem;
}
.wp-credits-label { display: block; font-size: 0.78rem; color: var(--text-body); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.wp-credits-value { display: block; font-family: var(--font-serif); font-size: 1.5rem; color: var(--text-dark); line-height: 1.1; margin-top: 0.2rem; }

.wp-credits-log {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.wp-credits-log li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0;
    border-bottom: 1px dashed #e5e7eb;
    font-size: 0.85rem;
}
.wp-credits-log li:last-child { border-bottom: none; }
.wp-credits-log span { color: var(--text-body); }
.wp-credits-log strong { color: #16a34a; font-weight: 600; }
.wp-credits-log strong.neg { color: #b91c1c; }

.wp-monitor-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.wp-monitor-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #fafbff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    gap: 1rem;
}
.wp-monitor-list li > div { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.wp-monitor-list li strong { font-size: 0.9rem; color: var(--text-dark); }
.wp-monitor-list li span { font-size: 0.78rem; color: var(--text-body); }

.wp-download-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.wp-download-list li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.65rem 0.8rem;
    background: #fafbff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.87rem;
}
.wp-download-list li svg { color: var(--brand-primary, #0D2B67); flex-shrink: 0; }
.wp-download-list li > span { flex: 1; color: var(--text-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-download-list li a {
    color: var(--brand-primary, #0D2B67);
    font-weight: 600;
    font-size: 0.82rem;
    text-decoration: none;
    flex-shrink: 0;
}
.wp-download-list li a:hover { text-decoration: underline; }

.wp-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem 2rem;
}
.wp-profile-grid > div { display: flex; flex-direction: column; line-height: 1.4; }
.wp-profile-label {
    font-size: 0.72rem;
    color: var(--text-body);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 0.3rem;
}
.wp-profile-grid strong { font-size: 0.95rem; color: var(--text-dark); }
.wp-profile-grid span { font-size: 0.82rem; color: var(--text-body); }

@media (max-width: 1100px) {
    .workplace-layout { grid-template-columns: 1fr; }
    .workplace-sidebar { position: static; }
    .workplace-nav { flex-direction: row; flex-wrap: wrap; }
    .wp-nav-item { flex: 0 0 auto; }
    .wp-nav-item--logout { border-top: none; margin-top: 0; padding-top: 0.65rem; }
    .wp-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .wp-quick-grid { grid-template-columns: repeat(2, 1fr); }
    .wp-split { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .wp-kpi-grid { grid-template-columns: 1fr 1fr; }
    .wp-quick-grid { grid-template-columns: 1fr; }
    .wp-profile-grid { grid-template-columns: 1fr; }
    .wp-card { padding: 1.2rem 1rem; }
}

/* Dev-only preview banner (auth bypass) */
.dev-bypass-banner {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.45;
    margin-bottom: 1.5rem;
}
.dev-bypass-banner strong { color: #78350f; }

.auth-form input[disabled] {
    background: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 600px) {
    .auth-wrapper { padding: 1.5rem; }
    .auth-form .form-row { grid-template-columns: 1fr; }
    .auth-form .form-group-inline {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }
    .tfa-digit { width: 42px; height: 50px; font-size: 1.25rem; }
    .tfa-code-inputs { gap: 0.35rem; }
}


/* ============================================================
   WORKPLACE V2 — extensions for dashboard/kyc-reports/my-account
   Mirrors V1 Nouvel Œil layout with V3 visual language
   ============================================================ */

/* --- Sidebar: user-card pills (My Account / Contact) --- */
.wp-user-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}
.wp-user-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.55rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand-primary, #0D2B67);
    background: #EFF4FB;
    border: 1px solid #DDE7F4;
    border-radius: 100px;
    text-decoration: none;
    transition: background 0.2s;
}
.wp-user-action:hover { background: #E3ECF8; }
.wp-user-action svg { width: 20px; height: 20px; }

/* --- Sidebar nav: locked items (cadenas) --- */
.wp-nav-item.locked {
    color: #9AA4B2;
    cursor: pointer;
    position: relative;
}
.wp-nav-item.locked:hover { background: #f7f8fa; color: #6B7280; }
.wp-nav-item.locked svg { opacity: 0.55; }
.wp-nav-item .wp-lock {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    opacity: 0.65;
}
.wp-nav-item .wp-lock svg { width: 14px; height: 14px; }

/* --- Dashboard: 2-KPI strip --- */
.wp-kpi-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.wp-kpi-strip .wp-kpi-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1.1rem;
    padding: 1.5rem;
}
.wp-kpi-strip .wp-kpi-card-icon {
    width: 68px;
    height: 68px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #EFF4FB;
    border-radius: 14px;
    color: var(--brand-primary, #0D2B67);
    flex-shrink: 0;
}
.wp-kpi-strip .wp-kpi-card-icon svg { width: 38px; height: 38px; }
.wp-kpi-strip .wp-kpi-card-body { display: flex; flex-direction: column; gap: 0.1rem; }
.wp-kpi-strip .wp-kpi-card-value {
    font-family: var(--font-serif);
    font-size: 2.25rem;
    font-weight: 400;
    color: var(--text-dark);
    line-height: 1.05;
}
.wp-kpi-strip .wp-kpi-card-label {
    font-size: 0.9rem;
    color: var(--text-body);
}

/* --- Dashboard: "Your folders" grid (5 tiles) --- */
.wp-folder-section { margin-top: 0.25rem; }
.wp-section-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--text-dark);
    margin: 0 0 1rem;
    font-weight: 400;
}
.wp-folder-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}
.wp-folder-tile {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid rgba(13,43,103,0.06);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(13,43,103,0.04);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, transform 0.2s;
    min-height: 120px;
    position: relative;
}
.wp-folder-tile:hover {
    box-shadow: 0 6px 18px rgba(13,43,103,0.08);
    transform: translateY(-1px);
}
.wp-folder-tile.locked { opacity: 0.6; cursor: pointer; }
.wp-folder-tile.locked:hover { opacity: 0.75; }
.wp-folder-tile-head { display: flex; align-items: center; justify-content: space-between; }
.wp-folder-tile-icon {
    width: 58px; height: 58px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #EFF4FB;
    border-radius: 12px;
    color: var(--brand-primary, #0D2B67);
}
.wp-folder-tile-icon svg { width: 34px; height: 34px; }
.wp-folder-tile-arrow { color: var(--brand-primary, #0D2B67); }
.wp-folder-tile-lock { color: #9AA4B2; }
.wp-folder-tile-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.3;
    margin-top: auto;
}
.wp-folder-tile-count { font-size: 0.78rem; color: var(--text-body); }

/* --- Dashboard: "Recent documents" list --- */
.wp-doc-list { display: flex; flex-direction: column; gap: 0.6rem; }
.wp-doc-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    background: #fff;
    border: 1px solid rgba(13,43,103,0.06);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s;
}
.wp-doc-row:hover { box-shadow: 0 4px 14px rgba(13,43,103,0.06); }
.wp-doc-row-icon {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #EFF4FB;
    border-radius: 8px;
    color: var(--brand-primary, #0D2B67);
}
.wp-doc-row-icon svg { width: 18px; height: 18px; }
.wp-doc-row-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.wp-doc-row-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wp-doc-row-meta { font-size: 0.78rem; color: var(--text-body); }

/* --- KYC Reports page: search-bar card --- */
.wp-search-card .wp-search-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr 1fr auto;
    gap: 0.7rem;
}
.wp-search-card select,
.wp-search-card input[type="text"] {
    width: 100%;
    padding: 0.65rem 0.9rem;
    background: #F3F5F9;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--text-dark);
    font-family: inherit;
}
.wp-search-card select:focus,
.wp-search-card input[type="text"]:focus {
    outline: none;
    border-color: var(--brand-primary, #0D2B67);
    background: #fff;
}
.wp-search-card .btn {
    padding: 0.65rem 1.4rem;
    white-space: nowrap;
}

/* --- KYC Reports page: sub-tabs (My Reports / Favorites) --- */
.wp-sub-tabs {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    border-bottom: 1px solid #E5E7EB;
    margin-bottom: 1.1rem;
}
.wp-sub-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 0.15rem 0.8rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-body);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    background: none;
    border-top: none; border-left: none; border-right: none;
    font-family: inherit;
}
.wp-sub-tab:hover { color: var(--text-dark); }
.wp-sub-tab.active { color: var(--brand-primary, #0D2B67); border-bottom-color: var(--brand-primary, #0D2B67); }
.wp-sub-tab .wp-sub-tab-count {
    display: inline-flex;
    min-width: 20px; height: 20px;
    align-items: center; justify-content: center;
    padding: 0 6px;
    font-size: 0.72rem; font-weight: 700;
    background: #E5E7EB; color: var(--text-body);
    border-radius: 100px;
}
.wp-sub-tab.active .wp-sub-tab-count { background: var(--brand-primary, #0D2B67); color: #fff; }

/* --- KYC Reports: type pill (KYC Advanced, KYC UBO…) --- */
.wp-pill--type { background: #F3F4F6; color: #374151; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.04em; }

/* --- Buttons: Download (green pill), Buy Now (filled rectangle) --- */
.wp-btn-download {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.38rem 0.9rem;
    background: #16A34A;
    color: #fff !important;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 100px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}
.wp-btn-download:hover { background: #15803D; }
.wp-btn-download svg { width: 14px; height: 14px; }

.wp-btn-buy {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    background: var(--brand-primary, #0D2B67);
    color: #fff !important;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s;
}
.wp-btn-buy:hover { background: #082454; }

/* --- Pagination (Orders table) --- */
.wp-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 0.8rem;
}
.wp-pagination-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 1rem;
    background: #DDE7F4;
    color: var(--brand-primary, #0D2B67);
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 100px;
    text-decoration: none;
    border: none;
    cursor: pointer;
}
.wp-pagination-btn:hover { background: #CBD8EE; }
.wp-pagination-btn[disabled],
.wp-pagination-btn.disabled { opacity: 0.5; cursor: not-allowed; }
.wp-pagination-info { font-size: 0.85rem; color: var(--text-body); }

/* --- My Account: tabs row (intercalaire / pill style) --- */
.wp-tabs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem;
    margin-bottom: 1.5rem;
    background: #F4F7FC;
    border: 1px solid #E5EAF2;
    border-radius: 14px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
}
.wp-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 1.1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-body);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}
.wp-tab:hover {
    color: var(--text-dark);
    background: #EAF0F9;
}
.wp-tab.active {
    color: var(--brand-primary, #0D2B67);
    background: #fff;
    border-color: #D6DEEC;
    box-shadow: 0 1px 3px rgba(13, 43, 103, 0.08);
}
.wp-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--brand-primary, #0D2B67);
}
.wp-tab-icon svg { width: 20px; height: 20px; }
.wp-tab-panel { display: none; }
.wp-tab-panel.active { display: block; }

/* --- Inputs for my-account forms --- */
.wp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.wp-form-grid.single > .wp-field-full { grid-column: 1 / -1; }
.wp-field { display: flex; flex-direction: column; gap: 0.35rem; }
.wp-field-full { grid-column: 1 / -1; }
.wp-field label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-dark);
}
.wp-field .required { color: #DC2626; margin-left: 0.15rem; }
.wp-field input[type="text"],
.wp-field input[type="email"],
.wp-field input[type="password"],
.wp-field input[type="tel"],
.wp-field input[type="number"],
.wp-field select {
    width: 100%;
    padding: 0.7rem 0.9rem;
    background: #F3F5F9;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--text-dark);
    font-family: inherit;
}
.wp-field input:focus,
.wp-field select:focus {
    outline: none;
    border-color: var(--brand-primary, #0D2B67);
    background: #fff;
}
.wp-field-hint { font-size: 0.76rem; color: var(--text-body); }

/* --- File picker --- */
.wp-file-picker {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 0.9rem;
    background: #F3F5F9;
    border: 1px solid transparent;
    border-radius: 8px;
}
.wp-file-picker input[type="file"] { font-size: 0.85rem; color: var(--text-dark); }
.wp-file-picker-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--text-body);
    margin-top: 0.3rem;
}
.wp-file-picker-hint svg { width: 14px; height: 14px; }

/* --- Warning banner (Personal Information) --- */
.wp-warning-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    background: #FEF9C3;
    border-left: 4px solid #CA8A04;
    border-radius: 6px;
    margin-bottom: 1.25rem;
    color: #78350F;
    font-size: 0.88rem;
    line-height: 1.55;
}
.wp-warning-banner svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 0.1rem; }
.wp-warning-banner strong { color: #78350F; font-weight: 700; }

/* --- Toggle switch (2FA) --- */
.wp-toggle-row { display: flex; align-items: center; gap: 0.75rem; }
.wp-toggle {
    position: relative;
    display: inline-block;
    width: 42px; height: 24px;
}
.wp-toggle input { opacity: 0; width: 0; height: 0; }
.wp-toggle .wp-toggle-slider {
    position: absolute; inset: 0;
    background: #D1D5DB;
    border-radius: 100px;
    transition: background 0.2s;
    cursor: pointer;
}
.wp-toggle .wp-toggle-slider::before {
    content: "";
    position: absolute;
    left: 3px; top: 3px;
    width: 18px; height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.wp-toggle input:checked + .wp-toggle-slider { background: var(--brand-primary, #0D2B67); }
.wp-toggle input:checked + .wp-toggle-slider::before { transform: translateX(18px); }
.wp-toggle-label { font-size: 0.9rem; color: var(--text-body); }
.wp-toggle-label-value { font-weight: 600; color: var(--text-dark); }
.wp-toggle-label--stacked {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1.35;
}
.wp-toggle-label--stacked strong {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.95rem;
}
.wp-toggle-label--stacked em {
    font-style: normal;
    font-size: 0.85rem;
    color: var(--text-body);
}

/* --- Identity OK inline (small badge-style) --- */
.wp-identity-ok {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.9rem;
    background: #ECFDF5;
    border: 1px solid #BBF7D0;
    border-radius: 10px;
    color: #166534;
    font-size: 0.9rem;
    max-width: 100%;
}
.wp-identity-ok svg {
    width: 18px;
    height: 18px;
    color: #16A34A;
    flex-shrink: 0;
}
.wp-identity-ok strong { display: block; font-size: 0.92rem; color: #14532D; margin-bottom: 0.1rem; }
.wp-identity-ok span { display: block; font-size: 0.82rem; color: #166534; line-height: 1.35; }

/* --- Empty state --- */
.wp-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 2.5rem 1rem;
    text-align: center;
}
/* Constrain stray inline SVGs in empty-states (was rendering at 300×150 default) */
.wp-empty-state > svg {
    width: 40px;
    height: 40px;
    color: #9AA4B2;
    margin-bottom: 0.25rem;
}
.wp-empty-state h4 { margin: 0 0 0.15rem; color: var(--text-dark); font-size: 1rem; }
.wp-empty-state p { margin: 0; font-size: 0.88rem; color: var(--text-body); max-width: 440px; }
/* PNG empty-state variant */
.wp-empty-state-ico {
    width: 56px;
    height: 56px;
    object-fit: contain;
    margin-bottom: 0.4rem;
}
.wp-empty-state-icon {
    width: 56px; height: 56px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #EFF4FB;
    border-radius: 14px;
    color: var(--brand-primary, #0D2B67);
    margin-bottom: 0.5rem;
}
.wp-empty-state-icon svg { width: 28px; height: 28px; }
.wp-empty-state-title { font-weight: 700; font-style: italic; color: var(--text-dark); font-size: 1rem; }
.wp-empty-state-text { font-size: 0.85rem; color: var(--text-body); }

/* --- Wallet hero banner --- */
.wp-wallet-hero {
    background: linear-gradient(135deg, #2F5E94 0%, #0D2B67 100%);
    color: #fff;
    padding: 1.6rem 1.75rem;
    border-radius: 12px;
    margin-bottom: 1rem;
}
.wp-wallet-hero-label {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    opacity: 0.95;
    margin-bottom: 0.4rem;
}
.wp-wallet-hero-value {
    display: block;
    font-family: var(--font-serif);
    font-size: 2.5rem;
    line-height: 1;
    font-weight: 400;
}

.wp-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.wp-stat-tile {
    padding: 1rem 1.1rem;
    background: #F4F6FA;
    border-radius: 10px;
}
.wp-stat-tile-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--text-body);
    margin-bottom: 0.4rem;
}
.wp-stat-tile-value {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.35rem;
    color: var(--text-dark);
}
.wp-stat-tile-pill {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    background: #FEF9C3;
    color: #78350F;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 4px;
}

/* --- Top-up pricing tiles --- */
.wp-pricing-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.75rem;
}
.wp-pricing-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 0.75rem 1.25rem;
    background: #fff;
    border: 1.5px solid #E5E7EB;
    border-radius: 12px;
    text-align: center;
}
.wp-pricing-tile--featured { border-color: var(--brand-primary, #0D2B67); }
.wp-pricing-tile-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.22rem 0.75rem;
    background: var(--brand-primary, #0D2B67);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 100px;
    white-space: nowrap;
}
.wp-pricing-tile-credits {
    font-family: var(--font-serif);
    font-size: 1.85rem;
    color: var(--brand-primary, #0D2B67);
    font-weight: 400;
    line-height: 1;
}
.wp-pricing-tile-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--text-body);
}
.wp-pricing-tile-bonus {
    display: inline-block;
    padding: 0.12rem 0.55rem;
    background: #E6F4EA;
    color: #166534;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 100px;
    min-height: 20px;
    line-height: 1.4;
}
.wp-pricing-tile-bonus--placeholder { visibility: hidden; }
.wp-pricing-tile-price {
    font-size: 1rem;
    color: var(--text-dark);
    font-weight: 600;
    margin-top: 0.1rem;
}
.wp-pricing-tile .wp-btn-buy { margin-top: 0.35rem; width: 100%; padding: 0.45rem 0.6rem; font-size: 0.72rem; }

/* --- Transaction History table (dark header) --- */
.wp-table--dark thead th {
    background: #1F2937;
    color: #fff;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
}

/* --- Locked module modal --- */
.wp-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(13,43,103,0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
}
.wp-modal-backdrop.open { display: flex; }
.wp-modal {
    background: #fff;
    border-radius: 14px;
    max-width: 440px;
    width: 100%;
    padding: 2rem 2rem 1.75rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    text-align: center;
}
.wp-modal-icon {
    width: 60px; height: 60px;
    margin: 0 auto 1rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: #EFF4FB;
    color: var(--brand-primary, #0D2B67);
    border-radius: 50%;
}
.wp-modal-icon svg { width: 30px; height: 30px; }
.wp-modal h3 {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: var(--text-dark);
    margin: 0 0 0.55rem;
    font-weight: 400;
}
.wp-modal p { color: var(--text-body); font-size: 0.93rem; line-height: 1.55; margin: 0 0 1.5rem; }
.wp-modal-actions { display: flex; gap: 0.6rem; justify-content: center; }
.wp-modal-actions .btn { padding: 0.55rem 1.3rem; font-size: 0.85rem; }

/* --- Responsive --- */
@media (max-width: 960px) {
    .wp-folder-grid { grid-template-columns: repeat(2, 1fr); }
    .wp-pricing-grid { grid-template-columns: repeat(3, 1fr); }
    .wp-stat-grid { grid-template-columns: 1fr; }
    .wp-kpi-strip { grid-template-columns: 1fr; }
    .wp-search-card .wp-search-grid { grid-template-columns: 1fr; }
    .wp-form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .wp-folder-grid { grid-template-columns: 1fr; }
    .wp-pricing-grid { grid-template-columns: repeat(2, 1fr); }
    .wp-tabs { gap: 1rem; overflow-x: auto; }
    .wp-tab { white-space: nowrap; }
}

/* ==========================================================================
   REPORT TYPES — "View sample" button + right-side PDF viewer drawer
   Opens a fixed panel on the right with < > navigation across all samples.
   Download is hidden via PDF #toolbar=0 + context-menu blocker.
   ========================================================================== */
.report-sample-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem;
    border: 1px solid var(--brand-primary, #0D2B67);
    background: #fff;
    color: var(--brand-primary, #0D2B67);
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.1s;
    margin-top: 0.6rem;
}
.report-sample-btn:hover {
    background: var(--brand-primary, #0D2B67);
    color: #fff;
}
.report-sample-btn:active { transform: translateY(1px); }
.report-sample-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Country-flag badges next to "View sample" in each report header */
.report-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
    margin-top: 0.6rem;
}
.report-header-actions .report-sample-btn { margin-top: 0; }
.report-country-flags {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.55rem;
    background: #F4F6FB;
    border: 1px solid #E0E4EC;
    border-radius: 999px;
}
.report-country-flags img {
    width: 26px;
    height: 26px;
    display: block;
    object-fit: contain;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
@media (max-width: 520px) {
    .report-country-flags { padding: 0.22rem 0.4rem; gap: 0.3rem; }
    .report-country-flags img { width: 22px; height: 22px; }
}

/* Drawer (right side) */
.pdf-viewer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(13, 43, 103, 0.32);
    backdrop-filter: blur(2px);
    z-index: 1400;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.pdf-viewer-backdrop.open { opacity: 1; pointer-events: auto; }

.pdf-viewer-drawer {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(720px, 55vw);
    background: #0D2B67;
    color: #fff;
    z-index: 1500;
    transform: translateX(100%);
    transition: transform 0.28s ease-out;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.22);
}
.pdf-viewer-drawer.open { transform: translateX(0); }

.pdf-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}
.pdf-viewer-title-block { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.pdf-viewer-eyebrow {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 600;
}
.pdf-viewer-title-block h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 520px;
}
.pdf-viewer-close {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 0;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}
.pdf-viewer-close:hover { background: rgba(255, 255, 255, 0.2); }

.pdf-viewer-body {
    flex: 1 1 auto;
    position: relative;
    background: #f4f5f7;
    overflow: hidden;
}
.pdf-viewer-body iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.pdf-viewer-body.is-loading::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 34px; height: 34px;
    border: 3px solid rgba(13, 43, 103, 0.18);
    border-top-color: #0D2B67;
    border-radius: 50%;
    animation: pdf-viewer-spin 0.8s linear infinite;
}
@keyframes pdf-viewer-spin { to { transform: rotate(360deg); } }
/* Discreet watermark overlay to deter screenshot download attempts */
.pdf-viewer-watermark {
    position: absolute;
    bottom: 14px;
    right: 20px;
    padding: 0.3rem 0.7rem;
    background: rgba(13, 43, 103, 0.85);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    border-radius: 4px;
    pointer-events: none;
    user-select: none;
}

.pdf-viewer-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}
.pdf-viewer-arrow {
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
    transition: background 0.15s, transform 0.1s;
    flex-shrink: 0;
}
.pdf-viewer-arrow:hover { background: rgba(255, 255, 255, 0.22); }
.pdf-viewer-arrow:active { transform: scale(0.94); }
.pdf-viewer-arrow[disabled] { opacity: 0.35; cursor: not-allowed; }
.pdf-viewer-counter {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-align: center;
    flex: 1;
}

body.pdf-viewer-locked { overflow: hidden; }

/* --- Liseuse PDF.js : boutons d'action, pages dessinées sur canvas --- */
.pdf-viewer-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.pdf-viewer-btn {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.08); border: 0; color: #fff;
    border-radius: 50%; cursor: pointer; transition: background 0.15s; flex-shrink: 0;
}
.pdf-viewer-btn:hover { background: rgba(255, 255, 255, 0.2); }
.pdf-viewer-btn[hidden] { display: none; }
.pdf-viewer-body.pdf-viewer-canvas {
    overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
    padding: 16px; background: #eceef1;
}
.pdf-viewer-page {
    width: 100%; margin: 0 auto 14px; background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18); min-height: 40px;
}
.pdf-viewer-page:last-child { margin-bottom: 0; }
.pdf-viewer-page canvas { display: block; width: 100%; height: auto; }
.pdf-viewer-erreur { color: #6b7280; text-align: center; padding: 2rem 1rem; font-size: 0.9rem; }

/* ==========================================================================
   DASHBOARD — New KPI strip (4 cards) + Quick actions block (4 tiles)
   Added April 2026 — replaces the original "File(s) in progress / Documents"
   2-card strip.
   ========================================================================== */
.wp-dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.wp-dashboard-kpi {
    background: #fff;
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    border: 1px solid rgba(13,43,103,0.06);
    box-shadow: 0 2px 10px rgba(13,43,103,0.05);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}
.wp-dashboard-kpi-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-body);
    font-weight: 600;
}
.wp-dashboard-kpi-value {
    font-family: var(--font-serif);
    font-size: 2.1rem;
    line-height: 1.05;
    color: var(--text-dark);
    font-weight: 400;
    word-break: break-word;
}
.wp-dashboard-kpi-action {
    margin-top: 0.35rem;
    font-size: 0.82rem;
    color: var(--brand-primary, #0D2B67);
    font-weight: 600;
    text-decoration: none;
    align-self: flex-start;
}
.wp-dashboard-kpi-action:hover { text-decoration: underline; }

/* Quick actions grid (4 tiles with icon + title + subtitle) */
.wp-quick-actions {
    background: #fff;
    border-radius: 14px;
    padding: 1.5rem;
    border: 1px solid rgba(13,43,103,0.06);
    box-shadow: 0 2px 10px rgba(13,43,103,0.05);
}
.wp-quick-actions-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--text-dark);
    margin: 0 0 1rem;
    font-weight: 400;
}
.wp-quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.wp-quick-action {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1.1rem;
    border-radius: 10px;
    border: 1px solid rgba(13,43,103,0.08);
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
    min-width: 0;
}
.wp-quick-action:hover {
    box-shadow: 0 6px 18px rgba(13,43,103,0.08);
    transform: translateY(-1px);
    border-color: rgba(13,43,103,0.18);
}
.wp-quick-action-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: #EFF4FB;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--brand-primary, #0D2B67);
    margin-bottom: 0.15rem;
}
.wp-quick-action-icon svg { width: 24px; height: 24px; }
.wp-quick-action-icon .wp-ico { width: 28px; height: 28px; }
.wp-quick-action-icon:has(.wp-ico) { background: #F4F7FC; }
.wp-quick-action-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.25;
}
.wp-quick-action-sub {
    font-size: 0.8rem;
    color: var(--text-body);
    line-height: 1.35;
}

@media (max-width: 1100px) {
    .wp-dashboard-kpis,
    .wp-quick-actions-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .wp-dashboard-kpis,
    .wp-quick-actions-grid { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
    .pdf-viewer-drawer { width: 100vw; }
    .pdf-viewer-title-block h3 { max-width: none; font-size: 0.9rem; }
}

/* ==========================================================================
   SAMPLE POPUP — small PDF preview window anchored near "View sample" button
   ========================================================================== */
.sample-popup-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
    z-index: 1200;
}
.sample-popup-backdrop.open { opacity: 1; pointer-events: auto; }

.sample-popup {
    position: fixed;
    top: 80px;
    left: 80px;
    width: 520px;
    height: 640px;
    background: #fff;
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.32), 0 4px 12px rgba(15, 23, 42, 0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
    z-index: 1201;
}
.sample-popup.open {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.sample-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem 0.7rem 1.05rem;
    border-bottom: 1px solid var(--border-light, #e2e8f0);
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}
.sample-popup-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-dark, #1e293b);
    margin: 0;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.sample-popup-close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease, color 120ms ease;
}
.sample-popup-close:hover { background: rgba(15, 23, 42, 0.06); color: var(--text-dark, #1e293b); }

.sample-popup-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    background: #2b2f36;
}
.sample-popup-body iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (max-width: 640px) {
    .sample-popup {
        width: calc(100vw - 24px) !important;
        height: calc(100vh - 80px) !important;
        left: 12px !important;
        top: 40px !important;
    }
}

/* ==========================================================================
   WORKPLACE — PNG ICON SUPPORT
   Adds sizing for <img class="wp-ico"> elements used in place of inline SVGs
   inside sidebar, folder tiles, KPI strip, tabs, etc.
   ========================================================================== */
.wp-ico {
    display: inline-block;
    object-fit: contain;
    flex-shrink: 0;
    vertical-align: middle;
}
/* Sidebar: user-card action buttons (My Account / Contact) — scaled 1.5× */
.wp-user-action > .wp-ico { width: 24px; height: 24px; }
/* Sidebar: module nav items — scaled 1.5× */
.wp-nav-item > .wp-ico { width: 33px; height: 33px; }
/* Sidebar: log-out tint (PNG keeps its own colour — no filter needed) */
/* Dashboard: KPI strip icons (inside rounded square) — scaled 1.5× */
.wp-kpi-card-icon .wp-ico { width: 45px; height: 45px; }
/* Dashboard: folder tile icons (inside rounded square) — scaled 1.5× */
.wp-folder-tile-icon .wp-ico { width: 45px; height: 45px; }
/* Recent documents row icon — scaled 1.5× */
.wp-doc-row-icon .wp-ico { width: 33px; height: 33px; }
/* KYC Reports: sub-tab icons (My Reports / Favorites) — scaled 1.5× */
.wp-sub-tab > .wp-ico { width: 30px; height: 30px; }
/* My Account: main-tab icons (Profile / Billing / Credits Wallet) — pill/intercalaire style */
.wp-tab-icon .wp-ico { width: 20px; height: 20px; }
/* Section-title with leading icon (e.g. Recent invoices) */
.wp-section-title--with-icon {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.wp-section-title-ico { width: 22px; height: 22px; flex-shrink: 0; }
/* Tone down the soft-blue background behind PNG icons so the icons keep
   their own colour and don't fight the container tint */
.wp-folder-tile-icon:has(.wp-ico),
.wp-kpi-card-icon:has(.wp-ico),
.wp-tab-icon:has(.wp-ico) {
    background: #F4F7FC;
}

/* =========================================================
   TESTIMONIALS — Contextual cards + scrolling bandeau
   Deployed Apr 2026 on the V3 site
   Pattern C (hybrid) — cards on thematic pages, bandeau above footer on generic pages
   ========================================================= */

/* ---------- Contextual card grid (industries, about, resources) ---------- */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.testimonial-card {
    background: var(--bg-white);
    border: 1px solid var(--bg-border);
    border-left: 4px solid var(--brand-primary);
    border-radius: 4px;
    padding: 1.75rem 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: var(--transition);
}

.testimonial-card:hover {
    border-color: var(--brand-primary-light);
    border-left-color: var(--brand-primary-darker);
    box-shadow: 0 8px 24px rgba(30, 79, 133, 0.08);
    transform: translateY(-2px);
}

.testimonial-card::before {
    content: '\201C';
    font-family: var(--font-display);
    font-size: 3.25rem;
    line-height: 1;
    color: var(--brand-primary-light);
    opacity: 0.45;
    position: absolute;
    top: 0.6rem;
    right: 1rem;
    pointer-events: none;
}

.testimonial-card-quote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--text-dark);
    margin: 0 0 1.1rem;
    flex: 1 1 auto;
}

.testimonial-card-attribution {
    border-top: 1px solid var(--bg-border);
    padding-top: 0.9rem;
    margin-top: auto;
}

.testimonial-card-role {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--brand-primary-darker);
    letter-spacing: 0.02em;
}

.testimonial-card-sector {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
    line-height: 1.4;
}

/* Dark-band variant — when used on .dark-band section */
.dark-band .testimonial-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
    border-left-color: var(--brand-accent);
}
.dark-band .testimonial-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-left-color: #fff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}
.dark-band .testimonial-card::before { color: rgba(255, 255, 255, 0.25); }
.dark-band .testimonial-card-quote { color: rgba(255, 255, 255, 0.92); }
.dark-band .testimonial-card-attribution { border-top-color: rgba(255, 255, 255, 0.18); }
.dark-band .testimonial-card-role { color: var(--brand-accent); }
.dark-band .testimonial-card-sector { color: rgba(255, 255, 255, 0.7); }

/* ---------- Scrolling bandeau (same background as footer — seamless continuity) ---------- */
/* NOTE — sizing: all visible dimensions (padding, typo, gaps, item width)
   are scaled 1.5× versus the initial spec so the bandeau carries more
   weight above the footer and reads comfortably on large displays.
   Animation duration scaled 1.5× (70s → 105s) to preserve perceived
   scroll speed now that each card occupies more horizontal space. */
.testimonial-bandeau {
    /* Identical to .footer — map image + dark overlay, background-attachment: fixed
       gives a seamless parallax continuity between bandeau and footer */
    background-color: var(--text-dark);
    background-image:
        linear-gradient(rgba(10, 14, 22, 0.68), rgba(10, 14, 22, 0.72)),
        url('../images/AdobeStock_754707719.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    border-top: 0;
    border-bottom: 0;
    padding: 3.375rem 0;
    overflow: hidden;
    position: relative;
}

.testimonial-bandeau-eyebrow {
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.755rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--brand-primary-light);
    margin: 0 0 1.95rem;
}

.testimonial-bandeau-track {
    display: flex;
    gap: 3.75rem;
    width: max-content;
    animation: testimonial-bandeau-scroll 105s linear infinite;
}

.testimonial-bandeau:hover .testimonial-bandeau-track,
.testimonial-bandeau-track:focus-within {
    animation-play-state: paused;
}

.testimonial-bandeau-item {
    flex: 0 0 630px;
    max-width: 630px;
    padding: 0 1.875rem;
    border-left: 3px solid rgba(255, 255, 255, 0.22);
    display: flex;
    flex-direction: column;
    gap: 0.825rem;
}

.testimonial-bandeau-quote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.425rem;
    line-height: 1.5;
    color: #ffffff;
    margin: 0;
    /* Clamp to 4 lines to keep row height uniform */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.testimonial-bandeau-attr {
    font-family: var(--font-body);
    font-size: 1.17rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.35;
    margin-top: auto;
}
.testimonial-bandeau-attr strong {
    color: var(--brand-primary-light);
    font-weight: 700;
}

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

/* Accessibility: respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .testimonial-bandeau-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: auto;
    }
    .testimonial-bandeau-track > *:nth-child(n+6) {
        display: none; /* Show only first 5 items when animation disabled */
    }
}

@media (max-width: 640px) {
    .testimonial-bandeau { padding: 2.625rem 0; }
    .testimonial-bandeau-eyebrow { font-size: 1.35rem; margin: 0 0 1.5rem; }
    .testimonial-bandeau-item { flex-basis: 450px; max-width: 450px; padding: 0 1.35rem; }
    .testimonial-bandeau-quote { font-size: 1.35rem; -webkit-line-clamp: 5; }
    .testimonial-bandeau-attr { font-size: 1rem; }
}

/* =========================================================
   CERTIFICATION SECTION (About page) + REPORTS MODAL
   ========================================================= */

/* ---------- Pull-quote tagline used on the certification section ---------- */
.cert-pull-quote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.45rem;
    line-height: 1.45;
    color: var(--brand-primary-darker);
    border-left: 4px solid var(--brand-primary);
    padding: 0.25rem 0 0.25rem 1.1rem;
    margin: 0.25rem 0 1.3rem;
}

/* ---------- Trigger link inside the certification paragraph ---------- */
.cert-modal-trigger {
    color: var(--brand-primary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
}
.cert-modal-trigger:hover,
.cert-modal-trigger:focus-visible {
    color: var(--brand-primary-darker);
    text-decoration-color: var(--brand-primary-darker);
    outline: none;
}

/* ---------- Modal overlay + box ---------- */
.cert-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(30, 42, 58, 0.62);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease;
}
.cert-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.cert-modal-box {
    background: var(--bg-white);
    width: 100%;
    max-width: 780px;
    max-height: 85vh;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    padding: 2.25rem 2.25rem 1.5rem;
    position: relative;
    overflow-y: auto;
    transform: translateY(12px) scale(0.985);
    transition: transform 0.22s ease;
}
.cert-modal-overlay.is-open .cert-modal-box {
    transform: translateY(0) scale(1);
}

.cert-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.9rem;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: var(--transition);
}
.cert-modal-close:hover,
.cert-modal-close:focus-visible {
    background: var(--bg-light);
    color: var(--text-dark);
    outline: none;
}

.cert-modal-box h2 {
    font-family: var(--font-display);
    color: var(--text-dark);
    margin: 0 0 0.5rem;
    font-size: 1.55rem;
}
.cert-modal-lead {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0 0 1.5rem;
    line-height: 1.55;
}
.cert-modal-note {
    margin: 1.25rem 0 0;
    padding: 0.85rem 1rem;
    background: var(--bg-subtle);
    border-left: 3px solid var(--brand-primary-light);
    border-radius: 3px;
    font-size: 0.85rem;
    color: var(--text-body);
    line-height: 1.5;
}

/* ---------- List of annual certifications ---------- */
.cert-modal-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cert-modal-item {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--bg-border);
}
.cert-modal-item:last-child { border-bottom: 0; }

.cert-modal-year {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--brand-primary-darker);
    letter-spacing: 0.02em;
}
.cert-modal-meta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.cert-modal-meta strong {
    color: var(--text-dark);
    font-weight: 700;
    font-size: 0.95rem;
}
.cert-modal-meta span {
    color: var(--text-muted);
    font-size: 0.82rem;
}
.cert-modal-link {
    color: var(--brand-primary);
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--brand-primary);
    border-radius: 3px;
    white-space: nowrap;
    transition: var(--transition);
}
.cert-modal-link:hover,
.cert-modal-link:focus-visible {
    background: var(--brand-primary);
    color: #fff;
    outline: none;
}
.cert-modal-link[aria-disabled="true"] {
    color: var(--text-muted);
    border-color: var(--bg-border);
    pointer-events: none;
    background: var(--bg-subtle);
}

/* Disable body scroll when modal is open */
body.modal-open { overflow: hidden; }

@media (max-width: 640px) {
    .cert-modal-box { padding: 1.6rem 1.25rem 1rem; }
    .cert-modal-item {
        grid-template-columns: 56px 1fr;
        grid-template-rows: auto auto;
    }
    .cert-modal-link { grid-column: 2; justify-self: start; }
    .cert-pull-quote { font-size: 1.2rem; }
}

/* ==================== Welcome Dossier CTA (home) ==================== */
.welcome-cta-section {
    background: linear-gradient(135deg, #f3f6fb 0%, #e8eef7 100%);
    padding: 4.5rem 0;
}
.welcome-cta-card {
    background: #ffffff;
    border-radius: var(--radius-lg, 14px);
    padding: 3.5rem 3rem;
    box-shadow: 0 10px 40px rgba(13, 43, 103, 0.08);
    border: 1px solid rgba(13, 43, 103, 0.08);
    max-width: 1080px;
    margin: 0 auto;
}
.welcome-cta-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 2.75rem;
}
.welcome-cta-badge {
    display: inline-block;
    background: var(--brand-accent, #E67E22);
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
}
.welcome-cta-header h2 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-dark, #0d2b67);
    margin: 0 0 0.9rem;
    font-style: italic;
}
.welcome-cta-lead {
    font-size: 1.05rem;
    color: var(--text-body, #333);
    line-height: 1.55;
    margin: 0;
}
.welcome-cta-pieces {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 2rem;
    margin-bottom: 2.5rem;
}
.welcome-cta-piece {
    position: relative;
    padding: 1.3rem 1.3rem 1.3rem 3.8rem;
    background: #fbfcfe;
    border-radius: 10px;
    border: 1px solid rgba(13, 43, 103, 0.07);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.welcome-cta-piece:hover {
    box-shadow: 0 4px 16px rgba(13, 43, 103, 0.08);
    transform: translateY(-2px);
}
.welcome-cta-num {
    position: absolute;
    left: 1.2rem;
    top: 1.15rem;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--brand-accent, #E67E22);
    line-height: 1;
}
.welcome-cta-piece h4 {
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text-dark, #0d2b67);
    margin: 0 0 0.45rem;
    line-height: 1.3;
}
.welcome-cta-piece p {
    font-size: 0.85rem;
    color: var(--text-body, #555);
    line-height: 1.5;
    margin: 0;
}
.welcome-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(13, 43, 103, 0.08);
}
.welcome-cta-actions .btn.btn-lg {
    padding: 0.9rem 2rem;
    font-size: 1rem;
    font-weight: 700;
}
.welcome-cta-learnmore {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--brand-primary, #0d2b67);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}
.welcome-cta-learnmore:hover {
    color: var(--brand-accent, #E67E22);
    text-decoration: underline;
}
.welcome-cta-note {
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted, #6b7280);
    margin: 1.2rem 0 0;
    font-style: italic;
}
@media (max-width: 900px) {
    .welcome-cta-pieces { grid-template-columns: repeat(2, 1fr); }
    .welcome-cta-card { padding: 2.5rem 1.5rem; }
}
@media (max-width: 600px) {
    .welcome-cta-pieces { grid-template-columns: 1fr; }
    .welcome-cta-piece { padding: 1.1rem 1.1rem 1.1rem 3.3rem; }
}

/* ==================== Welcome Dossier — dedicated page ==================== */
body[data-page="welcome-dossier"] .page-hero {
    background:
        linear-gradient(135deg, rgba(13, 43, 103, 0.90) 0%, rgba(13, 43, 103, 0.70) 60%, rgba(230, 126, 34, 0.35) 100%),
        linear-gradient(135deg, var(--brand-primary-darker) 0%, var(--brand-primary) 100%);
}

.dossier-piece {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 1.5rem;
    padding: 2.2rem 0;
    border-top: 1px solid rgba(13, 43, 103, 0.10);
    align-items: start;
}
.dossier-piece:first-of-type {
    border-top: none;
    padding-top: 0;
}
.dossier-piece-num {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    color: var(--brand-accent, #E67E22);
    line-height: 1;
    letter-spacing: -0.02em;
}
.dossier-piece-body h3 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-dark, #0d2b67);
    margin: 0 0 0.75rem;
    line-height: 1.3;
}
.dossier-piece-body p {
    color: var(--text-body, #333);
    line-height: 1.6;
    margin: 0 0 0.75rem;
}
.dossier-piece-body p:last-child {
    margin-bottom: 0;
}
.dossier-piece-benefit {
    background: rgba(13, 43, 103, 0.045);
    border-left: 3px solid var(--brand-accent, #E67E22);
    padding: 0.75rem 1rem;
    border-radius: 0 6px 6px 0;
    font-size: 0.92rem;
    color: var(--text-body, #333);
    font-style: italic;
}

.dossier-checklist {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}
.dossier-checklist li {
    position: relative;
    padding: 0.35rem 0 0.35rem 1.8rem;
    color: var(--text-body, #333);
    font-size: 0.93rem;
    line-height: 1.5;
}
.dossier-checklist li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0.35rem;
    color: var(--brand-accent, #E67E22);
    font-weight: 700;
    font-size: 1.05rem;
}

.dossier-timeline {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    counter-reset: step;
}
.dossier-timeline li {
    position: relative;
    padding: 0.6rem 0 0.6rem 0;
    color: var(--text-body, #333);
    line-height: 1.55;
    border-bottom: 1px dashed rgba(13, 43, 103, 0.12);
}
.dossier-timeline li:last-child {
    border-bottom: none;
}

.faq-item {
    background: #fbfcfe;
    border: 1px solid rgba(13, 43, 103, 0.08);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}
.faq-item summary {
    padding: 1rem 1.25rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-dark, #0d2b67);
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 2.5rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--brand-accent, #E67E22);
    transition: transform 0.2s ease;
}
.faq-item[open] summary::after {
    content: '−';
}
.faq-item[open] summary {
    border-bottom: 1px solid rgba(13, 43, 103, 0.08);
}
.faq-answer {
    padding: 1rem 1.25rem 1.2rem;
    color: var(--text-body, #333);
    line-height: 1.6;
    font-size: 0.95rem;
}
.faq-answer p {
    margin: 0;
}
.faq-answer a {
    color: var(--brand-primary);
    text-decoration: underline;
}

@media (max-width: 720px) {
    .dossier-piece { grid-template-columns: 1fr; gap: 0.6rem; }
    .dossier-piece-num { font-size: 2.2rem; }
}

/* Note: visual harmonisation of flag circle size is now handled at the
   image level — flag-tw.png and flag-mo.png were padded so their visible
   bbox matches CN/HK (~53×53 px in a 55×55 canvas). No CSS transform
   needed anymore. See Archives (old)/flag-{tw,mo}_original-55x55-full.png
   for the raw originals if a reset is ever required. */


/* ============================================================
   Language switcher — horizontal pill row in header (Design 2)
   (Option A: UI placeholder — clicking a non-EN language shows
   a "coming soon" toast until real translations are deployed)
============================================================ */
.lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin-right: 0.75rem;
    padding: 0.2rem 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}
.lang-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 0.28rem 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #6B7280;                 /* gris moyen franc — lettres non-actives (R-langue bar) */
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    font-family: inherit;
    letter-spacing: 0.04em;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.lang-item:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
}
.lang-item.is-active {
    background: #fff;
    color: var(--brand-primary, #0d2b67);
    cursor: default;
    font-weight: 700;
}
.lang-item.is-active:hover {
    background: #fff;
}
/* Light-background variant (scrolled header or non-overlay pages) */
.header.scrolled .lang-switcher,
.header:not(.header-overlay) .lang-switcher {
    border-color: rgba(13, 43, 103, 0.22);
    background: rgba(13, 43, 103, 0.04);
}
.header.scrolled .lang-item,
.header:not(.header-overlay) .lang-item {
    color: #7A8493;                 /* gris clair un peu plus foncé — meilleure lisibilité sur fond clair */
}
.header.scrolled .lang-item:hover,
.header:not(.header-overlay) .lang-item:hover {
    background: rgba(13, 43, 103, 0.10);
    color: var(--brand-primary, #0d2b67);
}
.header.scrolled .lang-item.is-active,
.header:not(.header-overlay) .lang-item.is-active {
    background: var(--brand-primary, #0d2b67);
    color: #fff;
}

/* Versions différées (relecture native en cours — Antoine, 5 sept. 2026) : bouton grisé,
   sans survol ; outils/traduire.py pose la classe (LANGUES_DIFFEREES), main.js répond
   « coming soon » faute de data-href. */
.lang-item.lang-differee,
.header.scrolled .lang-item.lang-differee,
.header:not(.header-overlay) .lang-item.lang-differee {
    color: #B4BBC6;
    opacity: 0.55;
    cursor: not-allowed;
}
.lang-item.lang-differee:hover,
.header.scrolled .lang-item.lang-differee:hover,
.header:not(.header-overlay) .lang-item.lang-differee:hover {
    background: transparent;
    color: #B4BBC6;
}

/* Toast for "coming soon" feedback */
.lang-toast {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(13, 43, 103, 0.96);
    color: #fff;
    padding: 0.85rem 1.6rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    z-index: 3000;
    opacity: 0;
    transition: opacity 220ms ease, transform 220ms ease;
    pointer-events: none;
    box-shadow: 0 8px 28px rgba(13, 42, 103, 0.32);
    max-width: calc(100vw - 40px);
    text-align: center;
}
.lang-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Responsive: on narrow screens, shrink the pills to keep them inline */
@media (max-width: 1100px) {
    .lang-switcher {
        margin-right: 0.3rem;
        gap: 0;
        padding: 0.12rem 0.25rem;
    }
    .lang-item {
        padding: 0.22rem 0.35rem;
        font-size: 0.72rem;
        min-width: 28px;
    }
}
@media (max-width: 430px) {
    .lang-switcher { padding: 0.1rem 0.18rem; }
    .lang-item { padding: 0.18rem 0.28rem; font-size: 0.68rem; min-width: 26px; }
}

/* ============================================================
   Legal binding notice — shown only on /<lang>/pages/legal/*
   to indicate that the English version is contractually binding.
   ============================================================ */
.legal-binding-notice {
    background: #fff8e6;
    border-left: 4px solid #d99e00;
    color: #6b4f00;
    padding: 0.85rem 1.2rem;
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    text-align: left;
}
.legal-binding-notice strong {
    color: #4a3500;
    margin-right: 0.3rem;
}

/* ---- pages légales : date de version et chapô ---- */
.legal-date {
    font-size: 0.84rem; color: var(--text-muted, #64748b);
    border-bottom: 1px solid var(--bg-border, #e2e8f0);
    padding-bottom: 0.7rem; margin-bottom: 1.6rem;
}
.legal-text .legal-lead {
    background: var(--brand-accent, #dbe6f5); border-radius: 8px;
    padding: 0.9rem 1.2rem; margin-bottom: 1.6rem;
}
.legal-text h2 { margin-top: 2.2rem; font-size: 1.15rem; }
.legal-text h3 { margin-top: 1.4rem; font-size: 1rem; }
.legal-text ul { margin: 0.6rem 0 1rem 1.2rem; }
.legal-text li { margin-bottom: 0.35rem; }


/* ---------- Menu sur une ligne jusqu'au menu mobile (1100px) ----------
   Entre 1100 et 1280px le menu passait sur deux lignes ; on resserre
   l'interlettrage plutôt que de laisser un libellé se couper. */
@media (max-width: 1280px) {
    .nav-menu > li > a { white-space: nowrap; letter-spacing: 0.08em; font-size: 0.8rem; padding: 0.5rem 0.55rem; }
}
/* ---------- Version française ----------
   Les libellés sont plus longs qu'en anglais (« Chine continentale »,
   « Recherche de sociétés ») : interlettrage et corps réduits d'un cran de plus. */
html[lang="fr"] .nav-menu > li > a { white-space: nowrap; letter-spacing: 0.08em; font-size: 0.84rem; }
@media (max-width: 1280px) {
    html[lang="fr"] .nav-menu > li > a { letter-spacing: 0.04em; font-size: 0.76rem; padding: 0.5rem 0.5rem; }
}
@media (max-width: 1180px) {
    html[lang="fr"] .nav-menu > li > a { letter-spacing: 0.02em; font-size: 0.72rem; padding: 0.5rem 0.4rem; }
}

/* ============================================================
   En-tete sur telephone  [entete-mobile]
   (venu de focus.css le 2 septembre 2026 : toutes les pages en ont besoin)
   ------------------------------------------------------------
   A 390 px, le logo, le selecteur de neuf langues, les deux
   pastilles d'action et le hamburger se disputaient la meme
   barre : le logo passait sous les pastilles et le selecteur
   etait coupe au bord gauche. Sous 767 px la barre ne garde
   que le logo et le hamburger. Les deux actions ne sont pas
   perdues pour autant — elles descendent dans le menu, ou
   elles sont ajoutees en fin de liste (`.nav-mobile-only`).
   Le selecteur de langues disparait : les versions traduites
   n'existent pas encore, il n'affiche qu'un message.          */
.nav-mobile-only { display: none; }

@media (max-width: 1100px) {
    .nav-menu .nav-mobile-only { display: block; }
    /*  Le trait separateur va sur la premiere des deux entrees, c'est-a-dire
        celle qui suit un element de navigation ordinaire — `:first-of-type`
        aurait designe « Mainland China », qui est le premier <li> du menu.  */
    .nav-menu > li:not(.nav-mobile-only) + .nav-mobile-only {
        margin-top: 0.5rem;
        padding-top: 0.6rem;
        border-top: 1px solid var(--bg-border, #e2e8f0);
    }
    .nav-menu > li.nav-mobile-accent > a,
    .header-overlay .nav-menu > li.nav-mobile-accent > a {
        color: var(--brand-orange, #e67e22);
        font-weight: 700;
    }
}

@media (max-width: 767px) {
    .header-top-row > .lang-switcher,
    .header-top-row > .header-actions { display: none; }
    /*  Le hamburger se retrouve seul a droite de la barre.  */
    .header-top-row { justify-content: space-between; }
}

/* ---------- Chinois traditionnel et vietnamien ----------
   Lato et Noto Serif Display n'ont pas de glyphes chinois : sur zh/, la
   pile bascule sur les polices CJK du système (PingFang sur Mac,
   Microsoft JhengHei sur Windows, Noto Sans TC ailleurs) après Lato,
   qui garde les chiffres et le latin. Les capitales espacées du menu
   n'ont pas de sens en chinois : interlettrage réduit. Le vietnamien est
   couvert par les sous-ensembles woff2 (U+1E00-1EFF) ; ses libellés,
   longs comme le français, reprennent la règle du menu sur une ligne. */
html[lang="zh-Hant"] {
    --font-body: 'Lato', 'PingFang TC', 'Hiragino Sans TC', 'Microsoft JhengHei', 'Noto Sans TC', 'Noto Sans CJK TC', sans-serif;
    --font-display: 'Noto Serif Display', 'Noto Serif TC', 'Songti TC', 'PMingLiU', 'Noto Serif CJK TC', serif;
}
html[lang="zh-Hant"] .nav-menu > li > a { letter-spacing: 0.06em; }
html[lang="vi"] .nav-menu > li > a { white-space: nowrap; letter-spacing: 0.08em; font-size: 0.84rem; }
@media (max-width: 1280px) {
    html[lang="vi"] .nav-menu > li > a { letter-spacing: 0.04em; font-size: 0.76rem; padding: 0.5rem 0.5rem; }
}
@media (max-width: 1180px) {
    html[lang="vi"] .nav-menu > li > a { letter-spacing: 0.02em; font-size: 0.72rem; padding: 0.5rem 0.4rem; }
}

/* ---------- Allemand, italien, espagnol ----------
   Mêmes libellés longs que le français (« Festlandchina », « Ricerca
   società », « Búsqueda de sociedades ») : même règle du menu sur une ligne. */
html[lang="de"] .nav-menu > li > a,
html[lang="it"] .nav-menu > li > a,
html[lang="es"] .nav-menu > li > a { white-space: nowrap; letter-spacing: 0.08em; font-size: 0.84rem; }
@media (max-width: 1280px) {
    html[lang="de"] .nav-menu > li > a,
    html[lang="it"] .nav-menu > li > a,
    html[lang="es"] .nav-menu > li > a { letter-spacing: 0.04em; font-size: 0.76rem; padding: 0.5rem 0.5rem; }
}
@media (max-width: 1180px) {
    html[lang="de"] .nav-menu > li > a,
    html[lang="it"] .nav-menu > li > a,
    html[lang="es"] .nav-menu > li > a { letter-spacing: 0.02em; font-size: 0.72rem; padding: 0.5rem 0.4rem; }
}

/* ---------- Russe, arabe, thaï (10 oct. 2026) ----------
   Lato et Noto Serif Display, tels que servis par optfonts/, n'ont ni cyrillique,
   ni thaï, ni arabe. Plutôt que de changer les piles de polices, on prolonge les
   deux familles par des faces limitées à ces écritures (unicode-range) : Noto Sans
   et Noto Serif Display cyrilliques, Noto Sans Thai et Noto Serif Thai — fichiers
   @fontsource 5.3.0, licence SIL OFL 1.1. Une page n'en télécharge que si elle
   contient un caractère de l'écriture. L'arabe suit le site CCSS : Noto Sans Arabic
   pour le texte, Noto Naskh Arabic pour les titres, et les règles [dir="rtl"]. */
@font-face { font-family: 'Lato'; src: url('../optfonts/noto-sans-cyrillic-300-normal.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Noto Serif Display'; src: url('../optfonts/noto-serif-display-cyrillic-300-normal.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Lato'; src: url('../optfonts/noto-sans-thai-thai-300-normal.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0E01-0E5B; }
@font-face { font-family: 'Noto Serif Display'; src: url('../optfonts/noto-serif-thai-thai-300-normal.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0E01-0E5B; }
@font-face { font-family: 'Noto Sans Arabic'; src: url('../optfonts/noto-sans-arabic-arabic-300-normal.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Lato'; src: url('../optfonts/noto-sans-cyrillic-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Noto Serif Display'; src: url('../optfonts/noto-serif-display-cyrillic-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Lato'; src: url('../optfonts/noto-sans-thai-thai-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0E01-0E5B; }
@font-face { font-family: 'Noto Serif Display'; src: url('../optfonts/noto-serif-thai-thai-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0E01-0E5B; }
@font-face { font-family: 'Noto Sans Arabic'; src: url('../optfonts/noto-sans-arabic-arabic-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Lato'; src: url('../optfonts/noto-sans-cyrillic-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Noto Serif Display'; src: url('../optfonts/noto-serif-display-cyrillic-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Lato'; src: url('../optfonts/noto-sans-thai-thai-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0E01-0E5B; }
@font-face { font-family: 'Noto Serif Display'; src: url('../optfonts/noto-serif-thai-thai-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0E01-0E5B; }
@font-face { font-family: 'Noto Sans Arabic'; src: url('../optfonts/noto-sans-arabic-arabic-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Lato'; src: url('../optfonts/noto-sans-cyrillic-900-normal.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Noto Serif Display'; src: url('../optfonts/noto-serif-display-cyrillic-900-normal.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Lato'; src: url('../optfonts/noto-sans-thai-thai-900-normal.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; unicode-range: U+0E01-0E5B; }
@font-face { font-family: 'Noto Serif Display'; src: url('../optfonts/noto-serif-thai-thai-900-normal.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; unicode-range: U+0E01-0E5B; }
@font-face { font-family: 'Noto Sans Arabic'; src: url('../optfonts/noto-sans-arabic-arabic-900-normal.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Noto Naskh Arabic'; src: url('../optfonts/noto-naskh-arabic-arabic-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Noto Naskh Arabic'; src: url('../optfonts/noto-naskh-arabic-arabic-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFC; }

/* L'arabe aussi dans les deux familles du site : sans cela, les éléments qui nomment
   Lato ou Noto Serif Display (titres d'accueil, menus, boutons) prenaient la police du
   système au lieu de Noto Sans Arabic / Noto Naskh Arabic. */
@font-face { font-family: 'Lato'; src: url('../optfonts/noto-sans-arabic-arabic-300-normal.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Lato'; src: url('../optfonts/noto-sans-arabic-arabic-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Lato'; src: url('../optfonts/noto-sans-arabic-arabic-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Lato'; src: url('../optfonts/noto-sans-arabic-arabic-900-normal.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Noto Serif Display'; src: url('../optfonts/noto-naskh-arabic-arabic-400-normal.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Noto Serif Display'; src: url('../optfonts/noto-naskh-arabic-arabic-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Noto Serif Display'; src: url('../optfonts/noto-naskh-arabic-arabic-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Noto Serif Display'; src: url('../optfonts/noto-naskh-arabic-arabic-700-normal.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFC; }

/* Dix langues dans la barre : entre 768 et 1 180 px environ, elle ne tient plus entre le
   logo et les deux boutons, et l'alignement à droite de la rangée la faisait déborder
   sur le logo. Comme sur CCSS au téléphone, elle se resserre à la place disponible et
   défile horizontalement ; quand tout tient, rien ne change. */
.header-top-row > .lang-switcher { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.header-top-row > .lang-switcher::-webkit-scrollbar { display: none; }
.header-top-row > .lang-switcher .lang-item { flex-shrink: 0; }
@media (min-width: 768px) and (max-width: 1100px) {
    .header-top-row > .lang-switcher { min-width: 112px; }
    .header-top-row > .header-actions { gap: 0.45rem; }
    .header-top-row > .header-actions .btn { font-size: 0.64rem; padding: 0.5rem 0.75rem; letter-spacing: 0.05em; }
}

/* Russe : libellés du menu aussi longs que l'allemand — même règle. */
html[lang="ru"] .nav-menu > li > a { white-space: nowrap; letter-spacing: 0.06em; font-size: 0.82rem; }
@media (max-width: 1280px) {
    html[lang="ru"] .nav-menu > li > a { letter-spacing: 0.03em; font-size: 0.74rem; padding: 0.5rem 0.45rem; }
}
@media (max-width: 1180px) {
    html[lang="ru"] .nav-menu > li > a { letter-spacing: 0.01em; font-size: 0.7rem; padding: 0.5rem 0.35rem; }
}

/* Thaï : pas d'interlettrage (il sépare les voyelles et les tons de leur consonne), et un
   interligne plus ouvert pour les signes suscrits et souscrits. */
html[lang="th"] *, html[lang="ar"] * { letter-spacing: 0 !important; }
html[lang="th"] body { line-height: 1.75; }
html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3, html[lang="th"] h4 { line-height: 1.4; }
html[lang="th"] .nav-menu > li > a { white-space: nowrap; font-size: 0.9rem; }
@media (max-width: 1280px) { html[lang="th"] .nav-menu > li > a { font-size: 0.82rem; padding: 0.5rem 0.5rem; } }

/* ============================================================
   Arabe — lecture de droite à gauche, repris du site CCSS
   (css/style.css de CcssWebV3, « I18N — Right-to-Left support »).
   L'en-tête garde la disposition de l'anglais, comme sur CCSS :
   barre des langues à gauche, boutons à droite, langues dans
   le même ordre.
   ============================================================ */
[dir="rtl"] { direction: rtl; text-align: right; }
[dir="rtl"] body { font-family: 'Noto Sans Arabic', 'Segoe UI', 'Tahoma', 'Lato', system-ui, sans-serif; line-height: 1.8; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .section-eyebrow {
    font-family: 'Noto Naskh Arabic', 'Amiri', 'Noto Serif Display', serif;
    line-height: 1.45;
}
[dir="rtl"] .header-inner,
[dir="rtl"] .header-top-row,
[dir="rtl"] .header-actions,
[dir="rtl"] .lang-switcher { flex-direction: row-reverse; }
[dir="rtl"] .nav-menu { flex-direction: row-reverse; }
[dir="rtl"] .dropdown-menu { left: auto; right: 0; text-align: right; }
[dir="rtl"] ul, [dir="rtl"] ol { padding-right: 1.2em; padding-left: 0; }
[dir="rtl"] .checklist li { padding-right: 1.6em; padding-left: 0; }
[dir="rtl"] .checklist li::before { right: 0; left: auto; }
[dir="rtl"] .hero-card, [dir="rtl"] .process-step { text-align: right; }
[dir="rtl"] .hero-cta-group { flex-direction: row-reverse; justify-content: flex-start; }
[dir="rtl"] .footer-grid, [dir="rtl"] .footer-bottom { direction: rtl; text-align: right; }
[dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select, [dir="rtl"] label { text-align: right; direction: rtl; }
[dir="rtl"] th, [dir="rtl"] td { text-align: right; }
[dir="rtl"] .stat-tile { border-left: 1px solid var(--bg-border); border-right: 4px solid var(--brand-primary-dark); }
[dir="rtl"] .breadcrumb-nav, [dir="rtl"] .section-anchors { direction: rtl; }
/* Les adresses, courriels, numéros et codes restent de gauche à droite. */
[dir="rtl"] a[href^="mailto:"], [dir="rtl"] a[href^="tel:"] { direction: ltr; unicode-bidi: isolate; }
/* Le lien d'évitement est rangé hors écran à gauche : en lecture de droite à gauche, ce
   débord devient défilable et décale toute la page. On le range à droite. */
[dir="rtl"] .skip-link { left: auto; right: -999px; }
[dir="rtl"] .skip-link:focus { left: auto; right: 0.5rem; }
/* Accueil : les deux titres se font face, en miroir. */
[dir="rtl"] .hero-title-bottom { text-align: right; }
[dir="rtl"] .hero-title-top { text-align: left; }
/* Russe : les mots du titre d'accueil sont longs (« иностранные ») — corps réduit. */
html[lang="ru"] .hero-title-top, html[lang="ru"] .hero-title-bottom { font-size: clamp(2rem, 4.4vw, 4.2rem); }

/* Lien d'évitement (accessibilité, audit v4, 5 sept. 2026) : invisible jusqu'au focus clavier. */
.skip-link { position: absolute; left: -999px; top: 0.5rem; z-index: 3000; background: #092F66; color: #fff; padding: 0.6rem 1rem; border-radius: 6px; font-weight: 600; text-decoration: none; }
.skip-link:focus { left: 0.5rem; outline: 3px solid #E67E22; }
.footer .footer-heading { margin-top: 0; }

/*  Bandeau d'angle « coming soon » — 20 septembre 2026.
    CCSS n'est pas encore ouvert : la bande porte un ruban en coin haut-gauche,
    et le lien vers china-company-search.com devient inerte (ni href, ni survol).  */
.band-soon { position: relative; overflow: hidden; }
.band-soon > .corner-ribbon {
  position: absolute; top: 0; left: 0; z-index: 2;
  width: 230px; padding: .45rem 0;
  transform: translate(-48px, 52px) rotate(-45deg);
  background: rgba(230, 126, 34, .58);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  color: #fff; text-shadow: 0 1px 2px rgba(13,43,103,.45);
  font-family: var(--font-body);
  font-size: .74rem; font-weight: 700; letter-spacing: .10em;
  text-transform: uppercase; text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  pointer-events: none;
}
.btn.is-inert { cursor: default; pointer-events: none; opacity: .72; }
@media (max-width: 640px) {
  .band-soon > .corner-ribbon {
    width: 188px; font-size: .64rem;
    transform: translate(-44px, 46px) rotate(-45deg);
  }
}