/* Lato self-hosted */
    @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/S6u9w4BMUTPHh7USSwiPGQ3q5d0.woff2') format('woff2'); }
    @font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/S6u8w4BMUTPHjxsAUi-qNiXg7eU0.woff2') format('woff2'); }
    @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/S6u9w4BMUTPHh6UVSwaPGQ3q5d0N7w.woff2') format('woff2'); }
    @font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap; src: url('/assets/fonts/S6u_w4BMUTPHjxsI9w2_Gwftx9897g.woff2') format('woff2'); }

    /* Cormorant Garamond self-hosté — italique 500 uniquement (citations testimonials + case study), latin + latin-ext */
    @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('/assets/fonts/cormorant-garamond-italic-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
    @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('/assets/fonts/cormorant-garamond-italic-500-latinext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

    /* Design tokens */
    :root {
      --petrole-deep: #001b24; --petrole-dark: #003540; --green-dark: #004953; --green-mid: #006675; --green-vibrant: #00B77F; --green-bright: #00C588; --green-pale: #E6F8F0;
      --gold-dark: #8A6010; --gold-mid: #C8A018; --gold-laurel: #9C7F5A; --gold-light: #D4B062; --gold-pale: #F4ECD6;
      --ivory: #FBF7EF; --paper: #FFFFFF; --gray-900: #1A1A1A; --gray-700: #404040; --gray-600: #555555; --gray-500: #6B6B6B; --gray-300: #C4C4C4; --gray-100: #ECECEC; --gray-50: #F7F7F5;
      --surface-glass: rgba(255, 255, 255, 0.62); --surface-glass-strong: rgba(255, 255, 255, 0.82); --surface-dark: rgba(0, 27, 36, 0.92);
      --font-body: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-serif: 'Cormorant Garamond', 'Times New Roman', 'Georgia', serif;
      --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
      --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px;
      --shadow-xs: 0 1px 2px rgba(0, 27, 36, 0.04); --shadow-sm: 0 2px 8px rgba(0, 27, 36, 0.06); --shadow-md: 0 8px 24px rgba(0, 27, 36, 0.08); --shadow-lg: 0 16px 40px rgba(0, 27, 36, 0.10); --shadow-xl: 0 24px 60px rgba(0, 27, 36, 0.14);
      --shadow-glow-green: 0 4px 18px rgba(0, 183, 127, 0.22); --shadow-glow-gold: 0 4px 18px rgba(200, 160, 24, 0.18);
      --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: 180ms var(--ease-out); --transition-base: 280ms var(--ease-out); --transition-slow: 420ms var(--ease-out);
      --container-max: 1320px; --container-narrow: 980px; --container-text: 720px; --header-h: 64px;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; tab-size: 4; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
    body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--gray-900); background: var(--ivory); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; position: relative; }

    /* Grain texture global subtil (premium touch) */
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 1000;
      opacity: 0.035;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
      mix-blend-mode: multiply;
    }
    @media (prefers-reduced-motion: reduce) { body::before { display: none; } }
    img, picture, svg, video { display: block; max-width: 100%; }
    img { height: auto; } /* préserve le ratio quand width/height sont déclarés (anti-CLS) sans déformer en responsive */
    img { height: auto; }
    a { color: var(--green-dark); text-decoration: none; transition: color var(--transition-fast); }
    a:hover { color: var(--green-vibrant); }
    a:focus-visible, button:focus-visible, [role="button"]:focus-visible, details:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 3px; border-radius: var(--radius-sm); }
    h1, h2, h3, h4, h5, h6 { font-family: var(--font-body); line-height: 1.15; letter-spacing: -0.01em; color: var(--green-dark); margin: 0; }
    p { margin: 0; }

    .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
    .skip-link { position: absolute; left: 0; top: -100px; background: var(--green-dark); color: var(--ivory); padding: 12px 20px; font-weight: 700; z-index: 9999; transition: top var(--transition-base); }
    .skip-link:focus { top: 0; }

    .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
    .container-narrow { max-width: var(--container-narrow); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }

    .section { padding-block: clamp(48px, 8vw, 96px); position: relative; }
    .section-tight { padding-block: clamp(32px, 6vw, 64px); }

    .bg-guilloche { position: relative; isolation: isolate; --guilloche-shift: 0px; }
    .bg-guilloche::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cdefs%3E%3Cpattern id='g' patternUnits='userSpaceOnUse' width='80' height='80'%3E%3Cpath d='M40 0 Q60 40 40 80 Q20 40 40 0 M0 40 Q40 60 80 40 Q40 20 0 40' fill='none' stroke='%23004953' stroke-width='0.5' opacity='0.10'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='240' height='240' fill='url(%23g)'/%3E%3C/svg%3E"); background-repeat: repeat; pointer-events: none; z-index: -1; transform: translateY(var(--guilloche-shift, 0px)); transition: transform 0.1s linear; will-change: transform; }
    .reviews-section { --guilloche-shift: 0px; }
    .reviews-section::before { transform: translateY(var(--guilloche-shift, 0px)); transition: transform 0.1s linear; will-change: transform; }
    .faq-section { --guilloche-shift: 0px; }
    .faq-section::before { transform: translateY(var(--guilloche-shift, 0px)); transition: transform 0.1s linear; will-change: transform; }

    .eyebrow { display: inline-block; font-family: var(--font-body); font-style: normal; font-size: 15px; font-weight: 900; letter-spacing: 0.10em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: var(--space-4); }
    .eyebrow::before { content: ""; display: inline-block; width: 28px; height: 2px; background: var(--gold-mid); vertical-align: middle; margin-right: 12px; }
    .section-title { font-size: clamp(28px, 4vw, 44px); font-weight: 900; letter-spacing: -0.02em; margin-bottom: var(--space-4); max-width: 680px; }
    .section-subtitle { font-size: clamp(15px, 1.5vw, 18px); color: var(--gray-700); line-height: 1.55; max-width: 680px; margin-bottom: var(--space-6); }
    .u-green { text-decoration: underline; text-decoration-color: var(--green-bright); text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-skip-ink: none; }
    .mission-card-title, .business-card-title, .ecom-card-title, .case-study-title, .section-title { font-family: var(--font-body) !important; font-style: normal !important; }

    /* Buttons */
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; font-family: var(--font-body); font-size: 15px; font-weight: 700; letter-spacing: 0.02em; border-radius: var(--radius-pill); border: none; cursor: pointer; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); text-align: center; white-space: nowrap; text-decoration: none; user-select: none; }
    .btn-primary { background: linear-gradient(135deg, var(--green-vibrant) 0%, var(--green-bright) 100%); color: var(--paper); box-shadow: var(--shadow-glow-green); position: relative; isolation: isolate; }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 183, 127, 0.36); color: var(--paper); }
    .btn-primary::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--fx-cta-border-angle), transparent 0%, #00B77F 20%, #5EEAD4 50%, #00B77F 80%, transparent 100%); -webkit-mask: linear-gradient(#fff,#fff) content-box, linear-gradient(#fff,#fff); mask: linear-gradient(#fff,#fff) content-box, linear-gradient(#fff,#fff); -webkit-mask-composite: xor; mask-composite: exclude; animation: fx-rotate-cta-border 3s linear infinite; pointer-events: none; z-index: -1; }
    @media (prefers-reduced-motion: reduce) { .btn-primary::before { display: none; } }
    .btn-secondary { background: rgba(0, 73, 83, 0.05); color: var(--green-dark); border: 1px solid rgba(0, 73, 83, 0.20); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
    .btn-secondary:hover { background: rgba(0, 73, 83, 0.12); border-color: rgba(0, 73, 83, 0.42); color: var(--green-dark); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
    .btn-ghost { background: rgba(255, 255, 255, 0.08); color: var(--ivory); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.16); }
    .btn-ghost:hover { background: rgba(255, 255, 255, 0.16); color: var(--ivory); }
    .btn-gold { background: linear-gradient(135deg, var(--gold-mid) 0%, var(--gold-dark) 100%); color: var(--ivory); box-shadow: var(--shadow-glow-gold); }
    .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(200, 160, 24, 0.32); color: var(--ivory); }
    .btn-amazon { background: linear-gradient(135deg, #FF9900 0%, #F77E0B 100%); color: #131A22; box-shadow: 0 4px 16px rgba(255, 153, 0, 0.36); }
    .btn-amazon:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255, 153, 0, 0.46); color: #131A22; }
    .btn-sm { padding: 10px 20px; font-size: 14px; }
    .btn-lg { padding: 18px 36px; font-size: 16px; }

    .gold-corners { position: relative; }
    .gold-corners::before, .gold-corners::after { content: ""; position: absolute; width: 28px; height: 28px; border: 2px solid var(--gold-laurel); pointer-events: none; z-index: 3; }
    .gold-corners::before { top: 12px; left: 12px; border-right: none; border-bottom: none; }
    .gold-corners::after { bottom: 12px; right: 12px; border-left: none; border-top: none; }

    /* HEADER — floating pill glassmorphism (matche Eurotrade) */
    .fenchell-nav {
      position: fixed;
      top: 12px;
      left: 16px;
      right: 16px;
      z-index: 99;
      padding: 0.35rem 0.5rem 0.35rem 1.6rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1.5rem;
      background-color: rgba(255, 255, 255, 0.18);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      border-top: 1px solid rgba(255, 255, 255, 0.55);
      border-radius: 62.5rem;
      box-shadow: 0 20px 28px rgba(0, 73, 83, 0.14);
      /* couche composite propre : supprime la couture de tuile du backdrop-filter (glitch logo/CTA) */
      transform: translateZ(0);
      will-change: transform;
    }
    .nav-brand { display: inline-flex; align-items: center; height: 32px; color: var(--green-dark); text-decoration: none; flex-shrink: 0; transition: opacity 0.15s ease; }
    .nav-brand:hover { opacity: 0.7; }
    .nav-brand-logo { height: 100%; width: auto; display: block; color: currentColor; }
    .nav-links { display: flex; gap: 26px; align-items: center; }
    .nav-links a { color: #1A1A1A; text-decoration: none; font-size: 13px; font-weight: 600; transition: color 0.15s; white-space: nowrap; }
    .nav-links a:hover { color: var(--green-vibrant); }
    .nav-cta { background: var(--green-vibrant); color: white !important; padding: 6px 20px; border-radius: 999px; font-weight: 700; letter-spacing: 0.04em; transition: background 0.15s, transform 0.15s, box-shadow 0.15s; box-shadow: 0 2px 8px rgba(0, 183, 127, 0.25); font-size: 13px; }
    .nav-cta:hover { background: var(--green-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 73, 83, 0.3); color: white; }

    /* Header adaptatif au fond — glassmorphisme conservé : verre clair + texte foncé sur sections claires, verre foncé + texte clair sur sections sombres (comme eurotrade) */
    .fenchell-nav { transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); }
    .nav-brand, .nav-links a:not(.nav-cta), .lang-switch, .lang-switch .lang-opt { transition: color var(--transition-base), background var(--transition-base), border-color var(--transition-base); }
    .fenchell-nav.over-dark { background-color: rgba(0, 27, 36, 0.34); border-top-color: rgba(255, 255, 255, 0.28); box-shadow: 0 20px 30px rgba(0, 0, 0, 0.24); }
    .fenchell-nav.over-dark .nav-brand { color: var(--ivory); }
    .fenchell-nav.over-dark .nav-links a:not(.nav-cta) { color: rgba(251, 247, 239, 0.90); }
    .fenchell-nav.over-dark .nav-links a:not(.nav-cta):hover { color: var(--green-vibrant); }
    .fenchell-nav.over-dark .nav-burger span { background: var(--ivory); }
    .fenchell-nav.over-dark .lang-switch { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.24); }
    .fenchell-nav.over-dark .lang-switch .lang-opt { color: rgba(251, 247, 239, 0.72); }

    .lang-switch { display: inline-flex; align-items: center; position: relative; padding: 0; background: rgba(0, 73, 83, 0.05); border: 1px solid #e0e0e0; border-radius: 999px; font-family: 'Lato', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; height: 30px; overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; }
    .lang-switch:hover { border-color: var(--green-vibrant); box-shadow: 0 0 0 3px rgba(0, 183, 127, 0.10); }
    .lang-switch .lang-opt { display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; height: 100%; color: #888; transition: color 0.2s, background 0.2s; position: relative; z-index: 2; text-decoration: none; }
    .lang-switch a.lang-opt { cursor: pointer; }
    .lang-switch a.lang-opt:hover { color: var(--green-dark); background: rgba(0, 183, 127, 0.08); }
    .lang-switch[data-current="fr"] .lang-opt.fr,
    .lang-switch[data-current="en"] .lang-opt.en,
    .lang-switch[data-current="zh"] .lang-opt.zh { color: white; background: var(--green-vibrant); }

    .nav-burger { display: none; width: 40px; height: 40px; border: none; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
    .nav-burger span { display: block; width: 22px; height: 2px; background: var(--green-dark); border-radius: 1px; transition: transform var(--transition-base); }

    @media (max-width: 920px) {
      .nav-links a:not(.nav-cta):not(.lang-switch) { display: none; }
      .nav-burger { display: flex; }
      .fenchell-nav { padding: 6px 14px; gap: 10px; }
      .nav-brand-logo { height: 26px; }
    }
    @media (max-width: 480px) {
      .nav-links a.nav-cta { display: none; }
      .lang-switch { font-size: 10px; }
      .lang-switch .lang-opt { padding: 0 8px; }
    }

    /* Mobile menu overlay */
    .nav-mobile { display: none; position: fixed; top: 72px; left: 16px; right: 16px; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 20px; padding: 12px; flex-direction: column; gap: 0; z-index: 98; box-shadow: 0 20px 60px rgba(0, 73, 83, 0.18); }
    .nav-mobile.open { display: flex; }
    .nav-mobile a { color: #333; padding: 14px 18px; font-size: 15px; font-weight: 700; border-bottom: 1px solid rgba(0, 73, 83, 0.06); text-decoration: none; transition: color 0.15s, background 0.15s; }
    .nav-mobile a:last-child { border-bottom: none; margin-top: 6px; }
    .nav-mobile a:hover { color: var(--green-vibrant); background: #f9fffe; }
    .nav-mobile a.nav-cta { background: var(--green-vibrant); color: white; text-align: center; border-radius: 999px; margin: 6px 8px 0; }
    .nav-mobile a.nav-cta:hover { background: var(--green-dark); }
    .nav-mobile-lang { display: inline-flex; gap: 4px; padding: 8px; justify-content: center; }
    .nav-mobile-lang .lang-opt { padding: 6px 14px; background: rgba(0, 73, 83, 0.05); border-radius: 999px; font-size: 12px; font-weight: 700; color: #666; text-decoration: none; }
    .nav-mobile-lang[data-current="fr"] .lang-opt.fr,
    .nav-mobile-lang[data-current="en"] .lang-opt.en,
    .nav-mobile-lang[data-current="zh"] .lang-opt.zh { background: var(--green-vibrant); color: white; }

    /* HERO */
    .hero { position: relative; overflow: hidden; padding-block: clamp(80px, 9vw, 128px) clamp(48px, 7vw, 96px); background: linear-gradient(180deg, var(--ivory) 0%, var(--paper) 100%); }
    .hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
    @media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; } }
    .hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px; background: rgba(0, 73, 83, 0.06); border: 1px solid rgba(0, 73, 83, 0.10); border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-dark); margin-bottom: var(--space-5); }
    .hero-eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-vibrant); box-shadow: 0 0 12px rgba(0, 183, 127, 0.6); animation: hero-pulse 2.4s infinite var(--ease-out); }
    @keyframes hero-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.2); } }
    .hero-title-gradient { font-size: clamp(36px, 6vw, 64px); font-weight: 900; line-height: 1.05; letter-spacing: -0.025em; color: var(--green-dark); margin-bottom: var(--space-5); max-width: 720px; }
    .hero-title-gradient .accent { background: linear-gradient(135deg, var(--green-vibrant) 0%, var(--gold-mid) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; display: inline; }
    .hero-subtitle { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: var(--gray-700); max-width: 560px; margin-bottom: var(--space-6); }
    .hero-subtitle strong { color: var(--green-dark); font-weight: 700; }
    .hero-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: var(--space-6); }
    .hero-trust-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: var(--space-6); padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 26px); background: rgba(255, 255, 255, 0.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(212, 176, 98, 0.30); border-radius: var(--radius-lg); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.85), 0 10px 30px rgba(0, 73, 83, 0.07); }
    @media (max-width: 640px) { .hero-trust-bar { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
    .hero-trust-item { display: flex; flex-direction: column; gap: 6px; }
    .hero-trust-num { font-size: clamp(22px, 2.2vw, 30px); font-weight: 900; color: var(--green-dark); line-height: 1; letter-spacing: -0.02em; display: inline-flex; align-items: baseline; gap: 1px; }
    .hero-trust-num .green { color: var(--green-vibrant); }
    .hero-trust-num-sub { font-size: 0.55em; font-weight: 700; color: var(--gray-500); letter-spacing: 0; }
    .hero-trust-label { font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--gray-500); }

    .hero-visual { position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-lg); isolation: isolate; }
    @media (max-width: 920px) { .hero-visual { aspect-ratio: 16 / 11; max-height: 60vh; } }
    .hero-visual picture, .hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center 65%; }
    .hero-visual-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 27, 36, 0) 72%, rgba(0, 27, 36, 0.34) 100%); z-index: 1; pointer-events: none; }
    .hero-visual-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(20px, 3vw, 32px); color: var(--ivory); z-index: 2; }
    .hero-visual-caption-inner { display: inline-block; padding: 14px 18px; background: rgba(0, 27, 36, 0.45); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-radius: var(--radius-md); border: 1px solid rgba(212, 176, 98, 0.22); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32); }
    .hero-visual-caption-label { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 6px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
    .hero-visual-caption-title { font-size: clamp(18px, 2vw, 22px); font-weight: 900; color: var(--ivory); line-height: 1.2; letter-spacing: -0.01em; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
    .hero-visual-caption-sub { font-size: 13px; color: rgba(251, 247, 239, 0.86); margin-top: 6px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }

    .speakable-summary { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; border: 0; }

    /* Partners bar — premium pétrole + or */
    .partners-bar { padding-block: clamp(40px, 6vw, 72px); background: linear-gradient(135deg, var(--petrole-deep) 0%, var(--green-dark) 100%); color: var(--ivory); position: relative; overflow: hidden; }
    .partners-bar::before { content: ""; position: absolute; top: -50%; left: -10%; width: 700px; height: 700px; background: radial-gradient(circle, rgba(212, 176, 98, 0.10) 0%, transparent 70%); pointer-events: none; }
    .partners-bar::after { content: ""; position: absolute; bottom: -50%; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(0, 183, 127, 0.08) 0%, transparent 70%); pointer-events: none; }
    .partners-bar-inner { position: relative; z-index: 1; }
    .partners-bar-eyebrow { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-light); margin-bottom: var(--space-6); }
    .partners-bar-eyebrow::before, .partners-bar-eyebrow::after { content: ""; display: block; width: 40px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-laurel), transparent); }
    .partners-bar-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(12px, 2vw, 24px); align-items: stretch; }
    @media (max-width: 920px) { .partners-bar-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 560px) { .partners-bar-grid { grid-template-columns: 1fr; } }

    .partner-logo {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 8px;
      padding: 20px 18px;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-radius: var(--radius-md);
      border: 1px solid rgba(212, 176, 98, 0.22);
      transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
      position: relative;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
      min-height: 110px;
    }
    .partner-logo:hover { transform: translateY(-3px); border-color: rgba(212, 176, 98, 0.55); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); }
    .partner-logo-img { max-width: 100%; max-height: 58px; width: auto; height: auto; object-fit: contain; }
    .partner-logo-img.is-square { max-height: 68px; max-width: 68px; }
    /* IBA Agency logo (inline SVG) — letter-box compositing avec marges */
    .partner-logo svg.partner-logo-img { max-height: 56px; width: auto; }
    .partner-logo-caption { font-size: 11.5px; line-height: 1.35; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dark); font-weight: 700; margin-top: 6px; text-align: center; padding-inline: 4px; }
    .partner-logo.lead { padding: 22px 24px; min-height: 130px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 245, 220, 0.94) 100%); border: 1.5px solid rgba(255, 153, 0, 0.4); box-shadow: 0 0 32px rgba(255, 153, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.8); }
    .partner-logo.lead .partner-logo-img { max-height: 72px; }
    .partner-logo.lead:hover { box-shadow: 0 12px 36px rgba(255, 153, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.8); border-color: rgba(255, 153, 0, 0.65); }
    .partner-logo.lead .partner-logo-caption { color: #7A4500; font-weight: 900; font-size: 12.5px; letter-spacing: 0.12em; }

    /* About section */
    .about-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: flex-start; }
    @media (max-width: 920px) { .about-grid { grid-template-columns: 1fr; } }
    .about-text p { font-size: clamp(15px, 1.4vw, 17px); line-height: 1.7; color: var(--gray-700); margin-bottom: var(--space-4); }
    .about-text p:last-child { margin-bottom: 0; }
    .about-text p strong { color: var(--green-dark); font-weight: 700; }
    .about-text .speakable-fact { display: block; padding: var(--space-4); background: linear-gradient(135deg, rgba(0, 183, 127, 0.06) 0%, rgba(200, 160, 24, 0.04) 100%); border-left: 3px solid var(--green-vibrant); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: 16px; font-style: italic; color: var(--green-dark); margin: var(--space-5) 0; line-height: 1.55; }

    /* Mission cards (2 lignes business) — layout horizontal */
    .mission-block { margin-top: var(--space-5); }
    .mission-block-eyebrow { display: block; font-size: 13px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: var(--space-3); }
    #about-title .accent { background: linear-gradient(135deg, var(--green-vibrant) 0%, var(--gold-mid) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
    .mission-grid { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
    .mission-card { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 6px clamp(16px, 2.5vw, 24px); padding: clamp(22px, 2.5vw, 30px) clamp(24px, 3vw, 34px); background: rgba(255, 255, 255, 0.06); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border-radius: var(--radius-lg); border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 8px 28px rgba(0, 73, 83, 0.06); transition: transform var(--transition-base), box-shadow var(--transition-base); overflow: hidden; }
    .mission-card:hover { transform: translateY(-2px); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 14px 36px rgba(0, 73, 83, 0.10); }
    .mission-card::before { content: ""; position: absolute; inset: 7px; background: #fff; border-radius: calc(var(--radius-lg) - 9px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); z-index: 0; pointer-events: none; }
    .mission-card > * { position: relative; z-index: 1; }
    .mission-card-num { grid-column: 1; grid-row: 1 / 3; display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--green-dark) 0%, var(--petrole-deep) 100%); color: #F4CF86; font-weight: 900; font-size: 28px; line-height: 1; text-align: center; box-shadow: inset 0 0 0 2px rgba(212, 176, 98, 0.5); flex-shrink: 0; align-self: start; }
    .mission-card-title { grid-column: 2; grid-row: 1; font-family: var(--font-body); font-style: normal; font-size: clamp(20px, 2vw, 25px); font-weight: 900; color: var(--green-dark); letter-spacing: -0.015em; line-height: 1.2; margin-top: 6px; }
    .mission-card-sub { grid-column: 2; grid-row: 2; font-size: clamp(13px, 1.3vw, 15px); color: var(--gray-700); line-height: 1.55; }
    .mission-card-tags { grid-column: 1 / 3; display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed rgba(0, 73, 83, 0.12); }
    .mission-card-tag { display: inline-block; padding: 5px 12px; background: rgba(0, 183, 127, 0.08); border: 1px solid rgba(0, 183, 127, 0.16); border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; color: var(--green-dark); letter-spacing: 0.02em; white-space: nowrap; }
    @media (max-width: 480px) {
      .mission-card { grid-template-columns: 1fr; }
      .mission-card-num { grid-column: 1; grid-row: 1; }
      .mission-card-title { grid-column: 1; grid-row: 2; }
      .mission-card-sub { grid-column: 1; grid-row: 3; }
      .mission-card-tags { grid-column: 1; }
    }
    .about-sidebar { display: flex; flex-direction: column; gap: var(--space-4); }

    .founder-card { display: flex; flex-direction: row; align-items: center; gap: var(--space-4); padding: var(--space-5); background: var(--surface-glass-strong); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: var(--radius-lg); border: 1px solid rgba(0, 73, 83, 0.08); transition: transform var(--transition-base), box-shadow var(--transition-base); }
    .founder-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
    .founder-avatar { width: 104px; height: 104px; border-radius: 50%; background: linear-gradient(135deg, var(--green-dark) 0%, var(--petrole-deep) 100%); color: var(--gold-light); font-weight: 900; font-size: 28px; letter-spacing: -0.02em; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: inset 0 0 0 2px rgba(212, 176, 98, 0.32); overflow: hidden; position: relative; }
    .founder-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; position: absolute; inset: 0; }
    .founder-info { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
    .founder-name { font-size: 16px; font-weight: 900; color: var(--green-dark); letter-spacing: -0.01em; }
    .founder-role { font-size: 12px; font-weight: 700; color: var(--gold-dark); letter-spacing: 0.06em; text-transform: uppercase; }
    .founder-bio { font-size: 13px; color: var(--gray-500); line-height: 1.45; margin-top: 6px; }
    .founder-linkedin { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #0a66c2; font-weight: 700; margin-top: 8px; }

    .office-card { padding: var(--space-5); background: var(--green-dark); color: var(--ivory); border-radius: var(--radius-lg); position: relative; overflow: hidden; }
    .office-card::before { content: ""; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; background: radial-gradient(circle, rgba(212, 176, 98, 0.18) 0%, transparent 70%); }
    .office-card-label { font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--gold-light); font-weight: 700; margin-bottom: var(--space-3); }
    .office-card-address { font-size: 15px; font-weight: 700; color: var(--ivory); line-height: 1.45; margin-bottom: var(--space-3); }
    .office-card-meta { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: rgba(251, 247, 239, 0.78); }
    .office-card-meta strong { color: var(--ivory); font-weight: 700; }
    .office-card-top { display: grid; grid-template-columns: 1fr minmax(150px, 230px); gap: var(--space-5); align-items: stretch; }
    @media (max-width: 600px) { .office-card-top { grid-template-columns: 1fr; } }
    .office-card-info { display: flex; flex-direction: column; }
    .office-card-photo { position: relative; margin: 0; border-radius: var(--radius-md); overflow: hidden; min-height: 168px; box-shadow: 0 12px 30px rgba(0, 27, 36, 0.34); border: 1px solid rgba(212, 176, 98, 0.32); }
    .office-card-photo picture { display: block; width: 100%; height: 100%; }
    .office-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; display: block; }
    .office-card-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 12px 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ivory); background: linear-gradient(to top, rgba(0, 27, 36, 0.82), transparent); }

    /* Bulgaria SVG map avec marker Plovdiv */
    .bulgaria-map { width: 100%; max-width: 440px; margin: var(--space-5) auto 0; display: block; }
    .bulgaria-map-shape { fill: rgba(212, 176, 98, 0.12); stroke: var(--gold-light); stroke-width: 1.2; stroke-linejoin: round; }
    .bulgaria-map-shape:hover { fill: rgba(212, 176, 98, 0.18); }
    .bulgaria-map-city { fill: var(--ivory); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; opacity: 0.7; }
    .bulgaria-map-city.is-plovdiv { fill: var(--gold-light); opacity: 1; font-size: 11px; font-weight: 900; }
    .bulgaria-map-pin { fill: var(--green-vibrant); }
    .bulgaria-map-pin-pulse { fill: var(--green-vibrant); transform-box: fill-box; transform-origin: center; animation: bulgaria-pin-pulse 2.4s var(--ease-out) infinite; }
    @keyframes bulgaria-pin-pulse {
      0% { transform: scale(1); opacity: 0.65; }
      80%, 100% { transform: scale(3); opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) { .bulgaria-map-pin-pulse { animation: none; } }

    /* Business section — fond pétrole pour séparer de about + ecommerce */
    .business-section { background: linear-gradient(135deg, var(--petrole-deep) 0%, var(--green-dark) 50%, var(--petrole-dark) 100%); color: var(--ivory); position: relative; overflow: hidden; }
    .business-section::before { content: ""; position: absolute; top: -30%; left: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(0, 183, 127, 0.12) 0%, transparent 70%); pointer-events: none; }
    .business-section::after { content: ""; position: absolute; bottom: -30%; right: -10%; width: 700px; height: 700px; background: radial-gradient(circle, rgba(212, 176, 98, 0.08) 0%, transparent 70%); pointer-events: none; }
    .business-section .container { position: relative; z-index: 1; }
    .business-section .eyebrow { color: var(--gold-light); }
    .business-section .eyebrow::before { background: var(--gold-light); }
    .business-section .section-title { color: var(--ivory); }
    .business-section .section-subtitle { color: rgba(251, 247, 239, 0.78); }
    .business-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 3vw, 28px); margin-top: var(--space-6); }
    @media (max-width: 820px) { .business-cards { grid-template-columns: 1fr; } }
    .business-card { position: relative; background: rgba(255, 255, 255, 0.07); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border-radius: var(--radius-xl); padding: clamp(30px, 4vw, 46px); border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24), inset 0 1px 1px rgba(255, 255, 255, 0.55); transition: transform var(--transition-base), box-shadow var(--transition-base); display: flex; flex-direction: column; isolation: isolate; overflow: hidden; color: var(--gray-900); }
    .business-card::after { content: ""; position: absolute; inset: 8px; background: #fff; border-radius: calc(var(--radius-xl) - 10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); z-index: 0; pointer-events: none; }
    .business-card > * { position: relative; z-index: 1; }
    .business-card::before { content: ""; position: absolute; top: 0; right: 0; width: 240px; height: 240px; background: radial-gradient(circle, rgba(0, 183, 127, 0.06) 0%, transparent 70%); pointer-events: none; z-index: -1; }
    .business-card:hover { transform: translateY(-4px); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28); }
    .business-card-icon { width: 56px; height: 56px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--green-vibrant) 0%, var(--green-bright) 100%); display: flex; align-items: center; justify-content: center; color: var(--paper); margin-bottom: var(--space-4); box-shadow: var(--shadow-glow-green); }
    .business-card-icon svg { width: 28px; height: 28px; }
    .business-card-photo { width: 100%; height: clamp(240px, 30vw, 310px); border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-5); box-shadow: 0 8px 22px rgba(0, 27, 36, 0.14); }
    .business-card-photo picture { display: block; width: 100%; height: 100%; }
    .business-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; }
    .business-card-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: var(--space-2); }
    .business-card-title { font-family: var(--font-body); font-style: normal; font-size: clamp(22px, 2.5vw, 28px); font-weight: 900; color: var(--green-dark); letter-spacing: -0.02em; line-height: 1.15; margin-bottom: var(--space-3); }
    .business-card-desc { font-size: 15px; color: var(--gray-700); line-height: 1.55; margin-bottom: var(--space-5); }
    .business-card-features { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: flex; flex-direction: column; gap: 10px; }
    .business-card-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--gray-700); line-height: 1.4; }
    .business-card-features li::before { content: ""; flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; background-color: var(--green-vibrant); -webkit-mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat; }
    .business-card-price { display: flex; align-items: baseline; gap: 10px; padding: 14px 18px; margin-top: auto; margin-bottom: var(--space-2); background: linear-gradient(135deg, rgba(0, 183, 127, 0.10) 0%, rgba(200, 160, 24, 0.06) 100%); border: 1px solid rgba(0, 183, 127, 0.22); border-radius: var(--radius-md); }
    .business-card-price-from { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-500); }
    .business-card-price-value { font-size: clamp(28px, 3.4vw, 38px); font-weight: 900; color: var(--green-dark); letter-spacing: -0.02em; line-height: 1; }
    .business-card-price-unit { font-size: 13px; color: var(--gray-500); font-weight: 700; }
    .business-card-price-note { font-size: 12.5px; color: var(--gray-500); margin: 0 0 var(--space-4); font-weight: 600; }
    .business-card-cta { margin-top: 0; }

    /* Ecommerce section */
    .ecom-section { background: linear-gradient(180deg, var(--paper) 0%, var(--ivory) 100%); position: relative; isolation: isolate; }
    .ecom-section::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cdefs%3E%3Cpattern id='g' patternUnits='userSpaceOnUse' width='80' height='80'%3E%3Cpath d='M40 0 Q60 40 40 80 Q20 40 40 0 M0 40 Q40 60 80 40 Q40 20 0 40' fill='none' stroke='%23004953' stroke-width='0.5' opacity='0.10'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='240' height='240' fill='url(%23g)'/%3E%3C/svg%3E"); background-repeat: repeat; pointer-events: none; z-index: -1; }
    .amazon-partner-banner { display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); padding: clamp(20px, 3vw, 32px); background: linear-gradient(135deg, #232F3E 0%, #131A22 100%); border-radius: var(--radius-xl); color: var(--ivory); margin-bottom: var(--space-6); position: relative; overflow: hidden; box-shadow: var(--shadow-md); }
    .amazon-partner-banner::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 40%; background: linear-gradient(135deg, transparent 0%, rgba(255, 153, 0, 0.18) 100%); pointer-events: none; }
    @media (max-width: 820px) { .amazon-partner-banner { flex-direction: column; align-items: flex-start; } }
    .amazon-partner-badge { flex-shrink: 0; padding: 14px 22px; background: linear-gradient(135deg, #FF9900 0%, #FFB347 100%); border-radius: var(--radius-md); font-size: 13px; font-weight: 900; letter-spacing: 0.04em; color: #131A22; display: flex; flex-direction: column; gap: 2px; line-height: 1.1; box-shadow: 0 4px 14px rgba(255, 153, 0, 0.32); }
    .amazon-partner-badge-tier { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.78; }
    .amazon-partner-text { flex: 1; min-width: 0; position: relative; z-index: 1; }
    .amazon-partner-title { font-size: clamp(17px, 2vw, 22px); font-weight: 900; color: var(--ivory); letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 4px; }
    .amazon-partner-desc { font-size: 14px; color: rgba(251, 247, 239, 0.78); line-height: 1.5; }

    .ecom-bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2vw, 22px); }
    @media (max-width: 640px) { .ecom-bento { grid-template-columns: 1fr; } }
    .ecom-card { position: relative; background: rgba(255, 255, 255, 0.06); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 32px); display: flex; flex-direction: column; transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); isolation: isolate; overflow: hidden; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 8px 24px rgba(0, 73, 83, 0.06); }
    .ecom-card:not(.ecom-card-feature)::before { content: ""; position: absolute; inset: 7px; background: var(--paper); border-radius: calc(var(--radius-lg) - 9px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); z-index: 0; pointer-events: none; }
    .ecom-card > * { position: relative; z-index: 1; }
    .ecom-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(255, 153, 0, 0.5); }
    .ecom-card-feature { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(24px, 4vw, 52px); align-items: center; background: linear-gradient(135deg, var(--petrole-deep) 0%, var(--green-dark) 100%); color: var(--ivory); border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.45), 0 16px 44px rgba(0, 27, 36, 0.28); padding: clamp(28px, 3.5vw, 44px); }
    @media (max-width: 760px) { .ecom-card-feature { grid-template-columns: 1fr; gap: var(--space-5); } }
    .ecom-feature-aside { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
    .ecom-feature-proof { margin: 0; }
    .ecom-feature-proof img { width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid rgba(255,255,255,0.22); box-shadow: 0 10px 30px rgba(0,27,36,0.34); display: block; }
    .ecom-feature-proof figcaption { margin-top: 8px; font-size: 12px; line-height: 1.45; color: rgba(251,247,239,0.74); }
    .ecom-card-feature { align-items: start; }
    .ecom-card-feature .amazon-partner-badge { align-self: flex-start; width: -moz-fit-content; width: fit-content; max-width: 100%; flex-direction: row; gap: 8px; margin-bottom: 14px; }
    .ecom-card-feature .ecom-card-desc a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 2px; }
    .ecom-card-feature .ecom-card-desc a:hover { color: #fff; }
    .ecom-card-feature::before { content: ""; position: absolute; top: -120px; right: -120px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(212, 176, 98, 0.16) 0%, transparent 70%); pointer-events: none; z-index: 0; }
    .ecom-card-feature::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: calc(var(--radius-lg) - 8px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20); pointer-events: none; z-index: 0; }
    .ecom-card-feature:hover { transform: translateY(-3px); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.45), var(--shadow-xl); }
    .ecom-card-feature .ecom-card-title { color: var(--ivory); font-size: clamp(22px, 2.6vw, 30px); }
    .ecom-card-feature .ecom-card-desc { color: rgba(251, 247, 239, 0.82); font-size: 15px; flex: none; }
    .ecom-card-feature .ecom-card-features li { color: rgba(251, 247, 239, 0.9); font-size: 14px; }
    .ecom-card-feature .ecom-card-tag { color: var(--gold-light); }
    .ecom-feature-main { display: flex; flex-direction: column; }
    .ecom-card-icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: linear-gradient(135deg, #FF9900 0%, #F77E0B 100%); display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: var(--space-4); box-shadow: 0 4px 14px rgba(255, 153, 0, 0.34); }
    .ecom-card-icon svg { width: 24px; height: 24px; }
    .ecom-card-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: var(--space-2); }
    .ecom-card-title { font-family: var(--font-body); font-style: normal; font-size: clamp(17px, 1.8vw, 21px); font-weight: 900; color: var(--green-dark); letter-spacing: -0.01em; line-height: 1.2; margin-bottom: var(--space-3); }
    .ecom-card-desc { font-size: 14px; color: var(--gray-700); line-height: 1.55; margin-bottom: var(--space-4); flex: 1; }
    .ecom-card-features { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: flex; flex-direction: column; gap: 6px; }
    .ecom-card-features li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--gray-700); line-height: 1.4; }
    .ecom-card-features li::before { content: ""; flex-shrink: 0; width: 14px; height: 14px; margin-top: 3px; background-color: var(--green-vibrant); -webkit-mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat; }
    .ecom-card-feature .ecom-card-features li::before { background-color: var(--gold-light); }
    .ecom-card-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--green-dark); margin-top: auto; transition: gap var(--transition-fast); position: relative; z-index: 3; }
    .ecom-card:hover .ecom-card-cta { gap: 12px; }
    .ecom-card-cta::after { content: "→"; transition: transform var(--transition-fast); }
    .ecom-card-feature .ecom-card-cta { color: var(--gold-light); font-size: 15px; }
    .ecom-card-feature .ecom-card-cta:hover { color: var(--gold-mid); }
    .ecom-card-link { position: absolute; inset: 0; z-index: 2; text-indent: -9999px; overflow: hidden; }

    /* Reviews */
    .reviews-section { background: var(--ivory); position: relative; isolation: isolate; }
    .reviews-section::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cdefs%3E%3Cpattern id='g' patternUnits='userSpaceOnUse' width='80' height='80'%3E%3Cpath d='M40 0 Q60 40 40 80 Q20 40 40 0 M0 40 Q40 60 80 40 Q40 20 0 40' fill='none' stroke='%23004953' stroke-width='0.5' opacity='0.10'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='240' height='240' fill='url(%23g)'/%3E%3C/svg%3E"); background-repeat: repeat; pointer-events: none; z-index: -1; }
    .reviews-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-5); margin-bottom: var(--space-6); }
    .ekomi-summary { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-5); background: linear-gradient(135deg, var(--green-pale) 0%, var(--ivory) 100%); border-radius: var(--radius-lg); border: 1px solid rgba(0, 183, 127, 0.12); }
    .ekomi-summary-rating { display: flex; flex-direction: column; align-items: center; padding-right: var(--space-5); border-right: 1px solid rgba(0, 73, 83, 0.10); flex-shrink: 0; }
    .ekomi-summary-score { font-size: clamp(32px, 4vw, 44px); font-weight: 900; color: var(--green-vibrant); line-height: 1; letter-spacing: -0.03em; }
    .ekomi-summary-max { font-size: 14px; color: var(--gray-500); font-weight: 700; margin-top: 2px; }
    .ekomi-summary-stars { display: inline-flex; gap: 2px; color: #F2B134; font-size: 20px; letter-spacing: 1px; margin: 4px 0; }
    .ekomi-summary-meta { display: flex; flex-direction: column; gap: 6px; }
    .ekomi-summary-meta-title { font-size: 16px; font-weight: 900; color: var(--green-dark); letter-spacing: -0.01em; }
    .ekomi-summary-meta-sub { font-size: 13px; color: var(--gray-700); line-height: 1.4; }
    .ekomi-summary-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--green-dark); }

    .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
    @media (max-width: 820px) { .testimonials-grid { grid-template-columns: 1fr; } }
    .testimonial-card { position: relative; padding: clamp(20px, 2.2vw, 28px); background: rgba(255, 255, 255, 0.04); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--space-3); transition: transform var(--transition-base), box-shadow var(--transition-base); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7), 0 8px 28px rgba(0, 73, 83, 0.06); }
    .testimonial-card::before { content: ""; position: absolute; inset: 6px; background: var(--paper); border: 1px solid rgba(255, 255, 255, 0.95); border-radius: calc(var(--radius-lg) - 7px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); z-index: 0; pointer-events: none; }
    .testimonial-card > * { position: relative; z-index: 1; }
    .testimonial-card:hover { transform: translateY(-3px); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7), var(--shadow-md); }
    .testimonial-card-stars { color: #F2B134; font-size: 17px; letter-spacing: 1px; }
    .testimonial-card-quote { font-family: var(--font-serif); font-style: italic; font-size: 16px; line-height: 1.55; color: var(--gray-900); margin: 0; flex: 1; }
    .testimonial-card-quote::before { content: "« "; color: var(--gold-laurel); font-weight: 700; }
    .testimonial-card-quote::after { content: " »"; color: var(--gold-laurel); font-weight: 700; }
    .testimonial-card-author { display: flex; align-items: center; gap: 10px; padding-top: var(--space-3); border-top: 1px solid var(--gray-100); }
    .testimonial-card-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--green-dark) 0%, var(--petrole-deep) 100%); color: var(--gold-light); font-weight: 900; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .testimonial-card-author-info { display: flex; flex-direction: column; line-height: 1.2; }
    .testimonial-card-author-name { font-size: 13px; font-weight: 900; color: var(--green-dark); }
    .testimonial-card-author-meta { font-size: 11px; color: var(--gray-500); font-weight: 700; letter-spacing: 0.04em; }

    /* Case study */
    .case-study-section { background: linear-gradient(165deg, var(--petrole-deep) 0%, var(--green-dark) 100%); position: relative; isolation: isolate; }
    .case-study-section .eyebrow { color: var(--gold-light); }
    .case-study-section .section-title { color: var(--ivory); }
    .case-study-section .section-subtitle { color: rgba(251, 247, 239, 0.80); }
    .case-study-card {
      display: grid;
      grid-template-columns: 320px 1fr;
      column-gap: clamp(20px, 4vw, 44px);
      row-gap: 0;
      align-items: stretch;
      margin-top: var(--space-6);
    }
    @media (max-width: 820px) { .case-study-card { grid-template-columns: 1fr; } .case-study-method { grid-column: auto; } }
    .case-study-aside {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: clamp(24px, 2.5vw, 30px);
      background: rgba(255, 255, 255, 0.07);
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
      color: var(--green-dark);
      border: 1px solid rgba(255, 255, 255, 0.5);
      border-radius: var(--radius-lg);
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 16px 44px rgba(0, 27, 36, 0.28);
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }
    .case-study-aside::before { content: ""; position: absolute; inset: 8px; background: #fff; border-radius: calc(var(--radius-lg) - 10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); z-index: 0; pointer-events: none; }
    .case-study-avatar { width: 88px; height: 88px; border-radius: 50%; background: linear-gradient(135deg, var(--green-vibrant) 0%, var(--green-bright) 100%); color: var(--paper); font-weight: 900; font-size: 26px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0, 183, 127, 0.32); position: relative; z-index: 1; }
    .case-study-aside-name { font-size: 18px; font-weight: 900; color: var(--green-dark); letter-spacing: -0.01em; position: relative; z-index: 1; }
    .case-study-aside-role { font-size: 12px; font-weight: 700; color: var(--gold-dark); letter-spacing: 0.10em; text-transform: uppercase; position: relative; z-index: 1; }
    .case-study-aside-meta { font-size: 12px; color: var(--gray-600); line-height: 1.5; position: relative; z-index: 1; padding-top: var(--space-3); border-top: 1px solid rgba(0, 73, 83, 0.12); width: 100%; }
    .case-study-aside-services { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: var(--space-3); position: relative; z-index: 1; }
    .case-study-aside-service { font-size: 10px; font-weight: 700; padding: 4px 10px; background: rgba(0, 183, 127, 0.1); border: 1px solid rgba(0, 183, 127, 0.28); border-radius: var(--radius-pill); color: var(--green-dark); letter-spacing: 0.02em; }

    .case-study-body {
      display: flex; flex-direction: column; gap: var(--space-5);
      position: relative; isolation: isolate;
      padding: clamp(22px, 3vw, 38px);
      background: rgba(255, 255, 255, 0.08);
      -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
      border: 1px solid rgba(255, 255, 255, 0.5);
      border-radius: var(--radius-lg);
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.55), 0 24px 60px rgba(0, 27, 36, 0.34);
      overflow: hidden;
    }
    .case-study-body::before { content: ""; position: absolute; inset: 8px; background: #fff; border-radius: calc(var(--radius-lg) - 8px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); z-index: 0; pointer-events: none; }
    .case-study-body > * { position: relative; z-index: 1; }
    .case-study-eyebrow { display: inline-block; font-family: var(--font-body); font-size: 12.5px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dark); }
    .case-study-title { font-family: var(--font-body); font-style: normal; font-size: clamp(22px, 3vw, 30px); font-weight: 900; color: var(--green-dark); letter-spacing: -0.02em; line-height: 1.2; }
    .case-study-quote { font-family: var(--font-serif); font-style: italic; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.65; color: var(--green-dark); padding-left: var(--space-4); border-left: 3px solid var(--gold-mid); }
    .case-study-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 20px); }
    @media (max-width: 560px) { .case-study-metrics { grid-template-columns: 1fr; } }
    .case-study-metric { padding: var(--space-4); background: linear-gradient(160deg, var(--green-pale) 0%, #ffffff 100%); border-radius: var(--radius-md); border: 1px solid rgba(0, 183, 127, 0.20); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 20px rgba(0, 73, 83, 0.06); }
    .case-study-metric-num { font-size: clamp(22px, 2.8vw, 32px); font-weight: 900; color: var(--green-vibrant); letter-spacing: -0.02em; line-height: 1; display: block; }
    .case-study-metric-num small { font-size: 0.50em; color: var(--green-dark); font-weight: 700; letter-spacing: 0; }
    .case-study-metric-label { font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--gray-600); margin-top: 6px; display: block; }
    .case-study-metric-trend { font-size: 10px; font-weight: 700; color: var(--green-vibrant); margin-top: 2px; }
    .case-study-method { grid-column: 2; margin: var(--space-4) 0 0; padding-top: var(--space-4); border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 12px; line-height: 1.55; color: rgba(251, 247, 239, 0.52); }
    .case-study-method strong { color: rgba(212, 176, 98, 0.88); font-weight: 700; }

    /* Lottie / Animated SVG icons */
    .lottie-mission { width: 56px; height: 56px; }
    .animated-icon-stroke { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw-stroke 1.4s 0.3s var(--ease-out) forwards; }
    @keyframes draw-stroke { to { stroke-dashoffset: 0; } }
    @media (prefers-reduced-motion: reduce) { .animated-icon-stroke { animation: none; stroke-dashoffset: 0; } }

    /* FAQ */
    .faq-section { background: var(--ivory); position: relative; isolation: isolate; }
    .faq-section::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cdefs%3E%3Cpattern id='g' patternUnits='userSpaceOnUse' width='80' height='80'%3E%3Cpath d='M40 0 Q60 40 40 80 Q20 40 40 0 M0 40 Q40 60 80 40 Q40 20 0 40' fill='none' stroke='%23004953' stroke-width='0.5' opacity='0.10'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='240' height='240' fill='url(%23g)'/%3E%3C/svg%3E"); background-repeat: repeat; pointer-events: none; z-index: -1; }
    /* FAQ en panneau verre double-cadre (eurotrade) sur guilloche */
    .faq-list { position: relative; display: flex; flex-direction: column; padding: clamp(8px, 1.4vw, 14px); background: rgba(255, 255, 255, 0.04); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: var(--radius-xl); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7), 0 10px 30px rgba(0, 73, 83, 0.06); }
    .faq-list::before { content: ""; position: absolute; inset: 7px; background: var(--paper); border: 1px solid rgba(255, 255, 255, 0.95); border-radius: calc(var(--radius-xl) - 9px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); z-index: 0; pointer-events: none; }
    .faq-item { position: relative; z-index: 1; background: transparent; border: none; border-bottom: 1px solid rgba(0, 73, 83, 0.08); border-radius: 0; overflow: visible; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .faq-item:last-child { border-bottom: none; }
    .faq-item[open] { box-shadow: none; border-color: rgba(0, 73, 83, 0.08); }
    .faq-item summary { padding: var(--space-5); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font-size: clamp(16px, 1.8vw, 19px); font-weight: 700; color: var(--green-dark); letter-spacing: -0.01em; transition: color var(--transition-fast); }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after { content: ""; flex-shrink: 0; width: 32px; height: 32px; background-color: rgba(0, 183, 127, 0.10); background-image: linear-gradient(var(--green-vibrant), var(--green-vibrant)), linear-gradient(var(--green-vibrant), var(--green-vibrant)); background-size: 13px 2px, 2px 13px; background-position: center, center; background-repeat: no-repeat; border-radius: 50%; transition: transform var(--transition-base), background-color var(--transition-fast); }
    .faq-item[open] summary::after { transform: rotate(45deg); background-color: var(--green-vibrant); background-image: linear-gradient(var(--paper), var(--paper)), linear-gradient(var(--paper), var(--paper)); }
    .faq-item summary:hover { color: var(--green-vibrant); }
    .faq-item-content { padding: 0 var(--space-5) var(--space-5); font-size: 15px; line-height: 1.65; color: var(--gray-700); }
    .faq-item-content p { margin-bottom: var(--space-3); }
    .faq-item-content p:last-child { margin-bottom: 0; }
    .faq-item-content a { font-weight: 700; }

    /* Final CTA */
    .final-cta { background: linear-gradient(135deg, var(--petrole-deep) 0%, var(--green-dark) 50%, var(--green-mid) 100%); color: var(--ivory); position: relative; overflow: hidden; }
    .final-cta::before { content: ""; position: absolute; top: -50%; right: -20%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(212, 176, 98, 0.18) 0%, transparent 70%); pointer-events: none; }
    .final-cta-inner { position: relative; z-index: 1; text-align: center; max-width: 780px; margin-inline: auto; }
    .final-cta-eyebrow { display: inline-block; padding: 6px 14px; background: rgba(212, 176, 98, 0.16); border: 1px solid rgba(212, 176, 98, 0.32); border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; color: var(--gold-light); margin-bottom: var(--space-4); }
    .final-cta-title { font-size: clamp(28px, 4vw, 42px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; color: var(--ivory); margin-bottom: var(--space-4); }
    .final-cta-title .accent { background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-mid) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
    .final-cta-subtitle { font-size: clamp(15px, 1.6vw, 18px); color: rgba(251, 247, 239, 0.82); max-width: 580px; margin: 0 auto var(--space-6); line-height: 1.55; }
    .final-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
    .final-cta-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-top: var(--space-6); font-size: 13px; color: rgba(251, 247, 239, 0.62); }
    .final-cta-meta-item { display: inline-flex; align-items: center; gap: 6px; }
    .final-cta-meta-item::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green-vibrant); }

    /* Footer */
    .site-footer { background: var(--petrole-deep); color: rgba(251, 247, 239, 0.78); padding-block: clamp(48px, 6vw, 80px) var(--space-5); }
    .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(24px, 4vw, 56px); padding-bottom: var(--space-6); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
    @media (max-width: 820px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
    .footer-brand { display: flex; flex-direction: column; gap: var(--space-3); }
    .footer-brand-name { font-size: 20px; font-weight: 900; color: var(--ivory); letter-spacing: -0.02em; }
    .footer-brand-desc { font-size: 13px; line-height: 1.55; color: rgba(251, 247, 239, 0.62); max-width: 320px; }
    .footer-brand-meta { font-size: 12px; color: rgba(251, 247, 239, 0.5); letter-spacing: 0.04em; }
    .footer-col-title { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light); font-weight: 700; margin-bottom: var(--space-4); }
    .footer-col-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
    .footer-col-list a { color: rgba(251, 247, 239, 0.78); font-size: 14px; font-weight: 400; transition: color var(--transition-fast); }
    .footer-col-list a:hover { color: var(--gold-light); }
    .footer-contact-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: rgba(251, 247, 239, 0.78); }
    .footer-contact-item svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 4px; color: var(--gold-light); }
    .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-5); font-size: 12px; color: rgba(251, 247, 239, 0.5); }
    .footer-bottom-langs { display: flex; gap: 8px; }
    .footer-bottom-langs a { padding: 4px 10px; background: rgba(255, 255, 255, 0.04); border-radius: var(--radius-pill); color: rgba(251, 247, 239, 0.62); transition: background var(--transition-fast), color var(--transition-fast); }
    .footer-bottom-langs a:hover, .footer-bottom-langs a.active { background: rgba(212, 176, 98, 0.18); color: var(--gold-light); }
    .footer-legal-links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
    .footer-legal-links a { color: rgba(251, 247, 239, 0.5); transition: color var(--transition-fast); }
    .footer-legal-links a:hover { color: var(--gold-light); }

    /* Floating CTA */
    .floating-cta { position: fixed; bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px)); right: 20px; z-index: 90; display: none; align-items: center; gap: 8px; padding: 12px 18px; background: linear-gradient(135deg, var(--green-vibrant) 0%, var(--green-bright) 100%); color: var(--paper); font-weight: 700; font-size: 14px; border-radius: var(--radius-pill); box-shadow: 0 8px 24px rgba(0, 183, 127, 0.4); transition: transform var(--transition-base), box-shadow var(--transition-base); text-decoration: none; }
    .floating-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 183, 127, 0.5); color: var(--paper); }
    .floating-cta.visible { display: inline-flex; }

    /* Responsive tweaks */
    @media (max-width: 640px) {
      .hero { padding-block: 32px; }
      .hero-cta-row { flex-direction: column; align-items: stretch; }
      .hero-cta-row .btn { width: 100%; }
      .business-card { padding: 20px; }
      .ecom-card { padding: 20px; }
      .final-cta-actions { flex-direction: column; align-items: stretch; }
      .final-cta-actions .btn { width: 100%; }
      .reviews-header { flex-direction: column; align-items: flex-start; }
      .ekomi-summary { width: 100%; }
    }

    @media print {
      .fenchell-nav, .nav-mobile, .floating-cta, .site-footer { display: none; }
      body { background: white; color: black; }
    }

    /* Perf mobile : retire le grain plein-ecran (mix-blend-mode, recompose tout le document) et allege les flous (backdrop-filter couteux en compositing sur GPU mobile). Esthetique conservee sur desktop. */
    @media (max-width: 767px) {
      body::before { display: none !important; }
      .fenchell-nav, .nav-mobile, .lang-switch, .founder-card, .mission-card, .business-card,
      .ecom-card, .testimonial-card, .ekomi-summary, .case-study-aside, .case-study-body, .faq-item {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
      }
    }
  


    /* ============================================================
       GUIDES / ARTICLES (hub editorial) — ajoute au design system
    ============================================================ */
    .guide-wrap { max-width: 820px; margin: 0 auto; padding: 88px 24px 0; }
    .pp-section .guide-wrap, .pp-proof-section .guide-wrap { padding-top: 0; }
    .breadcrumb { font-size: 13px; color: var(--gray-500); margin: 18px 0 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
    .breadcrumb a { color: var(--green-mid); text-decoration: none; }
    .breadcrumb a:hover { text-decoration: underline; }
    .breadcrumb span[aria-current] { color: var(--gray-700); }
    .guide-header { padding: 12px 0 8px; }
    .guide-title { font-family: var(--font-body); font-weight: 900; font-size: clamp(28px, 5vw, 44px); line-height: 1.12; letter-spacing: -0.02em; color: var(--green-dark); margin: 8px 0 14px; }
    .guide-lead { font-size: clamp(17px, 2vw, 20px); line-height: 1.6; color: var(--gray-700); margin-bottom: 14px; }
    .guide-meta { font-size: 13px; color: var(--gray-500); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 8px; }
    .guide-meta a { color: var(--green-mid); }
    .guide-toc { background: var(--green-pale); border: 1px solid rgba(0,183,127,0.2); border-radius: var(--radius-md); padding: 18px 22px; margin: 24px 0; }
    .guide-toc-title { font-weight: 900; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--green-dark); margin-bottom: 10px; }
    .guide-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 28px; }
    .guide-toc li { margin-bottom: 6px; }
    .guide-toc a { color: var(--green-dark); }
    @media (max-width: 560px) { .guide-toc ol { columns: 1; } }
    .guide-article { font-size: 17px; line-height: 1.75; color: var(--gray-900); }
    .guide-article h2 { font-family: var(--font-body); font-weight: 900; font-size: clamp(22px,3vw,30px); color: var(--green-dark); letter-spacing: -0.02em; margin: 44px 0 18px; scroll-margin-top: 84px; }
    /* Eyebrow de section : l'espace doit etre AU-DESSUS (separe de la section precedente),
       PAS en-dessous (la pilule appartient a SON titre, pas au texte du dessus). */
    .guide-article .fx-eyebrow { margin-top: 46px; scroll-margin-top: 84px; }
    .guide-article > .fx-eyebrow:first-child { margin-top: 0; }
    .guide-article .fx-eyebrow + h2 { margin-top: 6px; }
    .guide-article h3 { font-weight: 900; font-size: 20px; color: var(--green-dark); margin: 28px 0 8px; }
    .guide-article p { margin: 0 0 18px; }
    .guide-article ul, .guide-article ol { margin: 0 0 18px; padding-left: 24px; }
    .guide-article li { margin-bottom: 8px; }
    .guide-article a:not(.btn) { color: var(--green-mid); text-decoration: underline; text-underline-offset: 2px; }
    .guide-article strong { font-weight: 700; color: var(--green-dark); }
    .guide-answer { background: #fff; border-left: 4px solid var(--green-vibrant); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 16px 20px; margin: 0 0 26px; box-shadow: var(--shadow-sm); font-size: 18px; line-height: 1.6; }
    .guide-table-wrap { overflow-x: auto; margin: 26px 0; -webkit-overflow-scrolling: touch; border: 1px solid #E7E3DA; border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 27, 36, 0.07); background: #fff; }
    table.guide-table { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 460px; background: #fff; }
    table.guide-table th, table.guide-table td { border-bottom: 1px solid #ECE7DC; padding: 14px 18px; text-align: left; vertical-align: top; color: var(--gray-900); line-height: 1.55; }
    table.guide-table thead th { background: linear-gradient(135deg, #006675 0%, #004953 100%); color: var(--ivory); font-weight: 800; letter-spacing: 0.01em; border-bottom: none; }
    table.guide-table thead th + th { border-left: 1px solid rgba(255, 255, 255, 0.14); }
    table.guide-table tbody td:first-child { font-weight: 700; color: var(--green-dark); }
    table.guide-table tbody tr:nth-child(odd) { background: #FFFFFF; }
    table.guide-table tbody tr:nth-child(even) { background: #FCFBF8; }
    table.guide-table tbody tr:last-child th, table.guide-table tbody tr:last-child td { border-bottom: none; }
    table.guide-table tbody tr:hover { background: #F0F8F4; }
    table.guide-table strong { color: var(--green-dark); }
    table.guide-table a { color: var(--green-mid); text-decoration: underline; text-underline-offset: 2px; }
    .guide-callout { background: var(--gold-pale); border: 1px solid rgba(200,160,24,0.3); border-radius: var(--radius-md); padding: 16px 20px; margin: 26px 0; font-size: 15px; line-height: 1.6; }
    .guide-callout strong { color: var(--gold-dark); }
    .guide-cta { background: linear-gradient(135deg, var(--green-dark), var(--petrole-deep)); color: var(--ivory); border-radius: var(--radius-lg); padding: 32px; margin: 44px 0; text-align: center; box-shadow: var(--shadow-lg); }
    .guide-cta h3 { color: var(--ivory); font-weight: 900; font-size: clamp(20px,3vw,26px); margin: 0 0 10px; }
    .guide-cta p { color: rgba(251,247,239,0.85); margin: 0 auto 20px; max-width: 540px; }
    .guide-faq { margin: 44px 0; display: grid; gap: 12px; }
    /* FAQ volontairement DEPLIEE (visible) : le texte doit etre dans le DOM pour
       matcher le schema FAQPage, etre crawlable et cite par les LLM (GEO). On la
       rend premium sans la replier — chaque Q/R = carte avec pastille « ? ». */
    .guide-faq-item { position: relative; background: #fff; border: 1px solid #EAE6DD; border-radius: 14px; padding: 18px 22px 18px 58px; box-shadow: 0 4px 16px rgba(0, 27, 36, 0.05); }
    .guide-faq-item::before { content: "?"; position: absolute; left: 18px; top: 18px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #006675 0%, #004953 100%); color: #fff; border-radius: 8px; font-family: var(--font-body); font-weight: 900; font-size: 16px; box-shadow: 0 3px 10px rgba(0, 73, 83, 0.22); }
    .guide-faq-q { font-weight: 800; color: var(--green-dark); font-size: 17px; line-height: 1.35; margin-bottom: 8px; }
    .guide-faq-a { color: var(--gray-700); line-height: 1.7; }
    .guide-faq-a a { color: var(--green-mid); text-decoration: underline; text-underline-offset: 2px; }
    /* FAQ PLIABLE : Q = <summary> cliquable (chevron qui pivote), reponse = <div>.
       Markup : <details class="guide-faq-item" open><summary class="guide-faq-q">…</summary><div class="guide-faq-a">…</div></details>
       `open` = deplie par defaut → le texte reste VISIBLE et dans le DOM (SEO/GEO :
       matche le schema FAQPage, crawlable, cite par les LLM), mais repliable a la main. */
    summary.guide-faq-q { position: relative; cursor: pointer; list-style: none; padding-right: 30px; user-select: none; }
    summary.guide-faq-q::-webkit-details-marker { display: none; }
    summary.guide-faq-q::marker { content: ""; }
    details.guide-faq-item > summary.guide-faq-q::after {
      content: ""; position: absolute; right: 4px; top: 7px;
      width: 9px; height: 9px;
      border-right: 2px solid var(--green-mid); border-bottom: 2px solid var(--green-mid);
      transform: rotate(45deg); transition: transform .2s var(--ease-out);
    }
    details.guide-faq-item[open] > summary.guide-faq-q::after { transform: rotate(-135deg); }
    details.guide-faq-item:not([open]) > summary.guide-faq-q { margin-bottom: 0; }
    @media (max-width: 560px) { .guide-faq-item { padding: 16px 16px 16px 52px; } .guide-faq-item::before { left: 14px; top: 16px; width: 26px; height: 26px; } }
    .guide-related { margin: 44px 0; }
    .guide-related-links { display: grid; gap: 10px; margin-top: 12px; }
    .guide-related a { display: block; padding: 12px 16px; background: var(--surface-glass-strong); border: 1px solid rgba(0,73,83,0.08); border-radius: var(--radius-md); color: var(--green-dark); text-decoration: none; font-weight: 700; transition: border-color var(--transition-fast); }
    .guide-related a:hover { border-color: rgba(0,183,127,0.4); }
    .guide-disclaimer { font-size: 12px; line-height: 1.55; color: var(--gray-500); border-top: 1px solid var(--gray-100); padding-top: 16px; margin-top: 40px; }
    @media (max-width: 767px) { .guide-article { font-size: 16px; } }

    /* =====================================================================
       COMPOSANTS PREMIUM (fx-*) — mise a niveau design
       =====================================================================
       Bibliotheque de composants reutilisables qui portent l'ADN visuel de
       la page eurotrade (la reference du site) vers les pages produits,
       guides et legales. Recettes EXACTES reprises d'eurotrade_bulgaria.html
       (section-bridge, cfg-section, hero-stats, pilier-card, compare table,
       processus, portrait-frame, garantie-card, floating-cta...).

       Prefixe `fx-` = generique/reutilisable. Valeurs en dur reprises de
       l'ADN : verts #004953 / #006675 / #00B77F / #00C588, or #C8A018 /
       #8A6010 / #D4B062 / #9C7F5A, ivoire #FBF7EF, papier #FFFFFF, gris
       #404040/#555/#6B6B6B, police 'Lato'. Easing premium
       cubic-bezier(0.16,1,0.3,1). Le "gap verre" double-cadre = inset 8px.

       Posent sur une texture guilloche (.bg-guilloche du systeme) ou sur
       fond ivoire. Tout est responsive (~920/760/600px), hover/focus
       accessibles, prefers-reduced-motion respecte.
       ===================================================================== */

    /* @property pour la bordure conique animee du CTA premium (fallback ok) */
    @property --fx-cta-border-angle {
      syntax: "<angle>";
      initial-value: 0deg;
      inherits: false;
    }
    @keyframes fx-rotate-cta-border { to { --fx-cta-border-angle: 360deg; } }
    @keyframes fx-badge-twinkle {
      0%, 100% { opacity: 0.85; transform: scale(1); }
      50%      { opacity: 1;    transform: scale(1.18); }
    }

    /* ---------------------------------------------------------------------
       fx-bridge — connecteur narratif signature (verre-sur-verre)
       Ring exterieur transparent + carte blanche inset, typo ~19px vert 700.
       Variantes : .fx-bridge-sub (sous-ligne), .fx-bridge--quote (guillemets).
       --------------------------------------------------------------------- */
    .fx-bridge {
      max-width: 820px;
      margin: 22px auto 16px;
      padding: 11px;
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.55);
      border-radius: 24px;
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7), 0 8px 28px rgba(0, 73, 83, 0.05);
    }
    .fx-bridge-inner {
      background: #ffffff;
      border: 1px solid rgba(255, 255, 255, 0.95);
      border-radius: 16px;
      padding: 24px 28px;
      text-align: center;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
      font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
      font-size: 19px;
      color: #004953;
      line-height: 1.3;
      font-weight: 700;
      letter-spacing: -0.005em;
      text-wrap: balance;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    .fx-bridge-inner strong { font-weight: 800; }
    .fx-bridge-inner em { font-style: italic; color: #006675; }
    .fx-bridge-sub {
      display: block;
      margin-top: 8px;
      font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
      font-size: 14.5px;
      font-weight: 400;
      color: #202124;
      line-height: 1.5;
      letter-spacing: -0.005em;
    }
    .fx-bridge--quote .fx-bridge-inner::before { content: "\201C"; color: #9C7F5A; margin-right: 2px; }
    .fx-bridge--quote .fx-bridge-inner::after  { content: "\201D"; color: #9C7F5A; margin-left: 2px; }
    @media (max-width: 760px) {
      .fx-bridge { margin: 18px 16px 14px; max-width: none; }
      .fx-bridge-inner { font-size: 15px; padding: 18px 20px; }
      .fx-bridge-sub { font-size: 12px; }
    }

    /* ---------------------------------------------------------------------
       fx-glass — panneau verre double-cadre (signature .cfg-section)
       Conteneur translucide + backdrop-blur + ::before carte blanche opaque
       inset 8px (le "gap verre"). fx-glass-title = pilule degrade petrole.
       Variantes : .fx-glass--pad (padding genereux), .fx-glass--lg (radius+).
       --------------------------------------------------------------------- */
    .fx-glass {
      position: relative;
      margin-bottom: 22px;
      padding: 22px 26px;                         /* 8px gap verre + 14/18px contenu */
      background: rgba(255, 255, 255, 0.02);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.55);
      border-radius: 18px;
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7), 0 8px 28px rgba(0, 73, 83, 0.05);
    }
    .fx-glass::before {
      content: '';
      position: absolute;
      inset: 8px;                                 /* gap verre constant = 8px */
      background: #fff;
      border: 1px solid rgba(255, 255, 255, 0.95);
      border-radius: 11px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
      z-index: 0;
      pointer-events: none;
    }
    .fx-glass > * { position: relative; z-index: 1; }
    .fx-glass--pad { padding: 30px 34px; }
    .fx-glass--lg { border-radius: 24px; }
    .fx-glass--lg::before { border-radius: 16px; }
    .fx-glass-title {
      display: block;
      width: fit-content;
      margin: 4px auto 18px;
      background: linear-gradient(135deg, #006675 0%, #004953 100%);
      color: #fff;
      padding: 7px 22px;
      border-radius: 999px;
      font-family: 'Lato', sans-serif;
      font-size: 10pt;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      box-shadow: 0 3px 10px rgba(0, 73, 83, 0.22);
      text-align: center;
      border: none;
    }
    @media (max-width: 600px) {
      .fx-glass { padding: 16px 14px; }
      .fx-glass--pad { padding: 22px 18px; }
    }

    /* ---------------------------------------------------------------------
       fx-eyebrow — pilules eyebrow uppercase letter-spacing .16em
       Variantes : --petrol (degrade petrole), --green (vert plein),
       --gold (or dashed).
       --------------------------------------------------------------------- */
    .fx-eyebrow {
      display: inline-block;
      width: fit-content;
      font-family: 'Lato', sans-serif;
      font-size: 10pt;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      padding: 7px 22px;
      border-radius: 999px;
      text-align: center;
      line-height: 1.2;
    }
    .fx-eyebrow--petrol {
      background: linear-gradient(135deg, #006675 0%, #004953 100%);
      color: #fff;
      box-shadow: 0 3px 10px rgba(0, 73, 83, 0.22);
      border: none;
    }
    .fx-eyebrow--green {
      background: #004953;
      color: #fff;
      box-shadow: 0 3px 12px rgba(0, 73, 83, 0.20);
      border: none;
    }
    .fx-eyebrow--gold {
      background: rgba(255, 184, 107, 0.10);
      color: #B96B2A;
      border: 1px dashed #E89455;
      font-size: 9.5pt;
      letter-spacing: 0.04em;
      padding: 4px 14px;
    }

    /* ---------------------------------------------------------------------
       fx-stats / fx-stat — barre de stats premium (bandeau petrole)
       Fond degrade petrole, filet dore en haut, chiffres geants Lato 800,
       separateurs dores. Variante .fx-stat--circled = halo vert + etoile.
       --------------------------------------------------------------------- */
    .fx-stats {
      margin: 28px auto;
      width: fit-content;
      max-width: 100%;
      background: linear-gradient(180deg, #003a44 0%, #004953 60%, #003741 100%);
      padding: 22px 28px;
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      /* double-edge (recette de .ecom-card-feature de la home) : delimite le bandeau
         meme pose sur une section petrole sombre (probleme vert-fonce-sur-vert-fonce) */
      border: 1px solid rgba(255, 255, 255, 0.40);
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.42), 0 16px 44px rgba(0, 27, 36, 0.28);
    }
    .fx-stats--glued-bottom { border-radius: 16px 16px 0 0; margin-bottom: 0; }
    .fx-stats::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 1.5px;
      background: linear-gradient(90deg, transparent 0%, #C9A76A 50%, transparent 100%);
      opacity: 0.55;
      z-index: 2;
    }
    /* cadre interne (le 2e bord du double-edge) */
    .fx-stats::after {
      content: '';
      position: absolute;
      inset: 7px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 10px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
      pointer-events: none;
      z-index: 0;
    }
    .fx-stats-row { position: relative; z-index: 1; }
    .fx-stats-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      gap: 4px 0;
      max-width: 1200px;
      margin: 0 auto;
    }
    .fx-stat {
      text-align: center;
      padding: 6px 14px;
      flex: 0 1 auto;
      min-width: 120px;
      max-width: 210px;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }
    .fx-stat + .fx-stat::before {
      content: '';
      position: absolute;
      left: 0;
      top: 18%;
      bottom: 18%;
      width: 1px;
      background: linear-gradient(180deg, transparent 0%, rgba(200, 160, 24, 0.32) 50%, transparent 100%);
    }
    .fx-stat-num {
      font-family: 'Lato', sans-serif;
      font-size: 32pt;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.03em;
      color: #ffffff;
      white-space: nowrap;
    }
    .fx-stat-num sup {
      font-size: 14pt;
      font-weight: 700;
      vertical-align: super;
      top: -0.15em;
      margin-left: 2px;
      color: inherit;
    }
    .fx-stat-label {
      font-family: 'Lato', sans-serif;
      font-size: 9.5px;
      font-weight: 400;
      line-height: 1.42;
      color: rgba(255, 255, 255, 0.62);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    /* Variante chiffre-cle : halo vert + etoile scintillante */
    .fx-stat--circled .fx-stat-num {
      position: relative;
      z-index: 1;
      display: inline-block;
      text-shadow:
        0 0 5px rgba(0, 183, 127, 0.60),
        0 0 14px rgba(0, 183, 127, 0.42),
        0 0 26px rgba(0, 183, 127, 0.24);
    }
    .fx-stat--circled .fx-stat-num sup {
      text-shadow: 0 0 4px rgba(0, 183, 127, 0.55), 0 0 10px rgba(0, 183, 127, 0.35);
    }
    .fx-stat--circled .fx-stat-num::after {
      content: '\2726';                            /* etoile a 4 branches */
      position: absolute;
      top: -4px;
      right: -14px;
      font-size: 0.32em;
      color: #00B77F;
      font-weight: 400;
      text-shadow: 0 0 7px rgba(0, 183, 127, 0.80);
      animation: fx-badge-twinkle 2.5s ease-in-out infinite;
      line-height: 1;
    }
    @media (max-width: 760px) {
      .fx-stats { padding: 18px 16px; }
      .fx-stat { min-width: 45%; padding: 8px 12px; }
      .fx-stat + .fx-stat::before { display: none; }
      .fx-stat-num { font-size: 24pt; }
      .fx-stat-num sup { font-size: 11pt; }
    }
    @media (max-width: 480px) {
      .fx-stats { padding: 16px 12px; }
      .fx-stat { min-width: 100%; }
      .fx-stat-num { font-size: 22pt; }
      .fx-stat-num sup { font-size: 10pt; }
      .fx-stat--circled .fx-stat-num::after { right: -10px; top: -3px; font-size: 0.28em; }
    }
    @media (prefers-reduced-motion: reduce) {
      .fx-stat--circled .fx-stat-num::after { animation: none; }
    }

    /* ---------------------------------------------------------------------
       fx-feature-grid / fx-feature-card — cartes feature premium
       Verre/blanc, bordure douce, hover translateY + ombre, icone en badge
       rond dore, titre vert, texte gris. Soulignement dore sous le titre.
       --------------------------------------------------------------------- */
    .fx-feature-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      align-items: stretch;
    }
    .fx-feature-grid--2 { grid-template-columns: repeat(2, 1fr); }
    .fx-feature-card {
      background: #fff;
      border: 1px solid rgba(0, 73, 83, 0.10);
      border-radius: 14px;
      padding: 24px 22px 26px;
      text-align: center;
      box-shadow: 0 2px 10px rgba(0, 73, 83, 0.05);
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                  box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                  border-color 0.2s ease;
    }
    .fx-feature-card:hover,
    .fx-feature-card:focus-within {
      transform: translateY(-3px);
      box-shadow: 0 14px 36px rgba(0, 73, 83, 0.12);
      border-color: rgba(156, 127, 90, 0.30);
    }
    .fx-feature-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      margin-bottom: 14px;
      background: linear-gradient(135deg, #D4B062 0%, #C8A018 55%, #8A6010 100%);
      color: #fff;
      box-shadow: 0 4px 12px rgba(200, 160, 24, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    }
    .fx-feature-icon svg { width: 24px; height: 24px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .fx-feature-title {
      font-family: 'Lato', sans-serif;
      font-size: 14pt;
      font-weight: 700;
      color: #004953;
      margin: 0 0 12px;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      position: relative;
      padding-bottom: 8px;
    }
    .fx-feature-title::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 38px;
      height: 2px;
      background: #9C7F5A;
      transform: translateX(-50%);
      border-radius: 2px;
    }
    .fx-feature-text { font-size: 11pt; line-height: 1.55; color: #404040; margin: 0; }
    .fx-feature-text em { color: #004953; font-weight: 600; font-style: normal; }
    /* Variante pilier : citation italique a filet dore + benefice (recette .pilier-card) */
    .fx-feature-card--pilier { text-align: left; align-items: stretch; }
    .fx-feature-card--pilier .fx-feature-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
    .fx-feature-card--pilier .fx-feature-icon { margin: 0; flex-shrink: 0; }
    .fx-feature-card--pilier .fx-feature-title { text-align: left; align-self: auto; margin: 0; }
    .fx-feature-card--pilier .fx-feature-title::after { left: 0; transform: none; }
    .fx-feature-quote {
      font-size: 11.5pt;
      font-style: italic;
      color: #404040;
      line-height: 1.5;
      margin: 0 0 14px;
      border-left: 3px solid #9C7F5A;
      padding: 2px 0 2px 12px;
      width: 100%;
    }
    @media (max-width: 920px) { .fx-feature-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 600px) { .fx-feature-grid, .fx-feature-grid--2 { grid-template-columns: 1fr; gap: 16px; } }
    @media (prefers-reduced-motion: reduce) { .fx-feature-card { transition: none; } }

    /* ---------------------------------------------------------------------
       fx-compare — tableau comparatif premium
       Carte blanche radius/ombre, en-tete petrole, lignes alternees OPAQUES,
       categories en eyebrow a icone, badges carre rouge-croix / vert-check.
       Colonnes "sans / avec" via .fx-compare-col--no / --yes (en-tete).
       Cellules : <td class="fx-cell-no"> / <td class="fx-cell-yes"> (la
       croix/le check sont injectes en ::before, aucun SVG inline requis).
       --------------------------------------------------------------------- */
    .fx-compare {
      background: #fff;
      border-radius: 18px;
      padding: 18px 22px 14px;
      margin: 0 auto 14px;
      max-width: 780px;
      box-shadow: 0 10px 32px rgba(0, 73, 83, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      border: 0.5px solid rgba(156, 127, 90, 0.22);
      overflow: hidden;
    }
    .fx-compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .fx-compare table { width: 100%; border-collapse: collapse; font-size: 11.25pt; margin: 0; }
    .fx-compare thead th {
      background: linear-gradient(135deg, #006675 0%, #004953 100%);
      color: #fff;
      font-family: 'Lato', sans-serif;
      font-weight: 700;
      font-size: 9pt;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      padding: 12px 10px;
      text-align: center;
    }
    .fx-compare thead th:first-child { text-align: left; border-radius: 10px 0 0 0; }
    .fx-compare thead th:last-child { border-radius: 0 10px 0 0; }
    .fx-compare-col--no  { color: #ffd9d9 !important; }
    .fx-compare-col--yes { color: #b8ffe7 !important; }
    .fx-compare tbody td { padding: 11px 12px; border: none; color: #404040; line-height: 1.4; vertical-align: middle; }
    .fx-compare tbody td:first-child { font-weight: 600; color: #2a2a2a; }
    /* Lignes alternees OPAQUES (pas de transparence : lisibilite sur guilloche) */
    .fx-compare tbody tr:nth-child(even) td { background: #F4F8F7; }
    .fx-compare tbody tr:nth-child(odd)  td { background: #ffffff; }
    /* Ligne de categorie : eyebrow a icone outline verte */
    .fx-compare tr.fx-compare-cat td {
      padding: 18px 9px 6px !important;
      border-top: 1px solid rgba(156, 127, 90, 0.18);
      background: transparent !important;
      font-size: 8.6pt;
      font-weight: 700;
      letter-spacing: 0.20em;
      text-transform: uppercase;
      color: #004953;
      opacity: 0.82;
    }
    .fx-compare tr.fx-compare-cat:first-child td { border-top: none; padding-top: 4px !important; }
    /* Cellules oui/non — badge carre 26px radius 7px, croix/check dessine en CSS */
    .fx-cell-no, .fx-cell-yes { text-align: center; width: 1%; white-space: nowrap; }
    .fx-cell-no::before, .fx-cell-yes::before {
      content: "";
      display: inline-block;
      width: 26px;
      height: 26px;
      border-radius: 7px;
      vertical-align: middle;
      background-repeat: no-repeat;
      background-position: center;
    }
    .fx-cell-no::before {
      background-color: #EA0018;
      box-shadow: 0 2px 6px rgba(234, 0, 24, 0.22);
      /* croix SVG nette (encodee %3C, pas de balise litterale) */
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
      background-size: 15px 15px;
    }
    .fx-cell-yes::before {
      background-color: #00B77F;
      box-shadow: 0 2px 6px rgba(0, 183, 127, 0.25);
      /* check SVG net (encode %3C) */
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
      background-size: 17px 17px;
    }
    @media (max-width: 600px) {
      .fx-compare { padding: 12px 14px 10px; border-radius: 14px; }
      .fx-compare table { font-size: 10.5pt; }
      .fx-compare tbody td { padding: 9px 8px; }
    }

    /* ---------------------------------------------------------------------
       fx-cta — bloc CTA premium encadre (fond petrole degrade) + halo or
       fx-btn-premium = bouton vert degrade a halo (avec bordure conique
       animee optionnelle via .fx-btn-premium--beam).
       --------------------------------------------------------------------- */
    .fx-cta {
      position: relative;
      overflow: hidden;
      border-radius: 24px;
      padding: clamp(32px, 5vw, 56px);
      text-align: center;
      color: #FBF7EF;
      background: linear-gradient(135deg, #001b24 0%, #004953 55%, #003741 100%);
      box-shadow: 0 16px 48px rgba(0, 27, 36, 0.24), inset 0 1px 1px rgba(255, 255, 255, 0.12);
    }
    .fx-cta::before {
      content: "";
      position: absolute;
      top: -40%;
      right: -20%;
      width: 480px;
      height: 480px;
      background: radial-gradient(circle, rgba(212, 176, 98, 0.16) 0%, transparent 70%);
      pointer-events: none;
    }
    .fx-cta > * { position: relative; z-index: 1; }
    .fx-cta-title {
      font-family: 'Lato', sans-serif;
      font-weight: 900;
      font-size: clamp(22px, 3vw, 32px);
      color: #FBF7EF;
      letter-spacing: -0.02em;
      line-height: 1.2;
      margin: 0 0 12px;
      text-wrap: balance;
    }
    .fx-cta-sub { font-size: clamp(14px, 1.5vw, 17px); color: rgba(251, 247, 239, 0.84); line-height: 1.55; margin: 0 auto 24px; max-width: 600px; text-align: left; }
    /* Variante verre clair (sur fond petrole de section) */
    .fx-cta--glass {
      color: #1A1A1A;
      background: rgba(255, 255, 255, 0.07);
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
      border: 1px solid rgba(255, 255, 255, 0.55);
    }
    .fx-cta--glass .fx-cta-title { color: #004953; }
    .fx-cta--glass .fx-cta-sub { color: #404040; }

    .fx-btn-premium {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      position: relative;
      padding: 14px 28px;
      font-family: 'Lato', sans-serif;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.04em;
      border: none;
      border-radius: 999px;
      cursor: pointer;
      text-decoration: none;
      color: #fff;
      background: linear-gradient(135deg, #00B77F 0%, #00C588 100%);
      box-shadow: 0 6px 24px rgba(0, 73, 83, 0.30), 0 0 18px rgba(0, 183, 127, 0.25);
      transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s ease;
      isolation: isolate;
    }
    .fx-btn-premium:hover,
    .fx-btn-premium:focus-visible {
      transform: translateY(-2px);
      box-shadow: 0 10px 32px rgba(0, 73, 83, 0.40), 0 0 24px rgba(0, 183, 127, 0.40);
      color: #fff;
    }
    /* Variante faisceau : bordure conique turquoise->vert animee */
    .fx-btn-premium--beam::before {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: inherit;
      padding: 2px;
      background: conic-gradient(from var(--fx-cta-border-angle),
        transparent 0%, #00B77F 20%, #5EEAD4 50%, #00B77F 80%, transparent 100%);
      -webkit-mask: linear-gradient(#fff, #fff) content-box, linear-gradient(#fff, #fff);
              mask: linear-gradient(#fff, #fff) content-box, linear-gradient(#fff, #fff);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      animation: fx-rotate-cta-border 3s linear infinite;
      pointer-events: none;
      z-index: -1;
    }
    @media (prefers-reduced-motion: reduce) {
      .fx-btn-premium { transition: none; }
      .fx-btn-premium--beam::before { display: none; }
    }
    /* fx-cta DANS .guide-article : l'article impose sa typo (.guide-article h2 = 0,1,1 ;
       .guide-article a:not(.btn) = 0,2,1) qui ecrase .fx-cta-title / .fx-btn-premium.
       On rend la main au composant CTA avec une specificite superieure. */
    .guide-article .fx-cta .fx-cta-title { color: #FBF7EF; }
    .guide-article .fx-cta--glass .fx-cta-title { color: #004953; }
    .guide-article .fx-cta a.fx-btn-premium,
    .guide-article .fx-cta a.fx-btn-premium:hover,
    .guide-article .fx-cta a.fx-btn-premium:focus-visible { color: #fff; text-decoration: none; }
    .guide-article .fx-cta a.btn,
    .guide-article .fx-cta a.btn:hover,
    .guide-article .fx-cta a.btn:focus-visible { text-decoration: none; }

    /* Formulaire produit (iframe WPForms) : section + carte plus larges que le wrap
       narrow standard (980px), pour un formulaire moins serre. :has() cible uniquement
       la section qui contient un .pp-form-embed — aucune modif de markup requise. */
    .pp-wrap:has(> .pp-form-embed) { max-width: 1080px; }
    .pp-wrap:has(> .pp-form-embed) .pp-form-embed { max-width: 1000px; }
    @media (max-width: 1120px) {
      .pp-wrap:has(> .pp-form-embed) { max-width: var(--container-narrow); }
      .pp-wrap:has(> .pp-form-embed) .pp-form-embed { max-width: 100%; }
    }

    /* ---------------------------------------------------------------------
       fx-timeline / fx-step — timeline de process
       Etapes numerotees (badge vert radius 11px), ligne de liaison verticale,
       colonne secondaire "pendant ce temps".
       --------------------------------------------------------------------- */
    .fx-timeline {
      max-width: 820px;
      margin: 0 auto;
      position: relative;
    }
    .fx-timeline::before {
      content: '';
      position: absolute;
      left: 38px;
      top: 30px;
      bottom: 30px;
      width: 2px;
      background: linear-gradient(to bottom, transparent 0%, rgba(0, 183, 127, 0.35) 6%, rgba(0, 183, 127, 0.35) 94%, transparent 100%);
      z-index: 0;
    }
    .fx-step {
      position: relative;
      z-index: 1;
      background: #fff;
      border-radius: 14px;
      padding: 14px 18px 16px;
      margin-bottom: 8px;
      box-shadow: 0 6px 22px rgba(0, 73, 83, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      border: 0.5px solid rgba(156, 127, 90, 0.22);
    }
    .fx-step:last-child { margin-bottom: 0; }
    .fx-step-header { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
    .fx-step-badge {
      flex-shrink: 0;
      position: relative;
      z-index: 2;
      width: 40px;
      height: 40px;
      border-radius: 11px;
      background: linear-gradient(135deg, #00C588 0%, #00B77F 100%);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      box-shadow: 0 3px 12px rgba(0, 183, 127, 0.32), 0 0 0 4px #fff;
      font-family: 'Lato', sans-serif;
      font-size: 19pt;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.02em;
    }
    .fx-step-badge svg { width: 19px; height: 19px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .fx-step-label {
      font-size: 8pt;
      font-weight: 700;
      letter-spacing: 0.20em;
      text-transform: uppercase;
      color: #00B77F;
      margin-bottom: 1px;
    }
    .fx-step-title {
      font-family: 'Lato', sans-serif;
      font-size: 13.5pt;
      font-weight: 700;
      color: #004953;
      margin: 0;
      line-height: 1.2;
      letter-spacing: -0.005em;
    }
    .fx-step-desc { font-size: 11.5pt; line-height: 1.4; color: #333; margin: 6px 0 0; }
    /* Colonne secondaire "pendant ce temps" (travail en parallele) */
    .fx-step-meanwhile { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(0, 73, 83, 0.18); }
    .fx-step-meanwhile-label {
      display: block;
      font-size: 7.8pt;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #004953;
      opacity: 0.7;
      margin-bottom: 3px;
    }
    .fx-step-meanwhile p, .fx-step-meanwhile ul { margin: 0; font-size: 11pt; line-height: 1.4; color: #555; }
    .fx-step-meanwhile ul { list-style: none; padding: 0; }
    .fx-step-meanwhile li { padding: 2px 0 2px 14px; position: relative; }
    .fx-step-meanwhile li::before { content: '\B7'; position: absolute; left: 3px; color: #00B77F; font-weight: 700; }
    @media (max-width: 600px) {
      .fx-timeline::before { left: 30px; }
      .fx-step-badge { width: 34px; height: 34px; font-size: 15pt; }
    }

    /* ---------------------------------------------------------------------
       fx-portrait — cadre photo verre double (aspect 3/4)
       Pour equipe / preuve. Ring petrole + highlight inset.
       Variante .fx-portrait--landscape (4/3).
       --------------------------------------------------------------------- */
    .fx-portrait {
      width: 100%;
      aspect-ratio: 3 / 4;
      border: 1px solid rgba(255, 255, 255, 0.95);
      border-radius: 12px;
      overflow: hidden;
      background: #f3f3f3;
      position: relative;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 0 0 4px transparent,
        0 0 0 4.5px rgba(0, 73, 83, 0.18),
        0 8px 28px rgba(0, 73, 83, 0.08);
    }
    .fx-portrait--landscape { aspect-ratio: 4 / 3; }
    .fx-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }

    /* ---------------------------------------------------------------------
       fx-usp-pill — pilule USP forte (differenciateur central)
       --------------------------------------------------------------------- */
    .fx-usp-pill {
      display: inline-block;
      padding: 8px 22px;
      background: #004953;
      color: #fff;
      font-family: 'Lato', sans-serif;
      font-size: 12pt;
      font-weight: 600;
      letter-spacing: 0.02em;
      border-radius: 999px;
      box-shadow: 0 3px 12px rgba(0, 73, 83, 0.20);
      text-align: center;
    }

    /* ---------------------------------------------------------------------
       fx-divider — separateur de section elegant (filet degrade or)
       Variante .fx-divider--label (texte centre dans le filet, pilule petrole).
       --------------------------------------------------------------------- */
    .fx-divider {
      border: none;
      height: 1px;
      max-width: 920px;
      margin: 40px auto;
      background: linear-gradient(90deg, transparent 0%, #9C7F5A 50%, transparent 100%);
      opacity: 0.6;
    }
    .fx-divider--label {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      position: relative;
      height: auto;
      background: none;
      opacity: 1;
      text-align: center;
      margin: 36px auto 24px;
    }
    .fx-divider--label::before, .fx-divider--label::after {
      content: "";
      flex: 1;
      height: 1px;
      background: linear-gradient(to right, transparent, rgba(156, 127, 90, 0.4), transparent);
    }
    .fx-divider-label-text {
      flex-shrink: 0;
      margin: 0 16px;
      font-family: 'Lato', sans-serif;
      font-size: 11pt;
      font-weight: 700;
      letter-spacing: 0.20em;
      text-transform: uppercase;
      color: #fff;
      padding: 6px 18px;
      background: linear-gradient(135deg, #006675 0%, #004953 100%);
      border-radius: 999px;
      box-shadow: 0 3px 10px rgba(0, 73, 83, 0.22);
    }

    /* ---------------------------------------------------------------------
       fx-stat-card — carte statistique/garantie premium (resultats & engagements)
       Variante stat (gros chiffre degrade vert->petrole + kicker) et
       engagement (icone badge + titre + body).
       --------------------------------------------------------------------- */
    .fx-stat-card {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 24px 22px 20px;
      background: linear-gradient(180deg, #fff 0%, #F4F8F3 100%);
      border: 1px solid #E0E8DC;
      border-radius: 14px;
      box-shadow: 0 4px 14px rgba(0, 73, 83, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      overflow: hidden;
    }
    .fx-stat-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 22px;
      width: 56px;
      height: 2px;
      background: linear-gradient(90deg, #00C588 0%, #006675 100%);
      border-radius: 0 0 2px 2px;
    }
    .fx-stat-card-kicker {
      font-family: 'Lato', sans-serif;
      font-size: 8.4pt;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #00B77F;
      line-height: 1.3;
    }
    .fx-stat-card-num {
      font-family: 'Lato', sans-serif;
      font-size: 38pt;
      font-weight: 900;
      line-height: 0.95;
      letter-spacing: -0.03em;
      background: linear-gradient(135deg, #00C588 0%, #00B77F 55%, #006675 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      display: inline-block;
    }
    .fx-stat-card-num sup { font-size: 17pt; font-weight: 800; vertical-align: super; top: -0.15em; margin-left: 2px; }
    .fx-stat-card-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: linear-gradient(135deg, #00C588 0%, #00B77F 55%, #006675 100%);
      box-shadow: 0 4px 12px rgba(0, 183, 127, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }
    .fx-stat-card-icon svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .fx-stat-card-title { font-family: 'Lato', sans-serif; font-size: 12.5pt; font-weight: 800; color: #004953; line-height: 1.25; margin: 0; letter-spacing: -0.005em; }
    .fx-stat-card-body { font-size: 10pt; line-height: 1.55; color: #444; margin: 0; }
    .fx-stat-card-body strong { color: #004953; font-weight: 700; }
    @media (max-width: 600px) { .fx-stat-card-num { font-size: 32pt; } .fx-stat-card-num sup { font-size: 14pt; } }

    /* ---------------------------------------------------------------------
       fx-floating-cta — pilule fixe avec bordure conique animee (web)
       Toggler .is-visible en JS apres ~600px de scroll si besoin.
       --------------------------------------------------------------------- */
    .fx-floating-cta {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 50;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #004953;
      color: #fff;
      padding: 14px 24px;
      border-radius: 50px;
      text-decoration: none;
      font-family: 'Lato', sans-serif;
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 0.05em;
      box-shadow: 0 6px 24px rgba(0, 73, 83, 0.30), 0 0 18px rgba(0, 183, 127, 0.25);
      transition: transform 0.15s, box-shadow 0.15s;
      isolation: isolate;
    }
    .fx-floating-cta::before {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: inherit;
      padding: 2px;
      background: conic-gradient(from var(--fx-cta-border-angle),
        transparent 0%, #00B77F 20%, #5EEAD4 50%, #00B77F 80%, transparent 100%);
      -webkit-mask: linear-gradient(#fff, #fff) content-box, linear-gradient(#fff, #fff);
              mask: linear-gradient(#fff, #fff) content-box, linear-gradient(#fff, #fff);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      animation: fx-rotate-cta-border 3s linear infinite;
      pointer-events: none;
      z-index: -1;
    }
    .fx-floating-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(0, 73, 83, 0.40), 0 0 24px rgba(0, 183, 127, 0.40); color: #fff; }
    @media (max-width: 600px) { .fx-floating-cta { bottom: 16px; right: 16px; padding: 11px 16px; font-size: 13px; } }
    @media (prefers-reduced-motion: reduce) { .fx-floating-cta::before { animation: none; } }

    /* =====================================================================
       FIN COMPOSANTS PREMIUM (fx-*)
       ===================================================================== */

    /* === HÉROS PAGES PRODUITS : uniformisés sur seller-accounts (override specificité > inline) === */
    .pp-hero .pp-hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.95fr); gap: clamp(28px, 4vw, 56px); align-items: center; margin-top: var(--space-4); }
    @media (max-width: 920px) { .pp-hero .pp-hero-grid { grid-template-columns: 1fr; gap: var(--space-6); } }
    /* h1 : spécificité (0,2,1) pour battre les règles inline .pp-hero h1 (0,1,1) chargées après */
    .pp-main .pp-hero h1, .pp-wrap .pp-hero h1 {
      font-size: clamp(33px, 5.2vw, 56px); font-weight: 900; line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 var(--space-4); max-width: none;
    }
    /* sous-titre : couvre aussi .pp-lead (developer) + marge basse uniforme = seller (24px) */
    .pp-hero .pp-hero-sub, .pp-hero .pp-lead { font-size: clamp(16px, 1.7vw, 19px); line-height: 1.6; max-width: 560px; margin-bottom: var(--space-5); }
    /* rangée CTA : marge basse uniforme quelle que soit la classe (cta-row / cta / actions) */
    .pp-hero .pp-hero-cta-row, .pp-hero .pp-hero-cta, .pp-hero .pp-hero-actions { margin-bottom: var(--space-5); }
    .pp-hero .pp-hero-trust-item, .pp-hero .pp-hero-reassure-item { font-size: 13px; font-weight: 700; color: #004953; }


    /* === FAQ + CTA fin de page : largeur homogène = seller-accounts (FAQ 820 / CTA 880) === */
    .pp-section .fx-cta, .pp-proof-section .fx-cta { max-width: 880px; margin-inline: auto; }
    .pp-section .guide-faq { max-width: 820px; margin-inline: auto; }

    /* effet glow radial pricecard (apprécié sur seller) propagé */
    .pp-pricecard::after, .pp-price-card::after { content: ""; position: absolute; top: -120px; right: -120px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(0,183,127,0.10) 0%, transparent 70%); pointer-events: none; z-index: 0; }

    /* === HÉROS PRODUITS : placement & espacements alignés sur seller-accounts (corrige les "sauts") === */
    /* padding-top du hero supprimé partout (override des règles inline de chaque page) */
    .pp-main > .pp-hero, .pp-main .bg-guilloche > .pp-hero, .pp-wrap .pp-surface > .pp-hero, .pp-wrap > .pp-hero { padding-block: 0 clamp(28px, 4vw, 46px); }
    /* breadcrumb : toujours 1er enfant du hero, même marge partout (réf. seller : top 0) */
    .pp-hero .breadcrumb { margin: 0 0 6px; }
    /* marge basse de l'eyebrow uniforme partout (override règles inline de chaque page) */
    .pp-hero .fx-eyebrow, .pp-hero .pp-hero-eyebrow { margin: 0 0 var(--space-4); }
    /* trust-row du hero : séparateur pointillé signature (réf. plan-action), uniforme sur toutes les pages */
    .pp-hero .pp-hero-trust, .pp-hero .pp-hero-reassure, .pp-hero .pp-trust-row {
      border-top: 1px dashed rgba(0, 73, 83, 0.16);
      margin-top: var(--space-5);
      padding-top: var(--space-5);
      gap: 10px 18px;
    }

/* a11y WCAG : assombrir les dates d'avis Ekomi (gris #aaa -> 4.5:1) */
.review_date,.review-date,.reviewed-date{color:#6B6B6B !important}