/* Generated by ops/assets/build_public_css.py; edit source files. */
/* source: cvx-tokens.css */
/* CONVXA design tokens — Appendix C (CONVXA_DESIGN_SPEC.md) §2.
   SINGLE SOURCE OF TRUTH for the whole codebase.

   Deviation from the literal spec, noted deliberately: §2 says to extend the
   token block inside static/css/supplier.css. But the public pages (products,
   product_details, seo/*) load home.css and never load supplier.css, so tokens
   defined there are unreachable on exactly the pages that matter most. Loading
   the whole supplier portal sheet on public pages would bleed its body/nav
   rules into them.

   So the tokens live here, defined ONCE, and both stylesheets' pages link this
   file. This honours the intent — one source, no competing system — rather than
   the letter. */

/* ═══════════════════════════════════════════════════════════════════════
   Fonts — Appendix C §2.2 / §5. Self-hosted, subset, swap.
   ───────────────────────────────────────────────────────────────────────
   §7 forbids linking Google Fonts: the extra DNS + TLS handshake is real
   money on 3G in the Oriental. Files live in /static/fonts (see the README
   there for sizes, licence and the per-page budget).

   Sans uses the VARIABLE cut deliberately: §5 budgets three font files, and
   three static weights (400/600/700) would spend the whole budget at 68 KB
   before Mono gets a look in. The variable file is 44.6 KB for all three.

   A browser fetches a face only when text actually renders in it, so the
   Arabic faces below cost a French page nothing.
   ═══════════════════════════════════════════════════════════════════════ */
@font-face{
  font-family:'IBM Plex Sans';
  src:url('/static/fonts/ibm-plex-sans-latin-var.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('/static/fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('/static/fonts/ibm-plex-mono-latin-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Sans Arabic';
  src:url('/static/fonts/ibm-plex-arabic-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Sans Arabic';
  src:url('/static/fonts/ibm-plex-arabic-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}

/* ═══════════════════════════════════════════════════════════════════════
   CONVXA DESIGN SYSTEM — Appendix C (CONVXA_DESIGN_SPEC.md) §2
   ───────────────────────────────────────────────────────────────────────
   Direction: "Fiche technique". Industrial, dense, legible, light-only.
   This is the single token source for the whole codebase — do not create a
   competing file. The legacy --supplier-* names below are kept as ALIASES
   pointing at these tokens so existing templates keep working.

   Rules that are easy to break, so they are restated here:
     · ONE orange action per screen. Two oranges = no action.
     · --cvx-wa appears on the WhatsApp control and nowhere else.
     · Semantic colours are status only, never decoration, never > badge size.
     · No dark mode. Paint every ground explicitly.
     · No new colour outside this block.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    /* ── Brand ─────────────────────────────────────────────────────── */
    --cvx-navy-900: #021A3A;   /* headers, footer ground */
    --cvx-navy-800: #03244F;   /* PRIMARY */
    --cvx-navy-600: #0A3A75;   /* links, hover on navy fills, focus ring */
    --cvx-navy-100: #E7EDF6;   /* tint fills, table header ground */

    /* ── Action — safety orange, primary action only ───────────────── */
    --cvx-action: #C2410C;     /* text-safe on white; fills carry white text */
    --cvx-action-hi: #9E340A;  /* hover/pressed fill. DEEPER than --cvx-action,
                                  not lighter: white on the spec's #E2600F is
                                  3.55:1 and fails the §2.1 floor. 7.12:1. */
    --cvx-action-50: #FDF0E7;  /* callout ground */

    /* ── WhatsApp — brand-fixed, WhatsApp control only ─────────────── */
    --cvx-wa: #188842;         /* darkened again from the spec's #1EA952, which
                                  is 3.06:1 on white and misses the §2.1 floor
                                  its own comment claims. Now 4.53:1. */

    /* ── Neutrals — biased toward navy so greys never read dead ────── */
    --cvx-ink: #20252D;
    --cvx-ink-2: #515965;      /* secondary text */
    --cvx-ink-3: #626B76;      /* captions, meta. Spec's #6C7C95 is 4.24:1 on
                                  white and 3.95:1 on --cvx-ground — both under
                                  4.5:1 at the 13px it is used at. Now 4.89 /
                                  4.55:1. Also serves as the input border. */
    --cvx-line: #DCDFe4;
    --cvx-line-soft: #ECEEF1;
    --cvx-surface: #FFFFFF;
    --cvx-ground: #F5F5F7;

    /* ── Semantic — status only ────────────────────────────────────── */
    --cvx-ok: #12703F;   --cvx-ok-bg: #E4F2EA;    /* en stock, livré, payé */
    --cvx-warn: #8A5B04; --cvx-warn-bg: #FBF0D9;  /* sur commande, en attente */
    --cvx-crit: #A32B20; --cvx-crit-bg: #FAE7E4;  /* rupture, retard, à traiter */

    /* ── Type (§2.2) ───────────────────────────────────────────────────
       Plex has a real Arabic sibling sharing the same skeleton, so the FR
       and AR pages read as one company. Weights 400/600/700 only.
       Self-hosted above as subset WOFF2 with font-display:swap. The fallback
       stack still matters: it is what renders during the swap period. */
    --cvx-font-latin: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'IBM Plex Sans', sans-serif;
    --cvx-font-ar: 'IBM Plex Sans Arabic', 'IBM Plex Sans', Tahoma, sans-serif;
    --cvx-font-num: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

    /* ── Space, shape, elevation (§2.3) ────────────────────────────── */
    --cvx-s1: 4px;  --cvx-s2: 8px;  --cvx-s3: 12px; --cvx-s4: 16px;
    --cvx-s5: 24px; --cvx-s6: 32px; --cvx-s7: 48px; --cvx-s8: 64px;
    --cvx-radius: 12px;
    --cvx-radius-card: 20px;
    --cvx-shadow-card: 0 2px 12px rgb(23 35 53 / 4%);
    --cvx-radius-pill: 999px;   /* badges only */
    --cvx-shadow-bar: 0 -2px 12px rgba(2, 26, 58, .12); /* sticky bar only */

    /* ── Motion (§2.4) — hover/focus only ──────────────────────────── */
    --cvx-transition: 120ms ease-out;

    /* ═══ Legacy aliases — existing templates depend on these names ═══ */
    --supplier-primary: var(--cvx-navy-800);
    --supplier-primary-dark: var(--cvx-navy-900);
    --supplier-primary-light: var(--cvx-navy-100);
    --supplier-secondary: var(--cvx-navy-600);
    --supplier-accent: var(--cvx-navy-600);
    --supplier-accent-light: var(--cvx-navy-600);

    /* Neutral Colors - Professional Palette */
    --supplier-white: var(--cvx-surface);
    --supplier-gray-50: var(--cvx-ground);
    --supplier-gray-100: var(--cvx-line-soft);
    --supplier-gray-200: var(--cvx-line);
    --supplier-gray-300: var(--cvx-line);
    --supplier-gray-400: var(--cvx-ink-3);
    --supplier-gray-500: var(--cvx-ink-3);
    --supplier-gray-600: var(--cvx-ink-2);
    --supplier-gray-700: var(--cvx-ink-2);
    --supplier-gray-800: var(--cvx-ink);
    --supplier-gray-900: var(--cvx-ink);
    
    /* Status Colors */
    --supplier-success: var(--cvx-ok);
    --supplier-warning: var(--cvx-warn);
    --supplier-danger: var(--cvx-crit);
    --supplier-info: var(--cvx-navy-600);
    
    /* Typography - Inter Font (matching home) */
    --supplier-font-family: var(--cvx-font-latin);
    --supplier-font-size-xs: 0.75rem;
    --supplier-font-size-sm: 0.875rem;
    --supplier-font-size-base: 1rem;
    --supplier-font-size-lg: 1.125rem;
    --supplier-font-size-xl: 1.25rem;
    --supplier-font-size-2xl: 1.5rem;
    --supplier-font-size-3xl: 1.875rem;
    --supplier-font-size-4xl: 2.25rem;
    
    /* Spacing */
    --supplier-space-1: 0.25rem;
    --supplier-space-2: 0.5rem;
    --supplier-space-3: 0.75rem;
    --supplier-space-4: 1rem;
    --supplier-space-5: 1.25rem;
    --supplier-space-6: 1.5rem;
    --supplier-space-8: 2rem;
    --supplier-space-10: 2.5rem;
    --supplier-space-12: 3rem;
    --supplier-space-16: 4rem;
    
    /* Shadows - Subtle and Professional */
    --supplier-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --supplier-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --supplier-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --supplier-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --supplier-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Border Radius - SHARP EDGES (Ralph Lauren Style) */
    --supplier-radius-none: 0;              /* Sharp edges everywhere */
    --supplier-radius-sm: 0;
    --supplier-radius-base: 0;
    --supplier-radius-md: 0;
    --supplier-radius-lg: 0;
    --supplier-radius-xl: 0;
    --supplier-radius-2xl: 0;
    --supplier-radius-3xl: 0;
    
    /* Transitions */
    --supplier-transition-fast: 150ms ease-in-out;
    --supplier-transition-base: 200ms ease-in-out;
    --supplier-transition-slow: 300ms ease-in-out;
    
    /* Gradients - Professional Blue Gradients */
    --supplier-gradient-primary: linear-gradient(135deg, var(--cvx-navy-800) 0%, var(--cvx-navy-900) 100%);
    --supplier-gradient-accent: linear-gradient(135deg, var(--cvx-navy-600) 0%, var(--cvx-navy-800) 100%);
    --supplier-gradient-light: linear-gradient(135deg, var(--cvx-ground) 0%, var(--cvx-line-soft) 100%);
}

/* ═══════════════════════════════════════════════════════════════════════
   Sticky contact bar — Appendix C §3.1
   Lives here (not in a page sheet) because it is included on both home.css
   and supplier.css surfaces.
   ═══════════════════════════════════════════════════════════════════════ */
.cvx-bar{ font-family:var(--cvx-font-latin); }
.cvx-bar__strip{
  margin:0; background:var(--cvx-navy-800); color:var(--cvx-surface);
  font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  height:24px; display:flex; align-items:center; justify-content:center;
  text-align:center; padding-inline:var(--cvx-s3);
}
.cvx-bar__tel-lg{ display:none; }
.cvx-bar__actions{ display:flex; gap:0; }
.cvx-bar__btn{
  flex:1 1 50%; min-height:48px;               /* gloved thumb target */
  display:inline-flex; align-items:center; justify-content:center; gap:var(--cvx-s2);
  font-size:15px; font-weight:600; color:var(--cvx-surface); text-decoration:none;
  border:0; border-radius:0;
  transition:background var(--cvx-transition);
}
.cvx-bar__btn svg{ flex:none; }
.cvx-bar__btn--call{ background:var(--cvx-action); }       /* THE one orange action */
.cvx-bar__btn--call:hover{ background:var(--cvx-action-hi); }
.cvx-bar__btn--wa{ background:var(--cvx-wa); }             /* WhatsApp only */
.cvx-bar__btn--wa:hover{ filter:brightness(.92); }
.cvx-bar__quiet, .cvx-bar__note{ display:none; }

/* Mobile: fixed to the bottom (both placements) */
@media (max-width:767px){
  .cvx-bar{
    position:fixed; inset-inline:0; bottom:0; z-index:1200;
    box-shadow:var(--cvx-shadow-bar);
    padding-bottom:env(safe-area-inset-bottom, 0px);
    background:var(--cvx-surface);
  }
  /* reserve space so the bar never covers the last line (CLS budget) */
  body{ padding-bottom:74px; }
}

/* Desktop, in-column (product detail): sticky card on navy, per §3.1 */
@media (min-width:768px){
  .cvx-bar--column{
    position:sticky; top:24px;
    background:var(--cvx-navy-800); color:var(--cvx-surface);
    border-radius:var(--cvx-radius); overflow:hidden;
    max-width:360px; margin-inline-start:auto;
  }
  .cvx-bar__body{ padding:var(--cvx-s5); display:grid; gap:var(--cvx-s3); }
  .cvx-bar__tel-lg{
    display:block; margin:0;
    font-family:var(--cvx-font-num); font-variant-numeric:tabular-nums;
    font-size:24px; font-weight:600; line-height:1.2;
  }
  .cvx-bar__tel-label{ font-family:var(--cvx-font-body, inherit); font-size:13px; font-weight:500; opacity:.85; }
  .cvx-bar__tel-lg a{ color:var(--cvx-surface); text-decoration:none; }
  .cvx-bar__tel-lg a:hover{ text-decoration:underline; }
  .cvx-bar__actions{ flex-direction:column; gap:var(--cvx-s2); }
  .cvx-bar__btn{ border-radius:var(--cvx-radius); flex:none; width:100%; }
  .cvx-bar__strip{
    background:transparent; height:auto; justify-content:flex-start;
    text-align:start; padding:0; opacity:.72; order:-1;
  }
  .cvx-bar__quiet{
    display:inline-block; color:var(--cvx-surface); font-size:14px;
    text-decoration:underline; text-underline-offset:3px;
    text-decoration-color:var(--cvx-navy-600);
  }
  .cvx-bar__quiet:hover{ text-decoration-color:var(--cvx-surface); }
  .cvx-bar__note{ display:block; margin:0; font-size:13px; opacity:.7; }
}

/* Desktop, floating (listing / SEO pages — no right column exists): stay
   bottom-fixed rather than render as an orphan card at the end of the page. */
@media (min-width:768px){
  .cvx-bar--floating{
    position:fixed; inset-inline:0; bottom:0; z-index:1200;
    background:var(--cvx-surface); box-shadow:var(--cvx-shadow-bar);
  }
  /* The column rules above give every button flex:none + width:100%; in a
     row that put the WhatsApp button at x=1350 on a 1366 screen. Here the two
     buttons share one 480px track, and the bar drops from 115px to 60px. */
  .cvx-bar--floating .cvx-bar__strip{ display:none; }
  .cvx-bar--floating .cvx-bar__body{ display:flex; align-items:center; justify-content:flex-end; gap:var(--cvx-s3); padding:var(--cvx-s2) var(--cvx-s4); }
  .cvx-bar--floating .cvx-bar__actions{ flex-direction:row; gap:var(--cvx-s2); margin-inline-start:auto; width:min(100%,480px); }
  .cvx-bar--floating .cvx-bar__btn{ flex:1 1 0; width:auto; min-width:0; min-height:44px; padding-inline:var(--cvx-s4); }
  .cvx-bar--floating .cvx-bar__tel-lg,
  .cvx-bar--floating .cvx-bar__note,
  .cvx-bar--floating .cvx-bar__quiet{ display:none; }
  body:has(.cvx-bar--floating){ padding-bottom:64px; }
}

/* §6 accessibility floor */
.cvx-bar a:focus-visible{ outline:2px solid var(--cvx-navy-600); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .cvx-bar__btn{ transition:none; } }

/* ═══════════════════════════════════════════════════════════════════════
   Quick-quote form — Appendix C §3.4
   Shared across page types (product pages load home.css/buyer.css,
   /devis-ai loads cvx-home.css) — lives here like the contact bar.
   ═══════════════════════════════════════════════════════════════════════ */
.cvx-quote{ font-family:var(--cvx-font-latin); }
.cvx-quote__form{
  background:var(--cvx-surface); border:1px solid var(--cvx-line);
  border-radius:var(--cvx-radius); padding:var(--cvx-s5);
  max-width:420px; display:grid; gap:var(--cvx-s4);
}
.cvx-quote__title{ font-size:19px; font-weight:700; margin:0; color:var(--cvx-ink); }
.cvx-quote__hp{ position:absolute; inset-inline-start:-9999px; width:1px; height:1px; overflow:hidden; }
.cvx-quote__field{ display:grid; gap:var(--cvx-s1); }
.cvx-quote__field label{ font-size:13px; font-weight:600; color:var(--cvx-ink-2); }
.cvx-quote__field input,
.cvx-quote__field textarea{
  min-height:48px; padding:var(--cvx-s3); border:1px solid var(--cvx-line);
  border-radius:var(--cvx-radius); font-family:inherit; font-size:15px;
  color:var(--cvx-ink); background:var(--cvx-surface);
}
.cvx-quote__field textarea{ min-height:88px; resize:vertical; }
.cvx-quote__field input:focus-visible,
.cvx-quote__field textarea:focus-visible{
  outline:2px solid var(--cvx-navy-600); outline-offset:2px; border-color:var(--cvx-navy-600);
}
.cvx-quote__submit{ width:100%; }
.cvx-quote__fallback{ margin:0; font-size:13px; color:var(--cvx-ink-3); text-align:center; }
.cvx-quote__fallback a{ color:var(--cvx-navy-600); font-weight:600; text-decoration:none; }
.cvx-quote__fallback a:hover{ text-decoration:underline; }
.cvx-quote__msg--error{
  font-size:13px; color:var(--cvx-crit); background:var(--cvx-crit-bg);
  border-radius:var(--cvx-radius); padding:var(--cvx-s3);
}
.cvx-quote__success{
  background:var(--cvx-ok-bg); border:1px solid var(--cvx-ok);
  border-radius:var(--cvx-radius); padding:var(--cvx-s5); max-width:420px;
  color:var(--cvx-ink);
}
.cvx-quote__success a{ color:var(--cvx-navy-600); font-weight:600; }

/* Modal shell, used when the form is opened from the contact bar's quiet link */
.cvx-modal{
  position:fixed; inset:0; z-index:2000; display:none;
  background:rgba(2,26,58,.55); padding:var(--cvx-s4);
  align-items:center; justify-content:center; overflow-y:auto;
}
.cvx-modal.is-open{ display:flex; }
.cvx-modal__panel{ position:relative; width:100%; max-width:420px; }
.cvx-modal__close{
  position:absolute; top:calc(-1 * var(--cvx-s6)); inset-inline-end:0;
  width:36px; height:36px; border-radius:var(--cvx-radius); border:0;
  background:var(--cvx-surface); color:var(--cvx-ink); cursor:pointer;
  font-size:18px; line-height:1;
}


/* ═══════════════════════════════════════════════════════════════════════
   PRIMITIVES — Appendix C §2.3, §3, §6
   ───────────────────────────────────────────────────────────────────────
   These live in the TOKEN file, not in a page sheet, because every surface
   needs them: 68 templates link this file, only 8 link cvx-page.css. The
   page sheet keeps layout and the product-card/detail components; anything
   generic belongs here.

   Two names are supported for the badge (.cvx-badge and .cvx-pill) because
   live pages already ship .cvx-pill. Prefer .cvx-badge in new markup.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Buttons (§3.1) ──────────────────────────────────────────────────────
   Four roles and no more. ONE orange per screen: if two things are orange,
   neither is the action. Green is the WhatsApp control and nothing else.
   The third control is a text button, not a third fill — three fills would
   flatten the hierarchy. */
.cvx-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--cvx-s2); min-height:44px; padding:var(--cvx-s3) var(--cvx-s4);
  border-radius:var(--cvx-radius); border:1px solid transparent;
  font-family:var(--cvx-font-latin);
  font-size:15px; font-weight:600; line-height:1.2; text-decoration:none;
  cursor:pointer;
  transition:background var(--cvx-transition), border-color var(--cvx-transition);
}
.cvx-btn--lg{ min-height:52px; padding-inline:var(--cvx-s5); font-size:16px; }
.cvx-btn--block{ width:100%; }

/* THE one orange action per screen (§2.1) */
.cvx-btn--action{ background:var(--cvx-action); color:var(--cvx-surface); }
.cvx-btn--action:hover{ background:var(--cvx-action-hi); }

/* WhatsApp control ONLY — green appears nowhere else on the site */
.cvx-btn--wa{ background:var(--cvx-wa); color:var(--cvx-surface); }
.cvx-btn--wa:hover{ filter:brightness(.94); }

/* Secondary: outlined, carries no fill weight. --ghost is the legacy name. */
.cvx-btn--secondary,
.cvx-btn--ghost{ background:var(--cvx-surface); color:var(--cvx-navy-800); border-color:var(--cvx-line); }
.cvx-btn--secondary:hover,
.cvx-btn--ghost:hover{ border-color:var(--cvx-navy-600); }

/* Tertiary: an underlined text button, deliberately quiet (§3.1) */
.cvx-btn--tertiary{
  background:none; border-color:transparent; color:var(--cvx-navy-600);
  min-height:44px; padding-inline:var(--cvx-s2);
  text-decoration:underline; text-underline-offset:3px;
}
.cvx-btn--tertiary:hover{ color:var(--cvx-navy-800); }

.cvx-btn[disabled],.cvx-btn[aria-disabled="true"]{ opacity:.5; pointer-events:none; }
.cvx-btn svg{ flex:none; }

/* ── Badge / status pill (§3.2, §3.6) ────────────────────────────────────
   §6: colour is never the only carrier of status — every badge has text.
   Semantic colour never fills anything bigger than one of these. */
.cvx-badge,.cvx-pill{
  /* justify-self matters as much as align-self: inside a grid (the product
     card body is one) the default is stretch, and the pill spans the whole
     column instead of hugging its text. */
  display:inline-flex; align-items:center; gap:var(--cvx-s1);
  align-self:start; justify-self:start; width:fit-content;
  padding:2px 9px; border-radius:var(--cvx-radius-pill);
  font-family:var(--cvx-font-latin);
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.03em;
  white-space:nowrap;
}
.cvx-badge--ok,.cvx-pill--ok,.cvx-pill--stock{ background:var(--cvx-ok-bg); color:var(--cvx-ok); }
.cvx-badge--warn,.cvx-pill--warn,.cvx-pill--order{ background:var(--cvx-warn-bg); color:var(--cvx-warn); }
.cvx-badge--crit,.cvx-pill--crit{ background:var(--cvx-crit-bg); color:var(--cvx-crit); }
.cvx-badge--info,.cvx-pill--info,.cvx-pill--import{ background:var(--cvx-navy-100); color:var(--cvx-navy-800); }
.cvx-badge--neutral,.cvx-pill--neutral{ background:var(--cvx-ground); color:var(--cvx-ink-2); }
/* Numbers inside a badge still get the mono treatment (e.g. "À TRAITER — 293 j") */
.cvx-badge .cvx-num,.cvx-pill .cvx-num{ font-family:var(--cvx-font-num); font-variant-numeric:tabular-nums; }

/* ── Form controls (§3.4, §6) ────────────────────────────────────────────
   48px minimum. Labels go above the field and stay visible — placeholder-only
   labels vanish on focus and break for the Arabic reader. */
.cvx-field{ display:grid; gap:var(--cvx-s1); }
.cvx-field label,.cvx-label{
  font-family:var(--cvx-font-latin);
  font-size:13px; font-weight:600; color:var(--cvx-ink-2);
}
.cvx-input,.cvx-select,.cvx-textarea{
  width:100%; min-height:48px; padding:var(--cvx-s3);
  background:var(--cvx-surface); color:var(--cvx-ink);
  /* ink-3, not --cvx-line: a 1px --cvx-line border is 1.34:1 on white, so the
     field boundary is not perceivable (WCAG 1.4.11 wants 3:1). ink-3 is 4.89:1
     and is already in the palette — no new colour. --cvx-line stays correct for
     decorative card and table separators. */
  border:1px solid var(--cvx-ink-3); border-radius:var(--cvx-radius);
  font-family:var(--cvx-font-latin); font-size:15px; line-height:1.4;
  transition:border-color var(--cvx-transition);
}
.cvx-textarea{ min-height:88px; resize:vertical; }
.cvx-input:hover,.cvx-select:hover,.cvx-textarea:hover{ border-color:var(--cvx-ink-2); }
/* Numeric inputs are compared, so they are mono like every other number */
.cvx-input--num{ font-family:var(--cvx-font-num); font-variant-numeric:tabular-nums; }
.cvx-input::placeholder,.cvx-textarea::placeholder{ color:var(--cvx-ink-3); }
.cvx-input[aria-invalid="true"],.cvx-select[aria-invalid="true"],.cvx-textarea[aria-invalid="true"]{
  border-color:var(--cvx-crit);
}
.cvx-error{ font-size:13px; color:var(--cvx-crit); }
.cvx-hint{ font-size:13px; color:var(--cvx-ink-3); }

/* ── Card (§2.3) — separated by a 1px line, never by a shadow ─────────── */
.cvx-card{
  display:flex; flex-direction:column;
  background:var(--cvx-surface); border:1px solid var(--cvx-line);
  border-radius:var(--cvx-radius);
  overflow:hidden;
  transition:border-color var(--cvx-transition);
}
.cvx-card:hover{ border-color:var(--cvx-navy-600); }
.cvx-card--flat:hover{ border-color:var(--cvx-line); }
.cvx-card__pad{ padding:var(--cvx-s4); }

/* ── Table (§3.3, §3.6) ──────────────────────────────────────────────────
   Always wrap in .cvx-tablewrap: a spec table must scroll inside its own box
   rather than push the page sideways on a phone. */
.cvx-tablewrap{ overflow-x:auto; }
.cvx-table{
  width:100%; border-collapse:collapse;
  background:var(--cvx-surface); border:1px solid var(--cvx-line);
  font-family:var(--cvx-font-latin); font-size:14px;
}
.cvx-table th,.cvx-table td{
  padding:var(--cvx-s3); text-align:start;
  border-bottom:1px solid var(--cvx-line-soft);
}
.cvx-table thead th{
  background:var(--cvx-navy-100);
  font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--cvx-ink-2);
}
.cvx-table tbody th{ font-weight:600; color:var(--cvx-ink-2); }
.cvx-table tbody tr:nth-child(even){ background:var(--cvx-line-soft); }
.cvx-table tbody tr:last-child th,.cvx-table tbody tr:last-child td{ border-bottom:0; }
/* Amounts are compared down a column: mono, tabular, right-aligned (§3.6) */
.cvx-table .cvx-amount,.cvx-amount{
  font-family:var(--cvx-font-num); font-variant-numeric:tabular-nums; text-align:end;
}
/* Admin density (§3.6) — a working tool, not a showcase */
.cvx-table--dense{ font-size:13px; }
.cvx-table--dense th,.cvx-table--dense td{ padding:var(--cvx-s2); }
.cvx-table--dense tbody tr:hover{ background:var(--cvx-line-soft); }
.cvx-table--sticky thead th{ position:sticky; top:0; z-index:1; }

/* ── Floating action button ──────────────────────────────────────────────
   The buyer and supplier areas each keep one persistent CTA. Square-ish per
   §2.3 (the pill radius is for badges only) and NO shadow — the sticky contact
   bar is the single shadow on the site. */
.cvx-fab{
  position:fixed; inset-inline-end:22px; bottom:22px; z-index:999;
  display:inline-flex; align-items:center; gap:var(--cvx-s2);
  min-height:48px; padding:0 var(--cvx-s4);
  /* Navy, NOT orange. This button is persistent on every page of its area, so
     painting it --cvx-action would put a second orange on any page that has
     its own primary action — and §2.1 says two oranges means neither is the
     action. Fixed position is already prominence enough. */
  background:var(--cvx-navy-800); color:var(--cvx-surface);
  border:1px solid transparent; border-radius:var(--cvx-radius);
  font-family:var(--cvx-font-latin); font-size:14px; font-weight:600;
  text-decoration:none;
  transition:background var(--cvx-transition);
}
.cvx-fab:hover{ background:var(--cvx-navy-600); color:var(--cvx-surface); }
.cvx-fab:focus-visible{ outline:2px solid var(--cvx-navy-600); outline-offset:2px; }
@media (max-width:640px){ .cvx-fab span{ display:none; } .cvx-fab{ padding:0 var(--cvx-s3); } }
/* Never let the FAB sit on top of the mobile contact bar */
@media (max-width:767px){ .cvx-fab{ bottom:92px; } }

/* ── Toast / flash (§3.6 semantics) ──────────────────────────────────────
   Fixed, single instance, dismissible, announced politely. Semantic colour
   plus text — never colour alone (§6). */
.cvx-toast{
  position:fixed; inset-inline:var(--cvx-s4); bottom:var(--cvx-s4); z-index:1300;
  display:flex; align-items:flex-start; gap:var(--cvx-s3);
  max-width:520px; margin-inline:auto; padding:var(--cvx-s3) var(--cvx-s4);
  border:1px solid var(--cvx-line); border-radius:var(--cvx-radius);
  background:var(--cvx-surface); color:var(--cvx-ink);
  font-family:var(--cvx-font-latin); font-size:14px; line-height:1.45;
}
.cvx-toast[hidden]{ display:none; }
.cvx-toast__msg{ flex:1; }
.cvx-toast__x{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; margin:-2px -4px 0 0;
  background:none; border:0; color:inherit; cursor:pointer; opacity:.6;
}
.cvx-toast__x:hover{ opacity:1; }
.cvx-toast__x:focus-visible{ outline:2px solid var(--cvx-navy-600); outline-offset:2px; }
.cvx-toast--ok{   border-inline-start:3px solid var(--cvx-ok);   background:var(--cvx-ok-bg); }
.cvx-toast--warn{ border-inline-start:3px solid var(--cvx-warn); background:var(--cvx-warn-bg); }
.cvx-toast--crit{ border-inline-start:3px solid var(--cvx-crit); background:var(--cvx-crit-bg); }
.cvx-toast--info{ border-inline-start:3px solid var(--cvx-navy-600); background:var(--cvx-navy-100); }
/* clear the mobile contact bar */
@media (max-width:767px){ .cvx-toast{ bottom:92px; } }

/* ── Empty state ─────────────────────────────────────────────────────────
   Never a blank table or a bare "no results". A styled panel that says what
   happened and offers exactly one next action (plus a quiet way to reach a
   human, because on this site that is the actual conversion path). */
.cvx-empty{
  grid-column:1 / -1;
  display:grid; gap:var(--cvx-s3); justify-items:center; text-align:center;
  padding:var(--cvx-s7) var(--cvx-s4);
  background:var(--cvx-surface); border:1px solid var(--cvx-line);
  border-radius:var(--cvx-radius);
  font-family:var(--cvx-font-latin);
}
.cvx-empty__title{ margin:0; font-size:19px; font-weight:700; color:var(--cvx-ink); }
.cvx-empty__text{ margin:0; max-width:52ch; font-size:15px; color:var(--cvx-ink-2); }
.cvx-empty__actions{ display:flex; flex-wrap:wrap; gap:var(--cvx-s3); justify-content:center; margin-top:var(--cvx-s2); }

/* Inline icon set (§7) — one grid, one stroke style, inherits text colour */
.cvx-i{ flex:none; vertical-align:-.125em; }

/* ── Admin (§3.6) ────────────────────────────────────────────────────────
   Admin is a working tool, not a showcase: maximum density, 13px, 8px row
   padding, sticky header row, semantic pills, amounts mono and right-aligned.
   Opt in with .cvx-admin on a wrapper — it never leaks onto a public page. */
.cvx-admin{ font-family:var(--cvx-font-latin); font-size:13px; color:var(--cvx-ink); }
.cvx-admin table{ width:100%; border-collapse:collapse; font-size:13px; }
.cvx-admin th,.cvx-admin td{ padding:var(--cvx-s2); text-align:start; border-bottom:1px solid var(--cvx-line-soft); }
.cvx-admin thead th{
  position:sticky; top:0; z-index:2;
  background:var(--cvx-navy-100); color:var(--cvx-ink-2);
  font-size:12px; text-transform:uppercase; letter-spacing:.06em; font-weight:600;
}
.cvx-admin tbody tr:hover{ background:var(--cvx-line-soft); }
/* Amounts are compared down a column */
.cvx-admin .cvx-amount,.cvx-admin td.num{
  font-family:var(--cvx-font-num); font-variant-numeric:tabular-nums; text-align:end;
}

/* The stale-order badge — the ONE place a colour is allowed to shout (§3.6).
   It must be impossible to scroll past. */
.cvx-stale{
  display:inline-flex; align-items:center; gap:var(--cvx-s1);
  padding:2px 8px; border-radius:var(--cvx-radius-pill);
  background:var(--cvx-crit-bg); color:var(--cvx-crit);
  font-family:var(--cvx-font-num); font-variant-numeric:tabular-nums;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  white-space:nowrap;
}
/* Any non-terminal row older than 14 days also carries a 3px left rule */
.cvx-admin tr.is-stale > *:first-child{ box-shadow:inset 3px 0 0 0 var(--cvx-crit); }

/* ── The mono rule (§2.2) ────────────────────────────────────────────────
   Every number a user compares — price, quantity, date, reference, phone —
   is mono with tabular figures. This is the strongest "supplier, not shop"
   signal on the site, so it gets a utility of its own. */
.cvx-num{ font-family:var(--cvx-font-num); font-variant-numeric:tabular-nums; }

/* ── Accessibility floor (§6) ────────────────────────────────────────────
   Unscoped on purpose: the .cvx-scoped ring in cvx-page.css only fires on
   pages that carry .cvx on <body>, and most templates do not yet. */
.cvx-btn:focus-visible,.cvx-input:focus-visible,.cvx-select:focus-visible,
.cvx-textarea:focus-visible,.cvx-badge:focus-visible,.cvx-pill:focus-visible{
  outline:2px solid var(--cvx-navy-600); outline-offset:2px;
}

/* §2.4 — transitions are hover/focus only, and they stop entirely on request */
@media (prefers-reduced-motion:reduce){
  .cvx-btn,.cvx-card,.cvx-input,.cvx-select,.cvx-textarea{ transition:none; }
}
/* source: cvx-page.css */
/* CONVXA — shared page system, Appendix C "fiche technique".
   ---------------------------------------------------------------------------
   Extracted from cvx-home.css so every public page uses ONE system instead of
   each template carrying its own chrome. cvx-home.css now holds only the
   home-specific blocks (hero, facts, cats, steps, credit); the homepage loads
   both files, so their union is exactly what it had before.

   Tokens come from cvx-tokens.css — this file must contain ZERO hardcoded hex
   (grep-proofed, §7). Logical properties throughout (§4) so one sheet serves
   LTR and RTL without a second stylesheet.

   Load order on a page:  cvx-tokens.css → cvx-page.css → [page-specific].css
*/

/* ── Base ────────────────────────────────────────────────────────────── */
.cvx{
  margin:0;
  background:var(--cvx-ground);
  color:var(--cvx-ink);
  font-family:var(--cvx-font-latin);
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.cvx *,.cvx *::before,.cvx *::after{ box-sizing:border-box; }
.cvx img{ max-width:100%; display:block; }
.cvx a{ color:inherit; }
/* Preserve each button's text colour against the inherited link reset. */
.cvx a:where(.cvx-btn--action,.cvx-btn--wa){ color:var(--cvx-surface); }
.cvx a:where(.cvx-btn--secondary,.cvx-btn--ghost){ color:var(--cvx-navy-800); }
.cvx a:where(.cvx-btn--tertiary){ color:var(--cvx-navy-600); }
.cvx :where(button,input,select,textarea){ font-family:inherit; }
.cvx h1,.cvx h2,.cvx h3,.cvx h4{ margin:0; line-height:1.15; text-wrap:balance; }
.cvx p{ margin:0; }
.cvx ul,.cvx ol,.cvx dl{ margin:0; padding:0; list-style:none; }

.cvx-wrap{ max-width:1200px; margin-inline:auto; padding-inline:var(--cvx-s4); }
@media (min-width:768px){ .cvx-wrap{ padding-inline:var(--cvx-s5); } }

.cvx-num{ font-family:var(--cvx-font-num); font-variant-numeric:tabular-nums; }
.cvx-eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--cvx-ink-3);
}
.cvx-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.cvx-skip,.cvx a.cvx-skip{
  position:absolute; inset-inline-start:-9999px; top:0; z-index:100;
  background:var(--cvx-navy-800); color:var(--cvx-surface); padding:var(--cvx-s3);
}
.cvx-skip:focus,.cvx a.cvx-skip:focus{
  inset-inline-start:0; outline:2px solid var(--cvx-surface); outline-offset:-4px;
}

/* §6: visible focus everywhere, never outline:none without a replacement */
.cvx a:focus-visible,.cvx button:focus-visible,.cvx summary:focus-visible,
.cvx input:focus-visible,.cvx select:focus-visible,.cvx textarea:focus-visible{
  outline:2px solid var(--cvx-navy-600); outline-offset:2px;
}

.cvx-link{ color:var(--cvx-surface); text-decoration:none; font-size:14px; }
.cvx-link:hover{ text-decoration:underline; }

/* ── Chrome self-sufficiency ──────────────────────────────────────────────
   The header and footer are included on pages whose <body> is NOT yet .cvx
   (products, product_details, search_results keep their legacy body until
   phase 4). The .cvx resets above therefore do not reach them, and without
   these the footer <ul> renders bullets and every <p>/<h4> keeps its UA
   margins. Scoped tightly to the two components so nothing else moves. */
.cvx-head,.cvx-foot,.cvx-utility{ box-sizing:border-box; }
.cvx-head *,.cvx-head *::before,.cvx-head *::after,
.cvx-foot *,.cvx-foot *::before,.cvx-foot *::after,
.cvx-utility *,.cvx-utility *::before,.cvx-utility *::after{ box-sizing:border-box; }
.cvx-head ul,.cvx-foot ul{ list-style:none; margin:0; padding:0; }
.cvx-head p,.cvx-foot p,
.cvx-head h1,.cvx-head h2,.cvx-head h3,.cvx-head h4,
.cvx-foot h1,.cvx-foot h2,.cvx-foot h3,.cvx-foot h4{ margin:0; }
.cvx-head img,.cvx-foot img{ display:block; max-width:100%; }
.cvx-head a,.cvx-foot a,.cvx-utility a{ color:inherit; }
.cvx-head,.cvx-foot,.cvx-utility{ font-family:var(--cvx-font-latin); line-height:1.55; }
.cvx-head button{ font-family:var(--cvx-font-latin); }
/* §6 focus ring, unscoped for the same reason */
.cvx-head a:focus-visible,.cvx-head button:focus-visible,
.cvx-foot a:focus-visible,.cvx-utility a:focus-visible{
  outline:2px solid var(--cvx-surface); outline-offset:2px;
}

/* ── Utility strip + header (navy administrative band) ───────────────── */
.cvx-utility{ background:var(--cvx-navy-900); color:var(--cvx-surface); font-size:12px; }
.cvx-utility__in{ display:flex; align-items:center; justify-content:space-between; gap:var(--cvx-s3); min-height:30px; }
.cvx-utility__in > span{ opacity:.78; }
/* home.css gives every <a> min-height:44px and loads after this file on most
   pages — the phone link and nav links were 44px tall with their text pinned
   to the top of a 30/48px row. Header links size to their row instead. */
.cvx-utility__tel{ font-family:var(--cvx-font-num); font-weight:600; text-decoration:none;
  display:inline-flex; align-items:center; min-height:0; min-width:0; }
/* This is the most important tap target on the site; it was 19px tall. */
@media (pointer:coarse){
  .cvx-utility__in{ min-height:40px; }
  .cvx-utility__tel{ display:flex; align-items:center; min-height:40px; padding-inline:var(--cvx-s1); }
}
.cvx-utility__tel:hover{ text-decoration:underline; }
/* Phones: the strip only carried the phone number, which the bottom contact bar
   and the hero already show — 44px of navy on every page for nothing. */
@media (max-width:600px){ .cvx-utility{ display:none; } }

.cvx-head{ background:var(--cvx-navy-800); color:var(--cvx-surface); position:sticky; top:0; z-index:60; }
.cvx-head__in{ display:flex; align-items:center; gap:var(--cvx-s4); min-height:48px; }
.cvx-head__brand{ display:flex; align-items:center; min-height:40px; flex:none; }
/* flex:none + max-width:none — the brand is a flex item; when the nav/search
   crowd the row (>=1160px) the shared `.cvx img{max-width:100%}` was resolving
   to 0 and collapsing the logo. The mark is a fixed-size brand asset. */
.cvx-head__brand img{ height:24px; width:auto; max-width:none; flex:none; }
.cvx-head__nav{ display:none; align-items:center; gap:var(--cvx-s3); font-size:13px; margin-inline-end:auto; }
/* nowrap: six items at 14px wrapped to two lines at 1440 and pushed the header
   to 96px tall. They stay on one line and the nav shows only where it fits. */
.cvx-head__nav a{ display:inline-flex; align-items:center; min-height:44px; min-width:0; text-decoration:none; opacity:.85; white-space:nowrap; }
.cvx-head__nav a:hover{ opacity:1; text-decoration:underline; }
.cvx-head__right{ display:flex; align-items:center; gap:var(--cvx-s2); margin-inline-start:auto; }

/* The header CTA rides on every page, including product pages that already
   carry an orange "Appeler" in the sticky bar. Two oranges on one screen and
   §2.1 says neither is the action — so the header steps down to an outline.
   White on navy-800 is 15.3:1.
   QA C3: 40px, centré comme les liens de nav, même corps de texte. */
.cvx-head .cvx-btn--action{
  background:transparent; color:var(--cvx-surface);
  border-color:rgba(255,255,255,.45);
  min-height:44px; padding-block:0; padding-inline:var(--cvx-s3); font-size:12px; white-space:nowrap;
}
.cvx-head__right .cvx-link{ display:inline-flex; align-items:center; min-height:44px; min-width:0; font-size:13px; }
.cvx-head .cvx-btn--action{ min-width:0; }
.cvx-head .cvx-search__go{ min-width:0; }
.cvx-head .cvx-btn--action:hover{
  background:var(--cvx-surface); color:var(--cvx-navy-800); border-color:var(--cvx-surface);
}

/* Search — sits between brand and nav on desktop, full width under the bar on
   mobile. White field on the navy band so it reads as an input, not a link. */
/* QA C2: sans min-width le flex écrasait le champ en un carré vide. */
.cvx-search{ display:none; position:relative; flex:1; min-width:180px; max-width:220px; }
.cvx-search__in{
  width:100%; min-height:44px; padding:0 44px 0 var(--cvx-s3);
  background:var(--cvx-surface); color:var(--cvx-ink);
  border:1px solid var(--cvx-line); border-radius:var(--cvx-radius);
  font-family:var(--cvx-font-latin); font-size:13px;
}
.cvx-search__in::placeholder{ color:var(--cvx-ink-3); }
.cvx-search__go{
  position:absolute; inset-inline-end:0; top:0;
  width:44px; height:100%; min-height:44px; display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; color:var(--cvx-ink-2); cursor:pointer;
}
.cvx-search__go:hover{ color:var(--cvx-action); }
@media (min-width:1160px){ .cvx-search{ display:block; } }
@media (min-width:1160px){
  .cvx-head__nav{ display:flex; }
  .cvx-head__right{ margin-inline-start:0; }
}
/* 1160–1439px: brand + search + six links + Connexion + CTA summed to 1387px
   on a 1366 screen — the CTA wrapped and the page scrolled sideways. The
   supplier link is the lowest-traffic item; it stays in the mobile menu. */
@media (min-width:1160px) and (max-width:1439px){ .cvx-head__nav a:nth-child(6){ display:none; } }
.cvx-burger{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; background:transparent; color:inherit;
  border:1px solid rgba(255,255,255,.25); border-radius:var(--cvx-radius); cursor:pointer;
}
@media (min-width:1160px){ .cvx-burger{ display:none; } }
@media (max-width:1159px){ .cvx-head__right .cvx-link{ display:none; } }
@media (max-width:520px){ .cvx-head__right .cvx-btn--action{ display:none; } }

.cvx-mnav{ display:none; flex-direction:column; border-top:1px solid rgba(255,255,255,.14); }
/* QA C2: recherche en tête du menu mobile */
.cvx-mnav .cvx-search{ display:block; flex:none; max-width:none; margin:var(--cvx-s3) var(--cvx-s4) var(--cvx-s1); }
.cvx-mnav .cvx-search__in{ min-height:44px; padding-inline-end:44px; font-size:16px; }
.cvx-mnav .cvx-search__go{ width:44px; }
.cvx-mnav.is-open{ display:flex; }
.cvx-mnav a{
  padding:var(--cvx-s4) var(--cvx-s4); text-decoration:none; font-size:15px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
@media (min-width:1160px){ .cvx-mnav{ display:none !important; } }

/* ── Page header band (§3.5 — city pages, and any interior page) ─────── */
.cvx-band{ background:var(--cvx-navy-800); color:var(--cvx-surface); padding-block:var(--cvx-s6); }
.cvx-band h1{ font-size:26px; font-weight:700; }
@media (min-width:768px){ .cvx-band h1{ font-size:34px; } }
.cvx-band__eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  opacity:.72; margin-bottom:var(--cvx-s3);
}
/* the mono delivery line the spec asks for */
.cvx-band__meta{
  margin-top:var(--cvx-s3); font-family:var(--cvx-font-num);
  font-size:13px; opacity:.85;
}
.cvx-band__lead{ margin-top:var(--cvx-s3); max-width:64ch; opacity:.9; font-size:15px; }
.cvx-band__cta{ display:flex; flex-wrap:wrap; gap:var(--cvx-s3); margin-top:var(--cvx-s4); }
/* A ghost button inherits the band's white text, so on navy it was white on
   white. On dark bands it becomes an outline. */
.cvx-band .cvx-btn--ghost,.cvx-cta .cvx-btn--ghost{ background:transparent; color:var(--cvx-surface); border-color:rgba(255,255,255,.55); }
.cvx-band .cvx-btn--ghost:hover,.cvx-cta .cvx-btn--ghost:hover{ background:var(--cvx-surface); color:var(--cvx-navy-800); border-color:var(--cvx-surface); }

/* ── Sections ────────────────────────────────────────────────────────── */
.cvx-sec{ padding-block:var(--cvx-s6); border-bottom:1px solid var(--cvx-line); }
.cvx-sec--alt{ background:var(--cvx-surface); }
.cvx-sec__head{ margin-bottom:var(--cvx-s5); }
.cvx-sec__head h2{ font-size:19px; font-weight:700; }
@media (min-width:768px){ .cvx-sec__head h2{ font-size:22px; } }
.cvx-sec__lead{ color:var(--cvx-ink-2); max-width:68ch; margin-top:var(--cvx-s3); }
.cvx-note{ margin-top:var(--cvx-s4); font-size:13px; color:var(--cvx-ink-3); }
.cvx-prose p{ color:var(--cvx-ink-2); max-width:70ch; }
.cvx-prose p + p{ margin-top:var(--cvx-s4); }

/* Two-column interior layout: content + sticky contact rail */
.cvx-cols{ display:grid; gap:var(--cvx-s6); align-items:start; }
@media (min-width:992px){ .cvx-cols{ grid-template-columns:1fr 360px; gap:var(--cvx-s6); } }

/* Table, buttons, badges, inputs and the card surface are PRIMITIVES —
   they live in cvx-tokens.css so every template gets them, not just the
   eight that link this file. */

/* ── FAQ — native details, zero JS ───────────────────────────────────── */
.cvx-faq__title{ font-size:19px; font-weight:700; margin-block:var(--cvx-s6) var(--cvx-s4); }
.cvx-faq{ background:var(--cvx-surface); border:1px solid var(--cvx-line); border-radius:var(--cvx-radius); }
.cvx-faq details{ border-bottom:1px solid var(--cvx-line-soft); }
.cvx-faq details:last-child{ border-bottom:0; }
.cvx-faq summary{
  cursor:pointer; padding:var(--cvx-s4); font-weight:600; font-size:15px;
  list-style:none; display:flex; justify-content:space-between; gap:var(--cvx-s3);
}
.cvx-faq summary::-webkit-details-marker{ display:none; }
.cvx-faq summary::after{ content:'+'; color:var(--cvx-ink-3); font-weight:400; }
.cvx-faq details[open] summary::after{ content:'−'; }
.cvx-faq__a{ padding:0 var(--cvx-s4) var(--cvx-s4); }
.cvx-faq__a p{ font-size:14px; color:var(--cvx-ink-2); max-width:68ch; }

/* ── Final CTA ───────────────────────────────────────────────────────── */
.cvx-cta{ background:var(--cvx-navy-800); color:var(--cvx-surface); padding-block:var(--cvx-s6); }
.cvx-cta__in{ display:grid; gap:var(--cvx-s5); }
@media (min-width:768px){ .cvx-cta__in{ grid-template-columns:1fr auto; align-items:center; } }
.cvx-cta h2{ font-size:22px; font-weight:700; }
.cvx-cta p{ margin-top:var(--cvx-s2); font-size:15px; opacity:.8; }
.cvx-cta__actions{ display:flex; align-items:center; gap:var(--cvx-s4); flex-wrap:wrap; }
.cvx-cta__tel{ font-size:20px; font-weight:600; color:var(--cvx-surface); text-decoration:none; }
.cvx-cta__tel:hover{ text-decoration:underline; }

/* Error pages (§ family I) — the escape hatch, styled */
.error-contact{
  margin-block:var(--cvx-s6); padding:var(--cvx-s5);
  background:var(--cvx-surface); border:1px solid var(--cvx-line);
  border-radius:var(--cvx-radius); text-align:center;
}
.error-contact__lead{ margin:0 0 var(--cvx-s4); font-size:16px; color:var(--cvx-ink); }
.error-contact__actions{ display:flex; flex-wrap:wrap; gap:var(--cvx-s3); justify-content:center; }
.error-contact__note{ margin:var(--cvx-s4) 0 0; font-size:13px; color:var(--cvx-ink-3); }
.error-contact__note a{ color:var(--cvx-navy-600); font-weight:600; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.cvx-foot{ background:var(--cvx-navy-900); color:var(--cvx-surface); padding-block:var(--cvx-s6) var(--cvx-s4); font-size:14px; }
/* The buyer/supplier FAB is fixed; on a short page it lands on the legal line.
   Reserve room so the identity strip is never covered. */
body:has(.cvx-fab) .cvx-foot{ padding-bottom:var(--cvx-s8); }
.cvx-foot__grid{ display:grid; gap:var(--cvx-s6); }
@media (min-width:768px){ .cvx-foot__grid{ grid-template-columns:2fr 1fr 1fr 1fr; } }
.cvx-foot img{ height:26px; width:auto; margin-bottom:var(--cvx-s3); }
.cvx-foot p{ opacity:.72; max-width:38ch; }
.cvx-foot h4{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; opacity:.6; margin-bottom:var(--cvx-s3); }
.cvx-foot ul{ display:grid; gap:var(--cvx-s2); }
/* §6 wants 44px targets. On a mouse a 27px link is comfortable and a 44px one
   makes the footer needlessly tall, so the floor is applied where it actually
   matters — coarse pointers. The gap collapses so total height barely moves. */
@media (pointer:coarse), (max-width:767px){
  .cvx-foot ul{ gap:0; }
  .cvx-foot li a{ display:flex; align-items:center; min-height:44px; }
}
.cvx-foot a{ text-decoration:none; opacity:.85; }
.cvx-foot a:hover{ opacity:1; text-decoration:underline; }
/* Legal identity strip — the lines a bank analyst looks for first */
.cvx-foot__identity{
  display:flex; flex-wrap:wrap; gap:var(--cvx-s2) var(--cvx-s5);
  margin-top:var(--cvx-s5); padding-top:var(--cvx-s4);
  border-top:1px solid rgba(255,255,255,.14);
  font-size:13px; opacity:.75;
}
.cvx-foot__identity .cvx-num{ font-weight:600; }
@media (pointer:coarse), (max-width:767px){
  .cvx-foot__legal a,.cvx-foot__identity a{ display:inline-flex; align-items:center; min-height:44px; }
  .cvx-try a,.cvx-table tbody th a{ display:inline-flex; align-items:center; min-height:44px; }
}
.cvx-foot__legal{
  display:flex; flex-wrap:wrap; gap:var(--cvx-s3); justify-content:space-between;
  margin-top:var(--cvx-s3); padding-top:var(--cvx-s3);
  font-size:13px; opacity:.7;
}

/* ═════════════════════════════════════════════════════════════════════
   §3.2 — Product card (listing grid)
   ═══════════════════════════════════════════════════════════════════ */
.cvx-grid{
  display:grid; gap:var(--cvx-s4);
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
}
/* 4:3, contain not cover — a cut-off fitting is worse than a small one */
.cvx-card__media{
  position:relative;                       /* the placeholder underlays the img */
  aspect-ratio:4/3; background:var(--cvx-ground);
  border-bottom:1px solid var(--cvx-line);
  display:flex; align-items:center; justify-content:center;
}
.cvx-card__media img{
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:contain;
  background:var(--cvx-ground);            /* hides the panel behind it */
}
/* No image = a rendered placeholder, never a broken image or empty box */
.cvx-card__ph{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--cvx-s2); padding:var(--cvx-s3);
  text-align:center;
}
.cvx-card__ph-mark{
  font-family:var(--cvx-font-num); font-size:13px; font-weight:700;
  letter-spacing:.14em; color:var(--cvx-navy-600); opacity:.55;
}
.cvx-card__ph-cat{ font-family:var(--cvx-font-num); font-size:12px; color:var(--cvx-ink-3); }
.cvx-card__body{ display:grid; gap:var(--cvx-s2); padding:var(--cvx-s4); flex:1; }
.cvx-card__cat{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--cvx-ink-3); }
.cvx-card__title{
  font-size:15px; font-weight:600; color:var(--cvx-ink); text-decoration:none;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cvx-card__title:hover{ text-decoration:underline; }
.cvx-card__price{
  font-family:var(--cvx-font-num); font-variant-numeric:tabular-nums;
  font-size:17px; font-weight:600; color:var(--cvx-ink);
}
.cvx-card__unit{ font-size:13px; color:var(--cvx-ink-3); font-weight:400; }
/* An unpriced product must still look like an invitation — never grey */
.cvx-card__ask{ font-size:15px; font-weight:600; color:var(--cvx-action); }
.cvx-card__foot{
  display:flex; gap:var(--cvx-s2); padding:var(--cvx-s3) var(--cvx-s4) var(--cvx-s4);
  border-top:1px solid var(--cvx-line-soft); margin-top:auto;
}
/* 40px icon actions so a listing converts without a click into detail */
.cvx-card__act{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--cvx-s2);
  flex:1; min-height:44px; border-radius:var(--cvx-radius);   /* §6 touch floor */
  font-size:13px; font-weight:600; text-decoration:none;
  transition:background var(--cvx-transition);
}
/* Outlined, not filled. §3.2 wants both actions ON the card, but §2.1 wants
   ONE orange per screen — and a 24-card grid of orange fills is a wall of
   orange in which nothing is the action. Outlining keeps both actions present
   and legible while the page's single orange stays on the sticky contact bar.
   Both text colours clear 4.5:1 on white (orange 5.18, green 4.53). */
.cvx-card__act--call{ background:var(--cvx-surface); color:var(--cvx-action); border:1px solid var(--cvx-action); }
.cvx-card__act--call:hover{ background:var(--cvx-action); color:var(--cvx-surface); }
.cvx-card__act--wa{ background:var(--cvx-surface); color:var(--cvx-wa); border:1px solid var(--cvx-wa); }
/* Buyer area: a logged-in purchase flow, so the card action is navigation,
   not a phone call. Outlined — it is not competing for the page's orange. */
.cvx-card__act--detail{
  background:var(--cvx-surface); color:var(--cvx-navy-800);
  border:1px solid var(--cvx-line);
}
.cvx-card__act--detail:hover{ border-color:var(--cvx-navy-600); }
.cvx-card__act--wa:hover{ background:var(--cvx-wa); color:var(--cvx-surface); }


/* ═════════════════════════════════════════════════════════════════════
   §3.3 — Product detail page
   ═══════════════════════════════════════════════════════════════════ */
.cvx-pd__gallery{ background:var(--cvx-surface); border:1px solid var(--cvx-line); border-radius:var(--cvx-radius); }
.cvx-pd__main{ aspect-ratio:4/3; background:var(--cvx-ground); display:flex; align-items:center; justify-content:center; }
.cvx-pd__main img{ width:100%; height:100%; object-fit:contain; }
.cvx-pd__thumbs{ display:flex; gap:var(--cvx-s2); padding:var(--cvx-s3); overflow-x:auto; border-top:1px solid var(--cvx-line); }
.cvx-pd__thumb{
  flex:none; width:64px; height:64px; padding:0; cursor:pointer;
  background:var(--cvx-ground); border:1px solid var(--cvx-line); border-radius:var(--cvx-radius);
}
.cvx-pd__thumb img{ width:100%; height:100%; object-fit:contain; }
.cvx-pd__thumb[aria-current="true"]{ border-color:var(--cvx-navy-600); }

.cvx-pd h1{ font-size:22px; font-weight:700; margin-top:var(--cvx-s3); }
@media (min-width:768px){ .cvx-pd h1{ font-size:28px; } }
.cvx-pd__sku{ margin-top:var(--cvx-s2); font-family:var(--cvx-font-num); font-size:13px; color:var(--cvx-ink-3); }

/* Price: largest element after H1, mono, 32px */
.cvx-pd__price{
  margin-top:var(--cvx-s5);
  font-family:var(--cvx-font-num); font-variant-numeric:tabular-nums;
  font-size:28px; font-weight:700; color:var(--cvx-ink); line-height:1.1;
}
@media (min-width:768px){ .cvx-pd__price{ font-size:32px; } }
.cvx-pd__price small{ font-size:14px; font-weight:400; color:var(--cvx-ink-3); }
.cvx-pd__ask{ margin-top:var(--cvx-s5); font-size:22px; font-weight:700; color:var(--cvx-action); }

/* Landed-cost transparency box — a genuine differentiator, given its own panel */
.cvx-landed{
  margin-top:var(--cvx-s4); padding:var(--cvx-s4);
  background:var(--cvx-navy-100); border:1px solid var(--cvx-line);
  border-radius:var(--cvx-radius);
}
.cvx-landed h3{ font-size:13px; font-weight:700; color:var(--cvx-navy-800); }
.cvx-landed dl{ display:grid; grid-template-columns:1fr auto; gap:var(--cvx-s2) var(--cvx-s4); margin-top:var(--cvx-s3); font-size:13px; }
.cvx-landed dt{ color:var(--cvx-ink-2); }
.cvx-landed dd{ margin:0; font-family:var(--cvx-font-num); font-variant-numeric:tabular-nums; text-align:end; }
.cvx-landed__note{ margin-top:var(--cvx-s3); font-size:11px; color:var(--cvx-ink-3); }

/* Product-detail image placeholder: sits under the main image the same way the
   card's does, so a missing or broken file reveals a panel, never a broken icon. */
.main-image-viewport{ position:relative; }
.cvx-pd__ph{ position:absolute; inset:0; z-index:0; }
.main-image-viewport > img{ position:relative; z-index:1; background:var(--cvx-ground); }

/* Trust strip — doing the work of an About page at the moment of decision */
.cvx-trust{
  display:grid; gap:var(--cvx-s3); margin-top:var(--cvx-s5);
  padding-block:var(--cvx-s4); border-block:1px solid var(--cvx-line);
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:768px){ .cvx-trust{ grid-template-columns:repeat(4,1fr); } }
.cvx-trust li{ display:flex; align-items:flex-start; gap:var(--cvx-s2); font-size:13px; color:var(--cvx-ink-2); }
.cvx-trust svg{ flex:none; margin-top:2px; color:var(--cvx-navy-600); }

/* Technical sheet — a bordered row with icon + size, not a bare link */
.cvx-doc{
  display:flex; align-items:center; gap:var(--cvx-s3);
  margin-top:var(--cvx-s3); padding:var(--cvx-s3) var(--cvx-s4);
  background:var(--cvx-surface); border:1px solid var(--cvx-line);
  border-radius:var(--cvx-radius); text-decoration:none;
  transition:border-color var(--cvx-transition);
}
.cvx-doc:hover{ border-color:var(--cvx-navy-600); }
.cvx-doc svg{ flex:none; color:var(--cvx-navy-600); }
.cvx-doc__name{ font-size:14px; font-weight:600; }
.cvx-doc__meta{ font-family:var(--cvx-font-num); font-size:12px; color:var(--cvx-ink-3); margin-inline-start:auto; }

@media (prefers-reduced-motion: reduce){ .cvx *{ transition:none !important; } }

/* The public quotation service is prepared and checked by a person. */
.cvx-devis-page .cvx-hero h1{ font-size:40px; line-height:1.15; }
.cvx-devis-page [data-cvx-human-quote]{ margin-top:16px; font-size:16px; }
.cvx-devis-page .cvx-note{ margin-top:12px; font-size:14px; }
.cvx-devis-page .cvx-eyebrow{ font-size:12px; }
.cvx-devis-page .cvx-cat__s{ display:block; }
@media(max-width:767px){ .cvx-devis-page .cvx-hero h1{ font-size:28px; } }


/* ── QA D3 : barre d'outils + vue liste ─────────────────────────────────── */
.cvx-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--cvx-s3);
  flex-wrap:wrap; margin-bottom:var(--cvx-s4);
}
.cvx-toolbar__pp{ display:flex; align-items:center; gap:var(--cvx-s2); font-size:13px; color:var(--cvx-ink-2); }
.cvx-toolbar__pp select{
  min-height:36px; padding:0 var(--cvx-s2);
  border:1px solid var(--cvx-ink-3); border-radius:var(--cvx-radius);
  background:var(--cvx-surface); font-family:var(--cvx-font-num); font-size:14px;
}
.cvx-toolbar__view{ display:flex; gap:0; border:1px solid var(--cvx-line); border-radius:var(--cvx-radius); overflow:hidden; }
.cvx-toolbar__view button{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:36px; background:var(--cvx-surface); border:0;
  color:var(--cvx-ink-3); cursor:pointer;
}
.cvx-toolbar__view button.is-on{ background:var(--cvx-navy-100); color:var(--cvx-navy-800); }
.cvx-toolbar__view button:focus-visible{ outline:2px solid var(--cvx-navy-600); outline-offset:-2px; }

/* Vue liste : rangées denses — visuel 56px, nom, SKU mono, prix mono, action */
.cvx-card__sku{ display:none; font-size:12px; color:var(--cvx-ink-3); }
.cvx-grid.cvx-list{ display:flex; flex-direction:column; gap:var(--cvx-s2); }
.cvx-list .cvx-card{ display:grid; grid-template-columns:56px minmax(0,1fr) auto; align-items:center; gap:var(--cvx-s3); padding:var(--cvx-s2) var(--cvx-s3); }
.cvx-list .cvx-card__media{ width:56px; height:56px; aspect-ratio:1/1; border:1px solid var(--cvx-line-soft); border-radius:var(--cvx-radius); }
.cvx-list .cvx-card__ph-mark{ font-size:8px; letter-spacing:.05em; }
.cvx-list .cvx-card__ph-cat{ display:none; }
.cvx-list .cvx-card__body{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--cvx-s2) var(--cvx-s3); padding:0; }
.cvx-list .cvx-card__cat{ display:none; }
.cvx-list .cvx-card__sku{ display:inline; }
.cvx-list .cvx-card__title{ -webkit-line-clamp:1; }
.cvx-list .cvx-card__price{ margin-inline-start:auto; }
.cvx-list .cvx-card__foot{ border-top:0; padding:0; margin:0; }
.cvx-list .cvx-card__act{ flex:none; min-height:36px; padding-inline:var(--cvx-s3); font-size:12px; }
@media (max-width:640px){ .cvx-list .cvx-card{ grid-template-columns:56px minmax(0,1fr); } .cvx-list .cvx-card__foot{ grid-column:2; } }
/* source: cvx-public.css */
/* Shared public web experience. Adapt Apple's hierarchy, legibility, grouping
   and responsive layout principles while retaining CONVXA's identity.
   Account workspaces and exported documents keep their dedicated layouts. */
body:not(.cvx-workspace):not(.cvx-auth){
  margin:0;background:var(--cvx-ground);color:var(--cvx-ink);
  font-family:var(--cvx-font-latin);line-height:1.6;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
}
body[dir="rtl"]:not(.cvx-workspace):not(.cvx-auth){font-family:var(--cvx-font-ar);}
body:not(.cvx-workspace):not(.cvx-auth) :is(input,select,textarea,button){font-family:inherit;}
body:not(.cvx-workspace):not(.cvx-auth) :focus-visible{outline:3px solid var(--cvx-navy-600);outline-offset:4px;}
.cvx-wrap{max-width:1248px;padding-inline:clamp(20px,3vw,40px);}
.cvx-utility{background:var(--cvx-ground);color:var(--cvx-ink-2);border-bottom:1px solid var(--cvx-line-soft);font-size:12px;}
.cvx-utility__in{min-height:32px;gap:16px;}
.cvx-utility__in>span{opacity:1;}
body .cvx-head{background:var(--cvx-surface);color:var(--cvx-ink);border-bottom:1px solid var(--cvx-line);box-shadow:0 2px 12px rgb(23 35 53 / 3%);}
.cvx-head :is(.cvx-search__in,.cvx-burger,.cvx-btn){border-radius:12px!important;}
.cvx-head .cvx-head__in{min-height:72px;gap:12px;}
.cvx-head .cvx-head__brand img{height:28px;}
.cvx-head .cvx-head__nav{gap:12px;font-size:14px;}
.cvx-head .cvx-head__nav a{opacity:1;color:var(--cvx-ink-2);}
.cvx-head .cvx-head__nav a:hover{color:var(--cvx-navy-800);}
.cvx-head .cvx-search__in{background:var(--cvx-ground);font-size:15px;border-color:var(--cvx-line);border-radius:12px;}
.cvx-head .cvx-head__right .cvx-btn--action{background:var(--cvx-navy-800);color:var(--cvx-surface);border-color:var(--cvx-navy-800);border-radius:12px;font-size:13px;}
.cvx-head .cvx-head__right .cvx-btn--action:hover{background:var(--cvx-navy-600);color:var(--cvx-surface);}
.cvx-head .cvx-head__right .cvx-link{font-size:14px;white-space:nowrap;flex:none;}
.cvx-head .cvx-burger{border-color:var(--cvx-line);border-radius:12px;background:var(--cvx-ground);}
.cvx-head .cvx-mnav{background:var(--cvx-surface);color:var(--cvx-ink);border-color:var(--cvx-line);padding-block:8px;}
.cvx-head .cvx-mnav a{border-color:var(--cvx-line-soft);padding-inline:24px;}
.cvx-head :is(a,button):focus-visible{outline-color:var(--cvx-navy-600);}
body:not(.cvx-workspace) .cvx-btn{font-weight:600;letter-spacing:-.01em;min-height:44px;}
body:not(.cvx-workspace) .cvx-card{border-radius:var(--cvx-radius-card);box-shadow:var(--cvx-shadow-card);overflow:hidden;}
body:not(.cvx-workspace) :is(.cvx-input,.cvx-select,.cvx-textarea){font-size:1rem;min-height:48px;padding:12px 14px;}
body:not(.cvx-workspace) .cvx-sec{padding-block:clamp(40px,6vw,80px);}
body:not(.cvx-workspace) .cvx-sec__head{margin-bottom:28px;}
body:not(.cvx-workspace) .cvx-sec__head h2{font-size:clamp(1.5rem,3vw,2.125rem);font-weight:650;letter-spacing:-.035em;line-height:1.2;}
body:not(.cvx-workspace) .cvx-band{background:var(--cvx-surface);color:var(--cvx-ink);padding-block:clamp(36px,6vw,72px);border-bottom:1px solid var(--cvx-line-soft);}
body:not(.cvx-workspace) .cvx-band h1{font-size:clamp(1.875rem,4vw,3rem);font-weight:650;letter-spacing:-.04em;line-height:1.15;max-width:26ch;}
body:not(.cvx-workspace) .cvx-band__eyebrow{opacity:1;color:var(--cvx-ink-2);font-size:13px;letter-spacing:.03em;}
body:not(.cvx-workspace) .cvx-band :is(p,a:not(.cvx-btn)){color:inherit;}
body:not(.cvx-workspace) .cvx-band .cvx-btn--ghost{color:var(--cvx-navy-800);background:var(--cvx-ground);border-color:var(--cvx-line);}
/* Legacy catalogue/search/detail styles use explicit !important values.
   Limit overrides to their named components instead of resetting all divs. */
body:not(.cvx-workspace) :is(.products-filters-panel,.products-item-card,.product-card,.product-detail-card,.product-info-card,.seo-card,.ar-card,.purchase-card,.tool-card,.guide-card,.error-container){border-radius:var(--cvx-radius-card)!important;box-shadow:var(--cvx-shadow-card)!important;}
body:not(.cvx-workspace) :is(.products-filter-toggle,.products-filter-input,.products-filter-btn,.products-search-input,.products-filter-select,.products-search-button,.products-reset-button){border-radius:12px!important;min-height:44px;}
body:not(.cvx-workspace) :is(.products-main-title,.seo-h1){font-size:clamp(1.875rem,4vw,3rem)!important;line-height:1.2!important;letter-spacing:-.035em;}
body:not(.cvx-workspace) :is(.seo-card,.ar-card){padding:clamp(20px,3vw,32px);}
body:not(.cvx-workspace) :is(.seo-card,.ar-card):hover{transform:none;}
body:not(.cvx-workspace) :is(.cvx-dmd-search,.dmd-list,.purchase-card){min-width:0;}
body:not(.cvx-workspace) .dmd-list{border-radius:20px;overflow:hidden;}
body:not(.cvx-workspace) .dmd-list .cvx-cat{padding-block:20px;}
body:not(.cvx-workspace) .purchase-main{padding-block:clamp(28px,5vw,56px);}
body:not(.cvx-workspace) .product-info-section .cvx-trust{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;font-size:14px;}
body:not(.cvx-workspace) .product-info-section :is(.action-btn-bricoma,.quantity-control-wrapper){border-radius:12px!important;min-height:48px;}
body:not(.cvx-workspace) :is(.ft-wrap,.fi-wrap){max-width:1000px;padding-block:clamp(32px,5vw,64px);}
body:not(.cvx-workspace) :is(.ft-wrap,.fi-wrap)>h1{font-size:clamp(1.875rem,4vw,2.75rem)!important;line-height:1.2!important;letter-spacing:-.035em;}
body:not(.cvx-workspace) :is(.ft-docs,.fi-list)>li{padding:24px;border-radius:20px;background:var(--cvx-surface);border-color:var(--cvx-line);}
body:not(.cvx-workspace) :is(.ft-dl,.ft-wa){min-height:44px;padding:12px 18px;border-radius:12px;box-sizing:border-box;}
body:not(.cvx-workspace) .ft-cta{background:var(--cvx-navy-800);border-radius:20px;padding:28px;}
body:not(.cvx-workspace) :is(.ft-bc,.fi-bc,.ft-meta,.ft-note,.fi-sub){color:var(--cvx-ink-2);}
body:not(.cvx-workspace) :is(.ft-extract,.ft-related a){border-radius:14px;}
body:not(.cvx-workspace) :is(.table-responsive,.seo-table-wrap,.cvx-table-wrap){max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;}
/* Arabic pages retain their language and direction, with the same calm hero. */
body[dir="rtl"] .premium-hero{background:var(--cvx-surface);color:var(--cvx-ink);padding-block:clamp(40px,7vw,80px);border-bottom:1px solid var(--cvx-line);}
body[dir="rtl"] .premium-hero::before{display:none;}
body[dir="rtl"] .premium-hero :is(.ar-h1,.ar-lead){color:var(--cvx-ink);}
body[dir="rtl"] .premium-hero .ar-lead{color:var(--cvx-ink-2);}
body[dir="rtl"] .premium-hero .ar-btn-ghost{color:var(--cvx-navy-800)!important;border-color:var(--cvx-line);background:var(--cvx-ground);}
body[dir="rtl"] .premium-hero .ar-eyebrow{background:var(--cvx-ground);border-color:var(--cvx-line);color:var(--cvx-ink-2);}
@media(max-width:767px){
 .cvx-wrap{padding-inline:20px;}
 .cvx-head .cvx-head__in{min-height:64px;gap:12px;}
 .cvx-utility__in{min-height:36px;}
 .cvx-utility__in>span:first-child{font-size:11px;max-width:70%;}
 body:not(.cvx-workspace) .cvx-card__body{padding:18px;}
 body:not(.cvx-workspace) .cvx-band h1{max-width:none;}
 body:not(.cvx-workspace) .dmd-list .cvx-cat{padding:18px;}
 body:not(.cvx-workspace) .product-info-section .cvx-trust{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
 body:not(.cvx-workspace):not(.cvx-auth) *,body:not(.cvx-workspace):not(.cvx-auth) *::before,body:not(.cvx-workspace):not(.cvx-auth) *::after{scroll-behavior:auto!important;animation:none!important;transition:none!important;}
}
@media print{.cvx-head,.cvx-utility,.cvx-bar,.cvx-skip{display:none!important;}}

/* Shared public footer: one quiet surface, balanced navigation and compact legal facts.
   Scoped selectors outrank legacy pages that repeat cvx-page.css after this sheet. */
body .cvx-foot{background:var(--cvx-ground);color:var(--cvx-ink);border-top:0;padding:32px 0 40px;font-size:14px;}
.cvx-foot .cvx-foot__surface{background:var(--cvx-surface);border:1px solid var(--cvx-line-soft);border-radius:28px;padding:36px 40px 20px;}
.cvx-foot .cvx-foot__intro{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:32px;}
.cvx-foot .cvx-foot__brand{display:flex;align-items:center;gap:28px;min-width:0;}
.cvx-foot .cvx-foot__brand img{width:163px;height:40px;object-fit:contain;object-position:left;display:block;flex:none;}
.cvx-foot .cvx-foot__brand p{font-size:14px;line-height:1.65;color:var(--cvx-ink-2);opacity:1;margin:0;max-width:42ch;}
.cvx-foot .cvx-foot__contact{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none;}
.cvx-foot .cvx-foot__contact a{display:inline-flex;align-items:center;min-height:36px;gap:14px;}
.cvx-foot .cvx-foot__contact .cvx-foot__contact-action{color:var(--cvx-navy-800);font-weight:600;font-size:15px;}
.cvx-foot .cvx-foot__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 32px;padding:0 0 28px;}
.cvx-foot .cvx-foot__group{min-width:0;}
.cvx-foot .cvx-foot__group h3{color:var(--cvx-ink);font:600 14px/1.4 var(--cvx-font-latin);letter-spacing:0;text-transform:none;margin:0 0 10px;}
.cvx-foot .cvx-foot__group ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;}
.cvx-foot .cvx-foot__group a{display:inline-flex;align-items:center;min-height:32px;padding:4px 0;box-sizing:border-box;line-height:1.5;overflow-wrap:anywhere;}
.cvx-foot a{color:var(--cvx-ink-2);opacity:1;text-decoration:none;}
.cvx-foot a:hover{color:var(--cvx-navy-800);text-decoration:underline;text-underline-offset:3px;}
.cvx-foot a:focus-visible{outline:2px solid var(--cvx-navy-600);outline-offset:4px;border-radius:4px;}
.cvx-foot .cvx-foot__payment{padding:0 0 14px;border:0;}
.cvx-foot .cvx-foot__payment p{font-size:12px;line-height:1.7;opacity:1;margin:0;color:var(--cvx-ink-2);max-width:none;}
.cvx-foot .cvx-foot__payment a{display:inline-flex;align-items:center;gap:4px;color:var(--cvx-navy-800);text-decoration:underline;text-underline-offset:3px;}
.cvx-foot .cvx-foot__identity{display:flex;flex-wrap:wrap;gap:4px 16px;border:0;padding:0 0 18px;color:var(--cvx-ink-2);opacity:1;font-size:12px;line-height:1.8;}
.cvx-foot .cvx-foot__identity>span:first-child{flex-basis:100%;font-weight:550;}
.cvx-foot .cvx-foot__legal{border-top:1px solid var(--cvx-line-soft);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 20px;padding-top:14px;color:var(--cvx-ink-2);opacity:1;font-size:12px;line-height:1.8;}
.cvx-foot .cvx-foot__legal nav{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center;}
.cvx-foot .cvx-foot__legal nav a{display:inline-flex;align-items:center;min-height:32px;}
@media(max-width:1100px){.cvx-foot .cvx-foot__surface{padding:32px 28px 20px;}.cvx-foot .cvx-foot__brand{align-items:flex-start;flex-direction:column;gap:16px;}.cvx-foot .cvx-foot__intro{align-items:flex-start;}}
@media(max-width:767px){body .cvx-foot{padding:20px 0 28px;}.cvx-foot>.cvx-wrap{padding-inline:12px;}.cvx-foot .cvx-foot__surface{padding:28px 20px 16px;border-radius:22px;}.cvx-foot .cvx-foot__intro{display:block;margin-bottom:28px;}.cvx-foot .cvx-foot__brand{display:block;}.cvx-foot .cvx-foot__brand p{margin-top:16px;}.cvx-foot .cvx-foot__contact{align-items:flex-start;margin-top:16px;gap:0;}.cvx-foot .cvx-foot__contact a{min-height:44px;}.cvx-foot .cvx-foot__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;padding-bottom:24px;}.cvx-foot .cvx-foot__group h3{margin-bottom:8px;}.cvx-foot .cvx-foot__group a{min-height:44px;}.cvx-foot .cvx-foot__legal{display:block;}.cvx-foot .cvx-foot__legal nav{margin-top:10px;gap:0 16px;}.cvx-foot .cvx-foot__legal nav a,.cvx-foot .cvx-foot__identity a{min-height:44px;}.cvx-foot .cvx-foot__identity{font-size:12px;gap:4px 16px;}}
@media(pointer:coarse){.cvx-foot .cvx-foot__group a,.cvx-foot .cvx-foot__contact a,.cvx-foot .cvx-foot__legal nav a{min-height:44px;}}
@media print{.cvx-foot{display:none!important;}}

/* Shared interior-page styling: the same blue, soft surfaces and roundness as
   the homepage, limited to named public components. Workspace and sign-in
   shells keep their own layouts; status and WhatsApp colours remain intact. */
@media screen {
 body:not(.cvx-home):not(.cvx-workspace):not(.cvx-auth) .cvx-band{
  background:#f1f5fb;
  border-bottom-color:#dce6f2;
 }
 body:not(.cvx-home):not(.cvx-workspace):not(.cvx-auth) .cvx-band h1{
  color:#03244f;
  letter-spacing:-.035em;
 }
 body:not(.cvx-home):not(.cvx-workspace):not(.cvx-auth) .cvx-band__eyebrow{
  color:#4a607b;
 }
 body:not(.cvx-home):not(.cvx-workspace):not(.cvx-auth) main :is(.cvx-card,.products-filters-panel,.products-item-card,.product-card,.product-detail-card,.product-info-card,.seo-card,.ar-card,.purchase-card,.tool-card,.guide-card){
  border-radius:24px!important;
  box-shadow:0 7px 24px rgb(10 58 117 / 5%)!important;
 }
 body:not(.cvx-home):not(.cvx-workspace):not(.cvx-auth) main :is(.products-main-title,.seo-h1,.ft-wrap>h1,.fi-wrap>h1){
  color:#03244f;
 }
 body:not(.cvx-home):not(.cvx-workspace):not(.cvx-auth) main :is(.ft-docs,.fi-list)>li{
  border-radius:24px;
  border-color:#dce6f2;
 }
 /* Calculator directory and calculators share these named components. */
 body:not(.cvx-home):not(.cvx-workspace):not(.cvx-auth) main.tc-main .tc-h1{
  color:#03244f;
  font-size:clamp(32px,4vw,48px);
  letter-spacing:-.035em;
  line-height:1.15;
 }
 body:not(.cvx-home):not(.cvx-workspace):not(.cvx-auth) main.tc-main .tc-lead{
  color:#515e70;
  line-height:1.65;
 }
 body:not(.cvx-home):not(.cvx-workspace):not(.cvx-auth) main.tc-main .tc-tool{
  border-color:#dce6f2;
  border-radius:24px;
  padding:24px;
  box-shadow:0 7px 24px rgb(10 58 117 / 5%);
 }
 body:not(.cvx-home):not(.cvx-workspace):not(.cvx-auth) main.tc-main .tc-ai{
  background:#03244f;
  border-radius:24px;
  padding:clamp(24px,3vw,32px);
 }
 body:not(.cvx-home):not(.cvx-workspace):not(.cvx-auth) main.tc-main .tc-sec h2{
  color:#03244f;
  font-size:clamp(22px,2.1vw,28px);
  letter-spacing:-.025em;
  line-height:1.2;
 }
 /* Catalogue title and the search region, without changing its controls. */
 body.cvx-public--catalogue:not(.cvx-home):not(.cvx-workspace):not(.cvx-auth) .cvx-catintro__h1{
  color:#03244f;
  letter-spacing:-.035em;
 }
 body.cvx-public--catalogue:not(.cvx-home):not(.cvx-workspace):not(.cvx-auth) .products-search{
  background:#f1f5fb;
  border:1px solid #dce6f2;
  border-radius:20px;
  padding:20px;
 }
 @media(max-width:767px){
  body:not(.cvx-home):not(.cvx-workspace):not(.cvx-auth) main :is(.cvx-card,.products-filters-panel,.products-item-card,.product-card,.product-detail-card,.product-info-card,.seo-card,.ar-card,.purchase-card,.tool-card,.guide-card){border-radius:20px!important;}
  body:not(.cvx-home):not(.cvx-workspace):not(.cvx-auth) main.tc-main .tc-tool{border-radius:20px;padding:20px;}
  body.cvx-public--catalogue:not(.cvx-home):not(.cvx-workspace):not(.cvx-auth) .products-search{padding:16px;}
 }
}
/* source: cvx-public-completion.css */
/* Public interiors. Explicit page scopes keep authenticated workflows and
   demand/offer previews independent. Some legacy templates load inline rules
   after the common head; the scoped selectors below deliberately win there. */
body.cvx-public-complete {
  --public-ink: #1d1d1f;
  --public-muted: #5b6069;
  --public-line: #e3e5e9;
  --public-paper: #fff;
  --public-ground: #f5f5f7;
  background: var(--public-ground);
  color: var(--public-ink);
  font-family: var(--cvx-font-latin, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}
body.cvx-public-complete main { min-inline-size: 0; }
/* Offscreen positioning can enlarge an RTL page when the shared header is
   LTR. Clip hidden content at the origin instead, and reveal the skip link
   only when focused. The honeypot remains present for the existing handler. */
body.cvx-public-complete a.cvx-skip,
body.cvx-public-complete :is(.cvx-sr,.cvx-quote__hp) {
  position: absolute;
  inset-inline: 0 auto;
  left: 0;
  right: auto;
  top: 0;
  inline-size: 1px;
  block-size: 1px;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
body.cvx-public-complete a.cvx-skip:focus {
  inset-inline: 16px auto;
  left: 16px;
  right: auto;
  top: 8px;
  inline-size: auto;
  block-size: auto;
  width: auto;
  height: auto;
  max-inline-size: calc(100% - 32px);
  padding: 12px 16px;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}
body.cvx-public-complete main :where(p, li, dd) { line-height: 1.7; }
body.cvx-public-complete main :where(a, button, input, select, textarea, summary):focus-visible,
body.cvx-public-complete [role="region"][tabindex]:focus-visible {
  outline: 3px solid #2764ad;
  outline-offset: 4px;
}
body.cvx-public-complete main :where(h1,h2,h3) { text-wrap: balance; }
body.cvx-public-complete :where(.public-hero,.premium-hero,.sa-hero) {
  background: var(--public-paper) !important;
  color: var(--public-ink);
  padding: clamp(40px, 6vw, 80px) 24px;
  border-block-end: 1px solid var(--public-line);
}
body.cvx-public-complete :is(.public-hero,.premium-hero)::before,
body.cvx-public-complete :is(.public-hero,.premium-hero)::after { content: none; }
body.cvx-public-complete .public-hero__inner {
  max-inline-size: 1120px;
  margin-inline: auto;
  text-align: start;
}
body.cvx-public-complete :is(.public-hero,.premium-hero) h1,
body.cvx-public-complete .sa-hero h1 {
  max-inline-size: 950px;
  margin: 14px 0 20px;
  font-size: clamp(32px, 4.3vw, 56px);
  line-height: 1.12;
  font-weight: 650;
  letter-spacing: -.04em;
  color: var(--public-ink);
}
body.cvx-public-complete :is(.public-hero,.premium-hero) h1 strong { color: var(--public-ink); }
body.cvx-public-complete :is(.public-hero,.premium-hero) p,
body.cvx-public-complete .sa-hero p {
  max-inline-size: 760px;
  margin: 0;
  color: var(--public-muted);
  font-size: 18px;
  line-height: 1.65;
}
body.cvx-public-complete .public-hero__inner > span,
body.cvx-public-complete .ar-eyebrow {
  color: #59616d;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
}
body.cvx-public-complete :is(.public-hero,.premium-hero) a,
body.cvx-public-complete .sidebar-widget a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 46px;
  padding: 11px 20px;
  margin-block-start: 22px;
  gap: 8px;
  background: var(--cvx-navy-800, #082952);
  border: 1px solid var(--cvx-navy-800, #082952);
  border-radius: 999px;
  color: #fff !important;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
body.cvx-public-complete :is(.public-hero,.premium-hero) a + a {
  background: #fff;
  color: var(--cvx-navy-800, #082952) !important;
  border-color: #c9cdd4;
}
body.cvx-public-complete .seo-landing-section {
  max-inline-size: 1200px;
  padding: 40px 24px 64px;
}
body.cvx-public-complete .seo-grid { gap: 28px; align-items: start; }
body.cvx-public-complete .seo-grid > div { display: grid; gap: 24px; min-inline-size: 0; align-content: start; }
body.cvx-public-complete .seo-card {
  min-inline-size: 0;
  padding: clamp(22px, 3vw, 32px);
  background: #fff;
  border: 1px solid var(--public-line);
  border-radius: 24px;
  box-shadow: none;
  transform: none;
}
body.cvx-public-complete .seo-card:hover { box-shadow: none; transform: none; border-color: var(--public-line); }
body.cvx-public-complete .seo-card h2 { margin: 0 0 10px; color: var(--public-ink); font-size: 25px; line-height: 1.25; letter-spacing: -.025em; }
body.cvx-public-complete .seo-card h3 { margin: 0 0 12px; color: var(--public-ink); font-size: 19px; line-height: 1.35; }
body.cvx-public-complete .seo-card p { margin-block: 8px; color: var(--public-muted); font-size: 15px; }
body.cvx-public-complete .seo-card a:not(.btn-brand-primary):not(.cvx-btn) { color: #144579; text-underline-offset: 3px; }
body.cvx-public-complete .sidebar-widget { background: #edf1f6; color: var(--public-ink); }
body.cvx-public-complete .sidebar-widget :where(h3,p,.ar-text,.ar-h3) { color: var(--public-ink); }
body.cvx-public-complete .sidebar-widget a { inline-size: 100%; margin-block-start: 12px; }
body.cvx-public-complete .seo-grid > div:last-child .seo-card:not(.sidebar-widget) a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-block-size: 44px;
  padding-block: 9px;
  gap: 10px;
  text-decoration: none;
  border-block-end: 1px solid var(--public-line);
  line-height: 1.45;
}
body.cvx-public-complete .seo-grid > div:last-child .seo-card a:last-child { border-block-end: 0; }
body.cvx-public-complete :where(.seo-table-container,.public-table-scroll,.tc-table-wrap,.ip-table-wrap,.ia-scroll) {
  max-inline-size: 100%;
  min-inline-size: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: #8995a5 #edf0f4;
  -webkit-overflow-scrolling: touch;
}
body.cvx-public-complete .seo-table-container { border-radius: 16px; margin-block-start: 22px; }
body.cvx-public-complete .seo-table { min-inline-size: 560px; }
body.cvx-public-complete .seo-table :where(th,td) { padding: 18px 16px; line-height: 1.5; text-align: start; }
body.cvx-public-complete .seo-table th { background: #f5f6f8; border-block-end: 1px solid var(--public-line); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
body.cvx-public-complete .seo-table td { font-size: 14px; }
body.cvx-public-complete .market-stale-notice { border-radius: 12px; }
body.cvx-public--payment .seo-landing-section { max-inline-size: 1120px; display: grid; gap: 48px; }
body.cvx-public--payment .grid-3 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin-block-start: 28px; }
body.cvx-public--payment .step-card { background: #fff; padding: 28px; border-radius: 24px; border: 1px solid var(--public-line); box-shadow: none; }
body.cvx-public--payment .step-num { background: #edf1f6; color: #173a63; border-radius: 50%; box-shadow: none; }
body.cvx-public--payment .seo-card > .flex a { min-block-size: 44px; display: inline-flex; align-items: center; padding: 10px 18px; gap: 6px; border: 1px solid var(--public-line); border-radius: 999px; text-decoration: none; margin: 8px 6px 0 0; }
/* Arabic pages use the same mobile header and retain a translated local nav. */
body.cvx-public--arabic { font-family: var(--cvx-font-ar, system-ui, sans-serif); }
body.cvx-public--arabic .cvx-head { font-family: var(--cvx-font-latin, system-ui, sans-serif); text-align: start; }
body.cvx-public--arabic .public-language-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-block: 10px; }
body.cvx-public--arabic .public-language-link { display: inline-flex; min-block-size: 44px; align-items: center; color: #334760; font-size: 14px; text-decoration: none; }
body.cvx-public--arabic :is(.public-hero,.premium-hero) h1 { letter-spacing: 0; line-height: 1.4; }
body.cvx-public--arabic .premium-hero > .ar-wrap { max-inline-size: 1120px; padding-inline: 0; text-align: start; }
body.cvx-public--arabic .premium-hero :is(.ar-h1,.ar-lead) { margin-inline: 0; }
body.cvx-public--arabic .ar-hero-cta { justify-content: flex-start; margin-block-start: 0; }
body.cvx-public--arabic .ar-hero-cta a { margin-block-start: 22px; }
body.cvx-public--arabic .ar-grid-cards { gap: 20px; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); }
body.cvx-public--arabic .ar-card { padding: 28px; border: 1px solid var(--public-line); border-radius: 24px; box-shadow: none; transform: none; }
body.cvx-public--arabic .public-ar-main { max-inline-size: 1200px; margin-inline: auto; padding: 48px 24px; }
body.cvx-public--arabic .ar-grid { padding: 0; margin: 28px 0 0; gap: 20px; grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); }
body.cvx-public--arabic .ar-card :where(h3,p) { margin-block-end: 12px; line-height: 1.75; }
body.cvx-public--arabic .ar-fab { min-block-size: 48px; background: #083464; }
/* Catalogue: prominent search, lightweight filters and proportionate images. */
body.cvx-public--catalogue .products-main-content { padding-block: 48px !important; }
body.cvx-public--catalogue .products-page-container { max-inline-size: 1240px !important; }
body.cvx-public--catalogue .products-page-container > .cvx-catintro:first-child { border: 0; padding: 0; background: none; box-shadow: none; margin-block-end: 28px; }
body.cvx-public--catalogue .cvx-catintro__h1 { font-size: clamp(32px,4vw,48px); letter-spacing: -.04em; font-weight: 650; }
body.cvx-public--catalogue .products-search { max-inline-size: 760px; margin-block-end: 24px; }
body.cvx-public--catalogue .products-search label { font-size: 15px; font-weight: 500; }
body.cvx-public--catalogue .products-search__controls input { border-radius: 14px !important; min-block-size: 50px !important; }
body.cvx-public--catalogue .products-filters-panel { padding: 14px 20px !important; border-radius: 20px !important; margin-block-end: 28px !important; }
body.cvx-public--catalogue .products-filter-toggle { background: #edf1f6 !important; color: #173a63 !important; padding-inline: 16px !important; border-radius: 999px !important; }
body.cvx-public--catalogue .products-filter-input,
body.cvx-public--catalogue .products-filter-select { border-color: #bac0c9 !important; border-radius: 12px !important; }
body.cvx-public--catalogue .products-filter-btn { border-radius: 999px !important; padding: 11px 18px !important; }
body.cvx-public--catalogue .products-display-grid { gap: 24px !important; }
body.cvx-public--catalogue .products-item-card { border-radius: 24px !important; box-shadow: none !important; border: 1px solid var(--public-line) !important; transform: none !important; overflow: hidden; }
body.cvx-public--catalogue .products-item-image-container { aspect-ratio: 4/3; height: auto !important; background: #fff !important; }
body.cvx-public--catalogue .products-item-image { inline-size: 100% !important; block-size: 100% !important; object-fit: contain !important; padding: 20px; transform: none !important; }
body.cvx-public--catalogue .products-item-content { padding: 22px !important; }
body.cvx-public--catalogue .products-item-title { font-size: 18px !important; line-height: 1.4 !important; letter-spacing: -.015em; }
/* Document and utility families: generous reading measure and quiet cards. */
body.cvx-public-complete :where(.gd-wrap,.gi-wrap,.ip-wrap,.tc-main,.ia-wrap) { padding-block: 48px 72px; }
body.cvx-public-complete :where(.gd-wrap,.gi-wrap) { max-inline-size: 1040px; }
body.cvx-public-complete :where(.gd-wrap,.gi-wrap,.ip-wrap,.tc-main,.ia-wrap) h1 { font-size: clamp(32px,4vw,48px) !important; line-height: 1.15 !important; letter-spacing: -.04em; color: var(--public-ink); font-weight: 650; }
body.cvx-public-complete :where(.gd-lead,.gi-lead,.ip-lead,.tc-lead,.ia-lead) { font-size: 19px; line-height: 1.7; color: var(--public-muted); max-inline-size: 75ch; }
body.cvx-public-complete :where(.gd-meta,.gd-bc,.gi-bc,.tc-bc,.ip-bc,.ia-bc) { flex-wrap: wrap; row-gap: 6px; }
body.cvx-public--guides .gi-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
body.cvx-public--guides .gi-list a { background: #fff; padding: 28px; border-radius: 24px; border-color: var(--public-line); min-block-size: 160px; }
body.cvx-public--guides .gi-list strong { font-size: 21px; line-height: 1.35; margin-block-end: 12px; }
body.cvx-public--guides .gd-wrap { max-inline-size: 850px; }
body.cvx-public--guides .gd-wrap h2 { font-size: 27px; margin-block-start: 40px; }
body.cvx-public--guides .gd-cta { background: #edf1f6; color: #1d2d44; padding: 28px; border-radius: 24px; }
body.cvx-public--guides .gd-cta :where(h3,a) { color: #143d6c; }
body.cvx-public--guides .gd-faq details { padding: 18px 22px; border-radius: 16px; }
body.cvx-public--guides .gd-table { min-inline-size: 460px; }
body.cvx-public-complete :is(.gd-wrap,.gi-wrap,.ip-wrap,.tc-main,.ia-wrap,.br-more) a:not([class]) {
  color: #144579;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.cvx-public-complete :where(.tc-card,.tc-tool,.tc-offer,.ia-card,.ip-kpi,.ip-cite,.br-tile) { border-radius: 22px; padding: 24px; border-color: var(--public-line); box-shadow: none; }
body.cvx-public-complete .ia-card { padding: 26px; }
body.cvx-public-complete :where(.ia-grid,.br-list) { gap: 20px; }
body.cvx-public-complete .ia-toolnav { padding: 6px; border: 1px solid var(--public-line); border-radius: 20px; background: #eceef2; gap: 6px; margin-block-end: 32px; }
body.cvx-public-complete .ia-toolnav a { min-block-size: 44px; display: inline-flex; align-items: center; justify-content: center; flex: 1 1 auto; background: transparent; border: 0; border-radius: 14px; }
body.cvx-public-complete .ia-toolnav a[aria-current="page"] { background: #fff; color: #15385d; box-shadow: 0 2px 8px #142b4510; }
body.cvx-public-complete :where(.tc-ai,.ia-band) { border-radius: 24px; padding: 32px; }
body.cvx-public-complete .tc-field :where(input,select) { border-radius: 12px; min-block-size: 48px; border-color: #acb3bd; }
body.cvx-public-complete .tc-results { background: #f3f6f9; border: 0; border-radius: 16px; padding: 22px; }
body.cvx-public-complete .tc-total { border-radius: 12px; background: #e3ebf4; }
body.cvx-public-complete .ia-sample { border: 1px solid var(--public-line); border-radius: 20px; padding: 24px; }
body.cvx-public-complete .ia-related a { border-radius: 16px; min-block-size: 48px; }
body.cvx-public--areas .sa-hero { margin-block-start: 24px; border-radius: 28px; padding: 48px; }
body.cvx-public--areas .sa-facts { gap: 12px; }
body.cvx-public--areas .sa-fact { background: #f0f2f5; padding: 18px; border-radius: 16px; }
body.cvx-public--areas .sa-fact dd { color: #15385d; font-size: 18px; line-height: 1.4; }
body.cvx-public--areas .sa-card { padding: 26px; border-radius: 22px; }
body.cvx-public--areas .sa-section--muted { background: transparent; }
body.cvx-public--areas .sa-h2 { font-size: 27px; letter-spacing: -.025em; }
body.cvx-public--areas .sa-langs a { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 16px; background: #fff; }
body.cvx-public--brands .cvx-band { background: #fff; padding-block: 56px; }
body.cvx-public--brands .cvx-band h1 { font-size: clamp(32px,4vw,48px); letter-spacing: -.04em; }
body.cvx-public--brands .br-tile strong { font-size: 22px; }
body.cvx-public--brands .br-more li { background: #fff; padding: 20px; border-radius: 16px; }
body.cvx-public--brands :is(.br-more,.br-fiches,.br-more li,.br-fiches li,.br-more span,.br-fiches span) { min-inline-size: 0; }
body.cvx-public--brands :is(.br-more span,.br-fiches span) { white-space: normal; overflow-wrap: anywhere; }
body.cvx-public--brands :is(.br-more li,.br-fiches li) { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; }
body.cvx-public--brands .br-more li:has(> span:first-child) { grid-template-columns: minmax(120px,1fr) minmax(0,3fr); }
body.cvx-public--legal main > .cvx-wrap { max-inline-size: 920px; padding-block: 56px 72px; }
body.cvx-public--legal main h1 { font-size: clamp(34px,4vw,48px); letter-spacing: -.04em; margin-block-end: 28px; }
body.cvx-public--legal main h2 { font-size: 25px; margin-block: 36px 14px; }
body.cvx-public--legal main :where(p,ul,ol,dl) { margin-block: 14px; max-inline-size: 78ch; }
body.cvx-public--legal main li { margin-block: 8px; }
body.cvx-public--legal main a { color: #144579; text-underline-offset: 3px; }
body.cvx-public--search .search-results-container { margin-block-start: 0; padding-block: 48px 64px; }
body.cvx-public--search .search-header { text-align: start; margin-block-end: 28px; }
body.cvx-public--search .search-header h1 { font-size: clamp(32px,4vw,48px); letter-spacing: -.04em; }
body.cvx-public--search .search-filters { border: 1px solid var(--public-line); border-radius: 22px; box-shadow: none; padding: 24px; }
body.cvx-public--search .filter-form { grid-template-columns: minmax(0,2fr) minmax(0,1fr) auto; }
body.cvx-public--search :where(.filter-input,.filter-select,.filter-btn,.pagination-btn) { min-block-size: 46px; border-radius: 12px; }
body.cvx-public--product .product-detail-card { border-radius: 28px !important; box-shadow: none !important; border-color: var(--public-line); }
body.cvx-public--product .product-name-heading { font-size: clamp(28px,3vw,42px); letter-spacing: -.03em; line-height: 1.2; text-transform: none; }
body.cvx-public--product .product-price-section { background: #f5f6f8; border-radius: 18px; padding: 20px; }
body.cvx-public--product :where(.product-action-block,.quick-buy-form-container,.product-tabs-section) { border-radius: 22px !important; box-shadow: none !important; }
body.cvx-public--product :where(.action-btn-bricoma,.submit-buy-btn,.variant-chip,.qty-btn) { border-radius: 12px !important; min-block-size: 44px; }
body.cvx-public--product .pd-docs a { overflow-wrap: anywhere; }
body.cvx-public--import #cvx-main { max-inline-size: 960px; padding: 56px 24px 72px !important; }
body.cvx-public--import #cvx-main h1 { font-size: clamp(32px,4vw,48px); line-height: 1.2; letter-spacing: -.035em; margin-block: 14px 32px; }
body.cvx-public--import dl { display: grid; grid-template-columns: minmax(150px,1fr) minmax(0,2fr); border: 1px solid var(--public-line); border-radius: 22px; background: #fff; padding: 14px 26px; margin-block: 24px; }
body.cvx-public--import :where(dt,dd) { padding-block: 16px; margin: 0; border-block-end: 1px solid var(--public-line); }
body.cvx-public--import dt { font-weight: 600; color: #4d5866; }
body.cvx-public--import :where(dt,dd):nth-last-child(-n+2) { border: 0; }
body.cvx-public--bpu .bz-sec { background: #fff; border: 1px solid var(--public-line); padding: 28px; border-radius: 24px; }
body.cvx-public--bpu .bz-dl { grid-template-columns: minmax(90px,max-content) minmax(0,1fr); gap: 12px 24px; }
body.cvx-public--bpu .bz-form input:not([type="checkbox"]):not([type="hidden"]) { min-block-size: 46px; border: 1px solid #acb3bd; border-radius: 12px; padding: 10px 14px; }
body.cvx-public--bpu .bz-form input[type="checkbox"] { min-inline-size: 20px; min-block-size: 20px; }
body.cvx-public-complete:is(.cvx-public--bpu,.cvx-public--devis) .cvx-hero__in { padding-block: 56px; gap: 48px; align-items: start; }
body.cvx-public-complete:is(.cvx-public--bpu,.cvx-public--devis) .cvx-hero__in > *,
body.cvx-public-complete:is(.cvx-public--bpu,.cvx-public--devis) :is(.cvx-quote,.cvx-quote__form,.cvx-quote__field) { min-inline-size: 0; }
body.cvx-public-complete:is(.cvx-public--bpu,.cvx-public--devis) .cvx-quote input[type="file"] {
  min-inline-size: 0;
  max-inline-size: 100%;
  inline-size: 100%;
  box-sizing: border-box;
}
body.cvx-public-complete:is(.cvx-public--bpu,.cvx-public--devis) .cvx-hero h1 { font-size: clamp(34px,4vw,52px); line-height: 1.15; letter-spacing: -.04em; font-weight: 650; margin-block: 16px 24px; }
body.cvx-public-complete:is(.cvx-public--bpu,.cvx-public--devis) .cvx-lead { font-size: 18px; line-height: 1.7; }
body.cvx-public-complete:is(.cvx-public--bpu,.cvx-public--devis) .cvx-quote { border-radius: 24px; box-shadow: 0 8px 32px #182b4310; border: 1px solid var(--public-line); }
body.cvx-public-complete:is(.cvx-public--bpu,.cvx-public--devis) .cvx-quote__form { padding: 28px; }
body.cvx-public--devis .cvx-cat { padding: 26px; border-radius: 22px; }
body.cvx-public--devis .cvx-cat__s { display: block; font-size: 15px; line-height: 1.6; margin-block-start: 10px; }
body.cvx-public--devis .cvx-cat__n { font-size: 20px; margin-block-start: 10px; }
body.cvx-public--purchasing .purchase-main > .cvx-sec.public-service-copy { max-inline-size: 900px; padding-block: 48px 72px; }
body.cvx-public--purchasing .public-service-copy h1 { font-size: clamp(34px,4vw,52px); line-height: 1.15; letter-spacing: -.04em; margin-block: 12px 24px; }
body.cvx-public--purchasing .public-service-copy h2 { font-size: 26px; margin-block: 40px 12px; }
body.cvx-public--purchasing .public-service-copy > p { max-inline-size: 75ch; margin-block: 16px; font-size: 17px; }
body.cvx-public--about .about-heading-main { font-size: clamp(34px,4vw,56px); font-weight: 650; color: var(--public-ink); }
body.cvx-public--about .about-v2-hero::after { content: none; }
body.cvx-public--purchasing .onboarding { max-inline-size: 800px; margin-block: 24px 48px; }
body.cvx-public--purchasing .onboarding h1 { font-size: clamp(30px,4vw,44px); line-height: 1.2; letter-spacing: -.035em; margin-block: 12px 22px; }
body.cvx-public--purchasing .onboarding form { padding: 32px; border-radius: 24px; border-color: var(--public-line); gap: 22px; }
body.cvx-public--purchasing .onboarding form :where(input,select,textarea):not([type="checkbox"]):not([type="hidden"]) { min-block-size: 48px; padding: 12px 14px; border-color: #acb3bd; border-radius: 12px; }
body.cvx-public--purchasing .onboarding .consent { min-block-size: 44px; align-items: start; }
body.cvx-public--purchasing .onboarding .error { border-radius: 16px; padding: 18px 22px; }
body.cvx-public--error .error-section { min-block-size: calc(100svh - 120px); min-height: 0; padding: 56px 20px; }
body.cvx-public--error .error-container { max-inline-size: 720px; padding: clamp(28px,5vw,48px); margin-inline: 0; border: 1px solid var(--public-line); border-radius: 28px !important; box-shadow: none !important; }
body.cvx-public--error .error-code { font-size: 64px; font-weight: 600; color: #21466d; text-shadow: none; transform: none !important; opacity: 1 !important; margin-block-end: 20px; }
body.cvx-public--error .error-title { font-size: clamp(28px,4vw,40px); line-height: 1.2; letter-spacing: -.035em; margin-block-end: 20px; }
body.cvx-public--error :where(.error-brand-icon,.error-illustration) { display: none; }
body.cvx-public--error .error-brand { margin-block-end: 28px; }
body.cvx-public--error .error-btn { min-block-size: 46px; padding: 12px 22px; border-radius: 999px; font-size: 15px; }
body.cvx-public--error .error-contact { margin-block-start: 28px; padding-block-start: 24px; border-block-start: 1px solid var(--public-line); }
body.cvx-public--error .error-contact__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-block: 16px; }
body.cvx-public--error .contact-support { background: #f1f4f7; border-radius: 18px; padding: 22px; }
body.cvx-public--error .error-info { border-radius: 16px; }
/* Keep call, WhatsApp and the quote modal intact in one quiet contact panel. */
body:is(.cvx-public-complete,:has(.ft-wrap),:has(.fi-wrap)) .cvx-bar {
  background: #fff;
  color: #28384a;
  border: 1px solid #dce0e6;
  border-radius: 22px;
  box-shadow: 0 6px 28px #142c451a;
  overflow: hidden;
}
body:is(.cvx-public-complete,:has(.ft-wrap),:has(.fi-wrap)) .cvx-bar .cvx-bar__strip {
  display: block;
  height: auto;
  margin: 0;
  background: transparent;
  color: #5a6472;
  padding: 14px 18px 0;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-align: start;
  opacity: 1;
}
body:is(.cvx-public-complete,:has(.ft-wrap),:has(.fi-wrap)) .cvx-bar .cvx-bar__btn {
  min-block-size: 46px;
  border-radius: 14px;
  padding: 10px 16px;
  border: 1px solid transparent;
  color: #fff;
  line-height: 1.3;
  font-size: 14px;
}
body:is(.cvx-public-complete,:has(.ft-wrap),:has(.fi-wrap)) .cvx-bar .cvx-bar__btn--call {
  background: #fff;
  color: #193c67;
  border-color: #c4ccd7;
}
body:is(.cvx-public-complete,:has(.ft-wrap),:has(.fi-wrap)) .cvx-bar .cvx-bar__btn--call:hover { background: #f0f3f7; }
body:is(.cvx-public-complete,:has(.ft-wrap),:has(.fi-wrap)) .cvx-bar .cvx-bar__btn--wa { background: #128346; }
body:is(.cvx-public-complete,:has(.ft-wrap),:has(.fi-wrap)) .cvx-bar--floating {
  inset-inline-start: auto;
  inset-inline-end: 20px;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  inline-size: min(560px, calc(100% - 40px));
}
body:is(.cvx-public-complete,:has(.ft-wrap),:has(.fi-wrap)) .cvx-bar--floating .cvx-bar__body { padding: 10px 14px 14px; }
body:is(.cvx-public-complete,:has(.ft-wrap),:has(.fi-wrap)) .cvx-bar--floating .cvx-bar__actions { inline-size: 100%; margin: 0; gap: 10px; }
body:is(.cvx-public-complete,:has(.ft-wrap),:has(.fi-wrap)):has(.cvx-bar--floating) { padding-block-end: calc(132px + env(safe-area-inset-bottom, 0px)); }
body.cvx-public--product .cvx-bar--column { max-inline-size: none; inline-size: 100%; }
body.cvx-public--product .cvx-bar--column .cvx-bar__body { padding: 20px; gap: 14px; }
body.cvx-public--product .cvx-bar--column .cvx-bar__strip { padding: 20px 20px 0; font-size: 12px; }
body.cvx-public--product .cvx-bar--column .cvx-bar__tel-lg { color: #183c65; font-size: 26px; }
body.cvx-public--product .cvx-bar--column .cvx-bar__quiet { color: #214e80; text-decoration-color: #879db7; min-block-size: 44px; display: inline-flex; align-items: center; }
body.cvx-public--product .cvx-bar--column .cvx-bar__note { color: #5a6472; opacity: 1; }
@media (max-width: 767px) {
  body.cvx-public--brands :is(.br-more li,.br-fiches li), body.cvx-public--brands .br-more li:has(> span:first-child) { grid-template-columns: minmax(0,1fr); gap: 8px; }
  body.cvx-public-complete:is(.cvx-public--bpu,.cvx-public--devis) .cvx-hero__in { grid-template-columns: minmax(0,1fr); }
  body.cvx-public-complete :is(.public-hero,.premium-hero) { padding: 36px 20px; }
  body.cvx-public-complete :is(.public-hero,.premium-hero) p { font-size: 17px; }
  body.cvx-public-complete .seo-landing-section { padding: 24px 16px 48px; }
  body.cvx-public-complete .seo-card { padding: 22px 18px; border-radius: 20px; }
  body.cvx-public--payment .grid-3 { grid-template-columns: 1fr; }
  body.cvx-public--guides .gi-list { grid-template-columns: 1fr; }
  body.cvx-public--guides .gi-list a { min-block-size: auto; padding: 24px; }
  body.cvx-public-complete :where(.gd-wrap,.gi-wrap,.ip-wrap,.tc-main,.ia-wrap) { padding-block: 28px 48px; }
  body.cvx-public-complete :where(.tc-card,.tc-offer,.ia-card,.ia-sample) { padding: 20px; }
  body.cvx-public-complete .tc-results { padding: 18px 14px; }
  body.cvx-public--areas .sa-hero { padding: 32px 20px; border-radius: 22px; }
  body.cvx-public--areas .sa-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.cvx-public--areas .sa-fact { padding: 14px; }
  body.cvx-public--catalogue .products-main-content { padding-block: 28px !important; }
  body.cvx-public--catalogue .products-filters-panel { padding: 10px 14px !important; }
  body.cvx-public--catalogue .products-filters-title { font-size: 15px !important; }
  body.cvx-public--catalogue .products-filter-toggle { font-size: 13px !important; }
  body.cvx-public--catalogue .products-item-image-container { aspect-ratio: 4/3; }
  body.cvx-public--search .filter-form { grid-template-columns: minmax(0,1fr); }
  body.cvx-public--search .search-filters { padding: 18px; }
  body.cvx-public--import dl { grid-template-columns: 1fr; padding: 14px 20px; }
  body.cvx-public--import dt { border: 0; padding-block: 14px 0; }
  body.cvx-public--import dd { padding-block: 6px 14px; }
  body.cvx-public--import dt:nth-last-child(2) { padding-block-start: 14px; }
  body.cvx-public--purchasing .onboarding form { padding: 22px 18px; }
  body.cvx-public--error .error-section { padding-block: 28px; }
  body.cvx-public-complete main :where(.tc-bc,.gd-bc,.gi-bc,.ia-bc,.ip-bc,.br-bc,.ar-crumbs) a { min-block-size: 44px; display: inline-flex; align-items: center; }
  body:is(.cvx-public-complete,:has(.ft-wrap),:has(.fi-wrap)):has(.cvx-bar) { padding-block-end: calc(148px + env(safe-area-inset-bottom, 0px)); }
  body:is(.cvx-public-complete,:has(.ft-wrap),:has(.fi-wrap)) .cvx-bar {
    inset-inline: 12px;
    inline-size: auto;
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
    padding-block-end: 0;
    border-radius: 20px;
  }
  body:is(.cvx-public-complete,:has(.ft-wrap),:has(.fi-wrap)) .cvx-bar .cvx-bar__strip { padding: 10px 14px 0; font-size: 10px; }
  body:is(.cvx-public-complete,:has(.ft-wrap),:has(.fi-wrap)) .cvx-bar .cvx-bar__body { padding: 8px 10px 10px; }
  body:is(.cvx-public-complete,:has(.ft-wrap),:has(.fi-wrap)) .cvx-bar .cvx-bar__actions { display: flex; flex-direction: row; gap: 8px; inline-size: 100%; }
  body:is(.cvx-public-complete,:has(.ft-wrap),:has(.fi-wrap)) .cvx-bar .cvx-bar__btn { flex: 1 1 0; min-inline-size: 0; inline-size: auto; font-size: 13px; padding-inline: 10px; }
  body.cvx-public--product .cvx-bar--column .cvx-bar__quiet { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.cvx-public-complete main * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
@media print {
  body.cvx-public-complete .public-language-nav { display: none; }
  body.cvx-public-complete :where(:is(.public-hero,.premium-hero),.sa-hero,.seo-card) { background: #fff !important; color: #111; box-shadow: none; }
}